/* Styles for the loader icon */
#loader-container{
	display: none;
}
.loader {
	overflow: hidden;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0; left: 0;
	display: flex;
	align-items: center;
	align-content: center; 
	justify-content: center;  
	z-index: 100000;
}
.loader__element {
	border-radius: 100%;
	border: 5px solid #002145;
	margin: 10px;
}
.loader__element:nth-child(1) {
	animation: preloader .6s ease-in-out alternate infinite;
}
.loader__element:nth-child(2) {
	animation: preloader .6s ease-in-out alternate .2s infinite;
}
.loader__element:nth-child(3) {
	animation: preloader .6s ease-in-out alternate .4s infinite;
}
@keyframes preloader {
	100% { transform: scale(2); }
}
/* End of styles for loader icon */

/* high level */
html,body.ubc-wfa {margin: 0; height: 100%; overflow: hidden;}
body.ubc-wfa .esri-view .esri-view-surface--inset-outline:focus::after {outline: none !important;}
body.ubc-wfa #viewDiv{padding:0;margin:0;height:94.5%;width:100%;z-index:-8}
body.ubc-wfa .ui{touch-action: none}
body.ubc-wfa a{color:#00a8e0}
body.ubc-wfa .w3-bar{background-color:#002145}
body.ubc-wfa h3{position:absolute;clip:rect(1px 1px 1px 1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}
body.ubc-wfa .esri-attribution{background-color: rgba(255,255,255,0) !important;}

/* base map gallery */
body.ubc-wfa .esri-basemap-gallery__item-container {flex-flow: row nowrap !important;justify-content: space-evenly;}
body.ubc-wfa .esri-basemap-gallery__item {flex-flow: column nowrap !important}
body.ubc-wfa .esri-basemap-gallery__item:first-child{margin: 0px !important;}
body.ubc-wfa #basemapSelection{margin: 0px; max-width: 400px;}
body.ubc-wfa .esri-expand__mask--expanded {background-color: #000 !important; opacity: 0.3 !important;}
body.ubc-wfa .esri-expand__container--expanded {top:65% !important;height:35% !important; width:92%; border-radius: 10px 10px 0 0;}
body.ubc-wfa .esri-ui{z-index: 3 !important;}
body.ubc-wfa .ui-widget-overlay{background: #000 !important;}

/* mode/directions related */
body.ubc-wfa .esri-ui-top-left.esri-ui-corner{background-color: rgba(255, 255, 255, 0.4); border-radius: 10px;height:auto !important;}

.directionsTable.normal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
	padding: 5px;
}

.directionsTable.narrow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
	padding: 3px;
}

.directionsTable.directions-table-minimized.normal{
	height: 50px;
}

.directionsTable.directions-table-minimized.narrow{
	height: 50px;
}

.directionsTable.directions-table-expanded.normal{
	height: 140px;
}

.directionsTable.directions-table-expanded.narrow{
	height: 190px;
}

.directions-cell .esri-widget{
	background-color: rgba(255,255,255,0);
}

#directions-cell-1.normal {
    grid-column: span 3 / span 3;
}

#directions-cell-1.narrow {
    grid-column: span 2 / span 2;
}

#directions-cell-2.normal {
	grid-row: span 2 / span 2;
    grid-column-start: 4;
}

#directions-cell-2.narrow {
	grid-row: span 2 / span 2;
    grid-column-start: 3;
}

#directions-cell-3.normal {
    grid-column: span 3 / span 3;
    grid-row-start: 2;
}

#directions-cell-3.narrow {
    grid-column: span 2 / span 2;
    grid-row-start: 2;
}

#directions-cell-4 {
    grid-row-start: 3;
}

#directions-cell-5 {
    grid-row-start: 3;
}

#directions-cell-6.normal {
    grid-row-start: 3;
}

#directions-cell-6.narrow {
    grid-row-start: 4;
}

