body {
	color: black;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family:  'Inter', sans-serif;
	font: 16px;
	background: white;
	overflow: hidden;
	cursor: default;
}

#mobileHoldingPage {
	display: none;
}

.toggle > body {overflow: hidden;}

h1, h2, h3 {
	color: #000;
	font-weight: 700;
}

h1 {font-size: 32px;}

h2 {font-size: 24px;}

h3 {font-size: 18px;}

a {
	color: #de2a88;
	font-weight: bold;
	text-decoration: underline;
}

a:focus, a:hover {color: #000;}

/* Prevent overscroll bouncing on touchscreen */
@media (pointer: coarse) {

  html {overflow: hidden; width:100%;}

	/* Removed 'positon: fixed' as solution to main menu not opening on iPhone */
  body {height: 100%;}

}

.mobile {display: none;}

#landingPage {
	background: #f5f5f5;
	height: 100%;
	position: fixed;
	width: 100%;
	z-index: 10000;
}

#landingPage.fade-out {
	-webkit-animation: fadeOut 0.3s 1;
	animation: fadeOut 0.3s 1;
	animation-fill-mode: forwards; 
	/* display: none; */
}

#landingClose {
	border-radius: 100%;
	position: fixed;
}

.animation-circle {
	object-fit: cover;
	/* box-shadow: #cbcbcb -5px 15px 15px; */
	height: 70vh;
	left: calc(50% - 35vh);
	top: calc(50% - 35vh);
	width: 70vh;
	-webkit-animation: grow 4s 1;
	animation: grow 4s 1;
	border-radius: 100%;
	position: fixed;
	clip-path: inset(0px 0px 1.25px 0px);
}

.animation-circle:focus { outline:none !important; }

#landingClose {
	box-shadow: #d4db72 -5px 10px 15px;
	cursor: pointer;
	height: 25vh;
	left: calc(50% + 15vh);
	text-align: center;
	top: calc(50% + 15vh);
	transform: scale( 0 );
	width: 25vh;
	-webkit-animation: grow 3s 1;
	animation: grow 2.5s 1;
	animation-delay: 0.5s;
	animation-fill-mode: forwards; 
}

#landingClose p {
	font-size: 24px;
	font-weight: 700;
	position: relative;
	text-decoration: underline;
	top: 37%;
}

#landingClose:hover {
	transition: transform .5s ease;
	transform: scale(1.2);
}

#landingLogo, #landingVideo {
	box-shadow: #cbcbcb -5px 10px 15px;
	border-radius: 100%;
	left: calc(50% - 47vh);
	position: fixed;
	transform: scale( 0 );
	-webkit-animation: grow 3s 1;
	animation: grow 2.5s 1;
	animation-delay: 0.5s;
	animation-fill-mode: forwards; 
}

#landingLogo {
	top: calc(50% - 40vh);
	width: 25vh;
}

#landingVideo {
	cursor: pointer;
	top: calc(50% + 10vh);
	width: 35vh;
}

.video-embed {
	height: 100%;
	margin: auto;
	padding: 10%;
	position: fixed;
	width: 100%;
}

@-webkit-keyframes grow {
	0% {-webkit-transform: scale( 0 );}	
	100% {-webkit-transform: scale( 1 );}
}

@keyframes grow {
	0% {transform: scale( 0 );}	
	100% {transform: scale( 1 );}
}

@-webkit-keyframes fade {
	0% {opacity: 0;}	
	1% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fade {
	0% {opacity: 0;}	
	1% {opacity: 0;}
	100% {opacity: 1;}
}

@-webkit-keyframes fadeOut {
	0% {opacity: 1;}
	99% {opacity: 0;}
	100% {opacity: 0; visibility: hidden;}
}

@keyframes fadeOut {
	0% {opacity: 1;}
	99% {opacity: 0;}
	100% {opacity: 0; visibility: hidden;}
}

#landingVideoDisplay {
	background-color: rgba(0, 0, 0, 0.8);
	display: none;
	height: 100%;
	position: fixed;
	width: 100%;
}

#landingVideoDisplay.video-display {display: block;}

.landing-header {
	background-color: #12509f;
	color: #000;
	cursor: pointer;
	font-size: 20px;
	font-weight: 700;
	padding: 1rem;
	text-align: center;
	vertical-align: middle; 
}

.close-video {
	left: 10px;
	margin-top: 10px;
	position: fixed;
	width: 100%;
	z-index: 100;
}

.close-video span {
	color: #12509f;
	cursor: pointer;
	text-align: left;
	text-decoration: underline;
}

/* Loading Wheel */
#loadingWheelInitial,
#loadingWheelDraw {
	z-index: 9998;
	position: absolute;
	top: calc(50vh - 30px);
	right: calc(50vw - 30px);
	border: 12px solid rgba(179,179,179,0.7);
	border-radius: 50%;
	border-top: 12px solid #000;
	width: 60px;
	height: 60px;
	-webkit-animation: spin 1.5s linear infinite; /* Safari */
	animation: spin 1.5s linear infinite;
}

#loadingInfoInitial,
#loadingInfoDraw {
	z-index: 9998;
	position: absolute;
	display: inline-block;
	width: 180px;
	max-width: 500px;
	height: 30px;
	top: calc(50vh + 50px);
	left: calc(50vw - 90px);
	padding: 5px 10px;
	background-color: #000;
	color: #fff;
	font-weight: 700;
	text-align: center;
	border-radius: 6px;
}

#loadingInfo > p {
  margin: 0;
}

/* Hint labels */
#labelTogglePitch,
#labelFlyTo {
	/* REVIEW: Changed from position: absolute to avoid iOS overscroll */
	z-index: 100000;
	position: fixed;
	display: none;
	max-width: 500px;
	height: 30px;
	right: 60px;
	padding: 5px 10px;
	background-color: rgba(255,255,255,1);
	color: black;
	text-align: center;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	cursor: default;
}

#labelTogglePitch {top: 150px; width: 99.5px;}
#labelFlyTo {top: 190px; width: 128px;}


#labelTogglePitch::after,
#labelFlyTo::after {
	left: 100%;
	top: 50%;
	content: " ";
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255,255,255,0);
	border-left-color: rgba(255,255,255,1);
	border-width: 15px;
	margin-top: -15px;
}

#labelStoryMenu,
#labelMainMenu {
	/* REVIEW: Changed from position: absolute to avoid iOS overscroll */
	z-index: 100000;
	position: fixed;
	display: none;
	max-width: 500px;
	height: 30px;
	padding: 5px 10px;
	background-color: rgba(255,255,255,1);
	color: black;
	text-align: center;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
	cursor: default;
}

#labelStoryMenu {left: 220px; top: 45px; width: 130px;}
#labelMainMenu {left: 210px; top: 88px; width: 150px;}

#labelStoryMenu::after,
#labelMainMenu::after {
	right: 100%;
	top: 50%;
	content: " ";
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255,255,255,0);
	border-right-color: rgba(255,255,255,1);
	border-width: 15px;
	margin-top: -15px;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.zh, .hi {display:none;}

section > a > h3, section > a > h3:link,
section > a > h3:visited, section > a > h3:hover,
section > a > h3:active {
	color: black;
	margin-top: 0;
	font-size: 28px;
	font-weight: 900;
	text-decoration: none;
	text-align: left;
}

section > a > h4, section > a > h4:link,
section > a > h4:visited, section > a > h4:hover,
section > a > h4:active {
	color: black;
	margin-top: 0;
	font-size: 18px;
	font-weight: 900;
	text-decoration: none;
}

section > a > h1, section > a > h1:link,
section > a > h1:visited, section > a > h1:hover,
section > a > h1:active {
	color: black;
	font-weight: 900;
	text-decoration: none;
}

section > a > p, section > a > p:link,
section > a > p:visited, section > a > p:hover,
section > a > p:active {
	color: black;
	font-weight: 400;
	text-decoration: none;
}

section > a > ul, section > a > ul:link,
section > a > ul:visited, section > a > ul:hover,
section > a > ul:active {
	color: black;
	font-weight: 400;
	text-decoration: none;
}

