/* 
Use this Index.css if your styling is being used in multiple pages.
If you want put your styling in the page your working on, 
ensure the name does not conflict with the index.css names and rename them (not the index.css) if it does.
Use the search function, ctrl+f to find the name of the class you want to use/find.

=== Content ===
1) GLOBAL
2) PAGES
3) ERROR STATES (MFE-2223)
*/

/* 
============== GLOBAL =================
Content :
1) GENERAL
2) COLOURS
3) FONTS
4) TEXT
4.1) TEXT COLOUR
4.2) TEXT ALIGN
4.3) TEXT BOX
5) HEADINGS
6) LAYOUTS
7) DISPLAY
8) ICONS
8.1) icon buttons 
9) BUTTONS
10) CAPTION
11) GREY-BOX
12) GREY LINES
13) TABS
14) ANIMATION
15) BOTTOM-UP SHEET
16) NOTIFICATION
17) INPUTS
18) FORM INPUTS
19) SWITCH TOGGLE
20) MODAL + OVERLAY
21) OTHERS
*/

/* GENERAL */
/* button,
a,
input,
textarea {
  -webkit-tap-highlight-color: transparent; 
  -webkit-touch-callout: none; 
  outline: none;
  box-shadow: none;
}

*:focus {
  outline: none;
  box-shadow: none;
} */

* {
    font-family: "Nunito Sans";
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    cursor: default !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    cursor: default !important;
}

input,
textarea,
select {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  cursor: text !important;
}

body {
    overflow-y: auto;
    user-select: none;
    -ms-overflow-style: none;  /* For Internet Explorer and Edge */
    scrollbar-width: none;     /* For Firefox */
}

/* Hide scrollbar for all modern browsers */
body::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}

.internal-body{
    padding: 0px 16px;
}

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

.body-1-sb {
    color: var(--neutral-n800, #31363D) !important;
    font-family: "Nunito Sans";
    font-size: 16px !important;
    font-style: normal;
    font-weight: 600 !important;
    line-height: 140% !important;
    letter-spacing: -0.05px !important;
}

.body-2 {
    color: var(--neutral-n700);
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 135%;
    letter-spacing:  -0.1px;
}

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

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

.overflow{
    overflow: auto;
}

.sticktotop{
    position: sticky;
    top:0;
    z-index: 1000;
}

.disabled{
    cursor: not-allowed;
}


/* 
    HEADER ROW
*/
#header-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 8px;
    padding-bottom: 8px;
    align-items: center;
}


/* 
    COLOURS
*/
:root {
    --primary-p50: #E1ECFA;
    --primary-p100: #CBDEF7;
    --primary-p200: #A5C1E5;
    --primary-p300: #799FD1;
    --primary-p400: #4D79B2;
    --primary-p500: #33609E;
    --primary-p600: #174787;
    --primary-p700: #02285B;
    --primary-p800: #011F47;
    --primary-p900: #00142E;

    --secondary-s50: #FFFAEB;
    --secondary-s100: #FFF4CF;
    --secondary-s200: #FFEBA8;
    --secondary-s300: #FFE07D;
    --secondary-s400: #FAD355;
    --secondary-s500: #E8C24A;
    --secondary-s600: #CCAA39;
    --secondary-s700: #B29020;
    --secondary-s800: #96770F;
    --secondary-s900: #7A5E00;

    --neutral-n0: #FFFFFF;
    --neutral-n50: #F4F6F7;
    --neutral-n100: #F0F2F5;
    --neutral-n200: #DCE0E5;
    --neutral-n300: #C6C9CC;
    --neutral-n400: #ADAFB2;
    --neutral-n500: #91979E;
    --neutral-n600: #6E7073;
    --neutral-n700: #4D535C;
    --neutral-n800: #31363D;
    --neutral-n900: #19191A;

    --system-danger-100: #EDADAD;
    --system-danger-400: #D96464;
    --system-danger-600: #AD2A2A;
    --system-danger-700: #8F0000;

    --system-success-100: #BFEEAE;
    --system-success-400: #25680D;
    --system-success-700: #0D681E;
}

/* 
    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
*/
.large {
    font-family: "Nunito Sans" !important;
    font-size: 24px !important;
    font-style: normal !important;
    font-weight: 650 !important;
    line-height: normal !important;
}

.sm{
    font-family: "Nunito Sans" !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !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) !important;
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

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

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

.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: 400;
    line-height: 150%;
    /* 21px */
    text-decoration-line: underline;
}

.small-bold {
    font-family: "Nunito Sans";
    font-size: 14px;
    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: 400;
    line-height: 150%;
}

.extra-small {
    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%;
}

/* 
    TEXT COLOUR
*/
.text-primary {
    color: var(--primary-p700) !important;
}

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

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

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

.text-success {
    color: var(--system-success-400) !important;
}

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

/* 
    TEXT ALIGN
*/
.text-center {
    text-align: center;
}

/* 
    TEXT BOX
*/

.text-box-sm {
    border: 1px solid var(--neutral-n200);
    padding: 10px;
    width: 100%;
    border-radius: 2px;
    box-sizing: border-box; /* Include padding and border in the element's total width */
    resize: none; /* Prevent manual resizing */
    max-height: calc(5 * 1.5em); /* Maximum height for 5 lines */
    min-height: 1.5em; /* Minimum height for 1 line */
    transition: height 0.2s ease; /* Smooth transition for height */
}

.text-box-sm:hover {
    border: 1.5px solid var(--primary-p600);
}

.text-box-sm:active {
    border: 1px solid var(--primary-p700);
}

.text-box-sm.has-text {
    border: 1px solid var(--neutral-n400);
}
.text-box-rg {
    border-radius: 4px;
    background: var(--neutral-n0, #FFF);
    padding: 12px;
    max-height: 343px;
}

.text-box-rg:focus {
    border: 1px solid var(--primary-p700);
    outline: none;
}

.text-box-rg.filled {
    color: var(--neutral-n800);
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 135%;
    letter-spacing: -0.1px;
}

.text-box-rg::placeholder {
    color: var(--neutral-n600, #6E747D);
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 135%;
    letter-spacing: -0.1px;
}

/* 
    HEADINGS
*/
h1 {
    color: var(--primary-p700);
    font-family: Alta;
    font-size: 32px;
    font-style: normal;
    font-weight: 400; 
    line-height: 110%;
    letter-spacing: 0.032px;
}

h2 {
    color: var(--neutral-n800);
    font-family: 'Alta', san-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 33px */
    letter-spacing: 0.03px;
}

h3 {
    color: var(--neutral-n800);
    font-family: 'Alta', san-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 30.8px */
    letter-spacing: 0.028px;
}

h4 {
    color: var(--neutral-n800);
    font-family: "Nunito Sans";
    font-size: 26px;
    font-style: normal;
    font-weight: 650;
    line-height: 145%; /* 37.7px */
    letter-spacing: -0.1px;
}

h5 {
    color: var(--neutral-n800);
    font-family: 'Alta', san-serif;
    font-size: 22px;
    font-style: normal;
    line-height: 140%; /* 33.6px */
    letter-spacing: -0.024px;
}

h6 {
    color: var(--neutral-n800);
    font-family: "Nunito Sans";
    font-size: 22px;
    font-style: normal;
    font-weight: 650;
    line-height: 135%; /* 29.7px */
    letter-spacing: -0.05px;
}

.sub-heading-1 {
    color: var(--neutral-n800);
    font-family: "Nunito Sans";
    font-size: 19px;
    font-style: normal;
    font-weight: 650;
    line-height: 135%; /* 25.65px */
    letter-spacing: 0.1px;
}

.sub-heading-2 {
    color: var(--neutral-n800);
    font-family: "Nunito Sans";
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 23.8px */
    letter-spacing: -0.1px;
}

/* 
    LAYOUTS
*/

/* Add other types based on bootstrap margin 
    p: padding
    m: margin
    t: top
    b: bottom
    y: top & bottom
    x: left & right
    r: right
    l: left

    Note: Increment is 4px
*/

.p-2 {
    padding: 12px;
}

.py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}

.pt-1, .py-1 {
    padding-top: 12px;
}

.pt-2, .py-2 {
    padding-top: 16px;
}

.pt-3, .py-3 {
    padding-top: 20px;
}

.pt-4, .py-4 {
    padding-top: 24px;
}

.pb-1, .py-1 {
    padding-top: 12px;
}

.pb-2, .py-2 {
    padding-bottom: 16px;
}

.pb-3, .py-3 {
    padding-bottom: 20px;
}

.pb-4, .py-4 {
    padding-bottom: 24px;
}

.mt-1, .my-1 {
    margin-top: 12px;
}

.mt-2, .my-2 {
    margin-top: 16px;
}

.mt-3, .my-3 {
    margin-top: 20px;
}

.mt-4, .my-4 {
    margin-top: 24px;
}

.mb-1, .my-1 {
    margin-bottom: 12px;
}

.mb-2, .my-2 {
    margin-bottom: 16px;
}

.mb-3, .my-3 {
    margin-bottom: 20px;
}

.mb-4, .my-4 {
    margin-bottom: 24px;
}

.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-gap-2 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.flex-col-gap-4 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.flex-col-gap-8 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flex-col-gap-12 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flex-col-gap-16 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.flex-row-gap-4 {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.flex-row-gap-8 {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.flex-row-gap-12 {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.flex-row-gap-16 {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.flex-row-gap-16 > div {
    flex: 1;
}

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

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

.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;
}

.d-flex {
    display: flex;
}

/* 
    DISPLAY
*/
.display-rg {
    color: var(--neutral-n800);
    font-family: 'Alta', san-serif;
    font-size: 32px;
    font-style: normal;
    line-height: 115%; /* 41.4px */
    letter-spacing: 0.036px;
}

.display-light {
    color: var(--neutral-n800);
    font-family: 'Alta', san-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 115%; /* 41.4px */
    letter-spacing: -0.09px;
}


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

.icon-2xs {
    width: 14px;
    height: 14px;
}

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

.icon-s {
    width: 20px;
    height: 20px;
}

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

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

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

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

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

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

span.material-symbols-outlined.icon-400-fill.clear-btn-color {
    color: var(--neutral-n600);
}

.material-icons--rounded {
    font-family: "Material Icons Round";
}

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

.bi-exclamation-circle-fill{
    color: var(--system-danger-600);
    font-size: 16px;
}

/* 
    icon buttons 
*/
.icon-button {
    display: inline-flex;
    padding: 3px;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    border: 1px solid var(--neutral-n300);
    background: var(--neutral-n0);
}

/* NOTE: should use icons instead of image */
/* .icon-button-circle:active{
    border-radius: 99px;
    background: var(--neutral-n200, #DCE0E5);
} */

/* (for - + buttons) */

.icon-button.clicked {
    border: 1px solid var(--primary-p300);
    background: var(--primary-p50);
}

.icon-button.inactive {
    border: 1px solid var(--neutral-n200);
    cursor: not-allowed;
    opacity: 0.5;
}

/* 
    BUTTONS
*/

.button {
    padding: 10px 12px;
    text-align: center;
    border-radius: 4px;
}

.button-primary {
    background: var(--primary-p600);
    color: var(--neutral-n0);
    border: 1px solid var(--primary-p600) !important;
}

.button-primary.disabled {
    background: #8093AD;
    cursor: not-allowed;
    pointer-events: none;
    border: none !important;
}

.button-secondary {
    border: 1px solid var(--primary-p600) !important;
    background: var(--neutral-n0);
    color: var(--primary-p600);
}

.button-secondary:active {
    background: var(--primary-p50);
    border-color: var(--primary-p600);
}

.button-secondary.disabled {
    border: 1px solid var(--primary-p600);
    opacity: 0.5;
    background: var(--neutral-n0, #FFF);
    cursor: not-allowed;
}

.button-danger {
    background: var(--system-danger-600, #AD2A2A);
    color: var(--neutral-n0);
}

.button-text {
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 650;
    line-height: 130%; /* 20.8px */
    letter-spacing: 0.1px;
}

.button-text-sm {
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 650;
    line-height: 125%; /* 17.5px */
    letter-spacing: 0.2px;
}

.button-lg{
    display: flex;
    padding: 15px 16px;
    flex-direction: column;  
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-radius: 3px !important;
    border: none;
}

.button-rg {
    display: flex;
    padding: 9px 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.text-btn{
    border: none;
    background-color: transparent;
}

.button-sm{
    display: flex;
    padding: 4px 6px 4px 10px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    flex: 1 0 0;
    border-radius: 4px;
}

/* 
    CAPTION
*/
.caption {
    color: var(--neutral-n800);
    font-family: "Nunito Sans";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 135%;
    letter-spacing: -0.1px;
}

.caption-sb {
    color: var(--neutral-n700);
    font-family: "Nunito Sans";
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 135%;
    letter-spacing: -0.05px;
}

.caption-pwd {
    color: var(--neutral-n800);
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.4px;
}
.calendar-caption {
    color: var(--neutral-n800);
    font-size: 12px;
    font-weight: 400;
    line-height: 130%; /* 15.6px */
    letter-spacing: -0.1px;
}

/* 
    GREY-BOX
*/
.grey-box-title {
    color: var(--neutral-n800);
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.4px;
}

.grey-box-content {
    color: var(--neutral-n800);
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.4px;
}

/* 
    GREY LINES
*/

.grey-separator {
    width: 100%;
    height: 8px;
    background: var(--neutral-n100);
    position: absolute;
    left: 0;
    right: 0;
}

/* .grey-separator-thin-long {
    width: 100%;
    height: 1px;
    background: var(--neutral-n200);
    position: absolute;
    left: 0;
    right: 0;
    margin: 13px 0 16px 0;
} */

.grey-separator-thin-long, .grey-separator-thin-long-md {
    width: 100%;
    height: 1px;
    background: var(--neutral-n200);
    margin: 12px 0;
    display: block; /* Add this line to allow it to take available space */
}

/* Override the margin space to 24px */
.grey-separator-thin-long-md {
    margin: 24px 0;
}

.grey-separator-thin {
    width: 100%;
    height: 1px;
    background: var(--neutral-n300);
    margin: 12px 0;
}


/* 
    ANIMATION
*/

/* Floating animation */
@keyframes floatIn {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-float-in {
    animation: floatIn 0.4s forwards;
}

@keyframes floatOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-100px);
    }
}

.page-float-out {
    animation: floatOut 0.4s forwards;
}

/* Sliding from the right */
@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0); 
    }
}

.page-slide-in-right {
    animation: slideInFromRight 0.4s forwards;
}

@keyframes slideOutToRight {
    0% {
        opacity: 1;
        transform: translateX(0); 
    }
    100% {
        opacity: 0;
        transform: translateX(100%); 
    }
}
.page-slide-out-right {
    animation: slideOutToRight 0.4s forwards;
}


/* Sliding from the left */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%); 
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.page-slide-in-left {
    animation: slideInFromLeft 0.4s forwards;
}

@keyframes slideOutToLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-100%); 
    }
}
.page-slide-out-left {
    animation: slideOutToLeft 0.4s forwards;
}

