body.body-fixed {
    overflow: hidden;
}

.btn {
    min-width: 125px;
    min-height: 38px;
}

.spinner-container {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    padding-top: 350px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.template-wrapper {
    padding: 45px;
}

.formHeader {
    color: #71cde0;
    text-transform: uppercase;
    font-weight: 500;
}

.formHeaderNoCaps {
    text-transform: none;
}

.nav.nav-tabs {
    background-color: transparent;
    background-image: none;
    border-radius: 0px;
}

.flex-full {
    display: flex;
    flex: 1 1;
    height: 100%;
}

.profileImg img {
    border-radius: 5%;
    padding: 2px;
}

.navbar {
    z-index: 100 !important;
}

.sb-sidenav .sb-sidenav-menu .nav .sb-sidenav-menu-heading {
    padding: 1.75rem 0.75rem 0rem;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
}

.sb-sidenav-menu-subheading {
    padding-top: 5px;
    color: #fff !important;
    padding-left: 0.75rem;
}

.sb-sidenav-menu .sb-sidenav-menu-sub-heading {
    padding: 0rem 0.75rem 0.75rem;
    font-size: 0.85rem;
    color: #fff;
}

.sb-sidenav-menu .sidenav-text {
    display: flex;
    align-items: center;
    padding-bottom: 0.25rem;
    position: relative;
    color: #fff;
    padding-left: 0.75rem;
    padding-top: 0.45rem;
}

/* form wizards */
div.option-btn-wrapper {
    display: block;
    width: 100%;
    line-height: 28px;
    padding-left: 39px;
    position: relative;
    margin-bottom: 15px;
    cursor: pointer;
}

div.option-btn-wrapper:hover .label {
    color: #2e2e4e;
}

div.option-btn-wrapper span.option-icon {
    display: block;
    position: absolute;
    border-radius: 50%;
    border: 1px solid #7373b5;
    left: 2px;
    top: 2px;
    height: 24px;
    width: 24px;
}

div.option-btn-wrapper .label {
    color: #71cde0;
    text-decoration: none;
    background-color: transparent;
}

div.option-btn-wrapper.active span.option-icon::after {
    content: '';
    display: block;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background-color: #7373b5;
    z-index: 1;
    left: 4px;
    top: 4px;
    position: absolute;
}

.container .row {
    margin-right: 0;
    margin-left: 0;
}

.container .step-form .check-box-wrapper {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    padding: 5px 0px;
}

#gradeSubjectContainer .grade-subject-container .check-box-wrapper {
    width: 49%;
}

.grade-subject-inner-container {
    padding: 25px 5px;
}

.container .step-form .check-box-wrapper.add-more-checkbox {
    margin-bottom: 35px;
}

.container .step-form .check-box-wrapper.add-more-checkbox:hover a {
    font-weight: bold;
}

.container .step-form .check-box-wrapper label {
    font-size: 12px;
    cursor: pointer;
    padding: 5px 5px;
}

.container .step-form .custom-control.custom-checkbox {
    margin-bottom: 35px;
    padding-left: 10px;
}

.step-form.card {
    background-color: #fff;
}

.container .step-form .code-contianer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 80px;
    width: 100%;
    margin-bottom: 35px;
}

.container .step-form .char-input {
    display: flex;
    height: 65px;
    align-items: center;
    justify-content: center;
    margin: 5px;
}

.container .step-form .char-input .verify-code-input {
    font-size: 41px;
    color: #6eacd0;
    font-weight: bold;
    padding: 0px;
    margin: 0;
    display: block;
    text-align: center;
}

.char-input input.verify-code-input:focus-visible {
    outline: #6eacd0 auto 1px;
}

.row.two-btn-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.btn-flex {
    display: flex;
    flex: 1;
    justify-content: center;
}