section > p > a,
section > p > a:link,
section > p > a:visited,
section > p > a:hover,
section > p > a:active {
  text-decoration: none;
	font-weight: 400;
  color: black;
}

section > p > a.section-link {
	 color: #499ffc;
}

section > a, section > a:link,
section > a:visited, section > a:hover,
section > a:active {
  text-decoration: none;
  font-weight: 400;
}

table,
table:link,
table:visited,
table:hover {
  color: black;
  background-color: rgba(0,0,0,0);
  text-decoration: none;
  outline: none;
}

button.reset_view::before,
button.threed_rotate::before,
button.labels-button::before,
button.labels-off-button::before,
button.light-style-button::before,
button.dark-style-button::before,
button.satellite-style-button::before {
	font-family: "Material Icons";
	font-feature-settings: 'liga';
	font-size: 20px;
	line-height: 24px;
	vertical-align: middle;
}

button.reset_view::before {content: "home";}

button.threed_rotate::before{content: "3d_rotation";}

button.labels-button::before{content: "label";}

button.labels-off-button::before{content: "label_off";}

button.light-style-button::before{content: "brightness_5";}

button.dark-style-button::before{content: "brightness_4";}

button.satellite-style-button::before{content: "satellite";}

div.modal-btn {
	border: solid 1px #12509f;
	height: 40px;
	min-height: 100%;
	min-width: 100%;
}

button.modal-button {
	background: url('../assets/Icons/modal-menu.svg') no-repeat;
	background-color: #12509f;
	border: none;
	height: 40px;
	pointer-events: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
}

button.modal-button:focus,
button.modal-button:active,
button.modal-button:hover {
	background-color: #12509f;
	border: none;
}

button.modal-button:hover {opacity: 0.85;}

/* button.modal-button::before {
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
	vertical-align: middle;
	content: "Find out more";
} */

#wrapper, #wrapperFeatures {
	width: 100vw;
	height: 100vh;
}

#features {
  position: absolute;
  width: 500px;
  height: 100%;
  left: -520px;
  max-width: 50%;
  top: 0;
  overflow-x: hidden;
	overflow-y: auto;
	/* scrollingPrompt */
	scroll-behavior: smooth;
  color: #000;
  background-color: #fff;
  padding-left: 35px;
  z-index: 10000;
	-webkit-transition: left 0.2s linear;
	transition: left 0.2s linear;
	text-align: justify;
  cursor: default;
	direction: rtl;
}

#wrapperFeatures.switch>#features {
  pointer-events: none;
}

#wrapperFeatures.toggle>#features {
	left: 0px;
}

#startStopPresentationBtn {
	padding: 10px 20px 10px 0;
	z-index: 1000000;
	top: 66px;
	left: -455px;
	width: 56px;
	height: 56px;
	position: fixed;
	cursor: pointer;
	-webkit-transition: left 0.2s linear;
	transition: left 0.2s linear;
	opacity: 0.9;
}

#wrapperFeatures.toggle>#startStopPresentationBtn {
	left: 10px;
}
#wrapperFeatures.toggle>#startStopPresentationBtn:hover,
#wrapperFeatures.toggle>#startStopPresentationBtn:active {
  opacity: 1;
}

#startStopPresentationBtn > i {
	font-size: 36px;
}

/* Hide scroll prompt when not .active */
#scrollingPrompt {display: none;}

#scrollingPrompt.active {
	display: block;
	z-index: 1000000;
	bottom: 54px;
	left: -455px;
	width: 54px;
	height: 54px;
	position: fixed;
	cursor: pointer;
	background-color: #fff;
	border-radius: 43px;
	box-shadow: 0 2px 8px 2px rgba(0,0,0, 0.3);
	-webkit-transition: left 0.2s linear;
	transition: left 0.2s linear;
	opacity: 0.75;
}

#wrapperFeatures.toggle>#scrollingPrompt.active {
	left: 225px;
}
#wrapperFeatures.toggle>#scrollingPrompt.active:hover,
#wrapperFeatures.toggle>#scrollingPrompt.active:active {
  opacity: 1;
}

#scrollingPrompt.active > i {
	position: absolute;
	font-size: 54px;
  top: 2px;
}


#featuresExpand {display: none;}

.story-logo {
	margin: 0 0 20px 0;
	width: 100%;
}

section {
	overflow: hidden;
	padding:  20px 50px 0px 20px;
	margin-bottom: 80px;
	line-height: 25px;
	opacity: 0.25;
	font-size: 14px;
	direction: ltr;
}
section.active {
  opacity: 1;
}
section:last-child {
  border-bottom: none;
  margin-bottom: 1000px;
}

.story-image {
	max-width: 400px;
	width: 100%;
}

/* Map Keys */
.paddingBetweenCols tr {height: 36px;}
.paddingBetweenCols td {width: 80%; padding-right: 10px;}

.keySquare {width: 24px; height: 24px; margin-left: 20px; text-align: center;}
.keyLine {min-width: 50px; height: 5px; padding: 0; text-align: center;}
.keyLineDashed {min-width: 25px; height: 5px; float: left;}
.keySVG {text-align: center;}

#img {
  width: 100%;
  display: block;
}

/* Close Features Menu */
#menuClose {
  padding: 10px 10px;
	z-index: 1000000;
	top: 10px;
  left: -455px;
	width: 56px;
	height: 56px;
  position: fixed;
  cursor: pointer;
	-webkit-transition: left 0.2s linear;
	transition: left 0.2s linear;
  opacity: 0.7;
}
#wrapperFeatures.toggle>#menuClose {
	left: 10px;
}
#wrapperFeatures.toggle>#menuClose:hover,
#wrapperFeatures.toggle>#menuClose:active {
  opacity: 0;
}

/* ScrollTop DESKTOP */
#scrollTop {
  padding: 10px 10px;
	z-index: 1000000;
	bottom: 20px;
  left: -455px;
	width: 56px;
	height: 56px;
  position: fixed;
  cursor: pointer;
	-webkit-transition: left 0.2s linear;
	transition: left 0.2s linear;
  opacity: 1;
}
img#scroll {
	width: 36px;
	height: 36px;
}
#wrapperFeatures.toggle>div#scrollTop {
	left: 10px;
}
#wrapperFeatures.toggle>div#scrollTop:hover,
#wrapperFeatures.toggle>div#scrollTop:active {
  opacity: 1;
}

#sidebar {
	z-index: 100000;
	position: fixed;
	left: -355px; /* extra 5px to ensure it's not rendered */
	width: 350px;
	max-width: 90%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	direction: rtl;
	color: #000;
	background-color: #fff;
	border-right: 1px solid #ddd;
	box-shadow: 0 -1px 24px rgba(0, 0, 0, 0.4);
	-webkit-transition: left 0.2s linear;
	transition: left 0.2s linear;
}

#sidebar * {
	direction: ltr;
}

#sidebar > .close-sidebar {
	background-color: #12509f;
	cursor: pointer;
    direction: rtl;
	height: 28px;
    padding: 2px 0;
	position: fixed;
	width: 100%;
	z-index: 100000;
}

#sidebar > .close-sidebar:hover {opacity: 0.8;}

#sidebar > .close-sidebar > i {
	color: white;
	margin: 0 5px;
}

#sidebar > .close-sidebar > span {
    color: #fff;
	font-family: 'Inter';
    font-size: 14px;
    font-weight: 700;
	line-height: 24px;
	vertical-align: top;
}

.scrollbar-primary::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(0,0,0,0); }

.scrollbar-primary::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #000;
  }

#wrapper.toggle>#sidebar {
	left: 0;
}

#sidebar label.map-toggle {
	font-size: 14px;
	position: relative;
	display: flex;
	align-items: center;
	height: 34px;
	padding: 10px 20px;
	cursor: pointer;
}

#sidebar i {
	margin: 5px 10px;
	width: 24px;
	height: 24px;
}

#sidebar h3 {padding-left: 20px;}

label.shown {
	color: #919694;
}

body:not(.touch) #sidebar label:hover, #sidebar label.selected {
	opacity: 0.7;
}

