/*
=============================================================
=============================================================
Style Sheet For School Management Software

=============================================================
=============================================================
*/

/* Common Css */
body {
    background-color: var(--body-color);
    color: #686a83;
    font-family: 'Proxima Nova Rg';
    overflow: auto;
    min-height: 98vh;
}
.clear {clear: both;}
.sub-title { color: #49afcd !important; }
span.sub-title-sub { color: #34385b; font-size: 14px; }
.fs-11 {font-size: 11px;}
.fs-12 {font-size: 12px;}
.fs-13 {font-size: 13px;}
.fs-14 {font-size: 14px;}
.fs-15 {font-size: 15px;}
.pt-20 {padding-top: 20px;}
.pb-10 {padding-bottom: 10px;}
.pt-40 {padding-top: 40px;}
.pad-20 {padding: 20px;}
.pl-0 {padding-left: 0px;}
.pr-0 {padding-right: 0px;}
.pad-l-0 {padding-left: 0;}
.margin-0-auto {margin: 0 auto;}
.ml-20 {margin-left: 20px;}
.mb-10 {margin-bottom: 10px;}
.mb-20 {margin-bottom: 20px !important;}
.d-blue-bg {background-color: #fff;}
.blue {background-color: #3841ca;}
.dg-bg {background-color: #efefef;}
.orange {background-color: #ff9000;}
.light-gray-bg {background-color: #f1f1f1;}
.white-bg {background-color: #fff;}
.light-blue {background-color: #964fb6;}
.sky-blue {background-color: #448aff;}
.color-red {background-color: #ff4444;}
.color-yellow {background-color: #e0bd2b;}
.green {background-color: #2fb954;}
.red {background-color: #ff4444;}
.yellow {background-color: #e0bd2b;color: #fff;}
.highlight {background-color: #e6f3cd; font-weight: bold;}
.highlight-row {background-color: #fff3d5; font-weight: bold;}
.l-green-bg {background-color: #91f09e;color: #fff;}
.l-red-bg {background-color: #ff9696;color: #fff;}
.l-blue-bg {background-color: #448aff;color: #fff;}
.l-yellow-bg {background-color: #fcde81;color: #fff;}
.l-gray-bg {background-color: #ccc;color: #fff;}
.color-green {color: #2fb954;}
.color-light-blue {color: #448aff;}
.white-fa {color: #fff !important;}
.status-label.red {color: #fe6565;}
.status-label.gray {color: #666;}
.status-label.blue {color: #448aff;}
.status-label.green {color: #11c15b;}
.status-label.yellow {color: #e0bd2b;}
.invoice-text {color: #f99b06;}
.invoice-text i {color: #f99b06!important;}
.pr {position: relative;}
.day {padding: 4px; border-radius: 1px; }
.sunday, .absent, .present, .leave, .holiday {color: #fff;}
.sunday {background-color: #ccc;}
.absent {background-color: #ff9696;}
.present {background-color: #91f09e;}
.leave {background-color: #fcde81;}
.holiday {background-color: #448aff;}
img {max-width: 100%;}
.text-ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;}
li {list-style: none;display: inline-block;}
.top-bar ul {margin: 10px 0px;padding: 0px;}
.dropdown-toggle {padding: 0 24px;}
.dropdown:nth-child(1) {padding-left: 0px;}
.page-not-found-text {color: #34395b;}
.oops {color: #444869;font-size: 24px;}
.bootbox-body {color: #444869;margin-top: 10px;}
.page-link {padding: 3px 10px !important;}
.white-col {margin: 20px 0px 20px 0px;background-color: #fff;padding: 10px 25px;}
.br-10 {border-radius: .25rem;}
.sb {font-family: 'Proxima Nova Lt' !important;color: #34395b;}
.br-light-gray {border-right: 1px solid #ddd;}
.bl-light-gray {border-left: 1px solid #ddd;}
.rg {font-family: 'Proxima Nova Rg' !important;color: #34395b;}
a:hover {text-decoration: none;}
.inner-pages select:focus {outline: 0;}
h5 {color: #34395b;font-size: 20px;}
h1 {
    font-family: 'Proxima Nova Th';
    color: #34395b;
    font-size: 90px;
    margin-bottom: 0;
}

h2, h3, h4, h5, h6, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-family: 'Proxima Nova Lt';
    color: var(--main-color);
    margin-bottom: 0px;
}

.dot {
    height: 7px;
    width: 7px;
    border-radius: 50%;
    display: inline-block;
    margin-top: 9px;
    vertical-align: top;
    margin-right: 6px;
}
input[readonly]{background-color:#f3f3f3;}
/* Table Css */
thead {background-color: #f1f1f1;}
td {font-family: 'Proxima Nova Rg';}
.td-img {padding: 4px !important;}
.td-img img {width: 50px;height: 50px;border-radius: 50%;}
.table-header {margin-top: 10px;margin-bottom: 10px;}
.table-head-content {float: left;}
.table {font-size: 13px;border: 1px solid #ddd; table-layout: fixed;}
a.button-small {padding: 4px;}
.table-pagination {width: 100%;font-size: 14px;}
.table-grand-total {background-color: #eaf2ff;}
table tr td input {padding: 2px 10px 0; border-top: 1px solid transparent !important;border-left: 1px solid transparent !important; }
table tr td input:focus {border-bottom: 1px solid var(--main-color) !important; }
.table-second-header {border-top: 1px solid #ddd;padding: 10px 0px 0px 0px;}
.table-search input:focus {outline: 0;box-shadow: none;}
td .disabled {color: #b1b1b1;}
.table-search input {
    border-radius: 14px;
    border: 1px solid #ddd;
    padding: 5px 10px;
}
.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    font-family: 'Proxima Nova Lt';
    color: #444869;
}
.table td, .table th { padding: 10px 10px; }
.table-pagination a {
    border: 1px solid var(--main-color);
    text-decoration: none;
    padding: 5px 8px;
    color: var(--main-color);
}

.table-pagination .active a {
    background-color: #448aff;
    color: #fff;
    border: 1px solid #448aff;
}

.table-pagination a:hover {
    background-color: var(--main-color);
    color: #fff;
    border: 1px solid var(--main-color);
}

.page-item.active .page-link {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.table-custom { width: 100%; table-layout: auto; }
.table-custom tr { text-align: center; }
.table-custom thead { text-align:center; }

.table-custom thead td {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    font-family: 'Proxima Nova Lt';
    color: #444869;
    padding: 5px;
}

/* Buttons Css */
.button-small:focus {outline: 0;box-shadow: none;}
.button-small.sky-blue:hover {background-color: #2a6cda;color: #fff;}
.button-small.green:hover {background-color: #27ad4b;color: #fff;}
.button-small.red:hover {background-color: #f73737;color: #fff;}
a.button {padding: 4px 6px;}
button.button {padding: 2px 6px;}
.button:nth-last-child(1) {margin-right: 0px;}
.button:hover {color: #fff !important;}
.button:hover .fa {color: #fff;}
a.btn-blue, .btn-blue .fa {color: #448aff;}
.btn-blue:hover {background-color: #448aff;}
a.btn-dark-green, .btn-dark-green .fa {color: #008697;}
.btn-dark-green:hover {background-color: #008697;}
a.btn-light-green, .btn-light-green .fa {color: #11c15b;}
.btn-light-green:hover {background-color: #11c15b;}
a.btn-red, .btn-red .fa {color: #fe6565;}
.btn-red:hover {background-color: #fe6565;}
a.btn-yellow, .btn-yellow .fa {color: #ffa200;}
.btn-yellow:hover {background-color: #ffa200;}
a.btn-black, .btn-black .fa {color: #34395b;}
.btn-black:hover {background-color: #34395b;}
.action-btn button {background-color: transparent;border: none;padding: 0;}
.action-btn .fa {color: #444869;font-size: 16px;padding: 0px 5px 0px 0px;}
.btn-primary {
    background-color: var(--main-color);
    border-color: var(--main-color);
    box-shadow: none !important;
    outline: 0 !important;
    border-radius: 35px;
    min-width: 78px;
    padding: 2px 5px;
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--main-color);
    border-color: var(--main-color);
    opacity: 0.8;
}

.font-highlight, .font-highlight a{color: var(--main-color);font-weight: bold;}

.btn-default {
    background-color: transparent;
    box-shadow: none !important;
    outline: 0 !important;
    border-radius: 35px;
    min-width: 78px;
    padding: 2px 5px;
    border: 1px solid #ddd;
}

.button {
    width: auto;
    border-radius: 34px;
    outline: none;
    border: 1px solid #dddcdc;
    background-color: #fff;
    margin-right: 10px;
    font-family: 'Proxima Nova Rg';
    font-size: 13px;
    cursor: pointer;
}

.button-small {
    border-radius: 5px;
    color: #fff;
    outline: none;
    border: 1px solid transparent;
    font-family: 'Proxima Nova Rg';
    font-size: 13px;
    cursor: pointer;
    width: auto;
}

a.cancel-button {
    border: 1px solid #666;
    margin-left: 10px;
    background-color: transparent;
    color: #666;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 13px;
}

button.cancel-button {
    border: 1px solid #666;
    background-color: transparent;
    color: #666;
}

button {
    width: auto;
    font-family: 'Proxima Nova Rg';
    cursor: pointer;
    font-size: 0.9em;
    padding: 7px 20px;
    outline: 0 !important;
    border-radius: 20px;
}

.form-button {
    width: auto;
    font-size: 13px;
    cursor: pointer;
    padding: 7px 20px;
    border-radius: 20px;
    outline: 0 !important;
    margin: 0 0 10px 10px;
}

.form-button.dark {
    color: #fff;
    border: 1px solid #dddcdc;
    background-color: var(--main-color);
}
.form-button.light {
    color: #666;
    border: 1px solid #666;
    background-color: transparent;
}

.form-button.semi {
    color: var(--main-color);
    background-color: transparent;
    border: 1px solid var(--main-color);
}

a.form-button.dark, a.form-button.light, a.form-button.semi {padding: 10px 20px;}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin: 30px 0px;
    min-height: 110px;
}

.upload-button {
    background-color: transparent;
    border: 1px solid #ddd;
    border-radius: 28px;
    color: #686a83;
    font-size: 14px;
    font-family: 'Proxima Nova Lt';
    padding: 5px 10px;
    margin-top: 30px;
}

.upload-btn-wrapper input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    max-height: 100%;
}

.upload-btn-wrapper img {
    max-width: 100px;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

/* Arrow Tabs */
.arrow-steps-main { width: 100%; margin: 10px 0px; }
.arrow-steps-main .nav { margin-top: 40px; }
.arrow-steps-main .pull-right { float: right; }
.arrow-steps-main .current a { color: #fff !important; }
.arrow-steps-main .arrow-steps .step:hover {background-color: #34385b;}
.arrow-steps-main .arrow-steps .step:hover a {color: #fff;}
.arrow-steps-main .arrow-steps .step:first-child:before { border: none; }

.arrow-steps-main .clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
}

.arrow-steps-main a, .arrow-steps-main a:hover{
    color: var(--primary-color);;
    text-decoration: none;
}

.arrow-steps-main .arrow-steps .step {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: #666;
    cursor: default;
    margin: 0 2px;
    padding: 10px;
    float: left;
    position: relative;
    background-color: #efefef;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background-color 0.2s ease;
}

.arrow-steps-main .arrow-steps .step:hover:after,
.arrow-steps-main .arrow-steps .step:hover:before {
    border-left: 17px solid var(--primary-color);;
}

.arrow-steps-main .arrow-steps .step:hover:before {
    border-left: 17px solid #fff;
}

.arrow-steps-main .arrow-steps .step:after,
.arrow-steps-main .arrow-steps .step:before {
    content: " ";
    position: absolute;
    top: 0;
    right: -17px;
    width: 0;
    height: 0;
    border-top: 19px solid transparent;
    border-bottom: 23px solid transparent;
    border-left: 17px solid #efefef;	
    z-index: 2;
    transition: border-color 0.2s ease;
}

.arrow-steps-main .arrow-steps .step:before {
    right: auto;
    left: 0;
    border-left: 17px solid #fff;	
    z-index: 0;
}

.arrow-steps-main .arrow-steps .step:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.arrow-steps-main .arrow-steps .step span { position: relative; padding: 13px 20px 13px 25px; }

.arrow-steps-main .arrow-steps .step span:before {
    opacity: 0;
    content: "✔";
    position: absolute;
    top: -2px;
    left: -20px;
}

.arrow-steps-main .arrow-steps .step.done span:before {
    opacity: 1;
    -webkit-transition: opacity 0.3s ease 0.5s;
    -moz-transition: opacity 0.3s ease 0.5s;
    -ms-transition: opacity 0.3s ease 0.5s;
    transition: opacity 0.3s ease 0.5s;
}

.arrow-steps-main .arrow-steps .step.current {
    color: #fff;
    background-color: var(--primary-color);;
    cursor: pointer;
}

.arrow-steps-main .arrow-steps .step.current:after {
    border-left: 17px solid var(--primary-color);;	
}

/* Dropdowns Css */
.user-dropdown li {display: block;padding-bottom: 7px;}
.c-labels .dropdown-menu.show {transform: none !important;padding: 0;margin-top: 13px;border: 1px solid #34385b;border-radius: 0px;}
.chat-drop-submenu {transform: none !important;top: 21px !important;}
#u-label:hover {background-color: transparent;}
.c-left-sidebar .user-dropdown .btn {color: #444869;}
.user-dropdown .btn {outline: 0;border: none;box-shadow: none;}
.user-dropdown .btn:focus {outline: 0;border: none;box-shadow: none;}
.user-dropdown .dropdown-toggle::after {display: none;}
.action-dropdown .dropdown-toggle::after {color: var(--main-color);}
.action-dropdown li {display: block;}
.action-dropdown ul {padding: 0;margin: 0;min-width: 9rem;}
.action-dropdown .dropdown-toggle:focus {box-shadow: none;}
.action-dropdown .dropdown-menu li {padding: 5px 0px 5px 10px;}
.action-dropdown .dropdown-menu li:hover {background-color: #f1f1f1;}
.dropdown-content a:hover {background-color: #efefef;}
.dropbtn:hover .dropdown-content {display: block;}
.dropdown-content li {display: block;}
.dropdown-content li {padding: 0 !important;}

.dropdown, .dropleft, .dropright, .dropup { padding: 0px 8px; }
.action-dropdown {
    padding: 0;
    background-color: transparent;
    color: #686a83;
    font-family: 'Proxima Nova Rg';
    font-size: 14px;
    margin: 0;
}

.action-dropdown a {
    color: #686a83;
    text-decoration: none;
    font-size: 13px;
    display: block;
}

.action-dropdown .dropdown-toggle {
    padding: 0px;
    background-color: transparent;
    color: #686a83;
    font-size: 14px;
}

.action-dropdown .dropdown-menu.show {
    top: 32px !important;
    left: -137px !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
}

.user-dropdown .btn {
    padding: 0;
    background-color: transparent;
    color: #fff;
    font-family: 'Proxima Nova Rg';
    font-size: 14px;
    padding-left: 0px;
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 140px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    margin-top: 11px !important;
}

.dropdown-content a {
    color: #9698ad !important;
    padding: 5px 16px;
    text-decoration: none;
    display: block;
}

/* Header Css */
.top-bar {background-color: var(--primary-color);}
.dropdown.user-dropdown.show {position: inherit;}
.top-first-user-dropdown {position: relative;}
.top-bar .fa {color: #a2a2a2;max-width: 10px;}
.main-menu li:hover .fa { color: var(--main-color);}
.user-sub {margin-left: 5px;margin-top: -16px;}
.top-first-user-dropdown img {width: 37px;height: 37px;border-radius: 50%;}
.top-bar .container {max-width: 94%;}
.top-bar .notification-menu a {display: block;}
.nav-menu ul {margin: 0;padding: 0;}
.main-menu a {font-size: 15px;color: var(--primary-color);}
.main-menu a:hover {color: var(--main-color);}
.main-menu .fa {vertical-align: top;margin-top: 2px;color: #ced0e0;}
.main-menu .active a {color: var(--main-color);}
.main-menu.dropdown li {padding: 3px 1px 10px 1px;}
.main-menu li:hover a {color: var(--main-color);}
.navigation-bar .dropdown:nth-child(1) {padding-left: 0px;}

.top-bar .dropdown-menu a {
    text-decoration: none;
    color: #686a83;
    padding: 2px 9px;
    font-size: 14px;
    font-family: 'Proxima Nova Rg';
    display: block;
}

.top-bar .dropdown-menu.show {
    left: auto !important;
    top: 100% !important;
    border-top-right-radius: inherit;
    right: 0 !important;
    width: auto;
    max-width: max-content;
    transform: none !important;
    will-change: unset !important;
}

.navbar-dark a {
    font-family: 'Proxima Nova Rg';
    padding: 8px 0px !important;
    text-decoration: none;
    font-size: 13px;
}

.second-header .dropdown-item:focus {
    color: #fff !important;
    background-color: #448aff;
    outline: 0;
}

.second-header .dropdown-menu {
    min-width: 8rem;
    margin-left: 12%;
    padding: 8px;
    margin-top: 0px;
}

.top-bar .notification-menu.show {
    left: auto !important;
    top: 100% !important;
    border-top-right-radius: inherit;
    right: 0 !important;
    width: auto;
    max-width: 350px;
    transform: none !important;
    will-change: unset !important;
}

.main-drop {position: relative;}
.noti-main {position: relative;}
.inline-block {display: inline-block !important;}

.nav-menu {
    background-color: #fff;
    padding: 9px 0px 0px 50px;
    -webkit-box-shadow: 0 6px 6px -6px #ccc;
    -moz-box-shadow: 0 6px 6px -6px #ccc;
    box-shadow: 0 4px 6px -6px #000;
}

/* Tabs Css*/
ul#tabs {margin-bottom: 12px;}
.nav-tabs .nav-link:nth-child(1) {margin-left: 0;}
.nav-tabs {padding-bottom: 8px;}
ul.tabs li{background-color: #efefef;display: inline-block;margin-bottom: 10px;}
ul.tabs li.current a{color: #fff;}
ul.tabs li.current {background: #34395b;border-radius: 3px;font-size: 14px;}
ul.tabs {margin: 0px;padding: 0px;list-style: none;}
.tabs-hide .tab-content {display: none;}
.tab-content {min-height: 100px;}
.tab-content.current {display: inherit;}
.tab-content .table-header {padding: 10px 0px;background-color: #eae2e2;margin: 0px;}
.nav-tabs a i.male {background: url('../images/sprite.png') -134px 76px;width: 30px; height: 28px;display: inline-block;vertical-align: middle;}
.nav-tabs a i.female {background: url('../images/sprite.png') -27px 79px;width: 30px; height: 28px;display: inline-block;vertical-align: middle;}
.nav-tabs a.active i.male {background: url('../images/sprite.png') -202px 80px;width: 30px; height: 28px;display: inline-block;vertical-align: middle;}
.nav-tabs a.active i.female {background: url(../images/sprite.png) -86px 80px;width: 30px; height: 28px;display: inline-block;vertical-align: middle;}
.nav-tabs a.active {background-color: #444869;color: #fff;}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background: #34395b;
    color: #fff;
    border-radius: 3px;
    font-size: 14px;
}

.nav-tabs .nav-link {
    background-color: #efefef;
    color: #222;
    display: inline-block;
    padding: 3px 15px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 14px;
    margin: 0px 3px;
}

.nav-tabs a {
    color: #444869;
    font-size: 14px;
    font-family: 'Proxima Nova Lt';
    padding: 12px 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 0px 6px 0px 0px;
    background-color: #f1f1f1;
}

ul.tabs a {
    color: #222;
    padding: 3px 15px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 14px;
    line-height: 26px;
}

/* Footer Css*/
footer p {margin-bottom: 0px;font-size: 13px;}
footer a {color: var(--main-color);}
footer a:hover {color: var(--primary-color);}
footer {
    bottom: 0;
    position: relative;
    color: #444869;
    width: 100%;
    padding: 10px 48px;
    text-align: right;
}

/* Login Css */
.login-bg {background-color: #e8eef7;}
.login-panel {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translate(-50%, -10%);
    width: 336px;
}

.login-form h5 { text-align: center; }

.login-form p {
    font-family: 'Proxima Nova Rg';
    font-size: 15px;
    color: #444869;
    text-align: center;
    line-height: 17px;
    margin-top: 16px;
}

.login-form {
    background-color: #fff;
    padding: 33px;
    margin-top: 35px;
    box-shadow: 0 0 20px #d3d9e1;
}

.login-form input {
    width: 100%;
    border: 1px solid #ddd;
    padding: 4px 10px;
    margin-top: 5px;
    font-size: 14px;
    border-radius: 3px;
}
.login-form input.disabled {
    color: rgb(84, 84, 84);
    cursor: default;
    background-color: #eee;
}

.login-form button {
    background-color: var(--main-color);
    box-shadow: none;
    outline: 0;
    border: 0;
    border-radius: 34px;
    color: #fff;
    text-align: center;
    width: 100%;
    margin-top: 8px;
    font-family: 'Proxima Nova Lt';
    font-size: 14px;
    padding: 9px 0px;
    cursor: pointer;
}

.l-f-footer-link a {
    font-family: 'Proxima Nova Lt';
    font-size: 14px;
    text-decoration: none;
    color: var(--main-color)
}

/* Notifications Css */
.user-notification {padding-left: 0 !important;}
.noti-icon {display: inline-block;}
.noti-view-all a:hover {text-decoration: underline;}
.noti-drop li{padding-bottom: 0;border-bottom: 1px solid #ddd;}
.noti-icon img {margin-right: 10px;margin-top: 12px;}
.nf-list a {color: #686a83;}
.nf-list .row {border-bottom: 1px solid #ddd;} 
.nf-list a:hover {color: #686a83;}
.nf-list li {display: block;font-size: 14px;}
.nf-list img {width: 37px;height: 37px;border-radius: 50%;}
.nf-title {font-weight: 700;}
.nf-list {padding: 0;}
.nf-text-inner {margin: 0;}
.nf-time {font-size: 12px;}
.top-bar .notification-menu a {padding: 0px 9px;font-size: 10px;}
.noti-menu {padding-right: 4px;padding-left: 12px;}
.noti-time {font-size: 9px;padding-left: 5px;text-align: right;}
.noti-drop .fa-bell {font-size: 21px;}
.user-notification {display: block;margin-left: 49px;margin-top: -16px;}
.noti-new {background-color: #efefef;}
.noti-drop li:hover {background-color: #efefef;}
.noti-title {font-size: 12px;display: inline-block;}
.user-notification {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Other Css */
.rs-box input {padding: 2px 10px !important;}
.rs-box .form-field {padding: 0px 5px;}
.item-name {font-size: 14px;}
.p-profile {border: 1px solid #ddd;padding: 10px;}
.error-text.green {color: #2fb954; background-color: transparent;}
.error-text {color: #fd9f9f;font-size: 13px;text-align: right;}
span.blue-text {color: #448aff;font-family: 'Proxima Nova Lt';font-size: 14px;}
span.normal-text {font-size: 14px;padding-right: 5px;}
span.s-name {color: #fff;font-size: 26px;line-height: 58px;}
.s-name img {max-width: 216px;margin-top: -8px;}
.d-white {background-color: #f2f7ff;}
.c-label-n {color: #fff;font-size: 14px;padding: 0;}
.c-search input {color: #adaeb8;border-radius: 5px;background-color: #efefef;}
.c-search {padding: 5px 8px;position: relative;}
span.chat-search {position: absolute;top: 10px;right: 25px;}
.c-blue {color: var(--main-color) !important;}
.c-fa {margin-right: 5px;}
.c-extra-margin {margin-right: 4px !important;}
.label-child {color: #34395b !important; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; line-height: 30px;}
.c-left-sidebar {padding: 34px 0px;border-right: 1px solid #ddd;}
.chat-l-top {border-bottom: 1px solid #ddd;padding-bottom: 10px;}
.left-siderbar-top {max-height: 436px;overflow: auto;}
.left-siderbar-bottom {max-height: 174px;overflow: auto;}
.chat-l-bottom {padding-top: 15px;}
.c-middle .header {border-bottom: 1px solid #ddd;padding: 20px 30px;}
.img-part img {position: relative;}
.disabled-chat span {font-size: 12px;font-style: italic;color: #444969;}
.disabled-chat span:before {right: 51%;margin-right: 15px;}
.disabled-chat span:after {left: 51%;margin-left: 15px;}
.disabled-chat {position: relative;}
.g-user img {max-width: 25px;margin: 0px 8px 0px 0px !important; border-radius: 50%; }
.g-user {margin-bottom: 10px;position: relative;cursor: pointer;}
.g-user span {font-size: 14px;}
.g-user span:hover {font-weight: bold;}
.unread-messages {position: relative;}
.unread-messages span:before {right: 57%;margin-right: 15px;}
.unread-messages span:after {left: 57%;margin-left: 15px;}
.c-labels:hover {background-color: #f3f3f3;border-radius: 4px;}
.c-label-active {background-color: #34395b;border-radius: 4px;}
.c-label-active:hover {background-color: #34395b !important;}
.c-labels {margin: 5px;padding: 3px 8px; cursor: pointer; position: relative; }
.c-labels img {width: 30px;height: 30px; border-radius: 50%; }
.c-labels .c-extra-margin.dot { position: absolute; top: 12px; left: 32px; }
.c-label-active .c-label-n {color: #fff !important;}
.middle-first-user {margin-left: 20px;margin-right: 20px;}
.child-user {font-size: 12px;}
.middle-gray-box {width: auto;margin-left: 66px;margin-top: 4px;max-width: 65%;}
.middle-gray-box p {margin-bottom: 0px;font-size: 12px;}
.chat-footer-square {width: 7px;height: 9px;margin-top: 3px;margin-right: 6px;}
.chat-footer-label {font-size: 12px;color: #444869;}
.footer-box {float: left;}
.c-main-footer {margin-top: 10px;margin-bottom: 10px;}
.route-cols {margin-bottom: 10px!important;}
.route-label {width: 35%;font-size: 16px;}
.route-name {font-size: 14px;width: 65%;}
.route-cols p {line-height: 12px;}
.c-middle {position: relative;}
.no-sub-menu-active a {color: #fff !important;}
.footer-bottom-middle .icon.emo {right: 75px;}
.footer-bottom-middle .icon.send {right: 25px;}
.footer-bottom-middle .icon.file {right: 50px;}
.footer-bottom-middle .icon.file label {display: table;color: #444869;}
.footer-bottom-middle .icon.file input[type="file"] {display: none}
.c-middle {position: relative;}
.circle {border-radius: 50%;}
.c-right-sidebar #ou-img {width: 116px;height: 116px;margin: 28px 0px 20px 0px;}
.chat-user-dropdown {position: absolute;right: 0;}
.chat-drop-name {width: 86%;text-align: left;}
.chat-drop-submenu li {padding: 16px 0px 18px 15px;}
.chat-drop-submenu a {color: #34385b !important;font-size: 13px;}
.c-message.right {justify-content: flex-end;align-items: flex-end;}
.c-message.right .c-message-inner .name {text-align: right;}
.c-message .c-message-inner p {margin: 0 0 0.2rem 0;color: #000;}
.c-message .c-message-inner .time .edit:before {content: '\002A';}
.c-message-inner:hover .message-action {opacity: 0.8;border-radius: 5px 0 0 0;}
.message-action .link {padding: 0 4px;cursor: pointer;}
.message-action .link.red {color: #fe6565;background-color: transparent;}
.message-action .link.blue {color: #448aff;background-color: transparent;}
.principal-profile img {vertical-align: bottom;}
.nested-profile li {display: block;}
.right-user {float: right;}
.right-user li {padding-left: 20px;}
.chat-icon {position: relative;}
.message-icon {position: absolute;margin-left: -3px;margin-top: 0px !important;}
.bottom-input-icon a {color: #444869;}
.img-part {position: relative;}
.top-first-user-dropdown {padding-right: 8px;}
.without-bg:hover {background-color: transparent;}
.u-list .name-label i {color: #aaaaaa; cursor: pointer;}
.u-list .name-label .dot {vertical-align: inherit;}
.create-group-button a {color: #fff;}
.stu-id-information .row {margin-bottom: 5px;}
.stu-label-information {color: #364778;}
.cons-second-heading {margin: 10px 0px;}
.input-check-mark {position: absolute;right: 7%; top: 34%;}
input.filter {margin-bottom: 10px;}
.vd-link {cursor: pointer;}
.vd-link:hover {color: #000;}
[data-toggle="tooltip"] {cursor: pointer;}
.fill {min-height: -webkit-fill-available;}
#report-section {min-height: 200px;}
.inner-pages {min-height: 75vh;}
.inner-pages input:focus {border: 1px solid var(--main-color);box-shadow: none;outline: 0;}
.inner-pages .error {border: 1px solid #fd9f9f !important;background-color: #fef3f3;}
.inner-pages .success {border: 1px solid #2fb954 !important;background-color: #e2f5e7;}

.inner-pages label {
    margin-bottom: 4px;
    font-family: 'Proxima Nova Lt';
    color: #34395b;
    font-size: 14px;
}

.report-section {
    padding: 14px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.inner-pages input {
    width: 100%;
    border: 1px solid #ddd;
    color: #34395b;
    font-size: 14px;
    font-family: 'Proxima Nova Rg';
    padding: 5px 10px;
}

.form-disabled input, .form-disabled textarea {
    border: transparent;
    padding: 5px 0px;
    background-color: transparent;
    text-overflow: ellipsis;
}

.inner-pages select {
    width: 100%;
    border: 1px solid #ddd;
    font-size: 14px;
    padding: 8px 10px;
    color: #34395b;
    position: relative;
}

.chat-drop-submenu {
    transform: none !important;
    top: 76% !important;
    max-width: max-content;
    right: -2px !important;
    left: auto !important;
}

.u-list .name-label {
    font-size: 12px;
    color: #666981;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: 7px 10px;
    border-radius: 19px;
    margin-right: 5px;
    width: auto;
    display: inline-block;
    margin-bottom: 10px;
}

.bell-icon {
    position: absolute;
    margin-left: 0;
    margin-top: -3px !important;
    background-color: #ffc333;
    border-radius: 5px;
    font-size: 11px;
    padding: 0px 5px;
    color: #fff;
}

.chat-icon .bell-icon {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #ffc333;
    border-radius: 5px;
    font-size: 11px;
    padding: 0px 5px;
    color: #fff;
}
.c-message {
    font-size: 12px;
    padding: 0.3rem 0.2rem;
    overflow: hidden;
    display: flex;
}

.c-message.right .c-message-inner {
    order: 1;
    border-bottom-right-radius: 0;
    border-radius: 5px 0 5px 5px;
}

.c-message.left .c-message-inner {
    background-color: #f2f7ff;
    border-radius: 0 5px 5px 5px;
}

.c-message .c-message-inner {
    background-color: #f5f4f4;
    padding: 5px 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    max-width: 80%;
}

.c-message .c-message-inner .name {
    color: #999;
    font-size: 11px;
    font-weight: bold;
}

.c-message .c-message-inner .time {
    font-size: 10px;
    color: #999;
    text-align: right;
}

.message-action {
    top: 0;
    left: 0;
    border: 0;
    opacity: 0;
    width: 100%;
    padding: 5px;
    position: absolute;
    text-align: right;
    background-color: #000;
    transition: opacity .5s ease;
}

.footer-bottom-middle {
    position: absolute;
    min-width: 100%; 
    bottom: 0; 
    padding: 0 15px;
}
.footer-bottom-middle .icon {
    position: absolute;
    top: 54%; 
    transform: translateY(-50%);
    cursor: pointer;
}

.footer-bottom-middle .icon.file .fa {
    -webkit-transform: rotate(80deg);
    -moz-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    -o-transform: rotate(80deg);
    transform: rotate(80deg);
}

.footer-bottom-middle textarea {
    display: -webkit-box;
    box-shadow: inset 0px 0px 10px 0px #ddd;
    height: 50px;
    border-radius: 5px;
    resize: none;
}

.no-sub-menu-active {
    background-color: #448aff !important;
    padding: 4px 11px !important;
    border-radius: 24px !important;
}

.cover-spin {
    position: absolute;
    width: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 9999;
}

.cover-spin .text {
    top: 100px;
    left: 50%;
    color: #000;
    position: absolute;
    transform: translateX(-50%);
}

.chat-l-top ul:after{
    position: absolute;
    right: -2px;
    top: -13px;
    width: 0;
    height: 0;
    content: '';
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 12px solid #34385b;
}

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

@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

.cover-spin::after {
    content: '';
    display: block;
    position: absolute;
    left: 48%;
    top: 50px;
    width: 40px;
    height: 40px;
    border-style: solid;
    border-color: black;
    border-top-color: transparent;
    border-width: 4px;
    border-radius: 50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}
#gul {
    max-height: 416px;
    overflow: auto;   
    text-align: left;
    margin-top: 10px;
}

.g-user .dot {
    vertical-align: baseline;
    position: absolute;
    left: 20px;
    top: 4px;
}

.unread-messages span {
    font-size: 12px;
    font-style: italic;
    color: #5793ff;
    background-color: #f2f7ff;
    padding: 5px 5px;
    border-radius: 20px;
}

.unread-messages span:before,
.unread-messages span:after {
    content: "";
    position: absolute;
    border-top: 1px solid #d7d7d8;
    top: 53.5%;
    width: 233px;
    border-top-style: dashed;
}

.number-label {
    color: #ff9000;
    border-radius: 5px;
    position: absolute;
    right: 5px;
    font-size: 13px;
    margin-top: 0px;
    min-width: 20px;
    text-align: center;
    padding: 2px 1px 1px 1px;
    font-weight: bold;
}

.middle-inner {
    position: absolute;
    max-height: 500px;
    overflow: auto;
    padding: 0 15px;
    width: 100%;
}

.dot-with-border {
    position: absolute;
    margin-left: 38px;
    margin-top: -18px;
    border: 2px solid #fff;
    height: 13px;
    width: 13px;
    border-radius: 50%;
}

.disabled-chat span:before,
.disabled-chat span:after {
    content: "";
    position: absolute;
    border-top: 1px solid #d7d7d8;
    top: 53.5%;
    width: 270px;
    border-top-style: dashed;
}

.c-left-sidebar .fa-plus-circle {
    position: absolute;
    right: 12%;
    margin-top: 5px;
    color: #448aff;
}
span.success-message {
    color: #42ba42;
    font-style: italic;
    font-size: 13px;
    padding-left: 20px;
}
.status-label {
    padding: 5px 5px 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    background-color: #fff!important;
    border: 1px solid;
}
.fa-messaging {
    font-size: 21px;
    padding-right: 30px;
    vertical-align: middle;
    margin-top: -4px;
}
.messaging-number {
    background-color: #ff9000;
    color: #fff;
    border-radius: 5px;
    padding: 2px 4px;
    font-size: 10px;
    margin-left: 2px;
}

.rs-box {
    border: 1px solid #ddd;
    padding: 15px 0px 0px 0px;
    margin: 5px 3px 10px 0px;
    -moz-box-shadow: 0 0 3px #ccc;
    -webkit-box-shadow: 0 0 3px #ccc;
    box-shadow: 0 0 3px #ccc;
    cursor: pointer;
}

.s-list-heading {
    font-family: 'Proxima Nova Lt';
    color: #34395b;
    font-size: 14px;
}

/* Brdcrumb */
.brdcrumb {
    font-family: 'Proxima Nova Lt';
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.brdcrumb a {text-decoration: none;color: #444869;}
.current-sub-page {color: var(--main-color);}
.brdcrumb .session {color: #c6c6cd;}

/* Form Css */
label {color: #444869;font-family: 'Proxima Nova Lt';font-size: 14px;}
.f-field {margin-bottom: 10px;}
.l-f-for-password a {color: #686a83;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=checkbox],
input[type=radio] {
    width: auto !important;
    vertical-align: middle;
}

::placeholder {color: #444869;opacity: 1;}
.footer-bottom-middle ::placeholder {color: #b7b8c2;opacity: 1;font-size: 16px;}
.form-field {margin-bottom: 15px;}
.form-field em {color: #fe6565;}
.form-field small { color: #666; font-size: 11px; }
.chosen-container-single .chosen-single {box-shadow: none !important;}
.chosen-container-single .chosen-single span:focus {outline: 0;border: 0;}
.chosen-container-active .chosen-single {box-shadow: none !important;}
.chosen-container .chosen-drop {left: 0;}
.u-list {margin: 12px 0px 20px 0px;max-height: 232px;overflow: auto;}
.chosen-container {
    width: 100% !important;
    border: 1px solid #ddd;
    font-size: 14px;
    padding: 4px 0px;
    color: #34395b;
    background-color: var(--body-color);
}

.form-disabled .chosen-container {
    border: transparent;
    background-color: transparent;
}

.form-disabled .chosen-single div b {display: none;}
table tr td .chosen-container {border: 1px solid transparent;background-color: transparent; color: inherit;}
table tr td .chosen-container .chosen-single div b {display: none;}
table tr td .chosen-container:hover {border:1px solid #ddd;background-color: var(--body-color);}
table tr td .chosen-container:hover .chosen-single div b {display: block;}
table tr td .chosen-container .chosen-single:not(.chosen-default) span {font-weight: bold;}

.chosen-container-single .chosen-single {
    height: auto;
    background: none;
    border: 1px solid #aaa;
    border: none !important;
    background-color: transparent;
}

.chosen-container-active.chosen-with-drop .chosen-single {
    border: none !important;
    background: none;
}

.chosen-container-active .chosen-choices {
    border: none !important;
    box-shadow: none !important;
}

.chosen-container-multi .chosen-choices {
    background-color: transparent !important;
    background-image: none !important;
}

.chosen-container-multi .chosen-choices {border: none !important;}

.chosen-container-multi .chosen-choices li.search-choice {
    border: 1px solid #ddd !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #1a1d2e !important;
}

.chosen-container-multi .chosen-choices li.search-field input[type=text] {
    min-width: 100px;
}

.radio-button-custom {position: relative;}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}

.form-disabled [type="radio"]:not(:checked)+label {
    display: none;
}

[type="radio"]:checked+label:before,
[type="radio"]:not(:checked)+label:before {
    content: '';
    position: absolute;
    left: 6px;
    top: 3px;
    width: 14px;
    height: 14px;
    border: 1px solid var(--main-color);
    border-radius: 100%;
    background: #fff;
}

[type="radio"]:checked+label:after,
[type="radio"]:not(:checked)+label:after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--main-color);
    position: absolute;
    top: 5.9px;
    left: 9px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

[type="radio"]:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

[type="radio"]:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.boxed label {
    display: inline-block;
    width: auto;
    padding: 8px 6px 6px 6px !important;
    line-height: 6px !important;
    transition: all 0.3s;
    font-size: 12px;
    margin: 0px 3px;
}

.boxed .green-lable {border: solid 1px #11c15b;border-radius: 5px;}
.boxed .red-lable {border: solid 1px #fe6565;border-radius: 5px;}
.boxed .yellow-lable {border: solid 1px #e0bd2b;border-radius: 5px;}
.boxed input[type="radio"] {display: none;}

.boxed input[type="radio"]:checked + .green-lable {
    background-color: #11c15b;
    color: #fff;
}

.boxed input[type="radio"]:checked + .red-lable {
    background-color: #fe6565;
    color: #fff;
}

.boxed input[type="radio"]:checked + .yellow-lable {
    background-color: #e0bd2b;
    color: #fff;
}

.boxed [type="radio"]:checked+label:before, .boxed [type="radio"]:not(:checked)+label:before {
    display: none;
}

.boxed [type="radio"]:checked+label:after, .boxed [type="radio"]:not(:checked)+label:after {
    display: none;
}

.checkbox-custom {
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox-custom input {position: absolute;opacity: 0;cursor: pointer;}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

td .checkmark {top: -7px;}
.checkmark:focus {border: 1px solid #448aff;}
.checkbox-custom:hover input~.checkmark {background-color: #ddd;}

.checkbox-custom input:checked~.checkmark {
    background-color: transparent;
    border: 1px solid var(--main-color);
}

.checkmark:after {content: "";position: absolute;display: none;}
.checkbox-custom input:checked~.checkmark:after {display: block;}

.checkbox-custom .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--main-color);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkbox-col .checkbox-custom .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--primary-color);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkbox-col .checkbox-custom input:checked~.checkmark {
    background-color: transparent;
    border: 1px solid var(--primary-color);
}

.checkbox-col {width: 8%;}

textarea {
    width: 100%;
    max-width: 100%;
    padding: 3px 10px;
    border: 1px solid #ddd;
    color: #34395b;
    font-size: 14px;
}

textarea:focus {border: 1px solid var(--main-color);box-shadow: none;outline: 0;}

/* Modal Css */
.modal-content ::placeholder {color: #b1b2bd;opacity: 1;}
.modal-content .error {border: 1px solid #fd9f9f;background-color: #fef3f3;}
.modal-search {position: absolute;top: 4px;right: 5px;}
.modal-serch-box .fa-search {color: #b7b8c2;}
.modal-serch-box {position: relative;}
.modal-sm {min-width: 300px; max-width: 90%;}
.modal-md {min-width: 500px; max-width: 90%;}
.modal-lg {min-width: 700px; max-width: 90%}
.modal-print a {margin-right: 20px;color: #11c15b;}
.modal-dialog {margin: 8.75rem auto;}
.modal-content {border: none;}
.modal-content label {
    margin-bottom: 4px;
    font-family: 'Proxima Nova Lt';
    color: #34395b;
    font-size: 15px;
}

.modal-content input {
    width: 100%;
    border: 1px solid #ddd;
    color: var(--primary-color);
    font-size: 14px;
    font-family: 'Proxima Nova Rg';
    padding: 5px 10px;
}

.modal-content input:focus {
    border: 1px solid var(--main-color);
    box-shadow: none;
    outline: 0;
}

.modal-header {
    background-color: var(--main-color);
    color: #fff;
    font-family: 'Proxima Nova Lt';
    background-position: center;
    border: none;
    background-repeat: no-repeat;
    padding: 12px 15px 1px 15px;
    background-size: cover;
}

.stu-id-header {
    background-image: url(../images/modal-header.png);
    background-color: var(--main-color);
    color: #fff;
    font-family: 'Proxima Nova Lt';
    background-position: center;
    display: block;
    border: none;
    text-align: center;
    background-repeat: no-repeat;
    padding: 0;
    background-size: cover;
}

.modal-second-title {font-size: 12px;color: #fff;text-transform: uppercase;}
.modal-footer {border-top: none;}
.stu-id-card-modal .modal-title {text-transform: uppercase;font-size: 20px;}
.modal-second-dark-title {font-size: 12px;color: #fff;margin-top: 7px;}
.modal-title {font-size: 16px;color: #fff;padding-top: 0;}
.stu-id-card-modal .modal-title {text-transform: uppercase;font-size: 20px;}

.modal-header .close {
    padding: 0;
    margin: 0;
    font-size: 40px;
    font-weight: normal;
    font-family: 'Proxima Nova Rg';
    margin-top: -5px;
}

.stu-id-header .close {
    padding: 1rem;
    margin: -6rem 0rem 3rem auto;
    font-size: 40px;
    font-weight: normal;
    font-family: 'Proxima Nova Rg';
}

.stu-id-logo {margin-left: -8%;}
.signature {margin-top: 20px;}
.modal-body {padding: 15px;}
.m-body-overflow {max-height: 500px;overflow: auto; margin-bottom: 20px;overflow-x: hidden;}
.stu-id-card-modal .modal-body {padding: 0;}
.stu-id-img {border-right: 1px solid #ddd;padding: 24px;padding-top: 14px;}
.stu-id-img img {border-radius: 50%; }
.select-loader {position: relative;}
.select-loader img {
    width: 20px;
    height: auto;
    position: absolute;
    right: 0;
    top: 10px;
    z-index: 9;
    transform: translate(-59%, -12%);
}
.stu-id-information {padding: 20px;padding-bottom: 14px;}

.avatar-upload {position: relative;max-width: 205px;margin: 0 auto;}
.avatar-upload:hover .avatar-edit{opacity: 1;}
.avatar-upload .avatar-edit input {display: none;}
.avatar-upload .avatar-edit {
    position: absolute;
    left: 62px;
    z-index: 1;
    bottom: -9px;
    opacity: 0;
}

.avatar-upload .avatar-edit input + label {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-bottom: 0;
    border-radius: 100%;
    background: #FFFFFF;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-weight: normal;
    transition: all 0.2s ease-in-out;
}
.avatar-upload .avatar-edit input + label:hover {
    background: #f1f1f1;
    border-color: #d6d6d6;
}
.avatar-upload .avatar-edit input + label:after {
    content: "\f040";
    font-family: 'FontAwesome';
    color: #757575;
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
}

.lg.avatar-upload {margin-top: 50px;}
.lg.avatar-upload .avatar-edit {left: 111px;bottom: 1px;}
.lg.avatar-upload .avatar-preview {
    margin: 0 auto;
    width: 150px;
    height: 150px;
}

.avatar-upload .avatar-preview {
    width: 92px;
    height: 92px;
    position: relative;
    border-radius: 100%;
    border: 6px solid #F8F8F8;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.avatar-upload .avatar-preview > div {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.sm.avatar-upload .avatar-preview {
    width: 60px;
    height: 60px;
    border: 2px solid #F8F8F8;
}

.sm.avatar-upload .avatar-edit { left: 40px; }
.id-card-main {border: 1px solid #ddd;}

.close:not(:disabled):not(.disabled),
.close:not(:disabled):not(.disabled):focus,
.close:not(:disabled):not(.disabled):hover {
    color: #fff;
    text-decoration: none;
    opacity: 1;
}

/* Calendar Css */
.calendar-tabs .nav-tabs {border-bottom: none;padding-bottom: 5px;}
.t-calendar-main .arrow {width: 5%;background-color: #c7c7c7;padding: 6px 0px;}
.t-cal-month {padding: 0px 15px;}
.t-calendar-main .arrow .fa {color: #fff;font-weight: bold;font-size: 24px;}
.cal-search {position: relative;}
.cal-search input {border-radius: 18px;padding: 2px 10px;}
.t-calendar-main {
    max-width: 100% !important;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.t-calendar-main .month {
    width: 90%;
    background-color: #d7d7d7;
    padding: 0;
    color: #444869;
}

.t-calendar-main .chosen-container {
    padding: 8px 0px;
    border: none;
    max-width: 30%;
}

.t-calendar-main .dot {
    height: 7px;
    width: 7px;
    border-radius: 50%;
    display: inline-block;
    margin-top: 4px;
    vertical-align: top;
    margin-right: 6px;
}

.cal-search .search {
    position: absolute;
    top: 6px;
    right: 7px;
    top: 53%;
    right: 7px;
    transform: translateY(-50%);
}

/* Scroll Css */
.tab-responsive::-webkit-scrollbar {width: 5px;height: 5px;}
.tab-responsive::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}
.tab-responsive::-webkit-scrollbar-thumb {background: #808080;border-radius: 10px;}
.tab-responsive::-webkit-scrollbar-thumb:hover {background: #a0a0a0;}
.scroll-custom::-webkit-scrollbar {width: 5px;height: 5px;}
.scroll-custom::-webkit-scrollbar-track { box-shadow: inset 0 0 5px #808080; border-radius: 10px; }
.scroll-custom::-webkit-scrollbar-thumb {background: #808080;border-radius: 10px;}
.scroll-custom::-webkit-scrollbar-thumb:hover {background: #a0a0a0;}

/* Dashboard */
.calendar th {color: #afb0bb;font-size: 14px;}
.upcoming-holiday .up-bar-title {margin-top: 30px;padding: 0px 15px;}
.upcoming-holiday {padding: 0;}
.bottom p {margin: 0;}
.graph-title {padding: 20px 15px;border-bottom: 1px solid #ddd;}
.graph-img {padding-top: 20px;padding-bottom: 20px;}
.calendar-table {overflow: auto;}
.dash-upcoming {min-height: 100%;}
.cl-month {font-size: 18px;font-family: 'Proxima Nova Lt';color: #34395b;}
.cl-year {font-size: 16px;color: #448aff;}
.clendar ul {padding-left: 15px;}
.calendar li {font-size: 12px;padding: 0px 6px;}
.clendar li:nth-child(1) {padding-left: 0;}
.up-title {max-width: 20%;}
.arrow .fa {color: #448aff;padding-left: 15px;}
.up-bar-title {margin-top: 30px;}
.dash-inner {margin: 0px 0 0px 9px;}
.dsh-evnt-title .date {font-size: 13px;color: #b4b8c7;}
.dash-evnt-parent {position: relative;padding: 0 !important;}
.graph-1 img {padding: 15px;}
.notice-header {padding: 20px 0px;border-bottom: 1px solid #ddd;}
.noti-view-all {padding: 5px 0px;}
.exam-result-tabs {padding: 16px 0px 0px 0px;}
.notice-inner {max-height: 90vh;overflow: auto; margin-bottom: 10px; }
.graph-stu-info {min-width: 14%;}
.para-date {color: #b1b2bd;}
.notice-title {font-weight: bold;}
.notice-para {text-align: left;font-size: 14px;}
.notice-date {text-align: right;font-size: 12px;}
.calendar th,
td {padding-bottom: 12px;}

.bottom {
    background-color: #ffc333;
    padding: 10px 15px;
    color: #fff;
    position: absolute;
    bottom: 0;
    text-align: center;
    min-width: 100%;
}

.upcoming-holiday {
    background: url(../images/upcoming-holidays-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 23vh;
}

.upcoming-event {
    background: url(../images/upcoming-event-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 23vh;
}

.up-title h4 {
    color: #fff;
    font-size: 20px;
    font-family: 'Proxima Nova Lt';
    text-transform: uppercase;
}

.up-bar {
    width: 54px;
    height: 5px;
    background-color: #fff;
    margin-bottom: 18px;
}

.dsh-evnt-title .title {
    font-size: 15px;
    font-family: 'Proxima Nova Lt';
    color: #34395b;
}

.dsh-evnt-title {
    min-height: 41px;
    background-color: #f2f7ff;
    padding: 0px 18px;
    margin-bottom: 12px;
    border-left: 4px solid #ffc333;
}

.notice-information {
    background-color: #f9f9f9;
    padding: 10px;
    position: relative;
    margin: 15px auto 0 auto;
    width: 90%;
}

.new-icon {
    background: url(../images/sprite.png) 1px 171px;
    width: 30px;
    height: 30px;
    clear: both;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: -14px;
    right: 0;
}

@-webkit-keyframes seconds {
    0% {opacity: 1;}
    100% {opacity: 0;left: -9999px;position: absolute;}
}

@keyframes seconds {
    0% {opacity: 1;}
    100% {opacity: 0;left: -9999px;position: absolute;}
}

/* Photo Gallery */
.gallery-folder img {height: 235px;}
.gallery-page img {height: 158px;width: 100%;}
.folder-img {height: 200px;overflow: hidden;}
.folder-main-img {display: block;width: 100%;height: 100%;}
.folder-img:hover .overlay-fo-img {opacity: 1;}
.folder-dlt-icon {text-align: right;margin-right: 7px;margin-top: 7px;}

.overlay-fo-img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #4a8aeddb;
    margin: 0px 15px;
}

.overlay-text {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    font-family: 'Proxima Nova Lt';
    font-size: 16px;
    text-transform: uppercase;
}

.overlay-text-second {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 59%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -59%);
    text-align: center;
    width: 100%;
    font-family: 'Proxima Nova Lt';
    font-size: 11px;
    font-style: italic;
}

.overlay-text-second-gallery {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    font-family: 'Proxima Nova Lt';
    font-size: 11px;
    font-style: italic;
}

.img-black-bar {
    position: absolute;
    bottom: 0;
    background-color: #000;
    width: 100%;
    left: 0;
}

.folder-dlt-icon i.fa.fa-trash-o {
    background-color: #fff;
    padding: 5px 5px 3px 5px;
    border-radius: 100%;
    display: inline-block;
    color: #ff0101;
}

.folder-dlt-icon i.fa.fa-pencil {
    background-color: #fff;
    padding: 5px 5px 3px 5px;
    border-radius: 100%;
    display: inline-block;
}

.tr-steps {margin-top: 40px;}
.tr-steps {border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0;}
.tr-steps > .tr-step {padding: 0; position: relative;}
.tr-steps > .tr-step + .tr-step {}
.tr-steps > .tr-step .tr-step-title {color: #595959; font-size: 14px; margin-bottom: 5px;}
.tr-steps > .tr-step .tr-step-info {color: #999; font-size: 14px;width: 109px;}
.tr-steps > .tr-step > .tr-step-dot {position: absolute; width: 30px; height: 30px; display: block; background: #fbe8aa; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;} 
.tr-steps > .tr-step > .tr-step-dot:after {content: ' '; width: 14px; height: 14px; background: #ffc333; border-radius: 50px; position: absolute; top: 8px; left: 8px; } 
.tr-steps > .tr-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;}
.tr-steps > .tr-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #fbe8aa;}
.tr-steps > .tr-step.complete > .progress > .progress-bar {width:100%;}
.tr-steps > .tr-step.active > .progress > .progress-bar {width:50%;}
.tr-steps > .tr-step:first-child.active > .progress > .progress-bar {width:0%;}
.tr-steps > .tr-step:last-child.active > .progress > .progress-bar {width: 100%;}
.tr-steps > .tr-step.disabled > .tr-step-dot {background-color: #f5f5f5;}
.tr-steps > .tr-step.disabled > .tr-step-dot:after {opacity: 0;}
.tr-steps > .tr-step.target > .tr-step-dot {background-color: #89f3b6; animation: pulse 2s infinite;}
.tr-steps > .tr-step.target > .tr-step-dot:after {background: #11c15b;}
.tr-steps > .tr-step:first-child  > .progress {left: 50%; width: 50%;}
.tr-steps > .tr-step:last-child  > .progress {width: 50%;}
.tr-steps > .tr-step.disabled a.tr-step-dot{ pointer-events: none; }

@keyframes pulse {
    0% { background-color:  #89f3b6;}
    25% { background-color:  #a9f3d6;}
    50% { background-color:  #b9f7c9;}
    75% { background-color:  #a9f9bf;}
    100% { background-color:  #89f3b6;}
}

@media (min-width: 768px) {
    .top-bar ul ul:after {
        position: absolute;
        right: 0;
        top: -12px;
        width: 0;
        height: 0;
        content: '';
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 12px solid #fff;
    }

    .c-main-footer .col-md-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 6.333333%;
    }
    .error-page {
        width: 72%;
        top: 395px;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -153px);
    }
    .error-page-main {position: relative;}
    .f-l {float: left;}
    .f-r {float: right;}
    .fee-cons-input {width: 50%;}
    #menu {display: none;}
    .l-f-for-password {text-align: right;}
    .pad-0 {padding: 0px;}
    .main-menu .active {border-bottom: 3px solid #448aff;}

    .dropdown-content li {
        border-bottom: none !important;
        padding-bottom: 0px !important;
    }
    .dash-events {
        position: absolute;
        top: 5%;
        left: 0;
        transform: translateY(-5%);
        width: 96%;
    }
    .middle-inner {bottom: 60px;}
    .container {max-width: 92%;margin: 0 auto;}
    .user-part {text-align: right;}
}

@media (min-width: 769px) {
    .dashboard {background: url('../images/sprite.png') -538px 172px;}
    .students {background: url('../images/sprite.png') -86px 172px;}
    .teacher {background: url('../images/sprite.png') -27px 172px;}
    .other-staff {background: url('../images/sprite.png') -142px 172px;}
    .accounts {background: url('../images/sprite.png') -202px 172px;}
    .payments {background: url('../images/sprite.png') -262px 76px;}
    .reports {background: url('../images/sprite.png') -262px 172px;}
    .exams {background: url('../images/sprite.png') -310px 172px;}
    .transports {background: url('../images/sprite.png') -365px 172px;}
    .parents {background: url('../images/sprite.png') -416px 172px;}
    .mail {background: url('../images/sprite.png') -466px 206px;}
    .miscellaneous {background: url('../images/sprite.png') -499px 172px;}
    .main-menu li:hover .menu-item {
        -webkit-transition: all linear 200ms;
        -moz-transition: all linear 200ms;
        -o-transition: all linear 200ms;
        transition: all linear 200ms;
    }
    .main-menu .menu-item {
        width: 30px;
        height: 28px;
        clear: both;
        display: inline-block;
        vertical-align: middle;
    }
    li:hover .menu-item {-webkit-filter: opacity(.5) drop-shadow(0 0 0 var(--main-color)); filter: opacity(.5) drop-shadow(0 0 0 var(--main-color));}

    /*    li:hover .dashboard {background: url('../images/sprite.png') -538px 132px; }
        li:hover .students {background: url('../images/sprite.png') -86px 132px;}
        li:hover .teacher {background: url('../images/sprite.png') -27px 132px;}
        li:hover .other-staff {background: url('../images/sprite.png') -142px 132px;}
        li:hover .accounts {background: url('../images/sprite.png') -202px 132px;}
        li:hover .payments {background: url('../images/sprite.png') -263px 25px;}
        li:hover .reports {background: url('../images/sprite.png') -262px 132px;}
        li:hover .exams {background: url('../images/sprite.png') -310px 132px;}
        li:hover .transports {background: url('../images/sprite.png') -365px 132px;}
        li:hover .parents {background: url('../images/sprite.png') -416px 132px;}
        li:hover .mail {background: url('../images/sprite.png') -466px 132px;}
        li:hover .miscellaneous { background: url('../images/sprite.png') -499px 132px; }*/
    .slide-nav {display: none;}
}

@media (min-width: 992px) and (max-width: 1500px) {
    .main-menu li:hover {
        border-bottom: 3px solid var(--main-color);
        padding-bottom: 4px !important;
    }
}

@media (max-width: 768px) {
    .dropdown-content {min-width: auto;max-width: 180px;}
    .dropdown-content a {padding-left: 10px !important;}
    .nav-menu {padding: 0px 0px 1px 13px !important;}
    .top-bar ul {text-align: left !important;}
    #menu {
        width: 2em;
        display: block;
        background: #fff;
        font-size: 1.70em;
        text-align: center;
        cursor: pointer;
        color: #34395b;
        margin: 9px 0px;
        padding: 3px 0px 0px 0px;
        border-radius: 5px;
        position: absolute;
        top: -62px;
        right: 3%;
    }
    #nav.js {display: none;}
    ul {width: 100%;list-style: none;}
    #nav li {width: 100%;border-right: none;padding: 5px 0px;}
    #nav li:hover {background-color: #efefef;padding: 5px 5px;}
    .dropdown:nth-last-child(1) {margin-bottom: 10px;}
    .login-panel {width: 50%;}
    .top-bar ul {text-align: right;}
    .top-bar .dropdown-menu.show {
        left: 0 !important;
        margin-top: 0;
        text-align: left;
        z-index: 99999;
    }
    .top-bar .col-md-2 {width: 30%;}
    .top-bar input[type="text"] {max-width: 100%;}
    .top-bar ul {padding: 0;}
    .navbar {
        padding: 0px 0px;
        background-color: #efefef !important;
    }
    .navbar-dark .navbar-nav .nav-link {text-align: left;}
    .second-header .dropdown-menu {max-width: 10rem;}
    .logo {padding: 0;}
    span.s-name {font-size: 20px;}
    .table-pagination {text-align: right;width: 100%;margin-top: 20px;}
    .table {table-layout: auto;}
    .text-right {text-align: left !important;}
    .brdcrumb .text-right {text-align: right !important;}
    .table-header .button {margin-top: 10px;}
    .nav-menu {padding: 14px 0px 0px 0px;}
    footer {position: inherit;}
    ul.tabs li {width: 100%;}
    span.success-message {float: left;}
    .c-right-sidebar img {width: 20%;}
    .no-sub-menu-active {margin: 10px 0px;width: 30% !important;}
    .mmb-20 {margin-bottom: 20px;}
    .dash-inner {margin: 20px 10px;}
    .dash-events {max-height: 500px;overflow: auto;}
    .mp-0 {padding: 0;}
    .bottom {position: relative;}
    .new-icon {right: 0px;}
    .dropdown-content {margin-top: 5px !important;}
    .flash-text {top: 23%;}
    .flash-text .modal-title {font-size: 12px;}
    .filter-main .filter-col {margin-bottom: 10px;}
    .footer-bottom-middle {position: relative;}
    .c-main-footer {display: none;}
    .chat-drop-submenu {
        transform: none !important; 
        top: 71% !important;
        max-width: max-content;
        right: 0 !important;
        left: auto !important;
    }
    .middle-inner {position: relative !important;height: 100% !important;}
    .middle-inner {max-height: 340px;}
    .c-middle h5 {text-align: center;}
    .c-middle-content {height: auto !important;}
    .dash-notice {padding: 20px 0px;margin-top: 22px;}
    .chosen-container {margin-bottom: 5px;}
    .auto-width {width: auto;}
    .folder-img {width: auto;height: auto;}
    .top-bar .container {max-width: 100%;}
    #fade-in {
        width: 1px;
        position: absolute;
        opacity: 0;
        visibility: hidden;
    }

    #fade-in.show {
        width: auto;
        z-index: 9999;
        visibility: visible;
        opacity: 1;
    }
    .c-left-sidebar {border: 1px solid #ddd;}
    .slide {
        width: 2em;
        display: block;
        background: #34385b;
        text-align: center;
        cursor: pointer;
        color: #fff;
        margin: 5px 0px 0px 0px;
        border-radius: 5px;
    }
    .c-right-sidebar {margin-top: 10px;padding-bottom: 32px;display: none;}
    .slide:hover {color: #fff;}
    .inner-pages {height: 100% !important;}
    .user-part {padding: 0;}
    .noti-menu {padding-right: 0px;}
    .noti-drop .fa-bell {margin-right: 10px;}
    .bell-icon {margin-left: -12px;}
    .brdcrumb .col-md-6 {width: 50%;}
    .plr-m-50 {padding: 0px 50px;}
    .pad-m-0 {padding: 0;}
    select.chosen {width: 100%;}
    .pr-m-0 {padding-right: 0;}
    footer {padding: 10px 0px;text-align: center;}
    .lg.avatar-upload .avatar-edit {left: 132px;bottom: 6px;}
    .top-bar .notification-menu.show {width: 300px;}
}

@media (max-width: 1500px) {
    .arrow .fa {padding-left: 0;}
}

.ui-widget.ui-widget-content {width: auto !important;z-index: 99999;}
.ui-widget.ui-widget-content {width: auto !important;}
.ui-menu .ui-menu-item {display: block;}
.ui-menu .ui-menu-item .dot {vertical-align: inherit;}
.ui-menu .ui-menu-item-wrapper {font-size: 14px;color: #9698ad;}

@media (min-width:1200px) and (max-width:1700px) {
    .main-menu.dropdown li {padding: 3px 1px 7px 1px}
}

@media (min-width:992px) and (max-width:1200px) {
    .main-menu.dropdown li {padding: 3px 7px 7px 7px;}
}

@media (min-width:992px) and (max-width:1500px) {
    .dropdown-content {margin-top: 7px !important;}
    .dropdown-content li:hover {padding-bottom: 0 !important;}
}

@media (min-width:1500px) and (max-width:1700px) {
    .main-menu li {margin: 0;}
    .left-siderbar-top {max-height: 500px;}
}

@media (min-width:1500px) {
    .main-menu a {font-size: 18px;}
    .c-right {width: 93%;}
    .main-menu li:hover {
        border-bottom: 3px solid var(--main-color);
        padding-bottom: 3px !important;
    }
    .dropdown-content {margin-top: 6px !important;}
    .main-menu .dropdown-content li:hover {padding-bottom: 0px !important;}
    .lg.avatar-upload .avatar-edit {left: 132px;bottom: 6px;}
}

@media (min-width:1700px) {
    .main-menu li {margin: 0;}
    .main-menu .dropdown-content li {margin: 0;}
    .left-siderbar-top {max-height: 510px;}
    #nav {padding-left: 12px;}
    .avatar-upload .avatar-preview {margin: 0 auto;}
    .student-m-body {padding: 0px 15px;}
    .avatar-upload .avatar-edit {left: 79px;z-index: 1;bottom: -7px;}
    td .avatar-upload .avatar-edit {left: 53px;}
    .main-menu.dropdown li {padding: 3px 12px 6px 12px;}
    .sm.avatar-upload .avatar-edit {left: 57px;}
}

@media (min-width: 576px) {
    .modal-dialog {max-width: 438px;}
}

@media (min-width: 576px) and (max-width: 768px) {
    .inner-pages {max-width: 100%;}
}

@media (min-width:1200px) and (max-width:1250px) {
    .main-menu a {font-size: 14px;}
}

@media (min-width:769px) and (max-width:1200px) {
    .c-labels {display: flex;}
    div#u-label {display: block;font-size: 0;}
    .main-menu .menu-item {display: block;margin: 0 auto;}
    .main-menu li:hover {padding-bottom: 7px !important;}
    .main-menu li:hover {border-bottom: none;}
}

@media (min-width:769px) and (max-width:992px) {
    .main-menu.dropdown li {padding: 3px 2px 10px 2px;}
    .main-menu a {font-size: 13px;}
}

@media (min-width:768px) and (max-width:1500px) {
    .chat-main {height: auto !important;}
}

@media (min-width:768px) and (max-width:1250px) {
    .dash-events {max-height: 154px;overflow: auto;}
}

@media (min-width: 1250px){
    .dash-events {max-height: 196px;overflow: auto;}
}

@media (max-width: 992px){
    .tab-responsive {overflow: auto;}
}