.btn-text {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

.row.two-btn-row .btn-flex:first-child {
    margin-right: 10px;
}

.btn-secondary.disabled,
.btn-secondary:disabled,
.btn-primary.disabled,
.btn-primary:disabled {
    opacity: 0.6;
    cursor: default;
}

.error-msg {
    padding: 10px 0;
    color: #b94e4e;
}

.form-control.has-error {
    border: 2px solid #b94e4e;
}

.form-checkbox-wrapper {
    width: 24px;
    height: 24px;
}

.form-checkbox-wrapper checkbox {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.checkbox__svg {
    width: 100%;
    height: 100%;
}

.checkbox.-changeBg .checkbox__border {
    stroke: var(#71cde0);
}

.checkbox.-changeBg .checkbox__border {
    stroke: var(#71cde0);
}

.checkbox__check {
    --checkbox-border-width: var(--checkbox-border-width-active);
    stroke: var(#71cde0);
}

.form-control-checkbox {
    font-size: 14px;
    font-weight: normal;
    line-height: 160%;
    display: grid;
    grid-template-columns: 1em auto;
    gap: 20px;
    cursor: pointer;
}

.form-control-checkbox--disabled {
    color: #ccc;
    cursor: not-allowed;
}

input[type='checkbox'].custom-checkbox {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    font: inherit;
    color: #71cde0;
    width: 25px;
    height: 25px;
    border: 1px solid #71cde0;
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

input[type='checkbox'].custom-checkbox::before {
    content: '';
    width: 12px;
    height: 12px;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 15px 15px #7373b5;
    background-color: CanvasText;
}

input[type='checkbox'].custom-checkbox:checked::before {
    transform: scale(1);
}

input[type='checkbox'].custom-checkbox:focus {
    outline: max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);
}

.light-blue-bold {
    color: #6eacd0;
    font-weight: bold;
}

.form-group label {
    text-decoration: none;
    background-color: transparent;
    padding-left: 5px;
    color: #71cde0;
}

.form-group label.show {
    color: #71cde0;
}

.form-group label {
    text-decoration: none;
    background-color: transparent;
    padding-left: 5px;
    color: #71cde0;
    margin-bottom: 2px;
}

.form-group label.show {
    color: #71cde0;
}

.form-group label.form-check-label {
    padding-left: 15px;
    line-height: 23px;
    cursor: pointer;
    padding-right: 5px;
}

.form-group .form-check-input {
    left: auto;
    height: 18px;
}

.form-group {
    position: relative;
}

.preview-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.preview-row .form-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wizard-container .preview-row .form-group .form-preview-value {
    font-size: 14px;
}

.row.two-btn-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.btn-flex {
    display: flex;
    flex: 1;
    justify-content: center;
}

.scroll-wrapper {
    display: block;
    height: 100%;
    max-height: 600px;
    min-height: 445px;
    padding-bottom: 20px;
    padding-right: 10px;
    padding-top: 20px;
    overflow-y: auto;
}

.scroll-wrapper.lock-scroll {
    overflow-y: visible;
}

.hidden-form-wrapper {
    display: none;
    padding-top: 20px;
}

.hidden-form-wrapper.show {
    display: block;
}

.hidden-form-wrapper .btn-secondary {
    margin-left: 15px;
}

.btn-link {
    color: #71cde0;
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;
}

button.btn-cancel {
    color: #999;
    background-color: #ffffff;
    border: 1px solid #ccc !important;
    padding: 10px 20px !important;
    border-radius: 0.4rem !important;
}

button.btn-cancel:hover {
    color: #fff;
    background-color: #ccc;
    border: 1px solid #ccc !important;
    padding: 10px 20px !important;
    border-radius: 0.4rem !important;
}

.add-form-inner-wrapper {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 514px;
}

.btn-primary.flex-btn.generate-classess {
    min-width: 125px;
}

.btn-link-logout {
    color: #212529;
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;
    line-height: 28px;
    font-weight: 600;
}

.btn-link-logout .svg-inline--fa {
    margin-right: 5px;
}

label.btn-secondary {
    color: #fff;
    background-color: #71cde0;
}

.error-msg .logo-upload-error-row p {
    display: inline;
    padding-left: 5px;
    width: 100%;
}

.error-msg .logo-upload-error-row {
    display: block;
    float: left;
    padding: 5px 5px;
}

.form-group .file-name-label {
    display: block;
    width: 100%;
    padding: 5px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.vertical-btn-col {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.vertical-btn-col .btn {
    margin-bottom: 10px;
}

.wizard-container .form-preview-value {
    display: block;
    width: 80%;
    padding: 2px 6px 12px 6px;
    font-size: 16px;
    color: #000;
    font-weight: 700;
}

.wizard-container .warning-header {
    color: #dc3545;
    font-size: 24px;
}

.wizard-container .warning-p {
    font-size: 16px;
    padding-left: 8px;
}

.wizard-container .warning-step .form-group label {
    color: #dc3545;
}

/** success wrapper on student save **/
.success-wrapper-bulk-upload,
.success-wrapper {
    width: 100%;
    padding: 10px;
    position: absolute;
    background: #fff;
    bottom: 255px;
    left: -450px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.icon-wrapper {
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

.icon-wrapper .fa-check-circle {
    font-size: 23px;
    color: #71cde0;
}

.success-label {
    color: #71cde0;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
}

.error-icon-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 165px;
    margin-bottom: 22px;
    border-radius: 8px;
}

.error-icon-wrapper .icon {
    color: #6b96c5;
    font-size: 83px;
}

.error-message-p {
    color: #676bb0;
    padding-top: 15px;
}

.message-wrapper {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.message-list-card:hover {
    cursor: pointer;
}

.message-list-card:hover .message-list-card-row-top {
    opacity: 0.6;
}

.message-list-card:hover .message-list-card-row-bottom {
    display: block;
    opacity: 1;
}

.message-list-card:hover .message-list-card-row-bottom .icon-delete-message:hover {
    color: #141d34;
}
.message-list-card:hover .message-list-card-row-bottom .icon-message-unread:hover {
    color: #141d34;
}
.message-list-card:hover .message-list-card-row-bottom .icon-message-read:hover {
    color: #141d34;
}

.wizard-container.container .error-icon-wrapper {
    height: 432px;
}

textarea.form-control {
    height: auto;
    padding: 15px;
}

.bulk-upload-form,
.upload-form {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.form-group.input-group .btn-secondary {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0px !important;
}

.form-group.input-group label.group-label {
    display: block;
    width: 100%;
}

.child-add-container,
.parents-add-container {
    display: block;
    width: 100%;
}

.child-add-label,
.parents-add-label {
    display: inline-block;
    color: #71cde0;
    padding: 25px 5px;
    font-weight: 600;
}

.child-add-container .children-add-id-container .badge.badge-pill.badge-info,
.parents-add-container .parents-add-id-container .badge.badge-pill.badge-info {
    padding: 6px 12px;
    font-size: 12px;
    margin-right: 4px;
}

.child-id-icon,
.parent-id-icon {
    margin-left: 5px;
    cursor: pointer;
    font-size: 12px;
}

.card-header h5 strong {
    text-transform: capitalize !important;
}

.row.upload-bulk-row {
    margin-bottom: 35px;
}

/* Scroll bar stylings */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--lightestgrey);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

.social-media-icon-row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    border-top: solid 1px #f2f2f2;
    margin-top: 25px;
    border-bottom: solid 1px #f2f2f2;
}
.social-media-icon-wrapper {
    display: flex;
    flex: 1 1;
    justify-content: center;
    padding: 20px;
}
.social-media-icon {
    display: block;
    width: 100%;
    max-width: 44px;
    cursor: pointer;
}

.profile-info-row,
.school-info-row {
    line-height: 30px;
    font-size: 14px;
}

.period-table-option-wrapper {
    padding: 35px 0px;
}

.period-table-container {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    padding: 35px 0px;
}

.period-table-row {
    display: flex;
    flex: 1 1;
    flex-direction: row;
}

.period-table-col {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    /* border:1px solid #d900ff; */
}

.period-table-cell {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    padding: 15px 10px;
    position: relative;
    border: 1px solid #6a87be;
    max-height: 96px;
}

.period-table-cell-row {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f2f2f2;
    font-size: 10px;
}

.period-table-cell-row-label {
    font-weight: 600;
    flex: 1;
}

#toolbar .row {
    flex-direction: row;
    justify-content: space-between;
}

.class-group-cell {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.class-group-cell-label {
    width: 100%;
    display: block;
    text-align: center;
}

.class-group-yellow {
    background-color: #ffff00a8;
    border: 2px solid yellow;
}

.class-group-blue-one {
    background-color: #a2ecff;
    border: 2px solid #a2ecff;
}

.class-group-blue-two {
    background-color: #67cae4;
    border: 2px solid #71cde0;
}

.class-group-blue-three {
    background-color: #4596aa;
    border: 2px solid #3d8391;
}

.class-group-blue-four {
    background-color: #5981cf;
    border: 2px solid #5981cf;
}

.class-color-shade-one {
    background-color: #a5b0cc;
    color: #fff;
}

.class-color-shade-two {
    background-color: #5a96ad;
    color: #fff;
}

.class-color-shade-three {
    background-color: #284b59;
    color: #fff;
}

.class-color-shade-four {
    background-color: #19426f;
    color: #ffff;
}

.class-color-shade-five {
    background-color: #2276fd;
    color: #ffff;
}

.class-color-shade-six {
    background-color: #99c0ff;
}

.class-color-shade-seven {
    background-color: #00ffee;
}

.class-color-shade-eight {
    background-color: #4b9590;
    color: #ffff;
}

.class-color-shade-nine {
    background-color: #2a605d;
    color: #ffff;
}

.class-color-shade-ten {
    background-color: #141d34;
    color: #ffff;
}

.header-wrapper {
    display: flex;
    flex-direction: row;
    padding: 20px 14px 5px 0px;
}
.header-col1 {
    display: flex;
    flex: 3;
    flex-direction: column;
}

.header-col1 {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.dropdown-wrapper .error-msg {
    display: inline-block;
    padding-left: 5px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

/* class group styling */
.class-group-tools-section .form-group {
    display: inline-block;
    width: 100%;
}

.class-group-btns-container .btn-class-group-tools {
    border: 1px solid #2b2d48 !important;
    width: 100%;
    margin-bottom: 5px;
}

.class-group-tools-section label {
    color: #5a9db0;
    font-size: 14px;
    font-weight: 600;
}

.class-group-tools-section h4 {
    color: #5a9db0;
    font-size: 14px;
    font-weight: 600;
    padding: 25px 0px;
}

.period-table-container.active .period-table-row {
    border: 2px solid #393b5f;
}

.period-table-container.active .period-table-cell.type-break,
.period-table-container.active .period-table-cell.type-registration {
    background-color: #f2f2f2f2;
    cursor: not-allowed;
}

.period-table-container.active .period-table-cell.type-period {
    cursor: pointer;
}

.period-table-container.active .period-table-cell.type-period:hover {
    background-color: #70c3dba3;
}

.btn.btn-secondary.btn-class-group-tools.active {
    background-color: #6870b3;
}

.axon-h5 {
    font-size: 14px;
    padding-left: 5px;
    color: #527c9c;
}

.delete-icon {
    position: absolute;
    right: 2px;
    top: 2px;
    font-size: larger;
    font-weight: 800;
    display: block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    visibility: hidden;
}

.class-group-cell.class-group-blue-one:hover .delete-icon {
    visibility: visible;
}

.user-filtered-list {
    display: flex;
    flex-direction: column;
    padding: 15px 0px;
}

.page-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    justify-content: flex-start;
    margin-bottom: 24px;
}

.search-card-container {
    display: flex;
    flex-direction: row;
    flex: 1 1 calc(50% - 1rem);
    padding: 25px 10px;
    border: 1px solid #f2f2f2;
    background-color: white;
    transition: background-color 0.3s ease;
    border-radius: 16px;
    min-width: 300px;
}

.search-card-container:hover {
    background-color: #f2f2f2;
    cursor: pointer;
}

.search-card-container .uneven {
    flex: 0 0 calc(50% - 1rem);
}

.profilePicSm {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    width: 80%;
    justify-content: center;
    align-items: center;
}

.card-detail-container {
    display: flex;
    flex: 4;
    flex-direction: column;
    padding: 15px 5px;
    min-height: 125px;
}

.parent-avg-value {
    color: #17a2b8;
}

.text-white .card-detail-container {
    color: #333;
}

.card-detail-container .teacher-email-label {
    margin-bottom: 6px;
}

.card-detail-container ul {
    padding: 0px;
    margin: 0px;
}

.card-detail-container li {
    float: left;
    margin-right: 15px;
    margin-bottom: 6px;
    width: 100%;
    display: block;
    position: relative;
    text-align: left;
}

.full-name-header h4 {
    font-size: 16px;
    font-weight: 800;
    color: #56759c;
}

.search-card-container .profilePicSm img {
    width: 95px;
    min-height: 90px;
    border-radius: 100%;
    border: thin solid #fff;
    box-shadow: 2px 2px 5px #0006;
    padding: 2px;
}

.group-date-input-row {
    display: flex;
    flex-direction: row;
}

.group-date-input-row .input_cell {
    display: flex;
    flex: 1;
}

.group-date-input-row .input_cell:first-child {
    padding-right: 10px;
}

.add-event-form .inner-form-wrapper {
    padding-bottom: 120px;
}

.dropdown-header-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 25px;
}

.dropdown-header-col {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.dropdown-header-col-1 {
    flex: 1;
}
.dropdown-header-col-3 {
    flex: 3;
}

.dropdown-header-col-5 {
    flex: 5;
}

.dropdown-header-row .dropdown-wrapper .dropdown-input {
    max-width: 247px;
}

.dropdown-header-label {
    font-size: 14px;
    font-weight: 600;
    color: #527c9c;
    padding-left: 5px;
}

.message-list-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* border: 1px solid #ccc; */
    border-radius: 15px;
    padding: 25px 15px;
    background-color: #f2f2f2;
}

.message-list-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* border: 1px solid #ccc; */
    border-radius: 15px;
    padding: 25px 15px;
    background-color: #f4f6f8;
}

.message-search-wrapper {
    position: relative;
    display: block;
    padding-bottom: 25px;
    border-bottom: 1px solid #e4e7ee;
}

.message-search-input {
    border-radius: 15px;
    background-color: #e4e8ee;
    /* border: 1px #ccc solid; */
    font-size: 14px;
    /* color: #ccc; */
}

.message-search-wrapper .fa-search {
    display: block;
    position: absolute;
    font-size: 18px;
    right: 10px;
    top: 16px;
    color: #ccc;
}
.message-list-template-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* border: 1px solid #1eff9a; */
    margin-top: 25px;
}

.message-list-card-row-top {
    display: flex;
    flex-direction: row;
}

.messages-btn-row {
    width: 100%;
    border-bottom: 1px solid #f2f2f2;
    max-height: 65px;
}

.message-avitar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.message-avatar-img {
    display: block;
    height: 85px;
    border-radius: 40px;
    width: 100%;
    background-color: #fff;
}

.message-list-card.unread-msg .message-avatar-img {
    border: 1px solid #e7e7e7;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.message-list-card {
    display: flex;
    padding: 15px 10px;
    margin-bottom: 15px;
    flex-direction: column;
    position: relative;
}

.message-list-card.unread-msg {
    background-color: #fff;
    box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px;
    padding-bottom: 25px;
    border-radius: 8px;
}

.message-list-card.read-msg {
    border-bottom: 1px solid #e4e7ee;
    padding-bottom: 25px;
}

.message-list-card-row-bottom {
    display: none;
    position: absolute;
    right: 6px;
    bottom: 5px;
}

.icon-delete-message,
.icon-message-unread,
.icon-message-read {
    font-size: 17px;
    margin: 5px;
    color: #6eacd0;
}

.msg-flex-col {
    flex-direction: column;
}

.message-content {
    display: flex;
    flex-direction: column;
    flex: 3;
    /* border:1px solid yellow; */
    padding: 0px 15px;
}

.message-extra-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
}

.message-from-header {
    font-size: 12px;
    font-weight: 600;
}

.message-from-header,
.message-from-subject {
    font-size: 12px;
    font-weight: 600;
}

.message-from-subject {
    margin-bottom: 16px;
}

#searchSection .user-filtered-list {
    min-height: 1112px;
}

.pagination-btns-wrapper {
    position: absolute;
    bottom: 38px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.pagination-btns-wrapper ul.pagination {
    margin-bottom: 0px;
}

.no-users-found {
    color: #333;
    font-size: 14px;
    margin: 35px auto;
}

.school-logo img {
    max-width: 100%;
}

#timeTableContainer .period-table-cell.type-registration {
    background-color: #f2f2f2;
}

#timeTableContainer .period-table-cell.type-break {
    background-color: #5681a2;
    color: #fff;
}

#timeTableContainer .period-table-cell.type-break .period-table-cell-row {
    border: none;
}

#timeTableContainer .period-table-cell.type-break .period-table-cell-row-label {
    font-size: 16px;
    text-transform: uppercase;
    text-align: center;
}

#timeTableContainer .class-group-cell {
    bottom: auto;
    left: 5px;
    right: 5px;
    top: 10px;
    border-radius: 5px;
    padding: 5px;
}

