/* =====================================
                     Invoice - Admin login 
            ===================================== */

.admin-login-invoice {
  display:flex;
  min-height:100vh;
}


/*---- LEFT PANEL ----*/
.invoice-left-login {
  width:50%;
  background:#e8eaec;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:60px;
}

.invoice-left-login img {
  width:180px;
  margin-bottom:10px;
}

.invoice-left-login h1 {
  font-size:42px;
  font-weight:700;
  margin-bottom:15px;
  color: #127c42;
}

.invoice-left-login p {
  max-width:450px;
  font-size:18px;
  line-height:1.8;
  opacity:0.95;
  color: #063b8a;
}


/*---- RIGHT PANEL ----*/
.invoice-right-login {
  width:50%;
  background:linear-gradient(135deg,#a5b4dd,#b4e6c9);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:40px;
}

.invoice-right-login h2 {
  font-size:32px;
  color:#1e293b;
  margin-bottom:15px;
}

.invoice-right-login p {
  color: #063b8a;
  margin-bottom:30px;
}


/*--- FORM CARD - login ---*/
.invoice-form-login {
  width:100%;
  max-width:420px;
  background:#fff;
  padding:35px;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(7, 102, 50, 0.692);
}

/*--- INPUTS - Field ---*/
.invoice-form-login input {
  width:100%;
  height:52px;
  border:1px solid #dbe2ea;
  border-radius:10px;
  padding:0 15px;
  font-size:15px;
  margin-bottom:18px;
  transition:0.3s;
}

.invoice-form-login input:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

/*--- PASSWORD - Field ---*/
.invoice-login-password-wrapper {
  position:relative;
}

.invoice-login-password-wrapper input {
  padding-right:50px;
}

.invoice-lg-toggle-password {
  position:absolute;
  right:16px;
  top:16px;
  font-size: 14px;
  cursor:pointer;
  color:#64748b;
}

.invoice-lg-toggle-password:hover {
  color:#6fa8f7;
}

/*--- LOGIN BUTTON ---*/
.invoice-form-login button {
  width:100%; 
  height:52px;
  border:none;
  border-radius:10px;
  background:#2563eb;
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.invoice-form-login button:hover {
  background:#163fad;
}




                                /* =============================================
                                          Large Desktop (1920px and above)
                                ============================================= */

@media (min-width: 1600px) {

    .invoice-left-login {
        padding:80px;
    }

    .invoice-left-login img {
        width:220px;
    }

    .invoice-left-login h1 {
        font-size:48px;
    }

    .invoice-left-login p {
        font-size:20px;
        max-width:520px;
    }

    .invoice-form-login {
        max-width:480px;
        padding:45px;
    }

    .invoice-right-login h2 {
        font-size:36px;
    }

}


                                /* ==========================================
                                        Desktop (1280px - 1599px)
                                ========================================== */

@media (min-width:1280px) and (max-width:1599px) {

    .invoice-left-login {
        padding:60px;
    }

    .invoice-left-login h1 {
        font-size:40px;
    }

}


                                /* ==========================================
                                        Tablet Landscape (1024px)
                                ========================================== */

@media (max-width:1024px){

    .invoice-left-login,
    .invoice-right-login {
        width:50%;
        padding:35px;
    }

    .invoice-left-login img {
        width:150px;
    }

    .invoice-left-login h1 {
        font-size:34px;
    }

    .invoice-left-login p {
        font-size:16px;
    }

    .invoice-form-login {
        max-width:360px;
        padding:28px;
    }

}


                                /* ==========================================
                                        Tablet Portrait (768px)
                                ========================================== */

@media (max-width:768px) {

    .admin-login-invoice {
        flex-direction:column;
    }

    .invoice-left-login,
    .invoice-right-login {
        width:100%;
    }

    .invoice-left-login {
        min-height:340px;
        padding:35px 25px;
    }

    .invoice-left-login img {
        width:130px;
    }

    .invoice-left-login h1 {
        font-size:30px;
    }

    .invoice-left-login p {
        font-size:15px;
        max-width:100%;
    }

    .invoice-right-login {
        padding:30px 20px;
    }

    .invoice-form-login {
        max-width:450px;
    }

}


                                /* ==========================================
                                              Mobile (414px)
                                ========================================== */

@media (max-width:414px) {

    .invoice-left-login {
        padding:30px 20px;
    }

    .invoice-left-login img {
        width:110px;
    }

    .invoice-left-login h1 {
        font-size:26px;
    }

    .invoice-left-login p {
        font-size:14px;
        line-height:1.6;
    }

    .invoice-right-login h2 {
        font-size:26px;
    }

    .invoice-form-login {
        padding:25px 20px;
    }

}


                                /* ==========================================
                                            Mobile (375px)
                                ========================================== */

@media (max-width:375px) {

    .invoice-left-login h1 {
        font-size:24px;
    }

    .invoice-right-login h2 {
        font-size:24px;
    }

    .invoice-form-login {
        padding:20px 18px;
    }

}


                                /* ==========================================
                                            Mobile (360px)
                                ========================================== */

@media (max-width:360px) {

    .invoice-left-login img {
        width:100px;
    }

    .invoice-left-login h1 {
        font-size:22px;
    }

    .invoice-left-login p {
        font-size:13px;
    }

    .invoice-form-login input,
    .invoice-form-login button {
        height:48px;
        font-size:14px;
    }

}


                                /* ==========================================
                                            Mobile (320px)
                                ========================================== */

@media (max-width:320px) {

    .invoice-left-login {
        padding:20px 15px;
    }

    .invoice-left-login img {
        width:90px;
    }

    .invoice-left-login h1 {
        font-size:20px;
    }

    .invoice-left-login p {
        font-size:12px;
    }

    .invoice-right-login {
        padding:20px 15px;
    }

    .invoice-right-login h2 { 
        font-size:22px;
    }

    .invoice-form-login {
        padding:18px 15px;
    }

    .invoice-form-login input,
    .invoice-form-login button {
        height:45px;
        font-size:13px;
    }

}


/* ---------------------------------------------------------------------------------------------------------------------------------- */

                    /* ==================================
                           Invoice - DASHBOARD HEADER
                    ================================== */

.invoice-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 50px;
  background: white;
  color: #037c40;
  height: 90px;

  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}


/*--- LEFT SECTION ---*/
.left-header-invoice {
  display:flex;
  align-items:center;  
  gap: 55px;
}

.logo-header-invoice img {
  width:130px;  
}

.left-header-invoice-menu-btn {
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  cursor:pointer;
  transition:0.3s;
  margin-left: 50px;
}

.left-header-invoice-menu-btn:hover {
  background:#0b8653;     
}

.left-header-invoice-menu-btn i {
  font-size:26px;
  color:#334155;
}

.left-header-invoice-menu-btn i:hover {
  color:white;
}


/*--- CENTER TITLE ---*/
.header-invoice-center {
  font-size:23px;
  font-weight:700;
  letter-spacing:1px;
}


/*--- RIGHT SECTION ---*/
.right-header-invoice {
  display:flex;
  align-items:center;
}

.right-header-avatar-icon {
  width:40px;
  height:40px;
  border-radius:50%;
  background: #4CAF50;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  transition: 0.3s; 
}

.right-header-avatar-icon i {
  font-size:15px;
}


/*--- PROFILE DROPDOWN ---*/
.invoice-admin-profile-dropdown {
  position:relative;
}

.invoice-admin-profile-btn {
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  padding:8px 15px;
  border-radius:12px;
  transition:0.3s;
}

.invoice-admin-profile-btn:hover {
  background:#a4ccf5;
}

.invoice-admin-profile-btn span { 
  font-size:18px;
  font-weight:600;
  color:#334155;
  letter-spacing: 1px;
}


/*--- DROPDOWN MENU ---*/
.invoice-dropdown-menu {
  position:absolute;
  top:60px;
  right:0;
  width:200px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
  display:none;
  overflow:hidden;
  border : 1px solid rgb(9, 117, 36);
  z-index: 999;
}

.invoice-dropdown-menu.show {
  display:block;
}

.invoice-dropdown-menu a {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  text-decoration:none;
  color:#334155;
  transition:0.3s;
}

.invoice-dropdown-menu a:hover {
  background:#f1f1f1;
}

.invoice-dropdown-menu i {
  width:18px;
  color: rgb(6, 131, 48)
}


                      /* ================================
                                Mobile Sidebar
                      ================================ */

@media (max-width:768px) {

    .invoice-admin-dsh-sidebar {
        position:fixed;
        top:125px;
        left:-260px;
        width:240px;
        height:calc(100vh - 70px);
        background:linear-gradient(135deg,#01351f,#078b54);
        transition:.3s;
        z-index:999;
        overflow-y:auto;
        box-shadow:3px 0 15px rgba(0,0,0,.15);
    }

    .invoice-admin-dsh-sidebar.active {
        left:0;
    }

}


                      /* =============================
                              Tablet (1024px)
                      ============================= */

@media (max-width:1024px) {

    .invoice-dashboard-header {
        padding:15px 20px;
        height:80px;
    }

    .logo-header-invoice img {
        width:110px;
    }

    .header-invoice-center {
        font-size:20px;
    }

    .invoice-admin-profile-btn span {
        font-size:16px;
    }

}


                        /* ====================================
                                Mobile (768px and below)
                        ==================================== */

@media (max-width:768px) {

    .invoice-dashboard-header {
        display:grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto auto;
        gap:15px;
        padding:12px 15px;
        height:auto;
    }

    /*-- Logo --*/
    .left-header-invoice {
        grid-column:1;
        grid-row:1;
        gap: 5px;
    }

    .logo-header-invoice img {
        width:80px;
    }

    /*-- Title --*/
    .header-invoice-center {
        grid-column:2;
        grid-row:1;
        text-align:right;
        font-size:15px;
        font-weight:700;
        line-height:20px;
    }

    /* Menu Button */
    .left-header-invoice-menu-btn {
        grid-column:1;
        grid-row:2;
        display:flex;
        margin-left:-60px;
        margin-bottom: -110px;
        width:40px;
        height:40px;
        justify-content:center;
        align-items:center;
    }

    .left-header-invoice-menu-btn i {
        font-size:22px;
    }

    /*-- Admin --*/
    .right-header-invoice {
        grid-column:2;
        grid-row:2;
        justify-self:end;
    }

    .invoice-admin-profile-btn {
        padding:0;
        background:none;
    }

    .invoice-admin-profile-btn span {
        font-size:14px;
    }

    .right-header-avatar-icon {
        width:35px;
        height:35px;
    }

    .invoice-dropdown-menu{
        width:180px;
        top:38px;
        right:0;    
    }

    .invoice-dropdown-menu a{
        padding:12px 15px;
        font-size:14px;
    }

}


                        /* ===========================
                                Small Mobile
                        =========================== */

@media (max-width:480px){

    .logo-header-invoice img {
        width:70px;
    }

    .header-invoice-center {
        font-size:13px;
    }

    .invoice-admin-profile-btn span {
        font-size:13px;
    }

}


/* ---------------------------------------------------------------------------------------------------------------------------------- */

                          /* ================================================
                                  Invoice Dashboard - SIDEBAR CONTAINER
                          ================================================ */


.Admin-side-bar-invoice {
  display: flex;
  min-height: calc(100vh - 60px);
}

/*--- SIDEBAR MENU---*/
.invoice-admin-dsh-sidebar {
  width: 260px;
  background:linear-gradient(135deg,#01351f,#078b54);
  color: #fff;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
}

.invoice-admin-dsh-sidebar a {
  text-decoration: none;
  color: white;
  padding: 12px 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: 0.3s;
  font-size: 18px;
  letter-spacing: 0.5px;
}

.invoice-admin-dsh-sidebar a:hover {
  background:#2563eb;
  color:#fff;
}

.invoice-admin-dsh-sidebar a i {
  width:20px;
  text-align:center;
  /* color: rgb(224, 93, 6); */
}


/*--- DROPDOWN - sidebar ---*/
.in-admin-sidebar-task-dropdown {
  width:100%;
}

.invoice-admin-side-bar-drop-btn {
  text-decoration: none;
  color: white;
  padding: 12px 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: 0.3s;
  font-size: 18px;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.invoice-admin-side-bar-drop-btn .icon-color {
  margin-left: auto;
}

.invoice-admin-side-bar-drop-btn i {
  width: 20px;
  text-align: center;
}

.invoice-admin-side-bar-drop-btn:hover {
  background:#2563eb;
  color:#fff;
}


/*--- dasshboard Sidebar DROPDOWN CONTENT ---*/
.adminInvoice-side-bar-drop-content {
  display: none;
  flex-direction: column;
  background: #076b41;
}

.adminInvoice-side-bar-drop-content a {
  padding-left: 40px;
  font-size: 15px;
  letter-spacing: 0.5px;
}


/*--- SHOW MENU ---*/
.in-admin-sidebar-task-dropdown.active
.adminInvoice-side-bar-drop-content {
  display:block;
}


/*--- DROPDOWN ICON ---*/
.icon-color {
  transition:0.3s;
}

.in-admin-sidebar-task-dropdown.active .icon-color {
  transform:rotate(180deg);
}

/* -------------------------------------------------------------------------------------------------------------------------------------- */

                              /* ====================================
                                    Dashboard Main Context Card 
                              ==================================== */

.admin-InvoiceDash-main-content {
  flex: 1;
  padding: 50px;
  background: #c5d7ee;
}

.admin-InvoiceDash-main-content h2 {
  font-size: 28px;
}

.invoice-dashboard-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 20px;
}

.InvoiceDashboard-card {
  height:120px;
  border-radius:10px;
  padding:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:white;
  box-shadow:0 3px 10px rgba(0,0,0,0.1);
  transition:0.3s;
}

.InvoiceDashboard-card:hover {
  transform:translateY(-4px);
}

.InvoiceDashboard-card h2 {
  font-size:42px;
  margin-bottom:10px;
}

.InvoiceDashboard-card p {
  font-size:18px;
}

.InvoiceDashboard-card i {
  font-size:60px;
  opacity:0.2;
}


/*--- Dashboard cards COLORS ---*/

.green {
  background:#00a65a;
}

.purple {
  background:#605ca8;
}

.orange {
  background:#f39c12;
}

.red {
  background:#dd4b39;
}

.blue {
  background:#3c8dbc;
}

.blue-re {
  background:#b62de0;
}

.blue-pe {
  background:#789206;
}



                                /* ============================================
                                            Large Desktop (1600px - 1920px)
                                ============================================ */

@media (min-width:1600px) {

    .admin-InvoiceDash-main-content {
        padding:60px;
    }

    .invoice-dashboard-cards {
        grid-template-columns:repeat(3,1fr);
        gap:45px;
    }

    .InvoiceDashboard-card {
        height:140px;
    }

    .InvoiceDashboard-card h2 {
        font-size:48px;
    }

    .InvoiceDashboard-card p {
        font-size:20px;
    }

    .InvoiceDashboard-card i {
        font-size:70px;
    }

}


                                /* =========================================
                                          Desktop (1280px - 1599px)
                                ========================================= */

@media (min-width:1280px) and (max-width:1599px) {

    .invoice-dashboard-cards {
        grid-template-columns:repeat(3,1fr);
        gap:30px;
    }

}


                                /* =========================================
                                            Tablet Landscape (1024px)
                                ========================================= */

@media (max-width:1024px) {

    .admin-InvoiceDash-main-content {
        padding:30px;
    }

    .invoice-dashboard-cards {

        grid-template-columns:repeat(2,1fr);

        gap:25px;

    }

    .InvoiceDashboard-card {

        height:120px;

        padding:18px;

    }

    .InvoiceDashboard-card h2 {

        font-size:36px;

    }

    .InvoiceDashboard-card p {

        font-size:16px;

    }

    .InvoiceDashboard-card i {

        font-size:55px;

    }

}


                                /* =========================================
                                          Tablet Portrait (768px)
                                ========================================= */

@media (max-width:768px) {

    .admin-InvoiceDash-main-content {
        padding:20px;
    }

    .admin-InvoiceDash-main-content h2 {
        font-size:24px;
    }

    .invoice-dashboard-cards {
        grid-template-columns:1fr;
        gap:20px;
    }

    .InvoiceDashboard-card {
        height:110px;
    }

}


                                /* =========================================
                                              Mobile (414px)
                                ========================================= */

@media (max-width:414px) {

    .admin-InvoiceDash-main-content {
        padding:15px;
    }

    .admin-InvoiceDash-main-content h2 {
        font-size:22px;
    }

    .InvoiceDashboard-card {
        height:100px;
        padding:15px;
    }

    .InvoiceDashboard-card h2 {
        font-size:30px;
    }

    .InvoiceDashboard-card p {
        font-size:15px;
    }

    .InvoiceDashboard-card i {
        font-size:45px;
    }

}



                                /* =========================================
                                              Mobile (375px)
                                ========================================= */

@media (max-width:375px) {

    .InvoiceDashboard-card h2 {
        font-size:28px;
    }

    .InvoiceDashboard-card p {
        font-size:14px;
    }

}


                                /* =========================================
                                              Mobile (360px)
                                ========================================= */

@media (max-width:360px) {

    .InvoiceDashboard-card {
        height:95px;
    }

    .InvoiceDashboard-card h2 {
        font-size:26px;
    }

    .InvoiceDashboard-card p {
        font-size:13px;
    }

    .InvoiceDashboard-card i {
        font-size:40px;
    }

}


                                /* =========================================
                                                Mobile (320px)
                                ========================================= */

@media (max-width:320px) {

    .admin-InvoiceDash-main-content {
        padding:12px;
    }

    .InvoiceDashboard-card {
        padding:12px;
        height:90px;
    }

    .InvoiceDashboard-card h2 {
        font-size:24px;
    }

    .InvoiceDashboard-card p {
        font-size:12px;
    }

    .InvoiceDashboard-card i {
        font-size:35px;
    }

}


/* ------------------------------------------------------------------------------------------------------------------------------------ */

                      /* ====================================
                              Add student - Admin side  
                      ==================================== */

.add-student-main-content {
  width: 75%;
  margin: 40px auto;
  padding: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}

.add-student-page-header {
  margin-bottom:25px;
}

.add-student-page-header h2 {
  font-size:30px;
  color:#0c4fbb;
  margin-bottom:6px;
}

.add-student-page-header p {
  color:#15944a;
  font-size:16px;
  letter-spacing: 0.5px;
}


/*--- FORM GRID ---*/
.add-student-form-wrapper {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px;
  align-items:start;
}


/*--- CARD ---*/
.Add-student-box {
  background:#e1eff7;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #9acab7;
  box-shadow:0 2px 10px rgba(9, 117, 45, 0.267);
}


/*--- CARD HEADER ---*/
.addStudent-box-header {
  padding:18px 22px;
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
  font-size:18px;
  font-weight:600;
  color:#0c4fbb;
}


/*--- CARD BODY ---*/
.addStudent-box-body {
  padding:20px;
}


/*--- FORM GROUP ---*/
.add-student-form-group {
  margin-bottom:18px;
}

.add-student-form-group label {
  display:block;
  margin-bottom:8px;
  font-size:14px;
  font-weight:600;
  color:#334155;
}

.add-student-form-group input,
.add-student-form-group select,
.add-student-form-group textarea {
  width:100%;
  padding:12px 15px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size:12px;
  background:#fff;
}

.add-student-form-group textarea {
  resize:vertical;
}


/*---- FOCUS ----*/
.add-student-form-group input:focus,
.add-student-form-group select:focus,
.add-student-form-group textarea:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}


/*--- BUTTON ---*/
.Add-student-submit {
  text-align:right;
  margin-top:25px;
}

.Add-student-submit button {
  background:#2563eb;
  color:#fff;
  border:none;
  padding:12px 30px;
  border-radius:8px;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  transition:0.3s;
}

.Add-student-submit button:hover {
  background:#0e8b1e;
}


                                /* =========================================
                                          Tablet Landscape (1024px)
                                ========================================= */

@media (max-width:1024px) {

.add-student-main-content {
    width:70%;
    padding:35px;
}

.add-student-form-wrapper {
    gap:25px;
}

.add-student-page-header h2 {
    font-size:28px;
}

}


                                /* =========================================
                                            Tablet Portrait (768px)
                                ========================================= */

@media (max-width:768px) {

.add-student-main-content {
    width:95%;
    margin:25px auto;
    padding:25px;
}

.add-student-page-header h2 {
    font-size:24px;
}

.add-student-page-header p {
    font-size:14px;
}

/*-- Two columns → One column --*/
.add-student-form-wrapper {
    grid-template-columns:1fr;
    gap:20px;
}

.addStudent-box-header {
    font-size:17px;
}

.addStudent-box-body {
    padding:18px;
}

.Add-student-submit {
    text-align:center;
}

.Add-student-submit button {
    width:100%;
}

}


                                /* =========================================
                                                Mobile (480px)
                                ========================================= */

@media (max-width:480px) {

.add-student-main-content {
    width:96%;
    margin:15px auto;
    padding:18px;
    border-radius:8px;
}

.add-student-page-header {
    margin-bottom:18px;
}

.add-student-page-header h2 {
    font-size:20px;
}

.add-student-page-header p {
    font-size:13px;
}

.add-student-form-wrapper {
    grid-template-columns:1fr;
    gap:18px;
}

.addStudent-box-header {
    padding:15px;
    font-size:16px;
}

.addStudent-box-body {
    padding:15px;
}

.add-student-form-group {
    margin-bottom:15px;
}

.add-student-form-group label {
    font-size:13px;
}

.add-student-form-group input,
.add-student-form-group select,
.add-student-form-group textarea {
    padding:10px 12px;
    font-size:14px;
}

.Add-student-submit {
    margin-top:20px;
    text-align:center;
}

.Add-student-submit button {
    width:100%;
    padding:12px;
    font-size:15px;
}

}


/* --------------------------------------------------------------------------------------------------------------------------------------- */

                      /* ====================================
                              Manage student - Admin side  
                      ==================================== */

.manage-student-container {
  width: 75%;
  margin: 40px auto;
  padding: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}

.manage-std-page-header {
  margin-bottom:25px;
}

.manage-std-page-header h2 {
  font-size:30px;
  margin-bottom:6px;
  color:#0c4fbb;
}

.manage-std-page-header p {
  color:#15944a;
  font-size:16px;
  letter-spacing: 0.5px;
}


/*--- SEARCH ---*/
.manage-student-search {
  display:flex;
  gap:10px;
  margin-bottom:20px;
}

.manage-student-search input {
  flex:1;
  padding:12px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size: 12px;
}

.manage-student-search input:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

.manage-student-search button {
  padding:12px 20px;
  background:#2563eb;
  color:#fff;
  border:none;
  border-radius:50px;
  cursor:pointer;
  font-size: 12px;
}

.manage-student-search button:hover {
  background:#0e8b1e;
}


/*--- TABLE ---*/
.manage-std-table-container {
  overflow-x:auto;
}

.manage-std-table-container table {
  width:100%;
  border-collapse:collapse;
  border-radius: 10px;
  overflow: hidden;
}

.manage-std-table-container thead {
  background: #2d6cdf;
  color: white;
}

.manage-std-table-container thead th {
  padding: 12px;
  border-bottom: 1px solid #ddd;
  text-align:center;
}

.manage-std-table-container tbody td {
  padding:14px;
  border-bottom:1px solid #e2e8f0;
  font-size: 14px;
  text-align: center;
}

.manage-std-table-container tbody tr:hover {
  background:#d7f5de;
}


/*--- ACTION BUTTONS ---*/
.manage-std-edit-btn {
  background:#f59e0b;
  color:#fff;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size: 12px;
}

.manage-std-edit-btn:hover {
  background:#ad720a;
}

.manage-std-delete-btn {
  background:#ef4444;
  color:#fff;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  margin-left:5px;
  font-size: 12px;
  margin-top:5px;
}

.manage-std-delete-btn:hover {
  background:#ce2c2c;
}



                                  /* =========================================
                                              Tablet Landscape (1024px)
                                  ========================================= */

@media (max-width:1024px) {

.manage-student-container {
    width:70%;
    padding:35px;
}

.manage-std-page-header h2 {
    font-size:28px;
}

}



                                  /* =========================================
                                              Tablet Portrait (768px)
                                  ========================================= */

@media (max-width:768px) {

.manage-student-container {
    width:95%;
    margin:25px auto;
    padding:25px;
}

.manage-std-page-header h2 {
    font-size:24px;
}

.manage-std-page-header p {
    font-size:14px;
}

/*-- Search --*/
.manage-student-search {
    flex-direction:column;
}

.manage-student-search input {
    width:100%;
    font-size:14px;
}

.manage-student-search button {
    width:100%;
    font-size:14px;
    border-radius:8px;
}

/*-- Table --*/
.manage-std-table-container {
    overflow-x:auto;
}

.manage-std-table-container table {
    min-width:1000px;
}

}


                                  /* =========================================
                                                Mobile (480px)
                                  ========================================= */

@media (max-width:480px) {

.manage-student-container {
    width:96%;
    margin:15px auto;
    padding:18px;
    border-radius:8px;
}

.manage-std-page-header {
    margin-bottom:18px;
}

.manage-std-page-header h2 {
    font-size:20px;
}

.manage-std-page-header p {
    font-size:13px;
}

/*-- Search --*/
.manage-student-search {
    flex-direction:column;
    gap:10px;
}

.manage-student-search input {
    width:100%;
    padding:10px;
    font-size:14px;
}

.manage-student-search button {
    width:100%;
    padding:10px;
    font-size:14px;
    border-radius:8px;
}

/*-- Table --*/
.manage-std-table-container {
    overflow-x:auto;
}

.manage-std-table-container table {
    min-width:1000px;
}

.manage-std-table-container thead th {
    padding:10px;
    font-size:13px;
}

.manage-std-table-container tbody td {
    padding:10px;
    font-size:13px;
}

/*-- Buttons --*/
.manage-std-edit-btn,
.manage-std-delete-btn {
    padding:6px 10px;
    font-size:12px;
    margin:3px;
}

}


/* --------------------------------------------------------------------------------------------------------------------------------- */

                                /* =======================================
                                          Add Course - Admin Side  
                                ======================================= */

.add-course-container {
  width: 75%;
  margin: 40px auto;
  padding: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}

.add-course-page-header {
  margin-bottom:25px;
}

.add-course-page-header h2 {
  font-size:30px;
  color:#0c4fbb;
  margin-bottom:6px;
}

.add-course-page-header p {
  color:#15944a;
  font-size:16px;
  letter-spacing: 0.5px;
}


/*--- CARD ---*/
.Add-course-card {
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(9, 150, 72, 0.541);
}

.add-course-card-header {
  padding:18px 20px;
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
  font-size:18px;
  font-weight:600;
  color:#0c4fbb;
}

.Add-course-card-body {
  padding:30px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px;
  align-items:start;
}


/*--- FORM GROUP ---*/
.add-Course-form-group {
  margin-bottom:20px;
}

.add-Course-form-group label {
  display:block;
  margin-bottom:8px;
  font-weight:600;
  font-size:15px;
}

.add-Course-form-group input {
  width:100%;
  padding:12px 15px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size:12px;
  background:#fff;
}

.add-Course-form-group input:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}


/*--- BUTTON ---*/
.add-course-submit {
  margin-top:20px;
  text-align:right;
}

.add-course-submit button {
  background:#2563eb;
  color:#fff;
  border:none;
  padding:10px 28px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}

.add-course-submit button:hover {
  background:#0c771a;
}



                        /* =========================================
                                        Tablet (1024px)
                        ========================================= */

@media (max-width:1024px) {

.add-course-container {
    width:70%;
    padding:35px;
}

.Add-course-card-body {
    grid-template-columns:1fr 1fr;
    gap:25px;

}

}


                        /* =========================================
                                  Tablet Portrait (768px)
                        ========================================= */

@media (max-width:768px) {

.add-course-container {
    width:95%;
    padding:25px;
    margin:75px auto;
}

.add-course-page-header h2 {
    font-size:24px;
}

.add-course-page-header p {
    font-size:14px;
}

.Add-course-card-body {
    grid-template-columns:1fr;
    gap:18px;
    padding:20px;
}

.add-course-submit {
    text-align:center;
}

.add-course-submit button {
    width:100%;
}

}


                        /* =========================================
                                        Mobile (480px)
                        ========================================= */

@media (max-width:480px) {

.add-course-container {
    width:96%;
    padding:18px;
    border-radius:8px;
}

.add-course-page-header {
    margin-bottom:18px;
}

.add-course-page-header h2 {
    font-size:20px;
}

.add-course-page-header p {
    font-size:13px;
}

.add-course-card-header {
    font-size:16px;
    padding:14px;
}

.Add-course-card-body {
    padding:15px;
    gap:15px;
}

.add-Course-form-group {
    margin-bottom:15px;
}

.add-Course-form-group label {
    font-size:14px;
}

.add-Course-form-group input {
    padding:10px 12px;
    font-size:14px;
}

.add-course-submit button {
    width:100%;
    padding:12px;
    font-size:15px;
}

}


/* ---------------------------------------------------------------------------------------------------------------------------------------- */

                                  /* ===================================================
                                                manage course - Admin Side 
                                  =================================================== */


.manage-course-container {
  width: 75%;
  margin: 40px auto;
  padding: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}

.manage-course-page-header {
  margin-bottom:25px;
}

.manage-course-page-header h2 {
  font-size:30px;
  margin-bottom:6px;
  color:#0c4fbb;
}

.manage-course-page-header p {
  color:#15944a;
  font-size:16px;
  letter-spacing: 0.5px;
}


/*--- SEARCH ---*/
.manage-course-search {
  display:flex;
  gap:10px;
  margin-bottom:20px;
}

.manage-course-search input {
  flex:1;
  padding:12px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size: 12px;
}

.manage-course-search input:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

.manage-course-search button {
  background:#2563eb;
  color:#fff;
  border:none;
  padding:12px 20px;
  border-radius:50px;
  cursor:pointer;
  font-size: 12px;
}

.manage-course-search button:hover {
  background:#0e8b1e;
}


/*--- TABLE ---*/
.manage-course-table-container {
  overflow-x:auto;
}

.manage-course-table-container table {
  width:100%;
  border-collapse:collapse;
  border-radius: 10px;
  overflow: hidden;
}

.manage-course-table-container thead {
  background: #2d6cdf;
  color: white;
}

.manage-course-table-container thead th {
  padding:12px;
  text-align:center;
  border-bottom:1px solid #e2e8f0;  
}

.manage-course-table-container tbody td {
  padding:14px;
  border-bottom:1px solid #e2e8f0;
  font-size: 14px;
  text-align: center;
}

.manage-course-table-container tbody tr:hover {
  background:#d7f5de;
}


/*--- BUTTONS ---*/
.manage-course-edit-btn {
  background:#f59e0b;
  color:#fff;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size: 12px;
}

.manage-course-edit-btn:hover {
  background:#ad720a;
}

.manage-course-delete-btn {
  background:#ef4444;
  color:#fff;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  margin-left:5px;
  font-size: 12px;
}

.manage-course-delete-btn:hover {
  background:#ce2c2c;
}



                            /* =========================================
                                        Tablet Landscape (1024px)
                            ========================================= */

@media (max-width:1024px) {

.manage-course-container {
    width:70%;
    padding:35px;
}

.manage-course-page-header h2 {
    font-size:28px;
}

}


                            /* =========================================
                                      Tablet Portrait (768px)
                            ========================================= */
                            
@media (max-width:768px) {

.manage-course-container {
    width:95%;
    margin:25px auto;
    padding:25px;
}

.manage-course-page-header h2 {
    font-size:24px;
}

.manage-course-page-header p {
    font-size:14px;
}

/*-- Search --*/
.manage-course-search {
    flex-direction:column;
}

.manage-course-search input {
    width:100%;
    font-size:14px;
}

.manage-course-search button {
    width:100%;
    font-size:14px;
}

/*-- Table --*/
.manage-course-table-container {
    overflow-x:auto;
}

.manage-course-table-container table {
    min-width:750px;
}

}


                            /* =========================================
                                          Mobile (480px)
                            ========================================= */

@media (max-width:480px) {

.manage-course-container {
    width:96%;
    margin:15px auto;
    padding:18px;
    border-radius:8px;
}

.manage-course-page-header {
    margin-bottom:18px;
}

.manage-course-page-header h2 {
    font-size:20px;
}

.manage-course-page-header p {
    font-size:13px;
}

/*-- Search --*/
.manage-course-search {
    flex-direction:column;
    gap:10px;
}

.manage-course-search input {
    width:100%;
    padding:10px;
    font-size:14px;
}

.manage-course-search button {
    width:100%;
    padding:10px;
    font-size:14px;
    border-radius:8px;
}

/*-- Table --*/
.manage-course-table-container {
    overflow-x:auto;
}

.manage-course-table-container table {
    min-width:750px;
}

.manage-course-table-container thead th {
    padding:10px;
    font-size:13px;
}

.manage-course-table-container tbody td { 
    padding:10px;
    font-size:13px;
}

/*-- Buttons --*/
.manage-course-edit-btn,
.manage-course-delete-btn {
    padding:6px 10px;
    font-size:12px;
    margin:2px;
}

}


/* ------------------------------------------------------------------------------------------------------------------------------------ */

                                    /* ===============================================
                                              Create the Invoice - Admin Side 
                                    =============================================== */

.create-invoice-container {
  width: 75%;
  margin: 40px auto;
  padding: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}

.create-invoice-page-header {
  margin-bottom:25px;
}

.create-invoice-page-header h2 {
  font-size:30px;
  color:#0c4fbb;
  margin-bottom:6px;
}

.create-invoice-page-header p {
  color:#15944a;
  font-size:16px;
  letter-spacing: 0.5px;
}


/*--- CARD ---*/
.create-invoice-card {
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(9, 150, 72, 0.541);
}

.create-invoice-card-header {
  padding:18px 20px;
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
  font-size:18px;
  font-weight:600;
  color:#0c4fbb;
}

.create-invoice-card-body {
  padding:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px;
  align-items:start;
}

.create-invoice-form-group {
  margin-bottom:5px;
}

.create-invoice-form-group label {
  display:block;
  margin-bottom:8px;
  font-weight:600;
  font-size:15px;
}

.create-invoice-form-group input,
.create-invoice-form-group select,
.create-invoice-form-group textarea {
  width:100%;
  padding:12px 15px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size:12px;
  background:#fff;
}

.create-invoice-form-group textarea {
  resize:vertical;
}

.create-invoice-form-group input:focus,
.create-invoice-form-group select:focus,
.create-invoice-form-group textarea:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

/*--- BUTTON ---*/
.generate-invoice-submit {
  text-align:right;
  margin-top:20px;
}

.generate-invoice-submit button {
  background:#2563eb;
  color:#fff;
  border:none;
  padding:10px 28px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}

.generate-invoice-submit button:hover {
  background:#0c771a;
}



                              /* =========================================
                                          Tablet Landscape (1024px)
                              ========================================= */

@media (max-width:1024px) {

.create-invoice-container {
    width:70%;
    padding:35px;
}

.create-invoice-card-body {
    gap:25px;
}

.create-invoice-page-header h2 {
    font-size:28px;
}

}


                              /* =========================================
                                          Tablet Portrait (768px)
                              ========================================= */

@media (max-width:768px) {

.create-invoice-container {
    width:95%;
    margin:25px auto;
    padding:25px;
}

.create-invoice-page-header h2 {
    font-size:24px;
}

.create-invoice-page-header p {
    font-size:14px;
}

/* Two columns → One column */
.create-invoice-card-body {
    grid-template-columns:1fr;
    gap:20px;
    padding:20px;
}

.create-invoice-card-header {
    font-size:17px;
}

.generate-invoice-submit {
    text-align:center;
}

.generate-invoice-submit button {
    width:100%;
}

}


                              /* =========================================
                                            Mobile (480px)
                              ========================================= */

@media (max-width:480px) {

.create-invoice-container {
    width:96%;
    margin:15px auto;
    padding:18px;
    border-radius:8px;
}

.create-invoice-page-header {
    margin-bottom:18px;
}

.create-invoice-page-header h2 {
    font-size:20px;
}

.create-invoice-page-header p {
    font-size:13px;
}

.create-invoice-card-header {
    padding:15px;
    font-size:16px;
}

.create-invoice-card-body {
    grid-template-columns:1fr;
    gap:18px;
    padding:15px;
}

.create-invoice-form-group {
    margin-bottom:15px;
}

.create-invoice-form-group label {
    font-size:13px;
}

.create-invoice-form-group input,
.create-invoice-form-group select,
.create-invoice-form-group textarea {
    padding:10px 12px;
    font-size:14px;
}

.generate-invoice-submit {
    margin-top:20px;
    text-align:center;
}

.generate-invoice-submit button {
    width:100%;
    padding:12px;
    font-size:15px;
}

}


/* --------------------------------------------------------------------------------------------------------------------------------- */

                              /* ==========================================
                                        Manage Invoice - Admin side 
                              ========================================== */


.manage-invoice-container {
  width: 75%;
  margin: 40px auto;
  padding: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}


/*--- HEADER ---*/
.manage-invoice-page-header {
  margin-bottom:25px;
}

.manage-invoice-page-header h2 {
  font-size:30px;
  color:#0c4fbb;
  margin-bottom:6px;
}

.manage-invoice-page-header p {
  color:#15944a;
  font-size:16px;
  letter-spacing: 0.5px;
}


/*--- TOP BAR ---*/
.manage-invoice-top-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  gap:20px;
}

