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

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