#timeTableContainer .period-table-cell {
    max-height: none;
}

#timeTableContainer .period-table-cell.type-period {
    padding: 65px 10px 10px 10px;
}

#timeTableContainer .period-table-col .day-label {
    font-size: 18px;
    font-weight: 500;
    padding: 5px 25px 5px 12px;
    background-color: #6fb7d5;
    border: 1px solid #96afbe;
    color: #fff;
}
#editTaskContainer .cal-headers-row .cal-col,
#taskCreateContainer .cal-headers-row .cal-col {
    height: 35px;
    justify-content: center;
    align-items: center;
}
#editTaskContainer .cal-col,
#taskCreateContainer .cal-col {
    height: 65px;
    padding: 0px;
    margin: 0px;
    position: relative;
}

#addTaskCalendar .event-day-container.event-cat-999,
#editTaskContainer .event-day-container.event-cat-999,
#taskCreateContainer .event-day-container.event-cat-999 {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #71cde1;
    opacity: 0.5;
}

.search-card-container .class-value {
    text-decoration: none;
    background-color: transparent;
    padding-left: 5px;
    color: #71cde0;
    margin-bottom: 2px;
}

.pad-right-15 {
    padding-right: 15px;
}

.accordion-header {
    padding-right: 15px;
    position: relative;
    cursor: pointer;
}

