body{
  background-color: rgba(251, 251, 251, 0.97);
}

.dataTable{
  background-color:white;
}
.floating_form_more_green{
  right:1%;
  top:2%;
  position:absolute;
  background-color:white;
  border:1px solid lightgrey;
  border-radius:6px;
  box-shadow:2px 3px 4px 3px lightblue;
  z-index:1;
  visibility:hidden;
}
.floating_form_more_green::before{
  content:'';
  width:0px;
  height:0px;
  border-right:12px solid transparent;
  border-left:12px solid transparent;
  border-top:12px solid transparent;
  border-bottom:12px solid green;
  position:absolute;
  right:14px;
  top:-22px;
}
.floating_form_more_blue{
  right:1%;
  top:2%;
  position:absolute;
  background-color:white;
  border:1px solid lightgrey;
  border-radius:6px;
  z-index:1;
  visibility:hidden;
}
.floating_form_more_blue::before{
  content:'';
  width:0px;
  height:0px;
  border-right:12px solid transparent;
  border-left:12px solid transparent;
  border-top:12px solid transparent;
  border-bottom:12px solid blue;
  position:absolute;
  right:14px;
  top:-22px;
}
  .wrapper{
    left:0;
    top:0;
    width:15%;
    height:100%;
    position:fixed;
    background:rgb(0,0,200);
    background: rgba(0,0,200,0.5);
    opacity:1;
    overflow-y:auto;
  }
  .wrapper .nav-left-logo{
    width:100%;
    padding:15px;
    text-align:center;
    border-bottom:2px solid white;
  }
  .wrapper .nav-left-logo a{
    color:white;
    text-transform:uppercase;
    font-weight:200;
  }
  .wrapper .nav-left-logo #nav-btn{
    right:2px;
    top:2px;
    position:absolute;
  }
  .wrapper .nav-left-nav{
    display:block;
    width:100%;
  }
  .wrapper .nav-left-nav a{
    color:white;
    font-size:15px;
  }
  .wrapper .nav-left-nav a:hover{
    background-color:lightgrey;
    color:black;
  }
  .main-container{
    margin-left:250px;
    padding:15px;
    width:calc(100%-250px);
  }
  .main-container .top-bar{
    left:0;
    top:0;
    margin-left:0px;
    width:100%;
    height:50px;
    padding:10px;
    background:#fff;
    border-bottom:2px solid;
  }
  .main-container .top-bar .profile-side img{
    width:40px;
    height:40px;
    float:right;
    top:0;
  }
  .main-container-main{
    margin-left: 220px;
    width:calc(100% - 220px);
    padding:15px;
    margin-top:70px;
    overflow:auto;
    height:100%;
    margin-bottom:50px;
  }
  .main-container-main .contents{
    padding:10px;
    width:100%;
  }
  .main-top-bar{
    height:40px;
    padding: 5px 15px;
    background-color:#fff;
    position:fixed;
    margin-left: 220px;
    width:calc(100% - 210px);
    border-bottom:1px solid lightgrey;
    display:inline-block;
    z-index:1;
  }
  .main-top-bar .dash-link{
    text-transform:uppercase;
    font-weight:600;
    padding:0px 8px;
    width:250px;
    float:left;
  }
  .main-top-bar .profile_nav{
    float:right;
    display:flex;
    justify-content: space-between;
    padding:0 10px;
  }
  .main-top-bar .profile_nav .icon{
    float:right;
    font-size:25px;
    background: white;
    border-radius:50%;
    width:35px;
    text-align:center;
    padding:4px;
    cursor:pointer;
  }
  .main-top-bar .profile_nav .icon:hover{
    background-color: white;
    border:1px solid lightblue;

  }
  .main-top-bar .profile_nav .icon i{
    color:blue;
  }
  .main-top-bar .profile_nav img{
    width:30px;
    height:30px;
    border-radius:50%;
    cursor:pointer;
  }
  .main-top-bar .profile_nav .name{
    padding:0px 5px;
  }
  .top-nav-other{
    border:1px solid;
  }
  .nav-requests{
    margin-left:220px;
    width:calc(100%-220px);
    height:50px;
    padding: 2px 10px;
    top:42px;
    position:fixed;
    border:1px solid white;
    background-color:rgba(250,250,250,0.9);
    border-bottom:1px solid lightgrey;
    overflow-x: auto;
    z-index:1;
  }
  .nav ul{
     margin:0;
     padding:0;
  }
  .nav li{
     margin: 0;
     padding: 0;
     display: inline;
  }
  .nav li:hover{
    background-color:lightgrey;
  }
  .nav-left-logo img{
    width:175px;
    height:115px;
    z-index:-1;
    position:absolute;
    top:0;
    left:1px;
    opacity:0.5;
  }
  .dashboard-display-items{
    visibility:hidden;
    position:absolute;
    z-index:1;
    background-color:white;
    border:1px solid lightgrey;
    border-radius:4px;
    box-shadow:1px 2px 3px 2px lightgrey;
    right:3%;
    top:7%;
    width:200px;
    display:block;
    position:fixed;
  }
  .dashboard-display-items a{
    display:block;
  }
  .head-dash-action{
      border-bottom:1px solid lightgrey;
      padding:8px;
  }
  .dash-items{
    padding:10px;
    color:black;

  }
  .dash-items a{
    border-bottom:1px solid lightgrey;
    margin:4px 0px;
    color:black;
    text-decoration:none;
    padding:4px;
  }
  .dashboard-display-items .bottom-btn{
    padding:10px;
    float:right;
  }
  .dashboard-display-items .bottom-btn btn{
    float:right;
  }
  .term-edit-div{
    width:80%;
    padding:15px;
    background-color:rgb(250,250,250);
    display:block;
  }
  .term-edit-button{
    display:none;
    float:right;
    border:2px solid blue;
    border-radius:4px;
  }
  .term-edit-div:hover .term-edit-button {
    display:block;
  }
  .floating-div-header{
    padding:10px;
    border-bottom:1px solid lightgrey;
    width:100%;
    font-size:14px;
  }
  .floating-div-header .div-hide-btn{
    float:right;
    text-align:center;
    padding:4px;
    right:0;
    top:0;
  }
  .floating-div-header .div-hide-btn:hover{
    background-color: red;
    color:white;
  }
  .div-head{
    display:inline;
  }
  .floating-div-term .div-form{
    padding:10px;
    width: 100%;
    height:100%;
    background-color:white;
  }
  .floating-div-term{
    background:#f5f5f5;
    width:80%;
    border:1px solid lightgrey;
    margin:5px 0px;
    visibility:hidden;
  }
  .icon-btn{
    margin:2px;
    width:30px;
    border-radius:50%;
    background-color:white;
    color:black;
    text-align:center;
    padding:2px;
  }
  .display-exams-registered{
    visibility:hidden;
    position:absolute;
    position:fixed;
    width:250px;
    right:1%;
    background-color:rgb(250,250,250);
    box-shadow:0.5px 1px 1.5px 1px lightgrey;
  }
  .display-exams-registered .form-header-exams{
    padding:10px;
    border-bottom:1px solid lightgrey;
  }
  .display-exams-registered .exam-display{
    padding:10px;
    z-index:1;
    overflow-y:auto;
    height:90% !important;
  }
  .display-exams-registered .exam-display .exam-div{
    border-bottom:1px solid;
    padding:6px;
  }
  #profile-form{
    border-bottom:1px solid lightgrey;
  }
  #profile-data a{
    text-decoration: none;
  }
  #profile-form:hover{
    background-color:lightgrey;
  }
  #spinners-div{
    width:100% !important;
    background-color:white;
    position:absolute;
    height:100% !important;
    z-index:100;
    opacity:0.8;
    position:fixed;
  }
  #spinners-div .spinners{
      text-align:center;
      position:relative;
      top:25%;
      z-index:101;
      opacity:1;
  }

  .session-end-notice{
    width:100% !important;
    background-color:white;
    position:absolute;
    height:100% !important;
    z-index:100;
    opacity:0.8;
    position:fixed;
  }
  .session-end-notice .ended-session{
    text-align:center;
    position:relative;
    opacity:1;
    top:30% !important;
    left:30% !important;
    width:40% !important;
    z-index:20000;
    background-color:white !important;
}


  .btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
  }
  .btn-flat {
      box-shadow: none !important;
      background-image: none !important;
  }
  .btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 25px;
  }
  .btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    font-size: 24px;
    line-height: 1.33;
    border-radius: 35px;
  }

  #show-institutes{
    display:none;
    position:absolute;
    background-color:white;
    z-index:1;
    width:20%;
    top:15%;
    padding:10px;
    box-shadow:2px 3px 4px lightgrey;
    left:30%;
  }
  .institute a{
    width:100%;
    padding:10px;
  }
  .institute a:hover{
    width:100%;
    background-color:lightgrey;
  }

  .main-top-bar{
    margin-left:20%;
    width:calc(100%  - 20%);
  }
  .profile_nav{
    float:left;
    width:calc(100% - 18%);
  }
  .nav-requests{
    width:80%;
    margin-left:20%;
  }
  .name{
    display:none;
  }
  .dashboard-display-items{
    z-index:100;
  }
  .main-container-main{
    margin-left:18%;
    width:calc(100% - 18%);
  }
  .hidden{
    display:none;
  }
  .search_results{
      width:80%;
      position:absolute;
      margin-top:5%;
      margin-left:10% !important;
      margin-right:20%;
      z-index:100;
      min-height:300px;
      box-shadow:1px 2px 3px lightgrey;
      background-color:white;
  }
  .success-message{
      margin-left:30%;
      margin-top:20% !important;
      width:400px !important;
      height:40px !important;
      position:absolute;
      font-size:16px;
      z-index:100;
      transition:2s left !important;
      border-radius:6px !important;
      color:white;
      background-color:green !important;
  }
  .success-ms-bg{
      background-color:green !important;
  }
  .error-ms-bg{
      background-color:red !important;
  }
  .success-ms-bg{
    background-color:lightgreen !important;
  }

  .display-minimum{
    display:hidden;
  }

  @media screen and (max-width:600px){
      .search_results{
          width:100%;
          margin-left:2%;
          margin-top:3%;
      } 
      .success-message{
        width:80%;
        margin-left:5%;
      }
  }

  @media screen and (max-width:600px)
  {
      .dash-canvas{
          width:99% !important;
      }
      .table{
          width:99% !important;
      }
      .enrollments{
        display:none !important;
      }
      .navbar{
        width:100% !important;
      }
      .hide-minimum{
        display:none !important;
      }
      .display-minimum{
        display:block;
      }
      .prof-name{
        display:none !important;
      }
      .top-bar{
        width:98% !important;
        /* box-shadow: 1px 2px 3px grey; */
        /* position:absolute; */
        top:1% !important;
        left:1% !important;
      }
      .top-bar li{
        border: 1px solid lightgrey;
        margin:2px;
      }
      .dash-top-bar{
        width:98% !important;
        /* top:20% !important; */
        margin-top:7% !important;
        /* position:absolute; */
        font:8px !important;
        z-index:10000px;
        height:100px !important;
        background-color:rgb(38, 122, 231);
      }
      .container-fluid .tab-content .tab-pane{
          width:98% !important;
      }           
  }

  @media screen and (max-width:1200px)
  {
      .dash-canvas{
          width:99% !important;
      }
      .table{
          width:99% !important;
      }
      .enrollments{
        display:none !important;
      }
      .navbar{
        width:100% !important;
      }
      .hide-minimum{
        display:none !important;
      }
      .display-minimum{
        display:block;
      }
      .prof-name{
        display:none !important;
      }
      .top-bar{
        width:98% !important;
        /* box-shadow: 1px 2px 3px grey; */
        /* position:absolute; */
        top:10% !important;
        left:1% !important;
      }
      .top-bar li{
        border: 1px solid lightgrey;
        margin:2px;
      }
      .dash-top-bar{
        width:98% !important;
        /* top:20% !important; */
        margin-top:7% !important;
        /* position:absolute; */
        font:8px !important;
        z-index:10000px;
        height:100px !important;
        background-color:rgb(38, 122, 231);
      }
      .container-fluid .tab-content .tab-pane{
          width:98% !important;
      }           
  }
  /*
  *colors for divisions
  */
  .red{
    background-color:red;
  }
  .green{
    background-color:green;
  }
  .liht-green{
    background-color:lightgreen;
  }
  .yellow{
    background-color:yellow;
  }
  .purple{
    background-color:purple;
  }
  .blue{
    background-color:blue;
  }

  .right{
		float:right;
	}
	.inline-block a{
		display:inline-block;
	}
  .user-profile{
    position:absolute;
    position:fixed;
    right:1%;
    border-radius:4px;
    box-shadow:1px 2px 3px 2px lightgrey;
    background-color:white;
    padding:10px;
    width:350px;
  }
  .profile-header{
    border-bottom:1px solid lightgrey;
  }
  .input-group{
    border:none;
  }
  .input-group:focus{
    border:1px solid white;
    background-color:rgb(250,250,250);
  }
  #notification-msg-form{
    left:10%;
    top:20%;
    right:50%;
    z-index:1;
    background-color: rgb(200,120,250);
    background-color: rgba(200,120,250,0.9);
    padding:10px;
    position:absolute;
    border-radius:4px;
    border:2px solid rgb(250,250,250);
    width:500px;
    text-align:center;
    box-shadow:2px 3px 4px 3px lightgrey;
  }

  .form-check{
    float:right;
    zoom:1.3;
  }
  #update-marks_single{
    display:block;
  }
  .right{
    float:right;
  }
  #add-student-subjects{
    display:block;
  }
  .form-check{
    float:left;
  }
  .form-check-input{
    vertical-align:middle;
  }
  .inline-block a{
    display:inline-block;
  }
  #science{
    border-bottom:3px solid blue;
    border-top:3px solid blue;
  }
  #maths{
    border-top:3px solid blue;
  }
  #human{
    border-top:3px solid blue;
  }
  #comm{
    border-top:3px solid blue;
  }
  #carts{
    border-top:3px solid blue;
    border-bottom:3px solid blue;
  }
  .footer{
    page-break-after:Always;
  }
  .term-ending-notice{
    position:absolute;
    background-color:#fed4e3;
    padding:10px;
    font-size:18px;
    border-radius:4px;
    top:3%;
    left:35%;
    width:60%;
    z-index:-1;
    box-shadow:1px 2px 3px 1px lightgrey;
  }

  .b4l-div{
    background-color:rgb(250,250,250);
    padding:10px;
    font-size:14px;
    margin:3px 0;
    transition:1s;
    box-shadow:1px 2px 3px lightgrey;
    min-height:70px;
  }
  .b4l-div:hover{
    font-size:20px;
    display:block;
  }
  .subject-div{
    width:100%;
    padding:10px;
    background:#f5f5f5;
    margin:5px 0;
  }
  .academics-div{
    width:100%;
    background-color:lightgreen;
    padding:10px;
    margin:4px 0px;
  }
  .message-div{
    padding:10px;
    background-color: #fff;
    font-size:18px;
    border-radius:4px;
  }
  .btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}

