.navbar {
  
  z-index: 1;
  
  min-height:32px !important; /*navbar lian loa dahna*/
  
}

.navbar-nav > li > a {
  
  padding-top:5px; 
  
  padding-bottom:5px;
  
}

.nav-item:hover, .homeLinkButton:hover {
  
  background-color: #d3d3d3;
  
  border-radius: 8px;
  
  animation-delay: 5s;

}

.navbar-adjust {
  
  display: flex;
  
  justify-content: flex-end;
}

.dropdown-item:hover {
  
  border-top: 1px solid #f1f1f1;
  
  border-bottom: 1px solid #f1f1f1;
}

.list-group .studentTable {
  
  border-right: 1px solid #ddd;
  
  border-left: 1px solid #ddd;
  
}

.accordion {
  
    z-index: 0;
    
    background-color: white;
    
    position: relative;

}

.btn-link, .modal-body a {
  
  text-decoration: none;
  
}

.profileButton button, .buttonText {
  
  text-decoration: none;
  
  color: black;
}

.profileButton button:hover, .buttonText:hover {
  
  color: white;
  
}

.jojoIconColor {
  
  color: #FD2501!important;
  
}

.modal-body .lessonHover:hover {
  
  border-bottom: 1px solid #2087C2;
  
  animation-delay: 2s;
  
  color: #2087C2!important;
  
}

.greenColor {
  
  color: #31A24C;
  
  background-color: white;
  
  border: 2px solid white;
  
  border-radius: 50%;
  
}

.bgSmoke {
  
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  
}

.textSmoke {
  
  color: #FCC57E;
}

.orangeColor {
  
  color: #EC7211;
  
}

.bgColor {
  
  color: #1DA1F2;
  
}

.myLink {
  
  padding: 10px;
  
}

.myLink:hover {
  
  text-decoration: underline;
  
  animation-delay: 5s;

}

.bgGradientPink {
background-color: #7f53ac;
background-image: linear-gradient(315deg, #7f53ac 0%, #647dee 74%);
border-radius: 50%;
}

.bgGradientBlue {
  
  background-color: #045de9;
  background-image: linear-gradient(315deg, #045de9 0%, #09c6f9 74%);
  border-radius: 50%;
  
}
.bgGradientRed {
background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
border-radius: 8px;
  
}
.bgGradientYellow {
  
  background-image: linear-gradient(to left, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
  border-radius: 8px;
  
}

.bgGradientBlueButton {
  
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  border-radius: 8px;
  
}

.container {
  
  max-width: 960px;
  
}

.mission-header {
  
  max-width: 650px;
}

.symbolCircle {
  
  background-color: #E4E6E8;
  border-radius: 50%;
  
}

.tableHeaderColor {
  background-color: #56BDEA;
}

.carousel-caption {
  color: black;
  text-align: center;
  top: 50%;
  left: 50%;
  max-width: 300px;
  transform: translateY(-50%);
  font-size: 90%;
}

/*-------------media query for video fullscreen-----------*/
@media only screen and (max-width: 768px) {
  
body {
  
  font-size: 95%;
  
}

thead, tbody {
  
  font-size: 90%;
  
}

.modal-title {
  
  font-size: 97%!important;
  
}
  
.navbar-nav > li > a {
  
  padding-left: 5px !important; 

  }
  
  .navbar-adjust {
    
  display: flex;
  
  justify-content: flex-start;
 
}

.navbar-brand {
  
  padding-left: 1px;
  
}

.threeLine {
  
  margin-right: 1px;
  
}

.smarterFont, h4 {
  
  font-size: 22px!important;
  
}
.objective {
  
  font-size: 17px!important;
  
}

.card {
  
  max-width: 290px;
  max-height: 350px;
  margin: auto;
}

.carousel-caption {
  color: black;
  text-align: center;
  top: 45%;
  left: 45%;
  max-width: 400px;
  transform: translateY(-50%);
  font-size: 68%;
}


}

/*media quiery of 990 end ===============================*/


.container a{
  
  text-decoration: none;
}

.card {
    text-align: justify;
  }
  
  
  .borderTop {
    
    border: 1px solid gray;
    
  }


/*-------------media query for video fullscreen-----------*/

@media only screen and (max-width: 600px) {
  
  .container-fluid, .card-body {
    
    width: 100vw;
    
    padding: 0;
    
    margin: 0;
    
  }
  
  .tryAnswer {
    width: 100%;
    margin-left: 10px;
  }
  
.carousel-caption {
  color: black;
  text-align: center;
  top: 40%;
  left: 50%;
  max-width: 350px;
  transform: translateY(-50%);
  font-size: 80%;
}
  
  
}

@media only screen and (max-width: 450px) {
  .branchNamejojo {
    font-size: 90%;
}

.carousel-caption {
  color: black;
  text-align: center;
  top: 35%;
  left: 50%;
  max-width: 400px;
  transform: translateY(-50%);
  font-size: 68%;
}

.carousel {
  width: 100vw;
  padding: 0;
  margin: 0;
}

.carousel-item img {
  height: 170px;
}


}

@media only screen and (max-width: 365px) {
  
  .branchNamejojo {
    font-size: 90%;
} 

/*.carousel-caption {*/
/*  color: black;*/
/*  text-align: center;*/
/*  top: 25%;*/
/*  left: 50%;*/
/*  max-width: 400px;*/
/*  transform: translateY(-50%);*/
/*  font-size: 65%;*/
/*}*/


}