body.ubc-wfa #directionsDiv{padding-left:8px;display:none;z-index:700;height:50px;}
body.ubc-wfa .topButton{padding-left:5px;padding-bottom:1px;padding-right:5px;padding-top:1px;background-color:#fff;border-radius:20px;width:70px;height:50px;}
body.ubc-wfa .buttonText{font-size:12px;font-family:inherit;}
body.ubc-wfa .buttonText.bold{white-space: pre;}
body.ubc-wfa .topButton{border-width: 0px;}
body.ubc-wfa .topButton.topButtonHover{cursor:pointer;background-color:#40b4e5;color:white}
body.ubc-wfa .topButton.topButtonHover svg{fill: white}
body.ubc-wfa .topButton.modeButton {display: none;margin: 2px 5px;}
body.ubc-wfa .topButton.active-button svg, body.ubc-wfa .topButton.active-button-desktop svg{fill: white}
body.ubc-wfa .topImage{padding-top:2px;width:25px;height:25px;border:none}
body.ubc-wfa .topButton.active-button{
	animation: ease-in-colour 0.2s;
	background-color:#0680a6;
	color:white;
}
@keyframes ease-in-colour{
	from {background-color: white;fill:black;color:black}
	to {background-color:#0680a6;fill:white;color:white}
}
body.ubc-wfa .topButton.active-button-desktop{
	animation: ease-in-colour-desktop 0.2s;
	background-color:#0680a6;
	color:white;
}
@keyframes ease-in-colour-desktop{
	from {background-color: #40b4e5;}
	to {background-color:#0680a6;}
}
body.ubc-wfa #closeDirectionsImage{padding-left: 5px;}
body.ubc-wfa .esri-widget{box-shadow: none !important;}

/* top bar */
body.ubc-wfa .topnav{background-color:#002145;overflow:hidden;height:5.5%;position:relative}
body.ubc-wfa .topnav a svg:hover{fill:#40b4e5}
.vertical-center {
	margin: 0;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.vertical-center.left{
	left:2%;
}
.vertical-center.space-left{
	left:11%;
}
.vertical-center.right{
	right:2%;
}
.horizontal-center {
	margin: 0;
	position: absolute;
	left: 50%;
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

/* share url dialog layout*/
body.ubc-wfa #shareDialog{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: repeat(3,1fr);
}
body.ubc-wfa #share-row1{
	grid-column: span 3 / span 3;
}
body.ubc-wfa #share-row2{
	grid-row-start: 2;
	grid-column-start: 2;
}
body.ubc-wfa #share-row3{
	grid-row-start: 3;
	grid-column-start: 2;
}
body.ubc-wfa .share-row{
	height: 50px;
}
body.ubc-wfa #shareDialog,#urlTextBox,.ui-dialog-title{font-family: "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;}
body.ubc-wfa #copyButton{background-color: white;border-radius:10px;margin-left: 10px;border: 1px solid black;width: 80px;}
body.ubc-wfa #urlTextBox{height: 45px;font-size:16px;width: 100%;}
body.ubc-wfa #copiedText{visibility: hidden; padding-top: 5px;text-align: center;}

/* misc. */
body.ubc-wfa #directions{background-color:#fff;width:200px;height:400px;overflow-y:scroll}
body.ubc-wfa #consoleText{position:fixed;bottom:10%;left:5%;z-index:2;background-color: rgba(255, 255, 255, 0.8);padding: 5px;width: 200px;}
body.ubc-wfa #zoomCurrentLocation{position:fixed;bottom:30px;right:15px;z-index:2}
body.ubc-wfa #zoomCurrentLocation.hidden{visibility: hidden}
body.ubc-wfa #zoomCurrentLocation button{background-color:#fff;border-radius:50%;width:32px;height:32px;border-width:0px;}
body.ubc-wfa #zoomCurrentLocation button svg{bottom:25%}
body.ubc-wfa #zoomCurrentLocation button.active svg g polygon{fill:#40b4e5;stroke:#40b4e5}
body.ubc-wfa #zoomCurrentLocation button svg g polygon{fill:white;stroke:#6e6e6e;stroke-width:10}
body.ubc-wfa .hours-open{color:green}
body.ubc-wfa .hours-closed{color:red}
body.ubc-wfa #wayfinding-title-narrow{height: 25px;}
body.ubc-wfa #start-compass{visibility: hidden;}

/* fuzzy search results */
body.ubc-wfa .fuzzy-btn{
	margin: 2px 0;
	padding: 5px;
	border-radius: 8px;
	border: 2px solid #002145;
	background-color: #f0f0f0;
	font-size: 90%;
	color: #002145;
}
body.ubc-wfa .fuzzy-btn:hover{
	background-color: #40b4e5;
}
body.ubc-wfa .fuzzy-btn:active{
	background-color: #40b4e5;
}
body.ubc-wfa .fuzzy-btn-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

/* for particularily small screen change the size of the basemap gallery and wrap the list */
@media(max-width:380px) {
	body.ubc-wfa .esri-expand__container--expanded {top:55% !important;height:45% !important;}
	body.ubc-wfa .esri-basemap-gallery__item-container {
		flex-flow: row wrap !important;
	}
}

@media(max-width:359px){
	body.ubc-wfa .esri-search{width: 215px !important;}
}

@media(max-width:345px){
	body.ubc-wfa .esri-search{width: 195px !important;}
}

@media(max-width:315px){
	body.ubc-wfa .esri-search{width: 175px !important;}
}

@media(max-width:290px){
	body.ubc-wfa #directionsButton.topButton{width: 50px;height: 40px;}
	body.ubc-wfa #directionsButton-parent{text-align: center;}
	body.ubc-wfa .esri-search{width: 175px !important;}
	body.ubc-wfa #directionsButton .buttonText{visibility: hidden;}
	body.ubc-wfa .esri-search{width: 155px !important;}
}

@media(max-width: 600px){
	/* body.ubc-wfa #directionsDiv{right:10%} */
	body.ubc-wfa .vertical-center.right #info-text-outline{visibility: hidden;}
}

@media(min-width: 600px){
	.vertical-center.space-left{left:8%}
	body.ubc-wfa .vertical-center.right #info-text-outline{visibility: visible;}
}

@media(min-width: 800px){
	.vertical-center.space-left{left:6%}
}

@media(min-width:1200px){
	.vertical-center.space-left{left:5%}
}

/* height greater than 1500px */
@media(min-height: 1500px){
	body.ubc-wfa .topnav a img{height:60px;}
	body.ubc-wfa .topnav a svg{height:40px;}
}

@media(max-width: 1200px){
	body.ubc-wfa #basemapSelection {width:auto;}
}

@media(max-height: 600px){
	#wayfinding-title{height:30px;}
}

@media(max-height: 400px){
	#wayfinding-title{visibility: hidden;}
	#wayfinding-title-narrow{visibility: visible;}
}

@media(min-height: 400px){
	#wayfinding-title-narrow{visibility: hidden;}
}

/* height between 1100px and 1500px */
@media(min-height:1100px) and (max-height:1500px){
	body.ubc-wfa .topnav a img{height:50;}
	body.ubc-wfa .topnav a svg{height:30px;}
}

/* height between 800px and 1100px */
@media(min-height: 800px) and (max-height: 1100px){
	body.ubc-wfa .topnav a img{height:40;}
	body.ubc-wfa .topnav a svg{height:25px;}
}

/* height between 550px and 800px */
@media(min-height: 550px) and (max-height: 800px){
	body.ubc-wfa .topnav a img{height:30px;}
	body.ubc-wfa .topnav a svg{height:20px;}
}

/* height below 550px */
@media(max-height: 550px){
	body.ubc-wfa .topnav a img{height:20px;}
	body.ubc-wfa .topnav a svg{height:15px;}
}