/* Hide vertical scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
  display: none;
}

/* remove top down pull refresh (undesired to refresh when navigating) */
html, body {
  overscroll-behavior: none;
  background-color: #0e0c1b;
  margin: 0;
  padding: 0;
}

main {
  margin: auto;
  text-align: center;
  }

.mainAppWrapperWithNavBar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}


/* Add a background color to the top navigation */
.topnav {
    text-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    background-color: #191532;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
    overflow: hidden;
    position: sticky;
    top: 0px;

    box-shadow: 0 2px 5px 0px rgba(0,0,0,.5);
    z-index: 999;
  }
  
  .topnavlogo {
    float: left;
    max-width: 134px;
    padding: 8px 15px;
    display: block;
    text-align: center;
    cursor: pointer;
  }

  /* Style the buttons inside the navigation bar */
  .topnav a {
    cursor: pointer;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    transition: background-color 0.5s ease;
  }
  
  /* Change the color of buttons on hover */
  .topnav a:hover {
    /* was #ddd */
    background-color: #0e0c21;
    color: rgb(255, 255, 255);
  }
  
  /* Add an active class to highlight the current page */
  .topnav a.active {
    background-color: #178b0e;
    color: white;
    transition: background-color 0.2s;
  }

  .topnav a.inactive {
    background-color: #191532;
    color: white;
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }


  /* MEDIA QUERRIES */

  /* When the screen is less than 750 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 750px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 750px) {
    .topnav.responsive {position: relative;}
    .topnavlogo.responsive{        
        float: none;
        display: block;
        text-align: left;
    }
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: center;
    }
  }


  /*individual menu DIV styling*/
  .weatherMainDiv{
    background-color: #0e0c1b;
    position: relative;
    display: none;
    height: 100%;
    width: 100%;
}

.activeMainPanelDiv{
  color:#ddd;
  background-color: #0e0c1b;
  position: relative;
  display: block;
  overflow: auto;
  top: 0px;
  height: 100%;
  width: 100%;
  transition: all 0.5s ease-in-out;
}

.inactiveMainPanelDiv{
  /* added content-visibility auto to autohide stuff that isn't in screen. Might improve performance, but might also increase tab load times. Check it and remove later if effect is negative */
  top: 200vh;
  position: relative;
  height: 0px;
  content-visibility: auto;
  color:#ddd;
  background-color: #0e0c1b;
  /* height: 0px; */
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

/* The login Modal styling, primarily its (background) */
.onBootupModal {
  display: block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.75); /* Black w/ opacity */
}

