.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link[aria-expanded="true"] i.menu-icon{color: #fff;}
.table thead th{background: #0E3455; color: #fff;}
.new-btn{position: absolute; right: 20px; top: 15px;}
.pagination{justify-content: end; margin-top: 15px; margin-bottom: 0px;}
.radio-label label{display: block;}
.radio-label .form-check{display: inline-block; margin-right: 20px; margin-bottom: 0px;} 
.tabs-table{border-top: 1px solid #ddd; padding-top: 30px; margin-top: 30px;}
.tabs-table label select{width: 70px; height: 34px; border: 1px solid #CED4DA; border-radius: 4px; padding: 6px;}
.tabs-table label input{width: 120px; height: 34px; border: 1px solid #CED4DA; border-radius: 4px; padding: 6px;}
.select2-container{ display: block !important;}
.select2-container .select2-selection--multiple{min-height: 46px !important;}
.toasts {position: fixed; top: 2rem; right: 1rem; z-index: 1111;}
.toast-notification { width: 350px; margin-bottom: .75rem; background: #f8f8ff; border-radius: 2px; box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2);
overflow: hidden;}
.hide-toast {display: none;}
.toast-notification .toast-content {font-weight: 400; color: #000; padding: 1rem; display: flex; justify-content: flex-start; align-items: center;
gap: 0 1rem;}
.toast-notification .toast-icon {background-color: #27ae60;color: #fff;width: 30px;height: 30px; line-height: 30px; border-radius: 50%; display: flex;
justify-content: center; align-items: center; flex-shrink: 0;}
.toast-notification .toast-icon i { font-size: 1.25rem; padding-top: 5px;}
.toast-notification .toast-progress { height: 2px; width: 100%; position: absolute; bottom: 0;}
.toast-notification .toast-progress-bar { background-color: #b7b7b7;height: 2px; animation: toastProgress 3s ease-in-out forwards;}
.slide-in-slide-out { animation: slideInRight 0.3s ease-in-out forwards, slideOutRight 0.5s ease-in-out forwards 3s; transform: translateX(110%);}
.slide-in-fade-out { animation: slideInRight 0.3s ease-in-out forwards, fadeOut 0.5s ease-in-out forwards 3s; transform: translateX(110%);}
.wiggle-me { animation: wiggle 2s ease-in;}  
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; }
.line-1{width: 100%; border-top: 2px dotted #ddd; display: block; margin: 20px 0px;}
.grade-subtitle{position: relative; margin-top: 20px;}
.grade-subtitle h4{font-weight: 700; margin-bottom: 20px;}
.btn-new{border: 1px solid #00AEEF; color: #00AEEF;}
.btn-new:hover{background: #00AEEF; color: #fff;}
.btn-second{border: 1px solid #ddd; color: #000; background: #f5f5f5;}
.btn-second:hover{background: none;}
.grade-subtitle .btn-new{position: absolute; right: 10px; top: 0px;}
.subject-add-box{border: 1px solid #ddd; border-radius: 4px; padding: 10px; background: #fcfcfc;}
.subject-add-box h5{font-weight: 700;}
.subject-add-box .form-group{margin: 0px;}
.subject-add-box .form-group select, .subject-add-box .form-group input{padding: 6px; height: 34px;}
.prference-box{border: 1px solid #ddd; border-radius: 8px; position: relative; margin-bottom: 25px;}
.prference-title{padding: 10px; border-bottom: 1px solid #ddd;}
.prference-title .form-check{margin: 0px;}
.prference-title .form-check .form-check-label input[type="checkbox"] + .input-helper:before{width: 24px; height: 24px;}
.prference-title .form-check .form-check-label input[type="checkbox"]:checked + .input-helper:after{width: 24px; line-height: 24px; left: 3px;}
.prference-title .form-check .form-check-label{min-height: 24px; line-height: 24px; font-size: 16px; font-weight: 700; margin-left: 30px;}
.prefrence-copyall{position: absolute; right: 10px; top: 3px;}
.prference-body{display: block; padding: 10px;}
.prference-slot{border: 1px solid #ddd; border-radius: 6px; background: #fcfcfc; padding: 10px;}
.prference-slot h6{text-align: center; font-weight: 700;}
.prference-slot .form-group select{height: 34px;}
.pad-r5{padding-right: 5px;} .pad-l5{padding-left: 5px;}
.prference-slot .form-group{margin-bottom: 10px;}
.prference-slot .form-group textarea{padding: 10px; line-height: 20px;}
.tab-content{padding: 0px; padding-top: 10px;}
.definition-title{position: relative; margin-bottom: 30px;}
.definition-title .btn-new{position: absolute; right: 0px; top: -10px;}
.definition-title .btn-second{position: absolute; right: 90px; top: -10px;}
.mapping-tbl .table thead th:last-child, .mapping-tbl .table tbody td:last-child, .mapping-tbl .table thead th:first-child, .mapping-tbl .table tbody td:first-child{text-align: center;}
.mapping-tbl .table td i{width: 30px; height: 30px; line-height: 30px; border-radius: 50%; background: #00AEEF; color: #fff;}
.mapping-tbl .table td i:hover{background: #0E3455;}
.mapping-details h5{font-size: 20px; font-weight: 700; margin-bottom: 10px;}
.mapping-details h6{font-size: 16px; font-weight: 700; margin-bottom: 20px; cursor: pointer;}
.mapping-details p{margin-bottom: 15px;}
.mapping-details h4{font-weight: 700; margin-top: 10px; margin-bottom: 15px;}
.mapping-details h4 i{font-style: normal; width: 30px; height: 30px; line-height: 30px; text-align: center; background: #00AEEF;
display: inline-block; border-radius: 50%; color: #fff; margin-left: 5px;}
.lds-roller {display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px;}
.lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 40px 40px;}
.lds-roller div:after { content: " "; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; margin: -4px 0 0 -4px;}
.lds-roller div:nth-child(1) { animation-delay: -0.036s;}
.lds-roller div:nth-child(1):after { top: 63px; left: 63px;}
.lds-roller div:nth-child(2) { animation-delay: -0.072s;}
.lds-roller div:nth-child(2):after { top: 68px; left: 56px;}
.lds-roller div:nth-child(3) { animation-delay: -0.108s;}
.lds-roller div:nth-child(3):after { top: 71px; left: 48px;}
.lds-roller div:nth-child(4) { animation-delay: -0.144s;}
.lds-roller div:nth-child(4):after { top: 72px; left: 40px;}
.lds-roller div:nth-child(5) { animation-delay: -0.18s;}
.lds-roller div:nth-child(5):after { top: 71px; left: 32px;}
.lds-roller div:nth-child(6) { animation-delay: -0.216s;}
.lds-roller div:nth-child(6):after { top: 68px; left: 24px;}
.lds-roller div:nth-child(7) { animation-delay: -0.252s;}
.lds-roller div:nth-child(7):after { top: 63px; left: 17px;}
.lds-roller div:nth-child(8) { animation-delay: -0.288s;}
.lds-roller div:nth-child(8):after { top: 56px; left: 12px;}
.swal-footer{text-align: center !important;}
#loadPopup{display: none; position: fixed; z-index: 9999; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.6);}
.student-preference-time{padding: 20px;}
.student-preference-time label{margin-right: 10px; font-size: 14px;}
.student-preference-time table{border: 1px solid #ddd !important; text-align: center;}
.student-preference-time table thead th{border-bottom: 1px solid #ddd;}
.student-preference-time table thead th:first-child { position: sticky; left: 0; z-index: 2; border-right: 1px solid #ddd;}
.student-preference-time table tbody th { position: sticky; left: 0;  z-index: 1; border-right: 1px solid #ddd; background: #f5f5f5; padding: 10px;}
.student-preference-time table td{border: none; padding: 5px;}
.preference-selection-box{width: 100%; height: 80px; border-radius: 4px; background: #f5f5f5; border: 1px solid #ddd; position: relative;}
.preference-selection-content{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.preference-selection-content p{font-size: 11px; margin: 0px;}
.preference-selection-box i{position: absolute; right: 2px; top: 2px; color: #0E3455;}
.preference-selection-box img{position: absolute; left: 2px; top: 2px; width: 18px !important; height: 18px !important;}
.preference-selection-box.assigned, .preference-selection-box.not-available{border-color: #DF0101; background: rgba(223, 1, 1, 0.1);}
.preference-selection-box.available{border-color: #46F00A; background: rgba(71, 240, 10, 0.1);}
.preference-selection-box.selected{border-color: #00AEEF; background: rgba(0, 175, 239, 0.1);}
.map-teacherList h3{font-weight: 700; margin-bottom: 20px;}
.map-teacherList .accordion.accordion-solid-header .card .card-header a[aria-expanded="true"]{background: #0E3455;}
.map-teacherList .accordion .card-header h6 i{font-style: normal; font-weight: 700; margin-right: 20px;}
.map-teacherList .accordion .card-header h6 span{margin-right: 40px;}
.map-teacherList .preference-selection-box{height: 80px;}
.map-teacherList .table thead th{background: #00AEEF;}
.add-classTime .modal-dialog .modal-content .modal-header, .add-classTime .modal-dialog .modal-content .modal-body,
.add-classTime .modal-dialog .modal-content .modal-footer{padding: 10px;}
.add-classTime .modal-dialog .modal-content .modal-header .close span{padding-right: 5px;}
.add-classTime .form-group{margin: 0px;}
.add-classTime .modal-dialog .modal-content .modal-footer{justify-content: center;}
.change-request-time .student-preference-time{padding: 0px;}
.change-request-time .preference-selection-box.assigned{border-color: #FFC100; background: rgba(255, 191, 0, 0.1) ;} 
.dashboard-underconstruction{width: 100%; height: 65vh; position: relative; background: #fff; border-radius: 11px;}
.dashboard-underconstruction-content{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;}
.dashboard-underconstruction-content h2{font-weight: 700; margin-top: 20px;}
.student-group{position: absolute; right: 15px; bottom: 0px;}
.student-group label{font-size: 20px; font-weight: 700; margin-right: 8px;}
.student-group select{padding: 8px; border-radius: 4px;}
.count{display: inline-block; width: 40px; height: 40px; border-radius: 50%; line-height: 40px; background: #f5f5f5; text-align: center;
color: #fff; margin-left: 5px; position: absolute; right: 15px; top: 8px;}
.bgm-1{background: #00AEEF;}
.bgm-2{background: #DF0101;}
.bgm-3{background: #46F00A;}
.bgm-4{background: #DA01DF;}
.clr-OneToOne {color: #CBF3F5;}
.clr-OneToMany {color: #DFDEFD !important;}
.clr-Completed {color: #FFDEDE !important;}
.tbl-onetoOne {background: #CBF3F5 !important;}
.tbl-onetoMany {background: #DFDEFD !important;}
.tbl-Completed {background: #FFDEDE !important;}
.tbl-onetoOne button{background: #01DBDF;}
.tbl-onetoMany button{background: #6161F3;}
.tbl-Completed button{background: #ffbdbd;}
.ongoing-live label, .dashboard-livesession label{margin-right: 5px;}
.ongoing-live label i, .dashboard-livesession label i{ font-size: 24px; margin-right: 5px;}
.ongoing-live label span, .dashboard-livesession label span{ position: relative; top: -6px;}
.ongoing-live table td{text-wrap: balance; -webkit-text-wrap: balance;  word-break: break-word; padding: 10px 10px; line-height: 20px; border-color: #fff;}
.ongoing-live table th{padding: 15px 10px; border-color: #fff;}
.ongoing-live table td:first-child, .ongoing-live table td:last-child,
.ongoing-live table th:first-child, .ongoing-live table th:last-child{text-align: center;}
.ongoing-live table td button, .dashboard-livesession table td button{border: none; border-radius: 30px; color: #fff; padding: 6px; min-width: 80px;}
.not-joined td button{background: #DF0101;}
.not-joined td:nth-last-child(2){color: #DF0101;}
.session-status-count{position: absolute; right: 15px; top: 8px;}
.session-status-count .count{position: relative; right: inherit; top: inherit;}
.session-status-count label{margin-left: 20px;}
.session-status table td{ border-color: #CED4DA;}
.session-status table td select{padding: 8px;}
.dashboard-OneToOne{ color: #01DBDF;}
.dashboard-OneToMany{ color: #6161F3;}
.dashboard-NotJoin{ color: #DF0101;}
.dashboard-OneToOne button{background: #01DBDF ;}
.dashboard-OneToMany button{background: #6161F3 ;}
.dashboard-NotJoin button{background: #DF0101 ;}
.min-hight-434{height: 434px; overflow: hidden;}
.dashboard-livesession{margin-bottom: 30px;}
.dashboard-livesession table{width: 100%; border-collapse: collapse; font-size: 12px;}
.dashboard-livesession table td{padding: 10px 3px;}
.dashboard-livesession table td button{width: 100%;  min-width: 50px; padding: 4px;}
.dashboard-livesession table td img{max-width: 30px;}
.dashboard-livesession label{margin-bottom: 0px; font-size: 13px;}
.zero{margin: 0px; padding: 0px;}
.scroll{overflow-y: scroll; height: 270px;}
.scroll::-webkit-scrollbar { width: 5px;}
.scroll::-webkit-scrollbar-thumb { background-color: #ddd;}
.view-all-btn{text-align: center; margin-top: 5px;}
.view-all-btn button{border: 1px solid #00AEEF; padding: 6px 10px; border-radius: 30px; font-size: 13px; color: #00AEEF; background: none;}
.clr-cancelled{color: #DF0101 ;}
.clr-ongoing{color: #46F00A ;}
.clr-partially{color: #FFC100 ;}
.clr-expired{color: #552328;}
.clr-Pending-status{color: #6161F3;}
.clr-completed{color: #01DBDF ;}
.clr-upcoming{color: #DA01DF ;}
.c3-legend-item{font-size: 12px;}
.c3-chart-arcs-title{font-size: 22px !important; font-weight: 700;}
.dashboard-pending-request table{margin-bottom: 2px; border-radius: 6px;}
.dashboard-pending-request table td:last-child{text-align: right;}
.dashboard-pending-request table td{font-size: 14px; padding: 8px;}
.dashboard-pending-request table td h5, .dashboard-pending-request table td h6{font-size: 14px; font-weight: 700; margin: 0px;}
.dashboard-pending-request .tbl-onetoOne td h6{color: #01DBDF;}
.dashboard-pending-request .tbl-onetoMany td h6{color: #6161F3;}
.upcoming-date{width: 45px; height: 45px; background: #DA01DF; border-radius: 4px; text-align: center; color: #fff; font-size: 14px; position: absolute;
left: 0px; top: 0px;}
.upcoming-date span{font-weight: 700; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%;}
.dashboard-upcoming{position: relative; padding-left: 55px; padding-right: 8px; border-bottom: 1px dotted #ddd; padding-bottom: 5px; margin-bottom: 15px;}
.dashboard-upcoming h6{font-weight: 900;}
.dashboard-upcoming h6 span{float: right;}
.dashboard-upcoming h6 span strong{margin-left: 15px;}
.scroll2{height: 304px;}
.dashboard-homework table{font-size: 14px; border-bottom: 1px dotted #ddd; margin-bottom: 8px;}
.dashboard-homework table td button{background: none; border: 1px solid #DF0101; color: #DF0101;}
.attendance-title{position: relative; margin-bottom: 10px; padding-top: 10px;}
.attendance-left{position: absolute; left: 0px; top: 3px;}
.attendance-right{position: absolute; right: 0px; top: 3px;}
.attendance-title i{width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #00AEEF; display: block; text-align: center; line-height: 30px;
font-size: 20px;}
.attendance-title i:hover{background: #0E3455;}
.attendance-title h4{text-align: center;  font-weight: 700; margin: 0px;}
.annoncement-message{padding: 4px 0px; background: #00AEEF; margin: 10px 0px; color: #fff; height: 30px; margin-bottom: 20px;}
.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: "\e093"; font-family: "feather"; position: absolute; left: 0px; top: 0px; color: yellow;}
.time-zone{position: fixed; right: 0px; bottom: 0px; font-size: 10px;}
.profile-dp { position: relative; display: inline-block; width: 180px; height: 180px; border-radius: 50%; overflow: hidden; border: 2px dotted #00AEEF; padding: 4px; margin-bottom: 12px;}
.profile-dp img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%;}
.profile-details {  text-align: center;}
.profile-dp i { position: absolute; width: 32px; height: 32px; line-height: 32px; background: var(--white); border-radius: 50%; bottom: 4px;
left: 50%; transform: translate(-50%, 0);  color: #00AEEF; cursor: pointer;}
.file-upload {  display: none;}
.personal-details h3{border-bottom: 2px dotted #ddd; padding-bottom: 15px; margin-bottom: 20px;}
.personal-details-box{border-bottom: 1px solid #ddd; padding-bottom: 15px; margin-bottom: 20px;}
.personal-details-box h5{margin-bottom: 15px;}
.account-info{margin-top: 20px; text-align: left;}
.account-info table{width: 100%;}
.account-info table td{padding: 12px;}
.account-info table td:last-child{color: #999; cursor: pointer;}
.change-popup .modal-header, .change-popup .modal-body, .change-popup  .modal-footer{padding: 10px !important;}
.change-popup .modal-header .close{margin-right: -20px !important;}
.change-popup .form-group{margin-bottom: 12px;}
.change-popup .modal-footer button{width: 100%;}
.re-schedule{margin-top: 10px;}
.re-schedule h3{font-size: 20px;}
.tooltip { position: relative; display: inline-block; opacity: 1;    min-width: inherit;}
.tooltip .tooltiptext { visibility: hidden; width: 120px; height: 120px; background-color: #fff; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1;}
.tooltip .tooltiptext img {	width: 100%; height: 100%;}
.tooltip:hover .tooltiptext {visibility: visible;}
.dt-search{float: right;}
.dt-length{float: left;}
.dt-paging{float: right;}
.dt-info{float: left;}
.table-responsive {	overflow: hidden;	overflow-x: auto;}
.contact-num{position: relative;}
.contact-num .select2-container{position: absolute; width: 90px !important;}
.contact-num .select2-container--default .select2-selection--single{padding: 0px !important; height: 46px; background: #f5f5f5;}
.contact-num .select2-container--default .select2-selection--single span img{max-width: 20px;}
.contact-num .select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 46px;}
.contact-num input{padding-left: 80px;}
.contact-num .country-select{position: absolute; width: 70px; height: 46px; background: #f5f5f5; border: 1px solid #CED4DA;
left: 1px; border-left: none;}
.preference-delete{position: absolute; right: 2px; bottom: 2px; color: #0E3455; cursor:pointer}
#today-classes{max-height: 280px !important;}

@media (max-width: 1370px) {
	.preference-selection-box{width: 115px;}
}

@media (max-width: 767px) {
	.subject-add-box{margin-bottom: 20px;}
	.card .card-body{padding: 10px;}
	.nav-pills.nav-pills-custom .nav-link{padding: .5rem 20px;}
	.pad-r5{padding-right: 15px;}
	.pad-l5{padding-left: 15px;} 
	.prference-slot{margin-bottom: 10px;}
	h2{font-size: 24px;}
	.student-group label{font-size: 14px;}
	.student-group select{padding: 5px;}
	.count{width: 30px; height: 30px; line-height: 30px; font-size: 14px;}
	.session-status-count{position: relative; right: inherit; top: inherit;}
	.rs-zero{margin: 0px; padding: 0px;}
	.dashboard-livesession .line-1{margin-bottom: 10px;}
	.dashboard-livesession label i{font-size: 18px; margin-right: 3px;}
	.dashboard-livesession label{font-size: 12px; margin-right: 3px;}
	.scroll{width: 100%; overflow-x: auto; display: block;}
    .dashboard-livesession table td{white-space: nowrap; padding: 10px 8px;}
	.min-hight-434{height: inherit;}
	.c3-legend-item{font-size: 14px;}
	.dashboard-pending-request table td, .dashboard-pending-request table td h5, .dashboard-pending-request table td h6{font-size: 12px;}
	.dashboard-pending-request table td{padding: 9px 8px;}
	.dashboard-upcoming h6 span{float: inherit; display: block; font-weight: 100; font-size: 13px;}
	.dashboard-upcoming{padding-left: 50px;}
	.dashboard-upcoming h6{line-height: 20px;}
	.btn-new, .btn-second{padding: 10px 20px;}
	.definition-title .btn-second{right: 75px;}
	.personal-details{margin-top: 20px;}
	.definition-title .btn-new{position: relative; top: auto;}

}

@keyframes slideInRight { 
	0% { transform: translateX(110%); }
	75% { transform: translateX(-10%); }
	100% { transform: translateX(0%); }
}

@keyframes slideOutRight { 
	0% { transform: translateX(0%); }
	25% { transform: translateX(-10%); }
	100% { transform: translateX(110%); }
}
  
@keyframes fadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes toastProgress {
	0% { width: 100%; }
	100% { width: 0%; }
}

@keyframes wiggle {
	0%, 7% { transform: rotateZ(0); }
	15% { transform: rotateZ(-13deg); }
	20% { transform: rotateZ(9deg); }
	25% { transform: rotateZ(-10deg); }
	30% { transform: rotateZ(7deg); }
	35% { transform: rotateZ(-2deg); }
	40%, 100% { transform: rotateZ(0); }
}

@keyframes lds-roller {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
  }


