/* This body propriety is only for the mainpage */
body{
   height: 112vh;
}

#obs-headercont{
   margin-top: 22.5%;
   display: flex;
   justify-content: center;
   user-select: none;
}

.obs-svg-btn{
   width: 21px;
   height: 21px;
   stroke: var(--elem-colorvar);
   cursor: pointer;
   user-select: none;
}

.obs-btn-selected{
   stroke: var(--third-color);
   filter:
      drop-shadow(0 0 12px var(--third-color))
      drop-shadow(0 0 15px rgb(238, 180, 255))
}

#obs-options-cont{
   width: 80%;
   display: flex;
   justify-content: center;
   gap: 30%;
   background-color: var(--base-colorvar);
   padding: 1% 5% 1% 5%;
   border-radius: 15px;
   box-shadow: var(--shadowbox);
}


.obs-svg-btn:hover{
   transform: scale(1.1);
    stroke: var(--third-color);
    filter:
        drop-shadow(0 0 5px var(--third-color))
        drop-shadow(0 0 10px rgb(238, 180, 255))
}

#obs-navbar{
   margin-top: 7.5%;
   display: flex;
   flex-direction: column;
   
}

#navbar-input{
   height: 5vh;
   width: 90%;
   border-radius: 15px 15px 0 0;
   background-color: var(--base-color);
   border: 1px solid var(--text-color);
   color: var(--text-color);
   text-align: center;
   font-size: large;
   align-self: center;
   font-family: "Mansalva";
   
}

#obs-navbar-wanted{
   display: flex;
   justify-content: center ;
   gap:25%;
   padding: 1.5% 0 1.5% 0;
   height: 3vh;
   width: 90%;
   border-radius: 0 0 15px 15px;
   background-color: var(--base-color);
   border: 1px solid var(--text-color);
   border-top: 0;
   color: var(--text-color);
   text-align: center;
   font-size: small;
   align-self: center;
}

#obs-navbar-wanted h4{
   align-self: center;
   font-family: "Mansalva";
}

#obs-navbar-wanted h4:hover{
   transform: scale(1.1);
   filter:
   drop-shadow(0 0 5px var(--third-color))
}

.wanted-btn-selected{
   transform: scale(1.2);
   filter: 
   drop-shadow(0 0 15px var(--text-color))
   drop-shadow(0 0 5px var(--third-color))
   
}

#server-status{
   font-family: Mansalva;
   margin-top: 15vh;
   margin-bottom: -20vh;
   display: block;
   width: 100%;
   font-size: medium;
   text-align: center;
}

#obs-nav.eyes{
   margin-top: 7.5vh;
   overflow-x: auto;
   scroll-behavior: smooth;
   display: flex;
   gap: 3%;
   background-color: var(--base-color);
   padding: 3% 0 3% 0;
   width: 100%;
   height: 20vh;

   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE/Edge */
}

#obs-nav.eyes::-webkit-scrollbar {
   display: none;      
}

#obs-nav.bino{

}

#obs-nav.telescope{

}


#obs-nav-infos{
   margin: 3vh auto 0 auto;
   text-align: center;
   width: 100%;
   user-select: none;
}

#obs-nav-infos h3{
   color : var(--text-color);
   font-family: "Mansalva", sans-serif;
   font-size: 1.5em;
   user-select: none;
}


.carrousel-card{
   flex: 0 0 40%;
   aspect-ratio: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   user-select: none;
}

.carr-object{
    width: 70%;
    height: 70%;

    object-fit: cover;

    cursor: pointer;
    border-radius: 50%;

    filter:
        drop-shadow(0 0 2px var(--third-color))
        drop-shadow(0 0 6px rgb(247, 247, 247));

   user-select: none;
}

.carr-object:hover{
   transform: scale(1.06);
}

.carr-object-selected{
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    filter:
        drop-shadow(0 0 2px var(--third-color))
        drop-shadow(0 0 6px rgb(247, 247, 247));
}

.carr-object-selected:hover{
   transform: scale(1);
}


.status-light{
   margin-right: auto;
   margin-left: auto;
   margin-top: 0.25em;
   height: 0.75em;
   width: 0.75em;
   background: var(--light-color);
   border-radius: 50%;
   border: 1px solid var(--text-color);
   flex: 0 0 1;
   box-shadow:
      0 0 13px 4px var(--light-color);
   user-select: none;
}


#weather-cont{
   margin-top: 12vh;
   margin-left: auto;
   margin-right: auto;
   width: 90vw;
   height: 25vh;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
   padding-bottom: 3vh;

   box-shadow: var(--shadowbox);

}

.mid-title{
   align-self: center;
   margin-top: 2%;
   font-family: "Mansalva";
   font-size: 1.5em;
   user-select: none;
}

#scores-cont{
   margin-top: 3vh;
   display: flex;
   gap: 15%;
}

.svg-score{
   margin-top: -2vh;
   margin-left: 7.5vw;
}