/* Dashboard Text and Search Functions */
#dashboard {
	height: 500px;
 	position: relative;
	top: 10px;
 	z-index: 10000;
}

#dashHeader {
	position: relative;
	max-height: 0;
	white-space: normal;
}

.btn-group .btn {
	border: 2px solid grey;
	border-radius: 4px;
	text-align: left;
}

.btn-group .multiselect-selected-text {
	color: #000;
	text-align: left;
}

.btn::after {opacity: 0;}

.multiselect-container {
	/* background: url("../assets/tile.png") repeat rgba(0,0,0,0); */
	border: 1px solid #ebebeb;
	border-radius: 0;
	margin-top: 0;
	min-width: 240px;
	max-height: 260px;
	overflow-y: auto;
	top: -10px;
	z-index: 1000000;
}

li > a {
	color: #000;
	font-size: 16px;
	font-weight: 700;
}

li > a:focus {outline: none;}

li.active > a {
	color: #12509f;
	font-weight: 700;
}

label.checkbox {
	background-image: url("../assets/Checkboxes/checkbox.svg");
	background-position: 0 0;
	background-repeat:no-repeat;
	color: rgba(0,0,0,0.7);
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	height: 18px;
	line-height: 18px;
	margin: 4px 0 4px 10px;
	padding: 0 0 0 25px;
	vertical-align: top;
}

input[type=checkbox] {
	height: 0;
	margin: 0 5px 0 0;
	width: 0;
	vertical-align: middle;
	visibility: hidden;
}

li.active > a > label.checkbox {background-position: 0px -18px;}

.dropdown-menu {
	background-color: rgba(255,255,255,1);
	color: white;
	opacity: 1;
	/* position: absolute;
	top: 0px;
	left: 0px; */
}

#devSelector .dropdown-menu {
	will-change: transform;
	transform: translate3d(50px, 100px, 0px);
}

#oppSelector .dropdown-menu {
	will-change: transform;
	transform: translate3d(50px, 140px, 0px);
}

#autSelector .dropdown-menu {
	will-change: transform;
	transform: translate3d(50px, 180px, 0px);
}

.dropdown-menu>li>a {padding: 0;}

.dropdown-menu>.active>a, 
.dropdown-menu>.active>a:focus, 
.dropdown-menu>.active>a:hover {background-color: rgba(255,255,255,1);}

.caret {display:none;}

#devSelectorInstruction {
	display: inline-block;
	position: absolute;
	width: 240px;
	top: 75px;
	height: 20px;
	margin: 0 20px;
	font-size: 14px;
	font-weight: 700;
}

#devSelector .btn-group .btn {
	display: inline-block;
	position: absolute;
	top: 50px;
	width: 240px;
	height: 40px;
	margin: 0 20px 0 50px;
	padding: 5px 10px 5px 10px;
	border: 1px solid #cbcbcb;
	border-radius: 0;
	outline-style: none;
	font-size: 14px;
	/* font-weight: 700; */
	color: #000;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url("../assets/icons/dropdown.svg") 100% no-repeat #fff;
}

select.devSelector > option,
select.oppSelector > option
select.autSelector > option {
	/* background-color: black; */
	color: black;
}

#devSelectorImg {
	background-color: #12509f;
	border-bottom-right-radius: 20px;
	border-top-right-radius: 20px;
	height: 40px;
	position: absolute;
	right: 69px;
	top: 61px;
	width: 45px;
}

#oppSelectorInstruction {
	display: inline-block;
	position: absolute;
	top: 140px;
	width: 240px;
	height: 20px;
	margin: 0 20px;
	font-size: 14px;
	font-weight: 700;
}

#oppSelector .btn-group .btn  {
	display: inline-block;
	position: absolute;
	top: 90px;
	width: 240px;
	height: 40px;
	margin: 0 20px 0 50px;
	padding: 5px 10px 5px 10px;
	border: 1px solid #cbcbcb;
	border-radius: 0;
	outline-style: none;
	font-size: 14px;
	/* font-weight: 700; */
	color: #000;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url("../assets/icons/dropdown.svg") 100% no-repeat #fff;
}

#autSelectorInstruction {
	display: inline-block;
	position: absolute;
	top: 120px;
	width: 240px;
	height: 20px;
	margin: 0 20px;
	font-size: 14px;
	font-weight: 700;
}

#autSelector .btn-group .btn  {
	display: inline-block;
	position: absolute;
	top: 130px;
	width: 240px;
	height: 40px;
	margin: 0 20px 0 50px;
	padding: 5px 10px 5px 10px;
	border: 1px solid #cbcbcb;
	border-radius: 0;
	outline-style: none;
	font-size: 14px;
	/* font-weight: 700; */
	color: #000;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url("../assets/icons/dropdown.svg") 100% no-repeat #fff;
}

#columnFilterInstruction {
	display: inline-block;
	position: absolute;
	top: 10px;
	width: 240px;
	height: 20px;
	margin: 0 20px;
	font-size: 14px;
	font-weight: 700;
}

#columnFilterWrapper {
	display: inline-block;
	position: absolute;
	top: 0;
	width: 240px;
	height: 30px;
	margin: 0 20px 0 50px;
}

#columnFilter {
	display: inline-block;
	position: absolute;
	width: 240px;
	height: 40px;	
	padding: 10px 10px 10px 10px;
	border: 1px solid #cbcbcb;
	outline-style: none;
	font-size: 14px;
	color: #000;
	background-color:  #fff;
}

#columnFilterImg {
	background-color: #12509f;
	background-image: url('../assets/icons/search.svg');
	display: inline-block;
	height: 40px;
	position: absolute;
	right: 1px;
	width: 40px;
}

/* #columnFilterImg > i {font-size: 20px;} */

ul.multiselect-container.dropdown-menu {
	width: 100%;
	/* max-height: 200px; */
	overflow-y: hidden;
	z-index: 100000000;
}

#tableInfo {
  z-index: 100000;
  position: absolute;
  display: inline-block;
  width: 300px;
  max-width: 500px;
  height: 50px;
  top: -50px;
  left: 50vw;
  padding: 0 15px;
  background-color: rgba(80,80,80,0.8);
  color: white;
  text-align: center;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
	cursor: default;
}

#tableInfo > p {
  margin: 0;
  padding-top: 6px;
	font-size: 14px;
}

/* DataTable */
#paTable_wrapper {
	left: 0;
	position: relative;
	top: 220px;
  	/* max-width: calc(100% - 25px);
	margin: 0 0 0 25px; */
}

#paTable_info, #paTable_paginate, #paTable_length {display: none;}

.dataTables_scrollBody {
	border-bottom: #12509f 4px solid !important;
	position: relative;
	white-space: normal;
	word-wrap: break-word;
	height: 250px !important;
	width: 100%;
	/* max-width: 300px; */
	overflow-x: hidden !important;
	background: none !important;
	/* margin-left: 20px; */
}

#paTable {
	position: relative;
 	table-layout: fixed;	
	font-size: 14px;
	color: #000;
	cursor: pointer;
	padding-bottom: 30px;
	padding-left: 20px;
  /* background-color: black; */
}

div > #paTable_filter { display:none; }

th.details-control.sorting_disabled {
	position: fixed;
	max-width: 10px;
	padding: 0;
}

th#columnName {
	position: relative;
	color: #000;
	font-size: 18px;
	font-weight: 700;
	padding-left: 28px;
	left: -20px;
	border-bottom: none;
}

table.dataTable thead .sorting_asc {
	background: url("../assets/arrow-up-small-black.png") -1.5% / 10% no-repeat;
}
table.dataTable thead .sorting_desc {
	background: url("../assets/arrow-down-small-black.png") -1.5% / 10% no-repeat;
}

td.details-control.purple-control {
	background: url('../assets/Checkboxes/add_circle_purple.svg') no-repeat center center;
	cursor: pointer;
	max-width: 10px;
}

td.details-control.yellow-control {
	background: url('../assets/Checkboxes/add_circle_yellow.svg') no-repeat center center;
	cursor: pointer;
	max-width: 10px;
}