.floating_form_mores{
  right:1%;
  position:absolute;
  position:fixed;
  background-color:white;
  border:1px solid lightgrey;
  border-radius:6px;
  box-shadow:2px 3px 4px 3px lightblue;
  z-index:100;
  visibility:hidden;
  top:6%;
}
.floating_form_mores::before{
  content:'';
  width:0px;
  height:0px;
  border-right:12px solid transparent;
  border-left:12px solid transparent;
  border-top:12px solid transparent;
  border-bottom:12px solid lightgrey;
  position:absolute;
  right:14px;
  top:-22px;
}
.focus:focus{
  color:lightblue;
}
.right{
  float:right;
}

#admin_dash_card{
  border:1px solid lightgrey;
  box-shadow:1px 2px 3px lightgrey;
  height:130px;
  width:120px;
  float:left;
  border-radius:4px;
  background-color: white;
  margin:5px 8px;
  transition:1s;
  font-size:12px;
}

#dash_top_admin{
  height:50%;
  width:100%;
  padding:10px;
  text-align:center;
}
#dash_bottom_admin{
  height:50%;
  width:100%;
  padding:10px;
  text-align:center;
}
#admin-dash-a{
  color:black;
}
.dash-button{
  cursor:pointer;
  color:green;
}
.dash-button:hover{
  box-shadow: 0.5px 1px 1.5px 1px lightgrey;
}
.specific_time{
  border-radius:4px;
  position:absolute;
  box-shadow:1px 2px 3px 2px lightgrey;
  right:10%;
  top:33%;
  width:300px;
  background-color:white;
  display:none;      
}
.close{
  cursor:pointer;
}
.term-message{
  width:400px !important;
  right:2% !important;
  position:absolute !important;
}

