/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap'); */

*, *::before, *::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

:root {
    --primary: #3498db;
    --secondary: #2c3e50;
    --accent: #e74c3c;
    --light: #ecf0f1;
    --dark: #2c3e50;
    --success: #2ecc71;
    --danger: #f72585;
    --rounded4: 4px;
    --gradient-bg: linear-gradient(135deg, var(--primary), var(--secondary));
    --warning: #f77f00;
    --info: #7209b7;
    --gray: #6c757d;
    --border: #dee2e6;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --radius: 8px;
    --transition: all 0.3s ease;

    --primary-light: #eef2ff;
    --light: #f8f9fa;
    --dark: #212529;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --transition: all 0.3s ease;

    --vac-primary: #4361ee;
    --vac-secondary: #3a0ca3;
    --vac-success: #4cc9f0;
    --vac-warning: #f72585;
    --vac-info: #7209b7;
    --vac-light: #f8f9fa;
    --vac-dark: #212529;
    --vac-gray: #6c757d;
    --vac-border: #dee2e6;
    --vac-bg: #f5f7fb;
    --vac-card-bg: #ffffff;
    --vac-approved: #2ecc71;
    --vac-pending: #f39c12;
    --vac-rejected: #e74c3c;
}

html {
 --rounded2: 2px;
 --rounded4: 4px;
 --rounded8: 8px;
 --rounded18: 18px;
 --button-padding: 6px 16px 6px 16px;
 --blueDisabled: rgba(21, 156, 228, 0.643);
 --blue: rgb(9, 95, 153);
 --selected:  #e6f0ff;
 --blueCell: rgb(11, 128, 206);
 --green: #3aac8b;
 --greenGroup: #3a8cac;
 --yellow: rgb(195 128 0);
 --yellow2: rgb(195 128 0);
 --tableTextBlue: rgb(124 202 255);
 --blue-hover: rgb(28, 139, 213);
 --blue-click: rgb(11, 93, 148);
 --light-red: rgb(255, 182, 184);
 --red: rgb(196, 70, 78);
 --red-active: rgb(125, 26, 37);
 --light-gray: rgba(230, 236, 242, 0.35);
 --gray: #838383;
 --grayOff: #a3a3a3;
 --dark-gray: rgb(108, 117, 125);
 --myBorderColor: #cfcfcf;
 --myBorderColor2: #f5f5f5;
 --white: #ffffff;
 --labelColor: #979797;
 --overWhite: #fafafa;
 --overWhite2: #f5f5f5;
 --overWhite3: #ffffff;
 --inputBackground: #e2e3e5;
 --noninvert-white: rgb(255, 255, 255);
 --black: black;
 --lightbox: rgba(0, 0, 0, .4);
 --lightbox-7: rgb(151 146 146 / 70%);
 --lightbox-8: rgba(0, 0, 0, .8);
 --lightbox-9: rgba(0, 0, 0, .9);
 --orange: rgb(241, 89, 42);
 --invoiceRed: #f99797c4;
 --invoiceRed2: #ffdfdf;
 --invoiceGreen: #a7ffa7;
 --invoiceGreen2: #dafbda;
 --invoiceOrange: #fffdb9;
 --invoicePurpule: #ffb9f9;
 
 --goldStar: #ffa600;
 --grayStar: #d3d3d3;
 --invoiceOrange2: #fffed0;
 --invoiceBlue2: rgb(187 228 255);
 --tableAdd: #bcefdf;
 --tutors: rgb(245, 245, 245);
 --shadow: 0 1px 5px 0 rgba(0,0,0,.07843);
 --borderRule: 1px solid var(--myBorderColor);
 --borderRule2: 1px solid var(--myBorderColor2);
 --borderRule3: 1px solid #ebeaea;
 --dashedBorderRule: 1px dashed var(--gray);
 --meetingButtonColor: rgba(0, 0, 0, .4);
 --meetingButtonRed: rgb(255 0 0 / 61%);
 --filterValue: grayscale(100%) brightness(92%); /* Apply filter only to background image */
 --graySession: #a3a3a34f;
 --yellowSession: #ffdc9a;
 --lg1: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

html.invert {
 --primary-light: #29292b;
 --myBorderColor: #2f2f2f;
 --myBorderColor2: #1c1c1c;
 --blue: rgb(41 100 139);
 --selected: #13132b;
 --blueCell: rgb(88, 188, 255);
 --blueDisabled: rgba(21, 99, 141, 0.643);
 --white: rgb(12 19 23);
 --green: #007f59;
 --greenGroup: #00687f;
 --overWhite: #111b21;
 --overWhite2: #1b455569;
 --overWhite3: #111b21;
 --yellow: rgb(81 55 7);
 --yellow2: #d9951a;
 --inputBackground: #000000;
 --red: rgb(227, 51, 63);
 --black: #fff;
 --gray: #989898;
 --grayOff: #434343;
 --dark-gray: rgb(177, 190, 204);
 --lightbox-9: rgba(67, 57, 57, 0.9);
 --tableAdd: #34413d;
 --tutors: rgb(23 35 43);
 --invoiceRed: #ff00003d;
 --invoiceRed2: #512323;
 --invoiceGreen: #276329bf;
 --invoiceGreen2: #1f2b1f;
 --invoiceOrange: #553f01;
 --invoicePurpule: #3b1a38;
 --goldStar: #f1c40f;
 --grayStar: #ededed;
 --invoiceOrange2: #5d5b39;
 --invoiceBlue2: #243b5b;
 --borderRule: 1px solid var(--myBorderColor);
 --borderRule2: 1px solid var(--myBorderColor2);
 --borderRule3: 1px solid #292828;
 --dashedBorderRule: 1px dashed var(--myBorderColor);
 --meetingButtonColor: rgb(57 57 57 / 53%);
 --meetingButtonRed: rgb(117 0 0 / 49%);
 --filterValue: grayscale(100%) brightness(11%); /* Apply filter only to background image */
 --graySession: #a3a3a34f;
 --yellowSession: #936000;
 --lg1: linear-gradient(135deg, #2f2f2f 0%, #313b49 100%);
}

/* Custom scrollbar style */
::-webkit-scrollbar {
 width: 4px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
 background: var(--white); /* Color of the track */
}

::-webkit-scrollbar-thumb {
 background: var(--gradient-bg); /* Color of the thumb */
 border-radius: 20px; /* Rounded corners */
}

::-webkit-scrollbar-thumb:hover {
 background: var(--gradient-bg); /* Hover color of the thumb */
 cursor: pointer;
}

html, body {
 height: 100%;
}

@font-face {
 font-family: 'DroidArabicNaskhRegular';
 src: url('font.ttf') format('truetype');
}

body {
 /* font-family: 'DroidArabicNaskhRegular', sans-serif; */
 font-family: 'Tajawal', sans-serif;
 background-color: var(--white);
 color: var(--black);
 /* font-weight: 700; */
 line-height: 30px;
 font-size: 18px;
}

img, picture, video {
 display: block;
 width: 100%;
 max-width: 100%;
}

input, button, textarea, select {
 font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
 overflow-wrap: break-word;
}

a {
 color: inherit;
 text-decoration: none;
}

label {
 display: block;
}

input[type=checkbox], input[type=radio] {
 /* transform: scale(1.3); */
 margin-inline-end: 6px;
}

.pdbtn {
 padding: var(--button-padding);
}

.cb {
 color: var(--blue);
}

.cbb {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-right: 3px solid var(--accent);
}

.cbb_2 {
    color: var(--accent);
}

.cy {
 color: var(--yellow2);
}

.tsx-1 {
 transform: scaleX(-1);
}

.cg {
 color: var(--grayStar);
}

.h100 {
 height: 100px !important;
}

.on {
 outline: none;
}

.p {
 cursor: pointer;
}

.b {
 font-weight: bold;
}

.g {
 color: var(--dark-gray);
}

.r {
 color: var(--red);
}

.rb {
 border-color: var(--red) !important;
}

.mh75 {
 min-height: 75vh;
}

.tc {
 text-align: center !important
}
.bkow2 {
 background-color: var(--overWhite2);
}

.bct {
 background-color: var(--tutors);
}
.vh {
 visibility: hidden;
}

.rb2 {
 border: 1px solid red !important;
 border-radius: 4px;
}

.ltr {
 direction: ltr;
}

.fg1 {
 flex-grow: 1;
}

.mw100 {
 max-width: 100%;
}

.mw200px {
 max-width: 200px;
}

.w100 {
 width: 100% !important;
}

.m10 {
 margin: 30px 5px 0px 5px;
}

.mb0 {
 margin-bottom: 0px !important;
}

.mb5 {
 margin-bottom: 5px;
}

.mb10 {
 margin-bottom: 10px;
}

.mb15 {
 margin-bottom: 15px;
}

.mb20 {
 margin-bottom: 20px;
}

.mb30 {
 margin-bottom: 30px;
}

.fwb {
 font-weight: bold;
}

.cp {
 cursor: pointer;
}

.mt3 {
 margin-top: 3px;
}

.mt3 {
 margin-top: 3px;
}

.mt4 {
 margin-top: 4px;
}

.mt5 {
 margin-top: 5px;
}

.mt10 {
 margin-top: 10px;
}

.cr {
 color: red;
}

.fs0 {
 flex-shrink: 0;
}

.pt5 {
 padding-top: 5px;
}

.pt10 {
 padding-top: 10px;
}

.mt15 {
 margin-top: 15px;
}

.mt20 {
 margin-top: 20px;
}

.mt25 {
 margin-top: 25px;
}

.mt30 {
 margin-top: 30px;
}

.mt35 {
 margin-top: 27px;
}

.ms5 {
 margin: 0px 5px;
}

.ms20 {
 margin: 0px 20px;
}

.mis5 {
 margin-inline-start: 5px;
}

.mis20 {
 margin-inline-start: 20px;
}

.pd10 {
 padding: 10px;
}

.pds10 {
 padding: 0px 10px;
}

.pdlr20 {
 padding: 0px 20px 0px 20px;
}

.w50 {
 width: 50px;
}

.w140 {
 width: 140px;
}

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

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

.tar {
 text-align: right;
}

.dn {
 display: none;
}

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

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

.r-padding {
 padding: 35px 0px 35px 0px;
}

.r-width {
 width: 100%;
 padding: 0px 15px 0px 15px;
}

.r-grid {
 display: grid;
 grid-template-columns: repeat(3, 80px);
 justify-content: center;
 align-items: center;
 grid-gap: 10px;
 margin-top: 30px;
}

.la6 {
 background-image: url('128.png');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
 width: 45px;
 height: 45px;
 border-radius: 25px;
}

.quickaccess {
 display: flex;
 justify-content: space-between;
 margin-bottom: 32px;
 text-decoration: underline;
 color: var(--blue-hover);
 cursor: pointer;
}

.a4 {
 background-color: var(--light-gray);
}

.a5 {
 max-width: 100%;
 height: auto;
 border-radius: var(--rounded4); /*r*/
}

.a6 {
 margin-top: 25px;
 margin-bottom: 25px;
 line-height: 36px;
}

.a7 {
 width: 80px;
 height: 80px;
 cursor: pointer;
 border-radius: 10px;
}

.a10 {
 color: white;
    background: var(--gradient-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 3;
    margin-left: auto;
    margin-right: auto;
    min-height: 70px;
    user-select: none;
    padding: 0 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.a12 {
 padding: 10px;
 cursor: pointer;
}

.a14 {
    display: flex;
    /* min-height: 100vh; */
    background-color: var(--tutors);
}

.a15 {
 width: 100%;
 display: flex;
 justify-content:
  space-evenly;
}

.a16 {
 padding: 15px;
 width: 50px;
 height: 20px;
}

.a17 {
 display: flex;
 align-items: center;
 padding: 16px;
 border-top: var(--borderRule3);
 gap: 16px;
 min-height: 50px;
}

.a18 {
 width: 14%;
 display: flex;
 justify-content: center;
}

.a19 {
 visibility: hidden;
}

.a20 {
 display: flex;
 justify-content: flex-end;
}

.a21 {
    padding: 12px;
    position: relative;
    height: auto;
    display: flex;
    gap: 16px;
    align-items: center;
    border-radius: var(--rounded4);
    transition: all 0.3s ease;
    margin-bottom: 5px;
}

  .a21:hover {
   background-color: rgba(255, 255, 255, 0.15);
   transform: translateX(-5px);
   border-right: 3px solid #e74c3c;
  }

.a23 {
 display: none;
}

.a25 {
 cursor: pointer;
}

.a26 {
 max-width: 85%;
 max-height: 70vh;
 background-color: var(--tutors);
 border-radius: 16px;
 padding: 16px;
 box-shadow: rgba(1, 1, 1, 0.3) 0px 0px 5px;
 overflow: auto;
 font-size: 12px;
}

.a26 ul {
 padding: 16px;
}

.a27 {
 max-width: 300px;
 background-color: var(--tutors);
 border-radius: 16px;
 padding: 16px;
 box-shadow: rgba(1, 1, 1, 0.3) 0px 0px 5px;
 overflow: auto;
}

.a28 {
 /* margin-top: 15px; */
 display: block;
 color: var(--noninvert-white);
 background-color: var(--blue);
 border: 0px;
 border-radius: var(--rounded4);
 transition-property: background-color;
 transition-duration: 0.2s;
 cursor: pointer;
 text-align: center;
 padding: var(--button-padding);
 user-select: none !important;
 outline: none !important;
 min-width: 120px;
}

.a33 {
 display: block;
 width: 100%;
 color: var(--black);
 background-color: var(--white);
 border: var(--borderRule);
 border-radius: var(--rounded4);
 outline: none;
 height: 34px;
}

.a34 {
 /* input */
 display: block;
 width: 100%;
 height: 110px;
 color: var(--black);
 background-color: var(--white);
 border: var(--borderRule);
 border-radius: var(--rounded4); /*r*/
 padding: 5px;
 outline: none;
 resize: both;
}

.a35 {
 color: var(--red);
 display: none;
}

.a36 {
 height: 75vh;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
}

.a38 {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.a38:hover {
   background-color: rgba(255, 255, 255, 0.3);
   color: white;
  }

.a39 {
 display: block;
 margin: 8px 4px 0px 4px;
 color: var(--blue);
 width: 50px;
 height: 50px;
 border: .25em solid currentColor;
 border-width: 2px;
 border-left-color: transparent;
 border-radius: 50%;
 animation: 0.8s linear infinite a39frame;
 opacity: 1;
 transition: opacity .25s ease-in;
}

@keyframes a39frame {
 to {
  transform: rotate(360deg);
 }
}

.a40 {
 width: 47px;
 height: 47px;
 cursor: pointer;
 border-radius: 9999px;
 margin-top: 3px;
 object-fit: cover;
}

.a41 {
 color: var(--white);
 background-color: var(--black);
 outline: none;
 padding: 5px;
 border: 0px;
}

.a42 {
 position: fixed;
 top: 60px;
 /* inset-inline-start: 16px; */
 inset-inline-end: 16px;
 display: flex;
 justify-content: end;
 align-items: center;
 z-index: 5;
}

.a43 {
 color: var(--noninvert-white);
 border-radius: var(--rounded4);
 padding: 8px 16px;
 min-width: 100%;
 display: flex;
 justify-content: space-between;
 gap: 25px;
}

.a44 {
 display: inline-block;
 color: var(--noninvert-white);
 background-color: var(--red);
 border: 0px;
 border-radius: var(--rounded4); /*r*/
 transition-property: background-color;
 transition-duration: 0.2s;
 cursor: pointer;
 padding: var(--button-padding);
 user-select: none;
 min-width: 120px;
}

.a44:focus {
 outline: none;
 box-shadow: 0 0 0 4px var(--light-red);
}

.a44:active {
 background-color: var(--red-active);
}

.a46 {
 display: block;
 color: var(--black);
 background-color: var(--white);
 border: var(--borderRule);
 border-radius: var(--rounded4);
 transition-property: background-color;
 transition-duration: 0.2s;
 cursor: pointer;
 padding: var(--button-padding);
 user-select: none;
 min-width: 120px;
}

.a46:active {
 background-color: var(--overWhite);
}

.a47 {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 75vh;
}

.a48 {
 padding-top: 2px;
 min-width: 30px;
 min-height: 30px;
 text-align: center;
 cursor: pointer;
 border-radius: 5px;
 transition: background-color 0.2s ease;
}

.a48:active {
 background-color: var(--gray);
}

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

.a50 {
    display: flex;
    flex-direction: column;
    gap: 0px;
    overflow: auto;
    height: 100%;
    min-width: 70px;
    padding: 16px;
    font-size: 14px;
}

/* .a51 {
 display: flex;
 justify-content: space-between;
 align-items: center;
 background-color: var(--white);
} */

.a52 {
 width: 40px;
 height: 40px;
 border-radius: 25px;
 cursor: pointer;
}

.a52:hover {
 box-shadow: 0 0 0 4px var(--light-gray);
 background-color: var(--gray);
}

.a53 {
 background-color: var(--gray);
}

/*---------Slider------------*/
.a54 {
 /*middle panel in slider*/
 display: flex;
 flex-wrap: nowrap;
 direction: ltr !important;
 overflow: visible;
 width: 100%;
 height: 70%;
 min-height: 70%;
 max-height: 70%;
 user-select: none;
 transition: transform 0.25s ease;
}

.a55 {
 /*full-width flex item in slider middle panel*/
 width: 100%;
 max-width: 100%;
 height: 100%;
 flex-shrink: 0;
 display: flex;
 align-items: center;
 justify-content: center;
}

.a56 {
 /*img inside .a55 in slider*/
 width: 100%;
 max-width: 100%;
 max-height: 100%;
 object-fit: contain;
}

.a57 {
 /*top/bottom panels in slider*/
 width: 100%;
 height: 15%;
 min-height: 15%;
 max-height: 15%;
 flex-grow: 0;
 display: flex;
 align-items: center;
 direction: ltr;
 padding: 0px 12px;
 /* background-color: var(--lightbox-7); */
}

.a59 {
 /*slider*/
 position: fixed;
 z-index: 5;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: var(--lightbox-8);
 justify-content: center;
 align-items: center;
 flex-direction: column;
 max-width: 100%;
 max-height: 100%;
}

.a60 {
 /*slider left arrow*/
 display: flex;
 position: fixed;
 left: 12px;
 width: 40px;
 height: 40px;
 color: var(--noninvert-white);
 background-color: var(--lightbox-9);
 transition: background-color 0.2s;
 border-radius: 25px;
 z-index: 2;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 user-select: none;
 outline: none;
}

.a61 {
 /*slider right arrow*/
 display: flex;
 position: fixed;
 right: 12px;
 width: 40px;
 height: 40px;
 color: var(--noninvert-white);
 background-color: var(--lightbox-9);
 transition: background-color 0.2s;
 border-radius: 25px;
 z-index: 2;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 user-select: none;
 outline: none;
}

.a63 {
 /*lower slider panel*/
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}

.a64 {
 /*slider controls*/
 display: flex;
 width: 40px;
 height: 40px;
 color: var(--noninvert-white);
 background-color: var(--lightbox-9);
 transition: background-color 0.2s;
 border-radius: 25px;
 z-index: 2;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 user-select: none;
 outline: none;
}

.a65 {
 /*slider bottom controls container*/
 display: flex;
 justify-content: space-evenly;
 width: 70%;
}

/*---------End Slider------------*/

.a66 {
 margin: 1px 0px;
 display: flex;
 gap: 12px;
 padding: 16px;
 outline-style: none;
 background-color: var(--overWhite3);
 border-bottom: var(--borderRule);
}

.a67 {
 /*post left side */
 flex-shrink: 0;
 flex-basis: 40px;
 display: flex;
 flex-direction: column;
}

.a68 {
 width: 100%;
}

.a69 {
 /*pic in post left side a67*/
 width: 50px;
 height: 50px;
 object-fit: cover;
 max-width: 48px;
 max-height: 48px;
 border-radius: 9999px;
 cursor: pointer;
 user-select: none;
}

.a70 {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 5px;
 height: 24px;
}

.a71 {
 margin: 1px 0px;
 display: flex;
 gap: 12px;
 padding: 8px 16px;
 outline-style: none;
 background-color: var(--overWhite3);
 border-bottom: var(--borderRule);
 font-size: 12px;
}

.a72 {
 margin-top: 6px;
 width: 100%;
 height: calc((100vw) * 0.41);
 max-height: 285px;
 border-radius: var(--rounded8); /*r*/
 display: flex;
 grid-gap: 2px;
 overflow: hidden;
 background-color: var(--white);
}

.a73 {
 /*grid item row*/
 flex-grow: 1;
 flex-shrink: 0;
 display: flex;
 grid-gap: 2px;
 flex-direction: column;
}

.a74 {
 /*grid item column with background img*/
 flex-grow: 1;
 flex-shrink: 0;
 background-size: cover;
 background-repeat: no-repeat;
 cursor: pointer;
}

.a75 {
 display: flex;
 gap: 12px;
 padding: 16px;
 outline-style: none;
 background-color: var(--overWhite3);
 border-bottom: var(--borderRule);
}

.a77 {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 4;
    transition: transform .4s;
    border-inline-end: var(--borderRule);
    background: #2c3e50;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.a78 {
    display: flex;
    flex-direction: column;
    background: var(--gradient-bg);
    width: 75%;
    height: 100%;
    user-select: none;
}

.a79 {
 transform: translateX(-100%);
}

.a79_ar {
 transform: translateX(200%);
}

.a80 {
 transform: translateX(0);
 background-color: var(--lightbox);
}

.a81 {
    white-space: nowrap;
    font-weight: 500;
    color: white;
}

/*---------------Video-----------------*/

.a82 {
 margin-top: 12px;
 width: 100%;
 height: calc((100vw) * 0.41);
 max-height: 285px;
 border-radius: var(--rounded4); /*r*/
 background-color: var(--white);
}

.a83 {
 margin-top: 6px;
 max-height: 285px;
 border-radius: var(--rounded4); /*r*/
}

/*---------------User Listing Post-----------------*/

.a84 {
 /*post container*/
 display: flex;
 gap: 12px;
 padding: 10px 10px;
 outline-style: none;
 transition: background-color 0.3s;
 background-color: var(--white);
 cursor: pointer;
 border-radius: var(--rounded4); /*r*/
}

/*------Settings Page Image-------*/

.a85 {
 border: var(--borderRule);
 background-size: cover;
 min-width: 90px;
 min-height: 90px;
 border-radius: 9999px;
 display: flex;
 align-items: flex-end;
 justify-content: start;
 transition: background-image 0.2s;
 cursor: pointer;
}

.a86 {
 color: var(--black);
 background-color: var(--white);
 border: var(--borderRule);
 width: 35px;
 height: 35px;
 border-radius: 9999px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
}

/*----------Global Add Buttons-----------*/

.a87 {
 width: 53px;
 height: 53px;
 color: var(--noninvert-white);
 background-color: var(--blue);
 border-radius: 9999px;
 position: fixed;
 bottom: 18px;
 inset-inline-end: 18px;
 justify-content: center;
 align-items: center;
 z-index: 2;
}

.a88 {
 /* in menu button for ipad,laptop */
 width: 53px;
 height: 53px;
 color: var(--noninvert-white);
 background-color: var(--blue);
 border-radius: 9999px;
 display: none;
 justify-content: center;
 align-items: center;
 margin-top: 15px;
 cursor: pointer;
 transition: opacity 0.5s;
}

.a89 {
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: var(--gray);
 border-radius: 9999px;
 width: 48px;
 height: 48px;
}

.a90 {
 margin: 12px 0px;
 font-family: inherit;
 white-space: break-spaces;
}

.a90_2 {
 margin: 0px;
 font-family: inherit;
 white-space: break-spaces;
}

.a90[contenteditable="true"]:focus {
 /* border: 1px dashed var(--black); */
 outline: none;
}

.a91 {
 margin-top: 15px;
 border: 0px;
 border-radius: var(--rounded4); /*r*/
 font-weight: bold;
 transition-property: background-color;
 transition-duration: 0.2s;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 padding: 8px 16px 8px 16px;
 user-select: none !important;
 outline: none !important;
}

.a92 {
 color: var(--noninvert-white);
 background-color: var(--blue);
}

.a92:active {
 background-color: var(--blue-click) !important;
}

.a93 {
 display: block;
 color: var(--noninvert-white);
 width: 29px;
 height: 29px;
 border: .25em solid currentColor;
 border-width: 2px;
 border-left-color: transparent;
 border-radius: 50%;
 animation: 0.8s linear infinite a39frame;
 transition: opacity .25s ease-in;
}

.a96 {
 padding: 40px;
 background-color: var(--white);
}

.a97 {
 display: none;
 line-height: 18px;
 position: fixed;
 bottom: 10px;
 left: 32px;
 right: 32px;
 text-align: center;
}

.a98 {
 display: flex;
 align-items: center;
 justify-content: space-evenly;
 width: 80%;
 margin-top: 30px;
 margin-bottom: 30px;
}

.a100 {
 margin-top: 15px;
 width: 120px;
}

.a101 {
 display: flex;
}

.a102 {
 margin: 16px 0px;
 display: flex;
 justify-content: space-between;
}

.a103 {
 margin: 0px 20px;
}

.a104 {
 display: inline;
}

.a106 {
 margin-top: 10px;
 display: flex;
 gap: 8px;
}

.a107 {
 display: block;
 border: var(--borderRule);
 border-radius: var(--rounded4); /*r*/
 height: 40px;
 padding: 5px;
 background-color: var(--white);
 color: var(--black);
}

.a108 {
 flex-grow: 1;
 width: 50%;
 max-width: 50%;
}

.a109 {
 border: var(--borderRule);
 border-radius: var(--rounded4); /*r*/
 display: grid;
 overflow: auto;
}

.a109>div {
 border-left: var(--borderRule);
 border-bottom: var(--borderRule);
 text-align: center;
 padding: 4px 0px;
}

.a109m {
 border: var(--borderRule);
 border-radius: var(--rounded4); /*r*/
 display: grid;
 overflow: auto;
}

.a109m>div {
 border-left: var(--borderRule);
 border-bottom: var(--borderRule);
 padding: 2px 5px;
}

.a110 {
 display: none;
}

.a112 {
 cursor: pointer;
 min-width: 90px;
}

.a113 {
 font-weight: bold;
 min-width: 115px;
}

.a116 {
 min-width: 48px;
 min-height: 48px;
 object-fit: cover;
 max-width: 48px;
 max-height: 48px;
 border-radius: 9999px;
 cursor: pointer;
 user-select: none;
}

.a117 {
 grid-column: 1 / span 4;
}

.a119 {
 flex-direction: column;
 gap: 5px;
 text-wrap: nowrap;
}

.a121 {
 /* input */
 display: block;
 width: 100%;
 color: var(--black);
 background-color: var(--white);
 border: var(--borderRule);
 border-radius: var(--rounded4); /*r*/
 height: 35px;
 padding: 5px;
}

.a122 {
 padding: 14px 16px 10px 16px;
 border: var(--borderRule);
 border-radius: var(--rounded4);
 background-color: var(--overWhite);
}

.a123 {
 padding: 0px;
}

.a124 {
 display: none;
}

.a125 {
 display: block;
}

.a127 {
 margin-top: 5px;
 cursor: pointer;
 display: flex;
 gap: 5px;
 padding: 10px 15px;
 border-radius: var(--rounded18);
 /* direction: ltr; */
 background-color: var(--overWhite);
 border: var(--borderRule);
}

.a128 {
 padding: 16px;
}

.a129 {
 font-size: 0.7em;
 /*mix post*/
 line-height: 1.5em;
 color: var(--dark-gray);
}

.a130 {
 min-width: 30px;
 padding-top: 5px;
}

.a131 {
 word-break: break-word;
}

.a132 {
 padding-top: 4px;
 margin-inline-end: 5px;
}

.a133 {
 font-family: cursive, fantasy, sans-serif;
 display: flex;
 justify-content: center;
 font-size: 1.6em;
 /*logintitle*/
}

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

.a135 {
 color: var(--blue);
 margin-inline-start: 5px;
 cursor: pointer;
}

.a136 {
 height: 89vh;
 display: flex;
 align-items: center;
 justify-content: center;
}

.a137 {
 width: 100%;
 margin: 32px;
 padding: 32px;
 background-color: var(--white);
 border-radius: var(--rounded18);
}

.a138 {
 position: fixed;
 bottom: 0;
 width: 100%;
 min-height: 53px;
 max-height: 400px;
 color: var(--noninvert-white);
 padding: 10px 25px;
 word-break: break-word;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow-y: auto;
}

.a139 {
 font-weight: bold;
 white-space: nowrap;
}

.a139m {
 background-color: var(--overWhite);
 font-weight: bold;
}

.a140 {
 grid-column: 1 / span 6;
}

.a141 {
 grid-column: 1 / span 11;
 padding: 15px !important;
}

.a142 {
 min-width: 80px;
 max-width: 100px;
 word-break: break-all;
}

.a143 {
 grid-column: 1 / span 11;
}

.a146 {
    border-radius: var(--rounded4);
    display: grid;
    max-width: 90vw;
    overflow: auto;
    gap: 4px;
    font-size: 12px;
    background: var(--lg1);
    padding: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.a147 {
    height: 100%;
    padding: 12px 8px;
    text-align: center;
    width: 198px;
    max-width: 198px;
    text-wrap: wrap;
    cursor: pointer;
    position: relative;
    /* background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); */
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.a147:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
}

.a148 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 130px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    font-weight: 600;
    padding: 12px 8px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.a149 {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    min-height: 80px;
}

.a150 {
 grid-column: 1 / span 2;
 text-align: center;
 padding: 16px;
}

.a151 {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.a152 {
 display: none;
 padding: 16px;
}

.a154 {
 min-width: 200px;
}

.a155 {
 cursor: pointer;
 color: var(--blueCell);
}

.a157 {
 /* input */
 display: block;
 width: 100%;
 height: 350px;
 color: var(--black);
 background-color: var(--white);
 border: var(--borderRule);
 border-radius: var(--rounded4); /*r*/
 padding: 15px;
 outline: none;
 resize: both;
}

.a158 {
 display: flex;
 justify-content: center;
 margin-bottom: 15px;
}

.a159 {
 max-width: 100%;
}

.a160 {
    display: none;
    outline: none;
    text-decoration: none;
    color: white;
}

.a161 {
 transition: opacity 0.5s ease;
}

.a162 {
 margin-top: 12px;
}

.a163 {
 margin-top: 6px;
 width: 100%;
 max-width: 100%;
 height: 34px;
}

.a165 {
 margin-top: 5px;
 display: flex;
 align-items: center;
 gap: 10px;
 height: 40px;
 cursor: pointer;
 user-select: none;
}

.a166 {
 display: flex;
 align-items: center;
 padding-inline-start: 10px;
}

.a168 {
    display: flex;
    align-items: center;
    gap: 16px;
}

.a169 {
 position: relative;
}

.a171 {
 appearance: none;
 -webkit-appearance: none;
 display: block;
 width: 100%;
 color: var(--black);
 background-color: var(--white);
 border: var(--borderRule);
 border-radius: var(--rounded4);
 padding: 3px 6px;
 outline: none;
 height: 35px;
 background-color: var(--overWhite);
}

/* if browser is not Safari */
@supports not ((-webkit-touch-callout: none) and (color: -webkit-link)) {
 .a171 {
  appearance: none;
  -webkit-appearance: auto;
 }
}

.a172 {
 height: 80px;
 resize: both;
 padding: 8px;
}

.a173 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 25px 10px;
}

.a174 {
 cursor: pointer;
 display: flex;
}

.a175 {
 color: var(--dark-gray);
 margin-bottom: 5px;
 /* font-size: 10px; */
}

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

.a177 {
 cursor: pointer;
 margin-top: 25px;
}

.a178 {
 position: relative;
 /* border: 1px solid #1325ef;
 border-radius: var(--rounded4); /*r*/
}

.a179 {
 position: absolute;
 top: 10px;
 padding: 8px;
 border: var(--borderRule);
 background-color: var(--white);
 border-radius: var(--rounded4); /*r*/
 cursor: pointer;
 z-index: 2;
 display: flex;
}

.a180 {
 /* border: var(--borderRule);
 border-radius: var(--rounded4); /*r*/
 height: 50vh;
 max-height: 50vh;
}

.a181 {
 width: 100%;
 height: 50vh;
 max-height: 50vh;
 z-index: 1;
 border: var(--borderRule);
 border-radius: var(--rounded4); /*r*/
}

.a182 {
 position: absolute;
 top: 0;
 left: 0;
 padding: 20px;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 50vh;
 max-height: 50vh;
 z-index: 1;
}

.a183 {
 grid-column: 1 / span 10;
}

.a184 {
 position: absolute;
 bottom: 10px;
 left: 10px;
 cursor: pointer;
}

.a185 {
 padding-left: 55px;
 padding-bottom: 32px;
 height: 30vh;
 resize: both;
}

.a186 {
 margin-top: 25px;
 position: relative;
 border: var(--borderRule);
 border-radius: var(--rounded4); /*r*/
 padding: 10px 16px 6px 16px;
 background-color: var(--overWhite);
}

.a187 {
 border: var(--borderRule);
 border-radius: var(--rounded4); /*r*/
 padding: 16px;
 margin: 16px 0px;
}

.a188 {
 display: flex;
 align-items: center;
 cursor: pointer;
}

.a189 {
 width: 50px;
 height: 50px;
 border-radius: 50%;
 margin-inline-end: 16px;
 object-fit: cover;
}

.a191 {
 font-size: 12px;
 color: var(--dark-gray);
}

.a192 {
 display: flex;
 gap: 5px;
 align-items: center;
}

.a193 {
 margin: 4px 0;
 color: var(--dark-gray);
 font-size: 14px;
}

.a195 {
 width: 100%;
 color: var(--black);
 background-color: var(--white);
 border: var(--borderRule);
 border-radius: var(--rounded18);
 padding: 0px 32px 0px 16px;
 outline: none;
 height: 38px;
}

.a196 {
 width: 100%;
}

.a197 {
 padding: 16px;
 outline-style: none;
 border-bottom: var(--borderRule); /*T*/
 cursor: pointer;
 z-index: 2;
}

.a198 {
 /*post container*/
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 8px 16px;
 outline-style: none;
 transition: background-color 0.2s;
 background-color: var(--white);
 /* border-bottom: var(--borderRule); */
 /* cursor: pointer; */
}

.a199 {
 /*post left side */
 flex-shrink: 0;
 flex-basis: 40px;
 display: flex;
 flex-direction: column;
}

.a200 {
 /*post right side*/
 /* flex-grow: 1;
 display: flex;
 flex-direction: column; */
 width: 100%;
}

.a201 {
 width: 10px;
 height: 10px;
 background-color: var(--blue);
 border-radius: 59px;
 position: absolute;
 margin-inline-start: 25px;
 top: 2px;
}

.a202 {
 width: 10px;
 height: 10px;
 background-color: var(--blue);
 border-radius: 59px;
 position: absolute;
 margin-inline-start: 25px;
 top: 9px;
}

.a203 {
 display: flex;
 gap: 5px;
 align-items: center;
}

.a204 {
 grid-column: 1 / span 10;
}

.a206 {
 text-wrap: wrap !important;
}

.a207 {
 text-wrap: wrap !important;
}

.a208 {
 height: 400px;
 resize: both;
 padding: 16px;
}

.a209 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 35px 10px;
}

.a210 {
 margin: 25px 0px 10px 0px;
 display: flex;
 justify-content: start;
 align-items: center;
}

.a211 {
 cursor: pointer;
 margin-inline-start: 10px;
 display: flex;
 justify-content: center;
 align-items: center;
}

.a212 {
 text-align: center;
 width: 45%;
 color: var(--black);
 border: var(--borderRule);
 border-radius: var(--rounded4); /*r*/
 padding: 10px 16px 6px 16px;
 outline: none;
 height: 40px;
 background-color: var(--overWhite2);
}

.a213 {
 cursor: pointer;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 10%;
 height: 40px;
}

.a214 {
 margin-bottom: 10px;
 display: flex;
 justify-content: start;
 align-items: center;
 gap: 10px;
}

.a215 {
 margin-top: 15px;
 display: flex;
 flex-direction: column;
 justify-content: start;
 gap: 10px;
}

.a216 {
 border: var(--borderRule);
 padding: 15px;
 width: 100%;
}

.a217 {
 font-weight: bold;
 margin-bottom: 10px;
}

.a218 {
 display: flex;
 justify-content: space-around;
 align-items: center;
}

.a219 {
 font-weight: bold;
}

.a220 {
 margin: 32px 0px;
}

.a221 {
 margin-top: 2px;
 display: grid;
 gap: 8px;
}

.a222 {
 font-size: 0.75rem;
 background-color: var(--overWhite2);
 border-radius: var(--rounded8);
 padding: 8px;
}

.a223 {
 text-align: center;
 padding: 6px 0px;
 display: block;
 cursor: pointer;
}

.a224 {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 4px 8px;
 cursor: pointer;
}

.a224:hover {
 background-color: var(--gray) !important;
}

.a225 {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 8px;
}

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

.a227 {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
 gap: 2px;
}

.a228 {
 padding-top: 5px;
 font-size: 0.7rem;
 background-color: var(--overWhite2);
 border-radius: var(--rounded8);
 text-align: center;
}

.a229 {
 grid-column: 1 / span 2;
}

.a230 {
 padding: 16px;
 outline-style: none;
 border-bottom: var(--borderRule);
 margin-bottom: 6px;
 box-shadow: var(--shadow);
}

.a231 {
 padding: 24px 16px 16px 16px;
}

.a232 {
 min-height: 170px;
 border: var(--borderRule);
 border-radius: var(--rounded4); /*r*/
 position: absolute;
 top: 44px;
 inset-inline-end: 3px;
 z-index: 4;
 box-shadow: var(--shadow);
 padding: 8px;
 background-color: var(--overWhite);
}

.a233 {
 display: flex;
 justify-content: start;
 align-items: center;
 cursor: pointer;
 padding: 8px;
 gap: 15px;
 user-select: none;
}

.a235 {
 margin: 20px 0px;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 10px;
}

.a236 {
 margin-inline-start: 10px;
}

.a237 {
 width: 100%;
 padding: 0px 10px;
 position: relative;
}

.a238 {
 position: absolute;
 top: 5px;
 inset-inline-end: 16px;
}

.a239 {
 font-size: 10px;
 color: var(--gray);
 margin: 0px 4px;
}

.a240 {
 text-align: center;
 padding: 8px;
 color: var(--gray);
}

.a241 {
 display: flex;
 justify-content: end;
}

.a242 {
 display: flex;
 justify-content: center;
 background-color: var(--tutors);
 padding: 8px;
 position: sticky;
 top: 51px;
}

.a243 {
 padding: 4px 12px;
 margin-inline-start: 8px;
 display: flex;
 font-size: 0.9rem;
 border-radius: 9999px;
 background-color: var(--overWhite3);
 cursor: pointer;
}

.a244 {
 display: flex;
}

.a245 {
 border-top: var(--borderRule);
 padding-top: 5px;
 position: fixed;
 bottom: 0;
 justify-content: space-around;
 align-items: center;
 width: 100%;
 background-color: var(--white);
 /* height: 75px; */
 z-index: 3;
 font-size: 14px;
}

.a246 {
 display: flex;
 justify-content: center;
 margin: 6px 0px;
}

.a247 {
 position: relative;
}

.a248 {
 position: absolute;
 top: -6px;
 inset-inline-end: 1px;
 background-color: var(--blue);
 width: 15px;
 height: 15px;
 border-radius: 9999px;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 8px;
 color: var(--noninvert-white);
}

.a249 {
 min-width: 51px;
 max-width: 100px;
}

.a250 {
 text-align: center;
 margin-bottom: 5px;
 overflow: hidden;
 white-space: nowrap;
}

.a251 {
 display: flex;
 justify-content: center;
 position: sticky;
 top: 51px;
 background-color: var(--white);
 z-index: 2;
}

.a252 {
 display: flex;
 justify-content: start;
 align-items: center;
 margin-bottom: 8px;
}

.a254 {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 8px;
 padding: 10px 0px;
 width: 70%;
}

.a255 {
 padding: 4px !important;
}

.a256 {
 display: flex;
 gap: 12px;
 padding: 8px 16px;
 outline-style: none;
}

.a257 {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 margin-inline-end: 16px;
 object-fit: cover;
}

.a258 {
 position: relative;
}

.a259 {
 display: flex;
 align-items: center;
 padding: 8px 15%;
 user-select: none;
 cursor: pointer;
}

.a260 {
 position: absolute;
 bottom: 3px;
 inset-inline-end: 15px;
 border: 2px solid var(--noninvert-white);
 width: 25px;
 height: 25px;
 background-color: #276329;
 border-radius: 25px;
 display: flex;
 justify-content: center;
 align-items: center;
 color: white;
}

.a261 {
 display: block;
 border: 0px;
 color: var(--black);
 background-color: var(--overWhite3);
 width: 100%;
 max-height: 280px;
 overflow-y: auto;
 resize: none;
 outline: none;
 font-size: 1.15rem;
}

.a262 {
 display: flex;
 align-items: start;
}

.a263 {
 display: block;
 width: 38px;
 height: 38px;
 object-fit: cover;
 border-radius: 25px;
 margin-inline-end: 10px;
}

.a264 {
 display: flex;
 cursor: pointer;
 position: relative;
 gap: 5px;
 font-size: 0.8rem;
 cursor: pointer;
}

.a265 {
 position: absolute;
 width: 100%;
 height: 100%;
 opacity: 0;
 cursor: pointer !important;
}

.a266 {
 border-top: var(--borderRule);
 padding-top: 16px;
 display: flex;
 justify-content: start;
 align-items: center;
 gap: 32px;
}

.a267 {
 border: var(--dashedBorderRule);
 padding: 8px;
 border-radius: 8px;
}

.a268 {
 padding: 16px;
 /* border: var(--borderRule);
 border-radius: var(--rounded4); */
 /* max-height: 200px;
 overflow: scroll; */
 /* position: relative; */
}

.a269 {
 position: absolute;
 top: 5px;
 inset-inline-end: 5px;
 border: var(--borderRule);
 border-radius: var(--rounded4);
 outline: none;
 background-color: var(--white);
 color: var(--black);
}

.a270 {
 padding: 15px;
}

.a271 {
 margin: 2px 0px;
 padding: 16px;
 background-color: var(--overWhite3);
}

.a272 {
 display: flex;
 gap: 12px;
 outline-style: none;
 margin-bottom: 16px;
}

.a273 {
 margin-top: 9px;
}

.a274 {
 display: flex;
 gap: 20px;
 font-weight: 700;
}

.a275 {
 cursor: pointer;
 border-radius: var(--rounded4);
 margin-inline-start: 5px;
 padding: 0px 10px;
}

.a276 {
 background-color: var(--invoiceGreen);
}

.a277 {
 background-color: var(--invoiceRed);
}

.a278 {
 display: flex;
}

.a279 {
 cursor: pointer;
 border: var(--borderRule);
 border-radius: var(--rounded4);
 padding: 0px 10px;
 background-color: var(--white);
}

.a280 {
 color: var(--gray);
 font-size: 0.8rem;
}

.a281 {
 object-fit: cover;
 height: 100%;
 max-height: 92vh;
}

.a282 {
 grid-template-columns: 1fr 1fr;
 flex-grow: 0;
 flex-shrink: 0;
 height: 92vh;
 overflow: auto;
}

/* الشاشات الصغار راح تتقسم على 2 فحتى ما يبقى فراغ اذا العدد فردي */
/* @media (max-width: 799px) { */
.a489:nth-child(odd):last-child {
 grid-column: span 2;
}
/* } */

.a283 {
 margin-top: 20px;
 width: 100%;
 height: 315px;
}

.a284 {
 background-color: var(--red);
 color: var(--noninvert-white);
}

.a285 {
 text-align: center;
 padding: 16px;
 color: var(--red);
 font-size: 1.2rem;
}

.a286 {
 text-align: center;
}

.a287 {
 position: fixed;
 z-index: 4;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: var(--white);
 overflow: auto;
}

.a288 {
 color: var(--red);
 /* background-color: var(--blue) !important; */
}

.a289 {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 border-radius: 8px;
 user-select: none;
 padding: 6px 16px;
 gap: 4px;
 position: relative;
}

.a290 {
 color: var(--blue);
 /* background-color: rgb(0 153 255 / 12%) !important; */
}

.a290i {
 color: var(--red);
}

.a291 {
 display: flex;
 justify-content: space-between;
 z-index: 6;
 align-items: center;
 user-select: none;
}

.a292 {
 background-color: var(--red) !important;
 color: var(--noninvert-white) !important;
}

.a293 {
 position: fixed;
 width: 100%;
 bottom: 150px;
 display: flex;
 justify-content: center;
}

.a294 {
    display: flex;
    gap: 16px;
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.a294:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
border-color: var(--primary);
}

.a294::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 5px;
height: 100%;
background: linear-gradient(to bottom, var(--primary), var(--secondary));
opacity: 0;
transition: opacity 0.3s ease;
}

.a294:hover::before {
opacity: 1;
}

.a295 {
    width: 60px;
    height: 60px;
    display: flex
;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.a296 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.a297 {
    display: flex
;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.a298 {
    padding: 6px 12px;
    border-radius: 20px;
    background-color: var(--overWhite2);
    font-size: 0.85rem;
    display: inline-flex
;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.a298:hover {
            background-color: var(--primary);
            color: white;
            transform: scale(1.05);
        }

        .a298::before {
            content: '•';
            color: var(--primary);
            font-weight: bold;
            margin-left: 3px;
        }

        .a298:hover::before {
            color: white;
        }

.a299 {
    font-size: 10px;
    margin-top: 0;
    color: #64748b;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.a300 {
 display: flex;
 justify-content: start;
 padding: 10px 0px;
}

.a302 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 200px;
    height: 65px;
    position: relative;
    cursor: pointer;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.a302:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}

/* Subject-specific colors based on data-subjectid */
.a147[data-subjectid="2"] { border-left: 4px solid #ef4444; }
.a147[data-subjectid="3"] { border-left: 4px solid #3b82f6; }
.a147[data-subjectid="4"] { border-left: 4px solid #10b981; }
.a147[data-subjectid="5"] { border-left: 4px solid #f59e0b; }
.a147[data-subjectid="7"] { border-left: 4px solid #8b5cf6; }
.a147[data-subjectid="8"] { border-left: 4px solid #ec4899; }
.a147[data-subjectid="9"] { border-left: 4px solid #06b6d4; }
.a147[data-subjectid="10"] { border-left: 4px solid #84cc16; }

.a303 {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 198px;
 height: 65px;
 z-index: 2;
 background-color: var(--overWhite3);
 padding: 7px 4px;
}

.a304 {
 display: flex;
 justify-content: space-between;
}

.a305 {
 outline: none;
 padding: 0px;
 margin: 0px;
 background-color: var(--white);
 color: var(--black);
 border: var(--dashedBorderRule);
 border-radius: var(--rounded4);
 font-size: 0.85rem;
 height: 24px;
}

.a306 {
 margin-top: 4px;
 padding: 0px;
 width: 100%;
 height: 20px;
 background-color: var(--white);
 color: var(--black);
 border: var(--dashedBorderRule);
 border-radius: var(--rounded4);
 height: 24px;
 font-size: 12px;
 text-align: center;
 outline: none;
}

.a307 {
 display: flex;
 /* border-bottom: var(--borderRule); */
}

.a308 {
 display: none;
 width: 30%;
 height: 85vh;
 overflow-y: auto;
 /* border-inline-end: var(--borderRule); */
}

.a309 {
 page-break-before: always;
}

.a310 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 25px 10px;
}

.a311 {
 margin-top: 20px;
 display: flex;
 justify-content: space-between;
}

.a312 {
 display: flex;
}

.a314 {
 /* display: grid;
 grid-template-columns: 1fr;
 gap: 2px; */
 padding: 8px;

}

.a314_2 {
padding: 8px;
    display: grid
;
    grid-template-columns: 1fr;
    gap: 16px;

}

.a316 {
 margin-top: 10px;
 display: flex;
 justify-content: space-between;
 gap: 8px;
}

.a318 {
 width: 95%;
 height: 95%;
 padding-top: 72px;
 background-color: var(--white);
 user-select: none;
}

.a319 {
 width: 100%;
 height: 100%;
 user-select: none;
 background-color: var(--overWhite2);
}
.a319_2 {
 position: absolute;
 top: 0;
 left: 0;
 pointer-events: none;
 width: 100%;
 height: 100%;
 user-select: none;
 background: transparent;
}

.a321 {
 cursor: crosshair;
}

.a322 {
 flex-grow: 1;
 flex-shrink: 1;
 height: 92vh;
 user-select: none;
 overflow: auto;
 position: relative;
}

.a323 {
 display: flex;
 justify-content: center;
 align-items: center;
 /* width: 100vw;
 height: 100vh; */
}

.a324 {
 position: fixed;
 top: 44px;
 width: 400px;
 max-height: 78vh;
 overflow: auto;
 border: var(--borderRule);
 border-radius: var(--rounded4); /*r*/
 inset-inline-end: 40px;
 z-index: 4;
 box-shadow: var(--shadow);
 background-color: var(--overWhite3);
}

.a324 .a314 {
 display: block !important;
 padding: 0px !important;
}

.a325 {
 position: absolute;
 top: 2px;
 inset-inline-end: -2px;
 background-color: var(--blue);
 width: 17px;
 height: 17px;
 border-radius: 9999px;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 8px;
 color: var(--noninvert-white);
}

.a326 {
 position: fixed;
 top: 44px;
 width: 260px;
 min-height: 100px;
 max-height: 85vh;
 overflow: auto;
 border: var(--borderRule);
 border-radius: var(--rounded4); /*r*/
 inset-inline-end: 40px;
 z-index: 4;
 box-shadow: var(--shadow);
 background-color: var(--overWhite3);
 font-size: 12px;
}

.a327 {
 border: 0px;
 border-radius: var(--rounded2);
 background-color: var(--invoiceGreen2);
 padding: 0px 3px;
 user-select: none;
 outline: none;
 width: 100%;
 color: var(--black);
 height: 100%;
 text-align: center;
}

.a328 {
 cursor: pointer;
 display: flex;
 justify-content: center;
 align-items: center;
 min-width: 29px;
 width: 29px;
 height: 29px;
 background-color: var(--overWhite);
 border-radius: var(--rounded2);
}

.a329 {
 min-width: 60px;
 user-select: none;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: var(--overWhite);
 border-radius: var(--rounded2);
 min-width: 85px;
}

.a330 {
 display: flex;
 justify-content: start;
 align-items: center;
 gap: 5px;
 margin-bottom: 3px;
 height: 29px;
}

.a331 {
 border: 1px dashed var(--myBorderColor);
 width: 100%;
 border-radius: var(--rounded4);
 height: 29px;
 display: flex;
 justify-content: center;
 align-items: center;
 user-select: none;
 background-color: var(--invoiceRed);
}

.a332 {
 scale: 1.2;
}

.a334 {
 display: flex;
 width: 100%;
}

.a335 {
 display: none;
 padding-top: 4px;
}

.a336 {
 /* margin: 0px auto;
 padding: 16px; */
 font-size: 0.7rem;
 user-select: none;
}

.a337 {
 cursor: pointer;
 display: flex;
 justify-content: center;
 align-items: center;
 min-width: 29px;
 width: 29px;
 height: 29px;
 border-radius: var(--rounded2);
 margin-inline-end: 4px;
 color: var(--grayOff);
}

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

.a340 {
 min-width: 70%;
 display: flex;
 justify-content: end;
 align-items: center;
}

.a341 {
 display: flex;
 gap: 5px;
}

.a342 {
 width: 35px;
}

.a343 {
 display: flex;
 align-items: center;
 gap: 5px;
}

.a344 {
 margin: 10px 0px;
 width: 100%;
 border-collapse: collapse;
}

.a344 th {
 padding: 3px;
}
.a344, .a344 th, .a344 td {
 border: var(--borderRule);
}

.a344 td {
 background-color: var(--invoiceRed);
}
.a344 th, .a344 td {
 height: 29px;
 text-align: center;
 min-width: 75px;
 font-weight: normal;
}

.a345 {
 min-width: 29px !important;
 width: 29px !important;
}

.a346 {
 border: var(--borderRule);
 border-radius: var(--rounded4);
 background-color: var(--white);
 color: var(--black);
 user-select: none;
 outline: none;
 width: 100%;
 color: var(--black);
 height: 26px;
 text-align: center;
 margin-bottom: 5px;
}

.a347 {
 margin: 15px 0px;
}

.a348 {
 font-weight: bold;
}

.a349 {
 background-color: var(--white) !important;
 user-select: none;
}

.a350 {
 margin-top: 10px;
 width: 100%;
 display: flex;
 justify-content: end;
}

.a351 {
 display: flex;
 align-items: start;
 gap: 5px;
}

.a352 {
 height: 100%;
}

.a353 {
 background-color: var(--overWhite);
 height: 26px;
 padding: 2px;
 border-radius: var(--rounded2);
 display: flex;
 align-items: center;
 cursor: pointer;
}

.a354 {
 display: flex;
 justify-content: center;
 padding-top: 2px;
 user-select: none;
}

.a355 {
 display: flex !important;
 justify-content: center;
}

.a356 {
 padding-top: 10px;
 text-align: end;
}

.a357 {
 min-width: 200px;
}

.a358 {
 min-width: 100px;
}

.a359 {
 display: flex;
 justify-content: center;
 margin: 20px 0px;
}

.a360 {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 6px;
 margin-bottom: 2px;
}

.a361 {
 display: flex;
 flex-wrap: wrap;
 justify-content: start;
 gap: 6px;
}

.a362 {
 border: var(--borderRule);
 padding: 0px 6px;
 border-radius: var(--rounded4);
 cursor: pointer;
 user-select: none;
}

.a363 {
 margin-inline-start: 14px;
 display: flex;
 align-items: center;
 gap: 16px;
 margin-bottom: 8px;
 margin-top: 8px;
 padding: 16px 0px;
}

.a364 {
 background-color: var(--blue);
 color: var(--noninvert-white);
}

.a365 {
 min-width: 130px;
}

.a366 {
 font-weight: bold;
}

.a367 {
 background-color: var(--overWhite);
 border: var(--borderRule);
 margin-top: 25px;
 border-radius: var(--rounded4);
}

.a377 {
 display: flex;
 flex-direction: column;
 align-items: center;
 position: relative;
 justify-content: center;
 gap: 5px;
 cursor: pointer;
 padding: 10px;
}

.a378 {
 background-color: var(--blue);
 color: var(--noninvert-white);
 border-radius: var(--rounded8);
 height: 32px;
 width: 50px;
 font-size: 0.8rem;
 font-weight: bold;
 cursor: pointer;
 justify-content: center;
 align-items: center;
}

.a379 {
 /*slider*/
 position: fixed;
 z-index: 5;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: var(--lightbox-7);
 justify-content: center;
 align-items: center;
 flex-direction: column;
 max-width: 100%;
 max-height: 100%;
}

.a380 {
 background-color: var(--blue);
 color: var(--noninvert-white);
 padding: 5px 15px;
 border-radius: 20px;
 font-size: 0.8rem;
 margin-inline-start: 20px;
 cursor: pointer;
}

.a381 {
 cursor: pointer;
 margin-inline-start: 20px;
}

.a382 {
    display: none;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    outline: none;
    border-radius: var(--rounded4);
    padding: 8px 16px;
    color: white;
    background-color: rgba(255, 255, 255, 0.2);
    font-family: 'Tajawal', sans-serif;
    transition: all 0.3s ease;
    outline: none;
}

.a382_2 {
 color: var(--black);
 background-color: var(--white);
}

.a383 {
 cursor: pointer;
 border: var(--borderRule);
 outline: none;
 border-radius: var(--rounded4);
 padding: 2px 14px;
 color: var(--black);
 background-color: var(--white);
 width: fit-content;
}

.a384 {
 border-bottom: var(--borderRule2);
 padding-bottom: 15px;
 margin-bottom: 10px;
 width: 100%;
}

.a385 {
 background-color: var(--overWhite);
 color: var(--gray);
 display: flex;
 height: 35px;
 align-items: center;
 gap: 10px;
 padding: 0px 10px;
 font-size: 0.8rem;
 cursor: pointer;
 border: var(--borderRule);
 border-radius: 3px;
}

.a386 {
 position: absolute;
 top: 10px;
 inset-inline-end: 10px;
 cursor: pointer;
 font-size: 1rem;
 padding: 5px 10px;
 width: 40px;
 height: 40px;
 display: flex;
 justify-content: center;
 align-items: center;
}

.a387 {
 /* background-color: var(--tutors);
 padding-bottom: 30px; */
 /* height: 99vh; */
}

.a388 {
 /*pic in post left side a67*/
 width: 65px;
 height: 65px;
 object-fit: cover;
 max-width: 104px;
 max-height: 104px;
 border-radius: 9999px;
 cursor: pointer;
 user-select: none;
}

.a389 {
 margin: 2px 0px;
 display: flex;
 gap: 16px;
 padding: 16px;
 outline-style: none;
 background-color: var(--overWhite3);
 height: fit-content;
}

.a390 {
 display: flex;
 align-items: center;
 gap: 8px;
 color: var(--dark-gray);
 margin-bottom: 12px;
}

.a391 {
 margin-top: 12px;
 display: flex;
 gap: 16px;
}

.a392 {
 padding: 6px 16px;
 border: var(--borderRule);
 border-radius: var(--rounded18);
 display: flex;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 user-select: none;
}

.a393 {
 display: none;
}

.a394 {
 padding-top: 10px;
 width: 100%;
}

.a395 {
 width: 100%;
 margin: 0px;
 padding: 25px 0px 0px 0px;
 display: flex;
 gap: 8px;
}

.a396 {
 display: none;
 width: 40%;
 background-color: #243b5b;
 /* border: var(--borderRule3); */
 background-color: var(--overWhite3);
 /* border-radius: var(--rounded4); */
}

.a397 {
 flex-grow: 1;
 width: 70%;
}

.a398 {
 background-color: var(--tutors);
}

.a399 {
 width: 120px;
 height: 120px;
 border-radius: 90px;
 object-fit: cover;
}

.a400 {
 display: flex;
 justify-content: center;
 padding: 17px 0px 17px 0px;
}

.a401 {
 padding: 8px 20px;
 border-top: var(--borderRule3);
 display: flex;
 justify-content: space-between;
 font-size: 0.8rem;
}

.a402 {
 min-width: 25px;
 font-weight: bold;
}

.a403 {
 padding: 20px;
}

.a404 {
 border-bottom: var(--borderRule3);
}

.a405 {
 padding: 20px 18px;
 /* border: var(--borderRule3); */
 display: flex;
 justify-content: space-between;
 background-color: var(--overWhite3);
 /* border-bottom: 0px; */
}

.a406 {
 font-weight: bold;
}

.a407 {
 font-size: 0.8rem;
 color: var(--green);
 font-weight: bold;
}

.a408 {
 max-height: 40vh;
 background-color: var(--overWhite3);
 object-fit: contain;
}

.a409 {
 display: flex;
 justify-content: space-between;
 padding: 12px;
 gap: 10px;
}

.a410 {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}

.a411 {
 display: flex;
 align-items: center;
 border: var(--borderRule);
 border-radius: var(--rounded4);
 padding: 0px 8px;
}

.a412 {
 margin-top: 12px;
 background-color: var(--overWhite);
}

.a414 {
 padding: 16px;
 display: flex;
 justify-content: start;
 flex-wrap: wrap;
 gap: 10px;
}

.a415 {
 background-color: var(--overWhite3);
 border: var(--borderRule);
 border-radius: var(--rounded4);
 padding: 2px 7px;
 font-size: 0.8rem;
}

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

.a417 {
 padding: 10px 0px;
}

.a418 {
 color: var(--blue);
 cursor: pointer;
 user-select: none;
}

.a419 {
 border: 0px !important;
}

.a420 {
 font-size: 12px;
 color: var(--gray);
}

.a421 {
 font-size: 0.7rem;
 color: var(--gray);
 font-weight: normal;
}

.a422 {
 font-size: 12px;
 height: 30px;
 display: flex;
 justify-content: center;
 align-items: center;
 user-select: none;
 margin-inline-end: 4px;
}

.a423 {
 background-color: var(--tutors);
}

.a423_2 {
 background-color: var(--tutors);
}

.a424 {
 margin-top: 1px;
 background-color: var(--overWhite3);
 padding: 16px;
 border-top-right-radius: 17px;
 border-top-left-radius: 17px;
}

.a424_2 {
 margin-top: 1px;
 background-color: var(--overWhite3);
 padding: 16px;
 border-radius: 17px;
 font-size: 12px;
}

.a426 {
 background-color: var(--tutors);
 /* min-height: 100vh; */
}

.a426_2 {
 background-color: var(--tutors);
 padding: 16px;
}

.a427 {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
}

.a428 {
 width: 100%;
}

.a429 {
 background-color: var(--overWhite3);
 padding: 16px;
 width: 100%;
}

.a430 {
 font-weight: bold;
 padding: 16px 0px;
}

.a431 {
 background-color: var(--overWhite3);
 padding: 20px;
}

.a432 {
 padding: 16px;
 background-color: var(--tutors);
 min-height: 100vh;
 font-size: 12px;
}

.a433 {
 border: var(--borderRule);
 border-radius: var(--rounded4);
 padding: 7px 16px;
 display: flex;
 align-items: center;
}

.a434 {
 background-color: var(--overWhite3);
 padding: 20px;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 20px;
 font-size: 16px;
 font-weight: bold;
}

.a435 {
 margin-top: 20px;
 font-weight: bold;
}

.a436 {
 margin-top: 5px;
 color: var(--gray);
}

.a437 {
 padding: 3px 9px;
 border: var(--borderRule);
 border-radius: var(--rounded18);
 display: flex;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 user-select: none;
 background-color: var(--blue);
 color: var(--noninvert-white);
 width: 210px;
 font-size: 1rem;
}

.a438 {
 margin-top: 20px;
 display: flex;
 justify-content: center;
}

.a438_2 {
padding: 20px;
display: flex;
justify-content: center;
background-color: var(--overWhite3);
}

.a439 {
 margin-top: 8px;
 background-color: var(--overWhite3);
 height: fit-content;
 padding: 32px;
}

.a441 {
 margin-top: 8px;
 display: flex;
}

.a442 {
 display: flex;
 justify-content: center;
 gap: 16px;
}

.a443 {
 display: flex;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 user-select: none;
 padding: 0px 8px;
 border-radius: 4px;
}

.a444 {
 border-radius: 4px;
 cursor: pointer;
 display: flex;
 gap: 5px;
 justify-content: center;
 align-items: center;
 padding: 0px 8px;
}

.a445 {
 font-size: 1.1rem;
 padding: 2px 8px;
}

.a448 {
 display: flex;
 justify-content: start;
 gap: 4px;
}

.a449 {
height: 200px;
resize: both;
padding: 16px;
font-size: 12px;
}

.a450 {
 display: block;
 gap: 16px;
}

.a451 {
 margin-top: 16px;
}

.a452 {
 margin-top: 10px;
 display: flex;
 justify-content: center;
 margin-bottom: 30px;
}

.a453 {
 display: flex;
 gap: 20px;
}

.a454 {
 display: flex;
 justify-content: space-between;
 gap: 100px;
}

.a455 {
 margin-top: 10px;
 display: flex;
 justify-content: start;
 gap: 10px;
}

.a456 {
 display: flex;
 align-items: center;
 margin-bottom: 20px;
}

.a457 {
 width: 15px;
 height: 15px;
 background-color: green;
 border-radius: 2px;
}

.a458 {
 margin-inline-start: 3px;
 margin-inline-end: 30px;
}

.a459 {
 margin-top: 20px;
 display: flex;
 justify-content: center;
}

.a460 {
 color: var(--gray);
 font-style: italic;
 font-size: 0.8rem;
 margin: 15px 0px;
}

.a461 {
 display: flex;
 justify-content: center;
 align-items: center;
 color: var(--noninvert-white);
 background-color: var(--blue);
 border-radius: 20px;
 cursor: pointer;
 padding: 10px 20px;
 user-select: none !important;
 outline: none !important;
 gap: 15px;
}

.a461_2 {
 display: flex;
 justify-content: center;
 align-items: center;
 color: var(--black);
 background-color: var(--white);
 border-radius: 20px;
 cursor: pointer;
 padding: 5px 20px;
 user-select: none !important;
 outline: none !important;
 gap: 15px;
 border: var(--borderRule);
}

.a461_3 {
 display: flex;
 justify-content: center;
 align-items: center;
 color: var(--noninvert-white);
 background-color: var(--red);
 border-radius: 20px;
 cursor: pointer;
 padding: 5px 20px;
 user-select: none !important;
 outline: none !important;
 gap: 15px;
 border: var(--borderRule);
}

.a462 {
 display: flex;
 justify-content: center;
}

.a463 {
 color: var(--noninvert-white);
 width: 20px;
 height: 20px;
 border: .25em solid currentColor;
 border-width: 2px;
 border-left-color: transparent;
 border-radius: 50%;
 animation: 0.8s linear infinite a463frame;
}

@keyframes a463frame {
 to {
  transform: rotate(360deg);
 }
}

.a464 {
 background-color: var(--blueDisabled) !important;
}

.a465 {
 display: flex;
 justify-content: space-between;
}

.a466 {
 visibility: hidden;
 min-height: 44px;
}

.a470 {
 display: flex;
 align-items: center;
 gap: 16px;
}

.a471 {
 max-width: 50%;
 display: flex;
}

.a472 {
 margin-top: 5px;
 display: flex;
 align-items: center;
 gap: 16px;
}

.a473 {
 background-color: var(--white);
 color: var(--blue);
 cursor: pointer;
 border-bottom: 1px solid;
}

.a474 {
 width: 20px;
 height: 20px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 flex-shrink: 0;
 /* border-radius: 4px;
 border: 1px solid; */
 margin-top: 5px;
}

.a475 {
 margin-top: 1px;
 background-color: var(--overWhite3);
 border-radius: 4px;
 display: flex;
 padding-inline-end: 32px;
padding-top: 16px;
 font-size: 12px;
}
.a476 {
 min-width: 80px;
 border-inline-end: var(--borderRule);
 padding-inline-end: 12px;
}
.a477 {
 display: flex;
 justify-content: space-between;
 padding-inline-start: 12px;
 gap: 10px;
 width: 100%;
}
.a478 {
 text-align: center;
 font-weight: bold;
 font-size: 1.1rem;
 line-height: 26px;
}
.a479 {
 text-align: center;
 font-size: 0.7rem;
 color: var(--gray);
 line-height: 22px;
}
.a480 {
 flex-shrink: 0;
 display: flex;
 flex-direction: column;
 justify-content: start;
 width: 33%;
}
.a481 {
 display: flex;
 justify-content: end;
}
.a482 {
 font-weight: bold;
 direction: ltr;
}
.a483 {
 margin: 1px 0px;
 background-color: var(--overWhite3);
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 32px;
 gap: 16px;
}
.a484 {
 color: var(--noninvert-white);
 background-color: var(--red);
 text-align: center;
 border-radius: 20px;
 margin-top: 10px;
 padding: 4px 20px;
 cursor: pointer;
 font-size: 10px;
}
.a485 {
 display: flex;
 justify-content: center;
}
.a486 {
 display: block;
 gap: 16px;
 margin-bottom: 32px;
 background-color: var(--white);
 border-radius: 16px;
 padding: 16px;
}
.a487 {
 font-weight: bold;
 padding: 10px 20px;
 background-color: var(--white);
}

.a488 {
 padding: 16px; 
 margin-bottom: 32px;
 background-color: var(--white);
 border-radius: 16px;
}

.a488 .a66 {
 font-size: 12px;
 padding: 8px;
 border-bottom: var(--borderRule3);
}

.a489 {
 position: relative;
 border: var(--borderRule);
 /* width: 99%;
 height: 99%; */
 /* padding: 5px; */
}

.a490 {
 width: 100%;
 overflow: auto;
 z-index: 6;
 position: fixed;
 top: 42px;
 display: flex;
 flex-direction: column;
 height: 92vh;
 flex-shrink: 0;
 background-color: var(--overWhite);
}

.a491 {
 width: 100%;
 user-select: none;
 background-color: var(--white);
 padding: 5px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 user-select: none;
}

.a492 {
 position: fixed;
 bottom: 0;
 width: 100%;
}

.a493 {
 display: block;
 border: 0px;
 color: var(--black);
 background-color: var(--overWhite2);
 width: 100%;
 max-height: 280px;
 overflow-y: auto;
 resize: none;
 outline: none;
 height: 110px;
 padding: 16px;
}

.a494 {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 16px;
 background-color: var(--overWhite);
}

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

.a496 {
 position: relative;
 cursor: pointer;
 width: 30px;
 height: 30px;
 display: flex;
 justify-content: center;
 align-items: center;
}

.a497 {
 padding: 8px 16px; 
 border: var(--borderRule);
 margin-bottom: 18px;
 border-radius: 17px;
 transition: background-color 0.2s ease, transform 0.2s ease;
 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 max-width: 75%;
}

/* Current user: align right, soft background */
.a497.is-current-user {
 align-self: flex-start;
 background-color: var(--blue);
color: var(--noninvert-white);
 border-top-right-radius: 0;
}

/* Remote user: align left, soft background */
.a497:not(.is-current-user) {
 align-self: flex-end;
 background-color: var(--overWhite);
 border-top-left-radius: 0;
}


.a498 {
 display: flex;
 gap: 8px;
 user-select: none;
}

.a499 {
 /* color: var(--gray); */
 padding-top: 2px;
}

.a500 {
 flex: 1;
 overflow-y: auto;
 padding: 10px;
 display: flex;
 flex-direction: column;
}

.a501 {
 font-family: inherit;
 white-space: break-spaces;
 word-break: break-word;
 max-width: 100%;
}

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

.a503 {
 display: flex;
 flex-direction: column;
 gap: 10px;
 background-color: var(--white);
 padding: 16px 8px;
 border-radius: 25px;
 margin: 0px 10px;
 border: var(--borderRule);
}

.a504 {
 display: flex;
 gap: 5px;
 align-items: center;
}

.a505 {
 padding-top: 7px;
}

.a506 {
 margin-top: 20px;
 display: flex;
 justify-content: start;
 align-items: center;
 gap: 30px;
 padding-inline-start: 10px;
}

.a507 {
 font-weight: bold;
 font-size: 20px;
 text-align: center;
 margin-bottom: 5px;
}

.a508 {
 font-size: 12px;
 color: var(--gray);
 text-align: center;
}

.a509 {
 flex-grow: 1;
}

.a510 {
 color: var(--gray);
}

.a512 {
 margin-top: 25px;
 display: flex;
}

.a513 {
 padding-top: 3px;
 color: var(--gray);
}

.a514 {
 position: absolute;
 top: 5px;
 inset-inline-end: 7px;
 cursor: pointer;
 color: var(--gray);
}

.a515 {
 position: absolute;
 top: 5px;
 inset-inline-end: 7px;
 cursor: pointer;
 color: var(--gray);
}

.a516 {
 width: 20px;
 border-radius: 2px;
}

.a517 {
 display: flex;
 align-items: center;
 gap: 5px;
}

.a518 {
 position: absolute;
 top: 13px;
 inset-inline-end: 13px;
 cursor: pointer;
 z-index: 1;
 width: 24px;
 height: 24px;
 background-color: var(--tutors);
 display: flex;
 justify-content: center;
 align-items: center;
}

.a519 {
 display: flex;
 justify-content: center;
 padding: 32px;
 background-color: var(--overWhite3);
}

.a520 {
 /* color: var(--gray); */
 cursor: pointer;
 width: 33px;
 display: flex;
 justify-content: center;
 align-items: center;
}

.a521 {
 background-color: var(--gray);
}

.a522 {
 position: absolute;
 bottom: 9px;
 inset-inline-start: 10px;
 color: white;
 cursor: pointer;
 background-color: var(--lightbox);
 padding: 10px;
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 8px;
}

.a523 {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 120px;
 height: 120px;
 border-radius: 50%;
 background-color: #ccc;
 font-size: 40px;
 color: white;
 justify-content: center;
 align-items: center;
 font-weight: bold;
 overflow: hidden;
 user-select: none;
}

.a524 {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.a525 {
position: absolute;
bottom: 9px;
inset-inline-end: 9px;
color: white;
padding: 0px 8px;
border-radius: 4px;
background-color: var(--lightbox);
display: flex;
align-items: center;
gap: 6px;
user-select: none;
}

.a526 {
 display: flex;
}

.parent-block > .a489 {
  font-size: 12px;
}

.a527 {
 display: flex;
}

.a528 {
 position: relative;
}

.a529 {
 position: absolute;
 inset-inline-end: 10px;
 top: 10px;
 cursor: pointer;
 z-index: 2;
 color: var(--noninvert-white);
 width: 40px;
 height: 40px;
 justify-content: center;
 align-items: center;
 background-color: var(--lightbox);
 border-radius: 4px;
}

.a530 {
 font-weight: bold;
 text-align: center;
 color: var(--gray);
 font-size: 12px;
 margin-top: 20px;
}

.a531 {
 color: var(--blue);
 cursor: pointer;
}

table.student-bookings {
 width: 100%;
 border-collapse: collapse;
 font-size: 12px;
}

/* .student-bookings thead {
 background-color: #f2f2f2;
} */

/* .student-bookings th {
 padding-bottom: 8px;
} */

.student-bookings th,
.student-bookings td {
 padding: 8px;
 text-align: center;
 border-bottom: var(--borderRule3);
 text-wrap: nowrap;
}

.student-bookings tr:hover {
 background-color: var(--overWhite2);
}

.student-bookings th {
 font-weight: bold;
}

.a533 {
  border: var(--borderRule);
 border-radius: 17px;
 overflow: auto;
}

.a534 {
 border: var(--borderRule);
 border-radius: 16px;
}

.a535 {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 0px;
 user-select: none;
}

.a536 {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 inset-inline-end: 5px;
 width: 40px;
 height: 40px;
 display: flex;
 justify-content: center;
 align-items: center;
 cursor: pointer;
}

.a537 {
 display: block;
 border: 0px;
 color: var(--black);
 background-color: var(--overWhite2);
 width: 100%;
 max-height: 280px;
 overflow-y: auto;
 resize: none;
 outline: none;
 padding: 8px;
 padding-inline-end: 50px;
 border-radius: 16px;
}

.a538 {
 display: grid;
 grid-template-columns: 1fr;
 width: 80vw;
 gap: 40px;
}

.a539 {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 85vh;
 user-select: none;
}

.a540 {
 display: flex;
 justify-content: center;
 font-weight: bold;
}

.a541 {
 margin-top: 25px;
 display: flex;
 justify-content: center;
}

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

.a543 {
 border-radius: 16px;
 max-height: 50vh;
}

.a544 {
 position: relative;
}

.a545 {
 position: absolute;
 bottom: 10px;
 display: flex;
 justify-content: center;
 inset-inline-start: 50%;
 gap: 20px;
 transform: translate(50%);
}

.a546 {
 width: 40px;
 height: 40px;
 display: flex;
 justify-content: center;
 align-items: center;
 border: 1px solid white;
 color: white;
 border-radius: 25px;
 cursor: pointer;
}

.a547 {
 background-color: red;
 border-color: red;
}

.a548 {
 text-align: center;
 font-weight: bold;
 margin-bottom: 20px;
 font-size: 1rem;
}

.a549 {
 text-align: center;
 margin-bottom: 20px;
 color: var(--blue);
 cursor: pointer;
 font-weight: bold;
}

.a550 {
 margin-top: 1px;
 background-color: var(--white);
 flex: 1;
 overflow-y: auto;
 display: flex;
 flex-direction: column;
}

.a551 {
 padding: 8px;
 border-bottom: var(--borderRule);
}

.a552 {
 font-weight: bold;
 margin-bottom: 15px;
}

.a553 {
 display: flex;
}

.a554 {
 font-size: 14px;
 display: none;
}

.a555 {
 padding: 20px;
 max-width: 100vw;
}

.a556 {
 display: none;
}

.a557 {
 display: block;
}

.a558 {
 padding: 0px 16px;
 /* background-color: var(--overWhite3); */
}

.a559 {
 display: flex;
 justify-content: end;
 background-color: var(--overWhite3);
 width: 100%;
 border-bottom-right-radius: 17px;
 border-bottom-left-radius: 17px;
 padding: 16px;
 gap: 16px;
}

.a560 {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 20px;
 margin-bottom: 32px;
}

.a561 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  width: 100%;
}

.a562 {
 font-size: 12px;
 padding: 2px 8px;
 border: var(--borderRule);
 border-radius: var(--rounded18);
 display: flex;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 user-select: none;
 gap: 8px;
}

.a563 {
 max-height: 60vh;
 overflow: auto;
 margin-top: 16px;
}

.a564 {
 color: var(--noninvert-white);
 display: flex;
 justify-content: center;
 align-items: center;
 cursor: pointer;
}

.a565 {
 padding: 16px 32px !important;
 justify-content: space-between !important;
 flex-direction: column;
 align-items: center;
 border-radius: 27px;
 background-color: var(--overWhite3) !important;
}

.a566 {
 font-weight: bold;
 margin-bottom: 32px;
}

.a567 {
 text-align: center;
 margin-bottom: 16px;
}

.a568 {
 text-align: center;
 color: var(--gray);
 margin-top: 20px;
 font-size: 14px;
 font-style: unset;
}

.a569 {
 grid-column: 1 / span 2;
 max-width: initial !important;
}

.a570 {
 grid-column: 1 / span 2;
 max-width: initial !important;
}

.a571 {
 display: flex;
justify-content: space-between;
}

.a572 {
 left: 0;
 top: 0;
 pointer-events: none; /* Prevent mouse interactions */
 position: absolute;
 width: 16px;
 height: 16px;
 background: rgba(0, 0, 255, 0.5);
 border-radius: 50%;
 z-index: 9999;
}

.a573 {
 height: 20px;
}

.a574 {
 position: absolute;
 bottom: 6px;
 inset-inline-end: 10px;
}

.a575 {
 position: fixed;
top: 60px;
inset-inline-end: 20px;
background-color: inherit !important;
padding: 0px !important;
}

.a576 {
 display: flex;
 justify-content: center;
 gap: 8px;
}

.a577 {
 display: flex;
 justify-content: center;
 align-items: center;
 color: var(--red);
}

.a578 {
display: flex;
justify-content: end;
gap: 16px;
margin-bottom: 16px;
}

.a579 {
 display: grid;
 gap: 6px;
 grid-template-columns: 1fr 1fr 1fr;
}

.a580 {
 font-size: 14px;
}

.a581 {
 margin-top: 25px;
}

.a582 {
  width: 90%;
  max-width: 400px; /* Default max width for mobile */
  margin: 2rem auto;
  padding: 1.5rem;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
}

.a583 {
  text-align: center;
 font-weight: bold;
 margin-bottom: 32px;
    font-size: 1.1rem;
}

.a584 {
width: 13px;
height: 13px;
background-color: var(--red);
border-radius: 25px;
position: absolute;
top: 0px;
inset-inline-end: 23px;
}

.a585 {
 width: 100%;
 padding: 8px;
 margin: 5px 0 15px;
 border: 1px solid #ddd;
 border-radius: 4px;
}

.n20_container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        /* Header */
        .n20_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            padding: 16px 0;
            border-bottom: var(--borderRule3);
        }

        .n20_page-title {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .n20_page-title i {
            background: var(--primary-light);
            padding: 12px;
            border-radius: 50%;
        }

        /* Layout */
        .n20_dashboard {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 24px;
        }

        /* Filter Section */
        .n20_filter-section {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--box-shadow);
            height: fit-content;
            position: sticky;
            top: 20px;
        }

        .n20_filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .n20_filter-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--gray-800);
        }

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

        .n20_form-group {
            margin-bottom: 0;
        }

        .n20_form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--gray-700);
        }

        .n20_form-input {
         color: var(--black);
         background: var(--white);
            width: 100%;
            padding: 12px 16px;
            border: var(--borderRule);
            border-radius: var(--border-radius-sm);
            font-size: 16px;
            transition: var(--transition);
        }

        .n20_form-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
        }

        .n20_filter-buttons {
            display: flex;
            gap: 12px;
            margin-top: 8px;
        }

        .n20_btn {
            padding: 12px 20px;
            border: none;
            border-radius: var(--border-radius-sm);
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .n20_btn-primary {
            background-color: var(--primary);
            color: white;
            
        }

        .n20_btn-primary:hover {
            background-color: var(--secondary);
        }

        .n20_btn-outline {
            background-color: var(--overWhite2);
            border: var(--borderRule);
            color: var(--black)
        }

        .n20_btn-outline:hover {
            background-color: var(--gray-100);
        }

        /* Main Content */
        .n20_main-content {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        /* Summary Cards */
        .n20_summary-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 16px;
        }

        .n20_summary-card {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--box-shadow);
            text-align: center;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .n20_summary-card:hover {
            transform: translateY(-5px);
        }

        .n20_summary-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
        }

        .n20_summary-card:nth-child(1)::after { background: var(--info); }
        .n20_summary-card:nth-child(2)::after { background: var(--success); }
        .n20_summary-card:nth-child(3)::after { background: var(--danger); }
        .n20_summary-card:nth-child(4)::after { background: var(--info); }
        .n20_summary-card:nth-child(5)::after { background: var(--success); }
        .n20_summary-card:nth-child(6)::after { background: var(--danger); }

        .n20_summary-icon {
            font-size: 24px;
            margin-bottom: 12px;
            padding: 12px;
            border-radius: 50%;
            display: inline-block;
        }

        .n20_summary-card:nth-child(1) .n20_summary-icon { background: rgba(67, 97, 238, 0.1); color: var(--info); }
        .n20_summary-card:nth-child(2) .n20_summary-icon { background: rgba(76, 201, 240, 0.1); color: var(--success); }
        .n20_summary-card:nth-child(3) .n20_summary-icon { background: rgba(247, 37, 133, 0.1); color: var(--danger); }
        .n20_summary-card:nth-child(4) .n20_summary-icon { background: rgba(114, 9, 183, 0.1); color: var(--info); }
        .n20_summary-card:nth-child(5) .n20_summary-icon { background: rgba(76, 201, 240, 0.1); color: var(--success); }
        .n20_summary-card:nth-child(6) .n20_summary-icon { background: rgba(247, 37, 133, 0.1); color: var(--danger); }

        .n20_summary-title {
            font-size: 14px;
            margin-bottom: 8px;
        }

        .n20_summary-value {
            font-size: 24px;
            font-weight: 700;
        }

        /* Student Cards */
        .n20_students-section {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

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

        .n20_section-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--gray-800);
        }

        .n20_view-options {
            display: flex;
            gap: 8px;
        }

        .n20_view-option {
            padding: 8px 12px;
            background: white;
            border: 1px solid var(--gray-300);
            border-radius: var(--border-radius-sm);
            cursor: pointer;
            transition: var(--transition);
        }

        .n20_view-option.n20_active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .n20_students-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }

        .n20_student-card {
            background: var(--white);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--box-shadow);
            transition: var(--transition);
        }

        .n20_student-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .n20_student-header {
            padding: 16px 20px;
            background: var(--primary-light);
            color: var(--primary);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .n20_student-name {
            font-size: 18px;
            font-weight: 600;
        }

        .n20_student-class {
            font-size: 14px;
            background: var(--primary);
            color: white;
            padding: 4px 8px;
            border-radius: 20px;
        }

        .n20_student-body {
            padding: 20px;
        }

        .n20_invoice-list {
            list-style: none;
            margin-bottom: 16px;
        }

        .n20_invoice-item {
         cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: var(--borderRule);
        }

        .n20_invoice-item:last-child {
            border-bottom: none;
        }

        .n20_invoice-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .n20_invoice-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .n20_invoice-details {
            display: flex;
            flex-direction: column;
        }

        .n20_invoice-date {
            font-size: 14px;
            color: var(--gray-600);
        }

        .n20_invoice-amount {
            font-weight: 600;
            color: var(--gray-800);
        }

        .n20_invoice-status {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            padding: 4px 10px;
            border-radius: 20px;
            background: var(--overWhite);
        }

        .n20_status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .n20_status-paid { background: var(--success); }
        .n20_status-partial { background: var(--warning); }
        .n20_status-unpaid { background: var(--danger); }

        .dashboard-item {
    background: var(--white);
    border-radius: var(--border-radius-sm);
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-left: 4px solid transparent;
}

.dashboard-label {
    font-size: 12px;
    color: var(--gray-600);
}
         .dashboard-item:nth-child(1) {
         border-left-color: var(--gray-600);
         }

         .dashboard-item:nth-child(2) {
         border-left-color: var(--success);
         }
         .dashboard-item:nth-child(3) {
         border-left-color: var(--danger);
         }

         .summary-dashboard {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 10px;
         }

          .highlight-card {
          border-radius: var(--border-radius-sm);
          padding: 15px;
          text-align: center;
          }

        .n20_no-invoices {
            text-align: center;
            padding: 30px 20px;
            color: var(--gray-500);
        }

        .n20_no-invoices i {
            font-size: 32px;
            margin-bottom: 12px;
            opacity: 0.5;
        }

        .n20_no-invoices p {
            font-style: italic;
        }

        .n20_view-invoice {
            display: block;
            text-align: center;
            padding: 12px;
            background: var(--gray-100);
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
            border-radius: var(--border-radius-sm);
        }

        .n20_view-invoice:hover {
            background: var(--gray-200);
        }

        /* Responsive adjustments */
        @media (max-width: 1024px) {
            .n20_dashboard {
                grid-template-columns: 1fr;
            }
            
            .n20_filter-section {
                position: static;
            }
        }

        @media (max-width: 768px) {
            .n20_summary-section {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .n20_students-grid {
                grid-template-columns: 1fr;
            }
            
            .n20_filter-buttons {
                flex-direction: column;
            }
            
            .n20_header {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }
        }

        @media (max-width: 480px) {
            .n20_summary-section {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .n20_section-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
            
            .n20_view-options {
                width: 100%;
            }
            
            .n20_view-option {
                flex: 1;
                text-align: center;
            }
        }

.vac-container {
max-width: 100%;
margin: 0 auto;
}

.vac-header {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 20px;
padding: 20px;
background: var(--gradient-bg);
border-radius: 12px;
color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.vac-title {
font-size: 22px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}

.vac-stats {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.vac-stats_i {
 font-size: 20px;
}

.vac-stat {
background: rgba(255, 255, 255, 0.2);
padding: 8px 14px;
border-radius: 20px;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
min-width: 125px;
}

.vac-content {
display: flex;
flex-direction: column;
gap: 20px;
}

.vac-filters {
background-color: var(--white);
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
height: fit-content;
}

.vac-filter-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: var(--borderRule);
display: flex;
align-items: center;
gap: 10px;
}

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

.vac-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}

.vac-input, .vac-select {
 background-color: var(--white);
 color: var(--black);
width: 100%;
padding: 12px 16px;
border: var(--borderRule);
border-radius: 8px;
font-size: 14px;
transition: all 0.3s;
}

.vac-input:focus, .vac-select:focus {
outline: none;
border-color: var(--vac-primary);
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

.vac-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 20px;
}

.vac-btn {
padding: 12px 20px;
border: none;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.vac-btn-primary {
background-color: var(--blue);
color: white;
}

.vac-btn-primary:hover {
background-color: var(--vac-secondary);
}

.vac-btn-secondary {
background-color: var(--overWhite2);
color: var(--black);
}

.vac-btn-secondary:hover {
background-color: #e9ecef;
}

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

.vac-requests .a72 {
 width: 100px;
 height: 100px;
 
}

.vac-request {
background-color: var(--white);
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.3s, box-shadow 0.3s;
}

.vac-request:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.vac-request-header {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 16px;
}

.vac-user-img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 16px;
border: 3px solid var(--vac-light);
}

.vac-user-info {
flex: 1;
width: 100%;
}

.vac-user-name {
font-size: 18px;
font-weight: 600;
margin-bottom: 4px;
}

.vac-user-role {
color: var(--vac-gray);
font-size: 14px;
margin-bottom: 8px;
}

.vac-request-date {
font-size: 13px;
color: var(--vac-gray);
margin-bottom: 12px;
}

.vac-status {
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
align-self: flex-start;
}

.vac-status-approved {
background-color: rgba(46, 204, 113, 0.15);
color: var(--vac-approved);
}

.vac-status-pending {
background-color: rgba(243, 156, 18, 0.15);
color: var(--vac-pending);
}

.vac-status-rejected {
background-color: rgba(231, 76, 60, 0.15);
color: var(--vac-rejected);
}

.vac-request-details {
margin-bottom: 16px;
}

.vac-detail {
margin-bottom: 8px;
display: flex;
flex-direction: column;
}

.vac-detail strong {
margin-bottom: 4px;
color: var(--vac-dark);
}

.vac-request-note {
background-color: var(--overWhite2);
padding: 16px;
border-radius: 8px;
border-left: 4px solid var(--vac-primary);
white-space: pre-wrap;
margin: 16px 0;
overflow-x: auto;
font-family: inherit;
}

.vac-attachment {
display: inline-block;
margin-top: 12px;
}

.vac-attachment-img {
width: 100px;
height: 100px;
border-radius: 8px;
object-fit: cover;
border: 1px solid var(--vac-border);
transition: transform 0.3s;
cursor: pointer;
}

.vac-attachment-img:hover {
transform: scale(1.05);
}

.vac-request-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--vac-border);
}

.vac-btn-sm {
padding: 10px 16px;
font-size: 14px;
}

.vac-btn-approve {
background-color: rgba(46, 204, 113, 0.15);
color: var(--vac-approved);
}

.vac-btn-approve:hover {
background-color: var(--vac-approved);
color: white;
}

.vac-btn-reject {
background-color: rgba(231, 76, 60, 0.15);
color: var(--vac-rejected);
}

.vac-btn-reject:hover {
background-color: var(--vac-rejected);
color: white;
}

.nav-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}



.add-new-btn {
    background-color: var(--invoiceGreen);
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 15px;
}

.add-new-btn:hover {
    opacity: 0.9;
}



.shape-button {
 border: var(--borderRule);
 display: flex;
align-items: center;
padding: 4px;
border-radius: 4px;
color: var(--black);
cursor: pointer;
}

.menu-category {
  margin-bottom: 16px;
}

.category-title {

 align-items: center;
 padding: 2px 12px;
 background-color: var(--overWhite2);
 border-radius: var(--rounded4);
 font-weight: bold;
 gap: 12px;
 color: var(--black);
}

.category-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.category-label {
  white-space: nowrap;
}


.required::after {
 content: " *";
 color: red;
 font-weight: bold;
}

  .info-icon {
    display: inline-block;
    margin-left: 8px;
    cursor: pointer;
    position: relative;
  }

  .info-icon::after {
    content: "ℹ️";
    font-size: 16px;
  }

  .tooltip {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 3;
    top: 100%; /* below the icon */
    left: 0;
    margin-top: 6px;
    width: 200px;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .info-icon:hover .tooltip {
    visibility: visible;
    opacity: 1;
  }

.sync-all-container {
  margin: 8px 0;
  display: flex;
  justify-content: center;
}

.sync {
  cursor: pointer;
  color: var(--blue);
  border-bottom: 1px solid;
  padding: 0px 7px;
  margin-inline-start: 60px;
}

.request-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1rem;
}

.request-card {
  border: var(--borderRule);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 0 8px rgba(0,0,0,0.05);
}

.request-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.request-type {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.request-status {
  margin-top: 0.5rem;
  font-weight: bold;
}

.status-0 { color: orange; }
.status-1 { color: green; }
.status-2 { color: red; }

.request-receipt {
  display: inline-block;
  color: var(--blue);
  text-decoration: underline;
}

.request-user, .request-role {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: var(--gray);
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--tutors);
}

/* Panels full-width by default */
.panel {
 background-color: var(--overWhite3);
 padding: 16px;
/* border-radius: 17px; */
font-size: 12px;
}

.tabs {
display: flex;
overflow-x: auto;
border-bottom: var(--borderRule3);
}
.tab {
    flex: 0 0 auto;
    padding: 10px 16px;
    cursor: pointer;
    border: var(--borderRule);
    border-bottom: none;
    background-color: var(--white);
    margin-right: 4px;
    border-radius: 4px 4px 0 0;
    white-space: nowrap;
    color: var(--black);
}
.tab.active {
background-color: var(--tutors);
font-weight: bold;
border-top: 2px solid var(--blue);
border-bottom: none;
}
.tab-content {
padding: 15px;
display: none;
}
.tab-content.active {
display: block;
}

.reviews-container {
 margin-top: 30px;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 16px;
 max-width: 600px;
}
.review {
 padding: 10px;
 border-radius: 8px;
 display: flex;
 flex-direction: column;
 align-items: start;
}
.user-info {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 5px;
}
.user-info img {
 width: 32px;
 height: 32px;
 border-radius: 50%;
}
.stars {
 /* color: gold; */
 margin-bottom: 5px;
}
.rating-bar {
 display: flex;
 align-items: center;
 margin: 5px 0;
}
.bar {
 width: 40%;
 height: 10px;
 background-color: var(--grayStar);
 position: relative;
 margin: 0 10px;
 border-radius: 20px;
}
.bar-fill {
 height: 100%;
 background-color: var(--yellow2);
 position: absolute;
 border-radius: 20px;
}

.a38navbar {
 width: 100%;
 background: var(--overWhite3);
 display: flex;
 z-index: 4;
 margin-top: 8px;
 padding: 8px 12px;
 gap: 10px;

}
.a38navbar a {
 margin: 0 4px;
 padding: 10px 3px 5px 3px;
}
.a38navbar a.a38active {
 font-weight: bold;
 color: var(--blue);
 border-bottom: 2px solid var(--blue);
}
.a38section {
 margin-top: 4px;
 background-color: var(--overWhite3);
 padding: 20px;
}

.a38calendar {
 width: 90%;
 margin: 20px auto;
 border: 1px solid #ddd;
 border-radius: 8px;
 overflow: hidden;
 background-color: #f9f9f9;
}
.a38header {
 display: flex;
 justify-content: end;
 gap: 20px;
 align-items: center;
 margin-bottom: 10px;
}
.a38days {
 display: flex;
}
.a38day {
 display: flex;
 flex-direction: column;
 flex-grow: 1;
 width: 12%;
}
.a38dayy {
 display: flex;
 flex-direction: column;
}
.a38day:last-child {
 border-right: none;
}
.a38day-header {
    text-align: center;
    font-size: 13px;
    user-select: none;
    min-height: 60px;
}
.a38time-slot {
 font-size: 12px;
 border: var(--borderRule3);
 cursor: pointer;
 height: 30px;
 display: flex;
 justify-content: center;
 align-items: center;
}
.a38time-slot:hover {
 color: var(--noninvert-white) !important;
}
.a38available {
 background-color: var(--green);
 color: var(--green);
}
.a38availableGroup {
 background-color: var(--greenGroup);
 color: var(--greenGroup);
}

.a38booked {
 background-color: var(--grayOff);
 color: var(--noninvert-white);
}

.n36-modal-overlay {
 position: fixed;
 top: 0; left: 0;
 width: 100vw; height: 100vh;
 background-color: rgba(0, 0, 0, 0.5);
 display: flex;
 justify-content: center;
 align-items: flex-start;
 padding-top: 50px;
 visibility: hidden;
 opacity: 0;
 transition: visibility 0.3s, opacity 0.3s;
 z-index: 4;
}

.n36-modal {
 width: 300px;
 padding: 24px;
 background-color: var(--overWhite);
 border-radius: 20px;
 position: relative;
 transition: transform 0.3s;
}

.n36-visible {
 visibility: visible;
 opacity: 1 ;
 transform: translateY(0);
}

.n36-modal h2 {
 text-align: center;
 font-weight: bold;
 margin: 20px 0px 20px 0px;
 font-size: 1rem;
}

.n36-close-btn {
 position: absolute;
 top: 10px;
 right: 10px;
 cursor: pointer;
 font-weight: bold;
 font-size: 1rem;
 padding: 5px 10px;
}

.n36-google-btn {
 width: 200px;
 height: 40px;
 border: var(--borderRule);
 border-radius: var(--rounded18);
 display: flex;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 margin: 20px auto;
}

.n36-form-group {
 position: relative;
 display: flex;
 margin-bottom: 12px;
}

.n36-input {
 color: var(--black);
 width: 100%;
 height: 46px;
 padding: 8px;
 border-radius: 5px;
 background-color: var(--tutors);
 border: var(--borderRule);
 font-size: 12px;
 outline: none;
}

.n36-forgot-password, .n36-switch-form, .n36-info-msg {
 font-weight: bold;
 text-align: center;
 color: var(--gray);
 font-size: 12px;
 cursor: pointer;
 margin-top: 20px;
 user-select: none;
}

.n36-info-msg {
 margin-top: 8px;
 color: var(--gray);
 font-size: 11px;
 display: flex;
 align-items: center;
 gap: 5px;
}

.n36-checkbox-group {
 margin-top: 20px;
 display: flex;
 align-items: start;
 font-size: 12px;
}

.n36-checkbox-group a {
 color: var(--blue);
 text-decoration: none;
}

.n36-alt-option {
 margin-top: 20px;
 margin-bottom: 10px;
 text-align: center;
 font-size: 14px;
}

.n36-role-select-btns {
 display: flex;
 justify-content: space-evenly;
 gap: 10px;
 margin: 20px 0px;
}

.n36-role-select-btn {
 background: var(--white);
 border: 2px solid var(--gray);
 border-radius: 5px;
 padding: 10px 20px;
 cursor: pointer;
 text-align: center;
 transition: all 0.3s ease;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 font-weight: 600;
 color: var(--black);
 user-select: none;
}

.n36-role-select-btn.n36-active {
 border-color: var(--blue);
 background: var(--selected);
 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.n36-role-select-btn.n36-inactive {
 font-weight: bold;
 border: var(--borderRule);
}

/* Sticky filter container */
.n37filter-section {
 position: sticky;
 top: 51px;
 width: 100%;
 background-color: #2a3f55;
 z-index: 2;
 display: flex;
 justify-content: center;
 padding: 16px;
 gap: 8px;
}

/* Text boxes */
.n37filter-box {
 color: var(--gray);
 background-color: var(--overWhite);
 border: var(--borderRule);
 border-radius: 3px;
 width: 100%;
 max-width: 200px;
 height: 35px;
 padding: 0px 8px;
 outline: none;
 font-size: 12px;
}

.n37filter-box2 {
 color: var(--gray);
 background-color: var(--overWhite);
 border: var(--borderRule);
 border-radius: 3px;
 width: 100%;
 height: 35px;
 padding: 0px 8px;
 outline: none;
 font-size: 12px;
}

/* Grid layout for mobile screens */
.n37filter-row {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 gap: 8px;
}

.n37filter-row2 {
 display: grid;
 gap: 8px;
}

.n37filter-row3 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
}

/* Panel styling */
.n37panel-overlay {
 position: fixed;
 top: 0; left: 0; width: 100%; height: 100%;
 background: rgba(0, 0, 0, 0.5);
 display: none; justify-content: center; align-items: center;
 animation: n37fadeOut 0.3s forwards;
 z-index: 4;
}
.n37panel {
 width: 100%;
 max-width: 650px;
 position: relative;
 animation: n37fadeIn 0.3s forwards;
 margin: 16px;
 padding: 16px 16px 40px 16px;
 background-color: var(--overWhite3);
 color: var(--black);
 border-radius: 8px;
}
@media (max-width: 768px) {
 .n37panel {
   width: 100%;
 }
}

/* Animations */
@keyframes n37fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}
@keyframes n37fadeOut {
 from { opacity: 1; }
 to { opacity: 0; }
}

/* Panel Content */
.n37panel h3 {
 margin: 0; padding: 0;
}
.n37close-btn {
 position: absolute; top: 10px; right: 10px;
 cursor: pointer; font-size: 20px; color: red;
}
.n37toggle-group {
 margin-top: 25px;
}
.n37toggle-group label {
 font-size: 1rem;
}
.n37toggle-buttons {
 display: flex; 
 gap: 10px; 
 margin-top: 4px;
 flex-wrap: wrap;
}
.n37toggle-buttons button {
 border: var(--borderRule);
 padding: 3px 9px;
 border-radius: var(--rounded4);
 cursor: pointer;
 user-select: none;
}
.n37toggle-buttons button.n37active {
 background-color: var(--blue);
 color: var(--noninvert-white);
}

.c-select {
 background-color: var(--overWhite);
 position: relative;
 border: var(--borderRule);
 border-radius: 4px;
 /* padding: 8px; */
 padding: 3px 6px;
 /* background: #fff; */
 min-height: 35px;
 user-select: none;
 outline: none;
}

.c-select-input {
 background-color: var(--overWhite);
 /* margin-top: 3px; */
 border: none;
 outline: none;
 width: 100%;
 color: var(--black);
 box-sizing: border-box;
 height: 100%;
 font-size: 12px;
}

.c-select-options {
 position: absolute;
 top: 105%;
 left: 0;
 right: 0;
 color: var(--black);
 background: var(--white);
 border: var(--borderRule);
 max-height: 200px;
 overflow-y: auto;
 display: none;
 z-index: 10;
}

.c-select-option {
 padding: 3px 16px;
 cursor: pointer;
 border-inline-start: 4px solid var(--gray);
 margin: 6px 16px;
 font-size: 12px;
}

.c-select-option:hover {
 background-color: var(--overWhite);
}

.c-select-tag {
 background-color: var(--overWhite);
 margin-top: 12px;
 padding: 12px;
 display: block;
 border: var(--borderRule);
 border-radius: 4px;
}

.c-select-tag .remove-tag {
 cursor: pointer;
 width: 20px;
 height: 20px;
 background-color: var(--red);
 border-radius: 2px;
 color: var(--noninvert-white);
 display: flex;
 justify-content: center;
 align-items: center;
}

.c-select-no-results {
 padding: 8px;
}

.time-blocks-container {
 width: 100%;
}

.days-checkboxes {
 margin-top: 10px;
}

.days-checkboxes label {
 cursor: pointer;
 display: inline-block;
 margin-inline-end: 30px;
}

.day-section {
 display: flex;
 align-items: start;
 justify-content: start;
 gap: 5px;
}

.time-block {
display: flex;
justify-content: space-between;
align-items: start;
gap: 5px;
margin-bottom: 3px;
height: 29px;
}

.time-block select {
 outline: none;
}

.has-overlap {
 background-color: var(--invoiceRed2);
 border-radius: var(--rounded4);
}

.overlap-warning {
 font-size: 12px;
 margin: 0px 6px;
 text-wrap: nowrap;
}

.chat-container {
 border-inline-start: var(--borderRule);
 flex-grow: 1;
 display: flex;
 flex-direction: column;
 height: 68vh;
}

.chat {
 flex: 1;
 overflow-y: auto;
 padding: 16px 16px 16px 16px;
}

.message {
 min-width: 100px;
 position: relative;
 width: fit-content;
 width: -moz-fit-content;
 max-width: 70%;
 margin-bottom: 40px;
 padding: 8px 12px;
 border-radius: var(--rounded8);
 cursor: pointer;
 font-family: inherit;
 white-space: break-spaces;
 font-size: 12px;
}

.time {
 font-size: 10px;
 color: var(--dark-gray);
 position: absolute;
 bottom: -20px;
 right: 5px;
}

.received {
 background-color: var(--overWhite);
 border: var(--borderRule);
 align-self: flex-start;
}

.sent {
 background-color: var(--blue);
 color: var(--noninvert-white);
 align-self: flex-end;
}

.message-input {
 width: 100%;
 position: fixed;
 bottom: 69px;
 padding: 8px 16px;
 background-color: var(--white);
}

.message-input input {
 flex: 1;
 background-color: var(--white);
 color: var(--black);
 padding: 8px;
 border-radius: var(--rounded4); /*r*/
 border: none;
 outline: none;
 width: 100%;
 border: var(--borderRule);
}

.message-input button {
 background-color: var(--blue);
 color: var(--noninvert-white);
 border: none;
 padding: 8px 20px;
 border-radius: var(--rounded4); /*r*/
 cursor: pointer;
 outline: none;
}

/*---------------By ID-----------------*/

#logo {
 display: none;
}

#contentDiv {
    position: relative;
    align-self: flex-start;
    flex-grow: 1;
    padding-bottom: 70px;
    width: 100%;
    background-color: var(--white);
    background-color: var(--tutors);
}

#hpLightbox {
 position: fixed;
 z-index: 1;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: var(--lightbox);
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
 display: none;
}