/* Modal Content/Box */
.onBootupModal-content {
  /*background-color: hsla(250, 61%, 10%, 0.841);*/
  /*background: linear-gradient(#040534e0, #014434db); de groen met blauwe */
  background: linear-gradient(#040534e0, #280634d4);
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border-radius: 40px;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 600px;
  color:#ffffff;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
}

/* The Close Button for the modal */
.onBootupModalClose {
  color: #b0b0b0;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.onBootupModalClose:hover,
.onBootupModalClose:focus {
  color: rgb(255, 255, 255);
  text-decoration: none;
  cursor: pointer;
}

.onBootupModalLogo{
padding: 5px;
  width: 70%;
  max-width: 350px;
}


/*styling for the login section*/

.login-box {
  margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
transition: all 0.3s;
}

.login-box h2 {
  padding: 0;
  color: rgb(228, 195, 47);
  font-weight: bold;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.login-box .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

.loginButton {
  margin: 10px;
  padding: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 30px;
  background-color: #ffffff00;
  border: 2px solid aliceblue;
  color: aliceblue;
  font-size: 1.4rem;
  transition: 0.5s;
}

.loginButton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.loginButton span:after {
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.loginButton:hover {
  transform: translateY(4px);
  background-color:rgba(5, 4, 19, 0.219);
}

.loginButton:hover ::after {
  transform: translateY(4px);
  background-color:rgba(16, 2, 203, 0.219);
}
.loginButton:active {
  transform: translateY(4px);
  background-color:aliceblue;
  color: black;
  transition: 0.2s;
  box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 10px;
}

.installButton {
  scale: 1;
  display: inline-block;
  border-radius: 24px;
  background-color: #259913;
  border: solid 3px;
  border-color:#ffffff;
  color: #ffffff;
  text-align: center;
  font-size: 15px;
  padding: 10px;
  width: 150px;
  font-weight: bold;
  transition: all 0.3s;
  cursor: pointer;
  margin: 5px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.installButton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.installButton span:after {
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.installButton:hover {
    background-color: #2fc118;
}

.installButton:hover span:after {
  opacity: 1;
  right: 0;
}
.installButton:active {
  background-color: #191532a2;
  transform: translateY(4px);
}

/* dropdown sections styling */
/* Style the button that is used to open and close the collapsible content */
.collapsibleDiv {
  background-color: #191532;
  color: #ffffff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  font-weight: bold;
  font-family: "segoe ui";
  outline: none;
  font-size: 15px;
  border-radius: 30px;
  transition: background-color 0.2s ease;
  transition: border-radius 0.1s ease;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.collapsibleActive, .collapsibleDiv:hover {
  background-color: #191631;
}

.collapsibleActive{
  background-color: #191631;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  box-shadow: rgba(0, 0, 0, 0) 0px 3px 8px;
}

/* Style the collapsible content. Note: hidden by default */
.collapsibleDivContent {
  padding: 0px 16px;
  background-color: #191631;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

.collapsibleDiv:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.collapsibleActive:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}
.collapsiblesHolder{
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
  transition: all 0.2s;
}



/* Box for the direct-to overlay */
.directToOverlay{
  display: none; /* Hidden by default */
  position: absolute; /* Stay in place */
  z-index: 100000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.503); /* Black w/ opacity */
}

.inputBox{
  position: relative;
  margin: 5px;
}

.textInputInFieldOld{
  position: relative;
  padding: 5px;
  padding-left: 10px;
  width: 80%;
  border: 1px solid #ffffff; 
  background-color: #00000048;
  border-radius: 50px;
  outline: none;
  height: 40px;
  color: #ffffff;
  font-size: 16px;
  transition: all 0.2s ease-in-out;
  transition: border-width 0.2s ease-in-out;
  }

.textInputInField{
  position: relative;
  padding: 5px;
  padding-left: 10px;
  width: 80%;
  border: 0px;
  background-color:rgba(0, 0, 0, 0.445);
  border-left: 5px solid #ffffff; 
  border-right: 5px solid #ffffff;
  border-radius: 0px;
  outline: none;
  height: 40px;
  color: #ffffff;
  font-size: 16px;
  transition: all 0.2s ease-in-out;
  }

.textInputInField::placeholder{
  color: #6c6c6c;
  text-align: center;
  }

.textInputInField:focus{
  border-left: 5px solid #ffbf00; 
  border-right: 5px solid #ffbf00;
  }

.textInputInField:not(:placeholder-shown){
  border-left: 5px solid #ffbf00; 
  border-right: 5px solid #ffbf00;
  }

.textInputInField ~ label{
  margin-bottom: 0px;
  margin: 5px;
  color: #ffffff;
  font-size: 16px;
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 1);
  }



.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #820a0a;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #820a0a transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.lds-loading-container{
  position: absolute;
  max-width: 500px;
  width: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color:#0f0a28;
}

.loadingTitleText{
  font-weight: bold;
  font-size: 1.5rem;
}

.loadingPercentage{
  font-size: 2rem;
  font-weight: bold;
}

.loadingFooterText{
  text-align: left;
  font-size: 1.4rem;
}

.JVFRcurrentversiontext{
  font-style: italic;
  font-size: 1.5rem;
  text-align: center;
  margin-top: 10px;
  color: #ffffff;
  padding: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color:rgb(5, 110, 77);
  border-radius: 50px;
  width:fit-content;
  margin-left: auto;
  margin-right: auto;
}

.infoModalMainText{
  line-height: 1.6;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 1.5rem;
  text-align: left;
  margin-top: 10px;
  color: #ffffff;
}

.infoModalTitle{
  margin-left: 10px;
  margin-right: 10px;
  font-size: 2.3rem;
  text-align: center;
  font-weight: bold;
  margin-top: 10px;
  color: rgb(228, 195, 47);
}


.hamburger-menu-icon {
  position: absolute;
  right: 0px;
  background: url('../images/hamburger-menu-icon.svg');
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center;
  height: 100%;
  aspect-ratio: 1/1;
  display: block !important
  /* Other styles here */
}

/* query to remove the hamburger dropdown icon when the screen is wide enough */
@media screen and not (max-width: 750px)
{
  .hamburger-menu-icon {
    display: none !important
  }
}



.helpIcon{
  position: relative;
  background: url('../images/helpicon-yellow.svg');
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: center;
  height: 25px;
  aspect-ratio: 1/1;
  margin: 5px;
  margin-top: 0px;
  margin-bottom: 0px;
  display: inline-block;
  vertical-align: middle;
  /* Other styles here */
}

.helpContainer{
  position: absolute;
  top: 7px;
  right: 7px;
  margin: 5px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  float: right;
  /* Other styles here */
}

.helpText{
  font-size: 1.2rem;
  color: rgb(228, 195, 47);
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0px;
}


.bottomInfoContainer{
  margin-left: auto;
  margin-right: auto;
  max-width: 550px;
  border-radius: 10px;
  background-color:rgba(0,0,0,0.3);
  padding: 10px;
}

.bottomInfoTitle{
  text-align: left;
  font-size: 1.6rem;
  font-weight: bold;
}


.bottomInfoText{
  color:#a8a8a8;
  text-align: left;
  font-style: italic;
  font-size: 1.3rem;
}