/* import fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400&family=Roboto:wght@300;400&display=swap');
/* vars */
:root{
  --dark-blue: #132e6e;
  --dark-blue-highlight: #4664ab;
  --dark-blue-text: #8ad0ff;
  --grey-text: #ededed;
}
/* general styling */
body{
  margin:0 0;
  overflow:hidden;
  font-family: 'Roboto Slab', sans-serif;
  font-weight:400;
}
h1,h2,h3,h4,h5,h6{
  color:  var(--dark-blue-text);
}

h1,h2,h3,h4,h5,h6,nav ul li a{
  font-family: 'Roboto', sans-serif;
  font-weight:500;
}
/* nav styling */
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
    border:none;
}

.dark-blue{
  /* background-color: #001545; */
    background-color: #284280;
    background-color:  var(--dark-blue);
}

nav{
  padding-left: 10px;

}
.navbar-nav .nav-item .nav-link{
  font-size:1.2em;
  padding-right:1.1em;
}

/* underline animation Adapted from online sources   */
.underline-effect:after{
  content:"";
  display:block;
  position:relative;
  visibility:hidden;
  height:2px;
  width:0;
  left:0;
  bottom:0;
  background-color:#fff;
  transition:0.3s;
}
.underline-effect:hover:after{
  width:100%;
  visibility:visible;
  height:2px;
}

.nav-link.active:after{
  background: none repeat scroll 0 0 transparent;
  bottom:0;
  content:"";
  display:block;
  height:2px;
  left:-5%;
  position:relative;
  background-color:#fff;
  width:110%;
}

/* Navigation */
.burgerLine{
    border:1px solid white;
    border:2px solid #8F8F8F;
    margin-top:0.3em;
    transition:0.5s;
    border-radius:3px;
    width:35px;
}

#background{
  position:fixed;
  width:100%;
  height:100%;
  left:0;
  z-index:-100;
  background-image: url("./../media/background/side-3.jpg");
  background-repeat: no-repeat, repeat;
  background-position: center;
  background-repeat: no-repeat;
  background-size:  cover;
}
.container{
  margin-top:3em;
}
/* card styling */
.card{
  color:var(--dark-blue-text);
  border-radius:10px;
  box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);
  margin-top:2em;
  /* 1 alt */
  /* background-color: rgba(255, 255, 255, 0.7); */
  /* alt 2 */
  /*
    background-color: rgba(104, 144, 171, .4); */
  background-color: rgba(63, 91, 110, .8);
  backdrop-filter: blur(10px);
}


.card a,button.btn-form {
  display:block;
  background-color: var(--dark-blue);
  color:white;
  padding:5px;
  margin-top:10px;
  margin-bottom: 10px;
  margin-left:0;
  border-radius: 5px;
  border:1px solid white;
  transition:0.1s;

}
.card a:hover ,button.btn-form:hover{
  background-color: var(--dark-blue-highlight);
  color: white;
}
.container a,.container a:focus{
  /* color:white; */
}
.container a:hover{
  text-decoration: none;
}

.card-body h4{
 margin-top:0.2em;
 margin-bottom:0.2em;
 font-size:1.2em;
}
.card div{
  font-size:1em;
}
.card h6{
  font-size:1.05em;
}
 /*Home page styling specifics */
div.hours h6{
   margin-top:0.4em;
   /* font-size:1.1em; */
}
div.hours .highlightHours h6,div.hours .highlightHours div{
  transition:0.5s;

}
.extraInfoVirt{
    margin
}
/* div.hours .highlightHours:hover h6,div.hours .highlightHours:hover div{
  text-decoration: underline;
  color:var(--grey-text);
} */
.white{
  color:white;
}

div.hours .highlightHours{
  border-bottom:1px solid white;
  padding-bottom:10px;
  margin-bottom:10px;
}
div.specific-hours{
  color:var(--grey-text);
}
.card label{
  color:var(--grey-text);
  font-size:1.3em;
}
.card .form-check label{
    color:var(--dark-blue-text);
}
.form-group{
  border-bottom:2px solid white;
  padding-bottom:10px;
}
button.submit{
  color:var(--dark-blue);
}

/* billing info */
.paymentOption{
  padding-left: 20px;
  color: white;
}
.discountHeading{
  padding-top:15px;
}
.horizontalBreak{
  border-top: 3px solid var(--dark-blue);
}

.medicalAidExtra{
  width:90%;
  margin:0 auto;
  padding-left: 30px;
  color:var(--grey-text);
}

.medicalAidExtra p{
  font-size:1.1em;
}
@media only screen and (max-width: 1281px) {
  body{
    overflow-y: scroll;
    overflow-x: hidden!important;
  }
}
@media only screen and (max-width: 992px) {
    #navbarToggler{
      box-shadow: 0px 20px 20px 5px rgba(0,0,0,0.2);
    }
    body{
      overflow-y: scroll;
      overflow-x: hidden!important;
    }
    .navbar-collapse {
        position: fixed;
        top: 50px;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 20px;
        width: 50%;
        height: 100%;
        z-index:100;
    }

    .navbar-collapse.collapsing {
        left: -50%;
        transition: height 0s ease;
    }

    .navbar-collapse.show {
        left: 0;
        transition: left 300ms ease-in-out;
    }

    .navbar-toggler.collapsed ~ .navbar-collapse {
        transition: left 500ms ease-in-out;
    }
    /* remove hover effects for smaller devices */
    .nav-link.active:after{

      width:0%;
    }
    .underline-effect:hover:after{
      width:0%;

    }


    .card{
      border-radius:10px;
      box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);
      /* 1 alt */
      /* background-color: rgba(255, 255, 255, 0.7); */
      /* alt 2 */
      backdrop-filter: blur(5px);
    }
}

/* to hide elements not ready yet */
.hideElements{
  display:none;
}


.btnIcon{
  margin-right: 8px;
  text-align: left;
}

#bookingStatus{
  color: white;
  border-radius: 10px;
  font-size: 2em;
}


.checkbox {
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox:hover .checkmark {
  background-color: #ccc;
}