#loginLayer {
 position: fixed;
 z-index: 1;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: var(--lightbox);
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
}

#popupLayer, #popupLayer2 {
 position: fixed;
 z-index: 4;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: var(--lightbox);
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
}

#mapPhoneSpan {
 direction: ltr !important;
 display: inline-block;
}

.attendance-container {
            max-width: 1200px;
            margin: 0 auto;
            background: var(--white);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .filter-section {
            padding: 24px;
            /* background: white; */
            border-bottom: var(--borderRule);
        }

        .filter-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .filter-group {
            margin-bottom: 15px;
        }

        .filter-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--black);
            font-size: 14px;
        }

        .filter-group input {
            width: 100%;
            padding: 12px 15px;
            border: var(--borderRule);
            border-radius: var(--radius);
            font-size: 15px;
            transition: var(--transition);
            color: var(--black);
            background-color: var(--white);
        }

        .filter-group input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
        }

        .button-group {
            flex-direction: column;
            display: flex;
            gap: 12px;
            margin-top: 10px;
            justify-content: center;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: var(--radius);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            font-size: 15px;
        }

        .btn-primary {
            background: var(--primary);
            color: var(--noninvert-white);
        }

        .btn-primary:hover {
            background: var(--secondary);
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: var(--overWhite2);
            color: var(--black);
            border: var(--borderRule);
        }

        .btn-secondary:hover {
            background: #f8f9fa;
            color: var(--dark);
        }

        .summary-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            
            gap: 16px;
            padding: 20px 24px;
            background: var(--tutors);
            border-bottom: var(--borderRule);
        }

        .summary-card {
            background: var(--white);
            border-radius: var(--radius);
            padding: 20px;
            text-align: center;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .summary-card:hover {
            transform: translateY(-5px);
        }

        .summary-card h3 {
            font-size: 15px;
            font-weight: 600;
            color: var(--gray);
            margin-bottom: 10px;
        }

        .summary-card .value {
            font-size: 24px;
            font-weight: 700;
        }

        #n4Present .value { color: var(--primary); }
        #n4Absent .value { color: var(--danger); }
        #n4Late .value { color: var(--warning); }
        #n4Leave .value { color: var(--info); }

        .report-section {
            padding: 24px 24px 8px 24px;
            overflow-x: auto;
        }

        .report-grid {
            display: grid;
            grid-template-columns: 3fr repeat(4, 1fr);
            min-width: 700px;
        }

        .grid-header {
            background: var(--blue);
            color: white;
            padding: 15px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .grid-item {
            padding: 15px;
            border-top: var(--borderRule);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* .grid-row:nth-child(even) {
            background-color: #f8f9fa;
        } */

        .grid-item:hover {
            background-color: var(--overWhite2);
        }

        .percentage {
            font-size: 12px;
            color: var(--gray);
            margin-left: 8px;
        }

        .sort-icon {
            width: 16px;
            height: 16px;
            opacity: 0.7;
            transition: var(--transition);
        }

        .grid-header:hover .sort-icon {
            opacity: 1;
        }

/*-----------Media Width-------------*/

@media (min-height:450px) {
 .a97 {
  display: block;
  margin-top: 30px;
 }
}

@media (min-width:320px) {

 .r-padding {
  padding: 35px 0px 35px 0px;
 }

 .r-width {
  width: 100%;
 }

 .r-width {
  width: 100%;
 }
}

@media (min-width:768px) {
.vac-header {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 24px;
}

.vac-title {
font-size: 24px;
}

.vac-stats {
flex-wrap: nowrap;
}

.vac-actions {
flex-direction: row;
}

.vac-request-header {
flex-direction: row;
align-items: flex-start;
}

.vac-user-img {
margin-right: 16px;
margin-bottom: 0;
}

.vac-request-actions {
flex-direction: row;
justify-content: flex-end;
}

.vac-detail {
flex-direction: row;
}

.vac-detail strong {
min-width: 140px;
margin-bottom: 0;
}
 
            
            
            
            /* .btn {
                width: 100%;
            } */

  .a147 {
        padding: 16px 12px;
    }

 .a148 {
        padding: 16px 12px;
        font-size: 14px;
    }

 .a314_2 {
        grid-template-columns: repeat(2, 1fr);
    }

 .logo-container {
        justify-content: center;
    }

    .center-name {
 display: none;
}


 .a582 {
    max-width: 450px;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

 .category-title {

 display: none;
}

 .a562 {
 font-size: 14px;
 padding: 4px 16px;
}

 .a426_2 {
 padding: 32px;
}

 .n36-input {
 font-size: 16px;
}

 .a432 {
  font-size: 16px;
 }


 .a570 {
 grid-column: initial;
 max-width: 200px;
}

 .a506 {
 gap: 50px;
}

 .a397 {
 
}

 .c-select-input {
 font-size: 16px;
}

 .c-select-option {
 font-size: 16px;
}

 /* .a175 {
 font-size: 12px;
} */

.a568 {
 display: none;
}

 .panel {
 padding: 32px;
 font-size: 1rem;
}

 .a475 {
 font-size: 1rem;
}

 .a326 {
  font-size: 1rem;
 }

 .a560 {
      flex-direction: row;
      align-items: center;
      gap: 30px;
    }

    .a561 {
      justify-content: flex-start;
      gap: 16px;
    }

 .tab-content {
padding: 32px;
display: none;
}

 .tab {
   padding: 8px 12px;
   font-size: 14px;
 }

 .a27 {
 max-width: 600px;
 padding: 32px;
}

.a555 {
 padding: 32px;
 max-width: 85vw;
}

.a559 {
 padding: 32px;
}

 .a557 {
 display: block;
}

 .a556 {
 display: none;
}

 .a449 {
font-size: 1rem;
}

.a488 .a66 {
 font-size: 1rem;
}

.a420 {
 font-size: 1rem;
 color: var(--gray);
}
 
.a492 {
 position: static;
 bottom: 0;
 width: 100%;
}

 .a554 {
 font-size: 14px;
 display: block;
}

 .a486, .a488 {
  margin-bottom: 0px;
 }

 .a538 {
  grid-template-columns: 2fr 1fr;
  width: 60vw;
 }

 .a172 {
  padding: 16px;
 }

 .a537 {
  padding: 16px;
  padding-inline-end: 50px;
 }

 
 .n36-modal {
  width: 350px;
 }

 .a491 {
  padding: 5px 16px;
 }

 .a503 {
  gap: 32px;
 }

 .a495 {
  gap: 8px;
 }

 .a490 {
  width: 20%;
  position: relative;
  top: 0px;
 }

 .a291 {
  gap: 16px;
 }

.a66 {
 padding: 32px;
}

 .a43 {
  min-width: 300px;
 }

 .a439 {
  padding: 32px;
 }

 .a467 {
  display: none;
 }

 .a450 {
  display: flex;
 }

 .a427 {
  grid-template-columns: 1fr 1fr;
 }

 .a424, .a424_2, .a429, .a271 {
  padding: 32px;
  font-size: 16px;
 }

 .a227 {
  gap: 6px;
 }

 .a228 {
  font-size: 0.8rem;
 }

 .a411 {
  padding: 0px 16px;
 }

 .a415 {
  padding: 2px 14px;
  font-size: 0.9rem;
 }

 .a38day-header, .a38time-slots, .a422 {
  font-size:1rem;
 }

 .a38navbar {
  padding: 16px 25px;
  gap: 20px;
 }

 .a38navbar a {
  margin: 0 15px;
 }

 .a393 {
  display: block;
  padding-top: 10px;
 }

 .n37panel {
  padding: 24px 24px 45px 24px;
 }

 /* .n37toggle-buttons {
  font-size: 0.9rem;
  gap: 8px;
 }

 .n37toggle-buttons button {
  padding: 2px 6px;
 } */

 .a383, .a384 {
  display: none;
 }

 .a382 {
  display: block;
 }

.a146 {
     max-width: 85vw;
     padding: 16px;
     gap: 6px;
     font-size: 14px;
 }

 .a308 {
  display: block;
 }

 .chat-container {
  width: 70%;
  height: 90vh;
 }

 .time {
  font-size: 12px;
  bottom: -27px;
 }

 /* .a173 {
  grid-template-columns: 1fr 1fr 1fr;
 } */

.a299 {
        font-size: 11px;
    }

 .a297 {
  font-size: 0.9rem;
 }

 .a10 {
  padding: 0px 32px;
 }

 .a251 {
  display: flex;
 }

 .message {
  min-width: 120px;
  font-size: 14px;
 }

 .message-input {
  position: static;
 }

 .a245 {
  display: none !important;
 }
 
  .a123 {
   padding: 8px;
  }

 .a221 {
  grid-template-columns: 1fr 1fr 1fr;
 }

 .a222 {
  font-size: 0.85rem;
 }

 .a215 {
  flex-direction: row;
 }

 .a28 {
  width: initial;
 }
 .a201 {
  top: 3px;
  left: 12px;
 }

 .a196 {
  width: 400px;
 }

 .a159 {
  width: 600px;
 }

 .a185 {
  height: 20vh;
 }

    .a50 {
        padding: 20px 0 0 0;
        align-items: center;
        font-size: 16px;
    }

 .a160 {
  justify-content: center;
 }

 .a154 {
  min-width: unset;
 }

 .a97 {
  position: static;
 }

 .a137 {
  width: 60%;
 }

 .a138 {
  position: static;
  border-bottom-left-radius: var(--rounded4); /*r*/
  border-bottom-right-radius: var(--rounded4); /*r*/
 }

 .a87 {
  display: none !important;
 }

 .a88 {
  display: flex;
 }

 #contentDiv {
  /* border: var(--borderRule); */
  padding-bottom: 0px !important;
 }

 #hdpMenuButton {
  /*mobile menu*/
  display: none;
 }

 .r-padding {
  padding: 35px 0px 35px 0px;
 }

 .r-display {
  display: inline;
 }

 .r-width {
  width: 50%;
 }

 .r-grid {
  grid-template-columns: repeat(3, 200px);
 }

 .a7 {
  width: 200px;
  height: 200px;
 }

 .a23 {
  display: inline;
 }

 /* .a51 {
  display: none;
 } */

 #logo {
  display: block;
 }

    .a77 {
        width: 70px;
        position: sticky;
        top: 0;
        height: 100vh;
        transform: none;
    }

.a78 {
        width: 100%;
        background: var(--gradient-bg);
        overflow-y: initial;
    }

 .a79 {
  transform: translateX(0);
 }

 .a81 {
  /*menu items text*/
  display: none;
 }
}

@media (min-width:1024px) {


.vac-content {
flex-direction: row;
}

.vac-filters {
width: 320px;
flex-shrink: 0;
}

.vac-requests {
flex: 1;
}

 .filter-grid {
                
                grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
            }

            .summary-section {
                grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            }
            
            .button-group {
                flex-direction: row;
            }

  .a314 {
  padding: 8px 20%;
  /* min-height: 100vh; */
 }

 .a314_2 {
        padding: 8px 5%;
        grid-template-columns: repeat(3, 1fr);
    }

    .nav-header {
        align-items: flex-start;
        padding-left: 12px;
    }

    .center-name {
 display: block;
}

 .a582 {
    max-width: 500px;
    padding: 2.5rem;
  }

 .category-title {

 display: block;
}

 .grid-container {
   grid-template-columns: 1fr 1fr;
  }

  .a558 {
 padding: 0px 20% 20px 20%;
 background-color: var(--tutors);
}

 .a514 {
  top: 10px;
 }

 .a495 {
  gap: 16px;
 }

 .a467 {
  display: block;
 }

 .a423, .a425 {
  padding: 32px 20% 0px 20%;
 }

  .a423_2 {
  padding: 32px 20% 32px 20%;
 }

 .a432 {
  padding: 20px 12%;
 }

 .a426 {
  padding: 20px 1%;
 }

 .a395 {
  width: 95%;
  margin: 0px auto;
  user-select: none;
 }

 .a396 {
  display: block;
  max-height: 420px;
 }
 
 .a389 {
  gap: 24px;
  padding: 32px;
 }

 .a385 {
  font-size: 0.9rem;
  height: 45px;
 }

 .n37filter-section {
  gap: 16px;
 }
 .n37filter-box {
  height: 45px;
  font-size: 1rem;
 }
 .n37filter-row {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
 }



 .a365 {
  min-width: 170px;
 }

 .a363 {
  margin-bottom: 16px;
  margin-top: 16px;
 }

 .a336 {
  margin: 30px 13%;
  font-size: 1rem;
 }

 /* .a42 {
  inset-inline-start: 266px;
 } */

 .a294 { 
  background-color: var(--overWhite3);
 }

 .a313 {
  position: relative;
 }

 .a313::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('posts.png');
  background-attachment: fixed; /* Prevents background image from scrolling */
  filter: var(--filterValue);
  z-index: -1; /* Ensure it stays behind the content */
 }

 .a315 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
 }

 /* .a146 {
  max-width: 72vw;
 } */

 .a299 {
  font-size: 14px;
 }

 .a207 {
  min-width: 200px !important;
 }

  .a201 {
   left: 70px;
   top: 2px;
  }

 .a88 {
  margin-inline-start: 12px;
 }

 #contentDiv {
  width: unset;
 }

    .a50 {
        align-items: flex-start;
        padding: 20px 8px;
    }

 .a160 {
  justify-content: start;
 }

 .a154 {
  min-width: 200px;
 }

    .a77 {
        min-width: 250px;
    }

 .a26 {
  max-width: 96%;
  max-height: 85vh;
  padding: 32px;
   font-size: 1rem;
 }

 .a54 {
  /*middle panel in slider*/
  height: 86%;
  min-height: 86%;
  max-height: 86%;
 }

 .a57 {
  /*top/bottom panels in slider*/
  height: 7%;
  min-height: 7%;
  max-height: 7%;
 }

 .a15 {
  width: 80%;
 }

 .r-padding {
  padding: 55px 0px 55px 0px;
 }

 .r-width {
  width: 33%;
 }

 .r-grid {
  grid-template-columns: repeat(3, 250px);
 }

 .a7 {
  width: 250px;
  height: 250px;
 }

 .a81 {
  display: block;
 }
}