/* slide up */
@keyframes slideUp {
    0% {
        bottom: -100% !important; /* Off-screen */
    }
    100% {
        bottom: 0 !important; /* Slide up to the visible position */
    }
}

/* slide down */
@keyframes slideDown {
    0% {
        bottom: 0 !important;/* visible position */
    }
    100% {
        bottom: -100% !important;  /* Slide down and off-screen */
    }
}


/* Fade */
@keyframes fadeIn {
    0% {
        opacity: 0;  
    }
    100% {
        opacity: 1;  
    }
}
.page-fade-in {
    animation: fadeIn 0.3s forwards ease-out;
}

@keyframes fadeOut {
    0% {
        opacity: 1; 
    }
    100% {
        opacity: 0; 
    }
}

.page-fade-out {
    animation: fadeOut 0.3s forwards ease-out;
}

/* Keyframes for fade in from right to left */
@keyframes fadeInLeft {
    0% {
      opacity: 0;
      transform: translateX(50px); /* start off to the right */
    }
    100% {
      opacity: 1;
      transform: translateX(0); /* normal position */
    }
  }

  .page-fade-in-left{
    animation: fadeInLeft 0.3s forwards;
  }

  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      transform: translateX(50px); /* start off to the right */
    }
    100% {
      opacity: 1;
      transform: translateX(0); /* normal position */
    }
  }

  .page-fade-in-left{
    animation: fadeInLeft 0.3s forwards;
  }
  
  /* Keyframes for fade out to the right */
  @keyframes fadeOutRight {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
    100% {
      opacity: 0;
      transform: translateX(50px);
    }
  }

  .page-fade-out-right{
    animation: fadeOutRight 0.3s forwards;
  }

/* Msg Fade in and out */
@keyframes fadeIn-msg {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeOut-msg {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/*  Push up or down */
@keyframes pushUpFromBottom {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0);
    }
  }

.page-push-up {
    animation: pushUpFromBottom 0.35s ease-out forwards;
}

@keyframes pushDownToBottom {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(100%);
    }
  }
  

.page-push-down {
    animation: pushDownToBottom 0.3s ease-in forwards;
}

@keyframes moveUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.page-move-up {
    animation: moveUp 0.4s forwards;
}


@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    75% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}

.page-shake {
    animation: shake 0.3s;
}

/* 
    TABS
*/

.tabs-container {
    display: flex;
    width: 100%;
    background-color: white;
    top: 100px;
    left: 0;
    z-index: 10;
}