.manage-invoice-search {
  display:flex;
  gap:10px;
  flex:1; 
}

.manage-invoice-search input {
  flex:1;
  padding:12px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size: 12px;
}

.manage-invoice-search input:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

.manage-invoice-search button {
  background:#2563eb;
  color:white;
  border:none;
  padding:12px 20px;
  border-radius:50px;
  cursor:pointer;
  font-size: 12px;
}

.manage-invoice-search button:hover {
  background:#1543a7;
}


/*--- ACTION BUTTONS ---*/
.manage-invoice-actions {
  display:flex;
  gap:10px;
}

.manageInvoice-create-btn {
  background:#16a34a;
  color:#fff;
  border:none;
  padding:12px 18px;
  border-radius:50px;
  cursor:pointer;
  font-size: 12px;
}

.manageInvoice-create-btn:hover {
  background:#0e6d31;
}

.manageInvoice-csv-btn {
  background:#f59e0b;
  color:#fff;
  border:none;
  padding:12px 18px;
  border-radius:50px;
  cursor:pointer;
  font-size: 12px;
}

.manageInvoice-csv-btn:hover {
  background:#b9790b;
}


/*--- TABLE ---*/
.manage-invoice-table-container {
  overflow-x:auto;
}

.manage-invoice-table-container table {
  width:100%;
  border-collapse:collapse;
  border-radius: 10px;
  overflow: hidden;
}

