/* BASIC STYLES */
/* 
    COLOURS
*/
:root {
    --cyan-50: #E3F8FC;
    --cyan-100: #CFF4FC;
    --cyan-200: #9EEAF9;
    --cyan-300: #6EDFF6;
    --cyan-400: #3DD5F3;
    --cyan-500: #0DCAF0;
    --cyan-600: #0AA2C0;
    --cyan-700: #087990;
    --cyan-800: #055160;
    --cyan-900: #032830;

    --blue-50: #E1ECFA;
    --blue-100: #CBDEF7;
    --blue-200: #A5C1E5;
    --blue-300: #799FD1;
    --blue-400: #4D79B2;
    --blue-500: #33609E;
    --blue-600: #174787;
    --blue-700: #02285B;
    --blue-800: #011F47;
    --blue-900: #00142E;

    --red-50: #FCE8E8;
    --red-100: #FACFCF;
    --red-200: #F2B1B1;
    --red-300: #EB9191;
    --red-400: #D96464;
    --red-500: #C74040;
    --red-600: #AD2A2A;
    --red-700: #8F0000;
    --red-800: #700000;
    --red-900: #520000;

    --orange-50: #FCECDE;
    --orange-100: #FCDBC0;
    --orange-200: #FAC396;
    --orange-300: #F7A45E;
    --orange-400: #F08F3E;
    --orange-500: #E3761B;
    --orange-600: #CA6510;
    --orange-700: #B25200;
    --orange-800: #8C3F00;
    --orange-900: #662E00;

    --yellow-50: #FFFAEB;
    --yellow-100: #FFF4CE;
    --yellow-200: #FFEBA8;
    --yellow-300: #FFE07D;
    --yellow-400: #FAD355;
    --yellow-500: #E8C24A;
    --yellow-600: #CCAA39;
    --yellow-700: #B29020;
    --yellow-800: #96770F;
    --yellow-900: #7A5E00;

    --green-50: #E0F4E4;
    --green-100: #C8EECF;
    --green-200: #AAE0B4;
    --green-300: #89D697;
    --green-400: #62BD73;
    --green-500: #41A353;
    --green-600: #258437;
    --green-700: #0D681E;
    --green-800: #075214;
    --green-900: #04400F;

    --indigo-50: #EFE9FC;
    --indigo-100: #E0CFFC;
    --indigo-200: #C29FFA;
    --indigo-300: #A370F7;
    --indigo-400: #8540F5;
    --indigo-500: #6610F2;
    --indigo-600: #520DC2;
    --indigo-700: #3D0A91;
    --indigo-800: #290661;
    --indigo-900: #140330;

    --gray-50: #F7F8FA;
    --gray-100: #F0F2F5;
    --gray-200: #DCE0E5;
    --gray-300: #C9CED4;
    --gray-400: #ABB0B8;
    --gray-500: #91979E;
    --gray-600: #6E747D;
    --gray-700: #4D535C;
    --gray-800: #31363D;
    --gray-900: #202429;

    --light: #F8F9FA;
    --dark: #202429;
    --neutral-n0: #FFF;
    --gray-black: #000;

    --Body-Text-Body-Color: #31363D;

    --border: #DEE2E6;
}

/* 
    FONTS
*/

@font-face {
    font-family: 'Alta';
    src: url('../resources/fonts/Alta_regular.otf') format('opentype');
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('../resources/fonts/NunitoSans.ttf');
}

/* 
    TEXT COLOR
*/

.text-black {
    color: var(--gray-black) !important;
}

.text-primary {
    color: var(--primary-p700) !important;
}

.text-blue {
    color: var(--blue-600) !important;
}

.text-white {
    color: var(--neutral-n0) !important;
}

.text-dark {
    color: var(--neutral-n900) !important;
}

.text-gray-700 {
    color: var(--gray-700) !important;
}

.text-gray-600 {
    color: var(--gray-600) !important;
}

.text-gray-500 {
    color: var(--gray-500) !important;
}

.text-neutral-500 {
    color: var(--neutral-n500) !important;
}

.text-neutral-600 {
    color: var(--neutral-n600) !important;
}

.text-neutral {
    color: var(--neutral-n700) !important;
}

.text-neutral-800 {
    color: var(--neutral-n800) !important;
}

.text-warning {
    color: var(--yellow-400) !important;
}

.text-danger {
    color: var(--red-700) !important;
}

.text-success {
    color: var(--green-700) !important;
}

.text-disabled {
    color: var(--gray-600) !important;
}

.text-pending {
    color: var(--orange-600) !important;
}

.text-yellow-600 {
    color: var(--yellow-600) !important;
}

.text-yellow-700 {
    color: var(--yellow-700) !important;
}

.text-yellow-800 {
    color: var(--Yellow-800, #96770F) !important;
}

.text-red-700 {
    color: var(--red-700) !important;
}

/*
The text-danger or text-success cannot overwrite the utilites.css
If it cannot overwrite, use below
*/
.text-red-600 {
    color: var(--red-600) !important;
}

.text-green-600 {
    color: var(--green-600) !important;
}

/* 
    TEXT ALIGN
*/

.text-center {
    text-align: center;
}

/* 
    LAYOUTS
*/

.width-100 {
    width: 100%;
}

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

.flex-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.flex-col-start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
}