.tab {
    width: 50%;
    border-bottom: 1px solid var(--primary-p700);
    padding-bottom: 12px;
    display: flex;
    justify-content: center;
    color: var(--primary-p700, #02285B);
}

.tab.inactive {
    border-bottom: 1px solid var(--neutral-n200, #DCE0E5);
    color: var(--neutral-n600, #6E747D);
}

/* 
    BOTTOM-UP SHEET
*/
.bottom-up-sheet {
    position: fixed;
    bottom: -100%; /* Starts hidden offscreen */
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: white;
    gap: 24px;
    border-radius: 12px 12px 0px 0px;
    transition: bottom 0.25s ease-out;
}

.bottom-up-sheet.slideup {
    bottom: 0; /* Slide up by setting bottom to 0 */
}

.bottom-up-sheet.slidedown {
    bottom: -100%; /* Slide down by setting bottom to -100% */
}

.bottom-up-content {
    width: 100%;
    padding: 28px 20px 40px 20px;
    border-radius: 12px 12px 0px 0px;
    background: #FFF;
    box-shadow: 0px -4px 8px 2px rgba(0, 20, 46, 0.05);
    display: flex;
    flex-direction: column;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.bottom-up-item {
    display: flex;
    align-items: center;
    display: flex;
    align-self: stretch;
    margin: 7px 0px;
}

.show-bottom-up-sheet {
    display: block;
}

.bottom-up-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(72, 74, 77, 0.25);
    z-index: 999; 
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid var(--primary-p600);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

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

.show-bottom-up-sheet .bottom-up-content {
    transform: translateY(0);
}

/* 
    NOTIFICATION
*/
.notification {
    width: calc(100% - 32px);
    height: 48px;
    position: fixed;
    padding: 12px;
    border-radius: 6px;
    backdrop-filter: blur(12px);
    bottom: -100px;
    left: 50%;
    bottom: 20px; 
    transform: translateX(-50%);
    z-index: 999;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.notification-success {
    background: rgba(1, 31, 71, 0.75);
}

.notification-error {
    background: rgba(250, 200, 200, 0.75);
}

/* 
    INPUTS
*/
.input-container {
    position: relative;
    margin: 4px 0;
}

input[type="radio"] {
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--neutral-n300);
    border-radius: 50%;
    appearance: none;
    background-color: var(--neutral-n0);
    outline: none;
    transition: all 0.1s;
}

input[type="radio"]:not(:disabled):checked {
    border-color: var(--primary-p700);
    background-color: var(--primary-p700);
    background-clip: content-box;
    padding: 0px;
    background-image: radial-gradient(
        circle  closest-side,
        var(--neutral-n0) 0%,
        var(--neutral-n0) 40%,
        transparent 50%,
        transparent 100%
    );
}

input[type="checkbox"] {
    margin: 8px;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-p600);
}

input {
    border-radius: 2px;
    border: 1px solid var(--neutral-n200, #DCE0E5);
    background: var(--neutral-n0, #FFF);
}

input:focus {
    border: 1px solid var(--primary-p700, #02285B);
    background: var(--neutral-n0, #FFF);
}

input:disabled{
    border: 1px solid var(--neutral-n200, #DCE0E5);
    background: var(--neutral-n50);    
    background: var(--neutral-n0, #FFF);
}

input.error {
    border: 1px solid var(--system-danger-600);
}

input.sucess {
    border: 1px solid var(--system-success-400, #007A00);
}

/* 
    FORM INPUTS
*/

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.error {
    color: var(--neutral-n800);
    font-weight: 400;
    border: 1px solid var(--system-danger-600) !important;  
}

.error :focus{
    color: var(--neutral-n700);
    border: 1px solid var(--system-danger-600) !important;
}

/* form-display used in duration input when creating new attendance */
.form-selector, .form-display {
    padding: 8px 12px;
    border-radius: 4px;
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    text-align: center;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    letter-spacing: -0.05px;
}

.form-selector.active {
    background: var(--primary-p50);
    color: var(--neutral-n800);
    font-weight: 600;
}

.form-selector.inactive {
    background: var(--neutral-n100);
    color: var(--neutral-n700);
    font-weight: 400;
}

.form-selector.error {
    color: var(--neutral-n700);
    font-weight: 400;
    border: 1px solid var(--system-danger-600);
    background: var(--neutral-n100, #F2F5F7);
}

/*
    SWITCH TOGGLE
*/
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--neutral-n300);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--neutral-n0);
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--primary-p700);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--primary-p700);
}

input:checked + .slider:before {
    -webkit-transform: translateX(24px);
    -ms-transform: translateX(24px);
    transform: translateX(22px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* 
    MODAL + OVERLAY
*/

.modal {
    position: fixed;
    top: 0;
    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 {
    width: 100%;
    margin: 0 18px;
    padding: 16px;
    border-radius: 8px;
    background: var(--neutral-n0);
    box-shadow: 0px 4px 8px 2px rgba(0, 20, 46, 0.05);
    z-index: 1001;
}

.bottom-modal-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 28px 16px 32px 16px;
    border-radius: 12px 12px 0px 0px;
    background: var(--neutral-n0);
    box-shadow: 0px -4px 8px 2px rgba(0, 20, 46, 0.05);
    z-index: 1000; 
}

.edit-recurring-attendance-row {
    padding: 16px 20px;
    border-bottom: 1px solid var(--neutral-n200, #DCE0E5);
    background: rgba(240, 242, 245, 0.90);
    backdrop-filter: blur(6px);
}

   .modal-overlay {
        visibility: hidden;
        opacity: 0;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        transition: opacity 0.35s cubic-bezier(.4, 0, .2, 1), visibility 0.35s;
    }

    .modal-overlay.show {
        visibility: visible;
        opacity: 1;
    }

    .modal-content {
        position: fixed;
        left: 0;
        bottom: 140px;
        width: 100%;
        background: #fff;
        border-radius: 12px 12px 0 0;
        padding: 28px 20px 40px 20px;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
        margin: 0;
        box-sizing: border-box;
        max-width: none;

        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(.4, 0, .2, 1), opacity 0.35s;
        will-change: transform;
        pointer-events: none;
        opacity: 0;
    }

    .modal-overlay.show .modal-content {
        transform: translateY(0);
        pointer-events: auto;
        opacity: 1;
    }

    .attendance-info-section{
        
    }


/* 
    OTHERS
*/
.overline {
    color: var(--neutral-n700, #4D535C);
    font-family: "Nunito Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 15.6px */
    letter-spacing: 0.75px;
}

.select-date-and-time-row {
    padding: 16px 0;
    border-bottom: 1px solid var(--neutral-n200);
}
.select-date {
    min-width: 50%;
    padding: 8px 12px;
}

.datepicker {
    position: relative;
    margin-top: 16px;
}

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

.calendar-text{
    font-family: "Nunito Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 15.6px */
    letter-spacing: -0.1px;
}

.nav-text{
    font-family: "Nunito Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 135%; /* 13.5px */
    letter-spacing: 0.1px;
}

.calendar-event-title{
    font-family: "Nunito Sans";
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 14px */
    letter-spacing: -0.1px;
}

.truncate{
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.warning_background {
    background-color: var(--secondary-s400) !important;
}

/* 
=================== PAGES ================== 
Content:
1) LOGIN_PAGE
1.2) index.php
1.2.1) Loading Modal
1.2.2) Welcome Modal
1.3) new_user.php
1.4) onboarding.php
1.5) existing_user.php
2) ASSIGNMENT_ATTENDANCE_PAGE
3) ATTENDANCE_PAGE
3.1) attendance_general
3.2) attendance.php
3.3) select_attendance_general
3.3.1) select_attendance.php
3.3.2) select_attendance_feedback.php
3.4) scheduled_lessons_general
3.4.1) scheduled_lessons.php
3.4.2) scheduled_lessons_search.php
3.4.3) scheduled_lessons_search_multiple_ids.php
3.5) new_attendance_general
3.5.1) new_attendance_search.php
3.5.2) new_attendance_create.php
3.6) edit_attendance.php
4) Calendar
5) ASSIGNMENTS_PAGE
5.1) assignment_general
5.2) Tutor assignments
5.3) Assignment details + group_rates
6) TRANSACTION
6.1) Transaction Details
7) SCHEDULE_PAGE
7.1) schedule.php
7.2) attendance_details.php
8) OTHER_PAGE
9) navbar.php
10) MEDIA_PHONE_TABLETS
10.1) PC
10.2) Tablets
*/

/* 
    LOGIN_PAGE
*/

/* 
    index.php
*/

/* Loading Modal */
.opening-body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-p800);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Ensures loading modal is on top */
}

/* Loading logo container */
.loading-logo {
    display: block;
    width: 220px; 
    height: auto;
    max-width: 70vw; 
    margin: 0 auto; 
    margin-bottom: 40vh; 
    opacity: 0;
    object-fit: contain;
    box-sizing: border-box; 
}

.loading-logo.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
    opacity: 1;
}

.loading-logo.fade-out {
    animation: fadeOut 0.4s ease-out forwards;
    opacity: 1;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.mini-logo{
    background: url('resources/img/mini-logo.png') no-repeat center center;
    background-size: contain;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    image-rendering: crisp-edges;
}

/* Welcome Modal */
.welcome-modal {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   
  align-items: center;
  padding: 0;                 
  box-sizing: border-box;
  background-color: var(--primary-p800);
}

.welcome-modal .mini-logo {
  width: 54px;
  height: 54px;
  margin-bottom: 24px; 
}

.welcome-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  width: 100%;
  padding: 0 16px; /* 16px gutters for the whole block */
  box-sizing: border-box;
}

.welcome-container.fade-in {
  animation: fadeIn 0.15s ease-out forwards;
  opacity: 1;
}

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

.welcome-header h1 {
  color: var(--neutral-n0, #FFF);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2; 
  margin: 0 0 12px 0; 
}

.welcome-content {
  width: 100%;
  margin: 40px 0 32px;
}

.welcome-button {
  width: 100%;        
  display: flex;
  justify-content: center;
  padding: 13px 16px;
  border-radius: 2px;
  margin-bottom: 16px; 
  box-sizing: border-box;
}

.welcome-modal.choose-modal .button-lg {
  width: 100%;               
  justify-content: center;    
}

.welcome-modal.choose-modal .button-lg + .button-lg {
  margin-top: 16px;
}

.welcome-modal.choose-modal .button-lg-primary {
  background: var(--primary-p600);
  color: var(--neutral-n0);
  border: none;
}

.welcome-modal.choose-modal .button-lg-secondary-white {
  background: transparent; 
  color: var(--neutral-n0);
  border: 1px solid var(--neutral-n0);
}

.wave-1 {
  width: 100%;
  height: auto;
  max-height: 50vh; /* prevent it from taking entire screen */
  object-fit: cover; /* keep proportion */
}

/* scope to Choose Role only */
.welcome-modal.choose-modal {
  position: relative;
  overflow: hidden;
}

/* ===== Continue as Client / Tutor ===== */
.client-container,
.tutor-container {
  align-items: center;
  text-align: center;
}

#client-continue #boarding_header,
#tutor-continue  #boarding_header {
  position: absolute; top: 12px; left: 12px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; cursor: pointer;
}

#client-continue .wave-2, #tutor-continue .wave-2 { pointer-events: none; } /* avoids blocking clicks */


#client-continue #go_back_btn,
#tutor-continue  #go_back_btn {
  font-size: 24px;
  width: 1em; height: 1em;
  line-height: 1;
  pointer-events: none;               
}

.client-modal .client-subtitle.body-1,
.tutor-modal  .tutor-subtitle.body-1 {
  color: var(--neutral-n200) !important;
}

.client-actions,
.tutor-actions {
  width: 100%;
  padding: 0 16px;
}

.client-modal .button-lg,
.tutor-modal  .button-lg {
  width: 100%;
  justify-content: center;
}

.client-modal .button-lg + .button-lg,
.tutor-modal  .button-lg + .button-lg {
  margin-top: 16px;   
}

.client-modal .button-lg-primary,
.tutor-modal  .button-lg-primary {
  background: var(--primary-p600);
  color: var(--neutral-n0);
  border: none;
}

.client-modal .button-lg-tertiary-2,
.tutor-modal  .button-lg-tertiary-2 {
  background: transparent;
  border: 1px solid var(--neutral-n0);
  color: var(--neutral-n0);
}

.client-modal,
.tutor-modal {
  position: relative;     
  overflow: hidden;
}

.wave-2 {
  width: 100%;
  height: auto;
  max-height: 50vh; /* prevent it from taking entire screen */
  object-fit: cover; /* keep proportion */
}

/* 
    new_user.phpscoups13
*/

/* This class also use in existing_user.php */
.show-password-btn{
    position: absolute; 
    right: 10px; 
    top: 50%; 
    transform: translateY(-50%); 
    background: none; 
    border: none; 
    justify-content: center;
    align-items: center;
}

.boarding-body {
    font-family: Arial, sans-serif;
    background-color: #FFFFFF;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: auto !important;
}

.boarding-input {
    padding: 10px;
    font-size: 16px;
    outline: none;
    color:var(--neutral-n800);
}

#otp_form {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: left;
    text-align: left;
}

.otp-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.otp-box {
    height: 46px;
    width: 100%;
    font-size: 20px;
    text-align: center;
    border-radius: 2px;
    outline: none;
}


#resend_otp_btn.active {
    background-color: #CBDEF7;  
    border-color: var(--primary-p600);
    box-shadow: none;
}

/* .eye_icon{
    color: #8F9194;
    align-items: center;
    justify-content: center;
} */

.text-show{
    align-items: center;
    justify-content: center;
    color: var(--primary-p600);
    font-weight: 700;
}

.gaps{
    margin-right: 8px;
}

.activate-acc-button{
    border-radius: 4px;                                       
    border: 1px solid var(--primary-p600);
    background: var(--primary-p600) !important;
    color: #FFFFFF;
    display: flex;
    width: 100%;
    padding: 13px 16px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}

/* onboarding.php */
.wave-3 {
  width: 100%;
  height: auto;
}

.getstarted-button{
    border-radius: 4px;
    border: 1px solid var(--primary-p600);
    background: var(--primary-p600) !important;
    color: #FFFFFF;
    display: flex;
    width: 100%;
    padding: 13px 16px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}


.activated-modal{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    text-align: center;
    padding: 0;
    width: 100%;
}

#activated-modal .activated-container { padding: 20px 16px; }
#activated-modal .wave-3 { display: block; width: 100%; }

.activated-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    
}

.activated-container.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 1;
}

.activated-header {
    margin-top: 40px;
}

.activated-content {
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    margin-bottom: 20px;
    padding-left: 16px;
    padding-right: 16px;
    width: 100%; 
}

.bluetick{
    background: url('blue_tick.gif') lightgray -16px -14.606px / 180% 180% no-repeat;

}

/* ========== Boarding Screens ========== */
#boarding_screens {
  padding: 20px 0 0;          /* remove the 120px bottom padding */
  min-height: 100svh;         /* mobile-safe viewport */
  overflow: hidden;           /* kill page scroll */
}

#boarding_header {
    align-self: flex-start;
    flex-shrink: 0;
    z-index: 4000;
    position: relative;
    padding: 8px 16px 16px 8px;
}

#boarding_footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 1000;
  box-sizing: border-box;
}

/* Shared container for each modal */
#boarding-container-1,
#boarding-container-2,
#boarding-container-3,
#boarding-container-t1,
#boarding-container-t2,
#boarding-container-t3,
#boarding-container-c1,
#boarding-container-c2,
#boarding-container-c3 {
  max-height: none;
  overflow: visible;
}

#boarding-container-1.fade-in, 
#boarding-container-2.fade-in, 
#boarding-container-3.fade-in,
#boarding-container-t1.fade-in,
#boarding-container-t2.fade-in,
#boarding-container-t3.fade-in,
#boarding-container-c1.fade-in,
#boarding-container-c2.fade-in,
#boarding-container-c3.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 1; 
}

#boarding-container-1.fade-out, 
#boarding-container-2.fade-out, 
#boarding-container-3.fade-out,
#boarding-container-t1.fade-out,
#boarding-container-t2.fade-out,
#boarding-container-t3.fade-out,
#boarding-container-c1.fade-out,
#boarding-container-c2.fade-out,
#boarding-container-c3.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
    opacity: 0;
}