.absolute{
  position:absolute;
  background-color:white !important;
  z-index:1000;
}
.searchResults{
  height:400px !important;
  overflow-y:auto;
}

.teacher-dash-card{
  float:left;
  padding:8px;
  margin:4px;
}
.teacher-dash-card a{
    width:250px;
    height:210px;
}

@media screen  and (max-width:600px){
  .teacher-dash-card{
    /* max-width:50px !important; */
    float:left;
    padding:8px;
    margin:4px;
  }
  .teacher-dash-card a{
    width:250px;
    height:210px;
  }
}

.side-modal{
  display: none; /*Hidden by default8*/
  position: fixed; /* Stay in place */
  right:1px !important;
  z-index: 1000; /* Sit on top */
  padding-top: 150px; /* Location of the box */
  margin-top:3% !important;
  /* left: 0; */
  top: 0;
  width: 700px !important; /* Full width */
  height: 100% !important; /* Full height */
  /* transform: translateX(100%); */
  transition: transform 0.5s ease-in-out !important;
  /* transition: width 0.5s !important; */
  background-color: #fff;
  animation: popSideAnimation 0.5s ease-out;
  overflow: auto; /* Enable scroll if needed */
}

.central-modal{
  display: none; /*Hidden by default8*/
  position: fixed; /* Stay in place */
  right:5% !important;
  z-index: 10000; /* Sit on top */
  padding-top: 150px; /* Location of the box */
  margin-top:4% !important;
  /* left: 0; */
  top: 0;
  width: 85% !important; /* Full width */
  height: 90% !important; /* Full height */
  /* transform: translateX(100%); */
  transition: transform 0.5s ease-in-out !important;
  /* transition: width 0.5s !important; */
  background-color: #fff;
  animation: popSideAnimation 1s ease-out;
  /* overflow: auto; Enable scroll if needed */
  overflow: hidden;
  border:2px solid green !important;
}

