﻿.esg-tool-selector.tool-nt .wrapper .col-1  { display: flex; flex-direction: row; gap: 20px; }

.esg-tool-selector:not(.ztool-nt) .wrapper .col-1 { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: "gv lg nt rr"; gap: 20px; }

.esg-tool-selector:not(.ztool-nt) a.tool-nt { grid-area: nt; }
.esg-tool-selector:not(.ztool-nt) a.tool-gv { grid-area: gv; }
.esg-tool-selector:not(.ztool-nt) a.tool-lg { grid-area: lg; }

.esg-tool-selector-button { flex-basis: 100%; font-family: Roobert, sans-serif; font-size: 17px; font-weight: 500; color: var(--hl-dark-green); background-color: rgba(var(--hl-light-green-rgb), 0.3); padding: 10px; text-align: center; text-decoration: none; position: relative; transition: all 0.2s; }
.esg-tool-selector-button.active { background-color: var(--hl-light-green); pointer-events: none; }
.esg-tool-selector-button.active:after { content: ""; display: inline-block; width: 24px; height: 21px; position: absolute; top: calc(100% - 1px); left: 50%; margin-left: -12px; background-color: var(--hl-light-green); clip-path: polygon(0 0, 100% 0, 50% 100%);  }

.esg-tool-selector-button:hover { background-color: var(--hl-light-green); }


/*** These are so the GV and LG tools retain the same colours as normal. ***/

.esg-tool-selector.tool-gv .esg-tool-selector-button,
.esg-tool-selector.tool-lg .esg-tool-selector-button { background-color: rgba(var(--hl-light-green-rgb), 0.5); color: rgba(var(--hl-dark-green-rgb), 0.5); }

.esg-tool-selector.tool-gv .esg-tool-selector-button:not(.active):hover,
.esg-tool-selector.tool-lg .esg-tool-selector-button:not(.active):hover { background-color: var(--hl-light-green); color: var(--hl-dark-green); }

.esg-tool-selector.tool-gv .esg-tool-selector-button.active,
.esg-tool-selector.tool-lg .esg-tool-selector-button.active { background-color: var(--hl-dark-green); color: #ffffff; border-color: var(--hl-dark-green); }

.esg-tool-selector.tool-gv .esg-tool-selector-button.active:after,
.esg-tool-selector.tool-lg .esg-tool-selector-button.active:after { background-color: var(--hl-dark-green); }
