body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

.grid-container {
	--grid-cell-size: 175px;
	--grid-cell-gap: 60px;
	--grid-img-percentage: 80%;
	--grid-connector-color-disabled: #ccc;
	--grid-connector-color-enabled: #555;
	--grid-connector-arrow-size: 9px;
	position: relative;
	z-index: 1;
}

.grid-container .grid-scroller {
	--padding: 10px; /* To ensure that zooms don't cut off */

	position: relative;
	min-width: 100%;
	max-width: 100%;
	overflow-x: scroll;
    box-sizing: content-box;
	padding: var(--padding);
}

.grid-scroller::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 7px;
}
.grid-scroller::-webkit-scrollbar-thumb {
    border-radius: 50px;
    background-color: rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.3);
}

.grid-container[data-arrows="small"] {
	--grid-connector-arrow-size: 7px;
}

.grid-container[data-arrows="tiny"] {
	--grid-connector-arrow-size: 5px;
}

.grid-container .grid-scalers {
	display: flex;
    justify-content: center;
	gap: 10px;
	position: relative;
	z-index: 99;
	top: 0;
	width: 100%;
	height: 25px;
	height: auto;
	margin: 14px 0;
}

.grid-container .grid-scalers button {
	width: 25px;
	height: 25px;
	min-width: 25px !important;
	min-height: 25px !important;
	outline: none;
	border: none;
	cursor: pointer;
	background-size: contain;

	transition: all 0.15s;
}

.grid-container .grid-scalers button:hover {
	cursor: pointer;
	transform: scale(1.15);
}

.grid-container .grid-scalers button.normal {
	background-image: url('/img/icons/bt-gridscale-1.svg');
}

.grid-container .grid-scalers button.mid {
	background-image: url('/img/icons/bt-gridscale-2.svg');
}

.grid-container .grid-scalers button.default {
	background-image: url('/img/icons/bt-gridscale-1.svg');
}

.pathway-grid {
	position: relative;
	z-index: 2;
	display: inline-grid;
	gap: var(--grid-cell-gap);
	align-items: center;
	justify-items: center;
	justify-content: start;
	align-content: center;

	transform-origin: 50% 0;
}

.grid.css-centered {
	left: 50%;
    transform: translateX(-50%);
}

.gridCell {
	position: relative;
	z-index: 2;
	width: var(--grid-cell-size);
	height: var(--grid-cell-size);
}

.gridCell:focus-visible,
.popup .popup-close:focus-visible {
	outline: 2px inset black !important;
	/*outline: 2px inset var(--colour-secondary) !important;*/  /* Replace the above, with this */
	border-color: transparent !important;
	box-shadow: 0 0 8px black !important;
	/*box-shadow: 0 0 8px var(--colour-secondary) !important;*/  /* Replace the above, with this */
}

.gridCell.debug:after {
	content: attr(data-nodeid);
	position: absolute;
	top: 25%;
	right: 25%;
	width: 22px;
	height: 22px;
	text-align: center;
	background-color: #fff;
	border-radius: 100%;
	padding: 5px;
}

.gridCell img {
	object-fit: contain;
	object-position: 50% 50%;
	width: 100%;
	height: 100%;

	filter: grayscale(100%) contrast(0.8) opacity(50%);
	transition: all 0.2s;
}

.gridCell.earned img,
.gridCell:hover img,
.gridCell:focus-visible img {
	filter: none;
}

.gridCell:hover img {
	transform: scale(1.06);
}

.gridCell .gridCellPlacement {
	width: var(--grid-img-percentage);
	height: var(--grid-img-percentage);
	object-position: 0;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
}

.gridCell.finalNode .gridCellPlacement {
	width: 100%;
	height: 100%;
	background-color: transparent;
}

.grid-connector {
	position: absolute;
	z-index: 1;
	border-width: 0px;
	border-style: solid;
	border-color: var(--grid-connector-color-disabled);
}

.grid-connector.earned,
.grid-connector.earned.arrow:after {
	border-color: var(--grid-connector-color-enabled);
}

.grid-connector.horizontal {
	width: 100%;
	height: 0px;
	border-top-width: 2px;
}

