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

body {overflow-x:hidden;}

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

/* Map menu */
.mapmenu-wrapper {font-size: .875rem;background: var(--blue);z-index:5; position: relative}
	.mapmenu li { position:relative;}
     .mapmenu li:not(:last-child) .fas {margin-top: -2px}
     .mapmenu .fa-angle-down {transition: transform 250ms ease; }
     .mapmenu .fa-angle-down.rotate {-webkit-transform:rotateX(180deg);-ms-transform:rotateX(180deg);transform:rotateX(180deg);}
     .mapmenu > li > button {background:none; color: var(--white); padding: 0px; border:none; width: 100%; text-align:left;font-size: .875rem;font-weight:600}
	.mapmenu > li > button:hover, .mapmenu > li > button:focus {color:var(--white);}
     .mapmenu > li > button span {transition: all 250ms ease; opacity: .5}
     .mapmenu > li > button:hover span:first-child, .mapmenu > li > button:focus  span:first-child{color:var(--yellow);opacity: 1}
     .mapmenu ul {position: absolute; opacity:0; z-index: 2; visibility:hidden;pointer-events:none; -webkit-transition: opacity 150ms ease-out; transition: opacity 150ms ease-out;font-size: .813rem}
	.mapmenu ul li:not(:last-child) {margin-bottom: 5px; }
     .mapmenu li.active ul {opacity:1; visibility: visible; pointer-events: all;}
     .mapmenu .directions-btn {opacity: .6}
     .mapmenu .directions-btn.active {opacity: 1}
     .mapmenu .campuses .active a {text-decoration:none; font-weight:bold}

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

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

/* Shared */
div[class*="-window"]:not(.photo-window) {top: 30px}
div[class*="-window"] {position: absolute; will-change: opacity; transition: opacity 250ms ease; background: var(--white); left: 30px; opacity: 0; z-index: -1; pointer-events: none;}
div[class*="-window"].active {opacity: 1; z-index: 3; pointer-events:all}
div[class*="-window"] .btn-close {border: none; width: 25px; height: 25px;font-size: 1.25rem; line-height: 0px; background: var(--white); position: absolute; top: -10px; right: -10px; padding: 0px; border-radius: 50%;z-index: 2}
div[class*="-window"] .btn-close:hover, div[class*="-window"] .btn-close:focus {outline:none;}
div[class*="-window"] .btn-close:hover span, div[class*="-window"] .btn-close:focus span {color: var(--blue); }
div[class*="-window"].transparent {opacity:.25;}
.custom-control-label::before {top: 2px}
.custom-control-label::after {top: .165rem}

/* Topics window */   
.topics-window {width: calc(100% - 60px);max-width: 500px;}
     .topics-window ul {font-size: .875rem}
          
/* Info window */
.info-window {}
     .info-window .content {font-size: .875rem; overflow-x:hidden; overflow-y: auto;height:auto;}
     .info-window.has-photos .content {padding-right: 10px}
     .info-window .locations ul li {padding: 2.5px 5px; background: var(--lightest-grey); margin: 0px 0px 2.5px 0px;}
     
     /* Thumbs */
     .info-window .thumbs {opacity: 0; z-index: -1; pointer-events: none; transition: opacity 500ms ease; }
     .info-window .thumbs.active {opacity: 1; z-index: 3; pointer-events:all}
     .info-window .thumbs .overlay {opacity:0;width: 105px; height: 70px; 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: var(--white); 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);-ms-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transition: all 0.3s ease 0s;-ms-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 {}
     .inthislocation-window .content {max-width: 300px;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.2;display:table; break-inside: avoid-column}
     .inthislocation-window li::before {content: "• "; color: var(--blue); display: table-cell; padding-right: 5px;}
     
/* Photo window */
.photo-window {top:90px; right: 40px}
     .photo-window:hover {cursor:move}
     .photo-window [class*="carousel-control-"]{text-align:center; text-decoration: none; font-size: 1rem; color: var(--white); position: absolute; width: 25px; height: 25px; top: 50%; margin-top: -20px; background: var(--dark-blue); 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 var(--white); border: 4px solid var(--blue);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: var(--white);background: var(--dark-blue); border-radius: 13px; z-index:3; text-align:center; border: none; }
     .photo-window .btn-resize:hover {background:var(--dark-blue);}
     .photo-window .photo-info {background: var(--dark-blue); color: var(--white); 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("");}

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

/* Map */
#map {width: 100%;}

/* Directions */
.direction-controls {position: absolute; right: 30px; top: 30px; z-index: 3;  background: var(--white); width: 300px;}
     .direction-controls ol {padding: 0px 0px 0px 20px;margin: 0px}
     .direction-controls .btn {width: 30px;height: 30px;display: flex;align-items: center;text-align: center;justify-content: center;}
     .direction-controls .directions-content {border-top: 1px solid var(--light-grey); padding-top: 15px;font-size: .875rem;}

/* Scrollbars */
.map-wrapper ::-webkit-scrollbar {-webkit-appearance: none;width:5px;}
.map-wrapper ::-webkit-scrollbar-track {background: var(--light-grey); border-radius: 4px;}
.map-wrapper ::-webkit-scrollbar-track-piece {margin: 0px}
.map-wrapper ::-webkit-scrollbar-thumb {border-radius: 4px;background: rgba(0,0,0,.3);}

.thumbs::-webkit-scrollbar-track {margin: 10px 0px}

/* Modals */
.text-directions {z-index: 9999}

/* ==========================================================================
   Media Queries
   ========================================================================== */
   
@media (min-width: 0px) {
     /* Map menu */
     .mapmenu {padding-top: 15px;}
     .mapmenu li.active ul {position: relative; }
     .mapmenu a, .mapmenu label {color:var(--white)}

     /* Windows */
     .info-window {width: calc(100% - 60px);}
     .info-window .content { 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 {padding-top: 0px;}
	.mapmenu li.active .search-results {left:auto;right: 0px;}
     .mapmenu ul {background:var(--white); max-height: 360px; overflow-y:auto;left: 0px; width: 280px;box-shadow: 0 .35rem .35rem 0px rgba(0,0,0,.15); margin: 0px}
     .mapmenu li.active ul {position: absolute; left: 0px; top: calc(100% + 9px);}
     .mapmenu a, .mapmenu label  {color:unset; }

	/* Windows */
     .info-window {width: 500px;max-height: 330px}
     .info-window.has-photos {left: 160px;}
     .info-window .content {max-height:300px;}
	.info-window .thumbs {text-align:left; position: absolute; top:0px; left: -130px; margin: 0px; background: var(--white); overflow-y: auto; overflow-x:hidden; width: 130px;}
     .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 (orientation: landscape) and (min-width: 768px) and (max-height: 590px) {
	.info-window .content {max-height: 170px}
}


@media (prefers-reduced-motion: reduce) {
     * { animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;transition: none !important}
}