@media (min-width:1440px) {


.vac-filters {
width: 360px;
}

.vac-request {
padding: 28px;
}

  .a314 {
  padding: 8px 30%;
 }

 .a314_2 {
        padding: 8px 10%;
    }

 .a582 {
    max-width: 550px;
  }

   .a558 {
 padding: 0px 30% 20px 30%;
 background-color: var(--tutors);
}

 table.student-bookings {
  font-size: 1rem;
 }

 .a495 {
  gap: 32px;
 }

 .chat-container {
  padding-inline-end: 25%;
 }

 .a423, .a425 {
  padding: 20px 30% 0px 30%;
 }

 .a432 {
  padding: 20px 20%;
 }

 .a426 {
  padding: 20px 10%;
 }

 .a396 {
  width: 30%;
  max-height: 470px;
 }

 .a401 {
  padding: 8px 30px;
  font-size: 0.9rem;
 }

 .a399 {
  width: 180px;
  height: 180px;
 }

 .a395 {
  width: 70%;
 }

 .a137 {
  width: 35%;
 }

 .a308 {
  width: 20%;
 }

 .a336 {
  margin: 30px 17%;
 }

 /* .a146 {
  max-width: 75vw;
 } */

 /* .a221 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 } */

 /* .a72, .a127, .a163 {
  width: 60%;
 } */

 .a206 {
  min-width: 200px !important;
 }
}