.accordion-header .chevron-icon-wrapper {
    display: block;
    position: absolute;
    height: 16px;
    width: 16px;
    font-size: 16px;
    color: #71cde0;
    top: 12px;
    right: 15px;
}

[aria-expanded='false'] .chevron-icon-wrapper .is-closed,
[aria-expanded='true'] .chevron-icon-wrapper .is-open {
    display: none;
}

[aria-expanded='true'] .chevron-icon-wrapper .is-closed,
[aria-expanded='false'] .chevron-icon-wrapper .is-open {
    display: block;
}
.teacher-student-test-Grid,
.teacher-tasks-Grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 25px 0px;
}

.teacher-student-test-card,
.student-tests-card,
.teacher-tasks-card {
    padding: 20px 15px;
    width: 49%;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 15px;
}

.card-left {
    margin-left: 0px;
}

.card-right {
    margin-right: 0px;
}

.teacher-tasks-code-wrapper {
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    flex: 5;
    justify-content: flex-end;
    align-items: flex-start;
}

.task-code-label {
    font-size: 14px;
    color: #71cde0;
}

.task-code {
    font-size: 14px;
    font-weight: bold;
    color: #5887a5;
}

.teacher-tasks-header {
    font-size: 22px;
    color: #5887a5;
    display: block;
    width: 100%;
    margin-bottom: 15px;
}

.teacher-tasks-description {
    font-size: 12px;
    color: #868686;
    display: block;
    width: 100%;
    margin-bottom: 15px;
}

.teacher-tasks-pill-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
}

.teacher-tasks-pill-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.teacher-tasks-pill-wrapper {
    display: flex;
    flex: 0.5;
    justify-content: space-between;
    align-items: center;
}

.teacher-tasks-pill-label {
    font-size: 12px;
    line-height: 14px;
    color: #71cde0;
    margin-right: 5px;
}

.teacher-tasks-pill {
    display: flex;
    width: 35px;
    height: 35px;
    border-radius: 35px;
    background-color: #d9d9d9;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.teacher-tasks-pill-val {
    font-size: 10px;
    color: #000;
}

.mr5 {
    margin-right: 5px;
}

.mr10 {
    margin-right: 10px;
}

.header-back-icon {
    display: block;
    width: 30px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
}