td.details-control.green-control {
	background: url('../assets/Checkboxes/add_circle_green.svg') no-repeat center center;
	cursor: pointer;
	max-width: 10px;
}

td.details-control.blue-control {
	background: url('../assets/Checkboxes/add_circle_blue.svg') no-repeat center center;
	cursor: pointer;
	max-width: 10px;
}

td.details-control.orange-control {
	background: url('../assets/Checkboxes/add_circle_orange.svg') no-repeat center center;
	cursor: pointer;
	max-width: 10px;
}

td.details-control.red-control {
	background: url('../assets/Checkboxes/add_circle_red.svg') no-repeat center center;
	cursor: pointer;
	max-width: 10px;
}

td.sorting_1,
tr.odd.shown.parentRow > td.sorting_1,
tr.even.shown.parentRow > td.sorting_1 {
	height: 40px;
	min-width: 210px;
  	max-width: 210px;
}

td.unique-id {
	display: none;
}

/* Table Child Rows */
table.dataTable > tbody > tr {
	background-color: rgba(0,0,0,0);
	font-weight: 700;
}

table.dataTable > tbody > tr * .childRowOpen {
	pointer-events: none;
	cursor: default;
}

table.childRowOpen {
	font-size: 14px;
	margin-left: 20px;
	max-width: calc(100% - 20px);
	pointer-events: none;
}

table.childRowOpen > tbody > tr > td {
	background-color: rgba(0,0,0,0);
	color: #000;
	font-weight: 400;
	vertical-align: middle;
}

/* .table-striped > tbody > tr.odd {
	background-color: rgba(0,0,0,0);
	color: rgba(111,111,111,1);
	opacity: 0.85;
}

.table-striped > tbody > tr.even {
	color: rgba(179,179,179,1);
	opacity: 0.85;
} */

tr.odd.parentRow.shown,
tr.even.parentRow.shown,
tbody > tr.odd:hover,
tbody > tr.even:hover {
	color: #000;
	cursor: pointer;
	opacity: 1;
}

tr.odd.parentRow.shown,
tr.even.parentRow.shown {
	font-weight: 700;
}
/* Dashboard end */

/* #wrapper.toggle>#main {
	opacity: 0.7;
}

#wrapper.toggle>#main * {
	pointer-events: none;
} */

#main {
	width: 100%;
	height: 100%;
}

#map {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	/* For full-screen map on iOS Chrome - min-width: 100vw */
	min-width: 100vw;
	height: 100%;
}

.arrow {
	text-align: center;
	cursor: pointer;
}

.narrowArrow {display: none;}

.maintained {
	padding-bottom: 10px;
}

#carouselButtons {
		position: absolute;
		left: 4px;
    bottom: 2px;
		color: white;
		opacity: 0.6;
}

.playpause{
	color: white;
	cursor: pointer;
}

.playpause:hover{
	color: white;
	opacity: 0.9;
	text-decoration: none;
}

.modal-header .close {
	color: #000;
	opacity: 0.9;
}

.modal-header .close:hover {opacity: 0.5;}

.modal-header {
	padding-top: 20px;
	padding-bottom: 0;
	border-bottom: none;
}

.modal-title {
	display: inline-block;
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

#modalLogo {
	display: block;
	width: 60%;
}

.modal-img {
	max-height: 100px;
	float: right;
	margin: 10px 0 0 10px;
}

#flytoButtons {
	text-align: center;
	font-size: 9.5pt;
	font-weight: bold;
}

.btn-r {
		display: inline;
		content: '';
		transform: skewX(-7deg);
		width: 20%;
		height: 40px;
		padding: 0px;
		margin: 0px 5px 10px 5px;
		border: none;
		border-radius: 0px;
		background: #009CA6;
}

.btn-r:hover {
    opacity: 0.8;
}

#blank {cursor: default; opacity: 0;}

/* fly button text */
.fly-r {
		display: inline-block;
		transform: skewX(7deg);
		margin: 0px auto;
		width: 20%;
		height: 40px;
		border: none;
		display: table-cell;
		vertical-align: middle;
		color: #fff;
		z-index: 1000;
}

.btn-l {
		display: inline;
		content: '';
		transform: skewX(7deg);
		width: 20%;
		height: 40px;
		padding: 0px;
		margin: 0px 5px 10px 5px;
		border: none;
		border-radius: 0px;
		background: #009CA6;
}

.btn-l:hover {
    opacity: 0.8;
}

.fly-l {
		display: inline-block;
		transform: skewX(-7deg);
		margin: 0px auto;
		width: 20%;
		height: 40px;
		border: none;
		display: table-cell;
		vertical-align: middle;
		color: #fff;
		z-index: 1000;
}

.btn-label {
		display: inline;
		cursor: default;
		content: '';
		transform: skewX(7deg);
		width: 20%;
		height: 40px;
		padding: 0px;
		margin: 0px 5px 10px 5px;
		border: none;
		border-radius: 0px;
		outline: none;
		background: #000;
}

#deetu {
	opacity: 0.8;
}

#deetu:hover {
	opacity: 1;
}

#explore {
	opacity: 0.8;
	height: 25px;
}

#explore:hover {
	opacity: 1;
}

#sidebarMenu {
	background-color: rgba(255,255,255, 0);
	padding: 0px;
	padding-left: 0px;
	position: fixed;
	z-index: 1000;
	top: 40%;
	left: -91px;
	color: grey;
	text-decoration: none;
	transform: rotate(270deg);
}

#sidebarMenu:hover {opacity: 0.85;}

/* #menu {
	background-color: rgba(255,255,255, 0);
	padding: 0px;
	padding-left: 0px;
	position: absolute;
	z-index: 1000;
	left: -9px;
	top: 120px;
	color: grey;
	text-decoration: none;
} */

.deetu-static {
	position: fixed;
	display: inline-block;
	width: 100px;
	bottom: 10px;
	right: 10px;
	z-index: 9998;
}

.client-wordmark {
	bottom: 6px;
	height: 40px;
	position: fixed;
	right: 112px;
}

.deetu-wordmark {
	height: 40px;
}

#reset {
	align-items: center;
	background-color: #fff;
    border: 2px solid #12509f;
    border-radius: 30px;
    color: #12509f;
	cursor: pointer;
	display: flex;
    font-weight: 700;
    height: 50px;
	justify-content: center;
	margin: 10px 20px;
    text-transform: uppercase;
    width: 270px;
    vertical-align: middle;
}

#reset>i,
#download_btn_desktop>i {
	/* color: 12509f; */
	width: 20px;
	height: 20px;
	font-size: 20px;
	margin: 0;
	margin-right: 3px;
}

#download_btn_desktop {
	align-items: center;
	background-color: #12509f;
    border: 2px solid #12509f;
    border-radius: 30px;
    color: #fff;
	cursor: pointer;
	display: flex;
    font-weight: 700;
    height: 50px;
	justify-content: center;
	margin: 10px 20px;
    text-transform: uppercase;
    width: 270px;
    vertical-align: middle;
}

#download_btn_desktop:hover {
	opacity: 0.8;
}

label[for="filter__industriallogistics"].shown {
	color: #EC671C; /*orange*/
}

label[for="filter__mixeduse"].shown {
	color: #00956E; /*green*/
}

label[for="filter__commercialindustrial"].shown {
	color: #248DC1; /*blue*/
}

label[for="borders"].shown {
	color: #919694; /*purple*/
}

label[for="greenspaces"].shown {
	color: #799C4B; /*green*/
}

label[for="railway"].shown {
	color: #919694; /*grey*/
}


.footer {
	padding: 10px 0;
	/* Inner flex layout */
	display: flex;
	font-size: 14px;
	justify-content: center;
	flex-direction: row;
	align-items: center;
}

.footer>* {
	color: #777;
	text-decoration: none;
	margin: 0 10px;
}

.centrer {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.client-logo {
	padding: 40px 0 10px 10px;
}

.client-logo > a > img {
	width: 90%;
}

table {
	width: 100%;
}

th {
	color: #000;
	text-align: left;
}

ul {
	padding-left: 20px;
}

#sidebar ul {
	padding-left: 0;
}