/* 
THIS PART IS FOR IMAGE
IF YOUR GONNA ADJUST THE PERCENTAGE (Don't use pixel)
CHECK ALL OTHER IMAGE THAT MIGHT GET AFFECTED
ALSO CHECK THE MEDIA BELOW THIS CSS TO ADJUST AS WELL
IF ADJUSTING THE IMAGE
*/
#onboarding_client_1 .onboarding-img {
    margin-top: 5%;
    width: 81%;
    height: auto;
}

#onboarding_tutor_1 .onboarding-img {
    margin-top: 5%;
    width: 75%;
    height: auto;
}

#onboarding_client_2 .onboarding-img {
    margin-top: 2%;
    width: 95%;
}

#onboarding_tutor_2 .onboarding-img {
    margin-top: 2%;
    width: 62%;
}

#onboarding_client_3 .onboarding-img{
    margin-top: 2%;
    width: 60%;
    height: auto;
}

#onboarding_tutor_3 .onboarding-img {
    margin-top: 2%;
    width: 95%;
    height: auto;
}

#boarding_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 16px;
  padding-right: 16px;
  gap: 8px;
}

#boarding_content .numbering,
#boarding_content h6,
#boarding_content p {
  text-align: left;
  width: 100%;
  margin: 0;
}

/* Shared wrapper */
.onboarding-img-box {
  display: flex;
  line-height: 0 !important;
  padding: 0 !important;
  justify-content: center;
  width: 100%;
}

/* Default img reset */
.onboarding-img {
    margin-top: 5%;
    width: 65%;
    height: auto;
}

#boarding_content h6 {
  color: var(--neutral-n0, #FFF);
  font-weight: 700;        /* BOLD */
  text-align: left;
  margin: 0 0 8px 0;
}

#boarding_content p {
  color: var(--neutral-n0, #FFF);
  text-align: left;
   margin: 0;
}

.boarding-btn {
    width: 100%;
    padding: 13px 16px;
    border-radius: 2px;
    border: 1px solid var(--primary-p600);
    background: var(--neutral-n0, #FFF) !important;
    color: var(--primary-p600, #174787);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
}

.numbering {
    color: var(--neutral-n0, #FFF);
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.4px;  
}

/* notification page (comment out first)
/* White panel stretches full width */
/*
.client4-panel {
  background: #fff; 
  width: 100%;
  padding: 24px 20px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.08);
  flex: 1;
} */

/* Typography & spacing */
/*
.client4-heading {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.client4-lead {
  font-size: 14px;
  color: var(--neutral-n700, #555);
  margin-bottom: 16px;
}
.client4-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.client4-benefits li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}
.client4-ico {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-size: contain;
  background-repeat: no-repeat;
}
.client4-ico.cal {
  width: 24px;
  height: 24px;
  background-image: url('resources/img/calendar_clock.png');
}
.client4-ico.wallet {
  width: 24px;
  height: 24px;
  background-image: url('resources/img/account_balance_wallet.png');
}  */

/* Buttons */
/* .client4-primary-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: var(--primary-p700, #02285B);
  color: #fff;
  font-weight: 600;
  margin-bottom: 12px;
}
.client4-text-btn {
  background: none;
  border: none;
  color: var(--primary-p700, #02285B);
  font-weight: 600;
  text-align: center;
  display: block;
  width: 100%;
} */

/*  existing_user.php */
.login_header{
    display: flex; 
    flex-direction: column;
    margin: 8px 8px 24px;
}

.forgetpassword-header{
    display: flex; 
    position: relative; 
    margin: 8px 8px 32px;
    justify-content: space-between;
}

.forgot-password{
    display: inline;
    flex-direction: column;
    gap: 4px;
    border-radius: 2px;
    color: var(--primary-p600);
}

.reset_footer {
    display: flex;
    flex-direction: row;
    gap: 8px;
    border-radius: 2px;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    text-align: center;
    flex-wrap: nowrap;
}

.reset_footer div {
    display: inline-block; 
}

.input-container-login {
    position: relative;
}

.error-icon-login {
    position: absolute;
    right: 10px; 
    top: 50%;
    transform: translateY(-50%);
    color: var(--system-danger-600);
    pointer-events: none;
}

.login-input{
    padding: 10px;
    font-size: 16px;
    border-radius: 2px;
    outline: none;
    width: 100%;
}

.login-input.error, .password.error{
    border: 1px solid var(--system-danger-600);
    background: none;
}

#reset_success_modal {
    justify-self: center;
    align-self: center;
    max-width: 400px;
    margin-top: 50%;
}

/*  */


/* 
    ASSIGNMENT_ATTENDANCE_PAGE
*/
/* 
    CREATE ATTENDANCE/ASSIGNMENTS
*/
#create-attendance-search-input, #create-assignment-search-input {
    border-radius: 90px;
    border: 1px solid var(--neutral-n200, #DCE0E5);
    background: var(--neutral-n0) url('resources/icons/search_n600.svg') no-repeat 12px center;
    background-size: 24px; 
    flex: 1;
    padding: 8px 12px 8px 40px; 
    box-sizing: border-box;
    overflow: auto;
    outline: -webkit-focus-ring-color none !important; 
    height: 40px;
    display: inline-block; 
}

#create-attendance-search-input.active, #create-assignment-search-input.active {
    border: 1px solid var(--neutral-n700, #4D535C) !important;
    background-color: var(--neutral-n0) !important;
    background-image: url('resources/icons/search_n700.svg') !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 24px 24px !important;
}

/* 
    ATTENDANCE_PAGE
*/
/* attendance_general */
.alert-card {
    padding: 12px 16px;
    border-radius: 4px;
    background: var(--neutral-n50);
}

.lesson-container,
.select-attendance-container {
    border-radius: 4px;
    background: var(--neutral-n50);
    display: flex;
    width: 100%;
    padding: 16px 12px;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* 
.submit-button {
    border-radius: 2px;
    border: 1px solid var(--primary-p700);
    background: var(--neutral-n0);
    text-align: center;
    padding: 8px 12px;
    width: 100%;
} */

.select-students {
    padding: 0px 12px;
    border-radius: 8px;
    background: var(--neutral-n100, #F0F2F5);
}

.top-header-multiple{
     /* KIV: temp solution for gap between completed lessons and header */
    display: flex; 
    flex-direction: column;
    position: fixed;
    padding: 8px 16px 18px 16px;
    width: 100%;
    gap: 4px;
    top: 0;
    left: 0;
    background-color: white;
    z-index: 999;
}

.clear-icon {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: none;
}

.create-attendance-student-row {
    gap: 2px;
    align-items: flex-start;
    padding: 20px 0;
    border-bottom: 1px solid var(--neutral-n200);
}


#select-lesson-error,
#select-date-and-time-error {
    display: none;
}

.choose-lesson-row {
    padding: 12px 12px;
    border: 1px solid;
    border-radius: 2px;
    margin-bottom: 16px;
    border: 1px solid var(--neutral-n200, #DCE0E5);
}

.choose-lesson-row.selected {
    border: 1px solid var(--primary-p300, #799FD1) !important;
    background: var(--primary-p50, #E1ECFA) !important;
}

.choose-lesson-row.error {
    border: 1px solid var(--system-danger-600);
}

.create-attendance-student-row:last-child,  
.select-date-and-time-row:last-child,
.lesson-feedback-row:last-child {
    border-bottom: none;
}

.duration-row {
    transition: all 0.2s ease;
    opacity: 1;
    max-height: 1000px; /* Set to a large enough value to accommodate the content */
    overflow: hidden;
    margin-top: 20px;
}

.duration-row.hidden {
    opacity: 0;
    max-height: 0;
    margin-top: 0px !important;
}

.lesson-feedback-row {
    padding-top: 36px;
}

.select-time-row {
    min-width: 50%;
    gap: 12px;
}

/* attendance.php */
.full-width-card {
    transition: all 0.4s ease;
    width: calc(100% - 32px); /* 16px left & right margin */
    margin: 16px auto;
}

.feedback-textarea {
    width: 100%;
    resize: none;
    overflow-y: auto;
    max-height: calc(1.4em * 5); /* Approx 5 lines */
    line-height: 1.4em;
    font-size: 14px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}

.lessons-container {
    margin-bottom: 10px;
    padding: 0 16px 0px 16px;
}

.date-group {
    position: sticky;
    top: 60px;
    background-color: white;
    z-index: 89;
    padding-bottom: 12px;
}

#completed_lesson_header{
    position: sticky;
    display: flex;
    justify-content: space-between;
    top:0;
    background-color: white;
    z-index: 998;
    padding: 12px 16px 12px 16px;
}
#to-edit-row{
    display: flex;
    justify-content: space-between;
    top:0;
    background-color: white;
    z-index: 998;
    padding: 20px 16px 12px 16px;
}

#top-alert-row {
    gap: 12px;
}
#top-alert-scheduled {
    flex: 1;
    min-width: 44%;
}

#pending-row {
    margin-bottom: 12px;
}

#to-approve-section{
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.to-approve-container {
    display: flex;
    padding: 20px 12px;
    flex-direction: column;
    margin-bottom: 24px;
    align-items: flex-start;
    gap: 16px;
    border-radius: 4px;
    background: var(--neutral-n50, #F4F6F7); 
    /* for notifs url scrolling */
    scroll-margin-top: 140px;
}

.student-info-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.lesson-timing-row {
    /* override the parent’s align-items:flex-start */
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.student-fee-item:not(:last-child) {
  margin-bottom: 16px;
}
.tutor-remark-container{
    width: 100%;
    align-self: stretch;
    border-radius: 6px;
    background: #FFF;
    display: flex;
    padding: 12px 12px 8px 12px;
    flex-direction: column;
    gap: 4px;
}

#tutor-remark {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide Read More until we need it */
#read-more {
  display: none;
  margin-top: 4px;
  color: var(--primary-p600);
}


/* #createAttendanceBtn .pressed {
    border-radius: 99px;
    background: var(--neutral-n200, #DCE0E5);
}

#createAttendanceBtn:hover{
    border-radius: 99px;
    background: var(--neutral-n100, #F0F2F5);
} */

#createAttendanceBtn {
    color: var(--neutral-n700);
    margin-top: 4px;
}

.edit-delete-btn-container {
    /* display: flex;
    justify-content: space-between;
    width: 100%; */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns, each taking 50% width */
    gap: 16px; /* Gap between columns */
    width: 100%; /* Ensure container spans full width */
}

#no-pending-approvals-container {
    margin-top: 40px;
    margin-bottom: 60px;
    padding: 40px 0;
    text-align: center;
}

#approval-history-row {
    padding-top: 24px;
    padding-bottom: 16px;
    gap: 12px;
}

.lesson-duration-container {
    width: 100%;
    margin-top: 8px;
}

.pending-approval-container {
    margin-bottom: 20px;
}

.attendance_divider {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100%;
    border: 4px solid #F0F2F5;
}
.topup_divider {
  position: relative;
  left: 50%;
  width: 100vw;
  margin: 24px 0;
  transform: translateX(-50%);
  border: 4px solid #EDF0F2;
}


