.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background: #aaa;}
.fixed{position: fixed; width: 83%;}
.profile{margin-top: 45px;}
.mr-top50{margin-top: 50px;}
.nav-md .nav_menu .nav.toggle .fa-angle-left{display: none;}
.nav-sm .nav_menu .nav.toggle .fa-bars{display: none;}
.nav-sm .nav_menu .nav.toggle .fa-angle-left{ transform: rotate(180deg);}
.nav-md, .nav-sm{transition: all ease-in 1s;}
.nav-sm .main_menu_side{margin-top: 45px;}
.tile-stats.yellow .icon, .tile-stats.yellow .count, .tile-stats.yellow h3{color: #fec801 ;}
.tile-stats.rose .icon, .tile-stats.rose .count, .tile-stats.rose h3{color: #f2426d  ;}
.tile-stats.green .icon, .tile-stats.green .count, .tile-stats.green h3{color: #58baab;}
.tile-stats.blue .icon, .tile-stats.blue .count, .tile-stats.blue h3{color: #019ff8 ;}
.tile-stats.red .icon, .tile-stats.red .count, .tile-stats.red h3{color:red ;}
.tile-stats.cyan .icon, .tile-stats.cyan .count, .tile-stats.cyan h3{color:#006868 ;}
.tile-stats.purple .icon, .tile-stats.purple .count, .tile-stats.purple h3{color:#800080 ;}
.tile-stats.lime .icon, .tile-stats.lime .count, .tile-stats.lime h3{color:#018301 ;}
.tile-stats.maganta .icon, .tile-stats.maganta .count, .tile-stats.maganta h3{color:#FF00FF ;}
.tile-stats.brown .icon, .tile-stats.brown .count, .tile-stats.brown h3{color:#A52A2A ;}
.tile-stats.olive .icon, .tile-stats.olive .count, .tile-stats.olive h3{color:#808000 ;}
.tile-stats.lightblue .icon, .tile-stats.lightblue .count, .tile-stats.lightblue h3{color:#ADD8E6 ;}
.tile-stats.nightblue .icon, .tile-stats.nightblue .count, .tile-stats.nightblue h3{color:#151B54 ;}
.tile-stats.forest .icon, .tile-stats.forest .count, .tile-stats.forest h3{color:#254117 ;}
.tile-stats.gold .icon, .tile-stats.gold .count, .tile-stats.gold h3{color:#DAA520 ;}
.tile-stats.chocolate .icon, .tile-stats.chocolate .count, .tile-stats.chocolate h3{color:#513B1C ;}
.tile-stats.neon .icon, .tile-stats.neon .count, .tile-stats.neon h3{color:#9D00FF ;}
.tile-stats.night .icon, .tile-stats.night .count, .tile-stats.night h3{color:#2B1B17 ;}
.width-100{ width: 100%;}
.ds-inline{display: inline-block;}
.ds-block{display: block;}
form label .required{color: red;}
.nm-checking{position: absolute; right: 5px; bottom:5px;}
.hr-tab{background: #fff; position: relative;}
.hr-tab ul.bar_tabs{padding: 0px; margin: 0px; margin-top: 15px; height: auto;}
.hr-tab ul.bar_tabs li{margin: 0px;}
.nav-tabs .nav-link.active{color: #000;}
.hr-tab-content{margin-bottom: 0px;}
/* .hr-tab-content .x_title h2{color: #019ff8;} */
.table-responsive thead{background: #213345; color: #fff;}
.info-number{position: relative;}
.min-height468{min-height: 468px;}
.dataTables_length select { width: 75px; display: inline-block;}
.dataTables_filter{text-align: right;}
.dataTables_filter input {margin-left: 0.5em; display: inline-block; width: auto;}
.dark-mode{position: absolute; top: 20px; left: 50px;}
.login_form img, .registration_form img{max-width: 150px; display: block; margin: 0 auto;}
.login_form .btn.submit, .registration_form .btn.submit{display: block; margin: 0px; padding: 0px;}
.user-profile i{width: 29px; height: 29px; background: #f4f4f4; border-radius: 50%; line-height: 29px; text-align: center; margin-right: 10px;}
.admission-tabs{border: none; margin-bottom: 15px;}
.admission-tabs li{border: none; background: none;}
.admission-tabs .nav-link{border: 1px solid #ddd; background: #fafafa; border-radius: 0px;}
.admission-tabs .nav-link.active{background: #2A3F54; color: #fff; border: 1px solid #2A3F54;}
.compose-radio{padding:10px 20px; background: #f5f5f5;}
.compose-radio label{margin-bottom: 0px;}
.compose-radio label input{margin-right: 8px;}
.compose-content{padding:10px 20px;}
.compose-content input, .compose-content textarea, .compose-content select{width: 100%; padding: 5px 15px; font-size: 12px; border: 1px solid #ddd; border-radius: 6px; resize: none;}
.compose-content label sup{color: red;}
.compose-content textarea:focus{outline: none;}
.attendance>input[type=checkbox] {cursor: pointer; height: 30px; margin:4px 0 0; position: absolute; opacity: 0; width: 30px; z-index: 2;}
.attendance>input[type=checkbox] + span { background: #e74c3c; border-radius: 50%; box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
display: inline-block; height: 20px; margin:4px 0 0; position:relative; width: 20px; transition: all .2s ease;}
.attendance>input[type=checkbox] + span::before, .attendance>input[type=checkbox] + span::after{ background:#fff; content:'';
display:block; position:absolute; width:2px; transition: all .2s ease;}
.attendance>input[type=checkbox] + span::before{ height:12px; left:9px; top:4px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.attendance>input[type=checkbox] + span::after{ height:12px; right:9px; top:4px; -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.attendance>input[type=checkbox]:checked + span {  background:#2ecc71;			    }
.attendance>input[type=checkbox]:checked + span::before{ height: 7px; left: 6px; top: 8px; -webkit-transform:rotate(-47deg); transform:rotate(-47deg);}
.attendance>input[type=checkbox]:checked + span::after{ height: 11px; right: 6px; top: 4px;}
.absentees{margin: 10px 0px;}
.absentees .form-group{background: #e74c3c; border-radius: 30px; display: inline-block; padding-left: 15px;}
.absentees .form-group input{width: 30px; height: 30px; border: 1px solid #e74c3c; text-align: center; border-radius: 50%;}
.absentees .form-group label{margin-bottom: 0px; color: #fff; font-weight: 700;}
.compose-content .table thead th, .compose-content .table td{padding: 5px; font-size: 12px; font-weight: normal;}
.compose-content .table{border: 1px solid #ddd; text-align: left;}
.compose-content.hr-tab-content button{padding: 5px; font-size: 13px;}
.filter-box{background: #f5f5f5; padding:10px 20px;}
.inbox-body-icons{border-bottom: 1px solid #DBDBDB; margin-bottom: 6px; padding-bottom: 15px;}
.searchBox{position: relative;}
.searchBox input{width: 100%; padding: 6px 12px; border: 1px solid #ddd; border-radius: 30px; background: #f5f5f5;}
.searchBox i{position: absolute; right: 20px; top: 8px; cursor: pointer;}
.inbox-body-icons button{background: #f5f5f5; border: 1px solid #ddd; border-radius: 5px; padding: 6px 12px; color: #999;}
.inbox-body-icons button:focus{outline: none;}
.inboxIcons{text-align: right;}
.inboxIcons i{width: 33px; height: 33px; text-align: center; line-height: 33px; background: #f5f5f5; border-radius: 50%;
border: 1px solid #ddd; cursor: pointer; margin-left: 10px;}
.inboxIcons i:hover{background: none;}
/* ***  start abdulla added  ********** */

#list-atendance {  padding-left: 0;}
#list-atendance ul{  padding-left: 0;  list-style: none}
#list-atendance li {  float: left;   width: 19.9%;  height: 200px;  padding: 10px;  font-size: 14px;  line-height: 1.4;
  text-align: center;  background-color: #eee;  border:1px solid #fff;  color:#3b4d7c; margin:0px 0px 1px 1px; }
 
#list-atendance li.present { border: 2px solid #2ecc71;}
#list-atendance li.absent {  border:2px solid #e74c3c;}
#list-atendance .glyphicon {
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 24px
}
#list-atendance .list-atendance-class {
  display: block;
  text-align: center;
  word-wrap: break-word; margin-top:10px;
}
#list-atendance li:hover {
  color: #fff;
  background-color: #aaa;
}

.switchcontainer {  position: relative;  width: 75px; color:#000;  height: 30px;  border: thin solid #2ecc71;  cursor: pointer;  }
.switch {  position: absolute;  width: 50%;  height: 100%;  background-color: #2ecc71; color:#000;  transition: all 0.15s ease;  left: 0;  z-index: 1;}
.switchcontainer.off {  border: thin solid #e74c3c; }
.switchcontainer.off .switch { left: 50%; background-color: #e74c3c;}
.switchcontainer.label {  position: absolute;  width: 50%;  height: 100%;  text-align: center;padding-top: 15px;}
.right {  left: 50%; background:#fff; height:100%;display:block; color:#000; text-align:center;padding:7px 0 0 36px; font-size:14px; }
.left {  left: 50%;padding-top:7px; font-size:14px; color:#000; }

 /* ***  end abdulla added  ********** */

.dashboard-home{position: absolute; top: 15px; left: 50px;}
.dashboard-home i{width: 29px; height: 29px; background: #f4f4f4; border-radius: 50%; line-height: 29px; text-align: center; font-size: 16px;}
.site_title img{height: 64px; transition: all 1s ease-in-out;}
.site_title span{display: none;}
.nav-sm .navbar.nav_title  img{display: none;}
.nav-sm .navbar.nav_title span, .nav-sm .navbar.nav_title span img {display: block; margin: 0 auto;}
.branch-home{position: absolute; top: 20px; left: 90px; font-weight: 700;}
.custom-select{border-radius: 0px !important;}
.custom-select:focus{background: none !important; box-shadow: none !important;}
.regNo{position: absolute; left: 11px; bottom: 11px; padding: 8px; background: #ededed; border-right: 1px solid #ced4da;}
.pad-left45{padding-left: 45px;}
.item-detail-description{background: #e0e0e0; padding: 8px; margin-bottom: 20px;}
.item-detail-description p{margin-bottom: 0px; line-height: 20px;}
.item-detail-description p i{color: #e94040; margin-right: 4px;}
.item-search{position: absolute; left: 5px; bottom: 5px; border-top-right-radius: 0px; border-bottom-right-radius: 0px;}
.item-search i{padding-right: 5px;}
.search-box{padding: 6px 12px; border: 1px solid #ced4da; margin-bottom: 10px;}
#loader .load-icon {position: absolute; left: 50%; top: 50%; z-index: 1; width: 120px; height: 120px; margin: -76px 0 0 -76px; border: 16px solid #f3f3f3;
border-radius: 50%;border-top: 16px solid #019ff8;-webkit-animation: spin 2s linear infinite;animation: spin 2s linear infinite;}
#loader{width: 100%; height: 100%; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); z-index: 10000; overflow: hidden; display: none;}
table.dataTable thead th, table.dataTable thead td, table.dataTable tbody th, table.dataTable tbody td{padding: 8px !important;}
.minwidth{padding: 8px 2px !important;}
.annoncement-message{padding: 10px 0px; background: #0e2a46; margin: 20px 0px; color: #fff;}
.blink { animation: blinker 1.5s linear infinite;}
.annoncement-message marquee li{list-style: none; position: relative; padding-left: 20px; font-size: 16px; margin-right: 20px; display: inline-block;}
.annoncement-message marquee li::before{ content: "\f005"; font: normal normal normal 14px/1 FontAwesome; position: absolute; left: 0px; top: 4px; color: yellow;}
.mail_list .deleteBox {width: 2%;float: left;margin-right: 1%; padding-top: 9px;}
textarea{resize: none;}
input[type="file"].form-control{height: calc(1.8em + 0.75rem + 2px);}
.pt-method{padding: 15px 0px;}
.fade:not(.show){opacity: 1;}
input[type="file"] {
  display: block;
}
.imageThumb {
  max-height: 75px;
  border: 2px solid;
  padding: 1px;
  cursor: pointer;
}
.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
}
.remove {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.remove:hover {
  background: white;
  color: black;
}

@media (max-width: 480px) {
    .dataTables_info{width: 100%; margin-bottom: 15px;}
    .nav-sm .nav_menu .nav.toggle .fa-angle-left{ transform: rotate(0deg);}
    .x_content .form-group.pt-5{padding-top: 0px !important;}
    .width-100{ width: 105%;}
    .dataTables_filter{text-align: left;}
    .inbox-body-icons{margin-top: 20px;}
    .inbox-body-icons button{padding: 6px 4px; margin: 0px;}
    .inboxIcons{padding-left: 0px;}
    .inboxIcons i{margin-left: 2px;}
    .user-profile{ padding: 5px 0px; display: block; font-size: 12px;}
    .top_nav .navbar-right .btn{padding: 5px 0px !important; font-size: 12px;}
    .branch-home{top: 75%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center;}
    .top_nav .navbar-right{padding: 0px;}
    .top_nav li a i{display: none;}
    .top_nav .navbar-right li{padding-left: 3px !important;}
    .dashboard-home{left: 45px;}
    .mail_list .right{width: 86%;}
    .mail_list .deleteBox{margin-right: 2%; width: 4%; padding-top: 7px;}
    .mail_list .left{width: 4%;}

}


@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes blinker {
  50% {
      opacity: 0;
  }
}