.manage-invoice-table-container thead {
  background: #2d6cdf;
  color: white;
}

.manage-invoice-table-container thead th {
  padding:12px;
  text-align:center;
  border-bottom:1px solid #e2e8f0;  
}

.manage-invoice-table-container tbody td {
  padding:15px;
  border-bottom:1px solid #e2e8f0;
  font-size: 14px;
  text-align: center;
}

.manage-invoice-table-container tbody tr:hover {
  background:#d7f5de;
}


/*--- STATUS ---*/
.manageInvoice-paid {
  background:#dcfce7;
  color:#15803d;
  padding:5px 10px;
  border-radius:20px;
  font-size:13px; 
  font-weight:600;
}

.manageInvoice-pending {
  background:#fef3c7;
  color:#b45309;
  padding:5px 10px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
}


/*--- ACTION BUTTONS ---*/
.manageInvoice-view-btn {
  background:#3b82f6;
  color:white;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size: 12px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.manageInvoice-view-btn:hover {
  background:#2664c7;
}

.manageInvoice-edit-btn {
  background:#f59e0b;
  color:white;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size: 12px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.manageInvoice-edit-btn:hover {
  background:#ad720a;
}

.manageInvoice-delete-btn {
  background:#ef4444;
  color:white;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size: 12px;
}

.manageInvoice-delete-btn:hover {
  background:#ce2c2c;
}


                              /* =========================================
                                          Tablet Landscape (1024px)
                              ========================================= */

@media (max-width:1024px) {

.manage-invoice-container {
    width:70%;
    padding:30px;
    margin:25px auto;
}

.manage-invoice-page-header h2 {
    font-size:26px;
}

.manage-invoice-page-header p {
    font-size:15px;
}

.manage-invoice-top-bar {
    flex-direction:column;
    align-items:stretch;
    gap:15px;
}

.manage-invoice-search {
    width:100%;
}

.manage-invoice-actions {
    width:100%;
    justify-content:flex-end;
}

.manageInvoice-create-btn,
.manageInvoice-csv-btn {
    padding:10px 18px;
}

.manage-invoice-table-container {
    overflow-x:auto;
}

.manage-invoice-table-container table {
    min-width:1100px;
}

}


                              /* =========================================
                                          Tablet Portrait (768px)
                              ========================================= */

@media (max-width:768px) {

.manage-invoice-container {
    width:90%;
    margin:15px;
    padding:20px;
    border-radius:8px;
}

.manage-invoice-page-header {
    margin-bottom:18px;
}

.manage-invoice-page-header h2 {
    font-size:22px;
}

.manage-invoice-page-header p {
    font-size:14px;
}

.manage-invoice-top-bar {
    flex-direction:column;
    align-items:stretch;
}

.manage-invoice-search {
    flex-direction:column;
}

.manage-invoice-search input,
.manage-invoice-search button {
    width:100%;
}

.manage-invoice-actions {
    flex-direction:column;
    width:100%;
}

.manageInvoice-create-btn,
.manageInvoice-csv-btn {
    width:100%;
}

.manage-invoice-table-container {
    overflow-x:auto;
}

.manage-invoice-table-container table {
    min-width:1100px;
}

.manage-invoice-table-container th,
.manage-invoice-table-container td {
    padding:10px;
    font-size:13px;
}

.manageInvoice-view-btn,
.manageInvoice-edit-btn,
.manageInvoice-delete-btn {
    width:100%;
    margin:3px 0;
}

.manageInvoice-paid,
.manageInvoice-pending {
    font-size:12px;
    padding:4px 8px;
}

}


                              /* =========================================
                                            Mobile (480px)
                              ========================================= */

@media (max-width:480px) {

.manage-invoice-container {
    padding:15px;
}

.manage-invoice-page-header h2 {
    font-size:20px;
}

.manage-invoice-page-header p {
    font-size:13px;
}

.manageInvoice-create-btn,
.manageInvoice-csv-btn,
.manage-invoice-search button {
    font-size:13px;
    padding:10px;
}

.manage-invoice-table-container th,
.manage-invoice-table-container td {
    font-size:12px;
}

}



/* --------------------------------------------------------------------------------------------------------------------------------------------- */

                            /* ==========================================
                                      Record Payment - Admin Side
                            ========================================== */

.record-payment-container {
  width: 75%;
  margin: 40px auto;
  padding: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}

.record-payment-header {
  margin-bottom:25px;
}

.record-payment-header h2 {
  font-size:30px;
  color:#0c4fbb;
  margin-bottom:6px;
}

.record-payment-header p {
  color:#15944a;
  font-size:16px;
  letter-spacing: 0.5px;
}


/*--- Card ---*/
.record-payment-card {
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(9, 150, 72, 0.541);
}

.record-payment-card-header {
  padding:18px 20px;
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
  font-size:18px;
  font-weight:600;
  color:#0c4fbb;
}

.record-payment-card-body {
  padding:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px;
  align-items:start;
}

.record-payment-form-group {
  margin-bottom:5px;
}

.record-payment-form-group label {
  display:block;
  margin-bottom:8px;
  font-weight:600;
  font-size:15px;
}

.record-payment-form-group input,
.record-payment-form-group select {
  width:100%;
  padding:12px 15px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size:12px;
  background:#fff;
}

.record-payment-form-group input:focus,
.record-payment-form-group select:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}


/*--- Button ---*/
.record-payment-submit-btn {
  text-align:right;
  margin-top:20px;
}

.record-payment-submit-btn button {
  background:#2563eb;
  color:#fff;
  border:none;
  padding:10px 28px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}

.record-payment-submit-btn button:hover {
  background:#0c771a;
}


                              /* =========================================
                                          Tablet Landscape (1024px)
                              ========================================= */

@media (max-width:1024px) {

.record-payment-container {
    width:70%;
    padding:30px;
    margin:25px auto;
}

.record-payment-header h2 {
    font-size:26px;
}

.record-payment-header p {
    font-size:15px;
}

.record-payment-card-body {
    grid-template-columns:1fr;
    gap:20px;
}

.record-payment-card-header {
    font-size:17px;
}

.record-payment-form-group label {
    font-size:14px;
}

.record-payment-form-group input,
.record-payment-form-group select {
    padding:12px;
    font-size:14px;
}

.record-payment-submit-btn {
    text-align:center;
}

.record-payment-submit-btn button {
    width:100%;
}

}


                              /* =========================================
                                          Tablet Portrait (768px)
                              ========================================= */

@media (max-width:768px) {

.record-payment-container {
    width:100%;
    margin:15px;
    padding:20px;
    border-radius:8px;
}

.record-payment-header {
    margin-bottom:20px;
}

.record-payment-header h2 {
    font-size:22px;
}

.record-payment-header p {
    font-size:14px;
    line-height:20px;
}

.record-payment-card {
    border-radius:8px;
}

.record-payment-card-header {
    padding:15px;
    font-size:16px;
}

.record-payment-card-body {
    display:block;
    padding:15px;
}

.record-payment-form-group {
    margin-bottom:18px;
}

.record-payment-form-group label {
    font-size:14px;
}

.record-payment-form-group input,
.record-payment-form-group select {
    width:100%;
    padding:12px;
    font-size:14px;
}

.record-payment-submit-btn {
    margin-top:15px;
    text-align:center;
}

.record-payment-submit-btn button {
    width:100%;
    padding:14px;
    font-size:15px;
}

}


                              /* =========================================
                                            Mobile (480px)
                              ========================================= */

@media (max-width:480px) {

.record-payment-container {
    padding:15px;
}

.record-payment-header h2 {
    font-size:20px;
}

.record-payment-header p {
    font-size:13px;
}

.record-payment-card-header {
    font-size:15px;
}

.record-payment-form-group label {
    font-size:13px;
}

.record-payment-form-group input,
.record-payment-form-group select {
    font-size:13px;
    padding:10px;
}

.record-payment-submit-btn button {
    font-size:14px;
    padding:12px;
}

}


/* -------------------------------------------------------------------------------------------------------------------------------------- */

                                /* ===========================================
                                            PAYMENT HISTORY - Admin Side
                                =========================================== */

.payment-history-container {
  width: 75%;
  margin: 40px auto;
  padding: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}


/*--- HEADER ---*/
.payment-history-page-header {
  margin-bottom:25px;
}

.payment-history-page-header h2 {
  font-size:30px;
  color:#0c4fbb;
  margin-bottom:6px;
}

.payment-history-page-header p {
  color:#15944a;
  font-size:16px;
  letter-spacing: 0.5px;
}

/*--- TOP BAR ---*/
.payment-history-top-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  gap:20px;
}