.flex-col-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.flex-col-space-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.icon-button-rg {
    display: flex;
    flex-direction: row;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-row-center {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.flex-row-start {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
}

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

.flex-row-space-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.content-center {
    height: 100%;
    margin: 0;
    justify-content: center;
    align-items: center;
}


/* 
    BUTTONS
*/

.btn {
    cursor: pointer;
    font-size: 16px;
}

.btn-s,
.btn-md,
.btn-lg,
.btn-xlg{
    justify-content: center;
    align-items: center;
    font-family: "Nunito Sans";
    font-weight: 600;
    border: 1px solid;
}

.btn-s {
    padding: 2.5px 6px !important;
    border-radius: 3.2px !important;
    font-size: 14px !important;
}

.btn-md {
    padding: 4px 8px !important;
    border-radius: 3.2px !important;
    font-size: 16px !important;
}

.btn-lg {
    padding: 6px 12px !important;
    border-radius: 4px !important;
    font-size: 16px !important;
}

.btn-xlg {
    padding: 8px 16px;
    font-size: 20px;
    border-radius: 4.8px;
}


/* Button colours */

.btn-primary {
    background-color: var(--blue-600) !important;
    border-color: var(--blue-600) !important;
    color: var(--Gray-White, #FFF);  
}

.btn-secondary {
    background-color: var(--gray-600);
    border-color: var(--gray-600);
    color: var(--Gray-White, #FFF);  
}

.btn-success {
    background-color: var(--green-600);
    border-color: var(--green-600);
    color: var(--Gray-White, #FFF);  
}

.btn-check {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1.5px solid #198754; 
    background-color: #ffffff;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-danger {
    background-color: var(--red-600) !important;
    border-color: var(--red-600) !important;
    color: var(--Gray-White, #FFF) !important; 
}

.btn-warning {
    background-color: var(--yellow-600);
    border-color: var(--yellow-600);
}

.btn-info {
    background-color: var(--orange-600);
    border-color: var(--orange-600);
}

.btn-link {
    border: 0px !important;
    color: var(--blue-600) !important;
    text-decoration: none !important;
    background-color: transparent !important;
}

.btn-link-danger {
    border: 0px !important;
    color: var(--red-700) !important;
    text-decoration: none !important;
    background-color: transparent !important;
}

/* States */

.btn-primary:hover {
    background-color: var(--blue-700) !important;
}

.btn-secondary:hover {
    background-color: var(--gray-700) !important;
}

.btn-check:hover {
    background-color: #e9f7ef;
}

.btn-success:hover {
    background-color: var(--green-700) !important;
}

.btn-danger:hover {
    background-color: var(--red-700) !important;
    color: var(--Gray-White, #FFF) !important;
}

.btn-warning:hover {
    background-color: var(--yellow-700) !important;
}

.btn-info:hover {
    background-color: var(--orange-700) !important;
}

.btn-link:hover {
    color: var(--blue-800) !important;
}

.btn-link.disabled {
    border: 0px !important;
    color: var(--gray-600) !important;
    text-decoration: none !important;
    background-color: transparent !important;
}
.btn-link.animating {
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15) !important;
}


/* Button Outline Colours */

.btn-outline-primary {
    border: 1px solid var(--blue-600) !important;
    background: #FFF !important;
    color: var(--blue-600) !important;
}

.btn-outline-primary:hover {
    background: var(--blue-50) !important;
}

.btn-outline-primary.pressed {
    background: var(--blue-100) !important;
}

.btn-outline-secondary {
    border: 1px solid var(--Theme-Secondary, #6E747D) !important;
    background: var(--gray-White, #FFF) !important;
    color: var(--Theme-Secondary, #6E747D) !important;
    font-weight: 600 !important;
    line-height: 150% !important; /* 21px */
}

.btn-outline-secondary:hover {
    border: 1px solid var(--gray-600) !important;
    color: var(--gray-800, #31363D)!important;
    background: var(--gray-50) !important;
    font-weight: 600;
    line-height: 150%; /* 21px */
}

.btn-outline-secondary.pressed {
    border-radius: 3.2px;
    border: 1px solid var(--Theme-Secondary, #6E747D) !important;
    background: var(--gray-200, #DCE0E5) !important;
    color: var(--gray-800, #31363D) !important;
    font-weight: 600;
    line-height: 150%; /* 21px */
}

.btn-outline-light {
    border: 1px solid var(--gray-400);
    background: #FFF;
    color: black;
}

.btn-outline-light:hover {
    border: 1px solid var(--gray-500) !important;
    background: var(--gray-50) !important;
}

.btn-outline-light.animating {
    background: var(--gray-300, #C9CED4) !important;
    border: 1px solid var(--gray-600, #6E747D) !important;
    color: var(--gray-800, #31363D) !important;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15) !important;
}

.btn-outline-dark {
    border: 1px solid var(--dark, #202429) !important;
    background: #FFF !important;
    color: var(--dark, #202429) !important;
}

.btn-outline-dark:hover {
    border: 1px solid var(--gray-900, #202429) !important;
    background: var(--gray-50, #F7F8FA) !important;
    color: var(--dark, #202429) !important;
}

.btn-outline-dark.animating {
    background: var(--gray-300, #C9CED4) !important;
    border: 1px solid var(--dark, #202429) !important;
    color: var(--dark, #202429) !important;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15) !important;
}

.btn-outline-danger {
    color: var(--red-600) !important;
    border: 1px solid var(--red-600) !important;
    background: #FFF !important;
}
.btn-outline-danger:hover {
    color: var(--red-600) !important;
    border: 1px solid var(--red-700) !important;
    background: var(--gray-50) !important;
}

.btn-outline-danger.animating {
    background: var(--red-100, #FACFCF) !important;
    border: 1px solid #DB4653 !important;
    color: #DB4653 !important;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15) !important;
}

.btn-outline-success {
    border: 1px solid var(--green-600, #258437) !important;
    background: #FFF !important;
    color: var(--green-600, #258437) !important;
}

.btn-outline-success:hover {
    border: 1px solid var(--green-700, #0D681E) !important;
    background: var(--green-50, #E0F4E4) !important;
    color: var(--green-600, #258437) !important;
}

.btn-outline-success.animating {
    background: var(--green-100, #C8EECF) !important;
    border: 1px solid var(--green-600, #258437) !important;
    color: var(--green-600, #258437) !important;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15) !important;
}

.btn-outline-warning {
    border: 1px solid var(--yellow-600, #CCAA39) !important;
    background: #FFF !important;
    color: var(--yellow-600, #CCAA39) !important;
}

.btn-outline-warning:hover {
    border: 1px solid var(--yellow-700, #B29020) !important;
    background: var(--yellow-50, #FFFAEB) !important;
    color: var(--yellow-600, #CCAA39) !important;
}

.btn-outline-warning.animating {
    background: var(--yellow-100, #FFF4CE) !important;
    border: 1px solid var(--yellow-700, #B29020) !important;
    color: var(--yellow-600, #CCAA39) !important;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15) !important;
}

.btn-outline-info {
    border: 1px solid #FF892D !important;
    background: #FFF !important;
    color: #FF892D !important;
}

.btn-outline-info:hover {
    border: 1px solid var(--orange-700, #B25200) !important;
    background: var(--orange-50, #FCECDE) !important;
    color: #FF892D !important;
}

.btn-outline-info.animating {
    background: var(--orange-100, #FCDBC0) !important;
    border: 1px solid #C26117 !important;
    color: #FF892D !important;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15) !important;
}

.disabled {
    opacity: 0.65;
    pointer-events: none !important;
}

/* Mainly for the attendance edit to follow the existing disabled form-control color
Please check figma before using this class */
.disabled-v2 {
    border-radius: 3.2px;
    border-color: var(--gray-400) !important;
    background: var(--cui-secondary-bg) !important;
    pointer-events: none !important;
    cursor: none;
}

.enabled-cursor {
    cursor: pointer;
}

/* 
    ICONS
*/

.interactive-icon {
    width: 48px;
    height: 48px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.icon-2xs {
    width: auto;
    height: auto;
    font-size: 14px !important;
}

.icon-xs {
    width: auto;
    height: auto;
    font-size: 16px !important;
}

.icon-s {
    width: auto;
    height: auto;
    font-size: 20px !important;
}

.icon-md {
    width: auto;
    height: auto;
    font-size: 24px !important;
}

.icon-lg {
    width: auto;
    height: auto;
    font-size: 32px !important;
}

.icon-xl {
    width: auto;
    height: auto;
    font-size: 40px !important;
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 200,
        'GRAD' 0,
        'opsz' 32;
    cursor: pointer;
}

.material-symbols-outlined.fill {
    font-variation-settings:
        'FILL' 1,
        'wght' 200,
        'GRAD' 0,
        'opsz' 32;
    cursor: pointer;
}

.material-symbols-outlined.icon-400-fill {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 32;
    cursor: pointer;
}

.icon-hover:hover {
    font-variation-settings:
        'FILL' 1,
        'wght' 200,
        'GRAD' 0,
        'opsz' 32;
    cursor: pointer;
}

.icon-btn-lg,
.icon-btn-md,
.icon-btn-sm,
.icon-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

.icon-btn-lg {
    width: 48px;
    height: 48px;
    padding: 8px 16px;
    border-radius: 4.8px;
}

.icon-btn-md {
    width: 38px;
    height: 38px;
    padding: 6px 12px;
    border-radius: 4px;
}

.icon-btn-sm {
    width: 31px;
    height: 31px;
    padding: 4px 8px !important;
    border-radius: 3.2px;
}

.close-btn {
    margin-bottom: 24px;
    padding: 4px;
    font-size: 16px;
    color: var(--gray-700);
    cursor: pointer;
}

/* 
    BOOTSTRAP CALENDAR
*/

.datepicker {
    padding: 0px !important;
    border-radius: 4px !important;
    border: none !important;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
    /* Regular Shadow */
}

.datepicker table tr td span {
    height: 22px !important;
    line-height: 22px !important;
    margin: 10px 12px !important;
    width: 22% !important;
    /* 3 Columns */
    padding: 0px 8px;
    border-radius: 2px !important;
}

.table-condensed {
    font-family: "Nunito Sans";
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.datepicker-days tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 6px;
    min-width: 244px;
}

.datepicker-days td {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Ensures it takes the full height of the row */
    width: 24px !important;
    height: 24px !important;
    padding: 1px !important;
}

td.today.day,
td.active.day {
    border-radius: 2px;
    background-image: none !important;
}

/* Current day/ month/ year */
td.today.day,
span.month.active,
span.year.active {
    background-color: var(--gray-100) !important;
    color: #000 !important;
    background-image: none !important;
}

td.disabled:hover {
    cursor: not-allowed !important;
}



th.datepicker-switch {
    font-weight: normal;
}

.datepicker-days td:not(.disabled):hover,
th.datepicker-switch:hover,
th.prev:hover,
th.next:hover,
span.month:hover,
span.year:hover {
    border-radius: 2px;
    background-image: none !important;
    background-color: var(--gray-100) !important;
    color: #000 !important;
}

/* Selected */
td.today.active.day,
td.active,
span.focused,
span.focused.active {
    background-color: var(--blue-600) !important;
    background: var(--blue-600) !important;
    color: #FFF !important;
}

td.new {
    color: var(--gray-500) !important;
}

/* Div that contains Today & Clear button */
.table-condensed tfoot {
    display: none;
}

th.datepicker-switch,
th.prev,
th.next {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Arrows & Month/Year */
.table-condensed thead tr:nth-child(2) {
    border-bottom: 1px solid var(--border);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 244px;
}

.datepicker-months thead tr:nth-child(2),
.datepicker-years thead tr:nth-child(2) {
    padding: 3px 6px;
}

/* Days of the week */
.datepicker-days thead tr:nth-child(3) {
    margin-top: 8px;
    margin-left: 12px;
    margin-right: 12px;
    padding: 0;
}

/* Rows of dates */
.datepicker-days tbody tr {
    margin-left: 12px;
    margin-right: 12px;
}

/* Each days of the week cell */
th.dow {
    height: 100% !important;
    width: 36px !important;
    height: 30px !important;
    padding: 0px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

/* Last row of dates */
.datepicker-days tbody tr:nth-last-child(1) {
    margin-bottom: 8px;
}

.datepicker-months tr td,
.datepicker-years tr td {
    padding: 8px;
}

/* 
    BOOTSTRAP TOOLTIP (PLEASE DONT REMOVE)
*/

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow, .bs-tooltip-top .tooltip-arrow  {
    bottom : 0 !important; 
}


/*
    SEARCHABLE DROPDOWN
*/

.searchable-dropdown {
    position: relative;
}

.dropdown-content {
    display: block;
    position: absolute;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    width: 100%;
    max-height: 160px;
    overflow-y: auto;
    z-index: 1;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
    /* Regular Shadow */
    padding: 8px 0px;
}

.dropdown-content a {
    padding: 4px 16px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: black;
    cursor: pointer;
}

.dropdown-content a:hover,
a.hover {
    background-color: var(--gray-100);
}

.dropdown-content a.selected {
    background-color: var(--gray-200);
}

.dropdown-content a.selected::after {
    content: '';
    background-image: url('../resources/img/check_lg.svg');
    display: inline-block;
    width: 16px;
    /* Set the width of the image */
    height: 16px;
    /* Set the height of the image */
    background-size: contain;
    /* Ensure the image fits */
    background-repeat: no-repeat;
    /* Prevent repeating */
    margin-left: 8px;
    /* Space between text and image */
    position: absolute;
    right: 16px;
}

/* This is ONLY for the edit assignment and continuation */
.unique-option.selected::after {
    margin-left: 0;
    position: static;
}

/* Duration Input Box */
.dropdown-content b {
    padding: 4px 16px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: black;
    cursor: pointer;
}

.dropdown-content b:hover,
a.hover {
    background-color: var(--gray-100);
}

.dropdown-content b.selected {
    background-color: var(--gray-200);
}

.dropdown-content b.selected::after {
    content: '';
    background-image: url('../resources/img/check_lg.svg');
    display: inline-block;
    width: 16px;
    /* Set the width of the image */
    height: 16px;
    /* Set the height of the image */
    background-size: contain;
    /* Ensure the image fits */
    background-repeat: no-repeat;
    /* Prevent repeating */
    margin-left: 8px;
    /* Space between text and image */
    position: absolute;
    right: 16px;
}

.dropdown-selected {
  border: 1px solid var(--gray-400);
  border-radius: 4px;
  background-color: var(--neutral-n0);
  padding: 6px 12px;
  position: relative;
}

.dropdown-selected.active {
  border-color: var(--blue-600);
}

/* 
Flags/Alerts/Badge/Tags
*/

.flag-info {
    border-radius: 4px;
    background: var(--Theme-Info, #FD7E14);
    display: flex;
    padding: 4.2px 7.8px;
    justify-content: center;
    align-items: center;
}

.warning-alert{
    margin-top: 16px;
    border-radius: 4px;
    border: 1px solid var(--Components-Alert-Warning-Border, #FFE07D);
    background: var(--Components-Alert-Warning-Background, #FFFAEB);
    width: 450px;
    padding: 10px;
    margin-right: 24px;
}

.badge-container {
    display: flex;
    padding: 4.2px 7.8px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
}

.hitbox{
    display: flex;
    padding: 0 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--HitBox, rgba(255, 255, 255, 0.00));
}

.danger-alert {
    display: flex;
    padding: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid var(--Components-Alert-Danger-Border, #EB9191);
    background: var(--Components-Alert-Danger-Background, #FCE8E8);
}

.badge-green {
 display: flex;
    padding: 1px 4px;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    background: var(--Green-200, #AAE0B4);
}

.badge-grey {
    display: flex;
    padding: 1px 4px;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    background: var(--Gray-200, #DCE0E5);
}

.tag-gray {
    border-radius: 4px;
    border: 1px solid var(--Gray-400, #ABB0B8);
    background: var(--Gray-100, #F0F2F5);
    display: flex;
    padding: 1px 8px;
    align-items: center;
    justify-content: space-between;
}

/* 
    ANIMATION
*/
@keyframes floatDown {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes floatUp {
    from {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -60%);
    }
}

/* 
    MOBILE (Viewport: <=379px)
*/

/* @media screen and (max-width: 379px) { */
/* 
    general
*/
body {
    padding: 18px;
}

/* 
    TEXT 
*/
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--gray-800) !important;
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 700 !important;
    line-height: 120% !important;
}

h1 {
    font-size: 40px !important;
}

h2 {
    font-size: 32px !important;
}

h3 {
    font-size: 28px !important;
}

h4 {
    font-size: 24px !important;
}

h5 {
    font-size: 20px !important;
}

h6 {
    font-size: 16px !important;
}

.lead-semibold {
    font-family: "Nunito Sans" !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
}

.regular {
    color: var(--gray-800);
    font-family: "Nunito Sans" !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 150% !important;
}

.regular-bold {
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.regular-semibold {
    font-family: "Nunito Sans" !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
}

.small {
    font-family: "Nunito Sans";
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.small-underline {
    color: var(--Theme-Primary, #174787);
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    /* 21px */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.small-bold {
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.extra-small-bold {
    font-family: "Nunito Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.small-semibold {
    font-family: "Nunito Sans" !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
}

.extra-small-semibold {
    font-family: "Nunito Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
}

.extra-small {
    font-family: "Nunito Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.body-1 {
    color: var(--neutral-n800, #2C2D2E);
    font-family: "Nunito Sans";
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.4px;
}

.body-1-sb {
    color: var(--neutral-n800, #2C2D2E);
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.4px;
}

.body-2 {
    color: var(--neutral-n800, #2C2D2E);
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.4px;
}

.body-2-sb {
    color: var(--neutral-n800, #2C2D2E);
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.4px;
}

.caption {
    color: var(--neutral-n800, #2C2D2E);
    font-family: "Nunito Sans";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.4px;
}

.caption-sb {
    color: var(--neutral-n800, #2C2D2E);
    font-family: "Nunito Sans";
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.4px;
}

.overline {
    color: var(--neutral-n700, #2C2D2E);
    font-family: "Nunito Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.4px;
}

.underline {
    color: var(--Theme-Primary, #174787) !important;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}


/* DISPLAY */

body {
    /* overflow-y: auto; */
    /* overflow-x: hidden; */
    /* display: block; */
}

#content {
    overflow-y: auto;
    /* Let the page width be constrained to the viewport so that
       responsive tables can shrink instead of forcing a horizontal bar. */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* padding-right: 50px; */
}

/* 
    INPUTS
*/

/* Remove arrows in Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove arrows in Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.select-outline{
    border-radius: 4px;
    border: 1px solid var(--Gray-400, #ABB0B8);
    background: var(--Gray-White, #FFF);
    display: flex;
    padding: 6px 12px;
    align-items: center;
    flex: 1 0 0;
}

.select-outline:focus {
    border-radius: 4px;
    border: 1px solid var(--Components-Input-Focused-Border, #174787);
    background: var(--Gray-White, #FFF);
}

.select-outline.disabled{
    border-radius: 4px;
    border: 1px solid var(--Gray-400, #ABB0B8);
    background: var(--Gray-200, #DCE0E5);
}

.select-outline-small {
    padding: 2.5px 6px !important;
    border-radius: 3.2px !important;
    font-size: 14px !important;
}
 

/* 
    Toggles
*/

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/></svg>");
}
.form-switch .form-check-input:checked {
    border: none;
    background-color: var(--blue-600) !important;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}

/* 
    Navbar
*/

#navbar {
    height: 100%;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: fixed;
    top: 0;
    left: 0;
    gap: 12px;
    box-shadow: 0px -4px 8px 2px rgba(0, 20, 46, 0.05);
    background: var(--gray-50);
}

.navbar-group {
    display: flex;
    text-align: center;
    align-items: center;
    gap: 8px;
    /* flex: 1; */
    transition: background-color 0.3s ease;
    position: relative;
    padding: 8px 16px;
    border-radius: 5px;
}

.navbar-group i {
    color: var(--gray-700);
}

.navbar-group div {
    color: var(--gray-700);
}

.icon-badge-group {
    position: relative;
}

.navbar-group:hover {
    cursor: pointer;
    background-color: var(--gray-100);
    color: var(--blue-600);
    border-radius: 5px;
}

.navbar-group:hover i {
    color: var(--blue-700);
}

.navbar-group:hover div {
    color: var(--blue-700);
}

.navbar-group-active {
    background-color: var(--blue-50) !important;
    color: var(--blue-700) !important;
    border-radius: 5px;
}

.navbar-group-active i {
    color: var(--blue-700) !important;
}

.navbar-group-active div {
    color: var(--blue-700) !important;
}

.navbar-group-active a {
    color: var(--blue-700) !important;
}

.navbar-group span {
    width: fit-content;
}

#content {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.body-nav{
    text-decoration: none;
}

/* IC Global Compontent */
.globalStyleErrorState{
    pointer-events:none;
    display: flex;
    justify-content: space-between;
}

.IC-dropdown {
    position: relative !important;
    right: 0 !important;
    top: 0 !important;
}

/* 
    Tutor Transactions (View Payment)
*/

.notification {
    position: absolute !important;
    right: 20px;
    width: 30vw;
    height: 3.5vh;
    line-height: 1 !important;
    text-align: left;
}

#edit_tutor_remarks_modal.show {
    display: flex !important; /* Ensure flex is applied when modal is shown */
}

#gen_statement_modal.show {
    display: flex !important; /* Ensure flex is applied when modal is shown */
}

.center-modal{
    width: 500px !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.gen-disabled {
    border-radius: 4px;
    border: 1px solid var(--Theme-Primary, #174787);
    opacity: 0.65;
    background: var(--Theme-Primary, #174787);
    cursor: not-allowed;
    pointer-events: none;
}

.current-header, .current-status{
    display: flex;
}

.icon-current{
    color: white !important;
    margin-right: 8px;

}

.current-status{
    margin-top: 4px;
}

.currentbtn{
    width: 270px;
    height: 35px;
    font-size: 15px !important;
}

#notification-msg {
    position: fixed;
    bottom: 30px; /* Adjust to move it higher/lower */
    left: 585px;
    transform: translateX(-50%);
    margin: 0 !important;
}

.statementloading{
    background-color: #7a7a7a;
    border-radius: 5px;
    width: 500px;
    height: 200px;
    padding: 10px;
    color: white;
    align-content: center;
}

/* 
    Attendance 
*/

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */

/* Medium screens (laptops) */
@media (max-width: 1400px) {
    .attendance-followup-table th:nth-child(2),
    .attendance-followup-table td:nth-child(2) {
        width: 20%; /* Slightly smaller reason column */
    }
    
    .attendance-followup-table th:nth-child(7),
    .attendance-followup-table td:nth-child(7) {
        width: 15%; /* Slightly smaller pending action column */
    }
    
    .attendance-followup-table th:nth-child(8),
    .attendance-followup-table td:nth-child(8) {
        width: 15%; /* Slightly smaller actions column */
    }
    
    /* Assignment header rows */
    .lesson-table[style*="background-color: #DCE0E5;"] th:nth-child(2) {
        width: 12% !important;
    }
    
    .lesson-table[style*="background-color: #DCE0E5;"] th:nth-child(3) {
        width: 83% !important;
    }
}

/* Small screens (tablets) */
@media (max-width: 1200px) {
    /* Let the table shrink with the viewport instead of enforcing a min-width,
       so we avoid horizontal scrolling and rely on text wrapping/truncation. */
    .attendance-followup-table {
        width: 100%;
        min-width: 0;
    }

    /* Adjust column widths for smaller screens */
    .attendance-followup-table th:nth-child(1),
    .attendance-followup-table td:nth-child(1) {
        width: 4%;
    }
    
    .attendance-followup-table th:nth-child(2),
    .attendance-followup-table td:nth-child(2) {
        width: 24%; /* More space for reason */
    }
    
    .attendance-followup-table th:nth-child(3),
    .attendance-followup-table td:nth-child(3) {
        width: 13%; /* Less space for date */
    }
    
    .attendance-followup-table th:nth-child(7),
    .attendance-followup-table td:nth-child(7) {
        width: 13%; /* Less space for pending action */
    }
    
    .attendance-followup-table th:nth-child(8),
    .attendance-followup-table td:nth-child(8) {
        width: 13%; /* Less space for actions */
    }
}

/* Very small screens (mobile landscape) */
@media (max-width: 992px) {
    .attendance-followup-table {
        width: 100%;
        min-width: 0;
    }
}

/* Mobile portrait */
@media (max-width: 768px) {
    .attendance-followup-table {
        width: 100%;
        min-width: 0;
    }

    /* Further adjust column widths for mobile */
    .attendance-followup-table th:nth-child(2),
    .attendance-followup-table td:nth-child(2) {
        width: 26%; /* Even more space for reason */
    }
    
    .attendance-followup-table th:nth-child(3),
    .attendance-followup-table td:nth-child(3) {
        width: 12%; /* Less space for date */
    }
    
    .attendance-followup-table th:nth-child(4),
    .attendance-followup-table td:nth-child(4) {
        width: 7%; /* Slightly smaller duration */
    }
    
    .attendance-followup-table th:nth-child(5),
    .attendance-followup-table td:nth-child(5) {
        width: 7%; /* Slightly smaller lesson fee */
    }
}

/* ==================== CONTENT OPTIMIZATION ==================== */

/* Ensure content doesn't overflow */
.attendance-followup-table td > div {
    max-width: 100%;
}

/* Truncate long text in specific columns */
.attendance-followup-table td:nth-child(2) > div,
.attendance-followup-table td:nth-child(3) > div {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* But allow expansion for important content */
.client-dispute-comments-text {
    max-height: 4.5em;
    overflow: hidden;
}

/* Make sure action buttons don't wrap awkwardly */
.attendance-followup-table td:nth-child(8) > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.attendance-followup-table td:nth-child(8) button {
    white-space: nowrap;
}

/* attendance_all.php */

.lesson-table {
    
    border-spacing: 0;
    width: 100%;
}

.highlightnewlycreated{
    background: var(--gray-50, #F7F8FA);
}

.table-header {
    color: var(--gray-600);
    padding: 8px;
    border-top: 1px solid var(--neutral-n300, #C9CED4);
    border-bottom: 1px solid var(--neutral-n300, #C9CED4);
    vertical-align: bottom;
}

.lesson-table th:first-child {
    border-left: 1px solid var(--neutral-n300, #C9CED4);
}

.table-data {
    padding: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-inner-border {
    border-left: 1px solid var(--neutral-n300, #C9CED4);
    border-bottom: 1px solid var(--neutral-n300, #C9CED4);
}

.table-tl-rounded-border {
    border-top-left-radius: 5px;
    overflow: hidden;
}

.table-tr-rounded-border {
    border-top-right-radius: 5px;
    overflow: hidden;
}

.lesson-table th:last-child,
.lesson-table td:last-child {
    border-right: 1px solid var(--neutral-n300, #C9CED4) !important;
}

.lesson-table tr:last-child td:first-child,
.lesson-table tr:last-child {
    border-bottom-left-radius: 5px;
    overflow: hidden;
}

.lesson-table tr:last-child,
.lesson-table tr:last-child td:last-child {
    border-bottom-right-radius: 5px;
    overflow: hidden;
}

.split-column {
    border: hidden;
}

.search-radio-group {
    margin-bottom: 15px;
    margin-left: 5px;
}

.copy-content {
    display: flex;
    align-items: center;
}

.material-symbols-outlined {
    opacity: 0.5;
}

.copy-span {
    display: flex;
    align-items: center;
}

.action-icon-btn {
    color: var(--blue-600) !important;
    padding: 4.5px 8px !important;
    background-color: white !important;
    border-color: var(--blue-600) !important;
}

.input-group .btn-outline-primary,
.input-group .action-icon-btn {
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.input-group:hover .btn-outline-primary,
.input-group:hover .action-icon-btn {
    background-color: var(--blue-50) !important;
    /* border-color: var(--blue-600); */
    color: var(--blue-600);
}

.attendance-btn {
    margin-left: auto;
    margin-bottom: 16px;
    font-size: 16px;
    /* position: sticky;
    top: 10px;
    z-index: 100; */
}

#remarksContainer {
    position: relative;
    border: none;
    justify-content: center;
    align-items: flex-start;
}

#remarksBtn,
#editRemarksBtn {
    width: 20px;
    height: 20px;
    background: none;
    border: none;
}

.popover {
    border-radius: 4px !important;
    background-color: var(--neutral-n200, #FFFFFF) !important;
    box-shadow: 0px 4px 8px 2px rgba(0, 20, 46, 0.1) !important;
    border: none;
    /* Remove default border */
}

.modal-container.remarks-container {
    display: none;
    position: absolute;
    padding: 16px;
    border-radius: 4px;
    background-color: var(--neutral-n200, #FFFFFF) !important;
    box-shadow: 0px 4px 8px 2px rgba(0, 20, 46, 0.1);
    z-index: 100;
    max-width: 278px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.remarks-container::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: var(--neutral-n200, #FFFFFF) transparent transparent transparent;

}

.up-arrow {
    width: 0;
    height: 0;
    border: solid 5px transparent;
    background: transparent;
    border-bottom: solid 6px var(--gray-500);
    border-top-width: 0;
    cursor: pointer;
    border-radius: 2px;
}

.down-arrow {
    width: 0;
    height: 0;
    border: solid 5px transparent;
    background: transparent;
    border-top: solid 6px var(--blue-600);
    border-bottom-width: 0;
    margin-top: 1px;
    cursor: pointer;
    border-radius: 2px;
}

.active-up-arrow {
    border-bottom: solid 6px var(--blue-600) !important;
}

.inactive-down-arrow {
    border-top: solid 6px var(--gray-500);

}

.page-chevron {
    padding: 4px 8px;
    opacity: 1;
    color: var(--neutral-n700);
    height: 31px;
}

.page-chevron.active {
    color: black !important;
    /* Darker color for active */
    cursor: pointer;

}

.page-chevron.deactivated {
    color: grey !important;
    cursor: not-allowed;
    pointer-events: none;
    /* Prevent click events */
}

.attendance-all .custom-alert {
    width: 400px;
    position: fixed;
    bottom: 1%;
}

.attendance-all .success-alert {
    border: 1px solid var(--Components-Alert-Success-Border, #89D697);
    background: var(--Components-Alert-Success-Background, #E0F4E4);
    display: none;
}

.attendance-all .fail-alert {
    background: #FCE8E8 !important;
    border: 1px solid #EB9191 !important;
    display: none;
}

.lesson-created {
    background: var(--gray-50);
}

/* attendance_create.php */

/* #toast-container > .toast-success {
    background-color: #E0F4E4 !important;
    border: 1px solid #89D697 !important;
    border-radius: 4px; 
    padding: 10px !important; 
    font-family: Arial, sans-serif;
    box-shadow: none;
    text-align: left; 
}
#toast-container > .toast-success::before {
    content: none !important; 
} */
/* #toast-container {
    position: fixed;
    bottom: 0px;
    left: 270px;
    z-index: 1050;
} */
#toast-container.toast-custom-bottom-left {
    position: sticky;
    bottom: 28px;
    left: 286px;
    z-index: 1050;
    width: 400px;
    /* background: var(--Components-Alert-Success-Background, #E0F4E4);
    border: 1px solid var(--Components-Alert-Success-Border, #89D697);
    border-radius: 4px;
    padding: 10px; */
}

.error-message {
    color: var(--Theme-Danger, #AD2A2A);
}

input.form-control.error-border {
    border: 1px solid var(--Theme-Danger, #AD2A2A) !important;
}

.disabled-view {
    opacity: 0.5;
    pointer-events: none;
}


.attendance-header {
    position: fixed;
    top: 0;
    left: 258px;
    width: 100%;
    padding: 16px 28px;
    z-index: 1000;
    background-color: white;
    border-bottom: 0.5px solid var(--neutral-n300, #C9CED4);
    width: calc(100% - 258px);

}

.client-container,
.tutor-container,
.attendance-container,
.assignment-container,
.lesson-container,
.status-container {
    width: 100%;
    background: var(--neutral-n100, #F0F2F5);
    border-radius: 8px;
    padding: 20px;
    gap: 12px;
}

.reject-comment-container {
    width: 100%;
    background: var(--yellow-100);
    border-radius: 8px;
    padding: 12px;
    gap: 8px;
    display: flex;
    flex-direction: column;
}

.reject-comment-container-approve {
    width: 100%;
    background: var(--gray-100);
    border-radius: 8px;
    padding: 12px;
    gap: 8px;
    display: flex;
    flex-direction: column;
}

.reject-comment-details-container {
    display: flex;
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-radius: 8px;
    background: var(--Gray-White, #FFF);
}

.remarks-container-attendance{
    display: flex;
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--Theme-Info, #FD7E14);
    background: var(--Gray-White, #FFF);
}

/* Don't hard code width */
/* .tutor-container,
.client-container,
.lesson-container {
    min-width: 505.59px;
} */

.status-container,
.lesson-container {
    border: 1px solid var(--border);
    background: var(--neutral-n0, #FFF);
    gap: 16px;
    flex: 1;
}

.client-fee-container,
.tutor-fee-container {
    background: var(--neutral-n100, #F0F2F5);
    padding: 12px;
    border-radius: 8px;

}

.wallet-container {
    gap: 12px;
}

.required {
    color: var(--Theme-Danger, #AD2A2A);
}

.client-container>.header,
.tutor-container>.header {
    color: var(--neutral-n800, #31363D);
}

.client-container>.content,
.tutor-container>.content,
.assignment-container>.content {
    color: var(--Gray-700, var(--neutral-n700, #4D535C));
}

.client-details,
.tutor-details,
.assignment-details {
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.field {
    gap: 16px;
    align-self: stretch;
}

.field-header,
.field-content {
    flex: 1 0 0;
}

.field-header {
    max-width: 200px;
}

.view-details-container {
    padding: 4px 8px;
    gap: 8px;
    color: var(--Theme-Primary, #174787);

}

.input-field {
    margin-top: 8px;
    margin-bottom: 16px;
    padding: 7px 13px;
}

#start_time {
    margin-top: 8px;
    padding: 7px 13px;
}

.duration-btn {
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid var(--neutral-n400, #ABB0B8);
    background: var(--neutral-n0, #FFF);
}

#datepicker_start,
#timepicker_start {
    width: 100%;
    min-width: 204px;
    box-sizing: border-box;
}

.modal {
    position: fixed;
    top: -20%;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(72, 74, 77, 0.25);
    z-index: 999;
    display: none;
}

.modal-container {
    border-radius: 4.8px;
    background: var(--neutral-n0);
    box-shadow: 0px 4px 8px 2px rgba(0, 20, 46, 0.05);
    z-index: 1001;
    min-width: 550px;
}

#assignmentDetailsModal .modal-container {
    min-width: 750px;
}

.prompt .modal-container {
    max-width: 500px;
}

.modal-header {
    padding: 16px;
    font-size: 20px;
}

.modal-content-container {
    padding: 16px;
    gap: 16px;
}

.prompt .modal-content-row {
    padding: 16px;
}

.modal-btn-row {
    padding: 12px;
}

.modal-content-row {
    gap: 12px;

}

.modal-content {
    margin-bottom: 16px;
}

.modal-content-header {
    flex: 1 1 250px;
}

.bi-arrow-up-right::before,
.bi-box-arrow-up-right::before {
    color: var(--blue-700) !important;
}

.bi-chevron-down::before {
    color: var(--blue-700);
}

.bi-exclamation-circle::before {
    color: var(--Theme-Danger, #AD2A2A);
}

.bi-pencil-square::before {
    color: var(--blue-600);
}

.custom-alert {
    background-color: white;
    padding: 20px;
    gap: 16px;
    border-radius: 4px;
    border: 1px solid var(--Gray-200, #DCE0E5);
    margin: 20px 0;
}

.custom-alert.warning {
    border-left: 4px solid var(--Theme-Warning, #FAD355);
}

.custom-alert.secondary {
    border-left: 4px solid var(--neutral-n600, #6E747D);
}

.assignment-container {
    overflow: visible;
}

#asgDetailsRemarksContainer {
    min-height: 21px;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
}

#asgDetailsRemarksContainer.expanded {
    -webkit-line-clamp: unset;
    min-height: fit-content;
}


.form-check-input:checked {
    background-color: var(--blue-700) !important;
    border: none !important;
}

.form-check-input:not(:checked) {
    background-color: white !important;
    border: 1px solid var(--gray-400) !important;
}

.form-check-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.student-checkbox.is-invalid {
    border-color: var(--red-600) !important;
}

.form-check .student-checkbox.is-invalid+.form-check-label {
    color: inherit !important;
}

#datepicker_start.is-invalid,
#timepicker_start.is-invalid {
    border-color: var(--red-600, #dc3545) !important;
    background-image: none !important;
}

#datepicker_start,
#timepicker_start {
    border-color: var(--neutral, #ced4da);
}


.assignment-searchbar .input-suffix,
.starttime-dropdown .input-suffix {
    right: 5%;
}

/* attendance_edit.php */
#status_-1 {
    fill: var(--orange-600);
}

#status_0 {
    fill: var(--yellow-500);
}

#status_1,
#status_2 {
    fill: var(--blue-600);
}

#status_3 {
    fill: var(--green-600);
}

#status_4 { /* Status Not in Use */
    fill: var(--cyan-300);
} 

#status_5 { /* Status Not in Use */
    fill: var(--orange-600);
}

#status_6 {
    fill: var(--red-600);
}

.bi-exclamation-triangle-fill::before {
    color: #B29020;
}

.unapprove-alert {
    border-radius: 4px;
    border: 1px solid var(--Components-Alert-Warning-Border, #FFE07D);
    background: var(--Components-Alert-Warning-Background, #FFFAEB);
    gap: 12px;
    padding: 16px;
}

.unapprove-text {
    flex: 1;
    word-wrap: break-word;
}

.strikethrough {
    text-decoration: line-through;
}

.strikethrough-pseudo {
    position: relative;
    display: inline-block;
}

.strikethrough-pseudo::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: black;
    pointer-events: none;
}

.reject-comment-container .reject-comment-details-container {
    width: 100%;
}

.reject-comment-details-container .flex-row {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.reject-comment-details-container .row-header {
    flex: 0 0 40%;
    color: var(--Gray-600, #6E747D);
}

.reject-comment-details-container .row-content {
    flex: 1;
}

.bi-trash3::before {
    color: #AD2A2A;
}

.bi-trash3::before .disabled {
    opacity: 0.4;
}

.popover {
    border-radius: 4px;
    /* Rounded corners */
    border: none;
    /* Remove default border */
    background-color: var(--Gray-Black, #000) !important;
    color: #fff;
    /* White text for better contrast */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    /* Optional shadow for depth */
}

.popover .popover-body {
    background-color: var(--Gray-Black, #000) !important;
    color: #fff;
    border-radius: 4px;
    padding: 8px 12px;
    font-family: "Nunito Sans" !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
}

.popover .arrow::before,
.popover .arrow::after {
    background-color: var(--Gray-Black, #000) !important;
}

.popover {
    --bs-popover-bg: #000;
}

.popover .popover-arrow::before,
.popover .popover-arrow::after {
    border-top-color: #000 !important;
}

#submit-btn .disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

/* 
    Assignment
*/

/* assignment_create.php */
.gray-box {
    padding: 20px !important;
    /* override col styling */
    background-color: var(--gray-100);
    border-radius: 8px;
}

.outline-box {
    padding: 20px !important;
    /* override col styling */
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: #FFF;
}

hr {
    color: #212529 !important;
}

label {
    margin-bottom: 8px;
    color: var(--gray-800) !important;
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

label.form-check-label {
    margin-bottom: 0px !important;
}


.form-group {
    margin-bottom: 16px;
}

.form-group-error {
    margin-bottom: 10px ;
}

.form-control {
    border-color: var(--gray-400) !important;
    border-radius: 4px !important;
}

.form-control:focus {
    border-color: var(--blue-600) !important;
    box-shadow: none !important;
}

/* Select2 selected focused */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    box-shadow: none !important;
}

/* Select2 search focused */
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--blue-600) !important;
    box-shadow: none !important;
}

/* Select2 dropdown container focused */
.select2-container--bootstrap-5 .select2-dropdown {
    border-color: rgba(0, 0, 0, 0.05) !important;
    /* Regular Shadow */
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
}

/* Error state for Select2 */
.select2-container--bootstrap-5.select2-error .select2-selection {
    border-color: var(--red-600) !important;
    box-shadow: none !important;
}

input[type="checkbox" i] {
    width: 16px;
    height: 16px;
    border-radius: 2px;
}

.form-check-input:checked {
    background-color: var(--blue-700) !important;
    border-color: none !important;
}

.form-check-input:disabled~.form-check-label,
.form-check-input[disabled]~.form-check-label {
    opacity: 1 !important;
}

/* Bootstrap form validation */
.form-control.is-valid {
    background-image: url('../resources/img/check_circle_fill.svg') !important;
    border-color: none !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--red-600) !important;
    background-image: url('../resources/img/exclamation_circle.svg') !important;
}

.is-invalid {
    border-color: var(--red-600) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(.375em + .1875rem) center !important;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem) !important;
}

.is-invalid:focus {
    border-color: var(--red-600) !important;
    /* Darker red when focused */
}

.is-invalid.no-icon {
    background-image: none !important;
}

.is-invalid.shift-icon {
    background-position: right 33px center !important;
    /* Adjusted position */
}

.form-check-input.is-invalid {
    border-color: var(--red-600) !important;
    background-image: none !important;
}

/* Style for the label of the invalid checkbox */
.form-check-input.is-invalid+.form-check-label {
    color: var(--red-600) !important;
    /* Style the label text */
}

/* custom styling for checkboxes */
.form-check-input[type="checkbox"].is-invalid:checked {
    background-color: var(--red-600) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
    background-position: center !important;
    background-size: auto !important;
}

/* Custom styling for invalid radio buttons */
.form-check-input[type="radio"].is-invalid:checked {
    outline: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-color: var(--red-600) !important;
    background-position: center !important;
    background-size: auto !important;
}

.is-invalid {
    border-color: var(--red-600) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(.375em + .1875rem) center !important;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem) !important;
}

.is-invalid:focus {
    border-color: var(--red-600) !important;
    /* Darker red when focused */
}

.is-invalid.no-icon {
    background-image: none !important;
}

.is-invalid.shift-icon {
    background-position: right 33px center !important;
    /* Adjusted position */
}

.form-check-input.is-invalid {
    border-color: var(--red-600) !important;
    background-image: none !important;
}

/* Style for the label of the invalid checkbox */
.form-check-input.is-invalid+.form-check-label {
    color: var(--red-600) !important;
    /* Style the label text */
}

/* custom styling for checkboxes */
.form-check-input[type="checkbox"].is-invalid:checked {
    background-color: var(--red-600) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
    background-position: center !important;
    background-size: auto !important;
}

/* Custom styling for invalid radio buttons */
.form-check-input[type="radio"].is-invalid:checked {
    outline: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-color: var(--red-600) !important;
    background-position: center !important;
    background-size: auto !important;
}

/* Bootstrap icons styling */

i {
    font-size: 14px;
    padding: 1px;
    color: var(--gray-600) !important;
}

/* Form inputs with prefix or suffix styling */
.client-hp-div,
.phone-contact-name-div,
.tutor-hp-div,
.assignment-code-div,
.start-date-div,
.end-date-div,
.markup-div,
.comms-div,
.tutor-rate-div,
.lessons-to-inv-div,
.date-container {
    position: relative;
}

.input-prefix,
.input-suffix {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: text;
}

.client-hp-div .input-prefix,
.phone-contact-name-div .input-prefix,
.tutor-hp-div .input-prefix,
.assignment-code-div .input-prefix,
.markup-div .input-prefix,
.comms-div .input-prefix,
.tutor-rate-div .input-prefix {
    left: 12px;
}

.markup-div .input-suffix,
.comms-div .input-suffix,
.start-date-div .input-suffix,
.end-date-div .input-suffix,
.tutor-rate-div .input-suffix,
.duration-div .input-suffix,
.student-detail .input-suffix,
.startTime_div .input-suffix {
    right: 12px;
}

.lessons-to-inv-div .input-suffix {
    left: 30px;
}

.tutor-hp-div i.input-prefix {
    left: 48.2px;
    /* 12px + 28.2px + 8px */
}

/* Add space to prevent text overlap with the prefix */
/* form-control left padding + width of prefix + 2px icon left & right padding + padding between icon & cursor + width of icon + padding between icon & cursor */
.tutor-hp-div .form-control {
    padding-left: 68.2px;
    /* 12px + 26.2px + 2px + 8px + 16px + 4px */
}

/* form-control left padding + width of prefix + 2px icon left & right padding + padding between icon & cursor */
.client-hp-div .form-control,
.markup-div .form-control,
.comms-div .form-control,
.tutor-rate-div .form-control {
    padding-left: 32px;
    /* 12px + 14px + 2px + 4px */
}

/* form-control left padding + width of prefix + padding between icon & cursor */
.assignment-code-div .form-control {
    padding-left: 29px;
    /* 12px + 9px + 8px */
}

/* Override select2 bootstrap theme */
.select2-results__option {
    /* Override font style to 'regular' */
    color: var(--gray-900) !important;
    font-family: "Nunito Sans";
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 150% !important;
}

/* Style each option element */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    padding: 4px 16px !important;
}

/* Style the selected option in the dropdown */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: var(--gray-100) !important;
    color: var(--gray-900);
}

/* Make the selected option a flex container */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    display: flex;
    /* Flexbox for alignment */
    justify-content: space-between;
    /* Space between text and tick */
    align-items: center;
    /* Vertically center items */
    background-color: var(--gray-200) !important;
    color: var(--gray-900);
}

/* Add the tick icon at the end */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected::after,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted)::after {
    /* Use an image instead of Font Awesome */
    content: "";
    /* No content for pseudo-element */
    display: inline-block;
    width: 16px;
    /* Set the width of the image */
    height: 16px;
    /* Set the height of the image */
    background-image: url('../resources/img/check_lg.svg');
    /* Path to your checkmark image */
    background-size: contain;
    /* Ensure the image fits */
    background-repeat: no-repeat;
    /* Prevent repeating */
    margin-left: 8px;
    /* Space between text and image */
    vertical-align: middle;
    /* Align the image properly */
}

/* Style the selected option in the dropdown */
.select2-container--default .select2-results__option--selected {
    background-color: var(--gray-100) !important;
    color: var(--gray-900) !important;
}

/* Change the hover color */
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--gray-100) !important;
    color: var(--gray-900) !important;
}

/* Search bar container  */
span.select2-search.select2-search--dropdown {
    padding: 16px 8px 8px 8px !important;
}

/* Country code prefix */
span.select2-selection.select2-selection--single[aria-labelledby="select2-country_code-container"] {
    border-radius: 4px 0px 0px 4px !important;
    border-color: var(--gray-400) !important;
    background-color: var(--gray-200) !important;
    padding: 6px 12px !important;
    border-right: 0px;
}

/* All select2 */
span.select2-selection.select2-selection--single {
    border-radius: 4px !important;
    border-color: var(--gray-400) !important;
    padding: 6px 12px !important;
}

/* Select2 error state */
.is-invalid+.select2-container .select2-selection--single {
    border-color: var(--red-600) !important;
}

/* Reset the border bottom of country code to solid instead of transparent */
.select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection {
    border-bottom: 1px solid var(--gray-400) !important;
}

/* Set the width of country code */
/* span.select2.select2-container.select2-container--bootstrap-5 {
    width: 30px !important;
} */

/* Match bootstrap form input height */
.input-group .select2-container--bootstrap-5 .select2-selection {
    height: calc(2.25rem + 2px) !important;
}

/* Client contact number */
input#client_hp {
    border-radius: 0px 4px 4px 0px !important;
    border: 1px solid var(--gray-400);
}

.align-items-inline {
    display: flex;
    align-items: center;
}

/* Override bootstrap disabled theme for select2 */
/* [attribute*="value"]: Matches elements whose attribute contains the specified substring */
.select2-container--bootstrap-5.select2-container--disabled .select2-selection:not([aria-labelledby*="select2-subcategory"]) {
    background-color: #fff ;
}

.select2-container--bootstrap-5.select2-container--disabled .select2-selection {
    background-color: var(--gray-200) !important;
}

.work-phone-div {
    margin: 16px 0px;
}

/* assignment_individual.php */

/* Header */
.warninglabel{
    background-color: var(--Theme-Warning, #FAD355);
    display: flex;
    padding: 3px 9px;
    justify-content: center;
    align-items: center;
    margin-left:16px;
    border-radius: 4px;
}

.cancellabel{
    background: var(--Theme-Secondary, #6E747D);
    display: flex;
    padding: 3px 9px;
    justify-content: center;
    align-items: center;
    margin-left:16px;
    margin-bottom: 0 !important;
    border-radius: 4px;
    color: var(--gray-white, #FFF) !important;

}

.assignment-card {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 8px;
    background: var(--gray-50);
}

.details-title {
    width: 153px;
    margin-right: 16px;
}

.horizontal-line {
    width: 100%;
    /* Full width */
    height: 1px;
    /* Thickness */
    background-color: #ccc;
    /* Line color */
}

.copyBtn {
    border: none;
    background: none;
    opacity: 0.5;
    margin-left: 4px;
    cursor: pointer;
}

.copy-row {
    width: auto;
    flex-grow: 1;
    flex-basis: min-content;
}

.one-col-graybox {
    gap: 16px;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.custom-tooltip {
    /* not styled yet */
    display: flex;
    max-width: 40vw;
    width: 40vw;
    color: #000;
    /* Black text */
    padding: 4px 8px;
    border-radius: 4px;
    /* Optional rounded corners */
    text-align: left;
    /* Align text to the left */
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    white-space: normal;
}

.tooltip-wrapper:hover .tooltip-content {
    display: flex;
}

/* First Topup */
.firsttopmodal{
    justify-content: center;
    width: 500px;
    margin-bottom: 28px;
    opacity: 1 !important;
}

.firsttopmodal.show-modal{
    animation: floatDown 0.3s ease-out forwards;
}

.firsttopmodal.hide-modal {
    animation: floatUp 0.4s ease-in forwards;
}

/* Assignment Details Edit */
.btn-primary-version{
    border-radius: 3.2px;
    border: 1px solid var(--Theme-Primary, #174787);
    background: var(--Gray-White, #FFF);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--Theme-Primary, #174787);
}

.invisiblebtn {
    border: none;
    background-color: transparent;
}

/* The sections */
.disabled-subsection, .disabled-header, .disabled-section {
    opacity: 0.5;
    pointer-events: none;
}

.active-subsection {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.assign-remark{
    padding-bottom:16px; 
    align-items:flex-start; 
    width: 100%; 
    position: relative; 
    background-color: white; 
    border-radius: 4px; 
    border: 1px solid var(--Theme-Info, #FD7E14);
}

/* Common main container styles */
.assignment-edit-main-container {
  display: flex;
  flex-direction: column;
  margin-top: 8px;    
  margin-bottom: 8px;  
  gap: 8px;            
  width: 100%;         
}

/* Modifier for grid layout */
.assignment-edit-main-container--grid {
  display: grid;
  column-gap: 24px;
}

/* Modifier for half-width container */
.assignment-edit-main-container--half-width {
  width: 50%;
}

/* Modifier for smaller top margin */
.assignment-edit-main-container--mt-4 {
  margin-top: 4px;
}

/* Modifier for larger gap */
.assignment-edit-main-container--gap-16 {
  gap: 16px;
}

/* Modifier for 45% width */
.assignment-edit-main-container--width-45 {
  width: 45%;
}

/* Modal Edit Assignment */
.assignment-edit-modal-container {
    border-radius: 4.8px;
    background: var(--neutral-n0);
    box-shadow: 0px 4px 8px 2px rgba(0, 20, 46, 0.05);
    z-index: 1001;
    width: 52%;
}

.change-made-container{
    border-radius: 8px;
    background: var(--Gray-100, #F0F2F5);
    display: flex;
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}

.assignment-modal-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 20px;
    align-items: center;
    width: 100%;
}

.assignment-edit-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.assignment-edit-new { 
    text-align: left;
    min-width: 0;
}

.assignment-arrow {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
}

.comms_dropdown_input{
    display: flex;
    gap: 16px;
}

.commission_container{
    display: grid;
    gap: 8px;
}

.collapsible-content.active {
    display: block !important;
}

.comms_dropdown{
    margin-bottom: 16px;
}

.rate-input.disabled, #comms_freq_dropdown.disabled, #rebate_duration_dropdown.disabled, 
#comms_freq_dropdown_wrapper_dropdown.disabled{
    border-radius: 3.2px;
    border: 1px solid var(--gray-400) !important;
    background: var(--gray-200) !important;
    opacity: 1 !important;
}

.dropdown-icon{
    position: absolute; 
    -webkit-text-stroke: 1.5px; 
    top:50%;
    right:10px;
    transform:translateY(-50%); 
    pointer-events:none;
}

#history-navbar {
    height: 100%;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--gray-100);
     z-index: 5;
}

/* Assignment Discontinuation*/
.notif-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.notif-text {
    color: var(--gray-800);
    font-size: 16px;
    text-align: left;
}

.btns .btn {
    margin: 4px 4px;
}

.icon-text-wrap {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    padding-right: 16px;
}

#discontinuationModal {
    top: 15% !important;
    --bs-modal-width: 560px !important;
}

#discontinuationModal[aria-hidden=true] {
    display: none;
}

#cancelDiscontinuationModal {
    top: 20% !important;
}

#cancelDiscontinuationModal[aria-hidden=true] {
    display: none;
}

#fakeCancelDiscontinuationModal {
    top: 20% !important;
}

#fakeCancelDiscontinuationModal[aria-hidden=true] {
    display: none;
}

#dropdownICButton {
    width: 50%;
}

.btn.dropdown-toggle::after {
    content: none;
    /* Remove the default chevron */
}

.callout {
    padding: 20px;
    border-radius: 4px;
    border: 1px solid var(--gray-200);
    background: #FFF;

}

.callout-warning {
    border-left: 5px solid var(--yellow-400);
}

.callout-danger {
    border-left: 5px solid var(--red-600);
}

.callout-default {
    border-left: 5px solid var(--gray-600);
}

.notif-comment {
    color: var(--gray-700);
    font-size: 14px;
}

/* Check mark for selected item */
.dropdown-menu-custom .dropdown-item-continuation.selected-item::after {
    content: '';
    background-image: url('../resources/img/check_lg.svg');
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Continuation Modals */
.continuation-modal-container{
    display: flex;
    flex-direction: column;
    border-radius: 4.8px;
    border: 1px solid var(--Components-Modal-Border, rgba(0, 0, 0, 0.20));
    background: var(--Gray-White, #FFF);
    width: 75%;
    height: 1150px; 
    position: relative;
}

#markup-valid-icon {
  position: absolute;
  right: 12px;
  top: 46%;
  transform: translateY(-50%);
  color: var(--red-600) !important;
}

.suffix-input-error {
    right: 30px !important;
}

/* Target tooltips with the custom class "discon-tooltip" */
.tooltip.discon-tooltip {
    width: 400px !important;
    height: 100px !important;
}

.tooltip.discon-tooltip .tooltip-inner {
    width: 400px !important;
    height: 100px !important;

    max-width: 400px !important;
    max-height: 100px !important;

    min-width: 400px !important;
    min-height: 100px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    text-align: left !important;
}

.dropdown-menu-ic {
    transform: none !important;
    width: 50% !important;
}

.unfilled {
    border: 1px solid var(--red-600) !important;
}

.unfilled:focus {
    border: 1px solid var(--red-600) !important;
    box-shadow: none !important;
}

.radios .unfilled {
    border: 1px solid var(--red-600) !important;
    box-shadow: none !important;
}

.radios .unfilled:not(:checked) {
    border: 1px solid var(--red-600) !important;
    box-shadow: none !important;
}

.warning-text {
    line-height: 21px;
}

.update-alert {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
}

.summarypos{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}

/* Cancel & Restore Assignment */
#cancelrestoreassignment-background {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(72, 74, 77, 0.25);
    z-index: 999;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Assignment_cancel_popup{
    flex-direction: column;
    border-radius: 4.8px;
    border: 1px solid var(--Components-Modal-Border, rgba(0, 0, 0, 0.20));
    background: var(--gray-white, #FFF);
    width: 550px;
    height: 224px;
}

#cancelAssignmentModal {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -20%);
    background: white;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    width: 500px;
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.2s ease-out;
    z-index: 1000;
}

#cancelAssignmentModal.show-modal {
    opacity: 1 !important;
    transform: translate(-50%, -20%);
}

.assignment_restore_popup{
    flex-direction: column;
    border-radius: 4.8px;
    border: 1px solid var(--Components-Modal-Border, rgba(0, 0, 0, 0.20));
    background: var(--gray-white, #FFF);
    width: 550px;
    height: 224px;
}

#RestoreAssignmentModal {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -20%);
    background: white;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    width: 500px;
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.2s ease-out;
    z-index: 1000;
}

#RestoreAssignmentModal.show-modal {
    opacity: 1 !important;
    transform: translate(-50%, 0%);
}

/* 
    Tutor Payments
*/
.tutor-payment-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.search-container {
    gap: 12px;
}

#search-input {
    max-width: 50vw;
    z-index: 0;
}

.input-group .btn {
    z-index: 1;
}

.default-tab {
    color: var(--gray-700) !important;
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    margin-bottom: 0 !important;
}

.default-tab:active,
.default-tab:focus,
.nav-item .active {
    color: var(--blue-600) !important;
    border: none !important;
    border-bottom: 2px solid var(--blue-600) !important;
    margin-bottom: 0 !important;
}

.status-circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    font-size: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.to-send-color {
    background-color: var(--gray-100) !important;
}

.pending-color{
    background-color: var(--gray-200) !important;
}

.statement-sent-color {
    background-color: var(--blue-50) !important;
}

.to-pay-color {
    background-color: var(--yellow-100) !important;
}

.paid-color {
    background-color: var(--green-50) !important;
}

.pending-payment-color {
    background-color: var(--cyan-50) !important;
}

.pending-top-up-color {
    background-color: var(--red-50) !important;
}

.pending-adjustment-color {
    background-color: var(--orange-50) !important;
}

.missing-payment-color {
    background-color: var(--indigo-50) !important;
}

.circle-to-send-bg-color {
    background-color: var(--gray-600) !important;
}

.circle-statement-sent-bg-color {
    background-color: var(--blue-600) !important;
}

.circle-to-pay-bg-color {
    background-color: var(--yellow-700) !important;
}

.circle-paid-bg-color {
    background-color: var(--green-600) !important;
}

.circle-pending-payment-bg-color {
    background-color: var(--cyan-300) !important;
}

.circle-pending-top-up-bg-color {
    background-color: var(--red-600) !important;
}

.circle-pending-adjustment-bg-color {
    background-color: var(--orange-600) !important;
}

.circle-missing-payment-bg-color {
    background-color: var(--indigo-500) !important;
}

.past-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination-container {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--gray-700);
}

#pagination-info {
    margin-right: 8px;
}

.pagination-btn {
    background: none;
    border: none;
    color: var(--gray-800);
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
}

.pagination-btn:disabled {
    color: var(--gray-600);
}

#tab-content {
    padding-bottom: 20vh;
}

.table-statement {
    margin-top: 12px;
    border-radius: 4px;

    th {
        border: none;
    }

    .multiselect {
        border-right: none;
        align-content: center;
        border-left: 1px solid var(--border);
    }

    .tutor-details {
        border-left: none;
    }

    .table-heading {
        color: var(--gray-600);
        align-content: center;

    }

    .status {
        border-right: 1px solid var(--border);
    }

    .update-payment-method {
        background-color: var(--yellow-400);
        border-radius: 4px;
        font-size: 12px !important;
        line-height: 100% !important;
    }

    .new-payment-method{
        background-color: #258437;
        border-radius: 4px;
        color: #FFF !important ;
        font-size: 12px !important;
        line-height: 100% !important;
    }

    .dropdown-menu {
        width: 100%;
    }

    .toggle-icon {
        padding: 0 !important;
        width: 10px;
        height: 10px;
        font-size: 10px;
        margin-left: 8px;
        color: var(--gray-800) !important;
    }

    .dropdown-toggle::after {
        display: none !important;
    }

    .dropdown-toggle {
        border: 0 !important;
    }

    .item-wrapper {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: 99px;
        padding: 2px 12px;
        max-width: 100%;
        cursor: inherit !important;
    }

    .dropdown-item:hover {
        background-color: var(--gray-100);
    }

    .paid-date {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 4px;
    }

    .rewrite-date {
        cursor: pointer !important;
    }

    .filter-status {
        width: auto !important;
        left: auto !important;
        right: 0 !important;
    }
}

.dropdown-menu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.dropdown-menu a:hover,
a.selected,
a.active {
    background-color: var(--gray-100);
    color: inherit;
}

#filterDropdown .hide {
    visibility: hidden !important;
}

.btn-filter {
    background-color: var(--gray-200) !important;
    color: var(--gray-800) !important;
    border-color: var(--gray-400) !important;
    font-size: 12px !important;
    display: flex;
    flex-direction: row;
    padding: 0 4px 0 8px;
    gap: 4px;
    cursor: default !important;
    overflow: hidden;
}

.filter-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70px;
}

.bi-x {
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.table-heading .hide {
    display: none !important;
}

.btn-filter-dropdown {
    padding: 2px 0 !important;
}

.multiselect .hide {
    display: none !important;
}

.hide {
    display: none !important;
}

.statement-notification {
    position: absolute !important;
    left: 284px;
    bottom: 28px;
    padding: 16px;
    line-height: 1 !important;
    text-align: left;
    display: flex;
    width: 400px;
    padding: 16px;
    align-items: flex-start;
    gap: 8px;
}

.no-result {
    position: fixed;
    top: 30%;
    left: 60%;
    transform: translate(-50%, -50%);
}

.payment-date-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.payment-details-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-details-box {
    padding: 12px;
    gap: 12px;
    display: flex;
    flex-direction: column;
    background-color: var(--gray-100);
    border-radius: 8px;
}

.detail {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    flex-direction: row;
}

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent background */
    z-index: 9999;
    /* Ensure it sits above other elements */
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-toggle.unpaid-color:hover {
    background-color: var(--gray-200) !important;
}

.dropdown-toggle.paid-color:hover {
    background-color: var(--green-100) !important;
}

.dropdown-toggle.pending-payment-color:hover {
    background-color: var(--cyan-100) !important;
}

.dropdown-toggle.unpaid-color:focus,
.dropdown-toggle.unpaid-color:active,
.dropdown-toggle.unpaid-color:focus-within {
    background-color: var(--gray-200) !important;
    border: 1px solid var(--gray-300) !important;
}

.dropdown-toggle.paid-color:focus,
.dropdown-toggle.paid-color:active,
.dropdown-toggle.paid-color:focus-within {
    background-color: var(--green-100) !important;
    border: 1px solid var(--green-200) !important;
}

.dropdown-toggle.pending-payment-color:focus,
.dropdown-toggle.pending-payment-color:active,
.dropdown-toggle.pending-payment-color:focus-within {
    background-color: var(--cyan-100) !important;
    border: 1px solid var(--cyan-200) !important;
}

.spinner-container {
    gap: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

.spinner-secondary-container {
    border-radius: 4.8px;
    width: 35vw;
    /* background-color: white; */
    display: flex;
    padding: 28px 16px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.text-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
}

.spinner-size {
    width: 40px !important;
    height: 40px !important;
}

/* 
    Modal
*/

.transactions-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    background: white;
    flex-direction: column;
    border-radius: 4.8px;
    opacity: 0;
    transform: translate(-50%, -60%); /* Ensure it starts off-screen */
}

.transactions-popup.show-modal {
    animation: floatDown 0.4s ease-out forwards; /* Floating down effect */
}

.transactions-popup.hide-modal {
    animation: floatUp 0.4s ease-in forwards; /* Floating up effect */
}

#popup-background {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(72, 74, 77, 0.25);
    z-index: 999;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.popup-hr {
    border: 1px solid var(--Components-Modal-Border, rgba(0, 0, 0, 0.20));
    margin: 0;
}

#transaction-popup-background{
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(72, 74, 77, 0.25);
    z-index: 999;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

#voidbackground {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(72, 74, 77, 0.25);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.transaction-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    background: white;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    width: 538px;
    height: 212px;
    margin-bottom: 16px;
    opacity: 0;
    transform: translate(-50%, -30%);
    z-index: 1000;
}

.transaction-modal.show-modal {
    animation: floatDown 0.4s ease-out forwards;
}

.transaction-modal.hide-modal {
    animation: floatUp 0.4s ease-in forwards;
}


#transactionRemarkModal.show-modal {
    opacity: 1 !important;
    transform: translateY(0);
}

.transaction-modal-header{
    border-bottom: 1px solid #dee2e6 !important;
    padding: 16px !important;
}

.transaction-modal-body{
    padding: 16px !important;
}

.transaction-modal-footer{
    border-top: 1px solid #dee2e6 !important;
    padding: 12px !important;
    height: 71px !important;
}

.transaction-modal-container{
    width: 100%;
}

.modal-footer{
    justify-content: end;
}


/* 
    IC
*/
.ic-select {
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid var(--neutral-n400, #ABB0B8);
    background: var(--neutral-n0, #FFF);
}

.ic-select.selected {
    border: 1px solid var(--Components-Input-Focused-Border, #174787);
}

.ic-dropdown {
    padding: 8px 0;
    position: absolute;
    background: var(--neutral-n0, #FFF);
    border-radius: 4px;
    border: 1px solid var(--Components-Dropdowns-Border, rgba(0, 0, 0, 0.15));
    z-index: 1000;
}

.ic-option {
    padding: 4px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ic-option:hover {
    background: var(--Gray-100, #F0F2F5);
}

.ic-option.selected {
    background: var(--Gray-200, #DCE0E5);
}