.task-date-label {
    font-size: 12px;
    display: flex;
    flex: 3;
    color: #71cde0;
}

.task-date {
    font-size: 12px;
    display: flex;
    flex: 4;
    padding-left: 5px;
}

.teacher-task-top-section {
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
}

.teacher-task-date-wrapper {
    display: flex;
    flex-direction: column;
    flex: 6;
}

.teacher-tasks-start-date-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.teacher-tasks-end-date-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.file-wrapper {
    display: inline-block;
}

.file-icon {
    display: block;
    font-size: 32px;
    width: 34px;
    height: 49px;
    border: 1px solid #bfbfbf;
    text-align: center;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
    color: #d3d3d3;
}

.file-name-label {
    color: #3d3d3d;
    font-size: 12px;
}

.card-header.has-toolbar,
.card-header.has-back-icon {
    display: flex;
    align-items: center;
}

.card-header.has-back-icon h6 {
    margin-bottom: 4px;
}

.teacher-student-tasks-card {
    width: 49%;
    display: block;
    margin-bottom: 15px;
}

.teacher-student-task-body-section {
    display: flex;
    flex: 1;
}

.teacher-student-thumbnail-wrapper .profilePicSm img {
    width: 95px;
}

.teacher-student-thumbnail-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.teacher-student-content-wrapper {
    margin-bottom: 25px;
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

h1.teacher-student-full-name {
    font-size: 22px;
}

.teacher-student-content-wrapper ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}

.teacher-student-content-wrapper ul li {
    margin-left: 0px;
    display: block;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 5px;
}

.teacher-student-label {
    font-size: 14px;
    color: #71cde0;
}

.student-tasks-card {
    max-width: 49%;
    margin-bottom: 25px;
}

.teacher-student-value {
    font-size: 14px;
    color: #3d3d3d;
}

.student-task-top-section {
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
}