.grid-connector.vertical {
	width: 0px;
	height: 100%;
	border-left-width: 2px;
}

.grid-connector.arrow:after {
	content: "";
	position: absolute;
	border-width: 0px;
	border-style: solid;
	border-color: var(--grid-connector-color-disabled);
}

.grid-connector.arrow.ltr:after {
	right: -2px;
	top: -1px;

	transform: translateY(-50%);
	
	border-left-width: var(--grid-connector-arrow-size);
	border-top: calc(var(--grid-connector-arrow-size) / 2) solid transparent;
	border-bottom: calc(var(--grid-connector-arrow-size) / 2) solid transparent;
}

.grid-connector.arrow.rtl:after {
	left: -2px;
	top: -1px;

	transform: translateY(-50%);

	border-right-width: var(--grid-connector-arrow-size);
	border-top: calc(var(--grid-connector-arrow-size) / 2) solid transparent;
	border-bottom: calc(var(--grid-connector-arrow-size) / 2) solid transparent;
}

.grid-connector.arrow.ttb:after {
	right: 1px;
	top: -2px;

	transform: translateX(50%);
	
	border-bottom-width: var(--grid-connector-arrow-size);
	border-left: calc(var(--grid-connector-arrow-size) / 2) solid transparent;
	border-right: calc(var(--grid-connector-arrow-size) / 2) solid transparent;
}

.grid-connector.arrow.btt:after {
	right: 1px;
	bottom: 0;

	transform: translateX(50%);

	border-top-width: var(--grid-connector-arrow-size);
	border-left: calc(var(--grid-connector-arrow-size) / 2) solid transparent;
	border-right: calc(var(--grid-connector-arrow-size) / 2) solid transparent;
}

.popup {
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: absolute;
	z-index: 100;
	min-height: 100px;
	font-family: 'Public Sans', sans-serif;
	padding: 20px;
	background-color: #fff;
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	box-sizing: border-box;
	opacity: 0;
	transform: translateY(15px);
	transition: all 0.25s;
}

@media (max-width: 600px) {
	.popup {
		position: absolute;
		left: 0 !important;
	}
}

.popup.animate-in {
	opacity: 1;
	transform: translateY(0);
}

.popup .popup-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.popup .popup-close {
	background-color: transparent;
	border: none;
	outline: none !important;
	box-shadow: none !important;
}

