/* ==========================================================================
   Project: 	Campus Map
   Date:		06/02/2022 - File created
   Created by:	Third Wave Digital (www.thirdwavedigital.com)
   ========================================================================= */

/* ==========================================================================
   Menu
   ========================================================================== */

/* Map menu */
.mapmenu-wrapper {font-size: .875rem;background: #f8f9fa;}
	.mapmenu li { position:relative;}
     .mapmenu > li > button {background:none; padding: 0px; border:none; width: 100%; text-align:left;font-size: .813rem;}
	.mapmenu ul {position: absolute; background: #f8f9fa;opacity:0; z-index: 2; visibility:hidden;pointer-events:none; -webkit-transition: opacity 150ms ease-out; transition: opacity 150ms ease-out;}
	.mapmenu ul li:not(:last-child) {margin-bottom: 5px; }
     .mapmenu li.active ul {opacity:1; visibility: visible; pointer-events: all;}

	/* Map menu - dropdowns - layers */
     .mapmenu .layers li {padding-left: 50px}
	.mapmenu .layers img {position: absolute; top: 4px;left: 0px;height:16px; width:16px;}
	
	/* Map menu - dropdowns - search */
	.mapmenu .search-results {z-index: 4; }

     /* Webkit's scrollbar */
     .mapmenu-wrapper::-webkit-scrollbar {-webkit-appearance: none;height:5px;}
     .mapmenu-wrapper::-webkit-scrollbar-track-piece {margin: 15px 0px;}
     .mapmenu-wrapper::-webkit-scrollbar-thumb {border-radius: 4px;background: rgba(0,0,0,.3);}
	
/* ==========================================================================
   Content
   ========================================================================== */

.mapcontent-wrapper {position: relative; z-index: 1;}

/* Shared */
[class*="-window"] {left: 30px; }
[class*="-window"] .btn-close {border: none; width: 25px; height: 25px;font-size: 1.25rem; line-height: 18px; background: #fff; position: absolute; top: -10px; right: -10px; padding: 0px; border-radius: 50%;z-index: 2}
.transparent {opacity:.5;}

/* Topics window */   
.topics-window {z-index: 3;display:none;position: absolute; background: #fff; width: calc(100% - 60px);max-width: 500px}
          
/* Info window */
.info-window {z-index: 3;position: absolute;display:none; background: #fff;}
     .info-window .content {font-size: .875rem; overflow-x:hidden; overflow-y: auto;}
     .info-window.has-photos .content {padding-right: 10px}
     .info-window .locations ul li {padding: 2.5px 5px; background: #f1f1f1; margin: 0px 0px 2.5px 0px;}
     
     /* Thumbs */
     .info-window .thumbs .overlay {opacity:0;width: 105px; height: 78px; text-align: center; position: absolute; top: 0px; left: 0px; background:rgba(0, 0, 0, 0.25); -webkit-transition: opacity 250ms ease-out; transition: opacity 250ms ease-out;}
     .info-window .thumbs .overlay span {color: #fff; font-size: 1.125rem; width: 20px; height: 20px; position: absolute; top: 50%; left: 50%; margin-top: -10px; margin-left: -10px;-webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; opacity:0; -webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);-ms-transform:rotateX(0deg);-o-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-ms-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;}
     .info-window .thumbs a {display:block}

     /* Webkit's scrollbar */
     .info-window ::-webkit-scrollbar {-webkit-appearance: none;width:5px;}
     .info-window ::-webkit-scrollbar-track-piece {margin: 10px 0px 10px 0px;}
     .info-window ::-webkit-scrollbar-thumb {border-radius: 4px;background: rgba(0,0,0,.3);}

/* In this location window */
.inthislocation-window { position: absolute; z-index: 3;display:none;}
     .inthislocation-window .content {max-width: 280px;background:rgba(255, 255, 255, 0.95);}
     .inthislocation-window ul {column-count: 2;column-gap: 1rem; font-size: .813rem; list-style:none}
     .inthislocation-window li {line-height: 1.3;display:table}
     .inthislocation-window li::before {content: "• "; color: #C4122F; display: table-cell; padding-right: 5px;}
     
/* Photo window */
.photo-window {display:none; position:absolute;z-index: 3; background: #fff; top:90px; right: -50%}
     .photo-window:hover {cursor:move}
     .photo-window [class*="carousel-control-"]{text-align:center; text-decoration: none; font-size: 1rem; color: #fff; position: absolute; width: 25px; height: 25px; top: 50%; margin-top: -20px; background: #212529; border-radius: 50%;z-index:3;opacity:1;text-shadow: none}
     .photo-window .carousel-control-prev {left: 10px;z-index:3}
     .photo-window .carousel-control-next {right: 10px;z-index:3}
     .photo-window .photo-border {outline: 4px solid #fff; border: 4px solid #C4122F;position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index:2;pointer-events:none}
     .photo-window ul { list-style: none; margin: 0px; padding: 0px;z-index:1;}
     .photo-window ul img {width: 100%; height: auto;}
     .photo-window .btn-resize {position: absolute; bottom: 10px; left: 10px;font-size: .875rem; margin: 0px; width: 26px; height: 26px; line-height: 26px; color: #fff;background: #212529; border-radius: 13px; z-index:3; text-align:center; border: none; }
     .photo-window .btn-resize:hover {background:#333;}
     .photo-window .photo-info {background: #333; color: #fff; text-align:center; font-size: .875rem; position: absolute; bottom: -31px; padding: 2px 0px 0px 0px; left: 50%; width: 80px; height: 25px;margin-left: -40px;z-index:2;opacity:1}
     .photo-window .ui-icon {background-image: url("");}

/* ==========================================================================
   Preloader
   ========================================================================== */
   
.preloader {z-index: 1; position: absolute; top: 50%; left: 50%; margin: -20px 0px 0px -20px}

/* ==========================================================================
   Map
   ========================================================================== */
   
#map {width: 100%; max-height: 900px}

/* ==========================================================================
   Text Directions
   ========================================================================== */

.direction-controls {position: absolute; right: 30px; top: 30px; z-index: 3;  background: #fff; background:rgba(255, 255, 255, 0.8); }

/* ==========================================================================
   Media Queries
   ========================================================================== */
   
@media (min-width: 0px) {
     /* Map */
     #map {height: calc(100vh - 215px);}

     /* Map menu */
     .mapmenu li.active ul {position: relative; margin-top: 5px;}

     /* Windows */
     .info-window {width: calc(100% - 60px);}
     .info-window .content {height:auto; max-height: calc(100vh - 400px)}
     .info-window .thumbs ul {margin-left: -5px; margin-right: -5px}
     .info-window .thumbs li {display:inline-block; padding: 5px; width: 50%}
     .info-window .thumbs img {width: 100%}
}

@media (min-width: 768px) {
	/* Map menu */
	.mapmenu .search-results {left:auto;right: 0px;}
     .mapmenu ul {max-height: 300px; overflow-y:auto;left: 0px; width: 250px;box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); margin: 0px}
     .mapmenu li.active ul {position: absolute; left: 0px; top: calc(100% + 3px);}

     /* Map */
     #map {height: calc(100vh - 180px);}

	/* Windows */
     [class*="-window"] { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
     .info-window {width: 500px;}
     .info-window.has-photos {left: 160px;}
     .info-window .content {height: auto;max-height:300px; min-height: 148px;}
	.info-window .thumbs {text-align:left; position: absolute; top:0px; left: -130px; margin: 0px; background: #fff; overflow-y: scroll; overflow-x:hidden; width: 130px; max-height: 275px;}
     .info-window.has-lt4-photos .thumbs {left: -125px; width: 125px}
     .info-window .thumbs ul {margin-left: 0px; margin-right: 0px}
     .info-window .thumbs li {position: relative; display:block; padding: 0px; width: 100%; margin: 10px 0px 10px 10px}
     .info-window .thumbs a, .info-window .thumbs img {width: 105px}
	.info-window .thumbs a:hover .overlay {opacity:1;}
	.info-window .thumbs a:hover .overlay span {opacity:1;-webkit-transform:rotateX(360deg);-moz-transform:rotateX(360deg);-ms-transform:rotateX(360deg);-o-transform:rotateX(360deg);transform:rotateX(360deg);}
}

@media (min-width: 992px) {

}