.side-modal-tall{
  display: none; /*Hidden by default8*/
  position: fixed; /* Stay in place */
  right:1px !important;
  z-index: 100000; /* Sit on top */
  padding-top: 150px; /* Location of the box */
  margin-top:.0% !important;
  /* left: 0; */
  top: 0;
  width: 700px !important; /* Full width */
  height: 100% !important; /* Full height */
  /* transform: translateX(100%); */
  transition: transform 0.5s ease-in-out !important;
  /* transition: width 0.5s !important; */
  background-color: #fff;
  animation: popSideAnimation 0.5s ease-out;
  overflow: auto; /* Enable scroll if needed */
}

.side-modal-full{
  display: none; /*Hidden by default8*/
  position: fixed; /* Stay in place */
  right:1px !important;
  z-index: 1000000; /* Sit on top */
  padding-top: 150px; /* Location of the box */
  margin-top:0% !important;
  /* left: 0; */
  top: 0;
  width: 1300px !important; /* Full width */
  height: 100% !important; /* Full height */
  /* transform: translateX(100%); */
  transition: transform 0.5s ease-in-out !important;
  /* transition: width 0.5s !important; */
  background-color: #fff;
  transform: translateX(0%);
  animation: popSideAnimation 0.5s ease-out;
  overflow: auto; /* Enable scroll if needed */
}