.popup .popup-close:after {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	padding: 6px;
	background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik05Ljc3ODUgMC4yMjkwOEM5LjcwODMzIDAuMTU4NzY1IDkuNjI0OTggMC4xMDI5OCA5LjUzMzIzIDAuMDY0OTE3OUM5LjQ0MTQ3IDAuMDI2ODU1NiA5LjM0MzExIDAuMDA3MjYzNTcgOS4yNDM3NyAwLjAwNzI2MzU3QzkuMTQ0NDMgMC4wMDcyNjM1NyA5LjA0NjA2IDAuMDI2ODU1NiA4Ljk1NDMxIDAuMDY0OTE3OUM4Ljg2MjU1IDAuMTAyOTggOC43NzkyIDAuMTU4NzY1IDguNzA5MDMgMC4yMjkwOEw1IDMuOTMwNTNMMS4yOTA5NyAwLjIyMTQ5NUMxLjIyMDc1IDAuMTUxMjczIDEuMTM3MzggMC4wOTU1Njg5IDEuMDQ1NjMgMC4wNTc1NjQ2QzAuOTUzODggMC4wMTk1NjAzIDAuODU1NTQzIDcuMzk5MTZlLTEwIDAuNzU2MjMzIDBDMC42NTY5MjMgLTcuMzk5MTdlLTEwIDAuNTU4NTg1IDAuMDE5NTYwMyAwLjQ2NjgzNSAwLjA1NzU2NDZDMC4zNzUwODUgMC4wOTU1Njg5IDAuMjkxNzE4IDAuMTUxMjczIDAuMjIxNDk1IDAuMjIxNDk1QzAuMTUxMjczIDAuMjkxNzE4IDAuMDk1NTY4OSAwLjM3NTA4NSAwLjA1NzU2NDYgMC40NjY4MzVDMC4wMTk1NjAzIDAuNTU4NTg1IC03LjM5OTE2ZS0xMCAwLjY1NjkyMyAwIDAuNzU2MjMzQzcuMzk5MTdlLTEwIDAuODU1NTQzIDAuMDE5NTYwMyAwLjk1Mzg4IDAuMDU3NTY0NiAxLjA0NTYzQzAuMDk1NTY4OSAxLjEzNzM4IDAuMTUxMjczIDEuMjIwNzUgMC4yMjE0OTUgMS4yOTA5N0wzLjkzMDUzIDVMMC4yMjE0OTUgOC43MDkwM0MwLjE1MTI3MyA4Ljc3OTI1IDAuMDk1NTY4OSA4Ljg2MjYyIDAuMDU3NTY0NiA4Ljk1NDM3QzAuMDE5NTYwMyA5LjA0NjEyIDAgOS4xNDQ0NiAwIDkuMjQzNzdDMCA5LjM0MzA4IDAuMDE5NTYwMyA5LjQ0MTQxIDAuMDU3NTY0NiA5LjUzMzE3QzAuMDk1NTY4OSA5LjYyNDkyIDAuMTUxMjczIDkuNzA4MjggMC4yMjE0OTUgOS43Nzg1QzAuMjkxNzE4IDkuODQ4NzMgMC4zNzUwODUgOS45MDQ0MyAwLjQ2NjgzNSA5Ljk0MjQ0QzAuNTU4NTg1IDkuOTgwNDQgMC42NTY5MjMgMTAgMC43NTYyMzMgMTBDMC44NTU1NDMgMTAgMC45NTM4OCA5Ljk4MDQ0IDEuMDQ1NjMgOS45NDI0NEMxLjEzNzM4IDkuOTA0NDMgMS4yMjA3NSA5Ljg0ODczIDEuMjkwOTcgOS43Nzg1TDUgNi4wNjk0N0w4LjcwOTAzIDkuNzc4NUM4Ljc3OTI1IDkuODQ4NzMgOC44NjI2MiA5LjkwNDQzIDguOTU0MzcgOS45NDI0NEM5LjA0NjEyIDkuOTgwNDQgOS4xNDQ0NiAxMCA5LjI0Mzc3IDEwQzkuMzQzMDggMTAgOS40NDE0MSA5Ljk4MDQ0IDkuNTMzMTcgOS45NDI0NEM5LjYyNDkyIDkuOTA0NDMgOS43MDgyOCA5Ljg0ODczIDkuNzc4NSA5Ljc3ODVDOS44NDg3MyA5LjcwODI4IDkuOTA0NDMgOS42MjQ5MiA5Ljk0MjQ0IDkuNTMzMTdDOS45ODA0NCA5LjQ0MTQxIDEwIDkuMzQzMDggMTAgOS4yNDM3N0MxMCA5LjE0NDQ2IDkuOTgwNDQgOS4wNDYxMiA5Ljk0MjQ0IDguOTU0MzdDOS45MDQ0MyA4Ljg2MjYyIDkuODQ4NzMgOC43NzkyNSA5Ljc3ODUgOC43MDkwM0w2LjA2OTQ3IDVMOS43Nzg1IDEuMjkwOTdDMTAuMDY2NyAxLjAwMjc0IDEwLjA2NjcgMC41MTczMDggOS43Nzg1IDAuMjI5MDhaIiBmaWxsPSIjQzFDMUMxIi8+DQo8L3N2Zz4=);
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-position: 50% 50%;

	transform: translate(50% -50%);
}

.popup .popup-title {
	font-size: 14px;
	font-weight: bold;
}

.popup .popup-subtitle {
	font-size: 10px;
	font-style: italic;
}

.popup .popup-desc {
	font-size: 10px;
}

/** Duplicate of class in _netm.css (with height and overflow added - might need to replicate these) */
.accessibility-content {
	display: inline-block;
	width: 0px;
	height: 0px;
	overflow: hidden;
	text-indent: -10000px;
}