/**************Theme************************/

.theme-box{width:50px;height:30px;float:left}

.blue-box{background-color:#0178ef}
.green-box{background-color:#52bb52}
.purple-box{background-color:#75206a}
.pink-box{background-color:#e24ba9}
.mblue-box{background-color:#01c0c8}


/******Theme Blue**************/
#theme-blue .header{background:url(../../assets/img/header-bg.png) #0178ef}
#theme-blue .sidebar-menu li.active a{background-color:#0178ef!important}
#theme-blue .sidebar-menu li.active a:hover{color:#fff}
#theme-blue .sidebar-menu li a.active,.sidebar-menu li a:hover{color:#0178ef}
#theme-blue .page-header h5{color:#0178ef}
#theme-blue .page-header a,.profile-content a{color:#0178ef}
#theme-blue .btn-primary,button{color:#fff!important;background-color:#0178ef!important;border-color:#0178ef!important}
#theme-blue .btn-primary:hover,button:hover{color:#fff!important;background-color:#0178ef77!important}
#theme-blue .progress-banner{ background-color:#0178ef85!important}
#theme-blue .card-box.notifications{ background-color:#0178ef3d !important}
#theme-blue .home-wrapper .page-title { color: #0178ef; }
#theme-blue .row.top-mods { background-color: #0178ef6e;}


/******Theme Green**************/
#theme-green .header{background:url(../../assets/img/header-bg.png) #52bb52}
#theme-green .sidebar-menu li.active a{background-color:#52bb52!important}
#theme-green .sidebar-menu li.active a:hover{color:#fff}
#theme-green .sidebar-menu li a.active,.sidebar-menu li a:hover{color:#52bb52}
#theme-green .page-header h5{color:#52bb52}
#theme-green .page-header a,.profile-content a{color:#52bb52}
#theme-green .btn-primary,button{color:#fff!important;background-color:#52bb52!important;border-color:#52bb52!important}
#theme-green .btn-primary:hover,button:hover{color:#fff!important;background-color:#52bb5277 !important}
#theme-green .progress-banner{ background-color:#52bb5285!important}
#theme-green .card-box.notifications{ background-color:#52bb523d !important}
#theme-green .home-wrapper .page-title { color: #3eb73e; }
#theme-green .row.top-mods { background-color: #52bb526e;}

/******Theme Marine Blue**************/
#theme-mblue .header{background:url(../../assets/img/header-bg.png) #01c0c8}
#theme-mblue .sidebar-menu li.active a{background-color:#01c0c8!important}
#theme-mblue .sidebar-menu li.active a:hover{color:#fff}
#theme-mblue .sidebar-menu li a.active,.sidebar-menu li a:hover{color:#01c0c8}
#theme-mblue .page-header h5{color:#01c0c8}
#theme-mblue .page-header a,.profile-content a{color:#01c0c8}
#theme-mblue .btn-primary,button{color:#fff!important;background-color:#01c0c8!important;border-color:#01c0c8!important}
#theme-mblue .btn-primary:hover,button:hover{color:#fff!important;background-color:#01c0c877 !important}
#theme-mblue .progress-banner{ background-color:#01c0c885!important}
#theme-mblue .card-box.notifications{ background-color:#01c0c83d !important}
#theme-mblue .home-wrapper .page-title { color: #01c0c8; }
#theme-mblue .row.top-mods { background-color: #01c0c86e;}

/******Theme Marine Pink**************/
#theme-pink .header{background:url(../../assets/img/header-bg.png) #e24ba9}
#theme-pink .sidebar-menu li.active a{background-color:#e24ba9!important}
#theme-pink .sidebar-menu li.active a:hover{color:#fff}
#theme-pink .sidebar-menu li a.active,.sidebar-menu li a:hover{color:#e24ba9}
#theme-pink .page-header h5{color:#e24ba9}
#theme-pink .page-header a,.profile-content a{color:#e24ba9}
#theme-pink .btn-primary,button{color:#fff!important;background-color:#e24ba9!important;border-color:#e24ba9!important}
#theme-pink .btn-primary:hover,button:hover{color:#fff!important;background-color:#e24ba977 !important}
#theme-pink .progress-banner{ background-color:#e24ba985!important}
#theme-pink .card-box.notifications{ background-color:#e24ba93d !important}
#theme-pink .home-wrapper .page-title { color: #e24ba9; }
#theme-pink .row.top-mods { background-color: #e24ba96e;}

/******Theme Marine Purple**************/
#theme-purple .header{background:url(../../assets/img/header-bg.png) #75206a}
#theme-purple .sidebar-menu li.active a{background-color:#75206a!important}
#theme-purple .sidebar-menu li.active a:hover{color:#fff}
#theme-purple .sidebar-menu li a.active,.sidebar-menu li a:hover{color:#75206a}
#theme-purple .page-header h5{color:#75206a}
#theme-purple .page-header a,.profile-content a{color:#75206a}
#theme-purple .btn-primary,button{color:#fff!important;background-color:#75206a!important;border-color:#75206a!important}
#theme-purple .btn-primary:hover,button:hover{color:#fff!important;background-color:#75206a77 !important}
#theme-purple .progress-banner{ background-color:#75206a85!important}
#theme-purple .card-box.notifications{ background-color:#75206a3d !important}
#theme-purple .home-wrapper .page-title { color: #75206a; }
#theme-purple .row.top-mods { background-color: #75206a6e;}


/**************Theme************************/


.radio-container input[type=checkbox] {
    margin-right: 30px;
    margin-left: 5px;
}


a.bg-green{background-color:#cddbe8!important;padding:0;max-height:20px}
td.fc-event-container{max-width:100%;max-height:23px}
.fc-content{line-height:20px}

.account-wrapper { background: rgb(204, 204, 204); background: rgba(204, 204, 204, 0.5);}
label.error{color:#f00;font-size:12px;line-height: 0;position: absolute;top: 65px;}
.account-box input.form-control{padding-left:10px; height: 40px;}
.account-page{ height: 97vh !important;}

#login-form label#email-error {
    top: 100px;
}
form#change-password .toggle-password{top:10px;right:25px}

 .table-responsive a.btn.btn-primary.float-right.btn-rounded{margin-right: 10px; margin-top: 10px; margin-bottom: 10px;position: absolute;
    right: 20px;z-index: 9;}

.row.filter-row{padding:10px;border:solid 1px #ddd;margin:10px;border-radius:10px;background-color:#fafafa;margin-bottom:25px}
.filter-row .btn{width:150px;margin:0 auto;min-height:unset;height:40px;padding:8px}
 
.row.filter-row input,.row.filter-row select{border:solid 1px #ddd;padding-left:5px;font-size:13px}
label.control-label{font-family:Roboto,sans-serif;font-size:13px!important}
.row.filter-row select{height:30px}

.table.dataTable tr td:last-child { width: 100px !important; }

.filter-row .btn{width:150px;margin:0 auto;min-height:unset;height: 35px;padding: 7px;font-size: 14px;margin-top: 30px !important;}

.no-events {
    margin-top: 55px;
}

.content-page.upcoming_events {
    min-height: 425px;
}

.login-top-logo{position:fixed;left:10%;top:0;background-color:#fff;z-index:99;width:120px;height:140px;border-bottom-left-radius:45%;border-bottom-right-radius:45%;text-align:center;padding-top:15px}
.login-top-logo img{width:70px;margin:0 auto}
.account-page h3.account-title{color:#8b8e91!important;font-size:24px;line-height:20px;margin-top:20px;margin-bottom:-3px}
footer .mb-0.text-muted{width:100%;margin:0 auto;text-align:center}
footer .mb-0.text-muted b{color:#15c8ca}
label.login-error{color:#f00; font-size: 12px; line-height:0;margin-bottom:10px!important;padding-top:30px}
.main-wrapper.cartoon-bg{background:url(../img/dashboard-bg.jpg); height: auto !important;} 
a.logo{width:85px;height:90%;background-color:#fff;border-bottom-left-radius:45%;border-bottom-right-radius:45%;margin-left:25%}
a.logo img{width: 60px;height: 60px;margin-top:10px;max-height: 85px;margin-left: 12px;}
.header .header-left a span{width:500px;text-align:left}

.personal-links a{display:block;margin-bottom:20px !important;width:200px;background-color:#0fa4fb;color:#fff}
.page-wrapper label.error{ top:50px;}

span.notes{font-size:12px;color:#aaa}
span.notes label{color:#ed8c8c}
input[type=radio]{width:35px;height:20px;position:relative;top:5px;margin-right:30px}
.reg-forms label.error{ position:unset; top:65px !important;}
.action_icons{margin-left:5px!important}


.custom-switch.custom-switch-secondary .custom-switch-input:checked+.custom-switch-btn{background:#2a93d5;border:1px solid #2a93d5}
.custom-switch .custom-switch-input:checked+.custom-switch-btn:after{left:30px;bottom: 18px;}
.custom-switch .custom-switch-input+.custom-switch-btn:after{background:#fff}
.custom-switch .custom-switch-input+.custom-switch-btn:after{left:2px;bottom: 18px;border-radius:50%;background:#fff;transition:all .3s ease}
.custom-switch .custom-switch-input+.custom-switch-btn:after,
.custom-switch .custom-switch-input+.custom-switch-btn:before{position:relative;display:block;content:"";width:18px;height:18px}

.custom-switch .custom-switch-input+.custom-switch-btn{outline:0;display:inline-block;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;width:58px;height:28px;margin:0;padding:4px;background:#ced4da;border-radius:76px;transition:all .3s ease;border:1px solid #ced4da}
.custom-switch .custom-switch-input { display: none;}

.card-box.notifications{padding:20px!important;background-color:rgb(149,198,245,.5);border-radius: 15px; }
.notifications ul.activity-list li{margin-bottom:10px;border: solid 1px #ddd !important;background-color: #eee;border-radius: 7px;}

.row.top-mods{background-color:rgb(149,198,245,.5);padding:15px!important;margin:0;margin-bottom:30px;border-radius:15px}
.top-mods .dash-widget.dash-widget5{margin-bottom:0!important}
.top-mods .col-md-6.col-sm-6.col-lg-6.col-xl-4{padding:10px!important}

.home-wrapper .page-title{text-transform:uppercase;color:#0d94e3;font-weight:700;margin-bottom:15px;text-shadow:#cfd1d2 1px 1px 1px}
.home-wrapper ul.activity-list li{margin-bottom:15px;border:unset;border-bottom:solid 1px #ddd; }
.home-wrapper .card-box.notifications ul.activity-list li .activity-content{background-color:#eee}
.home-wrapper .content-page{border-radius:15px}

.clock-time{position:absolute;right:-70px;width:200px;color:#fff;font-size:10px;top:80px}.clock-time p{display:inline}

.user-menu.nav > li > a:hover, .user-menu.nav > li > a:focus{ background-color: unset;}
.form-group.row{margin-bottom:16px}
input.form-control{font-size:14px;line-height:1.3rem}

.text-right.add-btn{display:contents}
.table.dataTable{margin-top:25px!important}

.cartoon-bg footer.page-footer{padding:10px 0;background-color: rgb(191, 217, 243, .5);color: #000 !important;}


.account-page{height:calc(100vh - 63px)!important;min-height:unset}
footer.page-footer{padding:10px 0}
.btn-primary:not(:disabled):not(.disabled):active{border:0}


.division-box{cursor:pointer;display:inline-block;margin:20px 10px 40px 0;width:100px;border:solid 1px #000;text-align:center;padding:10px;color:#fff;background-color:#999}
.division-box:hover{background-color:#000; color:#fff;}


.timepicker select, .timepicker input{width:18%;float:left;margin-right:10px}
.timepicker b{width:1%;float:left;margin-right:10px;margin-top:7px}

#timetable table td{border:solid 1px #ddd;padding:10px 20px;height:80px;width:150px;background-color: #fcfcfc;position: relative;}
#timetable table thead tr td{height:30px!important;font-weight: bold;text-transform: uppercase;}
.add-timetable{margin:0 auto;width:100%;height:100%;position:relative;color:#ddd;display:block;text-align:center;padding-top:22%}

.modal-body .form-group.row{margin-bottom:0!important;margin-top:0!important;padding:5px 30px}
.modal-body label.col-form-label{font-weight:700}
td.gray-bg{background-color:#efefef !important;} 
#timetable table thead tr td.head{background-color:#ccc}



a.add-timetable.edit-timetable{height:20px!important;padding-top:18px!important;float:right;width:5%;position: absolute;top: -18px;right: 13px;}
a.add-timetable.edit-timetable i.fa{color:#17cc3e}
td.period{background-color:#ccc !important ;font-weight:700;text-transform:uppercase}
td.head:first-child{background-color:#8a8585!important;color:#fff}
table{margin-top:10px}

.modal-body table.table tr{border:0!important}
.modal-body .table td,.modal-body .table th{border-top:unset}
.modal-header{background-color:#29aff2;border:solid 1px #29aff2;color:#fff;font-size:19px}
.modal-header h5{font-size:20px}.modal-content{border-top-left-radius:7px;border-top-right-radius:7px}
.modal-footer button.btn.btn-secondary{background-color:#e00b0b !important;border-color:#e00b0b}
.modal-header button.close{background-color:unset!important;z-index:999;opacity:1}

.add-btn a.btn{margin-top:10px;margin-bottom:5px; margin-right:5px}
div#schools-chart{width:235px;height:235px;display:contents}
#schools-chart svg{margin-left:23%; margin-top:10%;height: 280px;}
 
.grid-blog .blog-image { margin-top: -30px;}

.upcoming_events ul.events-list li{display:inline-block;width:100%;padding:10px;border:solid 1px #ddd;margin-bottom:10px;background-color:#f7f7f7}
ul.events-list{margin-left:0!important;width:100%!important;padding-left:0; margin-top: 40px;}
.upcoming_events .activity{width:100%!important}
.events-list .activity-content{margin-left:45px;margin-top:5px}
.events-list .activity-content span.time{float:right;font-size:11px;color:#aaa}

a.view-more{display:block;float:right;line-height:30px;margin-right:3px;z-index:999}
.upcoming_events .page-title{width:auto;float:left}
a.view-more:hover{text-decoration:underline}


.progress-banner{height: 140px;background-color: rgb(179, 63, 188, .7);transition:.5s;padding: 0px 10px !important;cursor:pointer;border-radius: 10px;}
progress-bar-circle svg{width:100px;height:100px!important}
.progress-bar-circle.progress-bar-banner.position-relative{width:100px!important}
.progress-banner .card-body{padding:0 10px!important}

.notifications a.view-more { color: #555 !important;}


#timetable h5 {
    float: right;
    margin-top: 20px;
    text-transform: uppercase;
    font-size: 12px;
}

.text-right.add-btn {
    display: block;
}

.manage-table table {
    width: 100% !important;
}


@media(max-width:767px){
    
    .account-box{right:2.5%;max-width:95%}
    .account-page{height:calc(100vh - 96px)!important}
	a.logo{margin-left:10%}
    .header .header-left a span{font-size:14px;top:0px;left:43%;}
    #schools-chart svg{margin-left:0px !important;}
    div#schools-chart{display:flex;margin-left:auto;margin-right:auto;}
    

}



/* Password visibility toggle*/


input[type=text].form-control.valid + label:after,
input[type=text].form-control:focus.valid + label:after,
input[type=text].form-control.invalid + label:after,
input[type=text].form-control:focus.invalid + label:after,
input[type=password].form-control.valid + label:after,
input[type=password].form-control:focus.valid + label:after,
input[type=password].form-control.invalid + label:after,
input[type=password].form-control:focus.invalid + label:after {
  top: 3.75rem !important;
}

span.field-icon {
  position: absolute;
  display: inline-block;
  cursor: pointer;
  right: 0.5rem;
  top: 1.7rem;
  color: $input-label-color;
  z-index: 2;
}



/* /* Password visibility toggle end*/



/*Modal custom CSS*/
.dm41{
	margin-top:0.41rem !important;
}
.btn-bluee{
	background-color:#29aff2;
  }
/*Modal custom CSS*/

/*3d button styles for classes*/


/* .btn3d {
    transition:all .08s linear;
    position:relative;
    outline:medium none;
    -moz-outline-style:none;
    border:0px;
    margin-right:10px;
    margin-top:15px;
}
.btn3d:focus {
    outline:medium none;
    -moz-outline-style:none;
}
.btn3d:active {
    top:9px;
}
.btn-primary {
    box-shadow:0 0 0 1px #428bca inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #357ebd, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color:#428bca;
} */



.btn3d {
	position: relative;
	top: -6px;
	border: 0;
	transition: all 40ms linear;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 2px;
	margin-right: 2px;
	color: white;
}

.btn3d:active:focus,
.btn3d:focus:hover,
.btn3d:focus {
	-moz-outline-style: none;
	outline: medium none;
}

.btn3d:active,
.btn3d.active {
	top: 2px;
}
.btn3d:hover,
.btn3d.hover {
	top: 2px;
}
.btn3d.btn-primaryy {
	box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #4D5BBE, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
	background-color: #4274D7;
}

.btn3d.btn-primaryy:active,
.btn3d.btn-primaryy.active {
	box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
	background-color: #4274D7;
}
.btn-primaryy {
    box-shadow:0 0 0 1px #428bca inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #357ebd, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color:#428bca;
}
.btn3d.btn-primaryy:hover,
.btn3d.btn-primaryy.hover{
	background-color: #417fbd;
	color:white;
}

/*3d button styles for classes end*/

label.radio-container {
    margin-bottom: 30px;
}

table.tickets-list td:nth-child(1) {
    width: 60% !important;
    padding-left: 25px !important;
}

.history {
    padding: 10px 30px;
}


.history .message-box{width:100%;background-color:#f7f7f7;padding:20px 10px 10px 0;border-radius:10px;border:solid 1px #ddd;margin: 15px;}
.history .reply-box{background-color: #dae6f173;border-radius:10px;border:solid 1px #ddd;width:100%;margin:0!important;padding: 10px 20px;margin-bottom: 15px;display: block;}
.history .reply-box textarea{height:100px}
.history .reply-box button{float:right}
.history .card.status-block{margin-top:20px}

a.ticket_btn.add_ticket  {
    z-index: 999;
    position: absolute;
    right: 6%;
}

a.remove-timetable{height:20px!important;padding-top:18px!important;float:right;width:5%;position:absolute;top:-18px;right:33px}
a.remove-timetable i{color:red}
a.remove-timetable i:hover{color:#c00}
a.edit-timetable i:hover{color:#0d9029!important}

.notes{display:block;width:100%;margin-top:10px;font-size:11px;color:#999}

a.rem_selected i{color:red;font-size:20px;margin-left: 15px; }
input.rem_check{margin-left:20px}
input.check_all{margin-left:20px}

.datatable td:nth-child(1) {
    width: 75px !important;
}
#timetable-form select#teacher_id {
    font-size: 14px;
}
.table.dataTable {
    width: 100% !important;
}

.reg-forms span.toggle-password  {
    top: 10px !important;
    right: 25px;
}
.activity-list > li .activity-user {
    background: unset;
}

.card-box.notifications { min-height: 430px !important;}


table.teacher-list tr td:nth-child(7) {
    width: 9% !important;
}

table.teacher-list tr td:nth-child(1) {
    width: 11% !important;
}

table.teacher-list tr td:nth-child(3) {
    width: 15% !important;
}

table.teacher-list tr td:nth-child(4) {
    width: 16% !important;
}

table.teacher-list tr td:nth-child(5) {
    width: 12% !important;
}

.sup_text {
    display: block;
    background-color: #f00;
    width: 25px;
    height: 25px;
    color: #fff;
    font-size: 9px;
    text-align: center;
    padding: 5px 3px;
    border-radius: 50%;
    float: left;
    margin-left: 10px;
}

.teacher_label {
    position: relative;
    display: flex;
}