/* select_attandance_general */
/* Refer to select_attendance for the css if your doing select_attendance_feedback */
/* Removed some classes as it was causing alot of problems */
.select-attendance-container {
    border: 1px solid var(--neutral-n100);
    transition: all 0.3s;
}

.select-attendance-container.active {
    border-radius: 4px;
    background: #E1ECFA;
}

#select-attendance-submit-row {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 20px 16px 28px 16px;
    gap: 12px;
    box-shadow: 0px -4px 8px 2px rgba(0, 20, 46, 0.05);
    background: var(--neutral-n0);
}

/* select_attendance.php */


/* select_attendance_feedback.php */


/* scheduled_lessons_general */

.tooltip {
    padding: 12px;
    border-radius: 4px;
    background: var(--neutral-n200);
    box-shadow: 0px 4px 8px 2px rgba(0, 20, 46, 0.05);
    right: 0;
    top: 55px;
    position: absolute;
    z-index: 1;
    min-width: 221px;
}

.tooltip::before {
    content: '';
    position: absolute;
    top: -30px;
    right: 15px;
    border-width: 18px 9px;
    border-style: solid;
    border-color: transparent transparent var(--neutral-n200) transparent;
}

/* scheduled_lessons.php */

/* scheduled_lessons_search.php */

/* scheduled_lessons_search_multiple_ids */


/* new_attendance_general */

/* new_attendance_search.php */
.header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.center-title {
    flex: 1;
    text-align: center;
}

.spacer {
    width: 40px; 
}


/* new_attendance_create.php */
.choose-lesson-container {
    margin-bottom: 36px;
}

.radio-container {
    padding: 8px;
}
.checkbox-container {
    padding: 8px;
}

.custom-checkbox {
    border: 1px solid #AD2A2A; 
    appearance: none; 
    width: 20px; 
    height: 20px; 
    background-color: white; 
    border-radius: 4px; 
  }

/* edit_attendance.php */

/* 
    Calendar
*/
#calendar1_back_disable{
    color: #ABB0B8;
    display: none;
}

#calendar1_front_disable{
    color: #ABB0B8;
    display: none;
}

#calendar2_back_disable{
    color: #ABB0B8;
    display: none;
}

#calendar2_front_disable{
    color: #ABB0B8;
    display: none;
}

.datepicker {
    position: relative;
    margin-top: 16px;
}

.datepickerCalendarHeader {
    padding: 8px 0 8px 12px;
}

.cal-btn {
    width: 32px;
    padding: 4px;
    height: 30px;
}

.datepickerCalendar {
    padding: 8px 16px 16px 16px;
    background: var(--neutral-n100);
    border-radius: 8px;
    width: 100%;
    min-height: fit-content;
    overflow: hidden;
}

.datepickerMonthYear {
    color: var(--neutral-n800);
}

.datepickerCalendarDays,
.datepickerCalendarMain {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 8px;
    column-gap: 5px;
}

.datepickerCalendarDays {
    margin-top: 10px;
    margin-bottom: 10px;
}

.datepickerCalendarMain {
    grid-template-rows: repeat(5, min(30px));
}

.cell_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    position: relative;
    height: 36px;
}

.cell_wrapper.selected {
    background: var(--primary-p50) !important;
    color: var(--primary-p700) !important;
}

.cell_wrapper.disabled {
    color: var(--neutral-n400) !important;
    cursor: not-allowed;
}

.cell_wrapper.current {
    background: var(--neutral-n200);
    color: var(--neutral-n800);
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.4px;
}

.cell_wrapper.current-disabled {
    background: var(--neutral-n200) !important;
}

/* JL - commented it out because it doesn't seem to be in used */
/* .swiper {
    width: 600px;
    height: 300px;
} */

.datepicker-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px; /* Adjust height as needed */
    gap: 25px;
    position: relative;
}

.swiper-container {
    width: 100px; /* Adjust width as needed */
    height: 100%; /* Fill the container's height */
    overflow: hidden;
    /* display: flex; Comment out to center the time/ duration in the grey box */
    align-items: center; /* Center slides vertically */
}

/* Prevent slides from exceeding the mobile view */
.edit-attendance-swiper {
    min-height: 0;         
    overflow-y: auto;      
    /* max-height: 80vh;  */
    margin-bottom: 20px;
    scrollbar-width: none;    /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer and Edge */
}

.edit-attendance-swiper::-webkit-scrollbar {
    display: none;            /* Chrome, Safari, and Opera */
}

/* Wraps each swiper slide (to edit attendance) */
.swiper-wrapper {
    width: 85% !important;
}

.attendance-swiper-slide {
    height: 100% !important;
    margin-bottom: 0px !important;
    /* override swiper-slide class that aligns items to the center */
    margin-right: 16px !important;
    align-items: flex-start !important; 
    /* justify-content: space-between !important; */
}

.to-edit-multiple {
    width: 90% !important
}

.to-edit-single {
    width: 100% !important
}

.red-error-text {
    color: var(--system-danger-600);
}

/* Grey box in attendance edit */
.grey-box {
    /* attendace.php */
    margin-bottom: 12px;
    padding: 8px;
    align-self: stretch;
    border-radius: 8px;
    background-color: rgba(225, 228, 232, 0.75);
    color: var(--neutral-n800);
}

