/* 
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;
}

/* Colours come from the repo theme tokens (index.css), never a literal:
   the muted icon uses --neutral-n500, and the title inherits .body-2's
   --neutral-n700. Font family is inherited too — .body-2 and .button-text
   both set "Nunito Sans", the app's face. */
.section-error__icon.material-symbols-outlined {
    font-size: 40px;
    line-height: 40px;
    color: var(--neutral-n500);
}

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

.fullpage-error__icon.material-symbols-outlined {
    font-size: 56px;
    line-height: 56px;
    color: var(--neutral-n500);
}

.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%;
    max-width: 280px;
    margin-top: 8px;
}

.fullpage-error__actions .button {
    width: 100%;
    cursor: pointer;
}

/* ===== 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 {
    font-size: 40px;
    line-height: 40px;
    color: var(--neutral-n500);
    display: block;
    text-align: center;
    margin-bottom: 12px;
}
#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; }
}
#status_check_modal .status-check__icon.material-symbols-outlined {
    font-size: 40px; line-height: 40px; display: block; text-align: center; margin-bottom: 12px;
}
#status_check_modal .status-check__icon--ok { color: #2E7D46; }
#status_check_modal .status-check__icon--retry { color: var(--neutral-n500); }
#status_check_modal .status-check__icon--unknown { color: #C68A2E; }

/*
 * 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, and so the flex:1 buttons in .flex-row have a width to fill.
 */
#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 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;
}

/* ===== 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: 44px;
    line-height: 44px;
    color: var(--neutral-n400);
    margin-bottom: 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; cursor: pointer; }