hr {
	border-color: #ccc transparent transparent transparent;
	border-style: solid;
}

/* #sidebar li {
	display: flex;
	align-items: center;
} */

img {
	margin-right: 10px;
}

svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
	fill: currentColor;
}

label>span {
	position: relative;
	flex-grow: 1;
}

.mapboxgl-ctrl-group > button.ctrl-button {
  width: 100%;
  padding: 0 5px;
	font-family: 'Arial';
}

/* .mapboxgl-control-container .mapboxgl-ctrl-top-right {top: 10px; right:10px;}

.mapboxgl-ctrl-top-right .mapboxgl-ctrl {margin: 10px 0 0 0;}

.mapboxgl-ctrl-top-right.mapboxgl-ctrl-group {margin-top: 50px;} */

#geocoder {
	right: 50px;
	z-index: 101;
}

.mapboxgl-ctrl-geocoder, .mapboxgl-ctrl-geocoder {
	box-shadow: none;
	height: 40px;
}

.mapboxgl-ctrl-geocoder .geocoder-icon-search {
	background-color: #12509f;
	background-image: url(../assets/icons/search.svg);
	border: none;
	height: 100%;
	left: calc(100% - 40px);
	padding: 6px 12px;
	top: 0;
	width: 40px;
}

#geocoderInput {
	border: #cbcbcb solid 1px;
	font-size: 14px;
	height: 40px;
	padding-left: 20px;
}

.geocoder-pin-right {display: none;}

ul.suggestions {
	border-radius: 0;
	box-shadow: none;
	font-size: 14px;
}

ul.suggestions li a {text-decoration: none;}

/* ul.suggestions li.active a {background-color: #12509f; color: #000;} */

/* Map Toggle Pills */

.pill-container {
	position: fixed;
	top: 15px;
	right: 500px;
	z-index: 1;
}

.map-pill,
.menu-pill {
	background-color: white;
	border: 1px solid #ebebeb;
	border-radius: 20px;
	color: #000;
	cursor: pointer;
	display: inline-block;
	font-size: 15px;
	font-weight: bold;
	height: 30px;
	line-height: 16px;
	margin-right: 10px;
	padding: 1px 15px 5px 12px; 
	vertical-align: top;
}

.map-pill.active,
.menu-pill.active {
	background-color: #12509f;
	border-color: rgba(0,0,0,0);
	color: white;
	font-weight: bold;
}

.map-pill.disabled,
#legend-container.disabled {
	background-color: #c7c8c8;
	color: black;
	cursor: default;
	pointer-events: none;
}

.map-pill.home:active {
	background-color: #12509f;
	border-color: rgba(0,0,0,0);
	color: white;
	font-weight: bold;
}

.map-pill .material-icons,
#legend-toggle .material-icons,
.menu-pill .material-icons {
	color: #000;
	font-feature-settings: 'liga';
	font-size: 22px;
	line-height: 26px;
	padding-right: 2px;
	vertical-align: middle;
}

.map-pill.active .material-icons,
.menu-pill.active .material-icons {
	color: white;
}

.map-pill-icons {
	height: 22px;
	line-height: 20px;
	margin: 2px 0 1px 0;
	padding-right: 2px;
	vertical-align: middle;
}

.map-pill span,
.menu-pill span {
	margin-left: 5px;
	vertical-align: middle;
}

#legend-toggle{
	color: #000;
	cursor: pointer;
	direction: ltr;
	font-size: 15px;
    font-weight: 600;
    padding: 2px 0;
	text-align: center;
}


#legend-toggle span {margin-left: 5px;}

#legend-container {
	background: white;
	border-radius: 15px;
	direction: rtl;
	display: inline-block;
    font-family: 'Inter';
	max-height: calc(100vh - 180px);
	padding: 0 5px 0 0;
	pointer-events: all;
	position: absolute;
	width: 180px;
	z-index: 10;
}

#legend-container > #legend-table {
	direction: rtl;
	margin-top: 10px;
	max-height: calc(100vh - 230px);
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0 0 5px 10px;
}

#legend-container > #legend-table > table{
	direction: ltr;
}

#legend-container > table > tbody > tr > td{
	padding-right: 10px;
}

#freeportInfoPopup {
	background-color: white;
	color: black;
	display: none;
	padding: 10px;
	position: fixed;
	right: 60px; 
	text-align: justify;
	top: 60px;
	width: 240px;
	z-index: 100;
}

.circle{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin: 5px 10px;
}

.square{
	width: 20px;
	height: 20px;
	margin: 5px 10px;
}

.line{
	width: 24px;
	height: 5px;
	margin: 5px 10px;
}

.header{
	font-size: 13px;
	font-weight: 600;
	padding: 10px 0 5px 0;
}

.legend-element {font-size: 13px;}

.icon{
	margin: 5px 10px;
}

.icon.pin {
	height: 20px;
}

.route{
	height: 8px;
	max-width: 30px;
	margin: 10px 5px;
}

/* .mapboxgl-popup-content > table > tbody > tr > td, .mapboxgl-popup-content > table > tbody > tr > th {
	padding: 10px;
} */

.mapboxgl-popup-tip {
	border-top-color: #12509f !important;
	border-bottom-color: #12509f !important;
}

/* Map key sections */
.freeport, .iz, .taxsite {
	display: none;
}

.home.active{
	border-radius: 20px 20px 0 0;
}

.properties-filter{
	position: absolute;
	right:  0;
	z-index: 10;
	background-color: white;
	display: grid;
	border-radius: 0 0 20px 20px;
	margin: 0 10px 0 0;
	max-height: 600px;
	width: 193px;
	top: 30px;
}

.properties-filter::-webkit-scrollbar {
	border-radius: 20px;
	width: 15px;
}
.properties-filter::-webkit-scrollbar-thumb {
	background-color: #12509f;
	border-radius: 20px;
}
.properties-filter::-webkit-scrollbar-track {
	background-color: #f1f1f1;
	border-radius: 20px;
}

.close-button{
    padding: 5px .5rem;
	cursor: pointer;
	pointer-events: all;
	font-weight: 600;
}

.close-button > span{
	margin-right: 7px;
}

.properties-filter > div{
	display: flex;
	align-items: left;
	justify-content: justify;
	height: 30px;
	border-bottom: 1px solid #12509f;
}

.properties-filter > div > label{
	cursor: pointer;
	margin: 0;
	padding: 5px;
}

.properties-filter > div > label:only-child{
	margin-left: 32px;
}

.properties-filter > div > input{
	cursor: pointer;
	margin: 0 10px;
}

.mapboxgl-popup.properties-popup {
	max-width: 310px !important;
}

.properties-popup > .mapboxgl-popup-tip{
	/* left: calc(50vw - 150px);
	top: calc(50vh - 120px); */
	border-top-color: rgba(0,0,0,0) !important;
	border-bottom-color: rgba(0,0,0,0) !important;
	border-right-color: #12509f;
}

.last, .properties-filter > :last-child:not(.loading-animation) {
	border: none !important;
}

.loading-animation {
	margin: 75px;
	width: 50px;
	height: 50px !important;
	border-radius: 50%;
	animation: spin 2s infinite reverse linear;
	border-top-color: #12509f !important;
	border-right-color: #12509f !important;
	border: 10px solid transparent;
}

@keyframes spin {
    0% {
        transform: rotate(-45deg);
    }
    100% {
        transform: rotate(315deg);
    }
}

.view-button::before {
	float: left;
	content: "flight_land";
	font-family: "Material Icons";
	line-height: 24px;
	padding-left: 1px;
	padding-right: 6px;
	font-feature-settings: 'liga';
}

.ctrl-icon {
  float: left;
	font-size: 20px;
}

.ctrl-icon-text {
  float: left;
  line-height: 24px;
}

.mapboxgl-ctrl-group {
	border: #cbcbcb solid 1px;
	border-radius: 0px;
	box-shadow: none !important;
}

.mapboxgl-popup {
	/* Override inline style - Mapbox V1.0.0 */
  max-width: 300px !important;
  cursor: default;
  z-index: 10;
}