.student-task-date-wrapper,
.student-tasks-end-date-wrapper {
    display: flex;
    flex: 2;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.student-tasks-code-wrapper {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: flex-end;
}

.task-card-student-detail-row {
    display: flex;
    flex: 1;
    flex-direction: row;
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 15px;
}

.task-card-student-detail-cel {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.task-card-detail-label,
.task-card-detail-status-label {
    color: #71cde0;
}

.task-card-detail-status-val {
    color: #d4333b;
    font-size: 16px;
    text-transform: capitalize;
}

.student-tasks-header {
    color: #5880a2;
    font-size: 22px;
}

.cel-flex-end {
    justify-content: center;
    align-items: flex-end;
}

.student-status-unread {
    border-radius: 15px;
    border: 2px solid black;
}

.student-status-read {
    border-radius: 15px;
    border: 2px solid #6da9cf;
}

.student-status-in-progress {
    border-radius: 15px;
    border: 1px solid #6fbfd9;
}

.student-status-ready-for-review-teacher,
.student-status-ready-for-review-student {
    border-radius: 15px;
    border: 1px solid #ff9200;
}

.student-status-completed {
    border-radius: 15px;
    border: 1px solid #7dc05d;
}

.student-status-done {
    border-radius: 15px;
    border: 1px solid #346b1a;
}

.student-status-unread .task-card-detail-status-val,
.teacher-student-tasks-card.student-status-unread .teacher-student-value.student-task-status-val {
    color: black;
}

.student-status-unread .btn-task-student-detail,
.teacher-student-tasks-card.student-status-unread .btn-task-student-task-detail {
    background-color: black;
}

.student-status-unread .btn-task-student-detail.btn-secondary:active,
.teacher-student-tasks-card.student-status-unread .btn-task-student-task-detail:active {
    background-color: black;
    opacity: 0.6;
}

.student-status-unread .btn-task-student-detail.btn-secondary:focus,
.teacher-student-tasks-card.student-status-unread .btn-task-student-task-detail:focus {
    background-color: black;
    border: none !important;
    box-shadow: none !important;
}

.student-status-unread .btn-task-student-detail.btn-secondary:focus,
.teacher-student-tasks-card.student-status-unread .btn-task-student-task-detail:focus {
    background-color: black;
    border: none !important;
    box-shadow: none !important;
}

.student-status-read .task-card-detail-status-val,
.teacher-student-tasks-card.student-status-read .teacher-student-value.student-task-status-val {
    color: #6da9cf;
}

.student-status-read .btn-task-student-detail.accordion-header,
.teacher-student-tasks-card.student-status-read .btn-task-student-task-detail {
    background-color: #6da9cf;
}

.student-status-read .btn-task-student-detail.btn-secondary:active,
.teacher-student-tasks-card.student-status-read .btn-task-student-task-detail:active {
    background-color: #6da9cf;
    opacity: 0.6;
}

.student-status-read .btn-task-student-detail.btn-secondary:focus,
.teacher-student-tasks-card.student-status-read .btn-task-student-task-detail:focus {
    background-color: #6da9cf;
    border: none !important;
    box-shadow: none !important;
}

.student-status-in-progress .task-card-detail-status-val,
.teacher-student-tasks-card.student-status-in-progress .teacher-student-value.student-task-status-val {
    color: #6fbfd9;
}

.student-status-in-progress .btn-task-student-detail,
.teacher-student-tasks-card.student-status-in-progress .btn-task-student-task-detail {
    background-color: #6fbfd9;
}

.student-status-in-progress .btn-task-student-detail.btn-secondary:active .teacher-student-tasks-card.student-status-in-progress .btn-task-student-task-detail:active {
    background-color: #6fbfd9;
    opacity: 0.6;
}

.student-status-in-progress .btn-task-student-detail.btn-secondary:focus,
.teacher-student-tasks-card.student-status-in-progress .btn-task-student-task-detail:focus {
    background-color: #6fbfd9;
    border: none !important;
    box-shadow: none !important;
}

.student-status-ready-for-review-teacher .task-card-detail-status-val,
.student-status-ready-for-review-student .task-card-detail-status-val,
.teacher-student-tasks-card.student-status-ready-for-review-student .teacher-student-value.student-task-status-val,
.teacher-student-tasks-card.student-status-ready-for-review-teacher .teacher-student-value.student-task-status-val {
    color: #ff9200;
}

.student-status-ready-for-review-teacher .btn-task-student-detail,
.student-status-ready-for-review-student .btn-task-student-detail,
.teacher-student-tasks-card.student-status-ready-for-review-student .btn-task-student-task-detail,
.teacher-student-tasks-card.student-status-ready-for-review-teacher .btn-task-student-task-detail {
    background-color: #ff9200;
}

.student-status-ready-for-review-teacher .btn-task-student-detail.btn-secondary:active,
.student-status-ready-for-review-student .btn-task-student-detail.btn-secondary:active,
.teacher-student-tasks-card.student-status-ready-for-review-student .btn-task-student-task-detail:active,
.teacher-student-tasks-card.student-status-ready-for-review-teacher .btn-task-student-task-detail:active {
    background-color: #ff9200;
    opacity: 0.6;
}

.student-status-ready-for-review-teacher .btn-task-student-detail.btn-secondary:focus,
.student-status-ready-for-review-student .btn-task-student-detail.btn-secondary:focus,
.teacher-student-tasks-card.student-status-ready-for-review-student .btn-task-student-task-detail:active,
.teacher-student-tasks-card.student-status-ready-for-review-teacher .btn-task-student-task-detail:active {
    background-color: #ff9200;
    border: none !important;
    box-shadow: none !important;
}

.student-status-completed .task-card-detail-status-val,
.teacher-student-tasks-card.student-status-completed .teacher-student-value.student-task-status-val {
    color: #7dc05d;
}

.student-status-completed .btn-task-student-detail,
.teacher-student-tasks-card.student-status-completed .btn-task-student-task-detail {
    background-color: #7dc05d;
}

.student-status-completed .btn-task-student-detail.btn-secondary:active,
.teacher-student-tasks-card.student-status-completed .btn-task-student-task-detail:active {
    background-color: #7dc05d;
    opacity: 0.6;
}

.student-status-completed .btn-task-student-detail.btn-secondary:focus,
.teacher-student-tasks-card.student-status-completed .btn-task-student-task-detail:focus {
    background-color: #7dc05d;
    border: none !important;
    box-shadow: none !important;
}

.student-status-done .task-card-detail-status-val,
.teacher-student-tasks-card.student-status-done .teacher-student-value.student-task-status-val {
    color: #346b1a;
}

.student-status-done .btn-task-student-detail,
.teacher-student-tasks-card.student-status-done .btn-task-student-task-detail {
    background-color: #346b1a;
}

.student-status-done .btn-task-student-detail.btn-secondary:active,
.teacher-student-tasks-card.student-status-done .btn-task-student-task-detail:active {
    background-color: #346b1a;
    opacity: 0.6;
}

.student-status-done .btn-task-student-detail.btn-secondary:focus,
.teacher-student-tasks-card.student-status-done .btn-task-student-task-detail:focus {
    background-color: #346b1a;
    border: none !important;
    box-shadow: none !important;
}

.student-status-forced-closed {
    border-radius: 15px;
    border: 1px solid #8d1f1f;
}

.student-status-forced-closed .task-card-detail-status-val,
.teacher-student-tasks-card.student-status-forced-closed .teacher-student-value.student-task-status-val {
    color: #8d1f1f;
}

.student-status-forced-closed .btn-task-student-detail,
.teacher-student-tasks-card.student-status-closed .btn-task-student-task-detail {
    background-color: #8d1f1f;
}

.student-status-forced-closed .btn-task-student-detail.btn-secondary:active,
.teacher-student-tasks-card.student-status-closed .btn-task-student-task-detail:active {
    background-color: #8d1f1f;
    opacity: 0.6;
}

.student-status-forced-closed .btn-task-student-detail.btn-secondary:focus,
.teacher-student-tasks-card.student-status-closed .btn-task-student-task-detail:focus {
    background-color: #8d1f1f;
    border: none !important;
    box-shadow: none !important;
}

.task-form-label {
    font-size: 12px;
    margin-bottom: 0px;
    font-weight: 800;
}

.task-tab-title {
    color: #71cde0;
    text-transform: capitalize;
    font-weight: 700;
}

.task-description {
    font-size: 14px;
}

.teacher-task-file,
.student-task-file {
    display: flex;
    flex: 1 1;
    justify-content: center;
    cursor: pointer;
}
.flex-teacher-row,
.flex-student-row {
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
}
.teacher-task-file,
.student-task-file {
    display: flex;
    flex: 1 1;
    justify-content: center;
    cursor: pointer;
}

.file-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
}
.delete-wrapper-teacher-task,
.delete-wrapper-student-task {
    display: none;
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 16px;
    color: #577fa1;
    z-index: 10;
}
.file-wrapper:hover .delete-wrapper-teacher-task,
.file-wrapper:hover .delete-wrapper-student-task {
    display: block;
}

.center-header-flex {
    justify-content: flex-start;
    align-items: center;
}

.header-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
}

.header-toolbar-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

.header-toolbar-btn-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 25px;
}

.header-toolbar-btn-wrapper:hover .toolbar-btn-label,
.header-toolbar-btn-wrapper:hover .header-toolbar-btn-icon {
    color: #74cee0;
}
.header-toolbar-btn-wrapper:hover .toolbar-btn-label {
    transform: scale(1.2);
}

.header-toolbar-btn .header-toolbar-btn-icon {
    font-size: 22px;
    color: #fff;
}

.header-toolbar-btn .toolbar-btn-label {
    font-size: 12px;
    color: #fff;
}

.header-toolbar-btn.disabled .header-toolbar-btn-icon,
.header-toolbar-btn.disabled .toolbar-btn-label {
    opacity: 0.4;
    cursor: default;
}

.disabled .header-toolbar-btn-wrapper:hover .toolbar-btn-label,
.disabled .header-toolbar-btn-wrapper:hover .header-toolbar-btn-icon {
    color: #fff;
}
.disabled .header-toolbar-btn-wrapper:hover .toolbar-btn-label {
    transform: scale(1);
}

.tasks-instructions-wrapper h1 {
    font-size: 22px;
    color: #71cde0;
    margin-bottom: 0px;
}

.tasks-instructions-wrapper h1 {
    font-size: 22px;
    color: #71cde0;
    margin-bottom: 0px;
}

.student-comments-wrapper {
    display: flex;
    flex: 1 1;
    flex-direction: column;
}

