/* LOGIN */
#main-login-container{position:absolute;top:0;left:0;width:100vw;height:fit-content;padding-bottom:40px;background:#000;}

.login-header-image{width:100%;height:auto;border-radius:10px 10px 0 0;}
.login-login-container{border-bottom:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff;border-radius:0 0 10px 10px;
padding:20px;text-align:center;}
.login-header-text{font-family:'Josefin Sans', sans-serif;font-size:10vw;font-weight:bold;color:#fff;}
.login-text{font-family:'Josefin Sans', sans-serif;font-size:14px;font-weight:normal;color:#999;}
.login-code{width:100%;border:none;height:50px;border-radius:5px;text-align:center;text-transform:uppercase;}
.login-email{width:100%;border:none;height:50px;border-radius:5px;text-align:center;text-transform:uppercase;}
.login-terms-text{font-family:'Josefin Sans', sans-serif;font-size:12px;font-weight:normal;color:#999;}

/* SETUP */
#main-setup-container{position:absolute;top:0;left:0;width:100%;height:100%;background:#111;}
.begin-header{font-family:'Orbitron', sans-serif;font-size:32px;font-weight:bold;color:darkred;}
.begin-text{font-family:'Josefin Sans', sans-serif;font-size:16px;font-weight:bold;color:#ddd;}
.mission-video{width:100%;height:auto;}
.team-name{width:100%;border:none;height:50px;border-radius:5px;text-align:center;text-transform:uppercase;}

/* MAIN VIEW */
#main-view-container{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;}

.main-inventory-container{position:absolute;top:5px;left:5px;bottom:5px;right:5px;background:#111;
    border:2px solid darkred;border-radius:30px;z-index:10;overflow-y:scroll;}
.main-terminal-container{position:absolute;top:5px;left:5px;bottom:5px;right:5px;background:#111;
    border:2px solid darkred;border-radius:30px;z-index:10;}
.close-icon{color: white;background: #8c0000;border-radius: 50%;float: right;}
.page-header{color: white;font-weight: bold;font-size: 9vw;font-family:'Orbitron', sans-serif;}
.page-description{color: white;font-size: 4vw;font-family:'Josefin Sans', sans-serif;}
.terminal-box{width: 100%;border: 1px solid greenyellow;background: black;font-size: 24px;text-align: center;color: greenyellow;outline: none;font-family: 'Orbitron', sans-serif;}
.terminal-output{width: 100%;height:25vh;border: 1px solid greenyellow;background: black;font-size: 24px;text-align: center;color: greenyellow;outline: none;font-family: 'Orbitron', sans-serif;}

.inventory-item{border-top: 1px solid greenyellow;border-bottom: 1px solid greenyellow;padding: 10px;color: white;font-size: 22px;}

/* MAIN TOP */
.main-header{position:absolute;top:-100vh;left:0;width:100vw;height:calc(100vh + 150px);z-index:9;background-color:#111;border-bottom:2px solid darkred;
    -webkit-box-shadow: 0px 5px 42px 7px rgba(0,0,0,0.66);box-shadow: 0px 5px 42px 7px rgba(0,0,0,0.66);
    border-bottom-left-radius:30px;border-bottom-right-radius:30px;}
.menu-icon{color:darkred;}
.nav-links-container{position:relative;height:100vh;width:100vw;}
.nav-links-holder{position:absolute;bottom:0;left:0;width:100%;}
.link-text{font-family:'Orbitron', sans-serif;font-size:18px;font-weight:bold;color:darkred;}

.timer-text{font-family:'Josefin Sans', sans-serif;font-size:18px;font-weight:bold;color:darkred;}
.timer-count{font-family:'Orbitron', sans-serif;font-size:6vw;font-weight:bold;color:#ddd;}

/* MAP */
.mapboxgl-ctrl-top-right {right:20px!important;top:81%!important ;}
.mapboxgl-ctrl-group button {background-color:#111!important;}

.marker {background:white;width:50px;height:50px;border-radius:50%;cursor:pointer;border:2px solid darkred;}
.mapboxgl-popup {max-width: 200px;height:fit-content!important;}
.mapboxgl-popup-content {text-align: center;font-family: 'Josefin Sans', sans-serif;border:2px solid darkred;background:#111;}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {align-self: center;border-left: none;border-right-color: darkred;}
.mapboxgl-popup-close-button{display:none;}

/* PINS */
.puzzle-start{background-image:url(https://tcd.theliftbrighton.com/images/map-pin-start.png);background-size:cover;}
.puzzle-one{background-image:url(https://tcd.theliftbrighton.com/images/map-pin.png);background-size:cover;}
.puzzle-two{background-image:url(https://tcd.theliftbrighton.com/images/map-pin-task.png);background-size:cover;}
.puzzle-done{background-image:url(https://tcd.theliftbrighton.com/images/map-pin-done.png);background-size:cover;}
.start-here-text{color:white;font-weight:bold;font-family:'Orbitron', sans-serif;}
.pin-btn{width: 100%;padding: 5px;font-size: 12px;margin-top: 5px;background: #8c0000;border: none;border-radius: 1px;}

.main-puzzle-container{position:absolute;top:5px;left:5px;bottom:5px;right:5px;background:#111;
    border:2px solid darkred;border-radius:30px;z-index:10;overflow-y:scroll;}

.puzzle-image{width:100%;height:auto;}

.wrong-answer{display:none;font-weight:bold;color:darkred;}

.modal-content{border:1px solid greenyellow!important;background:#111!important;color:#fff!important;}
.modal-header{border-bottom:1px solid greenyellow!important;}
.modal-footer{border-top:1px solid greenyellow!important;}

/* MAIN BOTTOM */
.nav {position:absolute;bottom:0;left:0;display: flex;flex-direction: row;width: 100vw;margin: auto;background-color: #111;padding: 25px 20px;border-top-left-radius: 30px;
    border-top-right-radius: 30px;box-shadow: 0px 5px 40px rgba(0,0,0,0.8);z-index:9;
    -webkit-box-shadow: 0px 5px 42px 7px rgba(0,0,0,0.66);box-shadow: 0px 5px 42px 7px rgba(0,0,0,0.66);border-top:2px solid darkred;}
.nav-item {display: flex;justify-content: center;align-items: center;flex-grow: 1;padding: 10px 15px;cursor: pointer;
    transition: all 0.2s ease-out;color:darkred;}
.nav-text {font-size: 20px;margin: auto;text-align: center;font-weight: 500;display: none;transition: all 0.3s ease;}
.material-icons {display: inline;font-size: 32px;transition: color .3s;}
.nav-item.active {flex-grow: 3;border-radius: 30px;background: #eee;justify-content: flex-start;}
.nav-item.active > .nav-text {display: inline-block;}
.nav-item.active > .material-icons.home-icon {color: #5a35b5;}
.material-icons.home-icon ~ .nav-text {color: #5a35b5;}
.nav-item.active > .material-icons.favorite-icon {color: #c9329a;}
.material-icons.favorite-icon ~ .nav-text {color: #c9329a;}
.nav-item.active > .material-icons.search-icon {color: #e5a023;}
.material-icons.search-icon ~ .nav-text {color: #e5a023;}
.nav-item.active > .material-icons.person-icon {color: #0091a9;}
.material-icons.person-icon ~ .nav-text {color: #0091a9;}


/* MAP */
#map{height:100%;}