/*--------Media hover-------------*/

@media (hover: hover) {
 .a2:hover {
  color: var(--orange);
 }

 .a8:hover {
  color: var(--orange);
 }

 .a28:hover {
  background-color: var(--blue-hover);
 }

 .a92:hover {
  background-color: var(--blue-hover);
 }

 .a37:hover, .a48:hover {
  background-color: var(--overWhite);
 }

 .a84:hover {
  background-color: var(--overWhite);
 }

 .a60:hover, .a61:hover, .a64:hover {
  background-color: var(--dark-gray);
 }
}

@media print {

 .a173 {
  grid-template-columns: 1fr 1fr;
 }

 body, label, .a228, .a223, .a66, .a170, .a110, .a34, .a157, .a175, .a191, .a127, .a129, .a426 {
  background-color: white;
  color: black;
 }

 #contentDiv {
  border: 0px;
 }

 .a66 {
  border: 0px;
 }

 .a221 {
  grid-template-columns: 1fr 1fr 1fr;
 }

 .a212 {
  color: black;
  width: 50%;
 }

 .a74, .a85 {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
 }

 /* #n26ManagerSection {
  page-break-before: always;
 } */

 body {
  font-size: 0.8rem;
 }

 .a139, .a139m {
  background-color: initial;
  /*header borders not to break*/
 }

 /* :disabled {
  color: rgb(8, 8, 8) !important;
 } */

 .a123 {
  padding: 5px;
 }

 .a155 {
  color: initial;
 }

 .a154 {
  min-width: unset;
 }

 .a46, .a312, .a213, .a205, .a87, .a278, .a302, .a33, .a243, .a116, .a28, .a121, .a125, .a78, .a10, .a49, .a86, .a77, .a158, .a245 {
  display: none !important;
 }

 .a14 {
  display: block;
  width: 100%;
  margin: 0px;
 }

 .a110 {
  margin: 30px;
  display: flex;
  justify-content: space-between;
  align-items: start;
 }

 .a112 {
  min-width: unset;
 }

 .a109 {
  color: black;
  overflow: visible;
 }

 .a109>div, .a109m>div {
  font-size: 0.6rem;
  text-wrap: wrap;
 }

 .a146 {
  color: black;
  overflow: visible;
  max-width: 100vw;
 }

 .a171, .a212 {
  color: black;
  border: 1px solid gray;
  background-color: #fff;
 }

 /* .a110, .a34, .a157 {
  color: black;
 }

 body, label {
  color: black;
 } */
}