@keyframes popSideAnimation {
  from {
    transform: translate(100%);
  }
  to {
      transform: translate(0);
  }
}

.side-modal-full-page{
  display: none; /*Hidden by default8*/
  position: fixed; /* Stay in place */
  right:1px !important;
  z-index: 100000; /* Sit on top */
  padding-top: 150px; /* Location of the box */
  margin-top:0.5% !important;
  /* left: 0; */
  top: 0;
  width: 98vw !important; /* Full width */
  height: 100% !important; /* Full height */
  /* transform: translateX(100%); */
  transform: translateX(0%);
  transition: transform 0.5s ease-in-out !important;
  /* transition: width 0.5s !important; */
  background-color: #fff;
  animation: popupAnimation 0.5s ease-out;
  overflow: auto; /* Enable scroll if needed */
}

.side-modal-full-page{
  width: 98vw !important; /* Full width */
  height: 100% !important;
}

@keyframes popupAnimation {
  from {
    transform: translate(0%, 100%);
  }
  to {
      transform: translate(0%, 0);
  }
}

.side-modal-full-page .side-modal-content-full-page{
  background-color: #fff;
  margin: auto;
  padding: 15px;
  width: 98%;
  overflow: auto; /* Enable scroll if needed */
}

.central-modal .central-modal-content{
  background-color: #fff !important;
  margin: auto !important;
  padding: 15px !important;
  width: 98% !important;
  overflow: auto !important; /* Enable scroll if needed */
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 900;
}

