/* The Modal (background) */
.modal { user-select:none;   
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10001; /* Sit on top */
  padding-bottom: 10px;padding-top: 100px; /* Location of the box */
  left: 0;transition: 0.3s;
  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.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal .modal-content {
  margin: auto;  //position :relative;
  display: block;
  width: 100%;  //height:100%;
  transition: 0.3s;
}
  .modal .modal-content .cdof {
  margin: auto;
  display: block;
  width: 100%%;  height:450px;
    transition: 0.3s;
}

/* Caption of Modal Image */
.modal #caption { 
  margin: auto;
  display: block;
  width: 85%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  //height: 100%;
  transition: 0.3s;
}

.modal #link {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;transition: 0.3s;

}



  
/* Add Animation */
.modal #link, .modal .modal-content, .modal .modal-content .cdof, .modal #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

  
.modal .bngd {
  position: absolute;
  top: 15px;
  right: 35px; 
  }

  /* The Close Button */
.modal .ssclose {
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.modal .ssclose:hover,
.modal .ssclose:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;transition: 0.3s;
}

  /* The Close Button */
.modal #btons_cont {
  position: absolute;
  top: 15px;
  left: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
  
.modal #btons_cont .btns {
  color: #f1f1f1;padding:2px;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;margin-right:5px;
}

  
  .modal #btons_cont .btns .thung{   opacity:0.8;  transition: 0.3s;  }
  .modal #btons_cont .btns:focus .thung, .modal #btons_cont .btns:hover .thung{   opacity:1; transition: 0.3s; }
  

.modal #btons_cont .tcbtns {
  color: #f1f1f1;padding:3px;
  font-size: 20px;
  font-weight: bold; overflow:auto;
  transition: 0.3s;margin-right:5px;
}
  .modal #btons_cont .tcbtns.c {width:100%;position:absolute;text-align:center;}
  
  
.modal #btons_cont .btns:hover,
.modal #btons_cont .btns:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;transition: 0.3s;
}

  
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal .modal-content {
    width: 100%;
  }
}
  
  
  
  /* Firefox (uncomment to work in Firefox, although other properties will not work!)  */
/*.modal {
  scrollbar-width: thin;
  scrollbar-color: #170C75 #DFE9EB;
}*/




/* Chrome, Edge and Safari */
body::-webkit-scrollbar,.modal::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}
body::-webkit-scrollbar-track,.modal::-webkit-scrollbar-track {
  border-radius: 3px;
  background-color: #DFE9EB;
  border: 1px solid #FFFFFF;
}

body::-webkit-scrollbar-track:hover,.modal::-webkit-scrollbar-track:hover {
  background-color: #B8C0C2;
}

body::-webkit-scrollbar-track:active,.modal::-webkit-scrollbar-track:active {
  background-color: #B8C0C2;
}

body::-webkit-scrollbar-thumb,.modal::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #170C75;
  border: 1px solid #FFFFFF;
}

body::-webkit-scrollbar-thumb:hover,.modal::-webkit-scrollbar-thumb:hover {
  background-color: #4747A3;
}

body::-webkit-scrollbar-thumb:active,.modal::-webkit-scrollbar-thumb:active {
  background-color: #065FA3;
}


body.darkmode::-webkit-scrollbar-track{
  border: 1px solid #333;
}
body.darkmode::-webkit-scrollbar-thumb{
    border: 1px solid #000;
}