.mapboxgl-popup a {cursor: pointer;}

.mapboxgl-popup.info-popup {
	max-width: 95% !important;
	top: 10px;
}

.mapboxgl-popup-close-button {
	background-color: #12509f;
	border-radius: 0;
	color: #fff;
  	font-size: 30px;
}

.mapboxgl-popup-close-button:hover {background-color: #12509f;}

.popup-title {
	color: #fff;
	padding: 15px 5px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: bold;
	margin: 0;
	background-color: #12509f;
	text-align: center;
	text-transform: uppercase;
}

.popup-title.flat {
	border-radius: 0;
}

.popup-title > span {
	display: block;
	max-width: 90%;
}

.popup-table {
	color: #000;
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	margin: 5px;
	width: auto;
	/* transform: skewX(7deg); */
}

.popup-para {
	color: #000;
	font-family: 'Inter', sans-serif;
	margin: 8px;
	margin-right: 0;
	/* max-height: 150px;
	overflow-y: auto; */
	padding-right: 5px;
	text-align: justify;
}

#expand-stats {
	overflow-y: auto;
	max-height: 350px;
}

.popup-table td, .popup-table th {
    padding: 3px;
}

.website-icon > a {
	color: #337ab7;
	font-weight: 400;
}

.mapboxgl-popup-content > .btn-info {
	background-color: #12509f;
	border: 1px solid #12509f;
	border-radius: 20px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 15px;
	font-weight: bold;
	height: 30px;
	line-height: 16px;
	margin: 10px;
	padding: 0 12px;
	pointer-events: auto;
	width: 105px;
}

.mapboxgl-popup-content > .btn-info:focus {
	border-color: rgba(0,0,0,0);
	box-shadow: none;
	outline: none;
}

.mapboxgl-popup-content > .btn-info:active {
	background-color: #12509f;
	border-color: rgba(0,0,0,0);
	color: #fff;
}

.mapboxgl-popup-content > .btn-info.btn-selected:active {
	background-color: #fff;
	color: #12509f;
}

.mapboxgl-popup-content > .btn-info.btn-selected {
	background-color: #fff;
	border: 1px solid #cbcbcb;
	color: #12509f;
	pointer-events: none;
}

.popup-img, .popup-img-crop {
	width: 100%;
}

.popup-img-crop {
	max-height: 200px;
	object-fit: cover;
}

.mapboxgl-popup-content {
	border: #12509f 2px solid;
	padding: 0px;
	border-radius: 0;
	background: #fff;
	min-width: 300px;
}

.popup-icon {
	font-size: 20px;
	padding-left: 3px;
	vertical-align: bottom;
}

#expand-p > p {
	padding: 10px;
}

/* Mapbox Multiple Popups */

.popup-slider {
	position: relative;
	display: flex;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overflow-y: hidden;
	overflow-x: hidden;
}

.popup-slider > div {
	display: flex;
	flex-shrink: 0;
	/* width: 460px;
	min-height: 130px; */
}

.active-slider {
	display: flex;
	flex-shrink: 0;
	min-height: 450px;
	width: 100%;
}

.active-slider > div {
  	position: absolute;
	display: inline-block;
	white-space: normal;
	left: 100%;
	/* max-width: 380px; */
	/* margin-left: 20px;
	margin-right: 20px; */
	overflow-y: hidden;
	overflow-x: hidden;
}

.active-slider > div.current {
 	left: 0;
}

div.current > p {
	padding-top: 20px;
}

div.current > p.popup-counter {
	text-align: center;
	padding-top: 5px;
}

.popup-counter {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 5px 5px 5px 8px;
    margin: 0 0 0 -2px;
    position: absolute;
    background: #12509f;
    width: calc(100% + 3px);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.slider-close {
	border-top-right-radius: 0;
	top: 30px;
	z-index: 101;
}

.active-slider button {
	border: none;
}

button.prev.material-icons,
button.next.material-icons {
	background-color: rgba(0,0,0,0);
	color: #000;
	font-feature-settings: 'liga';
	font-size: 30px;
	line-height: 24px;
	padding: 3px;
	position: fixed;
	vertical-align: middle;
	width: 40px;
 	z-index: 100;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	button.prev.material-icons,
	button.next.material-icons {
	  position: absolute;
	}
}

button.prev.material-icons  {
	left: 10px;
	/* padding: 0 30px 0 0; */
}

button.next.material-icons {
	/* padding: 0 0 0 30px; */
 	right: 0px;
}

button.next:focus,
button.prev:focus {
  	outline: none;
}

button.next:hover,
button.prev:hover {
	opacity: 0.6;
	cursor: pointer;
}

/* Modal overrides */
#intro-modal {overflow: hidden;}

.modal {z-index: 9999; top: 60px;}

.modal.show {overflow-y: hidden;}

.modal .nav {margin-bottom: 0;}

.modal .nav > li > a,
.modal .nav > li > a:focus,
.modal .nav > li > a:hover {
	background-color: rgba(0,0,0,0);
	border: none;
	color: #000;
	font-weight: 400;
	margin-right: 10px;
	padding: 5px;
	text-decoration: none;
	width: 110px;
	max-width: 110px;
}

.modal .nav > li:first-child > a {
    border-bottom: 2px solid #993189;
}

.modal .nav > li:nth-child(2) > a {
    border-bottom: 2px solid #de2a88;
}

.modal .nav > li:nth-child(3) > a {
    border-bottom: 2px solid #e6272d;
}

.modal .nav > li:nth-child(4) > a {
    border-bottom: 2px solid #f59b24;
}

.modal .nav > li:nth-child(5) > a {
    border-bottom: 2px solid #ffde0c;
}

.modal-content {
	border: none;
	border-radius: 0;
	font-size: 16px;
	text-align: justify;
}

#modalBtnContainer {position: static;}

.modalTrigger {
	background-color: #fff;
	border: 2px solid #12509f;
	border-radius: 30px;
	color: #12509f;
	display: inline-block;
	font-weight: 700;
	height: 50px;
	text-transform: uppercase;
	width: 250px;
	vertical-align: middle;
}

#backStartBtn {	
	display:block;
	font-weight: 700;
	margin: 0 auto;
	padding: 10px;
	text-align: center;
}

#backStartBtn:hover {color: #12509f;}

#siteDirectoryStory {
	background-color: #12509f;
	color: #fff;
	display: block;
	margin: 0 auto;
}

#siteDirectoryModal {
	background-color: #12509f;
	color: #fff;
	margin: 10px 20px;
}

.nav-tabs {border-bottom: none;}

.nav-tabs>li.active>a, 
.nav-tabs>li.active>a:focus, 
.nav-tabs>li.active>a:hover {
	background-color: rgba(0,0,0,0);
	color: #000;
	font-weight: 600;
}

.modal-content .nav-tabs.header {
	margin-left: -15px;
	padding-left: 15px;
	margin-right: -15px;
	padding-right: 15px;
	font-weight: bold;
}

.tab-content {
	overflow-x: hidden;
	overflow-y: auto;
	max-height: calc(100vh - 400px);
	min-height: 80px;
}

.tab-pane {
    overflow: auto;
	padding-right: 10px;
}

.contact-footer {
	/* align-items: initial; */
	background-color: #f7f7f7;
	border-top: 4px solid #12509f;
	color: black;
	/* display: flex; */
	font-size: 12px;
	padding: 20px 15px;
	text-align: left;
	width: 100%;
}

#sidebar .contact-footer {
	position: absolute;
	bottom: 0;
}

@media only screen and (max-height:920px) {
	#expand-stats {
		overflow-y: auto;
		max-height: 200px;
	}

	.site-popup {top: 10px;}

	#sidebar .contact-footer {
		position: initial;
		/* bottom: 0; */
	}
}

.contact-footer > table {
	display: inline-block;
	padding-right: 15px; 
	vertical-align: top;
	width: auto;
}

.contact-footer > table > tbody > tr {
	padding-bottom: 5px;
}

.contact-footer > table > tbody > tr > td > a {
	color: black;
	font-style: normal;
	font-weight: 400;
	text-decoration: underline;
}