.side-modal .side-modal-tall .overlay {
  display: block;
}
.side-modal .side-modal-tall .side-modal-full{
  transition-timing-function: ease;
}
.side-modal-content{
  background-color: #fff;
  margin: auto;
  padding: 15px;
  width: 98%;
  overflow: auto; /* Enable scroll if needed */
}
.side-modal-content-edit{
  background-color: #fff;
  margin: auto;
  padding: 15px;
  width: 98%;
  overflow: auto; /* Enable scroll if needed */
}
.central-modal-header{
  margin:0;
  padding:15px !important;
  border-bottom:2px solid lightgrey;
  position: sticky;
  width:100% !important; 
  display: flex;
  justify-content: space-between;
  align-items: center; /* vertically center title and button */
  background-color: var(--bs-success);
  color: white; /* ensures readable text on green background */
}
.side-modal-header{
  margin:0;
  padding:15px !important;
  border-bottom:2px solid lightgrey;
  position: sticky;
  width:100% !important; 
  display: flex;
  justify-content: space-between;
  align-items: center; /* vertically center title and button */
  background-color: var(--bs-success);
  color: white; /* ensures readable text on green background */
}
.side-modal-title{
  font-size:20px !important;
  font-weight:bold;
}
.central-modal-title{
  font-size:20px !important;
  font-weight:bold;
}

.side-modal-full-page-title{
  font-size:20px !important;
  font-weight:bold;
}

/* .side-modal-close{
  color:white;
  background-color: white;;
  float: right;
  height:0px;
  width:0px;
  margin-top:-40px !important;
  border:1px solid white;
} */

.side-modal-close{
  font-size: 30px;
  background: white;
  border: 1px solid white;
  cursor: pointer;
  line-height: 0.7;
  padding: 8px !important;
  margin-top:0.8% !important;
  border-radius:10% !important;
}

.central-modal-close{
    font-size: 30px;
    background: white;
    border: 1px solid white;
    cursor: pointer;
    line-height: 0.7;
    padding: 8px !important;
    margin-top:0.8% !important;
    border-radius:10% !important;
}

.side-modal-header .close {
  margin-top:-30px;
  float: right;
  color: #aaaaaa;
  font-size: 28px;
  font-weight: bold;
}

.side-modal-header .side-modal-close{
  margin-top:-30px;
  float: right;
  color: #aaaaaa;
  font-size: 28px;
  font-weight: bold;
}
.central-modal-header .central-modal-close
{
  margin-top:-30px;
  margin-right:15px;
  float: right;
  color: #aaaaaa;
  font-size: 28px;
  font-weight: bold;
}

.side-modal-header .close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.side-modal-header .side-modal-close:hover,
.side-modal-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.central-modal-header .central-modal-close:hover,
.central-modal-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.side-modal-content .central-modal-content{
  overflow-y:auto !important;
}
.central-modal-content{
  max-height: calc(90vh - 60px); /* subtract header height */
  overflow-y: auto !important;
  padding: 10px;
}
.side-modal-background {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  z-index: 999; /* Ensure it's above other elements */
}

.central-modal-background {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  z-index: 999; /* Ensure it's above other elements */
}

@media screen and (max-width:992px){
  .side-modal{
    width:90% !important;
    margin-top:6% !important;
    z-index: 10000 !important; /* Sit on top */
    right:10% !important;
  }
  .side-modal-tall{
    width:94% !important;
    z-index: 100000; /* Sit on top */
    right:2% !important;
  }
  .side-modal-full{
    width:95% !important;
    right:2% !important;
  }
  .side-modal-full-page{
    width:95% !important;
    right:2% !important;
  }
  .schoolSelect{
    width:100% !important;
   }
   .central-modal{
      width:97% !important;
      margin-top:16% !important;
      right:2% !important;
      z-index: 100000; /* Sit on top */
      height:90% !important;
  }
}

/* Style for the tooltip */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Style for the tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show the tooltip text when hovering over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.masquerade{
  /* background-color: #89c9a3; */
  padding:4px !important;
  overflow:auto;
  border: 15px solid rgb(10, 10, 194);
}