.payment-history-search {
  display:flex;
  gap:10px;
  flex:1; 
}

.payment-history-search input {
  flex:1;
  padding:12px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size: 12px;
}

.payment-history-search input:focus,
.payment-history-filter select:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

.payment-history-search button {
  background:#2563eb;
  color:#fff;
  border:none;
  padding:12px 20px;
  cursor:pointer;
  border-radius:50px;
  font-size: 12px;
}

.payment-history-search button:hover {
  background:#1d4ed8;
}

.payment-history-filter select {
  padding:12px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size: 12px;
}


/*--- TABLE ---*/
.payment-history-table-container {
  overflow-x:auto;
}

.payment-history-table-container table {
  width:100%;
  border-collapse:collapse;
  border-radius: 10px;
  overflow: hidden;
}

.payment-history-table-container th { 
  background: #2d6cdf;
  color: white;
  padding:12px;
  text-align:center;
  border-bottom:1px solid #e2e8f0;
}

.payment-history-table-container td {
  padding:15px;
  border-bottom:1px solid #e2e8f0;
  font-size: 14px;
  text-align: center;
}

.payment-history-table-container tr:hover {
  background:#d7f5de;
}


/*--- PAYMENT METHOD ---*/
.payment-History-method-upi {
  background:#dcfce7;
  color:#15803d;
  padding:6px 12px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
}