td.footer-icon > img {height: 18px;}

#deetuLogo {
	height: 50px;
	margin-top: -40px;
	float: right;
}

img#langFlag {
	width: 30px;
	height: 20px;
	border-style: none;
	margin: 0;
}

/* Updated attribution with Mapbox GL JS V1.0.0 */
.mapboxgl-ctrl-attrib.mapboxgl-compact {
	background-color: rgba(255,255,255,0.5);
	border-radius: 3px 12px 12px 3px;
	font-size: 12px;
	left: calc(100vw - 740px);
	position: fixed;
	bottom: 2px;
	visibility: hidden;
	z-index: 100;
}
/* Updated attribution with Mapbox GL JS V1.0.0 */
.mapboxgl-ctrl-attrib.mapboxgl-compact:hover {
	padding: 0;
	visibility: visible;
	margin: 10px;
}
/* Updated attribution with Mapbox GL JS V1.0.0 */
.mapboxgl-ctrl-attrib.mapboxgl-compact::after {
	position: fixed;
	bottom: 0;
	visibility: visible;
}

.mapboxgl-ctrl-attrib.mapboxgl-compact > a {
	
	font-style: normal;
	font-weight: 400;
}

a.mapboxgl-ctrl-logo {
	position: fixed;
	bottom: 10px;
}

/* Cookies popup */
.cookie-confirmation {
    display: none;
    z-index: 10001;
    position: fixed;
    right: 0;
    bottom: 50px;
    width: 320px;
	max-width: 90vw;
    margin: 13px;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 2px 8px 0 rgba(29, 29, 27, 0.15);
}

.cookie-confirmation__content p {margin: 0 15px 0 0;}

.cookie-confirmation__content a {
	color: black;
	font-weight: 400;
	text-decoration: underline;
}

.cookie-confirmation, .cookie-confirmation__footer {margin-top: 3rem}

.cookie-confirmation__close {
	position: absolute;
	top: 0;
	right: 0;
	margin: 20px;
}

.cookie-confirmation__close svg {
	fill: #616161;
	width: 15px;
	height: 15px;
	cursor: pointer;
}

.cookie-confirmation__close:hover {opacity: 0.7;}

.btn-cookies {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	width: 80%;
	text-align: center;
	color: #fff;
	cursor: pointer;
	font-weight: 700;
	padding: 10px;
	margin:0 auto 5px auto;
	display:block;
	background-color: #12509f;
	border: none;
	border-radius: 43px;
	/* box-shadow: 0 2px 8px 2px rgba(0,0,0, 0.6); */
	-webkit-transition: left 0.2s linear;
	transition: left 0.2s linear;
	opacity: 1;
	text-decoration: none;
}

.btn-cookies:hover {
	color: #fff; 
	opacity: 0.7;
	text-decoration: none;
}


/* Map popup overrides (fixed position) for tablet/desktop screens */
@media only screen and (min-width: 975px) {

	.site-popup > .mapboxgl-popup-tip {display:none !important;}

	.site-popup, .commprop-popup {
		/* Override inline style - Mapbox V1.0.0 */
	  font: 14px 'Inter', sans-serif;
		min-width: 300px;
		max-width: 300px !important;
		width: 300px !important;
		/* Floating Panel Popup CSS */
		position: fixed;
		left: calc(50vw + 200px);
		top: calc((100% - 490px)/2);
		transform:none !important;
		z-index: 10;
	}

	.properties-popup > .mapboxgl-popup-tip{
		/* left: calc(50vw - 150px);
		top: calc(50vh - 120px); */
		border-top-color: rgba(0,0,0,0)  !important;
		border-bottom-color: rgba(0,0,0,0)  !important;
		border-right-color: #12509f !important;
	}
}

/* Med Tablet / Small Laptop */
@media only screen and (max-width: 1130px) {
	@keyframes stretch {
		0% {
			width: 40px;
			height: 40px;
			border-radius: 100%;
			left: 100vw;
			top: 90%;
		}
		45% {
			border-bottom-right-radius: 0%;
		}
		100% {
			transform: scale(1);
		}
	}

	.properties-popup > .mapboxgl-popup-tip{
		/* left: calc(50vw - 150px);
		top: calc(50vh - 120px); */
		border-top-color: rgba(0,0,0,0)  !important;
		border-bottom-color: #12509f !important;
		border-right-color: rgba(0,0,0,0) !important;
	}

	#legend-container {
		display: block;
		margin: 2px 0 2px 10px;
		max-height: 340px;
		overflow-x: hidden;
	}

	.animation-circle {
		left: calc(50% - 30vw);
		top: calc(50% - 30vw);
		max-width: 60vw;
		max-height: 60vw;
	}

	#landingClose{
		top: 58%;
		left: 58%;
		width: 25vw;
		height: 25vw;
	}

	#landingLogo{
		width: 25vw;
		height: 25vw;
		top: calc(40% - 20vh);
		left: calc(25% - 12.5vw);
	}

	#landingVideo {
		width: 35vw;
		height: 35vw;
		top: calc(40% + 15vh);
		left: calc(25% - 20vw);
	}

	.video-embed {
		height: 90%;
		padding: 10% 0 10% 0;
	}

	.map-pill,
	.menu-pill,
	#legend-container {
		overflow: hidden;
		margin: 2px 0;
		max-width: 80vw;
		min-width: 50px;
		margin-right: 0vw;
		margin-left: 10px;
		pointer-events: all;
		/* animation: shrink 3s forwards; */
		animation-delay: 3s;
		word-wrap: nowrap;
	}

	#legend-container {height: 30px;}

	#legend-container.active {height: unset; max-height: calc(100vh - 180px);}

	.pill-container {
		pointer-events: none;
		z-index: 1;
		top: 60px;		
		/* max-width: 250px; */
		left: 0;
		width: 200px;
	}

	.properties-filter{
		right: 0;
		left: 10px;
		top: 227px;
		pointer-events: all;
		overflow-x: hidden;
		max-height: 150px;
		width: 203px;
	}

	table.dataTable thead .sorting_asc {
		background: url("../assets/arrow-up-small-black.png") -10px / 40px no-repeat;
	}
	table.dataTable thead .sorting_desc {
		background: url("../assets/arrow-down-small-black.png") -10px / 40px no-repeat;
	}

	.map-pill span{
		margin-left: 10px;
	}

	#sidebarMenu {
		left: 0;
		top: 10px;
		transform: none;
	}

	#sidebarMenu .narrowArrow {
		display: inline;
		position: absolute;
	}

	.wideArrow {display: none;}

	#sidebar {left: -101vw;}

	#deetuLogo {float: left; margin: 0 0 0 -10px;}

	.deetu-static {
		bottom: 7px;
		right: calc(100vw - 108px);
	}
	.deetu-static > a > img {width: 85px;}

	.deetu-static > a > img.client-wordmark {
		right: 5px;
		height: auto;
		width: 170px;
	}

	/* Updated attribution with Mapbox GL JS V1.0.0 */
	.mapboxgl-ctrl-attrib.mapboxgl-compact {
		height: 18px;
		left: 18px;
		max-width: 350px;
		right: 0;
		top: calc(100% - 80px);
	}
	/* Updated attribution with Mapbox GL JS V1.0.0 */
	.mapboxgl-ctrl-attrib.mapboxgl-compact::after {
	  top: 0px;
    left: -23px;
		right: 0px;
	}

	/* Mapbox wordmark */
	a.mapboxgl-ctrl-logo {
		bottom: 2px;
		left: 95px;
	}

	.tab-content{
		max-height: calc(100vh - 430px);
	}

	.contact-footer{
		max-height: 170px;
	}

	.modal-body{
		padding-top: 0px;
	}

	#geocoder{
		z-index: 1000;
	}

}

/* Small Tablet */
@media only screen and (max-width: 1000px) {
	/* Story presentation mode hidden on screens narrower than this */
	#startStopPresentationBtn {display: none;}
}