.edit-grey-box {
    /* edit_attendance.php */
    margin: 16px 0;
    padding: 8px;
    border-radius: 4px;
    background-color: var(--neutral-n200, #DCE0E5);
}

.selected-grey-box {
    width: 95%;
    position: absolute;
    padding: 0 12px;
    height: 30px;
    background: var(--neutral-n200);
    border-radius: 7px;
    z-index: 1;
}

.edit-delete-container {
    position: absolute;
    right: 12px;
    top: 57px;
    width: 120px;
    background: rgba(220, 224, 229, 0.75);
    backdrop-filter: blur(6px);
    border-radius: 4px;
    box-shadow: 0px 4px 10px 0px rgba(77, 83, 92, 0.15);
    z-index: 1;
    display: none;
}

.edit-delete-row {
    padding: 8px 12px;
}

.recurring_container {
    border: 0;
    background: var(--neutral-n100);
    backdrop-filter: blur(6px);
    padding: 20px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    width: 100%;
}

/* 
    ASSIGNMENTS_PAGE
*/

/* assignment_general */
.not-started-selected{
    border: 1px solid var(--neutral-n600, #6E747D) !important;
    background: var(--neutral-n100, #F0F2F5) !important;
}

.hidden{
    display: none !important;
}

.bottom-up-item {
    justify-content: space-between;
}

.apply-filter-btn{
    display: flex;
    padding: 12px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-radius: 2px;
    background: var(--primary-p600);
    color: var(--neutral-n0, #FFF);
    width: 100%;
    border: 0;
}

.hr-assignments{
    height: 1px;
    border-radius: 2px;
    width: 105vw; /* Full viewport width */
    margin-left: calc(-52vw + 58%); /* Center it */
    border: none;
    border-top: 1px solid var(--neutral-n200, #DCE0E5)
}


/* Tutor assignments */
.assignment-container{
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    background: var(--neutral-n50, #F4F6F7);
    margin-bottom: 16px; 
    padding: 16px;
}

.assignment-caption {
    color: var(--neutral-n700, #2C2D2E);
    font-family: "Nunito Sans";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 135%;
    letter-spacing: -0.1px;
    margin-bottom: 4px;
}

.assignment-month{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.month-header{
    margin-bottom: 8px;
}

.assignment-filters{
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 12px;
    align-self: stretch;
    -ms-overflow-style: none; 
    scrollbar-width: none;
    z-index: 20; 
}

.assignment-filters::-webkit-scrollbar {
    display: none;
}

.assignment-filter{
    border-radius: 6px;
    border: 1px solid var(--neutral-n400, #ABB0B8);
    background: var(--neutral-n0, #FFF);
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.assignment-body{
    gap: 32px;
}

.date-and-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.icon-and-body-2 {
    display: flex;
    align-items: center;
}

.not-started-label{
    display: flex;
    padding: 2px 6px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 2px;
    background: var(--neutral-n500, #91979E);
    color: var(--neutral-n0, #FFF);
}

/* Assignment details + group_rates*/
.details-container{
    display: flex;
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 8px;
    background: var(--neutral-n50);
    margin-top: 8px;
}

.viewAllRates-container {
    display: flex;
    padding: 3px 0px 5px 0px;
    justify-content: center;
    align-items: center;
    gap: 4px; 
    border-radius: 2px;
}

.top-header {
    display: flex; 
    justify-content: space-between;
    align-items: center;
    position: fixed;
    padding: 16px 16px 16px 8px;
    width: 100%;
    gap: 4px;
    top: 0;
    left: 0;
    background-color: white;
    z-index: 10;
}

.container-copy {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}

#discontinued-alert {
    display: flex;
    height: 0;
    opacity: 0;
    overflow: hidden;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    background-color: #FAC8C8BF;
}

#discontinued-alert.visible {
    height: 40px;
    opacity: 1;
    padding: 8px;
    margin-bottom: 20px;
}

.rates-container {
    display: flex;
    padding: 16px;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--neutral-n300, #C9CED4);
    justify-content: space-between;
}

.group-container {
    display: flex;
    flex-direction: column;
    gap: 12px; 
    padding-top: 12px;
}

.group-detail-container {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
}

.assignment-dates-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.assignment-dates {
    display: flex;
    align-items: center;
}

.date-pair {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.grey-separator-line {
    width: 1px;
    height: 50px;
    background: var(--neutral-n200);
    margin: 0 20px 0 50px;
}

/* 
    TRANSACTION
*/
/* Transaction Details */

.transaction-details-header {
    display: flex; 
    justify-content: space-between;
    align-items: center;
    position: absolute;
    padding: 20px 4px 8px 4px;
    width: 100%;
    top: 0;
    left: 0;
    background-color: white;
}

.transaction-details-body {
    margin-top: 48px;
}

.transaction-details-section {
    display: flex;
    flex-direction: column;
    padding: 32px 16px; 
}

.transaction-details-hr {
    border: none;
    border-bottom: 1px solid var(--neutral-n200, #DCE0E5);
}

.transaction-details-icon-bg {
    display: flex;
    border-radius: 99px;
    background: var(--neutral-n100, #F0F2F5);
    padding: 8px;
}

.transaction-topup-label {
    padding: 4px 8px;
    border-radius: 2px;
    background: var(--neutral-n100, #F0F2F5);
}

.transaction-details-container {
    padding: 0 12px;
    border-radius: 8px;
    background: var(--neutral-n100, #F0F2F5);
}

.transaction-detail {
    display: flex; 
    flex-direction: column;
    gap: 4px;
    padding: 12px 0; 
}

.transaction-need-help {
    display: flex; 
    gap: 12px; 
    align-items: center;
    justify-content: space-between;
}

.transaction-copy-message {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 32px 16px;
    z-index: 10;
    transition: opacity 0.5s;
    animation: fadeIn-msg 0.5s forwards, fadeOut-msg 0.5s 2.5s forwards;
}

.transaction-copy-inner-container {
    display: flex;
    align-items: center;
    padding: 12px;
    margin: 32px 16px;
    position: absolute;
    bottom: 0;
    left: 0;
    gap: 8px;
    width: calc(100% - 32px);
    z-index: 10;
    transition: opacity 0.5s;
    animation: fadeIn-msg 0.5s forwards, fadeOut-msg 0.5s 2.5s forwards;
    border-radius: 6px;
    background: rgba(1, 31, 71, 0.75);
}

.transaction-popup-header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px 12px 0px 0px;
    padding: 20px 8px 8px 4px;
    height: 68px;
    position: absolute;
    background-color: white;
}

.transaction-popup-body {
    margin-top: 68px;
}

.transaction-container{
    border-radius: 8px;
    background: var(--neutral-n50, #F4F6F7);
    padding: 4px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.transaction-card{
    width: 100%;
    border-radius: 12px;
    background: var(--neutral-n50, #F4F6F7);
    padding: 16px 0;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* 
    SCHEDULE_PAGE
*/
/* schedule.php */

.day {
    padding: 12px 0;
}
.holiday {
    margin-top: 5px;
    width: 100%; 
    height: 100%; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 8px; 
    display: inline-flex
}

.holiday-flag {
    width: 4px; 
    height: 18px;
    align-self: stretch; 
    transform-origin: top left; 
    background: var(--system-success-600, #258537); 
    border-radius: 4px;
}

.horizontal-grey-thin-line {
    width: 100%;
    height: 1px;
    background: var(--neutral-n200);
    margin: 12px 0px;
}

.lessons-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
} 

.lesson-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 12px;
	padding-left: 4px;
}

.lesson-divider {
    width: 4px;
    border-radius: 2px;
    height: auto;
    align-self: stretch;
}

.lesson-duration-box {
    height: auto;
    text-align: right;
}

.lesson-details-box {
    width: -webkit-fill-available;
    height: auto;
}

.lesson-header-box {
    flex-direction: row;
    place-content: space-between;
    gap: 20px;
}

.lesson-description-box {
    gap: 4px;
}

.status-box {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

/*
    NORMAL TEXT COLOUR
*/
.text-neutral-light { /* for lesson end time */
    color: var(--neutral-n600, #6E747D);
}

/*
    STATUS COLOUR
*/
/* pending = tutor submit, waiting for client to approve */
.pending-divider-color { 
    background: var(--secondary-s500, #E8C24A);
}
.pending-icon-color { 
    color: var(--secondary-s500, #E8C24A) !important;
}

/* to edit = tutor submitted, but client requested for change */
.to-edit-divider-color {
    background: var(--system-danger-600);
}
.to-edit-icon-color {
    color: var(--system-danger-600, #AD2A2A) !important;
}

/* to submit = attendance datetime passed, but tutor has not submitted */
.to-submit-divider-color {
    background: var(--primary-p500, #33609E);
}
.to-submit-icon-color { 
    color: var(--primary-p600, #174787) !important;
}

/* attendance awaiting completion = attendance datetime not over yet, cannot submit */
.scheduled-color { 
    background: var(--neutral-n800);
}

/* completed = approved or paid */
.completed-divider-color { 
    background: var(--neutral-n200, #DCE0E5);
}
.completed-grey1-color { /* for name, lesson type and start time */
    color: var(--neutral-n800) !important;

}
.completed-grey2-color { /* for lesson description */
    color: var(--neutral-n800) !important;
    opacity: 0.5 !important;
}
.body-1-sb.completed-grey2-color { /* for lesson description */
    color: var(--neutral-n800) !important;
    opacity: 0.5 !important;
}
.body-1.completed-grey2-color { /* for lesson description */
    color: var(--neutral-n800) !important;
    opacity: 0.5 !important;
}
.body-2.completed-grey2-color { /* for lesson description */
    color: var(--neutral-n800) !important;
    opacity: 0.5 !important;
}
.completed-grey3-color { /* for lesson end time and icons*/ 
    color: var(--neutral-n600) !important;
}
.completed-grey4-color { /* for attendance details --> approved and paid attendances */
    color: var(--neutral-n600, #6E747D) !important;
}
.completed-grey5-color { /* for attendance details --> voided attendances */
    color: var(--neutral-n700) !important;
    opacity: 0.5 !important;
}
.body-2.completed-black-color{
    color: var(--neutral-n800) !important;
}
.completed-black-color{
    color: var(--neutral-n800) !important;
}
.body-1-sb.completed-grey4-color {
  color: var(--neutral-n800) !important;
  opacity: 0.7 !important;
}
.body-1.completed-grey4-color {
  color: var(--neutral-n600, #6E747D) !important;
}
.body-2.completed-grey4-color {
  color: var(--neutral-n600, #6E747D) !important;
}

/* Lesson Container */
/* pending = tutor submit, waiting for client to approve */
.pending-lesson-color { 
    border-radius: 8px;
    background: var(--secondary-s50, #FFFAEB);
}

/* to edit = tutor submitted, but client requested for change */
.to-edit-lesson-color {
    border-radius: 8px;
    background: var(--system-danger-50, #FCE8E8);
}

/* to submit = attendance datetime passed, but tutor has not submitted */
.to-submit-lesson-color {
    border-radius: 8px;
    background: var(--primary-p50, #E1ECFA);
}

/* attendance awaiting completion = attendance datetime not over yet, cannot submit */
.scheduled-lesson-color { 
    border-radius: 8px;
    background: var(--neutral-n50, #F4F6F7);
}

/* completed = approved or paid, void */
.completed-void-lesson-color { 
    border-radius: 8px;
    opacity: 0.6;
    background: var(--neutral-n50, #F4F6F7);
}

/* ATTENDANCE CREATION FOR RENEWED ASSIGNMENTS */
/* Start date of lesson */
.assignment-start-date {
    display: inline-flex;
    padding: 2px 6px;
    justify-content: start;
    align-items: center;
    gap: 4px;
    border-radius: 2px;
    background: var(--neutral-n500, #91979E);

    color: var(--neutral-n0, #FFF);
    font-family: "Nunito Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 0.75px;

    margin-bottom: 8px;
}

.renewed-assignment-inner-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}

.assignment-start-date-test {
    width: 100%;
    height: 100%;
    padding: 2px 6px;
    background: var(--neutral-n500, #91979E);
    border-radius: 2px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

/* 
    ATTENDANCE_DETAILS.PHP
*/
.header-container {
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.attendance-details-header {
    display: flex; 
    justify-content: space-between;
    align-items: center;
    padding: 20px 16px 8px 16px;
    width: 100%;
    gap: 4px;
    top: 0;
    left: 0;
    z-index: 100;
    position: fixed;
}

.attendance-detials-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.header-details-container {
    display: flex;
    flex-direction: column;
    padding: 20px 16px 24px 16px;
}

.small-status-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.badge-size {
    width: 18px;
    height: 18px;
    font-size: 18px !important;
}
.name-subject-box {
    display: flex;
    flex-direction: column;
    /* padding: 4px 0px 12px; */
}
.to-edit-header-box {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    margin-top: 20px;
}

/* Section for Address, ajustment details, repeated schedule lessons */
.body-details-container {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow-y: scroll;
    box-sizing: border-box;
}

.body-row-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px 16px;
    color: var(--neutral-n800);
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.name-list-box {
    display: flex;
    flex-direction: column;
    padding: 0px 16px;
}

.name-list-row {
    display: flex;
    flex-direction: column;
    padding: 16px 0px 16px 32px;
    gap: 4px;
}
/*
    HEADER COLOURS
*/
.await-completion-header-color {
    background: var(--neutral-n800) !important;
    color: var(--neutral-n0, #FFFFFF) !important;
}

.material-symbols-outlined.fill.badge-size.default-cursor.await-completion-icon-color{
    color: var(--neutral-n300) !important;
}

.to-submit-header-color {
    /* background: rgba(225, 236, 250, 1); */
    background-color: #E1ECFA !important;
    color: var(--neutral-n800) !important;
}
.pending-header-color {
    background: var(--secondary-s50, #FFFAEB) !important;
}
.to-edit-header-color {
    background: var(--system-danger-50, #FCE8E8) !important;
}
.completed-header-color { /* for approved / paid / voided */
    background: var(--neutral-n100, #F0F2F5) !important;
}
/*
    ICON COLOURS
*/
.await-completion-icon-color-1 { /* For status icon */
    color: var(--neutral-n300, #C9CED4) !important;
}
.await-completion-icon-color-2 { /* For other icons in header*/
    color: var(--neutral-n200, #DCE0E5) !important;
}
.approved-icon-color {
    color: var(--system-success-500, #41A353) !important;
}
.paid-icon-color {
    color: var(--system-success-700) !important;
}
.voided-icon-color {
    color: var(--neutral-n600, #6E747D) !important;
}
.student-present-color-1 {
    color: rgba(13, 104, 30, 0.7) !important;
}
.student-present-color-2 {
    color: rgba(13, 104, 30, 0.5) !important;
}
/*
    FONTS
*/
.header-details-font {
    font-size: 16px;
    font-weight: 400;
    line-height: 22.40px;
    word-wrap: break-word;
}
.name-header-font {
    font-size: 19px;
    font-weight: 650;
    line-height: 25.65px;
    letter-spacing: 0.10px;
    word-wrap: break-word;
}
.lesson-names-font { 
    font-size: 14px;
    line-height: 18.90px;
    word-wrap: break-word;
}

/* 
    OTHER PAGE
*/
/* 
    navbar.php
*/

:root { --sys-bottom: 0px; }

#navbar {
  width: 100%;
  padding: 12px 20px;
  display: flex;
  flex-direction: row;
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--sys-bottom);
  box-shadow: 0px -4px 8px 2px rgba(0, 20, 46, 0.05);
  background: var(--neutral-n0);
  z-index: 1000;
  justify-content: center;
  max-width: 100vw;
  overflow-x: hidden;
}

.navbar-group {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 4px;
    /* flex: 1; */
    color: var(--neutral-n700);
    transition: background-color 0.3s ease;
    position: relative;
    flex-shrink: 1;           /* Allows shrinking if content overflows */
  min-width: 0;             /* Required for flex-shrink to work */
  overflow: hidden;
  cursor: default !important;
}

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

.navbar-group-active {
    color: var(--primary-p700) !important;
}

.navbar-group-active .material-symbols-outlined {
    font-variation-settings:
    'FILL' 1,
    'wght' 200,
    'GRAD' 0,
    'opsz' 24;
}


.material-symbols-outlined.fill.icon-xs {
    color: var(--neutral-n600);
}

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

.body-nav{
    text-decoration: none;
}
  
/*Accounts*/

#account_header {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
  }

  .account-page{
    position: absolute;
    top: 50px; /* header height */
    left: 0; right: 0; bottom: 0;
    height: calc(100vh - 50px);
    overflow-y: auto;
    padding: 16px;
    box-sizing: border-box;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }

    .profile-initial-circle {
    width: 40px;
    height: 40px;
    background: #4D79B2;
    color: white;
    font-size: 22px;
    font-family: "Nunito Sans", sans-serif;
    font-weight: 700;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    margin: 6px;
    }
    
    .profile-section-notif-container {
        background: #FFF4CF;
        border-radius: 8px;
        padding: 16px;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        margin-top: 10px;
    }
    
  .profile-section-container {
    background: #F4F6F7;
    border-radius: 8px;
    padding: 16px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
  }
  
  .profile-section-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    margin: 0; 
    justify-content: space-between;
  }

  
  
  .profile-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
  
  .icon {
    color: #4D535C;
    font-size: 20px;
  }
  
  .profile-label {
    flex-grow: 1;
  }
  
  .profile-arrow-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
  
  .arrow {
    color: #4D535C !important;
    font-size: 18px !important;
  }

  .logout-container {
    display: flex;
  justify-content: center;
  margin: 30px 0 20px; 
    
  }
  
  .logout-button {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-p600);
    border: none;
    background-color: #fff;
  }

    #copy-popup {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        opacity: 0;
        display: flex;
        z-index: 1001;
        padding: 8px;
        border-radius: 6px;
        align-items: center;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    #copy-popup.show {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }

  #header-section-container {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  
  .header-arrow-box {
    display: flex;
    align-items: center;
  }
  
  .header-label {
    flex: 1;
    text-align: center;
    font-size: 20px;
    font-weight: 650;
    color: #333;
    margin-right: 24px; 
  }

  .edit-view {
    padding: 20px;
  }
  .edit-view input {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border-color: #31363D ;
  }
  .edit-view button {
    margin-right: 10px;
    padding: 12px;
    width: 100%;
    background-color: var(--primary-p600);
    color: white;
    font-size: 16px;
  }

    input.error {
        border: 1px solid #AD2A2A;
    }

    
    .error-message {
        color: #AD2A2A;
        font-size: 0.9em;
        margin-top: 2px;
        display: block;
    }


    
    input.form-control {
        height: 48px;
        padding: 12px;
        border-radius: 2px;
        border: 1px solid #ABB0B8!important;
        outline: none;
        width: 100%;
        box-sizing: border-box;
        box-shadow: none !important; 
    
        /* Padding for icons */
        padding-right: 2.5rem;
        background-position: right 0.75rem center;
        background-size: 1.5rem 1.5rem;
    }

    input.form-control:focus {
    border: 1px solid #02285B !important; 
    outline: none;
}
    

    input.form-control.is-invalid {
        padding-right: 1.8rem;
        background-repeat: no-repeat;
        background-position: right 0.5rem center;
        background-size: 1rem 1rem;
        border-color: #AD2A2A !important;
        box-shadow: none !important; 
    
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23AD2A2A%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M16%208A8%208%200%201%201%200%208a8%208%200%200%201%2016%200M8%204a.905.905%200%200%200-.9.995l.35%203.507a.552.552%200%200%200%201.1%200l.35-3.507A.905.905%200%200%200%208%204m.002%206a1%201%200%201%200%200%202%201%201%200%200%200%200-2%22/%3E%3C/svg%3E") !important;

    }

    /* Confirmation Popup Overlay */
    .popup-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: rgba(72, 74, 77, 0.25); 
        z-index: 999;
        justify-content: center;
        align-items: center;
    }

    .vertical-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0px !important;
    }
    
    .colored-icon .material-icons {
        color: #174787;  
       
    }

    .add-payment button {
        margin-top: 24px ;
        margin-right: 10px;
        width: 100%;
        align-items: center !important;
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 8px 12px;
        border: none;
        border-radius: 4px;
    }

    .payment-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 1000;
        display: none;
        height: 100vh;
      }
      
      .payment-overlay.active {
        display: block;
        background-color: rgba(72, 74, 77, 0.25);
      }
    
    .payment-panel {
        position: fixed;
        bottom: -100%;
        left: 0;
        width: 100%;
        background: white !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        padding: 20px;
        z-index: 1000;
        transition: bottom 0.3s ease-in-out;
    }
    
    .payment-panel.active {
        bottom: 0; /* Slide up */
    }

    .option {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px 12px 0px;
        margin-bottom: 12px;
        font-size: 16px;
    }
    
    .option-icon {
        width: 40px;  /* Circle width */
        height: 40px; /* Circle height */
        border-radius: 50%;  /* Make the image circular */
        overflow: hidden;  /* Ensure the content stays inside the circle */
        background-color: #F0F2F5;  /* Background color for the circle */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .option-icon img {
        width: 75%;  /* Makes the image fit the circle width */
        height: 75%; /* Makes the image fit the circle height */
        object-fit: contain; /* Ensures the image scales without cropping */
    }

    .payment-method-box {
        width: 100%;
        background: #F4F6F7;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
    }
    
    .payment-method-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    
    .payment-method-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    .preferred-label {
        background-color: #4D79B2;
        padding: 2px 4px 2px 4px;
        font-size: 12px;
        margin-top: 3px;
        display: inline-block !important;
        white-space: nowrap;
        max-width: fit-content;
        border-radius: 2px;
    }
    
    .payment-method-icon img {
        width: 28px;
        height: auto;
    }
    
    .payment-method-details {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        font-size: 14px;
    }

    .payment-form-display{
        padding: 12px 12px;
        margin-top: 16px;
    }

    .edit-container button {
        width: 100%;
        border: none;
      }

      .edit-container{
        -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
      }

      .edit-scroll-wrapper {
        flex: 1;
        overflow-y: auto;
        margin-top: 70px; /* equal to header height */
        -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
        padding-bottom: 120px; /* to make space when keyboard appears */
    }

      input[type="checkbox"]:checked:disabled + .edit-checkbox-label {
        color: #989a9e; 
    }
    

    .bank-dropdown-wrapper {
        position: relative;
        width: 100%;
    }
    
  
    .custom-select-container {
        position: relative;
        display: inline-block;
        width: 100%;
        margin-top: 12px;
    }

    .custom-select {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #DCE0E5;
        background-color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .custom-select:focus{
        border: 1px solid #00142E !important;
    }

    .custom-select.invalid-no-bg {
        background-image: none !important;
        border: 1px solid #AD2A2A !important;
    }

    .invalid-no-bg {
        background-image: none !important;
        border: 1px solid #AD2A2A !important;
    }

    .bank-error-message {
        color: #AD2A2A;
        font-size: 13px;
        margin-top: 4px;
    }


    .dropdown-arrow {
        font-size: 32px !important;
        color: #333;
    }


    .custom-dropdown-list {
        display: none;
        position: absolute;
        top: 100%; 
        left: 0;
        right: 0;
        background-color: white;
        max-height: 300px; 
        overflow-y: auto;
        width: 100%;
        z-index: 10;
        border-radius: 4px;
    }

    .custom-option.selected-option {
        background-color: #DCE0E5; 
    }

    .check-icon {
        font-size: 18px;
        color: #4D535C;
        display: none;  
    }
    
    .custom-option.selected-option .check-icon {
        display: inline-block;
    }

    .custom-option {
        padding: 12px;
        background-color: #F0F2F5;
        display: flex;     
        justify-content: space-between;  
        align-items: center;    
    }

    .custom-select-container.open .custom-dropdown-list {
        display: block;
    }


    .payment-form-display.is-invalid, 
    .custom-select.is-invalid {
        padding-right: 1.8rem;
        background-repeat: no-repeat;
        background-position: right 0.5rem center;
        background-size: 1rem 1rem;
        border-color: #AD2A2A !important;
        box-shadow: none !important;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23AD2A2A%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M16%208A8%208%200%201%201%200%208a8%208%200%200%201%2016%200M8%204a.905.905%200%200%200-.9.995l.35%203.507a.552.552%200%200%200%201.1%200l.35-3.507A.905.905%200%200%200%208%204m.002%206a1%201%200%201%200%200%202%201%201%200%200%200%200-2%22/%3E%3C/svg%3E") !important;
    }

    #payment-form-display.is-invalid:focus, 
    .custom-select.is-invalid:focus {
        border-color: #AD2A2A !important; 
        box-shadow: none !important; 
    }

    input:focus {
        outline: none;
    }


    .invalid-feedback {
        color: #AD2A2A;
        font-size: 13px;
        margin-top: 4px;
    }

    .password-input-wrapper {
        position: relative;
        width: 100%;
    }

    .password-input-wrapper input {
        width: 100%;
        padding-right: 60px; 
        box-sizing: border-box;
    }

    .toggle-password {
        position: absolute;
        right: 12px;
        top: 50%;
        color: var(--primary-p700); 
    }

    /* client lesson details */
    .client-lesson-alert-container {
        background: rgba(250, 200, 200, 0.75);
        border-radius: 8px;
        padding: 8px;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
    }

    .client-lesson-discon-container {
        background: #E1E4E8BF;
        border-radius: 8px;
        padding: 8px;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        max-width: 100%; 
        overflow: hidden; 
    }

    .client-lesson-renew-item {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 11.5px 0px 5.5px 0;
        margin: 0; 
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .client-lesson-alert-item {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10.5px 0;
        margin: 0; 
        justify-content: flex-start;
        flex-wrap: wrap; 
    }

    .see-assignment-link {
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        padding-bottom: 11.5px;
        max-width: calc(100% - 34px); 
        white-space: nowrap; 
        overflow: hidden;
    }

    .see-assignment-link .button-text-sm {
        overflow: hidden;
        white-space: nowrap;
    }

/* 
========================================
========================================
    MEDIA_PHONE_TABLETS

Please any other that don't belong 
here put on top to the respective 
sections and update "content" page

========================================
=======================================
*/
/* PC */
@media (min-width: 1024px) {
    /* Opening Screen */
    .wave-1, .wave-2 {
        max-height: 40vh; /* keep wave visible but not covering */
    }

    /* .welcome-modal.choose-modal .wave-1 {
        transform: rotate(170deg) scale(1.08) translateZ(0) !important;
    } */

    .welcome-content {
        margin-bottom: 40px;
    }

    .welcome-container h1{
        font-size: 50px !important;
    }

    #otp-form {
        display: flex;
        flex-direction: row;
        gap: 12px;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .button-lg-otp{
        width: 500px !important;
        justify-content: center;
        align-items: center;
        text-align: center;
        display: inline !important;
    }

    #reset_success_modal {
        justify-self: center;
        align-self: center;
        max-width: 400px;
        margin-top: 25%;
    }

    .button {
    padding: 1px 12px;
    text-align: center;
    border-radius: 4px;
}

}

/* Tablets */
@media (min-width: 800px) and (max-width: 1300px) {
    /* Opening Screen */
    .wave-1, .wave-2 {
        max-height: 60vh; /* allow more visibility */
    }

    .welcome-container h1{
        font-size: 50px !important;
    }

    #otp-form {
        display: flex;
        flex-direction: row;
        gap: 12px;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

}

/* THIS PART IS FOR IMAGE ADJUSTMENTS
IF YOUR GONNA ADJUST THE PERCENTAGE
CHECK ALL OTHER IMAGE THAT MIGHT GET AFFECTED
*/
@media (max-width: 413px) and (min-height: 651px) {
    #onboarding_client_1 .onboarding-img {
        margin-top: 5%;
        width: 81%;
        height: auto;
    }
	
	#onboarding_tutor_1 .onboarding-img {
		margin-top: 5%;
		width: 75%;
		height: auto;
	}

    #onboarding_client_2 .onboarding-img {
        margin-top: 2%;
        width: 95%;
    }
	
	#onboarding_tutor_2 .onboarding-img {
        margin-top: 2%;
        width: 62%;
    }

    #onboarding_client_3 .onboarding-img{
        margin-top: 2%;
        width: 60%;
        height: auto;
    }
	
	#onboarding_tutor_3 .onboarding-img {
        margin-top: 2%;
        width: 95%;
        height: auto;
    }
}

/* iOS Devices only */
@supports (-webkit-touch-callout: none) {
    #onboarding_client_1 .onboarding-img {
        margin-top: 2%;
        width: 70%;
        height: auto;
    }
	
	#onboarding_tutor_1 .onboarding-img {
		margin-top: 5%;
		width: 65%;
		height: auto;
	}

    #onboarding_client_2 .onboarding-img{
        margin-top: 2%;
        width: 80%;
    }
	
	#onboarding_tutor_2 .onboarding-img {
        margin-top: 2%;
        width: 53%;
    }

    #onboarding_client_3 .onboarding-img {
        margin-top: 2%;
        width: 50%;
        height: auto;
    }
	
	#onboarding_tutor_3 .onboarding-img {
        margin-top: 2%;
        width: 80%;
        height: auto;
    }
}
/*
=================== ERROR STATES (MFE-2223) ==================

The styles for the error-states system. They live here, in the one stylesheet,
because that is where shared styling goes in this repo (AGENTS.md) and because
home.php already loads index.css through Asset::url() - so they inherit the
?v= that lets .htaccess serve them immutable for a year, with no second
request. They used to be six <style> blocks inlined into every routed page's
no-store HTML, which meant re-downloading and re-parsing them on every
navigation.

Kept at the END of the file on purpose: the block previously loaded from
components/error_states.php near the close of <body>, so it has always won
against index.css on a tie. Moving it earlier would silently change which rule
wins.

Sections below are in the order the treatments are mounted.
*/

/* ===== error_state ===== */
.section-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 16px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* MFE-2271: the section icon is a soft amber circle badge (a load failure).
   The amber #C68A2E matches the status-check --unknown colour and the full-page
   --warning badge (.fullpage-error__icon--warning); it is a literal because the
   theme has no --system-warning token (the danger/success/neutral tokens do exist
   and are used where they fit). The title inherits .body-2's --neutral-n700; the
   font is inherited "Nunito Sans". (The empty-state badge is grey, not this amber.) */
.section-error__icon.material-symbols-outlined {
    font-size: 28px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C68A2E;
    background: rgba(198, 138, 46, 0.12);
}

.section-error__title {
    max-width: 280px;
}

.section-error__retry {
    margin-top: 4px;
}

/* ===== error_fullpage ===== */
.fullpage-error {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--neutral-n0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px 24px;
    text-align: center;
    box-sizing: border-box;
}

/* MFE-2271: full-page icon is a glyph in a soft circle badge (Figma). Tone
 * drives the colour: neutral (connection / maintenance / unavailable) or
 * warning (page didn't load). */
.fullpage-error__icon.material-symbols-outlined {
    font-size: 34px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fullpage-error__icon--neutral {
    color: var(--neutral-n500);
    background: rgba(72, 74, 77, 0.08);
}
.fullpage-error__icon--warning {
    color: #C68A2E;
    background: rgba(198, 138, 46, 0.12);
}

.fullpage-error__title {
    color: var(--neutral-n800);
    font-family: "Nunito Sans";
    font-size: 20px;
    font-weight: 700;
    line-height: 130%;
    margin: 0;
    max-width: 340px;
}

.fullpage-error__subtitle {
    max-width: 320px;
    margin: 0;
}

.fullpage-error__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    /* 340px to match the status-check / security / section / empty CTAs, so every
       error-state button is the same width (MFE-2271). */
    max-width: 340px;
    margin-top: 8px;
}

.fullpage-error__actions .button {
    width: 100%;
    cursor: pointer;
    padding-top: 18px;
    padding-bottom: 18px;
}

/* ===== error_banner ===== */
.status-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1800;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--primary-p50);
    color: var(--primary-p700);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    font-family: "Nunito Sans";
}

/* Offline reads as a neutral state, not an info one. */
.status-banner--offline {
    background: var(--neutral-n100);
    color: var(--neutral-n800);
}

.status-banner__icon.material-symbols-outlined {
    font-size: 20px;
    line-height: 20px;
    flex: 0 0 auto;
}

.status-banner__text { flex: 1 1 auto; min-width: 0; }
.status-banner__title { font-size: 14px; font-weight: 700; line-height: 130%; }
.status-banner__hint  { font-size: 12.5px; font-weight: 400; line-height: 130%; opacity: 0.9; }

.status-banner__action {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: inherit;
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 6px;
    text-decoration: underline;
}

/* ===== error_modal ===== */
#security_error_modal .security-error__icon.material-symbols-outlined {
    /* MFE-2271: the security block is a red padlock in a soft red circle, per
     * the Figma (Decision / blocking modal, red tone), not a grey shield. */
    font-size: 32px;
    color: var(--system-danger-600);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(173, 42, 42, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
#security_error_modal .security-error__code {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    color: var(--neutral-n500);
    font-variant-numeric: tabular-nums;
}

/* ===== error_status_check ===== */
#status_check_modal .status-check__spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border: 3px solid var(--neutral-n200);
    border-top-color: var(--primary-p600);
    border-radius: 50%;
    animation: status-check-spin 0.8s linear infinite;
}
@keyframes status-check-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    #status_check_modal .status-check__spinner { animation: none; }
}
/* MFE-2271: each status icon sits in a soft colour circle badge (Figma). */
#status_check_modal .status-check__icon.material-symbols-outlined {
    font-size: 32px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
/* Success: white check on a solid green circle. */
#status_check_modal .status-check__icon--ok {
    color: var(--neutral-n0);
    background: #2E7D46;
}
/* Retry / failed: grey glyph on a soft grey circle. */
#status_check_modal .status-check__icon--retry {
    color: var(--neutral-n500);
    background: rgba(72, 74, 77, 0.08);
}
/* Warning / unknown / duplicate: amber glyph on a soft amber circle. */
#status_check_modal .status-check__icon--unknown {
    color: #C68A2E;
    background: rgba(198, 138, 46, 0.12);
}

/*
 * MFE-2271: the status-check flow is a FULL-PAGE takeover, not a centered card.
 *
 * The Figma "Top-up / unknown outcome" frames (Submitting -> confirmed ->
 * unresolved, and the MFE-2271 duplicate) are drawn as a full screen, the same
 * language as .fullpage-error and pages/client/payment/payment_processed.php.
 * The shell reuses the app's .modal/.modal-container markup only so it can be
 * mounted once in the shell with a display:none guard - it is not meant to look
 * like the security decision modal. Left as a bare .modal it rendered as a
 * band floating over the live PayNow page (.modal has no background and the
 * .overlay default is display:none), which is the bug this fixes. Scoped to the
 * id so the shared .modal class and the security modal below are untouched.
 */
#status_check_modal {
    background: var(--neutral-n0);
    /*
     * Above page chrome (.modal 1000, .modal-container / .toast 1001) but BELOW
     * .status-banner (1800). bindOfflineBanner() is bound app-wide, so going
     * offline while this screen is polling inserts the "You're offline" bar - at
     * 2000 the takeover would paint over it and leave the user a silent,
     * unexplained spinner. .fullpage-error can sit at 2000 because it is a
     * terminal screen with no pending network work behind it; this one is not.
     */
    z-index: 1700;
}
#status_check_modal .modal-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 32px 24px;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*
     * Centre the body with auto margins, NOT justify-content: center. Content
     * taller than the viewport (the unresolved/duplicate screen on a short or
     * font-scaled WebView) has to stay reachable, and the buttons are the part
     * that is lost on a flow that offers no retry. With justify-content: center
     * the overflow splits both ends and the top sits at a negative scroll offset
     * no browser can reach; flex-start plus margin:auto on the child (below)
     * centres it while it fits, then collapses to a top-anchored, fully
     * scrollable column once it overflows.
     */
    justify-content: flex-start;
    overflow-y: auto;
    box-sizing: border-box;
}
/*
 * Constrain the rendered body so the centered copy wraps at a comfortable
 * width (like .fullpage-error__title/subtitle) rather than stretching to
 * content width. It also bounds the stacked .flex-row, whose buttons fill it
 * via button-lg's align-self: stretch (this redesign dropped the old flex:1).
 */
#status_check_modal #status_check_body {
    width: 100%;
    max-width: 340px;
    /* Auto block margins centre this in the column while there is room, and
     * collapse to 0 on overflow so the start edge stays scrollable (see above). */
    margin: auto 0;
    text-align: center;
}
/* No backdrop on a full-page takeover: it covers the viewport itself. */
#status_check_modal .overlay {
    display: none;
}

/*
 * MFE-2271: the top-right X is the universal dismiss on the full-page status
 * screens (the Figma draws one on every resolution). It is shell chrome pinned
 * to the #status_check_modal takeover (position: fixed), NOT part of the
 * centered #status_check_body, so it holds the same top-right spot on every
 * screen regardless of how tall the body is. z-index lifts it above the
 * scrollable body; 44px is a comfortable tap target. renderChecking() hides it
 * (display:none) so the client cannot close mid-submit.
 */
#status_check_modal .status-check__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--neutral-n700, #4D535C);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#status_check_modal .status-check__close .material-symbols-outlined {
    font-size: 28px;
    line-height: 1;
}

/*
 * MFE-2271: the security block STAYS a modal (Figma "Decision / blocking
 * modal": a decision the user must make, Close + Contact Support), but its
 * dimmed backdrop never showed. startStatusCheck/showSecurityErrorModal only
 * clear the overlay's inline display, which reverts to the .overlay default of
 * display:none, so it too rendered as a bare card over live content. Restore
 * the backdrop here, scoped to the id, so it reads as a real blocking modal.
 */
#security_error_modal .overlay {
    display: block;
}

/*
 * MFE-2271: stack the action buttons ONE PER ROW, full width, instead of two
 * side by side. A single action then fills the width instead of sitting
 * half-width, and a two-action screen (failed: Close + Try Again; the security
 * modal: Close + Contact Support) gets two comfortable full-width buttons. The
 * buttons are button-lg (align-self: stretch), so flipping the row to a column
 * makes each fill the width; the row's gap carries over as vertical spacing.
 * Scoped to these two shells so the shared .flex-row used elsewhere is untouched.
 */
#status_check_modal .flex-row,
#security_error_modal .flex-row {
    flex-direction: column;
}
/* MFE-2271: roomier buttons for these full-page CTAs. The button-lg default
 * (15px) reads tight next to the Figma, so give the vertical padding more air. */
#status_check_modal .flex-row .button,
#security_error_modal .flex-row .button {
    padding-top: 18px;
    padding-bottom: 18px;
}

/* ===== empty_state ===== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 16px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
.empty-state__icon.material-symbols-outlined {
    font-size: 28px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-n400);
    background: rgba(72, 74, 77, 0.06);
    margin: 0 auto 4px;
}
.empty-state__title {
    color: var(--neutral-n800);
    font-family: "Nunito Sans";
    font-size: 16px;
    font-weight: 700;
    line-height: 130%;
}
.empty-state__subtitle { max-width: 280px; }
.empty-state__action { margin-top: 12px; }
/* MFE-2271: section / empty CTAs match the full-page ones - full width and the
 * same roomy padding, so every error-state button is the same size. */
.section-error__retry,
.empty-state__action {
    width: 100%;
    max-width: 340px;
    cursor: pointer;
    padding-top: 18px;
    padding-bottom: 18px;
}