.payment-History-method-cash {
  background:#dbeafe;
  color:#1d4ed8;
  padding:6px 12px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
}


/*--- ACTION BUTTONS ---*/
.payment-History-view-btn {
  background:#3b82f6;
  color:white;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size: 12px;
  margin-right:5px;
}

.payment-History-view-btn:hover { 
  background:#1d4ed8;
}

.payment-History-print-btn {
  background:#16a34a;
  color:#fff;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size: 12px;
}

.payment-History-print-btn:hover {
  background:#15803d;
}


                              /* =========================================
                                          Tablet Landscape (1024px)
                              ========================================= */

@media (max-width:1024px) {

  .payment-history-container {
    width:70%;
    padding:30px;
    margin:25px auto;
  }

  .payment-history-page-header h2 {
    font-size:26px;
  }

  .payment-history-page-header p {
    font-size:15px;
  }

  .payment-history-top-bar {
    flex-direction:column;
    align-items:stretch;
    gap:15px;
  }

  .payment-history-search {
    width:100%;
  }

  .payment-history-filter {
    width:100%;
  }

  .payment-history-filter select {
    width:100%;
  }

  .payment-history-table-container {
    overflow-x:auto;
  }

  .payment-history-table-container table {
    min-width:950px;
  }

}


                              /* =========================================
                                          Tablet Portrait (768px)
                              ========================================= */

@media (max-width:768px) {

  .payment-history-container {
    width:90%;
    margin:15px;
    padding:20px;
    border-radius:10px;
  }

  .payment-history-page-header {
    margin-bottom:20px;
  }

  .payment-history-page-header h2 {
    font-size:22px;
  }

  .payment-history-page-header p {
    font-size:14px;
  }

  /*-- Search Area --*/
  .payment-history-top-bar {
    flex-direction:column;
    align-items:stretch;
    gap:15px;
  }

  .payment-history-search {
    flex-direction:column;
    width:100%;
  }

  .payment-history-search input {
    width:100%;
  }

  .payment-history-search button {
    width:100%;
    border-radius:8px;
  }

  .payment-history-filter {
    width:100%;
  }

  .payment-history-filter select {
    width:100%;
  }

  /*-- Table --*/
  .payment-history-table-container {
    overflow-x:auto;
  }

  .payment-history-table-container table {
    min-width:950px;
  }

  .payment-history-table-container th,
  .payment-history-table-container td {
    padding:10px;
    font-size:13px;
    white-space:nowrap;
  }

  /*-- Payment Badge --*/
  .payment-History-method-upi,
  .payment-History-method-cash {
    font-size:12px;
    padding:5px 10px;
  }

  /*-- Buttons --*/
  .payment-History-view-btn,
  .payment-History-print-btn {
    padding:6px 10px;
    font-size:11px;
    margin-bottom:5px;
  }

}


                              /* =========================================
                                            Mobile (480px)
                              ========================================= */

@media (max-width:480px) {

  .payment-history-container {
    padding:15px;
  }

  .payment-history-page-header h2 {
    font-size:20px;
  }

  .payment-history-page-header p {
    font-size:13px;
  }

  .payment-history-search input,
  .payment-history-search button,
  .payment-history-filter select {
    font-size:12px;
  }

}


/* ------------------------------------------------------------------------------------------------------------------------------------------- */

                            /* =============================================
                                      Invoice Reports - Admin Side 
                            ============================================= */

.invoice-report-container {
  width: 75%;
  margin: 40px auto;
  padding: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}


/*--- Header ---*/
.invoice-report-header {
  margin-bottom:25px;
}

.invoice-report-header h2 {
  font-size:30px;
  color:#0c4fbb;
  margin-bottom:6px;
}

.invoice-report-header p {
  color:#15944a;
  font-size:16px;
  letter-spacing: 0.5px;
}


/*--- Cards ---*/
.invoice-report-cards {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:30px;
}

.invoice-report-card {
  padding:20px;
  text-align:center;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(9, 150, 72, 0.541);
}

.invoice-report-card h3 {
  color:#2563eb;
  font-size:26px;
  margin-bottom:8px;
}

.invoice-report-card p {
  color:#475569;
}


/*--- Search ---*/
.invoice-report-top-bar {
  display:flex;
  gap:15px;
  margin-bottom:25px;
  flex-wrap:wrap;
}

.invoice-report-top-bar input,
.invoice-report-top-bar select {
  flex:1;
  padding:12px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size: 12px;
}

.invoice-report-top-bar input:focus,
.invoice-report-top-bar select:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

.invoice-report-top-bar button {
  background:#2563eb;
  color:#fff;
  border:none;
  padding:12px 20px;
  cursor:pointer;
  border-radius:50px;
  font-size: 12px;
}

.invoice-report-top-bar button:hover {
  background:#1d4ed8;
}


/*--- Table ---*/
.invoice-report-table-container {
  overflow-x:auto;
}

.invoice-report-table-container table {
  width:100%;
  border-collapse:collapse;
  border-radius: 10px;
  overflow: hidden;
}

.invoice-report-table-container th {
  background: #2d6cdf;
  color: white;
  padding:12px;
  text-align:center;
  border-bottom:1px solid #e2e8f0;
}

.invoice-report-table-container td {
  padding:15px;
  border-bottom:1px solid #e2e8f0;
  font-size: 14px;
  text-align: center;
}

.invoice-report-table-container tr:hover {
  background:#d7f5de;
}

/*--- Status ---*/
.InvoiceReport-paid {
  background:#dcfce7;
  color:#15803d;
  padding:5px 12px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
}

.InvoiceReport-pending {
  background:#fee2e2;
  color:#dc2626;
  padding:5px 12px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
} 


                              /* =========================================
                                          Tablet Landscape (1024px)
                              ========================================= */

@media (max-width:1024px) {

  .invoice-report-container {
    width:70%;
    padding:30px;
    margin:25px auto;
  }

  .invoice-report-cards {
    grid-template-columns:repeat(2,1fr);
    gap:20px;
  }

}


                              /* =========================================
                                          Tablet Portrait (768px)
                              ========================================= */