/* Small Tablet and Mobile - Temp Holding Page */
/* @media only screen and (max-width: 1000px) {

	#mobileHoldingPage {
		background-color: rgb(49, 49, 49);
		color: white;
		display: block;
		min-height: 100vh;
		min-width: 100vw;
		position: fixed;
		z-index: 100000000;
	}
	#mobileHoldingPage p {
		height: 100vh;
		margin-top: 30%;
		padding: 0 10%;
		position: absolute;
		text-align: center;
		width: 100vw;		
	}
} */

/* Small Tablet / Mobile */
@media only screen and (max-width: 740px) {
	/* Intro Modal */
	#siteDirectoryModal {margin: 10px auto;}
	
	.modalTrigger {
		display: block;
		margin: 10px auto;
	}

	#modalLogo {width: 90%;}

	.contact-footer {font-size: 10px; padding-bottom: 0;}

	h2 {font-size: 18px;}

	p {font-size: 14px;}

	li > a {font-size: 14px;}

	.modalTrigger {font-size: 14px; height: 40px;}

	.table-responsive {font-size: 14px;}

	/* Map pill layout and animations */
	.map-pill.active,
	.menu-pill.active:not(.onload),
	#legend-container.active {
		animation: 3s ease 0s 1 normal backwards running shrink !important;
	}
	
	#freeportInfoPopup {
		right: calc(50vw - 120px);
		top: calc(50vh - 120px);
	}

	@keyframes shrink {
		0% {
			max-width: 90%;
			margin-right: 0%;
		}
		100% {
			max-width: 11%;
			margin-right: 80%;
		}
	}

	/* minimise geocoder input bar to icon on smaller devices */
	.mapboxgl-ctrl-geocoder {
		width: 40px;
		min-width: 40px;
	}

	@keyframes expand {
		0% {
			min-width: 40px;
			width: 40px;
		}
		100% {
			min-width: 240px;
			width: 33.3333%;
		}
	}

	.geocoder-expand {
		animation: expand 0.5s forwards;
	}
}

/* Mobile */
@media only screen and (max-width: 500px) {

	/* MODAL */
	.modal .nav > li > a,
	.modal .nav > li > a:focus,
	.modal .nav > li > a:hover {
		width: 80px;
	}

	/* Map Controls and Pills */
	#legend-toggle {text-align: left;}
	#legend-toggle .material-icons {padding: 0 5px 0 13px;}

	/* Site Directory */
	#sidebar {
		max-width: 100vw;
		width: 100vw;
	}

	.client-logo > img {margin: 0;}

	#columnFilterWrapper{
		width: 80%;
		margin: 0 10%;
	}

	#columnFilter{
		width: 100%;
	}

	#devSelector .btn-group .btn,
	#oppSelector .btn-group .btn,
	#autSelector .btn-group .btn {
		width: 80vw;
		margin: 0 10vw;
	}

	#devSelector .dropdown-menu {
		transform: translate3d(10vw, 100px, 0px);
		width: 80vw;
	}

	#oppSelector .dropdown-menu {
		transform: translate3d(10vw, 140px, 0px);
		width: 80vw;
	}

	#autSelector .dropdown-menu {
		transform: translate3d(10vw, 180px, 0px);
		width: 80vw;
	}

	/* STORY MENU */
	#wrapperFeatures.toggle > #mobile-pagination{
		bottom: 0;
		-webkit-transition: bottom 0.2s linear;
		transition: bottom 0.2s linear;
	}

	#wrapperFeatures.toggle > #mobile-chapters {
		-webkit-transition: top 0.2s linear;
		transition: top 0.2s linear;
		top: calc(50% - 10px);
	}

	#wrapperFeatures.toggle > #mobile-chapters::before {
		bottom: 0;
	}

	.story-logo {margin: 35px 0 20px 0;}

	.mobile, .mobile-text, .scroll-down.mobile-text, .scroll-down.mobile {display: block;}

	.desktop, .desktop-text, .scroll-down.desktop-text, .scroll-down.desktop {display: none;}

	a.scroll-down {width: 90%;}

	#backStartBtn {padding: 6px;}

	#startStopPresentationBtn,
	#wrapperFeatures.toggle>#scrollingPrompt.active,
	#wrapperFeatures.toggle>div#scrollTop {display: none;}

	/* Features MOBILE */
	#features {
		position: fixed;
		white-space: nowrap;
		width: 100vw;
		max-width: 100vw;
		height: 50%;
		top: 100%;
		left: 0;
		overflow-x: hidden;
		overflow-y: hidden;
		box-shadow: 0 2px 5px 2px rgba(0,0,0, 0.2);
		margin-left: 0;
		padding-left: 0;
		direction: ltr;
		scroll-behavior: auto;
	}

	#features a h3 {
		padding-right: 15px;
	}

	.intro-title {
		font-size: 2rem;
	}

	/* Various Features Animations/Transitions MOBILE */
	#wrapperFeatures.toggle > #features {
		top: 50%;
		-webkit-transition: top 0.2s linear;
		transition: top 0.2s linear;
	}

	#wrapperFeatures.notransition > #features {
		-webkit-transition: none !important;
		transition: none !important;
	}

	section {
		top: 0;
		width: 100vw;
		min-height: 50px;
		height: 100%;
		padding: 0 20px;
		display: inline-block;
		white-space: normal;
		overflow-y: auto;
		vertical-align: top;
	}

	section > a > h2, section > a > h2:link,
	section > a > h2:visited, section > a > h2:hover,
	section > a > h2:active,
	section > a > h3, section > a > h3:link,
	section > a > h3:visited, section > a > h3:hover,
	section > a > h3:active {
		font-size: 18px;
		text-align: left;
	}

	section > a > h3, section > a > h3:link,
	section > a > h3:visited, section > a > h3:hover,
	section > a > h3:active {
		margin: 15px 0 0 0;
	}

	section > a > h4, section > a > h4:link,
	section > a > h4:visited, section > a > h4:hover,
	section > a > h4:active {
		font-size: 16px;
	}

	section > a > p, section > a > p:link,
	section > a > p:visited, section > a > p:hover,
	section > a > p:active,
	section > p > a, section > p > a:link {
		text-align: justify;
		font-size: 14px;
	}

	div.scroll-down,
	a.scroll-down {
		max-width: 250px;
		width: 100%;
	}

	h4 {font-size: 16px; margin:0;}

	/* Map Key- add extra padding on mobile */
	.keySquare {margin-left: 7px;}
	.keyLineDashed {min-width: 15px; height: 5px; float: left;}
	.keySVG {text-align: center;}
	.el-final-section {margin-bottom: 75px !important;}

	/* Close Features Menu MOBILE */
	#menuClose {
		top: calc(100vh + 50px);
		padding: 0;
		left: calc(100vw - 50px);
		width: 30px;
		height: 30px;
		opacity: 0.45;
	}

	#wrapperFeatures.toggle>#menuClose {
		top: 51%;
		right: 0;
		left: calc(100vw - 42px);
	}

	/* Horizontal Scroll Buttons MOBILE */

	#mobile-chapters{
		display: inline-flex;
		background-color: grey;
		width: 100%;
		height: 10px;
		position: fixed;
		top: 100%;
		left: 0;
    	z-index: 10000;
	}
  	
	.segment{
		background-color: #c7c7c7; /*#003888*/
		height: 100%;
		width: 10px;
		margin: 0 1px;
	}

	#mobile-pagination{
		display: inline-flex;
		position: fixed;
		height: 36px;
		width: 100%;
		background-color: grey;
		bottom: -36px;
		z-index: 10000;
	}

	.page-button{
			background-color: #003888;
			height: 100%;
			width: calc(50% - 1px);
			margin: 0 1px;
			color: white;
			text-align: center;
			font-size: 36px;
	}
	
	.mobile-pagination, a:hover{
		color: white;
	}

	.scroll-down.mobile{
		position: sticky;
		position: -webkit-sticky;
		bottom: 4rem;
	}

	.scroll-down.mobile:hover{
		opacity: 1;
	}

}

@media only screen and (max-width:340px) {
	#dashHeader > p, #dashHeader > div,
	.devSelector, .oppSelector, .autSelector, #columnFilter {max-width: calc(100vw - 80px);}
}