.student-comment-row {
    display: flex;
    flex: 1 1;
    flex-direction: row;
    justify-content: center;
    position: relative;
    padding: 10px 10px 15px 10px;
    background-color: lightblue;
    border-radius: 10px;
    align-items: center;
    margin-bottom: 10px;
    min-height: 74px;
}

.student-comment-thumbnail-wrapper {
    display: flex;
    width: 55px;
    height: 55px;
    border-radius: 55px;
    position: absolute;
    left: 6px;
    top: 10px;
    background-color: #fff;
    justify-content: center;
    align-items: center;
}

.student-comment-thumbnail-wrapper img {
    display: block;
    width: 51px;
    border-radius: 100%;
    border: 1px solid #f2f2f2;
}

.student-comment-content-wrapper {
    display: flex;
    padding-left: 58px;
    flex: 1;
}

.student-comment-row.right-aligned .student-comment-thumbnail-wrapper {
    left: auto;
    right: 10px;
}

.student-comment-row.right-aligned .student-comment-content-wrapper {
    display: flex;
    padding-left: 10px;
    padding-right: 62px;
    justify-content: flex-end;
}

.comment-bg-0 {
    background-color: #a0ced9;
}
.comment-bg-1 {
    background-color: #fcf5c7;
}
.comment-bg-2 {
    background-color: #adf7b6;
}
.comment-bg-3 {
    background-color: #ffee93;
}
.comment-bg-4 {
    background-color: #fcf5c7;
}
.comment-bg-5 {
    background-color: #ffc09f;
}

.student-comment-row .comment-buttons-wrapper {
    display: none;
}

.student-comment-row:hover .comment-buttons-wrapper {
    display: block;
}

.student-comment-row:hover .comment-buttons-wrapper .icon-delete-message {
    color: #000;
    cursor: pointer;
}

.student-test-grid,
.teacher-test-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 25px 0px;
}

.student-tests-card,
.teacher-test-card {
    display: flex;
    flex-direction: column;
    width: 49%;
    margin-bottom: 25px;
}

.teacher-test-detail-card .teacher-test-code-wrapper,
.teacher-test-card .teacher-test-code-wrapper {
    display: flex;
    margin-bottom: 5px;
    flex-direction: row;
}
.teacher-test-detail-card .teacher-test-top-section,
.teacher-test-card .teacher-test-top-section {
    margin-bottom: 15px;
}
.teacher-test-detail-card .teacher-test-code-wrapper .task-code-label,
.teacher-test-card .teacher-test-code-wrapper .task-code-label {
    margin-right: 5px;
}
.teacher-test-detail-card .teacher-test-description,
.teacher-test-card .teacher-test-header {
    font-size: 18px;
}
.teacher-test-detail-card .teacher-test-description,
.teacher-test-card .teacher-test-description {
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 15px;
    margin-bottom: 10px;
}

.row.has-top-border {
    border-top: 1px solid #f2f2f2;
    padding-top: 25px;
    margin-top: 15px;
}

.teacher-test-code-wrapper {
    display: flex;
    flex-direction: column;
}

.card-header.has-toolbar h6 {
    margin-bottom: 4px;
}
.student-tests-card .student-task-top-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.student-tests-card .student-task-date-wrapper .student-tests-end-date-wrapper {
    display: flex;
    flex-direction: row;
    flex: 1;
}

.student-tests-card .student-task-date-wrapper .student-tests-end-date-wrapper .task-date-label {
    flex: 1;
}

.student-tests-card .student-tests-description {
    font-size: 16px;
}

.student-tests-card table {
    margin-bottom: 24px;
}

.student-test-grid {
    padding: 25px 5px;
}

.student-tests-card {
    width: 47%;
}

.file-row {
    padding-top: 15px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 15px;
}

.file-container {
    display: flex;
    flex-direction: column;
}

.list-row-no-data {
    text-align: center;
    color: #777;
    font-size: 14px;
    padding-left: 16px;
    margin: 25px 0px;
}

.attendance-card-container {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    border: 1px solid #f2f2f2;
    border-radius: 6px;
    position: relative;
    transition-property: background-color, color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
}

.attendance-card-container-body {
    display: flex;
    flex-direction: row;
    position: relative;
    padding-top: 15px;
    padding-bottom: 15px;
}

.attendance-status-badge {
    display: flex;
    flex-direction: row;
    position: absolute;
    padding: 8px 16px;
    right: 0px;
    top: -15px;
    color: #fff;
    transition-property: background-color, color;
    transition-duration: 0.8s;
    transition-timing-function: ease-in;
}

.icon-attendance-status {
    margin-right: 4px;
}

.attendance-profile-pic-container {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    width: 80%;
    justify-content: center;
    align-items: center;
}

.attendance-profile-pic-container img {
    width: 95px;
    min-height: 90px;
    border-radius: 100%;
    border: thin solid #fff;
    box-shadow: 2px 2px 5px #0006;
    padding: 2px;
    background-color: #fff;
}

.attendance-card-container-body .card-detail-container {
    padding-left: 10%;
}

.attendance-importance-row {
    margin-top: 8px;
}

.attendance-importance-badge {
    border-radius: 12px;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin-left: 4px;
    padding: 3px 8px;
    text-transform: capitalize;
}

.attendance-importance-mandatory {
    background-color: #f9d6d6;
    color: #8f1212;
}

.attendance-importance-test {
    background-color: #ffeac2;
    color: #7a4a00;
}

.attendance-importance-reason {
    background-color: #dcecff;
    color: #1f4a8c;
}

.attendance-importance-optional {
    background-color: #e3f4dc;
    color: #2f6f1d;
}

.attendance-importance-noschool {
    background-color: #ececec;
    color: #4e4e4e;
}

.attendance-importance-neutral {
    background-color: #efefef;
    color: #555;
}

.axon-toast-container {
    left: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 16px;
    z-index: 1200;
}

.axon-toast {
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    font-weight: 600;
    margin: 0 auto 10px auto;
    max-width: 560px;
    padding: 10px 14px;
    width: calc(100% - 32px);
    float: right;
    margin-right: 35px;
}

.axon-toast-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.axon-toast-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