.draggable {
  cursor: move;
}
.draggable:hover {
 box-shadow:2px 2px 3px lightgrey;
}
.schoolSelect{
 width:200px;
}
.schoolSelect :hover{
  box-shadow:1px 2px 3px grey;
}
.nav-hover:hover {
  background-color:lightgrey !important;
  cursor:pointer !important;
}

.image_div{
  position:relative;
}
.transparent{
  display:none;
  bottom:1.5% !important;
  opacity:0.9;
  background-color:white;
  z-index:10000;
  position:absolute;
  height: 30% !important;
  width:98px !important;
}
.image_div:hover .transparent{
  display:block;
}
.hover:hover{
  background-color:lightgrey !important;
  cursor:pointer !important;
}

.van-dash{
  width: 180px;
  height: 180px;
  display: inline-block;
  text-align: center;
  border-radius: 10px;
  border: 1px solid #ccc;
  background-color: #f8f9fa;
}
.van-icon{
  font-size: 40px;
}
@media screen and (max-width:600px)
{
  .van-dash{
      width:120px !important;
      max-height:140px !important;
      margin:2% !important;
  }
  .icon-div{
      display:none;
  }
}


.msg-div-float{
  background-color:rgb(0, 255, 89);
  position:fixed;
  bottom:15% !important;
  top:85% !important;
  right:5% !important;
  box-shadow: 3px 4px 5px lightgrey;
  z-index:10000000 !important;
  width:70px !important;
  height:70px !important;
  border-radius:40% !important;
  padding:25px;
  cursor:pointer;
}
.msg-div-float i{
  color:white;
}

.msg-div-float-msg-options
{
  position:fixed;
  width:150px !important;
  height:210px !important;
  bottom:25% !important;
  right:1% !important;
  z-index:10000000 !important;
  top:60% !important;
  background-color:rgba(211, 211, 211, 0);
  /* box-shadow: 3px 4px 5px lightgrey; */
  border-radius:10% !important;
  padding:6px !important;
}

.msg-div-float-msg-options a{
  background-color:lightblue;
  border-radius:5%;
  width:100%;
  margin-top:4px;
}
.close-me{
  bottom:0% !important;
}

.user-guide-link{
    background-color:red;
    position:fixed;
    top:25% !important;
    right:-1% !important;
    box-shadow: 5px 6px 7px lightgrey;
    z-index:10000000 !important;
    width:80px !important;
    height:100px !important;
    border-radius:30px;
    padding:2px;
    color:white;
    cursor:pointer;
    font-size:small;
}
.video-iframe{
  width:500px;
  height:400px;
}
.guide-image{
  width:95% !important;  
  height:400px !important;
}
@media screen  and (max-width:1300px){
  .msg-div-float{
    top:85% !important;
    right:20% !important;
    bottom:15% !important;
  }
  .msg-div-float-msg-options
  {
    top:53% !important;
  }
  .video-iframe{
    width:100% !important;
  }
  .user-guide-link{
    right:-1% !important;
    top:25% !important;
  }
  .guide-image{
    width:100% !important;  
    height:400px !important;
  }
}

@media screen and (max-height:800px)
{
  .msg-div-float-msg-options{
    bottom:65% !important;
  }
}
/* calender css */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    padding: 20px;
    box-sizing: border-box;
}

.calendar-wrapper {
    /* optional styling */
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 5px;
    padding: 10px;
    width:480px;
}
.event-wrapper{
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 5px;
    padding: 10px;
}

.calendar-table {
    border-collapse: collapse;
    font-family: sans-serif;
    font-size: 18px;
    width: 100%;
    margin: 0;
    background-color: white;
}

.today {
    background-color: #ffeb3b;
    font-weight: bold;
}
.calendar-event {
    background-color: #c8e6c9;
    color: #2e7d32;
}
.calendar-event-item{
    background-color: #c8e6c9;
    color: #2e7d32;
    width:98%;
    margin:2px;
}

.custom-icon{
    font-size: 3.0em;
}

.survey-notice{
  background-color:yellow;
  border:1px solid;
  box-shadow:1px 2px 3px grey;
}

.hover-hide-content .hover-display {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

.hover-hide-content:hover .hover-display {
    opacity: 1;
    visibility: visible;
}
visibility: hidden;
    transition: opacity 0.25s ease;
}

.hover-hide-content:hover .hover-display {
    opacity: 1;
    visibility: visible;
}