@media (max-width:768px) {

  .invoice-report-container {
    width:90%;
    margin:15px;
    padding:20px;
  }

  .invoice-report-header h2 {
    font-size:24px;
  }

  .invoice-report-header p {
    font-size:14px;
  }

  /*-- Dashboard Cards --*/
  .invoice-report-cards {
    grid-template-columns:1fr;
    gap:15px;
  }

  .invoice-report-card {
    padding:18px;
  }

  .invoice-report-card h3 {
    font-size:22px;
  }

  .invoice-report-card p {
    font-size:14px;
  }

  /*-- Search --*/
  .invoice-report-top-bar {
    flex-direction:column;
    gap:12px;
  }

  .invoice-report-top-bar input,
  .invoice-report-top-bar select,
  .invoice-report-top-bar button {
    width:100%;
  }

  /*-- Table --*/
  .invoice-report-table-container {
    overflow-x:auto;
  }

  .invoice-report-table-container table {
    min-width:850px;
  }

  .invoice-report-table-container th,
  .invoice-report-table-container td {
    padding:10px;
    font-size:13px;
    white-space:nowrap;
  }

  .InvoiceReport-paid,
  .InvoiceReport-pending {
    font-size:12px;
    padding:4px 10px;
  }

}


                              /* =========================================
                                            Mobile (480px)
                              ========================================= */

@media (max-width:480px) {

  .invoice-report-container {
    padding:15px;
  }

  .invoice-report-header h2 {
    font-size:20px;
  }

  .invoice-report-card h3 {
    font-size:20px;
  }

  .invoice-report-card p {
    font-size:13px;
  }

  .invoice-report-top-bar input,
  .invoice-report-top-bar select,
  .invoice-report-top-bar button {
    font-size:13px;
    padding:10px;
  }

}


/* -------------------------------------------------------------------------------------------------------------------------------------- */


                                /* ========================================
                                        Student Reports Admin Side
                                ======================================== */


.student-report-container {
  width: 75%;
  margin: 40px auto;
  padding: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}


/*--- Header ---*/
.student-report-header {
  margin-bottom:25px;
}

.student-report-header h2 {
  font-size:30px;
  color:#0c4fbb;
  margin-bottom:6px;
}

.student-report-header p {
  color:#15944a;
  font-size:16px;
  letter-spacing: 0.5px;
}


/*--- Cards ---*/
.student-report-cards {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:30px;
}

.student-report-card {
  padding:20px;
  text-align:center;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(9, 150, 72, 0.541);
}

.student-report-card h3 {
  color:#2563eb;
  font-size:26px;
  margin-bottom:8px;
}

.student-report-card p {
  color:#475569;
}


/*--- Search Bar ---*/
.student-report-top-bar {
  display:flex;
  gap:15px;
  margin-bottom:25px;
  flex-wrap:wrap;  
}

.student-report-top-bar input,
.student-report-top-bar select {
  flex:1;
  padding:12px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size: 12px;
}

.student-report-top-bar input:focus,
.student-report-top-bar select:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

.student-report-top-bar button {
  background:#2563eb;
  color:#fff;
  border:none;
  padding:12px 20px;
  border-radius:50px;
  cursor:pointer;
  font-size: 12px;
}

.student-report-top-bar button:hover {
  background:#1d4ed8;
}


/*--- Table ---*/
.student-report-table-container {
  overflow-x:auto;
}

.student-report-table-container table {
  width:100%;
  border-collapse:collapse;
  border-radius: 10px;
  overflow: hidden;
}

.student-report-table-container th {
  background: #2d6cdf;
  color: white;
  padding:12px;
  text-align:center;
  border-bottom:1px solid #e2e8f0;
}

.student-report-table-container td {
  padding:15px;
  border-bottom:1px solid #e2e8f0;
  font-size: 14px;
  text-align: center;
}

.student-report-table-container tr:hover {  
  background:#d7f5de;
}


                              /* =========================================
                                          Tablet Landscape (1024px)
                              ========================================= */

@media (max-width:1024px) {

  .student-report-container {
    width:70%;
    padding:30px;
    margin:25px auto;
  }

  .student-report-header h2 {
    font-size:26px;
  }

  .student-report-header p {
    font-size:15px;
  }

  .student-report-cards {
    grid-template-columns:repeat(2,1fr);
    gap:20px;
  }

}

                              /* =========================================
                                          Tablet Portrait (768px)
                              ========================================= */

@media (max-width:768px) {

  .student-report-container {
    width:90%;
    margin:15px;
    padding:20px;
  }

  .student-report-header {
    margin-bottom:20px;
  }

  .student-report-header h2 {
    font-size:22px;
  }

  .student-report-header p {
    font-size:14px;
    line-height:20px;
  }

  /*-- Summary Cards --*/
  .student-report-cards {
    grid-template-columns:1fr;
    gap:15px;
    margin-bottom:20px;
  }

  .student-report-card {
    padding:18px;
  }

  .student-report-card h3 {
    font-size:22px;
  }

  .student-report-card p {
    font-size:14px;
  }

  /*-- Search --*/
  .student-report-top-bar {
    flex-direction:column;
    gap:12px;
  }

  .student-report-top-bar input,
  .student-report-top-bar select,
  .student-report-top-bar button {
    width:100%;
  }

  .student-report-top-bar button {
    border-radius:8px;
  }

  /*-- Table --*/
  .student-report-table-container {
    overflow-x:auto;
  }

  .student-report-table-container table {
    min-width:850px;
  }

  .student-report-table-container th,
  .student-report-table-container td {
    padding:10px;
    font-size:13px;
    white-space:nowrap;
  }

}


                              /* =========================================
                                            Mobile (480px)
                              ========================================= */


@media (max-width:480px) {

  .student-report-container {
    padding:15px;
  }

  .student-report-header h2 {
    font-size:20px;
  }

  .student-report-header p {
    font-size:13px;
  }

  .student-report-card h3 {
    font-size:20px;
  }

  .student-report-card p {
    font-size:13px;
  }

  .student-report-top-bar input,
  .student-report-top-bar select,
  .student-report-top-bar button {
    font-size:13px;
    padding:10px;
  }

}


/* ----------------------------------------------------------------------------------------------------------------------------------- */

                                /* ==========================================
                                            Add User - Admin Side 
                                ========================================== */


.add-user-container {
  width: 75%;
  margin: 40px auto;
  padding: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}


/*--- Header ---*/
.add-user-page-header {
  margin-bottom:25px;
}

.add-user-page-header h2 {
  font-size:30px;
  color:#0c4fbb;
  margin-bottom:6px;
}

.add-user-page-header p {
  color:#15944a;
  font-size:16px;
  letter-spacing: 0.5px;
}


/*--- Card ---*/
.add-user-card {
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(9, 150, 72, 0.541);
}

.add-user-card-header {
  padding:18px 20px;
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
  font-size:18px;
  font-weight:600;
  color:#0c4fbb;
}

.add-user-card-body {
  padding:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px;
  align-items:start;
}


/*--- Form ---*/
.user-form-group {
  margin-bottom:5px;
}

.user-form-group label {
  display:block;
  margin-bottom:8px;
  font-weight:600;
  font-size:15px;
}

.user-form-group input,
.user-form-group select {
  width:100%;
  padding:12px 15px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size:12px;
  background:#fff;
}

.user-form-group input:focus,
.user-form-group select:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}


/*--- Button ---*/
.add-user-submit-btn {
  text-align:right;
  margin-top:20px;
}

.add-user-submit-btn button {
  background:#2563eb;
  color:#fff;
  border:none;
  padding:10px 28px;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;  
}

.add-user-submit-btn button:hover {
  background:#0c771a;
}


                              /* =========================================
                                          Tablet Landscape (1024px)
                              ========================================= */


@media (max-width:1024px) {

  .add-user-container {
    width:70%;
    padding:30px;
    margin:25px auto;
  }

  .add-user-page-header h2 {
    font-size:26px;
  }

  .add-user-page-header p {
    font-size:15px;
  }

  .add-user-card-body {
    gap:25px;
  }

}



                              /* =========================================
                                          Tablet Portrait (768px)
                              ========================================= */


@media (max-width:768px) {

  .add-user-container {
    width:100%;
    margin:15px;
    padding:20px;
    border-radius:10px;
  }

  .add-user-page-header {
    margin-bottom:20px;
  }

  .add-user-page-header h2 {
    font-size:22px;
  }

  .add-user-page-header p {
    font-size:14px;
    line-height:20px;
  }

  /*-- Card --*/
  .add-user-card-header {
    font-size:16px;
    padding:15px;
  }

  .add-user-card-body {
    grid-template-columns:1fr;
    gap:20px;
    padding:15px;
  }

  /*-- Form --*/
  .user-form-group {
    margin-bottom:15px;
  }

  .user-form-group label {
    font-size:14px;
  }

  .user-form-group input,
  .user-form-group select {
    font-size:13px;
    padding:12px;
  }

  /*-- Button --*/
  .add-user-submit-btn {
    text-align:center;
  }

  .add-user-submit-btn button {
    width:100%;
    padding:12px;
    font-size:14px;
  }

}



                              /* =========================================
                                            Mobile (480px)
                              ========================================= */


@media (max-width:480px) {

  .add-user-container {
    padding:15px;
  }

  .add-user-page-header h2 {
    font-size:20px;
  }

  .add-user-page-header p {
    font-size:13px;
  }

  .add-user-card-header {
    font-size:15px;
  }

  .user-form-group label {
    font-size:13px;
  }

  .user-form-group input,
  .user-form-group select {
    font-size:12px;
    padding:10px;
  }

  .add-user-submit-btn button {
    font-size:13px;
  }

}

/* --------------------------------------------------------------------------------------------------------------------------------------- */

                            /* ==========================================
                                      Manage User - Admin Side 
                            ========================================== */


.manage-users-container {
  width: 75%;
  margin: 40px auto;
  padding: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}


/*--- Header ---*/
.manage-users-header {
  margin-bottom:25px;
}

.manage-users-header h2 {
  font-size:30px;
  color:#0c4fbb;
  margin-bottom:6px;
}

.manage-users-header p {
  color:#15944a;
  font-size:16px;
  letter-spacing: 0.5px;
}


/*--- Top Bar ---*/
.manage-users-top-bar {
  display:flex;
  gap:15px;
  margin-bottom:25px;
  flex-wrap:wrap;  
}

.manage-users-search {
  display:flex;
  gap:15px;
}

.manage-users-search input {
  width:500px;
  padding:12px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size: 12px;
}

.manage-users-search input:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

.manage-users-search button {
  background:#2563eb;
  color:#fff;
  border:none;
  padding:12px 20px;
  cursor:pointer;
  border-radius:50px;
  font-size: 12px;
}

.manage-users-search button:hover {
  background:#1d48be;
}

.add-user-btn {
  background:#16a34a;
  color:#fff;
  border:none;
  padding:12px 20px;
  cursor:pointer;
  border-radius:50px;
  font-size: 12px;
}

.add-user-btn:hover {
  background:#0e7c37;
}


/*--- Table ---*/
.manage-users-table-container {
  overflow-x:auto;
}

.manage-users-table-container table {
  width:100%;
  border-collapse:collapse;
  border-radius: 10px;
  overflow: hidden;
}

.manage-users-table-container th { 
  background: #2d6cdf;
  color: white;
  padding:12px;
  text-align:center;
  border-bottom:1px solid #e2e8f0;
}