#check-score{
   color: rgb(74, 214, 23);
   filter: 
      drop-shadow(0 0 9px rgb(102, 255, 0))
}

#wave-score{
   color: rgb(255, 215, 82);
   filter: 
      drop-shadow(0 0 9px rgb(255, 215, 82))
}

#cross-score{
   color:red;
   filter: 
      drop-shadow(0 0 9px rgb(255, 3, 3))
}

.score-div-title{
   margin-left: 2vw;
}

#total-score-text{
   font-family: "Mansalva";
   margin-top: 0.5vh;
   font-size: 1.7em;
   margin-left: 4vw;
}

#detail-score-cont{
   font-size: small;
   margin: 2vh auto 0 auto;
}



#nav-bar{
   z-index: 3;
   position : fixed;
   margin-left: 5%;
   margin-bottom: 5%;
   bottom: 0px;
   width: 90%;
   height: 6.5vh;
   border-radius:10vh ;
   background-color: var(--base-colorvar);
   display: flex;
   flex-wrap: nowrap;
   justify-content: center;
   gap:1.5%;
   box-shadow: var(--largershadowbox);
}

#nav-bar svg{
   align-self: center;
   transition: transform .2s, filter .2s;
}

.nav-bar-svg-btn{
   width: 20%;
   height: 65%;
   stroke: var(--elem-colorvar);
}

.nav-btn-selected{
   stroke: var(--third-color);
   filter:
      drop-shadow(0 0 20px var(--third-color))
      drop-shadow(0 0 15px rgb(238, 180, 255))

}

#nav-bar svg:hover{
   transform: scale(1.1);
   cursor: pointer;
   stroke: var(--third-color);
   filter:
      drop-shadow(0 0 9px var(--third-color))
      drop-shadow(0 0 11px rgb(238, 180, 255))
}

/* hide is used only for one elem */
.hide{
   display: none;
}

.hidden{
   display: none;
}

/* Coming pop up */

#coming-popup-cont.open{
   z-index: 5;
   position: absolute;
   display: flex;
   align-items: center;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 75%;
   height: 20%;
   background-color: var(--base-color);
   border: 2px solid ;
}

#coming-popup-cont h3{
   margin: 0 auto 0 auto;
}

/* Settings panel */
#settings-panel.open{
   z-index: 2;
   position: fixed;
   overflow-x: hidden;
   bottom: 0;
   width: 100vw;
   height: 100vh;
   background-color: var(--base-color);
   transform-origin: bottom;
   display:flex;
   flex-direction: column;   

   /* animation: ease-in-out 1s top ; */
}

#settings-top-border{
   margin-top: 27.5%;
   width: 100%;
   border: 1px solid var(--third-color);
   filter:
      drop-shadow(0 0 1px var(--third-color))
      drop-shadow(0 0 10px rgb(247, 247, 247));
}

#settings-title{
   font-size: 1.7em;
   margin: 3.5vh auto 1vh auto;
   font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#settings-hr{
   margin-bottom: 7.5vh;
}

#color-caption{
   font-size: 1.3em;
   margin-left: 6vw;
   font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#check-boxes-cont{
   margin: 4.5vh auto 3vh auto;
   display: flex;
   gap: 8vw;
}

.color-box{
   /* remove the tick of vanilla css checkbox */
   appearance: none;
   -webkit-appearance: none; /* For Safari support */
   height: 1.75em;
   width: 1.75em;
   background-color: var(--third-color);
   border : 1.75px solid var(--text-color);
   border-radius: 7.5%;
   cursor: pointer;
   margin-bottom: 4vh;
}

.color-box:hover{
   transform: scale(1.1);
}

.color-box.selected{
   filter:
      drop-shadow(0 0 5px var(--third-color))
      drop-shadow(0 0 8px rgb(247, 247, 247));
   accent-color: rgba(0 , 0 , 0 , 0);
}

#email_form{
   margin: 2vh auto 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1vh;
   width: 75%;
   padding: 2.5vh;
   border: 1px solid var(--text-color);
   border-radius: 5%;
}

.email-infos{
   height: 3vh;
   width: 65vw;
}

#email-message{
   resize: none;
   margin-top: 2vh;
   width: 65vw;
   height: 10vh;
}

#email_form button{
   margin-top: 1vh;
   width: 65vw;
   font-family: "Mansalva";
}

/*Acces denied pop up */
#noacces-popup-cont.open{
   z-index: 5;
   position: absolute;
   display: flex;
   align-items: center;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 75%;
   height: 20%;
   background-color: var(--base-color);
   border: 2px solid ;
}

#noacces-popup-cont h3{
   margin: 0 auto 0 auto;
}

.pc-popup{
   display: none;
}


@media (min-width : 769px) {

   #pc-popup{
      display: block;
      position: absolute;

      top:50%;
      left:50%;
      transform: translate(-50% , -50%);

      width: 80vw;
      height: 40vh;

      background-color: var(--base-color);

      text-align: center;
   }
}