.axon-toast-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.axon-toast-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.attendance-empty-state {
    align-items: center;
    background-color: #f8f9fb;
    border: 1px solid #e4e8ef;
    border-radius: 8px;
    color: #4c596a;
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 14px;
}

.attendance-review-table th,
.attendance-review-table td {
    vertical-align: middle;
}

.attendance-review-table .pending-reason-row {
    cursor: pointer;
}

.attendance-review-table .pending-reason-row:hover {
    background-color: #f8fafc;
}

.attendance-review-modal-body {
    padding: 12px 16px;
}

.attendance-review-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: 2fr 1fr;
}

.attendance-review-file {
    background-color: #f9fbfe;
    border: 1px solid #e8edf3;
    border-radius: 6px;
    padding: 10px;
}

.attendance-review-preview-image {
    border: 1px solid #e8edf3;
    border-radius: 6px;
    max-height: 220px;
    max-width: 100%;
}

.attendance-review-preview-frame {
    border: 1px solid #e8edf3;
    border-radius: 6px;
    height: 280px;
    width: 100%;
}

.attendance-card-padding {
    padding: 2rem 1rem;
}

.mark-present-btn {
    align-items: center;
    justify-content: center;
    border: 1px solid #53cb53 !important;
    border-right: none !important;
    color: #53cb53;
    background-color: #fff;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    transition-property: background-color, color;
    transition-duration: 0.8s;
    transition-timing-function: ease-in;
}

.mark-absent-btn {
    align-items: center;
    justify-content: center;
    border: 1px solid #f52424 !important;
    color: #f52424;
    background-color: #fff;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    transition-property: background-color, color;
    transition-duration: 0.8s;
    transition-timing-function: ease-in;
}

.mark-absent-btn:hover {
    background-color: #fad1d1;
    font-weight: bold;
    border: 1px solid #f52424 !important;
}
.mark-present-btn:hover {
    background-color: #d1eed1;
    font-weight: bold;
    border: 1px solid #009d00 !important;
    color: #009d00;
}

button.mark-present-btn:focus {
    outline: 1px dotted;
    outline: 2px auto #009d00;
}

button.mark-absent-btn:focus {
    outline: 1px dotted;
    outline: 2px auto #f52424;
}

.attendance-card-container-footer {
    display: flex;
    flex-direction: row;
    margin-top: 16px;
}

.icon-attendance {
    font-size: large;
    margin: 5px 5px;
}

.attendance-card-container .badge.attendance-status-badge {
    background-color: #9b9b9bcc;
}

.icon-attendance-status {
    margin-right: 4px;
}

.attendance-card-container .icon-attendance-status .unchecked-icon {
    display: block;
    color: #fff;
}
.attendance-card-container .icon-attendance-status .present-icon,
.attendance-card-container .icon-attendance-status .absent-icon {
    display: none;
    color: #fff;
}

.attendance-card-container.is-present {
    border: 1px solid #009d00 !important;
    background-color: #d1eed1;
}

.attendance-card-container.is-present .badge.attendance-status-badge {
    background-color: #009d00;
}

.attendance-card-container.is-present .icon-attendance-status .present-icon {
    display: block;
    color: #fff;
}

.attendance-card-container.is-present .icon-attendance-status .unchecked-icon,
.attendance-card-container.is-present .icon-attendance-status .absent-icon {
    display: none;
    color: #fff;
}

.attendance-card-container.is-present .mark-present-btn {
    background-color: #009d00;
    color: #fff;
}

.attendance-card-container.is-present .mark-absent-btn {
    background-color: transparent;
    border-color: #777 !important;
    color: #777;
}

.attendance-card-container.is-absent {
    border: 1px solid #f52424 !important;
    background-color: #fad1d1;
}

.attendance-card-container.is-absent .badge.attendance-status-badge {
    background-color: #f52424;
}

.attendance-card-container.is-absent .icon-attendance-status .absent-icon {
    display: block;
    color: #fff;
}

.attendance-card-container.is-absent .icon-attendance-status .present-icon,
.attendance-card-container.is-absent .icon-attendance-status .unchecked-icon {
    display: none;
    color: #fff;
}

.attendance-card-container.is-absent .mark-absent-btn {
    background-color: #f52424;
    color: #fff;
}

.attendance-card-container.is-absent .mark-present-btn {
    background-color: transparent;
    border-color: #777 !important;
    color: #777;
}

.subjects-label,
.grades-label {
    font-size: 14px;
    font-weight: 800;
}

.subjects-container,
.grades-container {
    display: block;
    width: 100%;
    margin-bottom: 5px;
}

#selected_tutor_subjects {
    font-size: 14px;
    margin: 0px 10px;
}

.tutor-subject-chip-remove {
    margin-left: 5px;
    cursor: pointer;
}

.report-card-header-row {
    font-size: 14px;
    font-weight: 800;
}

.rc-entries-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 15px 0px;
}

#reportCardAdminTermsList .table td {
    vertical-align: middle;
}

.rc-student-detail-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rc-student-detail-container .search-card-container {
    border-radius: 5px;
    box-shadow: 1px 1px 4px #0003;
    border: none;
}

.rc-student-detail-container .search-card-container:hover {
    background-color: #fff;
    cursor: default;
}

.rc-student-detail-container .student-detail-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.rc-student-detail-container .student-detail-wrapper .student-info-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.rc-student-detail-container .student-detail-wrapper .profilePicSm {
    max-width: 95px;
}

.rc-student-detail-container .student-detail-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.btn-rc-teacher-student-detail {
    cursor: pointer;
}

.btn-rc-teacher-student-detail:hover {
    background-color: #f2f2f2;
}

.btn-rc-teacher-student-detail .student-detail-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 16px;
}

.btn-rc-teacher-student-detail .student-detail-wrapper .student-info-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.btn-rc-teacher-student-detail .student-detail-wrapper .profilePicSm {
    max-width: 95px;
}

.btn-rc-teacher-student-detail .student-detail-wrapper .student-avg {
    color: var(--primary);
}

.top-messages-icon {
    width: 50px;
    height: 50px;
    background-color: #71cde0;
    border-radius: 50%;
}

.navbar-text {
    cursor: pointer;
}

.navbar-text:hover {
    transform: scale(1.2);
}

.sos-location-map {
    width: 100%;
    min-height: 320px;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
}