.manage-users-table-container td {
  padding:14px;
  border-bottom:1px solid #e2e8f0;
  font-size: 14px;
  text-align: center;
}

.manage-users-table-container tr:hover {
  background:#d7f5de;
}


/*--- Role ---*/
.manageUser-role-admin {
  background:#dbeafe;
  color:#1d4ed8;
  padding:5px 12px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
}

.manageUser-role-staff {
  background:#fef3c7;
  color:#b45309;
  padding:5px 12px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
}


/*--- Status ---*/
.manageUser-status-active {
  background:#dcfce7;
  color:#15803d;
  padding:5px 12px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
}


/*--- Action Buttons ---*/
.manageUser-view-btn {
  background:#3b82f6;
  color:white;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size: 12px;
  margin-right:5px;
}

.manageUser-view-btn:hover {
  background:#1b56b6;
}

.manageUser-edit-btn {
  background:#f59e0b;
  color:#fff;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size: 12px;
  margin-right:5px;
}

.manageUser-edit-btn:hover {
  background:#bb7c10;
}

.manageUser-delete-btn {
  background:#dc2626;
  color:#fff;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size: 12px;
}

.manageUser-delete-btn:hover {
  background:#af1616;
}


                              /* =========================================
                                          Tablet Landscape (1024px)
                              ========================================= */


@media (max-width:1024px) {

  .manage-users-container {
    width:70%;
    padding:30px;
    margin:25px auto;
  }

  .manage-users-header h2 {
    font-size:26px;
  }

  .manage-users-header p {
    font-size:15px;
  }

  .manage-users-search input {
    width:350px;
  }

}



                              /* =========================================
                                          Tablet Portrait (768px)
                              ========================================= */


@media (max-width:768px) {

  .manage-users-container {
    width:90%;
    margin:15px;
    padding:20px;
    border-radius:10px;
  }

  .manage-users-header {
    margin-bottom:20px;
  }

  .manage-users-header h2 {
    font-size:22px;
  }

  .manage-users-header p {
    font-size:14px;
    line-height:20px;
  }

  /*-- Top Bar --*/
  .manage-users-top-bar {
    flex-direction:column;
    gap:15px;
  }

  .manage-users-search {
    flex-direction:column;
    width:100%;
    gap:12px;
  }

  .manage-users-search input {
    width:100%;
  }

  .manage-users-search button,
  .add-user-btn {
    width:100%;
    border-radius:8px;
  }

  /*-- Table --*/
  .manage-users-table-container {
    overflow-x:auto;
  }

  .manage-users-table-container table {
    min-width:950px;
  }

  .manage-users-table-container th,
  .manage-users-table-container td {
    padding:10px;
    font-size:13px;
    white-space:nowrap;
  }

  /*-- Status & Role --*/
  .manageUser-role-admin,
  .manageUser-role-staff,
  .manageUser-status-active {
    font-size:12px;
    padding:4px 10px;
  }

  /*-- Buttons --*/
  .manageUser-view-btn,
  .manageUser-edit-btn,
  .manageUser-delete-btn {
    display:block;
    width:100%;
    margin:4px 0;
    font-size:12px;
  }

}


                              /* =========================================
                                            Mobile (480px)
                              ========================================= */


@media (max-width:480px){

  .manage-users-container{
    padding:15px;
  }

  .manage-users-header h2{
    font-size:20px;
  }

  .manage-users-header p{
    font-size:13px;
  }

  .manage-users-search input,
  .manage-users-search button,
  .add-user-btn{
    font-size:13px;
    padding:10px;
  }

}


/* ---------------------------------------------------------------------------------------------------------------------------------------- */

                                  /* =================================
                                          My profile - Admin Side 
                                  ================================= */


.my-profile-container {
  width: 75%;
  margin: 40px auto;
  padding: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}


/*--- Header ---*/
.my-profile-header {
  margin-bottom:25px;
}

.my-profile-header h2 {
  font-size:30px;
  color:#0c4fbb;
  margin-bottom:6px;
}

.my-profile-header p {
  color:#15944a;
  font-size:16px;
  letter-spacing: 0.5px;
}


/*--- Card ---*/
.my-profile-card {
  background:#e1eff7;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #9acab7;
  box-shadow:0 2px 10px rgba(9, 117, 45, 0.267);
  margin-bottom:25px;
}

.my-profile-card-header {
  padding:18px 22px;
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
  font-size:18px;
  font-weight:600;
  color:#0c4fbb;
}

.my-profile-card-body {
  padding:25px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:35px;
}


/*--- Form ---*/
.my-profile-form-group {
  display:flex;
  flex-direction:column;
}

.my-profile-form-group label {
  display:block;
  margin-bottom:8px;
  font-size:14px;
  font-weight:600;
  color:#334155;
}

.my-profile-form-group input {
  width:100%;
  padding:12px 15px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size:12px;
  background:#fff;
}

.my-profile-form-group input:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}


/*--- Button ---*/
.my-profile-submit-btn {
  text-align:right;
  margin-top:25px;
}

.my-profile-submit-btn button {
  background:#2563eb;
  color:#fff;
  border:none;
  padding:12px 30px;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.my-profile-submit-btn button:hover {
  background:#0e8b1e;
}


                              /* =========================================
                                          Tablet Landscape (1024px)
                              ========================================= */


@media (max-width:1024px) {

  .my-profile-container {
    width:70%;
    padding:30px;
    margin:25px auto;
  }

  .my-profile-header h2 {
    font-size:26px;
  }

  .my-profile-header p {
    font-size:15px;
  }

  .my-profile-card-body {
    gap:25px;
  }

}


                              /* =========================================
                                          Tablet Portrait (768px)
                              ========================================= */

@media (max-width:768px) {

  .my-profile-container {
    width:100%;
    margin:15px;
    padding:20px;
    border-radius:10px;
  }

  .my-profile-header {
    margin-bottom:20px;
  }

  .my-profile-header h2 {
    font-size:22px;
  }

  .my-profile-header p {
    font-size:14px;
    line-height:20px;
  }

  /*-- Card --*/
  .my-profile-card {
    margin-bottom:20px;
  }

  .my-profile-card-header {
    font-size:16px;
    padding:15px;
  }

  .my-profile-card-body {
    grid-template-columns:1fr;
    gap:20px;
    padding:15px;
  }

  /*-- Form --*/
  .my-profile-form-group label {
    font-size:14px;
  }

  .my-profile-form-group input {
    padding:12px;
    font-size:13px;
  }

  /*-- Button --*/
  .my-profile-submit-btn {
    text-align:center;
  }

  .my-profile-submit-btn button {
    width:100%;
    padding:12px;
    font-size:14px;
  }

}


                              /* =========================================
                                            Mobile (480px)
                              ========================================= */

@media (max-width:480px) {

  .my-profile-container {
    padding:15px;
  }

  .my-profile-header h2 {
    font-size:20px;
  }

  .my-profile-header p {
    font-size:13px;
  }

  .my-profile-card-header {
    font-size:15px;
  }

  .my-profile-form-group label {
    font-size:13px;
  }

  .my-profile-form-group input { 
    font-size:12px;
    padding:10px;
  }

  .my-profile-submit-btn button {
    font-size:13px;
  }

}


/* ------------------------------------------------------------------------------------------------------------------------------------- */

                                  /* ================================
                                          Setting - Admin side
                                  ================================ */


.settings-container {
  width: 75%;
  margin: 40px auto;
  padding: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}


/*--- Header ---*/
.settings-header {
  margin-bottom:25px;
}

.settings-header h2 {
  font-size:30px;
  color:#0c4fbb;
  margin-bottom:6px;
}

.settings-header p {
  color:#15944a;
  font-size:16px;
  letter-spacing: 0.5px;
}


/*--- Card ---*/
.settings-card {
  background:#e1eff7;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #9acab7;
  box-shadow:0 2px 10px rgba(9, 117, 45, 0.267);
  margin-bottom:25px;
}

.settings-card-header {
  padding:18px 22px;
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
  font-size:18px;
  font-weight:600;
  color:#0c4fbb;
}

.settings-card-body {
  padding:25px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:35px;
}


/*--- Form ---*/
.settings-form-group {
  display:flex;
  flex-direction:column;
}

.settings-form-group label {
  display:block;
  margin-bottom:8px;
  font-size:14px;
  font-weight:600;
  color:#334155;
}

.settings-form-group input,
.settings-form-group select {
  width:100%;
  padding:12px 15px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size:12px;
  background:#fff;
}

.settings-form-group input:focus,
.settings-form-group select:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}


/*--- Button ---*/
.settings-submit-btn {
  text-align:right;
  margin-top:25px;
}

.settings-submit-btn button {
  background:#2563eb;
  color:#fff;
  border:none;
  padding:12px 30px;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.settings-submit-btn button:hover {
  background:#0e8b1e;
}



                              /* =========================================
                                          Tablet Landscape (1024px)
                              ========================================= */

@media (max-width:1024px) {

  .settings-container {
    width:70%;
    padding:30px;
    margin:25px auto;
  }

  .settings-header h2 {
    font-size:26px;
  }

  .settings-header p {
    font-size:15px;
  }

  .settings-card-body {
    gap:25px;
  }

}


                              /* =========================================
                                          Tablet Portrait (768px)
                              ========================================= */

@media (max-width:768px) {

  .settings-container {
    width:100%;
    margin:15px;
    padding:20px;
    border-radius:10px;
  }

  .settings-header {
    margin-bottom:20px;
  }

  .settings-header h2 {
    font-size:22px;
  }

  .settings-header p {
    font-size:14px;
    line-height:20px;
  }

  /*-- Card --*/
  .settings-card {
    margin-bottom:20px;
  }

  .settings-card-header {
    padding:15px;
    font-size:16px;
  }

  .settings-card-body {
    grid-template-columns:1fr;
    gap:20px;
    padding:15px;
  }

  /*-- Form --*/
  .settings-form-group label {
    font-size:14px;
  }

  .settings-form-group input,
  .settings-form-group select {
    padding:12px;
    font-size:13px;
  }

  /*-- Button --*/
  .settings-submit-btn {
    text-align:center;
  }

  .settings-submit-btn button {
    width:100%;
    padding:12px;
    font-size:14px;
  }

}



                              /* =========================================
                                            Mobile (480px)
                              ========================================= */

@media (max-width:480px) {

  .settings-container {
    padding:15px;
  }

  .settings-header h2 {
    font-size:20px;
  }

  .settings-header p {
    font-size:13px;
  }

  .settings-card-header {
    font-size:15px;
  }

  .settings-form-group label {
    font-size:13px;
  }

  .settings-form-group input,
  .settings-form-group select {
    padding:10px;
    font-size:12px;
  }

  .settings-submit-btn button {
    font-size:13px;
  }

}


/* ------------------------------------------------------------------------------------------------------------------------------------------ */

                      /* ===================================
                                View Invoice Details
                      =================================== */

.view-invoice-container {
  width: 75%;
  margin: 40px auto;
  padding: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}

.view-invoice-page-title {
  margin-bottom:25px;
}

.view-invoice-page-title h2 {
  font-size:30px;
  color:#0c4fbb;
  margin-bottom:6px;
}

.view-invoice-details {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
  padding:15px;
}

.viewInvoice-field {
  display:flex;
  flex-direction:column;
}

.viewInvoice-field label {
  color:#0a9638;
  display:block;
  margin-bottom:6px;
  font-weight:600;
  font-size:16px;
  letter-spacing: 0.5px;
}

.viewInvoice-field input,
.viewInvoice-field textarea {
  width:100%;
  padding:12px 15px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size:12px;
  background:#fff;
}

.viewInvoice-field input:focus,
.viewInvoice-field textarea:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

.viewInvoice-field textarea {
  resize:none;
  height:70px;
}

.view-full-width {
  grid-column:1 / span 2;
}

.viewInvoice-button-area {
  margin-top:20px;
  display:flex;
  gap:15px;
}

.viewInvoice-btn {
  padding:10px 28px;
  border:none;
  cursor:pointer;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  letter-spacing: 0.5px;
}

.viewBack-btn {
  background:#555;
  color:#fff;
}

.viewBack-btn:hover {
  background:#3d3c3c; 
}

.viewPdf-btn {
  background:#2563eb;
  color:#fff;
}

.viewPdf-btn:hover {
  background:#0c771a;
}


                                      /* =========================================
                                                  Tablet Landscape (1024px)
                                      ========================================= */

@media (max-width:1024px) {

.view-invoice-container {
    width:70%;
    padding:35px;
}

.view-invoice-page-title h2 {
    font-size:28px;
}

.view-invoice-details {
    gap:20px;
}

}


                                      /* =========================================
                                                Tablet Portrait (768px)
                                      ========================================= */

@media (max-width:768px) {

.view-invoice-container {
    width:95%;
    margin:25px auto;
    padding:25px;
}

.view-invoice-page-title h2 {
    font-size:24px;
}

.view-invoice-details {
    grid-template-columns:1fr;
    gap:18px;
}

.view-full-width {
    grid-column:auto;
}

.viewInvoice-button-area {
    flex-direction:column;
}

.viewInvoice-btn {
    width:100%;
}

}


                                      /* =========================================
                                                      Mobile (480px)
                                      ========================================= */

@media (max-width:480px) {

.view-invoice-container {
    width:96%;
    margin:15px auto;
    padding:18px;
    border-radius:8px;
}

.view-invoice-page-title {
    margin-bottom:18px;
}

.view-invoice-page-title h2 {
    font-size:20px;
}

.view-invoice-details {
    grid-template-columns:1fr;
    gap:15px;
    padding:0;
}

.view-full-width {
    grid-column:auto;
}

.viewInvoice-field label {
    font-size:13px;
}

.viewInvoice-field input,
.viewInvoice-field textarea {
    padding:10px 12px;
    font-size:14px;
}

.viewInvoice-field textarea {
    height:90px;
}

.viewInvoice-button-area {
    flex-direction:column;
    gap:10px;
}

.viewInvoice-btn {
    width:100%;
    padding:12px;
    font-size:15px;
}

}


/* ----------------------------------------------------------------------------------------------------------------------------------- */

                      /* =================================== 
                                Edit Invoice Details 
                      =================================== */

.edit-invoice-container {
  width: 75%;
  margin: 40px auto;
  padding: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}


/*--- Header ---*/
.edit-invoice-header {
  margin-bottom:25px;
}

.edit-invoice-header h2 {
  font-size:30px;
  color:#0c4fbb;
  margin-bottom:6px;
}

.edit-invoice-header p {
  color:#15944a;
  font-size:16px;
  letter-spacing: 0.5px;
}


/*--- Form Layout ---*/
.edit-invoiceForm {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
  padding:15px;
}


/*--- Form Group ---*/
.edit-invoice-form-group {
  display:flex;
  flex-direction:column;
}

.edit-invoice-form-group label {
  color:#0a6e96;
  display:block;
  margin-bottom:6px;
  font-weight:600;
  font-size:16px;
  letter-spacing: 0.5px;
}


/*--- Inputs ---*/
.edit-invoice-form-group input,
.edit-invoice-form-group select,
.edit-invoice-form-group textarea {
  width:100%;
  padding:12px 15px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size:12px;
  background:#fff;
}


/*--- Focus ---*/
.edit-invoice-form-group input:focus,
.edit-invoice-form-group select:focus,
.edit-invoice-form-group textarea:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}


/*--- Readonly Fields ---*/
.edit-invoice-form-group input[readonly] {
  background:#f5f5f5;
  cursor:not-allowed;
}


/*--- Textarea ---*/
.edit-invoice-form-group textarea {
  min-height:70px;
  resize:none;
}


/*--- Full Width ---*/
.edit-full-width {
  grid-column:1 / span 2;
}


/*--- Buttons ---*/
.editInvoice-button-area {
  display:flex;
  gap:15px;
}


/*--- Update Button ---*/
.editInvoice-update-btn {
  background:#28a745;
  color:#fff;
  border:none;
  padding:10px 28px;
  border-radius:8px;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  letter-spacing: 0.5px;
}

.editInvoice-update-btn:hover {
  background:#218838;
}


/*--- Cancel Button ---*/
.editInvoice-cancel-btn {
  background:#dc3545;
  color:#fff;
  border:none;
  padding:10px 28px;
  border-radius:6px;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  letter-spacing: 0.5px;
}

.editInvoice-cancel-btn:hover {
  background:#c82333;
}


                                /* =========================================
                                          Tablet (768px - 1024px)
                                ========================================= */

@media (max-width:1024px) {

.edit-invoice-container {
    width:70%;
    padding:30px;
    margin:25px auto;
}

.edit-invoice-header h2 {
    font-size:26px;
}

.edit-invoice-header p {
    font-size:15px;
}

.edit-invoiceForm {
    gap:20px;
}

.edit-invoice-form-group label {
    font-size:15px;
}

.edit-invoice-form-group input,
.edit-invoice-form-group select,
.edit-invoice-form-group textarea {
    padding:11px 14px;
    font-size:13px;
}

.editInvoice-button-area {
    flex-wrap:wrap;
}

.editInvoice-update-btn,
.editInvoice-cancel-btn {
    padding:10px 22px;
}

}


                                /* =========================================
                                          Mobile (767px and below)
                                ========================================= */

@media (max-width:767px) {

.edit-invoice-container {
    width:100%;
    margin:15px;
    padding:20px;
}

.edit-invoice-header {
    margin-bottom:20px;
}

.edit-invoice-header h2 {
    font-size:22px;
    line-height:30px;
}

.edit-invoice-header p {
    font-size:14px;
}

.edit-invoiceForm {
    grid-template-columns:1fr;
    gap:18px;
    padding:0;
}

.edit-full-width {
    grid-column:auto;
}

.edit-invoice-form-group label {
    font-size:14px;
}

.edit-invoice-form-group input,
.edit-invoice-form-group select,
.edit-invoice-form-group textarea {
    font-size:14px;
    padding:12px;
}

.edit-invoice-form-group textarea {
    min-height:90px;
}

.editInvoice-button-area {
    flex-direction:column;
    gap:12px;
    margin-top:15px;
}

.editInvoice-update-btn,
.editInvoice-cancel-btn {
    width:100%;
    padding:12px;
    font-size:15px;
}

}


/* ------------------------------------------------------------------------------------------------------------------------------------------ */

                            /* ========================================
                                    Table preview & next button 
                            ======================================== */
 
.pagination {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:20px;
}

.pagination button {
  padding:6px 12px;
  border:none;
  background:#0d6efd;
  color:#fff;
  cursor:pointer;
  border-radius:4px;
}

.pagination button:hover {
  background:#084298;
}

.pagination button.active {
  background:#198754;
}

.pagination button:disabled {
  background:#ccc;
  cursor:not-allowed;
}


/* ------------------------------------------------------------------------------------------------------------------------------------------ */

                              /* ======================================
                                      Payment Details View model 
                              ====================================== */

.paymentDetails-modal {
  display:none;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.5);
  z-index:9999;
}

.paymentDetails-modal-content {
  width:700px;
  background:#fff;
  margin:10px auto;
  border-radius:8px;
  overflow:hidden;
}

.paymentDetails-modal-header {
  background:#0e8b3e;
  color:white;
  padding:15px;
  position:relative;
  text-align:center;
}

.paymentDetails-modal-header h2 {
  font-size: 26px;
  letter-spacing: 0.5px;
  margin:0;
}

.pay-view-close-btn {
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  font-size:30px;
  cursor:pointer;
  font-weight:600;
}

.pay-view-close-btn:hover {
  color: #e60909;  
}

.paymentDetails-modal-body {
  padding:20px;
}

.paymentDetails-view-table {
  width:100%;
  border-collapse:collapse;
  border-radius: 10px;
  overflow: hidden;
}

.paymentDetails-view-table td {
  border:1px solid #ddd;
  padding:12px;
}

.paymentDetails-modal-footer {    
  display:flex;
  justify-content:flex-end;
  gap:15px;
  padding:10px;
  border-top:1px solid #ddd;
  background:#b7d4f1;
}

.print-btn {
  background:#0d6efd;
  color:#fff;
  border:none;
  padding:8px 18px;
  font-size:14px;
  border-radius:6px;
  cursor:pointer;
  transition:.3s;
}

.print-btn:hover {
  background:#0b5ed7;
}

.close-modal-btn {
  background:#dc3545;
  color:#fff;
  border:none;
  padding:8px 18px;
  font-size:14px;
  border-radius:6px;
  cursor:pointer;
  transition:.3s;
}

.close-modal-btn:hover {
  background:#bb2d3b;
}


                                      /* =========================================
                                                  Tablet Landscape (1024px)
                                      ========================================= */


@media (max-width:1024px) {

  .paymentDetails-modal-content {
    width:70%;
    margin:30px auto;
  }

}


                                      /* =========================================
                                                Tablet Portrait (768px)
                                      ========================================= */

@media (max-width:768px) {

  .paymentDetails-modal {
    padding:15px;
    overflow-y:auto;
  }

  .paymentDetails-modal-content {
    width:100%;
    margin:20px auto;
    border-radius:10px;
  }

  .paymentDetails-modal-header {
    padding:15px 45px 15px 15px;
  }

  .paymentDetails-modal-header h2 {
    font-size:20px;
  }

  .pay-view-close-btn {
    right:15px;
    font-size:24px;
  }

  .paymentDetails-modal-body {
    padding:15px;
  }

  .paymentDetails-view-table td {
    padding:10px;
    font-size:13px;
    word-break:break-word;
  }

  .paymentDetails-modal-footer {
    flex-direction:column;
    gap:10px;
    padding:15px;
  }

  .print-btn,
  .close-modal-btn {
    width:100%;
    font-size:14px;
    padding:12px;
  }

}


                                      /* =========================================
                                                      Mobile (480px)
                                      ========================================= */

@media (max-width:480px) {

  .paymentDetails-modal-header h2 {
    font-size:18px;
  }

  .paymentDetails-view-table td {
    padding:8px;
    font-size:12px;
  }

  .pay-view-close-btn {
    font-size:22px;
  }

}


/* ---------------------------------------------------------------------------------------------------------------------------------------- */