/* =================================================================
   CONSOLIDATED CSS FILE - EBL Virtual Account Pages
   =================================================================
   Combined styles from cardBillCollection.html, Ctg_port_authority.html,
   npa_information.html, and NSU_Student_Bill_Collection.html
   =================================================================
*/

/* =================================================================
   SHARED ROOT VARIABLES
   =================================================================
*/
:root {
    --ebl-blue: #00539B;
    --ebl-yellow: #FFD200;
    --ebl-green: #00A859;
    --ebl-offWhite: #cadfe075;
    --ebl-light: #f8f9fa;
    --transition-time: 0.5s;
}

/* =================================================================
   SHARED COMPONENTS - Start Button (Used across all pages)
   =================================================================
*/
.start {
    background-color: var(--ebl-yellow) !important;
    padding: 4px;
    width: 100%;
    text-align: left;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    margin-top: 20px;
    transition: all var(--transition-time) ease;
}

.start-button {
    background-color: var(--ebl-blue) !important;
    color: white;
    font-size: 14px;
    border: 1px solid white;
    border-radius: 5px;
    padding: 8px 16px;
    transition: all var(--transition-time) ease;
    transform: translateY(0);
}

.start-button:hover {
    background-color: var(--ebl-green) !important;
    transform: translateY(-2px);
}

/* =================================================================
   SHARED FOOTER STYLES
   =================================================================
*/
.footer {
    background: var(--ebl-yellow) !important;
    text-align: center;
    font-size: 12px;
    border-top: 1px solid #ccc;
    padding: 10px;
    position: relative;
    bottom: 0;
    width: 100%;
}

/* =================================================================
   CARD BILL COLLECTION PAGE STYLES (#cardBill)
   =================================================================
*/
/* ################################################################################################### */

         /*##########################| Card Bill Collection Start "BY-Arna Hoosain id-42" |########################### */

/* ################################################################################################### */
#cardBill body {
      font-family: Arial, sans-serif;
      background-color: var(--ebl-light);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      transition: background-color var(--transition-time) ease;
    }

    .user-info {
      font-size: 14px;
      /* transition: all var(--transition-time) ease; */
    }
#cardBill h4{
    font-size: 24px;
    font-weight: bold;
    color: var(--ebl-blue);
}
    /* Initial center layout */
    #cardBill .center-container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 70vh;
      max-width: 100%;
      /* padding: 20px; */
      transition: all var(--transition-time) ease;
    }

   #cardBill .empty{
    margin-bottom: -2px;

    }

    /* Dropdown layout */
    #cardBill .dropdown-container {
      display: none;
      position: relative;
      /* text-align: center; */
      margin: 20px auto;
      transition: all var(--transition-time) ease;
      opacity: 0;
      transform: translateY(-20px);
    }

    #cardBill .dropdown-container.show {
      
      opacity: 1;
      transform: translateY(0);
    }

    #cardBill .drop{
      display: flex;
      justify-content: space-between;
    }
 #cardBill .dropdown-button {
        background-color: var(--ebl-blue);
        color: white;
        border: none;
        padding: 20px;
        border-radius: 5px;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
        width: 100%;
        text-align: center;
       
      }

      #cardBill .mb-2 .read{
        margin-top: 41px;
      }

    /* .dropdown-button:hover {
      background-color: var(--ebl-green);
      transform: translateY(-2px);
    } */


    #cardBill .dropdown-icon {
      display: inline-block; /* ensures transform works properly */
      transition: transform 0.5s ease; /* smooth rotation */
    }

    /* When collapsed: rotated to the left */
   #cardBill .dropdown-icon.collapsed {
      transform: rotate(-180deg);
    }

    /* When expanded: default ▼ */
    #cardBill .dropdown-icon.expanded {
      transform: rotate(0deg);
    }
    #cardBill .dropdown-content {
      display: none;
      position: relative;
      background-color: white;
      border: 1px solid #3333;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      padding: 20px;
      margin-top: 10px;
      width: 100%;
      opacity: 0;
      /* transform: translateY(-10px); */
     
    }

    #cardBill .dropdown-content.show {
      display: block;
      opacity: 1;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      /* transform: translateY(0); */
    }

    /* Form section */
   #cardBill .form-section {
      border: 1px solid #3333;
      border-radius: 10px;
      padding: 20px;
      background-color: white;
      width: 100%;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      transition: all var(--transition-time) ease;
      transform: scale(1);
    }
      #cardBill .form-section h5{
        font-size: 18px !important;
        font-weight: 500 !important;
        margin-bottom: 20px;
        color: #333 !important;
        border-bottom: 2px solid var(--ebl-blue);
        padding-bottom: 8px;

      }

    /* .form-section:hover {
      transform: scale(1.01);
    } */

   #cardBill .form-section.center-mode {
      margin: 0 auto;
    }

   #cardBill .check{
      background-color: var(--ebl-blue);
      color: #fff;
      /* transition: all var(--transition-time) ease; */
    }

    #cardBill .btn-outline-secondary.check:hover{
      background-color: var(--ebl-green);
      color: white !important;
      /* transform: translateY(-1px); */
    }

    #accountHolderName, #accountHolderNameDropdown {
      background-color: var(--ebl-offWhite);
      resize: none;
      /* transition: all var(--transition-time) ease; */
    }

    /* Table section */
   #cardBill .table-section {
      background-color: #fff;
      border: 1px solid #3333;
      border-radius: 10px;
      max-width: 100%;
      padding: 20px;
      margin: 20px auto;
      display: none;
      opacity: 0;
      /* transform: translateY(20px); */
      /* transition: all var(--transition-time) ease; */
    }

    #cardBill .table-section.show {
      display: block;
      opacity: 1;
      /* transform: translateY(0); */
    }
    #cardBill .table-section .list{
      font-size: 18px;
      color: #333;
    }

   #cardBill .section-title-debet {
      text-align: center;
      font-weight: bold;
      margin: 20px 0;
      color: var(--ebl-blue);
      /* transition: all var(--transition-time) ease; */
    }

   #cardBill .form-control:disabled {
      background-color: #e9ecef;
    }

    /* .btn {
      transition: all var(--transition-time) ease;
    } */

   #cardBill .btn-primary {
      background-color: var(--ebl-blue) !important;
      padding: 12px 20px;
      font-size: 18px;
      color: white;
      
      /* border-color: var(--ebl-blue) !important; */
    }

   #cardBill .btn-secondary {
      background-color: var(--ebl-yellow) !important;
      border-color: var(--ebl-yellow) !important;
      color: black !important;
    }

   #cardBill .refresh{
      background-color: var(--ebl-green);
      color: white !important;
      border: none !important;
      padding: 12px 20px;
      font-size: 18px;
      color: white;
      margin-left: 5px;
    }

   #cardBill .form-control{
      border: 1px solid #3333 !important;
      padding: 12px;
      font-size: 14px;
      color: #333;
      /* transition: all var(--transition-time) ease; */
    }
     #cardBill .col-md-6 label{
      font-size: 18px;
     }

   #cardBill .form-control:focus {
      transform: scale(1.01);
      box-shadow: 0 0 0 0.25rem rgba(0, 83, 155, 0.25);
    }

   #cardBill .table-primary {
      background-color: var(--ebl-green) !important;
      color: white;
    }

    #cardBill table.table{
      border-radius: 5px;
    }
   #cardBill table.table, 
   #cardBill table.table th, 
   #cardBill  table.table td {
      border: 1px solid #3333 !important;

      /* transition: all var(--transition-time) ease; */
    }

    /* table.table tr {
      transition: all var(--transition-time) ease;
    } */

    #cardBill table.table tr:hover {
      background-color: rgba(0, 83, 155, 0.1);
      /* transform: translateX(5px); */
    }

   #cardBill .table th{
      background: var(--ebl-blue) !important;
      color: white !important;
      text-align: center;
    }

    #cardBill .pagination-sm .page-item{
      border: 1px solid #3333 !important;
      border-radius: 5px;
      transition: all linear var(--transition-time) ease;
    }

  #cardBill  .page-link {
      color: var(--ebl-blue) !important;
      transition: all linear var(--transition-time) ease;
    }

   #cardBill .page-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* Footer
    .footer {
      background: var(--ebl-yellow) !important;
      text-align: center;
      font-size: 12px;
      border-top: 1px solid #ccc;
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 10px;
      transition: all linear var(--transition-time) ease;
    } */

    /* Responsive adjustments */
    @media (max-width: 768px) {
    #cardBill  .dropdown-container {
        margin: 20px 10px;
      }
      
    #cardBill  .dropdown-content {
        padding: 15px;
      }
    }
/* =================================================================
   CHITTAGONG PORT AUTHORITY PAGE STYLES (#ctgPort)
   =================================================================
*/
#ctgPort body{
    font-family: Arial, sans-serif;
    background-color: var(--ebl-light);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    transition: background-color var(--transition-time) ease;
}
#ctgPort h4{
    font-size: 24px;
    font-weight: bold;
    color: var(--ebl-blue);
}

#ctgPort .card-header-blue {
    /* background-color: var(--ebl-blue); */

    margin-bottom: 40px;
    color: #333;
    border-bottom: 2px solid #00539B;
    border-radius: none !important;
    padding-bottom: 12px;
    padding-left: 22px;
    padding-right: 20px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    /* transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
}

#ctgPort .card-header-blue h5{
    font-size: 18px;
    font-weight: bold;
    color: #333;
}
#ctgPort .card-header-blue1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #ffffff;
    border-bottom: 2px solid var(--ebl-blue);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 12px;
    border-radius: 5px 5px 0px 0px;
    background: var(--ebl-blue);
    /* transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
}

#ctgPort .dropdown-arrow {
    transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 18px;
    margin-left: 8px;
    transform-origin: center;
}

#ctgPort .dropdown-arrow.rotated {
    transform: rotate(-180deg);
}

#ctgPort .collapsible-content {
    /* max-height: 1500px; */
    max-width: 100%;
    overflow: hidden;
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 1;
    transform: translateY(0);
}

#ctgPort .collapsible-content.collapsed {
    max-height: 0;
    overflow: hidden;
    padding: 0 !important;
    opacity: 0;
    transform: translateY(-15px);
}

#ctgPort #searchSection {
    border-radius: 5px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* #ctgPort #searchSection:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
} */

/* #ctgPort #searchSection .card-header-blue {
} */

#ctgPort #portSection, 
#ctgPort #paymentSection {
    border-radius: 5px !important;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#ctgPort #portSection.show, 
#ctgPort #paymentSection.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#ctgPort #portSection .card-header-blue, 
#ctgPort #paymentSection .card-header-blue {
    border-radius: 5px 5px 0 0;
}

#ctgPort #portSection:hover, 
#ctgPort #paymentSection:hover {
    transform: translateY(-2px) scale(1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

#ctgPort .search-btn, 
#ctgPort .check-btn, 
#ctgPort .refresh-btn {
    padding: 6px 10px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    margin-right: 5px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#ctgPort .search-btn, 
#ctgPort .check-btn {
    background-color: var(--ebl-blue);
}

/* #ctgPort .search-btn:hover, 
#ctgPort .check-btn:hover {
    background-color: #0f4c75;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 93, 139, 0.3);
} */

#ctgPort .refresh-btn {
    background-color: var(--ebl-green);
}

/* #ctgPort .refresh-btn:hover {
    background-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
} */

#ctgPort .readonly-field {
    background-color: rgba(89, 114, 114, 0.404);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#ctgPort .form-control, 
#ctgPort .form-select {
    width: 100%;
    font-size: 14px;
    padding: 6px;
    border: 1px solid #3333;
    border-radius: 5px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#ctgPort label{
  font-size: 18px;
  color: #333;
}

#ctgPort .form-control:focus, 
#ctgPort .form-select:focus {
    border-color: var(--ebl-blue);
    box-shadow: 0 0 0 0.2rem rgba(30, 93, 139, 0.25);
    transform: translateY(-1px);
}

#ctgPort .error-msg {
    color: red;
    font-size: 12px;
    display: none;
    margin-top: 4px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#ctgPort .error-msg.show {
    animation: ctgPortShake 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes ctgPortShake {
    0%, 20%, 40%, 60%, 80% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
}

#ctgPort .signature-placeholder1 img {
    width: 100px;
    height: 80px;
}





@keyframes ctgPortSlideIn {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#ctgPort .slide-in {
    animation: ctgPortSlideIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#ctgPort .collapsible-content .row {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#ctgPort .collapsible-content .mb-2 {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#ctgPort .collapsible-content .mb-3 {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* =================================================================
   NPA INFORMATION PAGE STYLES (#npaInfo) - UPDATED WITH INLINE STYLES
   =================================================================
*/
/* Make buttons smaller but preserve brand colors and white text */


#npaInfo body{
      font-family: Arial, sans-serif;
      background-color: var(--ebl-light);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      transition: background-color var(--transition-time) ease;
}

#npaInfo h4{
    font-size: 24px;
    font-weight: bold;
    color: var(--ebl-blue);
}

#npaInfo .small-buttons .ebl-btn {
  padding: 6px 12px;       /* Reduce size */
  font-size: 0.9rem;       /* Slightly smaller text */
  color: #ffffff;          /* White text */
  border: none;
  border-radius: 6px;
}

/* Apply your existing brand colors from CSS variables */
#npaInfo .small-buttons .search-btn {
  background-color: var(--ebl-blue);
  font-size: 18px;
  padding: 6px 10px;
}

#npaInfo .small-buttons .refresh-btn {
  background-color: var(--ebl-green);
  font-size: 18px;
  padding: 6px 10px;
}

   #npaInfo .card-header {
      background-color: var(--ebl-blue);
      color: white;
      font-weight: bold;
      padding: 10px 15px;
      font-size: 18px;
      border-bottom: none;
    }

   #npaInfo .section-header {
      background-color: var(--ebl-blue);
      color: white;
      font-weight: bold;
      padding: 10px 15px;
      font-size: 14px;
      border-bottom: none;
      margin-bottom: 15px;
      border-radius: 5px;
    }

  #npaInfo  .hidden {
      display: none !important;
    }

#npaInfo .search-container, #nsuBill .search-container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    /* max-width: 600px; */
    margin: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #3333;
}

    #npaInfo .search-container .form-title{
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
      border-bottom: 2px solid var(--ebl-blue);
      padding-bottom: 8px;
    }

   #npaInfo .form-label {
    
    font-size: 18px;
    color: #333;
   }

   #npaInfo .card-body label{
      font-size: 18px;
      color: #333;
      margin-bottom: 5px;
   }
   
   #npaInfo .card-body .form-control{
      font-size: 14px;
      color: #333;
      /* background-color: rgba(89, 114, 114, 0.404); */
   }

  #npaInfo .npa-title{
    text-align: center;
    font-weight: bold;
    margin: 20px 0;
    color: var(--ebl-blue);
  }
   #npaInfo .npa-content {
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      margin-top: 30px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

 /* #npaInfo #pensionBox {
  width: 1500px;  increased width 
} */

   #npaInfo .section-content {
      background-color: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
      border: 1px solid #3333;
    }

  #npaInfo  fieldset.form-section {
      margin-bottom: 30px;
      border: none;
      padding: 0;
    }

  #npaInfo .form-control{
    color: #333;
    border-radius: 5px;
    font-size: 14px;
    padding: 12px;
    border: 1px solid #3333;
  }
   #npaInfo .form-group,
    #npaInfo .form-field,
    #npaInfo .input-group {
      padding-bottom: 20px;
    }

   #npaInfo .toggle-header {
      text-align: left;
      margin-bottom: 10px;
      margin-left: auto;
      margin-right: auto;
      cursor: pointer;
      border-radius: 10px;
      transition: background-color 0.3s ease;
    }
   #npaInfo .toggle-header .title-search{
    font-size: 24px;
   }
   #npaInfo .toggle-header:hover {
      background-color: var(--ebl-blue);
    }

    #npaInfo .dropdown-button {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding-top: 10px;
      padding-bottom: 10px;
    }

  #npaInfo  .toggle-icon {
      font-size: 14px;
      background: none;
      border: none;
      cursor: pointer;
      color: white;
      transition: all linear 0.3s ease;
    }

  #npaInfo  .toggle-icon.rotated {
      transform: rotate(180deg);
      transition: all linear 0.4s ease;
    }

   #npaInfo .signature-image-container img {
      width: 100px;
      height: auto;
    }
  





    /* =================================================================
   NPA INFORMATION PAGE STYLES (#npaInfo) - UPDATED WITH INLINE STYLES
   =================================================================
*/
#npa_company body {
      font-family: Arial, sans-serif;
      background-color: var(--ebl-light);
      margin: 0;
      padding: 20px;
      min-height: 100vh;
      transition: background-color var(--transition-time) ease;
    }

 



   #npa_company h4 {
      font-size: 24px;
      font-weight: bold;
      color: var(--ebl-blue);
      text-align: center;
      margin-bottom: 30px;
    }

    /* Initial expanded section */
   #npa_company .initial-container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 50vh;
      transition: all var(--transition-time) ease;
      opacity: 1;
      transform: translateY(0);
    }

   #npa_company .initial-container.hide {
      opacity: 0;
      transform: translateY(-20px);
      display: none;
    }

    /* Collapsible sections container */
   #npa_company .collapsible-container {
      display: none;
      opacity: 0;
      transform: translateY(20px);
      transition: all var(--transition-time) ease;
      max-width: 1200px;
      margin: 0 auto;
    }

   #npa_company .collapsible-container.show {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }

    /* Form section styling */
   #npa_company .form-section {
      border: 1px solid #3333;
      border-radius: 10px;
      padding: 20px;
      background-color: white;
      width: 100%;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      transition: all var(--transition-time) ease;
      margin-bottom: 20px;
    }

   #npa_company .form-section h5 {
      font-size: 18px !important;
      font-weight: 500 !important;
      margin-bottom: 20px;
      color: #333 !important;
      border-bottom: 2px solid var(--ebl-blue);
      padding-bottom: 8px;
    }

    /* Collapsible panel styling */
   #npa_company .collapsible-panel {
      margin-bottom: 20px;
    }

   #npa_company .panel-header {
      background-color: var(--ebl-blue);
      color: white;
      border: none;
      padding: 15px 20px;
      border-radius: 5px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      width: 100%;
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all var(--transition-time) ease;
    }

   /* #npa_company .panel-header:hover {
      background-color: var(--ebl-green);
    } */
    #npa_company .calendar-icon {
      position: absolute;
      right: 20px;
      top: 45.5px; /* adjust depending on label and input height */
      width: 20px;
      height: 20px;
      cursor: pointer;
      pointer-events: none; /* optional: stops interfering with input clicks */
    }

   #npa_company .panel-icon {
      transition: transform var(--transition-time) ease;
    }

   #npa_company .panel-icon.collapsed {
      transform: rotate(-90deg);
    }

   #npa_company .panel-icon.expanded {
      transform: rotate(0deg);
    }

   #npa_company .panel-content {
      display: none;
      background-color: white;
      border: 1px solid #3333;
      border-top: none;
      border-radius: 0 0 10px 10px;
      padding: 20px;
      opacity: 0;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

   #npa_company .panel-content.show {
      display: block;
      opacity: 1;
    }

    /* Form controls */
   #npa_company .form-control, .form-select {
      border: 1px solid #3333 !important;
      border-radius: 5px;
      padding: 6px;
      font-size: 14px;
      color: #333;
      transition: all var(--transition-time) ease;
    }

   #npa_company .form-control:focus, .form-select:focus {
      transform: scale(1.01);
      box-shadow: 0 0 0 0.25rem rgba(0, 83, 155, 0.25);
      border-color: var(--ebl-blue) !important;
    }

   #npa_company .form-label {
      font-size: 18px;
      font-weight: normal;
      color: #333;
      margin-bottom: 5px;
    }

    /* Button styling */
   #npa_company .btn-primary {
      background-color: var(--ebl-blue) !important;
      border-color: var(--ebl-blue) !important;
      padding: 12px 20px;
      font-size: 16px;
      color: white;
      transition: all var(--transition-time) ease;
    }

   /* #npa_company .btn-primary:hover {
      background-color: var(--ebl-green) !important;
      border-color: var(--ebl-green) !important;
      transform: translateY(-2px);
    } */

   #npa_company .btn-secondary {
      background-color: var(--ebl-yellow) !important;
      border-color: var(--ebl-yellow) !important;
      color: black !important;
      padding: 12px 20px;
      font-size: 16px;
      transition: all var(--transition-time) ease;
    }

   /* #npa_company .btn-secondary:hover {
      background-color: #e6bd00 !important;
      border-color: #e6bd00 !important;
      transform: translateY(-2px);
    } */

   #npa_company .search-btn {
      background-color: var(--ebl-blue);
      color: white;
      border: none;
      padding: 6px 10px;
      border-radius: 5px;
      font-size: 18px;
      cursor: pointer;
      transition: all var(--transition-time) ease;
    }

   #npa_company .search-btn:hover {
      background-color: var(--ebl-green);
      transform: translateY(-2px);
    }

    /* Signature area */
   #npa_company .signature-area {
      border: 2px dashed #ccc;
      border-radius: 5px;
      padding: 40px;
      text-align: center;
      background-color: #f9f9f9;
      min-height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      color: #999;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
     #npa_company .collapsible-container {
        margin: 0 10px;
      }
      
     #npa_company .panel-content {
        padding: 15px;
      }

     #npa_company .form-section {
        padding: 15px;
      }
    }

    /* PDF optimization */
    @media print {
     #npa_company body {
        margin: 0;
        padding: 10px;
      }
      
     #npa_company .collapsible-container {
        max-width: none;
      }
      
     #npa_company .panel-content {
        display: block !important;
        opacity: 1 !important;
      }
    }

    /* Loading animation for refresh */
   #npa_company .refresh-loading {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 20px;
      border-radius: 10px;
      z-index: 9999;
      display: none;
    }

   #npa_company .refresh-loading.show {
      display: block;
    }


/* =================================================================
   NSU STUDENT BILL COLLECTION PAGE STYLES (#nsuBill) - UPDATED WITH INLINE STYLES
   =================================================================
*/
#nsuBill body {
    font-family: Arial, sans-serif;
    background-color: var(--ebl-light);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    transition: background-color var(--transition-time) ease;
}

/* NSU Page Title */
#nsuBill .text-center {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--ebl-blue);
}

#nsuBill h4{
    font-size: 24px;
    font-weight: bold;
    color: var(--ebl-blue);
}

/* NSU Form part */
#nsuBill .separation  {
    padding: 10px 15px;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--ebl-blue);
    border-radius: 6px;
}

#nsuBill  .card-header {
    padding: 10px 15px;
}


#nsuBill .card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--ebl-blue);
}


#nsuBill .card-body {
    padding: 15px;
    border-radius: 6px;
}

#nsuBill .right-section {
    margin-top: 55px;
}

/* NSU Form Control Fix */
#nsuBill select.form-control,
#nsuBill input.form-control,
#nsuBill textarea.form-control {
    appearance: auto !important;
    font-size: 14px;
    border-radius: 5px;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #3333 !important;
    color: #333;
}
#nsuBill label{
  font-size: 18px ;
  color: #333;
  margin-bottom: 5px;
}
/* NSU Disabled input */
#nsuBill .form-control:disabled {
    background-color: #e9ecef;
}

/* NSU Textarea */
#nsuBill textarea {
    resize: none;
}

/* NSU Cards */
#nsuBill .card {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.03);
    border-radius: 6px;
    margin-bottom: 20px;
    width: 100%;
}

#nsuBill .card-header {
    background-color: var(--ebl-light) !important;
    border-bottom: 1px solid #dee2e6;
}

#nsuBill .card-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ebl-blue);
}

/* NSU Buttons */
#nsuBill .btn {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

#nsuBill .btn-primary {
    background-color: var(--ebl-blue) !important;
    border-color: var(--ebl-blue) !important;
    color: white;
}

#nsuBill .search {
    background-color: var(--ebl-blue) !important;
    color: white;
    padding: 6px 10px;
    margin-right: 5px;
    border-radius: 5px;
    border: none;
    font-size: 18px;
}

#nsuBill .refresh {
    background-color: var(--ebl-green) !important;
    color: white;
    padding: 6px 10px;
    border-radius: 5px;
    border: none;
    font-size: 18px;
}

#nsuBill .check {
    background-color: var(--ebl-blue) !important;
    color: white;
}

/* NSU Input with icon */
#nsuBill .input-with-icon {
    position: relative;
}

#nsuBill .input-with-icon input {
    padding-right: 36px;
}

#nsuBill .input-with-icon button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

#nsuBill .input-with-icon img {
    width: 20px;
    height: 20px;
}

/* NSU Signature image */
#nsuBill .img-thumbnail {
    border: none;
    background-color: transparent;
    padding: 0;
    object-fit: contain;
    width: 150px;
    height: 150px;
}

/* NSU Table styles */
#nsuBill .table-primary {
    background-color: var(--ebl-green) !important;
    color: white;
}

/* #nsuBill table.table,
#nsuBill table.table th,
#nsuBill table.table td {
    border: 1px solid #797474b4 !important;
} */

#nsuBill .table th {
    background: var(--ebl-blue) !important;
    color: white !important;
    text-align: center;
}

/* NSU Pagination */
#nsuBill .pagination-sm .page-item {
    border: 1px solid #797474b4 !important;
    border-radius: 5px;
}

#nsuBill .page-link {
    color: var(--ebl-blue) !important;
}

/* NSU Section padding */
#nsuBill .form-section,
#nsuBill .table-section {
    padding: 20px;
    border: 1px solid #3333;
    border-radius: 10px;
    margin-bottom: 20px;
}

#nsuBill .form-section {
    margin-right: 24px;
    margin-left: 45px;
}

#nsuBill .table-section {
    background-color: #fff;
}

/* NSU New Section Styles */

#nsuBill .student-info-header,
#nsuBill .payment-header {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--ebl-blue);
    padding-bottom: 12px;
    background: var(--ebl-blue);
    border-radius: 5px 5px 0px 0px;
}

#nsuBill .student-info-header h5,
#nsuBill .payment-header h5 {
    font-size: 18px;
    color: #ffffff;
}
#nsuBill .search-header{

    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    font-size: 18px;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid var(--ebl-blue);
    padding-bottom: 12px;
    
}
#nsuBill .search-header .card-title{
    color: #333;
    font-size: 18px;
    font-weight: bold;
}

#nsuBill .dropdown-arrow {
    transition: transform 0.3s ease;
    position: absolute;
    right: 15px;
    color: white !important;
}

#nsuBill .dropdown-arrow.collapsed {
    transform: rotate(-90deg);
}

#nsuBill #search-parameters,
#nsuBill #student-info-content,
#nsuBill #payment-content {
    transition: all 0.3s ease;
    overflow: hidden;
}

#nsuBill .section-spacing {
    margin-top: 20px;
}

#nsuBill .readonly-textarea {
    background-color: var(--ebl-light);
    cursor: not-allowed;
}

#nsuBill .calenderAr{
    position: absolute;
    top: 50%;
    margin-left: 470px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

/* Initially disable pointer and dropdown for Search Parameter */
#nsuBill .search-header.non-collapsible {
    cursor: default; /* No pointer icon */
    margin-bottom: 20px;
    border-bottom: 2px solid var(--ebl-blue);
    padding-bottom: 12px;
}

#nsuBill .search-header.non-collapsible .dropdown-arrow {
  display: none; /* Hide ▼ icon */
}

/* NSU Responsive */
@media (max-width: 768px) {
    #nsuBill .content-header,
    #nsuBill .navbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left;
    }

    #nsuBill .content-header img,
    #nsuBill .navbar img {
        margin-top: 10px;
        width: 200px;
    }

    #nsuBill .card-body .form-group {
        margin-bottom: 12px;
    }

    #nsuBill #right-section {
        margin-top: 20px;
    }
}
@media (min-width: 1200px) {
  #nsuBill .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  #nsuBill .col-md-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }

  #nsuBill .col-md-10 {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }

  #nsuBill .col-lg-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
}

/* Large (>=992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #nsuBill .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  #nsuBill .col-md-10 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #nsuBill .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #nsuBill .checkA input.form-control {
    width: 100% !important;
  }

  #nsuBill .form-group.col-md-6 {
    width: 100%;
  }
}

/* Medium (>=768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  #nsuBill .col-md-6,
  #nsuBill .col-md-10,
  #nsuBill .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #nsuBill .checkA input.form-control {
    width: 100% !important;
  }

  #nsuBill #chequeIssueDate {
    width: 100% !important;
  }

  #nsuBill .calenderAr {
    margin-left: 0px;
    right: 10px;
    top: 35px;
  }
}

/* Small (<=767.98px) */
@media (max-width: 767.98px) {
  #nsuBill .col-md-6,
  #nsuBill .col-md-10,
  #nsuBill .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #nsuBill .checkA input.form-control {
    width: 100% !important;
  }

  #nsuBill #chequeIssueDate {
    width: 100% !important;
  }

  #nsuBill .calenderAr {
    position: absolute;
    top: 35px;
    right: 10px;
    margin-left: 0 !important;
  }

  #nsuBill .readonly-textarea {
    height: 100px;
  }
}

/* =================================================================
   ADDITIONAL KEYFRAMES AND ANIMATIONS
   =================================================================
/* 


/* =================================================================
   PRINT STYLES
   =================================================================
*/
 


/* ################################################################################################### */

         /*##########################| US Sweep Start "BY-Rabeya Tarin id-22" |########################### */

/* ################################################################################################### */

#sweep body{
      font-family: Arial, sans-serif;
      background-color: var(--ebl-light);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      transition: background-color var(--transition-time) ease;
}

#sweep .content-wrapper {
  flex: 1;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

#sweep .main-title {
  text-align: center;
  color: var(--ebl-blue);
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

#sweep .sweep-container {
  margin-bottom: 30px;
}

#sweep .sweep-details {
  background: white;
  border: 1px solid #3333;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  max-width: 100%;
}

#sweep .sweep-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--ebl-blue);
  padding: 20px;
  background: var(--ebl-blue);
  border-radius: 10px 10px 0px 0px;
}

#sweep .sweep-header h3 {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

#sweep .collapse-arrow {
  font-size: 14px;
  color: white;
  font-weight: normal;
  transition: color 0.2s ease;
}

#sweep .sweep-header.collapsible {
  cursor: pointer;
  user-select: none;
}

/* #sweep .sweep-header.collapsible:hover .collapse-arrow {
  color: #3333;
} */

#sweep .sweep-content {
  transition: all 0.3s ease;
}

#sweep .form-label {
  font-weight: normal;
  color: #333 !important;
  margin-bottom: 5px;
  /* display: block; */
  font-size: 18px !important; 

}

#sweep .form-control, .form-select {
  border: 1px solid #3333;
  padding: 6px;
  font-size: 14px; 
  color: #333;
  width: 100%;
  box-sizing: border-box;
  background: white;
}

#sweep .form-group {
  margin-bottom: 15px;
}

/* calender */
/* You can add this to your main CSS file */
#sweep .calendar-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #333;
  cursor: pointer;
  pointer-events: auto; /* Allows click */
}


#sweep .row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

#sweep .col-md-6 {
  flex: 1;
}

#sweep .col-md-4 {
  flex: 1;
}

#sweep .col-md-8 {
  flex: 2;
}

#sweep .input-group {
  position: relative;
  display: flex;
  align-items: stretch;
}

#sweep .input-group-append {
  display: flex;
  align-items: center;
}

#sweep .input-group-text {
  background-color: #e9ecef;
  border: 1px solid #3333;
  border-left: 0;
  padding: 8px 12px;
  color: #0000;
  cursor: pointer;
  transition: background-color 0.2s ease;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sweep .input-group-text:hover {
  background-color: #dee2e6;
  color: var(--ebl-blue);
}

#sweep .input-group-text:active {
  background-color: #d1ecf1;
  color: var(--ebl-blue);
}

#sweep .input-group-text i {
  pointer-events: none;
}

 #sweep .btn {
  background: var(--ebl-blue);
  border: 1px solid var(--ebl-blue);
  padding: 12px 20px;
  color: white;
  font-size: 18px;
  cursor: pointer;
  margin-right: 10px;
}


 #sweep .btn-secondary {
  background: var(--ebl-green) !important;
  border: 1px solid var(--ebl-green) !important;
  padding: 12px 20px;
  color: white;
  font-size: 18px;
  cursor: pointer;
  margin-right: 10px;
}


.error-popup {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 15px 20px;
  border-radius: 5px;
  /* font-size: 14px; */
  z-index: 1000;
  display: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

#sweep .table-container {
  margin-top: 30px;
}

#sweep .sweep-table {
  background: #f8f9fa;
  border: 1px solid #3333;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  max-width: 100%;
}

#sweep .sweep-table .sweep-table-head{
    font-size: 18px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--ebl-blue);
    padding-bottom: 8px;
}
#sweep .sweep-table h3 {
  color: #333;
  /* font-size: 16px; */
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

#visa .check-button-account {
    background: var(--ebl-blue);
    border: 1px solid var(--ebl-blue);
    border-radius: 5px 5px 5px 5px;
    padding: 7px 16px;
    color: white;
    font-size: 14px;
    cursor: pointer;
} 



#sweep .table {
  /* font-size: 14px; */
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 0;
}

#sweep .table thead th {
  background-color: var(--ebl-blue);
  color: #fff;
  font-size: 14px !important;
  text-align: center;
  padding: 10px 8px;
  border: 1px solid #ccc;
  font-weight: bold;
}

#sweep .table tbody td {
  padding: 8px;
  text-align: center;
  border: 1px solid #3333;
  /* font-size: 14px; */
  background: white;
}

#sweep .table-bordered {
  border: 1px solid #3333;
}

.status-failed {
  color: #dc3545;
  font-weight: bold;
}

/* .footer {
  background: #FFD200;
  border-top: 1px solid #ddd;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  color: #333;
} */

#sweep .input-group .form-control {
  border-right: 0;
}

#sweep .input-group-text {
  background-color: #fff;
  border-left: 0;
  cursor: pointer;
  height: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 1px solid #3333;
  border-left: none;
}

#sweep .input-group {
  display: flex;
  width: 100%;
}

#sweep .input-group-append {
  display: flex;
  align-items: center;
}

.fa-calendar-alt {
  font-size: 18px;
  color: #555;
  /* background-color: #333; */

}

@media (max-width: 768px) {
  #sweep .content-wrapper {
    padding: 10px;
  }
  
  #sweep .row {
    flex-direction: column;
    gap: 0;
  }
  
  #sweep .table {
    font-size: 12px;
  }
  
  #sweep .table thead th,
  #sweep .table tbody td {
    padding: 6px 4px;
  }
}

/* ################################################################################################### */

         /*##########################| US Sweep End " BY-Rabeya Tarin id-22" |########################### */

/* ################################################################################################### */



/* ################################################################################################### */

         /*##########################| US Visa Start " BY-Rabeya Tarin id-22" |########################### */

/* ################################################################################################### */


#visa body{
      font-family: Arial, sans-serif;
      background-color: var(--ebl-light);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      transition: background-color var(--transition-time) ease;
}

#visa .content-wrapper {
  flex: 1;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

#visa .main-title {
  text-align: center;
  color: var(--ebl-blue);
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
}

#visa .search-container {
  margin-bottom: 30px;
}

#visa .search-parameter {
  background: #f8f9fa;
  border: 1px solid #3333;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  max-width: 100%;
}

#visa .search-parameter-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--ebl-blue);
  padding-bottom: 8px;
}

#visa .search-parameter-title h3 {
  color: #333;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

#visa .collapse-arrow {
  font-size: 14px;
  color: white;
  font-weight: normal;
  transition: color 0.2s ease;
}

#visa .search-parameter-title.collapsible {
  cursor: pointer;
  user-select: none;
}

#visa .search-parameter-title.collapsible:hover .collapse-arrow {
  color: #ccc;
}

#visa .search-parameter-content {
  transition: all 0.3s ease;
}

#visa .section-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--ebl-blue);
  padding: 20px;
  background: var(--ebl-blue);
  border-radius: 10px 10px 0px 0px;
}

#visa .payment-container {
  margin-top: 20px;
}

#visa .payment-section {
  background: #f8f9fa;
  border: 1px solid #3333;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  max-width: 100%;
}

#visa .form-label {
  font-weight: normal;
  color: #333 !important;
  margin-bottom: 10px;
  display: block;
  font-size: 18px;
}

#visa .form-control, .form-select {
  border: 1px solid #3333;
  padding: 6px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  background: white;
}


/* calender */
/* You can add this to your main CSS file */
#visa .calendar-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #333;
  cursor: pointer;
  pointer-events: auto; /* Allows click */
}

#visa .form-controlreadonly:read-only {
  background-color: rgba(89, 114, 114, 0.404);
  border: #3333;
  color: #333;
  padding: 20px 12px;  /* This line was added */
  width: 100%;
  border-radius: 5px;
  
}

#visa .form-group {
  margin-bottom: 15px;
}

#visa .btn {
  background-color: var(--ebl-blue);
  padding: 12px 20px;
  color: white;
  font-size: 18px;
  cursor: pointer;
  margin-right: 10px;
}


#visa .btn-secondary {
  background: var(--ebl-green);
  border: 1px solid var(--ebl-green);
  color: white;
  font-size: 18px;
  cursor: pointer;
  margin-right: 10px;
}

#visa .check-button {
  background: var(--ebl-blue);
  border: 1px solid var(--ebl-blue);
  border-radius: 5px 5px 5px 5px;
  padding: 12px 20px;
  color: white;
  font-size: 14px;
  cursor: pointer;
} 

 /* #visa .check-button:hover {
  background: var(--ebl-blue);
} */

#visa .signature-container {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  background-color: white;
  margin-bottom: 10px;
  border-radius: 5px;
}

/* .signature-placeholder {
  font-size: 30px;
} */

#visa .form-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

#visa .form-row .form-group {
  flex: 1;
}

#visa .form-row .form-group:last-child {
  flex: 0 0 auto;
}

#visa .error-popup {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 15px 20px;
  border-radius: 5px;
  font-size: 14px;
  z-index: 1000;
  display: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* .footer {
  background: #FFD200;
  border-top: 1px solid #ddd;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  color: #333;
} */

/* .row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.col-md-6 {
  flex: 1;
}

.col-md-12 {
  flex: 1;
}

.col-md-4 {
  flex: 1;
}

.col-md-8 {
  flex: 2;
} */

#visa .signature-upload-container {
  position: relative;
}

#visa .signature-box {
    width: 100%;
    height: 120px;
    border: 1px solid #3333;
    border-radius: 5px;
    background-color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    
}

#visa .signature-box:hover {
  border-color: #00539B;
}

#visa .signature-placeholder {
  color: #999;
  font-size: 14px;
  text-align: center;
  user-select: none;
}

#visa .signature-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#visa .signature-update-btn {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 3px;
  cursor: pointer;
  color: #666;
}

#visa .signature-update-btn:hover {
  background: #e0e0e0;
}

#visa .input-group .form-control {
  border-right: 0;
}

#visa .input-group-text {
  background-color: #fff;
  border-left: 0;
  cursor: pointer;
  height: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-left: none;
}

#visa .input-group {
  display: flex;
  width: 100%;
}

#visa .input-group-append {
  display: flex;
  align-items: center;
}

.fa-calendar-alt {
  font-size: 18px;
  color: #555;
}


@media (max-width: 768px) {
  #visa .content-wrapper {
    padding: 10px;
  }
  
 #visa .row {
    flex-direction: column;
    gap: 0;
  }
}


    /* .form-section {
        box-shadow: none !important;
    
    }
    
.table-section {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    } */




/* ################################################################################################### */

/*##########################| Register account Validation Start "BY-Arna Hoosain id-42" |########################### */

/* ################################################################################################### */


 #registration body {
      font-family: Arial, sans-serif;
      background-color: var(--ebl-light);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      transition: background-color var(--transition-time) ease;
    }
#registration h4{
    font-size: 24px;
    font-weight: bold;
    color: var(--ebl-blue);
}
    #registration .header-banner {
      background-color: var(--ebl-green);
      color: black;
      font-size: 22px;
      font-weight: bold;
      padding: 8px 15px;
    }

    #registration .sub-header {
      background-color: var(--ebl-blue);
      color: white;
      padding: 6px 15px;
      font-size: 16px;
    }

    /* #registration .profile-container {
      padding: 20px;
    } */

    #registration .profile-container .drop{
      margin-top: 1% !important;
    }
    
    #registration .profile-container .profile h6{
      font-size: 24px;
    }
    
    #registration .profile-setup {
      background: #fff;
      border-radius: 10px;
      border: 1px solid #3333;
      padding: 20px;
      display: none;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    #registration .profile-setup.show {
      display: block;
    }

    #registration .profile-setup label {
      font-size: 18px;
      margin-top: 10px;
    }

    #registration .profile-setup select,
    #registration .profile-setup input {
      margin-bottom: 10px;
      border: 1px solid #3333;
      position: relative;
    }

    #registration .select-wrapper {
      position: relative;
      display: inline-block;
      width: 100%;
    }

    #registration .select-wrapper select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding-right: 40px;
    }

    #registration .select-wrapper .drop {
      position: absolute;
      right: 12px;
      top: 34% !important;
      transform: translateY(-50%);
      pointer-events: none;
      color: #6c757d;
    }

    #registration .form-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid var(--ebl-blue);
    padding-bottom: 12px;
   }

    #registration .validation-table {
      margin-top: 20px;
      border: 1px solid #3333;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    #registration .validation-table .search-label{
      font-size: 18px;
    }

    #registration .search{
      background-color: var(--ebl-blue)!important;
      color: white;
      padding: 12px 20px;
      border-radius: 5px;
      border: none;
      font-size: 18px;
    }
     
    #registration .table-responsive{
      border-radius: 5px;
    }

    #registration table.table, 
    #registration table.table th, 
    #registration table.table td {
      border: 1px solid #3333338e !important;
    }

    #registration table.table tr:hover {
      background-color: rgba(0, 83, 155, 0.1);
    }

    #registration .table thead th {
      background-color: var(--ebl-blue);
      color: white;
      text-align: center;
    }

    #registration .btn-custom {
      margin-top: 15px;
      margin-right: 10px;
      padding: 12px 20px;
      font-size: 18px;
    }

    #registration .toggle-bnt{
      background-color: var(--ebl-blue);
      color: white;
      padding: 15px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-bottom: 15px;
      font-size: 24px;
      transition: all linear 0.5s ease;
      max-width: 100%;
      justify-content: space-between;
    }

    #registration .error-message {
      color: red;
      font-size: 14px;
      margin-top: 5px;
    }

    #registration .input-error {
      border-color: red !important;
    }

    #registration .form-control{
      width: 100%;
      padding: 12px;
      border: 1px solid #3333;
      border-radius: 5px;
      font-size: 14px;
      color: #333;
    }

    #registration .drop1 {
      font-size: 16px;
      display: inline-block;
      transition: transform 0.4s ease-in-out;
    }

    #registration .drop1.rotated {
      transform: rotate(180deg);
    }

    /* Initially hide all table rows */
    #registration .table-row {
      display: none;
    }

    /* Show table rows when they match search */
    #registration .table-row.visible {
      display: table-row;
    }

    /* No data message */
    #registration .no-data-message {
      text-align: center;
      padding: 20px;
      color: #666;
      font-style: italic;
    }

    /* .footer {
      background-color: #f8f9fa;
      border-top: 1px solid #dee2e6;
      margin-top: 50px;
      position: relative;
      bottom: 0;
      width: 100%;
    } */

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* .start {
      display: none;
    } */

/* ################################################################################################### */

/*##########################| Register account Validation End "BY-Arna Hoosain id-42" |########################### */

/* ################################################################################################### */








/* ################################################################################################### */

/*##########################| 2.5 VA account master Creation Start "BY-Arna Hoosain id-42" |########################### */

/* ################################################################################################### */


   #va_aacount body {
      font-family: Arial, sans-serif;
      background-color: var(--ebl-light);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      transition: background-color var(--transition-time) ease;
  }

  #va_aacount .user-info {
    display: flex;
    align-items: center;
    gap: 20px;
  }
#va_aacount h4{
    font-size: 24px;
    font-weight: bold;
    color: var(--ebl-blue);
}
  #va_aacount .main-content {
    display: flex;
    margin: 20px 0px;
    border: 1px solid #3333;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  #va_aacount .form-section {
    flex: 1;
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    height: fit-content;
  }
  /* Collapsible form styles */
  #va_aacount .toggle-form-btn {
    background-color: var(--ebl-blue);
    color: white;
    padding: 15px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 15px;
    font-size: 24px;
    width: 100%;
    transition: all 0.3s ease;
  }

  #va_aacount .table-section {
    border: 1px solid #3333;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
  }

  #va_aacount .form-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid var(--ebl-blue);
    padding-bottom: 8px;
  }

  #va_aacount .form-group {
    margin-bottom: 15px;
  }

  #va_aacount .form-group label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-size: 18px;
  }

  #va_aacount .form-control {
    width: 100%;
    padding: 12px 12px;
    border: 1px solid #3333;
    border-radius: 5px;
    font-size: 14px;
    color: #333;
    
  }

  #va_aacount .form-control:focus {
    outline: none;
    border-color: var(--ebl-blue);
    box-shadow: 0 0 5px rgba(0,123,255,0.3);
  }

  #va_aacount .select-wrapper {
    position: relative;
  }

  #va_aacount .select-wrapper::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #333;
  }

  #va_aacount .select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 35px;
  }

  #va_aacount .form-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 25px;
  }

  #va_aacount .btn-save {
    background-color: var(--ebl-blue);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
  }

  #va_aacount .btn-clear {
    background-color: var(--ebl-green);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;   
  }

  #va_aacount .btn-delete {
    background-color: var(--ebl-blue);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
  }

  #va_aacount .btn-delete:hover{
    border: 0.3px solid red;
  }

  #va_aacount .search-section {
    padding-bottom: 10px;
  }

  #va_aacount .table-section .search-label{
    font-size: 18px;
  }

  #va_aacount .search-btn {
    background-color: var(--ebl-blue);
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
  }

  #va_aacount .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
  }

  #va_aacount .data-table th,
  #va_aacount .data-table td {
    border: 1px solid #333333a4;
    padding: 8px;
    text-align: left;
    vertical-align: top;
  }

  #va_aacount .data-table th {
    background-color: var(--ebl-blue);
    color: white;
    font-weight: bold;
    text-align: center;
    position: sticky;
    top: 0;
  }

  #va_aacount .data-table tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  #va_aacount .table-container {
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  #va_aacount .error-message {
    color: #dc3545;
    font-size: 12px;
    margin-top: 3px;
  }

  #va_aacount .input-error {
    border-color: #dc3545 !important;
  }

  #va_aacount .form-content {
    display: none;
    animation: slideDown 0.3s ease-out;
  }

  #va_aacount .form-content.show {
    display: block;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  #va_aacount .toggle-icon {
    margin-top: 1%;
    transition: transform 0.3s ease;
    font-size: 16px;
  }

  #va_aacount .toggle-icon.rotated {
    transform: rotate(-180deg);
  }

  @media (max-width: 1200px) {
    #va_aacount .main-content {
      flex-direction: column;
    }
    
    #va_aacount .form-section,
    #va_aacount .table-section {
      flex: none;
    }
  }

  
/* ################################################################################################### */

/*##########################| VA account master Creation End "BY-Arna Hoosain id-42" |########################### */

/* ################################################################################################### */





/* ################################################################################################### */

/*##########################| Branch List Start "BY-Arna Hoosain id-42" |########################### */

/* ################################################################################################### */

 #branch_info body {
      font-family: Arial, sans-serif;
      background-color: var(--ebl-light);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      transition: background-color var(--transition-time) ease;
}

#branch_info .user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}
#branch_info h4{
    font-size: 24px;
    font-weight: bold;
    color: var(--ebl-blue);
}
#branch_info .main-content {
  display: flex;
  margin: 20px 0px;
  border: 1px solid #3333;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#branch_info .form-section {
  flex: 1;
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  height: fit-content;
}
/* Collapsible form styles */
#branch_info .toggle-form-btn {
  background-color: var(--ebl-blue);
  color: white;
  padding: 15px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 15px;
  font-size: 24px;
  width: 100%;
  transition: all 0.3s ease;
}

#branch_info .table-section {
  border: 1px solid #3333;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

#branch_info .form-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
  border-bottom: 2px solid var(--ebl-blue);
  padding-bottom: 8px;
}

#branch_info .form-group {
  margin-bottom: 15px;
}

#branch_info .form-group label {
  display: block;
  margin-bottom: 5px;
  color: black;
  font-size: 18px;
}

#branch_info .form-control {
  width: 100%;
  padding: 12px;
  border: 1px solid #3333;
  border-radius: 5px;
  font-size: 14px;
  color: #333;
}

#branch_info .form-control:focus {
  outline: none;
  border-color: var(--ebl-blue);
  box-shadow: 0 0 5px rgba(0,123,255,0.3);
}

#branch_info .select-wrapper {
  position: relative;
}

#branch_info .select-wrapper::after {
  content: '\f107';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #666;
}

#branch_info .select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 35px;
}

#branch_info .form-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 25px;
}

#branch_info .btn-save {
  background-color: var(--ebl-blue);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
}

#branch_info .btn-clear {
  background-color: var(--ebl-green);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

#branch_info .btn-delete {
  background-color: var(--ebl-blue);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

#branch_info .btn-delete:hover{
  border: 0.3px solid red;
}

#branch_info .search-section {
  padding-bottom: 10px;
}
#branch_info .search-section .search-label{
  font-size: 18px;
}
#branch_info .search-btn {
  background-color: var(--ebl-blue);
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
}

#branch_info .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

#branch_info .data-table th,
#branch_info .data-table td {
  border: 1px solid #333333a4;
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

#branch_info .data-table th {
  background-color: var(--ebl-blue);
  color: white;
  font-weight: bold;
  text-align: center;
  position: sticky;
  top: 0;
}

#branch_info .data-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

#branch_info .table-container {
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
}

#branch_info .error-message {
  color: #dc3545;
  font-size: 12px;
  margin-top: 3px;
}

#branch_info .input-error {
  border-color: #dc3545 !important;
}

#branch_info .form-content {
  display: none;
  animation: slideDown 0.3s ease-out;
}

#branch_info .form-content.show {
  display: block;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#branch_info .toggle-icon {
  margin-top: 1%;
  transition: transform 0.3s ease;
  font-size: 16px;
}

#branch_info .toggle-icon.rotated {
  transform: rotate(-180deg);
}

@media (max-width: 1200px) {
  #branch_info .main-content {
    flex-direction: column;
  }
  
  #branch_info .form-section,
  #branch_info .table-section {
    flex: none;
  }
}

/* ################################################################################################### */

/*##########################| Branch List End "BY-Arna Hoosain id-42" |########################### */

/* ################################################################################################### */






/* ################################################################################################### */

/*##########################| Static Virtual Account Start "BY-Arna Hoosain id-42" |########################### */

/* ################################################################################################### */


 #static_virtual_account body {
      font-family: Arial, sans-serif;
      background-color: var(--ebl-light);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      transition: background-color var(--transition-time) ease;
    }
    #static_virtual_account h4{
    font-size: 24px;
    font-weight: bold;
    color: var(--ebl-blue);
}
    #static_virtual_account .main-content {
      display: flex;
      margin: 20px 0px;
      border: 1px solid #3333;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    #static_virtual_account .table-section {
      border: 1px solid #3333;
      padding: 25px;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      margin-bottom: 20px;
    }
    
    #static_virtual_account .form-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #333;
      border-bottom: 2px solid var(--ebl-blue);
      padding-bottom: 12px;
    }
    
    #static_virtual_account .search-section {
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid #3333;
      margin-bottom: 10px;
    }
    
    #static_virtual_account .search-btn {
      background-color: var(--ebl-blue);
      color: white;
      border: none;
      padding: 6px 10px;
      border-radius: 5px;
      cursor: pointer;
      margin-right: 5px;
      margin-left: 5px;
      font-size: 18px;
    }

     #static_virtual_account .search-section .form-control{
      padding: 12px;
      color: #333;
      font-size: 14px;
      border: 1px solid #3333;
     }

       #static_virtual_account .reset-bnt {
      background-color: var(--ebl-blue);
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 18px;
    }
    
    #static_virtual_account .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 16px;
    }
    
    #static_virtual_account.data-table th,
    #static_virtual_account .data-table td {
      border: 1px solid #333333a4;
      padding: 10px;
      text-align: left;
      vertical-align: middle;
    }
    
    #static_virtual_account .data-table th {
      background-color: var(--ebl-blue);
      color: white;
      font-weight: bold;
      text-align: center;
      position: sticky;
      top: 0;
    }
    
    #static_virtual_account .data-table tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    
    #static_virtual_account .table-container {
      max-height: 600px;
      overflow-y: auto;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    
    #static_virtual_account .search-label {
      /* font-weight: bold; */
      margin-right: 10px;
      font-size: 18px;
    }
    
    #static_virtual_account .no-records {
      text-align: center;
      padding: 30px;
      font-style: italic;
      color: #777;
    }
    
    #static_virtual_account .footer {
      background-color: var(--ebl-light);
      border-top: 1px solid #ddd;
      padding: 10px 0;
      position: fixed;
      bottom: 0;
      width: 100%;
    }
    
    #static_virtual_account .page-header {
      background-color: var(--ebl-blue);
      color: white;
      padding: 15px;
      margin-bottom: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    @media (max-width: 768px) {
      #static_virtual_account .search-section {
        flex-direction: column;
        gap: 10px;
      }
    }

/* ################################################################################################### */

/*##########################| Static Virtual Account End "BY-Arna Hoosain id-42" |########################### */

/* ################################################################################################### */





/* ################################################################################################### */

/*##########################| Corporate Account Payment Start "BY-Arna Hoosain id-42" |########################### */

/* ################################################################################################### */


 #corporate_payment body {
      font-family: Arial, sans-serif;
      background-color: var(--ebl-light);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      transition: background-color var(--transition-time) ease;
    }
#corporate_payment h4{
    font-size: 24px;
    font-weight: bold;
    color: var(--ebl-blue);
}
    /* #corporate_payment  .main-container {
      background: white;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 30px;
      margin: 20px auto;
      max-width: 800px;
    } */

    #corporate_payment  .module-header {
      background-color: var(--ebl-blue);
      color: white;
      padding: 15px 20px;
      border-radius: 8px;
      margin-bottom: 20px;
      text-align: center;
    }

    /* #corporate_payment .module-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 5px;
    } */

    #corporate_payment .module-subtitle {
      font-size: 20px;
      font-weight: bold;
    }

    #corporate_payment .form-section {
      background: white;
      padding: 25px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      margin-bottom: 20px;
      border: 1px solid #3333;
    }

  

    #corporate_payment .form-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 25px;
      color: #333;
      border-bottom: 2px solid var(--ebl-blue);
      padding-bottom: 10px;
    }

    #corporate_payment .form-group {
      margin-bottom: 20px;
    }

   /* #corporate_payment .narration{
      margin-top: 79px !important;
     } */

    #corporate_payment .form-group label {
      display: block;
      margin-bottom: 8px;
      color: #333;
      font-size: 18px;
      /* font-weight: 600; */
    }

    #corporate_payment .input-group {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    #corporate_payment .blank {
      background-color: rgba(89, 114, 114, 0.404);
      padding: 12px;
      border: 1px solid #3333;
      margin-top: 3px;
      /* margin-bottom: 20px; */

    }

    #corporate_payment .form-control {
      flex: 1;
      padding: 12px;
      border: 1px solid #3333;
      border-radius: 5px;
      font-size: 14px;
      transition: border-color 0.3s ease;
      color: #333;
    }

    #corporate_payment .form-control:focus {
      outline: none;
      border-color: var(--ebl-blue);
      box-shadow: 0 0 5px rgba(0,123,255,0.3);
    }

    #corporate_payment .input-error {
      border-color: var(--ebl-red) !important;
      background-color: #ffe6e6;
    }

    #corporate_payment .error-message {
      color: var(--ebl-red);
      font-size: 12px;
      margin-top: 5px;
    }

    #corporate_payment .success-message {
      color: var(--ebl-green);
      font-size: 12px;
      margin-top: 5px;
    }

    #corporate_payment .check-btn {
      background-color: var(--ebl-blue);
      color: white;
      border: none;
      padding: 6px 10px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 18px;
      transition: background-color 0.3s ease;
    }

    /* #corporate_payment .check-btn:hover {
      background-color: #0056b3;
    } */

    #corporate_payment .check-btn:disabled {
      background-color: #6c757d;
      cursor: not-allowed;
    }

    #corporate_payment .form-buttons {
      display: flex;
      gap: 15px;
      justify-content: center;
      margin-top: 30px;
      flex-wrap: wrap;
    }

    #corporate_payment .btn-save {
      background-color: var(--ebl-blue);
      color: white;
      border: none;
      padding: 12px 30px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 18px;
      font-weight: 600;
      transition: background-color 0.3s ease;
    }

    /* #corporate_payment.btn-save:hover {
      background-color: #0056b3;
    } */

    #corporate_payment .btn-clear {
      background-color: var(--ebl-green);
      color: white;
      border: none;
      padding: 12px 30px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 18px;
      font-weight: 600;
      transition: background-color 0.3s ease;
    }

    /* #corporate_payment .btn-clear:hover {
      background-color: #1e7e34;
    } */

    #corporate_payment .validation-icon {
      margin-left: 10px;
      font-size: 16px;
    }

    #corporate_payment .validation-icon.valid {
      color: var(--ebl-green);
    }

    #corporate_payment .validation-icon.invalid {
      color: var(--ebl-red);
    }

    #corporate_payment .footer {
      text-align: center;
      margin-top: 30px;
      padding: 20px;
      border-top: 1px solid #ddd;
      font-size: 12px;
      color: #666;
    }

    #corporate_payment .status-indicator {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: bold;
      margin-left: 10px;
    }

    #corporate_payment .status-success {
      background-color: #d4edda;
      color: #155724;
    }

    #corporate_payment .status-error {
      background-color: #f8d7da;
      color: #721c24;
    }

    @media (max-width: 768px) {
      #corporate_payment .input-group {
        flex-direction: column;
        align-items: stretch;
      }
      
      #corporate_payment .form-buttons {
        flex-direction: column;
        align-items: stretch;
      }
    }


/* ################################################################################################### */

/*##########################| Corporate Account Payment End "BY-Arna Hoosain id-42" |########################### */

/* ################################################################################################### */




/* ################################################################################################### */

/*##########################| Transaction History Start "BY-Saeeda Mahjuja id-45" |########################### */

/* ################################################################################################### */


/* ========== Transaction History Styles ========== */

/* Card styling */

#transHistory body{
      font-family: Arial, sans-serif;
      background-color: var(--ebl-light);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      transition: background-color var(--transition-time) ease;
}

#transHistory h4{
    font-size: 24px;
    font-weight: bold;
    color: var(--ebl-blue);
}

#transHistory .formList{
 border-radius: 10px;
 padding: 20px;
 border: 1px solid #3333;
}

#transHistory .card {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: none;
  padding: 24px;
  margin: 20px auto;
  background: white;
  max-width: 800px;
}

/* Header with arrow toggle */
#transHistory .transHistory-header {
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ebl-blue);
  color: #333;
  border-bottom: 2px solid var(--ebl-blue);
  margin-bottom: 24px;
  border-radius: 0;
  position: relative;
  cursor: pointer;
}

/* Flex layout for title and arrow */
#transHistory .transHistory-header h5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

/* Arrow toggle using pseudo-elements */
#transHistory .toggle-arrow::after {
  content: "▼";
  font-size: 18px;
  transition: transform 0.3s ease;
}

#transHistory.collapsed .toggle-arrow::after {
  content: "▲";
}

/* Form body visible by default */
#transHistory .transHistory-body {
  display: block;
  padding: 0;
  background: transparent;
}

/* Input styling */
#transHistory .form-control {
  height: 38px;
  font-size: 14px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 8px 12px;
  background-color: white;
  color: #495057;
}

#transHistory .form-control:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  outline: 0;
}

/* Label styling */
#transHistory label {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 5px;
  color: #333;
  display: block;
}

/* Dropdown styling */
#transHistory select.form-control {
  appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF8,<svg fill="%23495057" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  /* background-size: 16px; */
  padding-right: 36px;
  font-size: 14px;
  color: #333;

}

/* Calendar icon */
#transHistory .calenderAr {
  position: absolute;
  top: 30px;
  right: 10px;
  border: none;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}

/* Group spacing */
#transHistory .form-group {
  position: relative;
  margin-bottom: 16px;
}

/* Row spacing */
#transHistory .row {
  margin-bottom: 8px;
}

/* Button base style */
#transHistory .btn {
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  padding: 10px 24px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  white-space: nowrap;
}

/* Primary button */
#transHistory .btn-primary {
  background-color: var(--ebl-blue);
  color: #fff;
  font-size: 18px;
  padding: 12px 20px;
}



/* Secondary button */
#transHistory .btn-secondary {
  background-color: var(--ebl-green);
  color: #fff;
  font-size: 18px;
  padding: 12px 20px;
}



/* Button group aligned left */
#transHistory .button-group {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Responsive layout */
@media (max-width: 768px) {
  #transHistory .col-md-6 {
    margin-bottom: 16px;
  }

  #transHistory .button-group {
    flex-direction: column;
    align-items: stretch;
  }

  #transHistory .btn {
    width: 100%;
    margin-bottom: 8px;
  }
}
/* ################################################################################################### */

/*##########################| Transaction History End "BY-Saeeda Mahjuja id-45" |########################### */

/* ################################################################################################### */






/* ################################################################################################### */

  /*##########################| Transaction Check Start "BY-Rabeya Tarin id-22" |########################### */

/* ################################################################################################### */

#checktransaction body {
      font-family: Arial, sans-serif;
      background-color: var(--ebl-light);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      transition: background-color var(--transition-time) ease;
  }
  #checktransaction h4{
    font-size: 24px;
    font-weight: bold;
    color: var(--ebl-blue);
}
  
  #checktransaction .tx-auth-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    border-radius: 6px;

  }
  
  #checktransaction .tx-auth-content-wrapper {
    flex: 1;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    border-radius: 6px;
  }
  
  #checktransaction .tx-auth-main-title {
    text-align: center;
    color: var(--ebl-blue);
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
  }
  
  #checktransaction .tx-auth-container {
    margin-bottom: 30px;
    border-radius: 10px;
    overflow: hidden;
  }
  
  #checktransaction .tx-auth-details {
    background: #f8f9fa;
    border: 1px solid #ccc;
    border-radius: 10px; 
    padding: 20px;
    width: 100%;
    max-width: 100%;

  }
  
  #checktransaction .tx-auth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--ebl-blue);
    padding-bottom: 8px;
  }
  
  #checktransaction .tx-auth-header h3 {
    color: #333;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
  }
  
  #checktransaction .tx-auth-collapse-arrow {
    font-size: 14px;
    color: white;
    font-weight: normal;
    transition: color 0.2s ease;
  }
  
  #checktransaction .tx-auth-header.tx-auth-collapsible {
    cursor: pointer;
    user-select: none;
  }
  
  #checktransaction .tx-auth-header.tx-auth-collapsible:hover .tx-auth-collapse-arrow {
    color: #ccc;
  }
  
  #checktransaction .tx-auth-content {
    transition: all 0.3s ease;
  }
  
  #checktransaction .tx-auth-form-label {
    font-weight: normal;
    color: #333;
    margin-bottom: 5px;
    margin-top: 5px;
    display: block;
    font-size: 18px;
    border-radius: 5px;
    
  }
  
  #checktransaction .tx-auth-form-control {
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    background: white;
    border-radius: 6px;
  }
  
  #checktransaction .tx-auth-form-control:disabled {
    background-color: #f5f5f5;
    color: #666;
    border-radius: 6px; 
  }
  
  #checktransaction .tx-auth-form-control[readonly] {
    background-color: rgba(89, 114, 114, 0.404);
    color: #333;
    border-radius: 5px; 
    font-size: 14px;
    padding: 12px;
    border: 1px solid #3333;
  }
  
  #checktransaction .tx-auth-form-group {
    margin-bottom: 15px;
  }
  
  #checktransaction .tx-auth-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
  }
  
  #checktransaction .tx-auth-col-md-6 {
    flex: 1;
  }
  
  #checktransaction .tx-auth-col-md-4 {
    flex: 1;
  }
  
  #checktransaction .tx-auth-col-md-8 {
    flex: 2;
  }
  
  #checktransaction .tx-auth-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
  }
  
  #checktransaction .tx-auth-input-group-append {
    display: flex;
    align-items: center;
  }
  
  #checktransaction .tx-auth-input-group-text {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-left: 0;
    padding: 8px 12px;
    color: #495057;
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #checktransaction .tx-auth-input-group-text:hover {
    background-color: #dee2e6;
    color: var(--ebl-blue);
  }
  
  #checktransaction .tx-auth-input-group-text:active {
    background-color: #d1ecf1;
    color: var(--ebl-blue);
  }
  
  #checktransaction .tx-auth-input-group-text i {
    pointer-events: none;
  }

  
  #checktransaction .tx-auth-btn-container {
    display: flex;
    justify-content: flex-start; /* Align buttons to the left */
    gap: 10px; /* Space between buttons */
    margin-bottom: 17px;
}

  #checktransaction .tx-auth-btn, 
  #checktransaction .tx-auth-btn-secondary, 
  #checktransaction .tx-auth-search-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 18px;
    cursor: pointer;
    color: white;
  }
  
  #checktransaction .tx-auth-btn {
      background: var(--ebl-blue);
      border: 1px solid var(--ebl-blue);
  }
  
  /* #checktransaction .tx-auth-btn:hover {
      background: #003f7f;
  } */
  
  #checktransaction .tx-auth-btn-secondary {
      background: var(--ebl-green);
      border: 1px solid var(--ebl-green);
  }

  
  #checktransaction .tx-auth-error-popup {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 14px;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  }
  
  #checktransaction .tx-auth-table-container {
    margin-top: 30px;
    border-radius: 10px;
    overflow: hidden;
  }
  
  #checktransaction .tx-auth-table {
    background: #f8f9fa;
    border: 1px solid #ccc;
    padding: 20px;
    width: 100%;
    max-width: 100%;
  }
  
  #checktransaction .tx-auth-table h3 {
    color: #333;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
  }
  
  #checktransaction .tx-auth-data-table {
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0;
  }
  
  #checktransaction .tx-auth-data-table thead th {
    background-color: var(--ebl-blue);
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 10px 8px;
    border: 1px solid #ccc;
    font-weight: bold;
  }
  
  #checktransaction .tx-auth-data-table tbody td {
    padding: 8px;
    text-align: center;
    border: 1px solid #3333;
    font-size: 14px;
    background: white;
  }
  
  #checktransaction .tx-auth-table-bordered {
    border: 1px solid #ccc;
  }
  
  #checktransaction .tx-auth-textarea {
    resize: vertical;
    min-height: 60px;
  }
  
  #checktransaction .tx-auth-btn-reject {
    background: #dc3545;
    border: 1px solid #dc3545;
  }
  
  #checktransaction .tx-auth-btn-reject:hover {
    background: #c82333;
  }
  
  #checktransaction .tx-auth-search-container {
    border-radius: 10px; 
    overflow: hidden;
}
  
  #checktransaction .tx-auth-search-details {
    background: #f8f9fa;
    border: 1px solid #ccc;
    padding: 20px;
    width: 100%;
    max-width: 100%;
  }
  
  #checktransaction .tx-auth-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    background-color: var(--ebl-blue);
    margin: -20px -20px 15px -20px;
  }
  
  #checktransaction .tx-auth-search-header h3 {
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
  }
  
  #checktransaction .tx-auth-search-content {
    transition: all 0.3s ease;
    border-radius: 0 0 10px 10px;
  }
  
  /* #checktransaction .tx-auth-search-btn {
    background: #00539B;
    border: 1px solid #00539B;
    border-radius: 6px; 
     padding: 10px;
    height: 38px; 
    color: white;
    font-size: 14px;
    cursor: pointer;
  }  */

  #checktransaction .tx-auth-search-btn {
    background: var(--ebl-blue);
    border: 1px solid var(--ebl-blue);
}

/* #checktransaction .tx-auth-search-btn:hover {
    background: #003f7f;
} */

  #checktransaction .tx-auth-status-success {
    color: var(--ebl-green);
    font-weight: bold;
  }
  
  #checktransaction .tx-auth-input-group .tx-auth-form-control {
    border-right: 0;
  }
  
  #checktransaction .tx-auth-input-group-text {
    background-color: #fff;
    border-left: 0;
    cursor: pointer;
    height: 100%;
    padding: 0 12px;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-left: none;
  }
  
  #checktransaction .tx-auth-input-group {
    display: flex;
    width: 100%;
  }
  
  #checktransaction .tx-auth-input-group-append {
    display: flex;
    align-items: center;
  }
  
  #checktransaction .fa-calendar-alt {
    font-size: 18px;
    color: #555;
  }
  
  @media (max-width: 768px) {
    #checktransaction .tx-auth-content-wrapper {
      padding: 10px;
    }
    
    #checktransaction .tx-auth-row {
      flex-direction: column;
      gap: 0;
    }
    
    #checktransaction .tx-auth-data-table {
      font-size: 12px;
    }
    
    #checktransaction .tx-auth-data-table thead th,
    #checktransaction .tx-auth-data-table tbody td {
      padding: 6px 4px;
    }
  }
/* ################################################################################################### */

  /*##########################| Transaction Check End "BY-Rabeya Tarin id-22" |########################### */

/* ################################################################################################### */



/* ################################################################################################### */

  /*##########################| Upload Static Start "BY-Rabeya Tarin id-22" |########################### */

/* ################################################################################################### */

#uploadstatic body {
      font-family: Arial, sans-serif;
      background-color: var(--ebl-light);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      transition: background-color var(--transition-time) ease;
}
#uploadstatic h4{
    font-size: 24px;
    font-weight: bold;
    color: var(--ebl-blue);
}
#uploadstatic .wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#uploadstatic .content-wrapper {
    flex: 1;
    padding: 20px;
    max-width: 1200px; 
    margin: 0 auto;
    width: 100%;
}

#uploadstatic .main-title {
    text-align: center;
    color: var(--ebl-blue);
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
}

#uploadstatic .search-container {
    margin-bottom: 30px;
}

#uploadstatic .search-parameter {
    background: #f8f9fa;
    border: 1px solid #ccc;
    padding: 20px;
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
}

#uploadstatic .search-parameter-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--ebl-blue);
    padding-bottom: 8px;
}

#uploadstatic .search-parameter-title h6 {
    color: #333;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

#uploadstatic .collapse-arrow {
    font-size: 14px;
    color: white;
    font-weight: normal;
    transition: color 0.2s ease;
}

#uploadstatic .search-parameter-title.collapsible {
    cursor: pointer;
    user-select: none;
}

#uploadstatic .search-parameter-title.collapsible:hover .collapse-arrow {
    color: #ccc;
}

#uploadstatic .search-parameter-content {
    transition: all 0.3s ease;
}

#uploadstatic .section-title {
    color: #333;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    border-bottom: 1px solid #3333;
    padding-bottom: 5px;
}

#uploadstatic .upload-container {
    margin-top: 20px;
}

#uploadstatic .upload-section {
    background: #f8f9fa;
    border: 1px solid #ccc;
    padding: 15px;
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
}

#uploadstatic .form-label {
    font-weight: normal;
    color: #333;
    margin-bottom: 5px;
    display: block;
    font-size: 18px;
}

#uploadstatic .form-control, #uploadstatic .form-select {
    border: 1px solid #3333;
    border-radius: 6px;
    padding: 6px 12px;  
    font-size: 14px; 
    width: 100%;
    box-sizing: border-box;
    background: white;
    color: var(--ebl-blue);
    color: #333

}

#uploadstatic .form-controlreadonly:read-only {
    background-color: rgba(89, 114, 114, 0.404);
    border: 1px solid #3333;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#uploadstatic .form-group {
    margin-bottom: 15px;
}

#uploadstatic .btn {
    background-color: var(--ebl-blue);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    margin-right: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* #uploadstatic .btn:hover {
    background: #003f7f;
    color: white;
} */

#uploadstatic .btn-secondary {
    background: var(--ebl-green);
    border: 1px solid var(--ebl-green);
}

/* #uploadstatic .btn-secondary:hover {
    background: #008a4a;
} */

#uploadstatic .file-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

#uploadstatic .file-choose-btn {
    background-color: var(--ebl-blue);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    cursor: pointer;
    white-space: nowrap;
}



#uploadstatic .file-status {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 12px 12px;  
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #3333;
}

#uploadstatic .upload-actions {
    margin-bottom: 20px;
}

#uploadstatic .batch-actions-row {
    display: flex;
    align-items: end;
    gap: 20px;
    margin-bottom: 15px;
}

#uploadstatic .batch-input-container {
    flex: 1;
    max-width: 500px;
}

#uploadstatic .action-buttons-container {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

#uploadstatic .instructions-box {
    background: white;
    border: 1px solid #3333;
    padding: 15px;
    margin-top: 15px;
    border-radius: 5px;
}

#uploadstatic .instructions-box h4 {
    color: #333;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 0;
}

#uploadstatic .instruction-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#uploadstatic .instruction-list li {
    color: #333;
    font-size: 14px;
    margin-bottom: 5px;
    padding-left: 10px;
}

#uploadstatic .instruction-list li:last-child {
    margin-top: 10px;
}

#uploadstatic .instruction-list a {
    color: var(--ebl-blue);
    text-decoration: underline;
    cursor: pointer;
}



#uploadstatic .error-popup {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 14px;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}



#uploadstatic .row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

#uploadstatic .col-md-6 {
    flex: 1;
}

#uploadstatic .col-md-12 {
    flex: 1;
}

#uploadstatic .col-md-4 {
    flex: 1;
}

#uploadstatic .col-md-8 {
    flex: 2;
}

/* Responsive Design */
@media (max-width: 768px) {
    #uploadstatic .content-wrapper {
        padding: 15px;
        max-width: 100%;
    }
    
    #uploadstatic .main-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    #uploadstatic .row {
        flex-direction: column;
        gap: 0;
    }
    
    #uploadstatic .batch-actions-row {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    #uploadstatic .batch-input-container {
        max-width: 100%;
    }
    
    #uploadstatic .action-buttons-container {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    #uploadstatic .file-input-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    #uploadstatic .file-choose-btn {
        width: auto;
        align-self: flex-start;
    }
    
    #uploadstatic .search-parameter, .upload-section {
        padding: 15px;
    }
    
    #uploadstatic .search-parameter-title {
        margin: -15px -15px 15px -15px;
        padding: 12px 15px;
    }
}

@media (max-width: 480px) {
    #uploadstatic .content-wrapper {
        padding: 10px;
    }
    
    #uploadstatic .main-title {
        font-size: 18px;
    }
    
    #uploadstatic .btn, .file-choose-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    #uploadstatic .action-buttons-container {
        flex-direction: column;
        gap: 8px;
    }
    
    #uploadstatic .action-buttons-container .btn {
        margin-right: 0;
        width: 100%;
        text-align: center;
    }
}
/* ################################################################################################### */

  /*##########################| Upload Static End "BY-Rabeya Tarin id-22" |########################### */

/* ################################################################################################### */






/* ################################################################################################### */

  /*##########################| Transaction Reject List Start "BY-Rabeya Tarin id-22" |########################### */

/* ################################################################################################### */



#transactionrejectlist body {
      font-family: Arial, sans-serif;
      background-color: var(--ebl-light);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      transition: background-color var(--transition-time) ease;
  }

  #transactionrejectlist h4{
    font-size: 24px;
    font-weight: bold;
    color: var(--ebl-blue);
}
  
  #transactionrejectlist .tx-reject-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    border-radius: 6px;
  }
  
  #transactionrejectlist .tx-reject-content-wrapper {
    flex: 1;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    border-radius: 6px;
  }
  
  #transactionrejectlist .tx-reject-nav-title {
    font-size: 14px;
    font-weight: bold;
  }
  
  #transactionrejectlist .tx-reject-start-menu {
    margin-bottom: 20px;
  }
  
  #transactionrejectlist .tx-reject-start-btn {
    background-color: #E7E6E6;
    border: 1px solid #ccc;
    padding: 5px 10px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    border-radius: 3px;
  }
  
  #transactionrejectlist .tx-reject-start-btn:hover {
    background-color: #ddd;
  }
  
  #transactionrejectlist .tx-reject-main-title {
    text-align: center;
    color: var(--ebl-blue);
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
  }
  
  #transactionrejectlist .tx-reject-container {
    margin-bottom: 30px;
    border-radius: 10px;
    overflow: hidden;
  }
  
  #transactionrejectlist .tx-reject-details {
    /* background: #f8f9fa; */
    border: 1px solid #3333;
    border-radius: 10px; 
    padding: 20px;
    width: 100%;
    max-width: 100%;
  }
  
  #transactionrejectlist .tx-reject-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--ebl-blue);
    padding-bottom: 8px;
  }
  
  #transactionrejectlist .tx-reject-header h5 {
    color: #333;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
  }
  
  #transactionrejectlist .tx-reject-collapse-arrow {
    font-size: 14px;
    color: white;
    font-weight: normal;
    transition: color 0.2s ease;
  }
  
  #transactionrejectlist .tx-reject-header.tx-reject-collapsible {
    cursor: pointer;
    user-select: none;
  }
  
  #transactionrejectlist .tx-reject-header.tx-reject-collapsible:hover .tx-reject-collapse-arrow {
    color: #ccc;
  }
  
  #transactionrejectlist .tx-reject-content {
    transition: all 0.3s ease;
  }
  
  #transactionrejectlist .tx-reject-form-label {
    font-weight: normal;
    color: #333;
    margin-bottom: 5px;
    margin-top: 5px;
    display: block;
    font-size: 18px;
    border-radius: 10px;
  }
  
  #transactionrejectlist .tx-reject-form-control {
    border: 1px solid #3333;
    padding: 12px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    background: white;
    border-radius: 5px;
    color: #333;
  }
  
  #transactionrejectlist .tx-reject-form-control.error {
    border-color: #dc3545;
    background-color: #fff5f5;
  }
  
  #transactionrejectlist .tx-reject-form-control:disabled {
    background-color: #f5f5f5;
    color: #333;
    border-radius: 6px;
  }
  
  #transactionrejectlist .tx-reject-form-control[readonly] {
    background-color:  rgba(89, 114, 114, 0.404);
    color: #333;
    border-radius: 6px;
  }
  
  #transactionrejectlist .tx-reject-form-group {
    margin-bottom: 15px;
  }
  
  #transactionrejectlist .tx-reject-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
  }
  
  #transactionrejectlist .tx-reject-col-md-6 {
    flex: 1;
  }
  
  #transactionrejectlist .tx-reject-col-md-4 {
    flex: 1;
  }
  
  #transactionrejectlist .tx-reject-col-md-8 {
    flex: 2;
  }
  
  #transactionrejectlist .tx-reject-col-md-3 {
    flex: 0.5;
  }
  
  #transactionrejectlist .tx-reject-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
  }
  #transactionrejectlist .tx-reject-input-group .trans_date{
    border-radius: 0px 5px 5px 0px !important;
  }
  #transactionrejectlist .tx-reject-input-group-append  {
    display: flex;
    align-items: center;
    border-radius: 5px !important;
    background-color: white !important;
  }

  #transactionrejectlist .tx-reject-input-group-text {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-left: 0;
    padding: 8px 12px;
    color: #495057;
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  
  #transactionrejectlist .tx-reject-input-group-text:hover {
    background-color: #dee2e6;
    color: var(--ebl-blue);
  }
  
  #transactionrejectlist .tx-reject-input-group-text:active {
    background-color: #d1ecf1;
    color: var(--ebl-blue);
  }
  
  #transactionrejectlist .tx-reject-input-group-text i {
    pointer-events: none;
  }
  
  #transactionrejectlist .tx-reject-input-group .tx-reject-form-control {
    border-right: 0;
  }
  
  #transactionrejectlist .tx-reject-btn-container {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 17px;
  }
  
  #transactionrejectlist .tx-reject-btn, 
  #transactionrejectlist .tx-reject-btn-secondary, 
  #transactionrejectlist .tx-reject-search-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 16px;
    cursor: pointer;
    color: white;
  }
  
  #transactionrejectlist .tx-reject-btn {
    background: var(--ebl-blue);
    border: 1px solid var(--ebl-blue);
  }
  
  #transactionrejectlist .tx-reject-btn:hover {
    background: var(--ebl-blue);
  }
  
  #transactionrejectlist .tx-reject-btn-secondary {
    background: var(--ebl-green);
    border: 1px solid var(--ebl-green);
  }
  
  #transactionrejectlist .tx-reject-btn-secondary:hover {
    background: var(--ebl-green);
  }
  
  #transactionrejectlist .tx-reject-error-popup {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 14px;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  }
  
  #transactionrejectlist .tx-reject-textarea {
    resize: vertical;
    min-height: 80px;
  }
  
  #transactionrejectlist .tx-reject-btn-reject {
    background: #dc3545;
    border: 1px solid #dc3545;
  }
  
  #transactionrejectlist .tx-reject-btn-reject:hover {
    background: #c82333;
  }
  
  /* Search Section Styles */
  #transactionrejectlist .tx-reject-search-section {
    margin-bottom: 30px;
  }
  
  #transactionrejectlist .tx-reject-search-container {
    border-radius: 10px; 
    overflow: hidden;
  }
  
  #transactionrejectlist .tx-reject-search-details {
    background: #f8f9fa;
    border: 1px solid #ccc;
    padding: 20px;
    width: 100%;
    max-width: 100%;
  }
  
  #transactionrejectlist .tx-reject-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    background-color: var(--ebl-blue);
    margin: -20px -20px 15px -20px;
  }
  
  #transactionrejectlist .tx-reject-search-header h3 {
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
  }
  
  #transactionrejectlist .tx-reject-search-content {
    transition: all 0.3s ease;
    border-radius: 0 0 10px 10px;
  }
  
  #transactionrejectlist .tx-reject-search-btn {
    background: var(--ebl-blue);
    border: 1px solid var(--ebl-blue);
  }
  
  #transactionrejectlist .tx-reject-search-btn:hover {
    background: var(--ebl-blue);
  }
  
  #transactionrejectlist .tx-reject-status-success {
    color: var(--ebl-green)5;
    font-weight: bold;
  }
  

  
  #transactionrejectlist .fa-calendar-alt {
    font-size: 18px;
    color: #333;
  }
  
  .validation-error {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: none;
  }
  
  @media (max-width: 768px) {
    #transactionrejectlist .tx-reject-content-wrapper {
      padding: 10px;
    }
    
    #transactionrejectlist .tx-reject-row {
      flex-direction: column;
      gap: 0;
    }
  }

  /* ################################################################################################### */

  /*##########################| Transaction Reject List End "BY-Rabeya Tarin id-22" |########################### */

/* ################################################################################################### */




/* ################################################################################################### */

/*##########################| CGI Failed List Start |########################### */

/* ################################################################################################### */




/* =================================================================
       SHARED COMPONENTS - Start Button (Used across all pages)
       =================================================================
    */
/* =================================================================
       BODY AND MAIN STYLING
       =================================================================
    */
#CGI_list body {
    font-family: Arial, sans-serif;
    background-color: var(--ebl-light);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    transition: background-color var(--transition-time) ease;
}

#CGI_list h4 {
    font-size: 24px;
    font-weight: bold;
    color: var(--ebl-blue);
}

/* =================================================================
       MAIN CONTAINER STYLING
       =================================================================
    */
#CGI_list .container-fluid {
    margin: 0 auto;
    padding: 20px;
}

/* =================================================================
       COLLAPSIBLE PARAMETERS CONTAINER
       =================================================================
    */
#CGI_list .collapsible-container {
    background-color: white;
    border: 1px solid #3333;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all var(--transition-time) ease;
}

#CGI_list .collapsible-header {
    padding: 15px 20px;
    background-color: var(--ebl-blue);
    color: white;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--transition-time) ease;
}

    #CGI_list .collapsible-header h5 {
        margin: 0;
        font-size: 20px;
        font-weight: 500;
    }

#CGI_list .dropdown-arrow {
    transition: transform var(--transition-time) ease;
    font-size: 16px;
}

    #CGI_list .dropdown-arrow.rotated {
        transform: rotate(180deg);
    }

#CGI_list .collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-time) ease;
}

    #CGI_list .collapsible-content.expanded {
        max-height: 1000px;
    }

#CGI_list .parameters-container {
    display: flex;
    gap: 10px;
    padding: 20px;
    flex-wrap: wrap;
}

#CGI_list .parameter-box {
    flex: 1;
    min-width: 250px;
    background-color: var(--ebl-light);
    border: 1px solid #3333;
    border-radius: 8px;
    padding: 20px;
    transition: all var(--transition-time) ease;
}

    #CGI_list .parameter-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    #CGI_list .parameter-box h6 {
        font-size: 19px !important;
        font-weight: 600 !important;
        margin-bottom: 30px;
        color: #333 !important;
        border-bottom: 2px solid var(--ebl-blue) !important;
        padding-bottom: 5px;
    }

/* =================================================================
       FORM STYLING
       =================================================================
    */
#CGI_list .form-group {
    margin-bottom: 15px;
}

    #CGI_list .form-group label {
        margin-top: 5px;
        display: block;
        font-size: 18px;
        font-weight: normal !important;
        margin-bottom: 5px;
        color: #333;
    }

#CGI_list .form-control {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    color: #333;
    border: 1px solid #3333 !important;
    border-radius: 5px;
    background-color: white;
    transition: all var(--transition-time) ease;
    box-sizing: border-box;
    margin-bottom: 10px;
}

    #CGI_list .form-control:focus {
        transform: scale(1.01);
        box-shadow: 0 0 0 0.25rem rgba(0, 83, 155, 0.25);
        outline: none;
    }

/* =================================================================
       BUTTON STYLING
       =================================================================
    */
#CGI_list .btn {
    padding: 6px 10px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all var(--transition-time) ease;
/*    font-weight: 500;*/
    margin-right: 5px;
}

#CGI_list .btn-primary {
    background-color: var(--ebl-blue) !important;
    color: white;
}

#CGI_list .btn-secondary {
    background-color: var(--ebl-yellow) !important;
    color: black !important;
}

#CGI_list .btn-secondary:hover {
    background-color: #e6bc00 !important;
    transform: translateY(-1px);
}

#CGI_list .btn-update {
    background-color: var(--ebl-green) !important;
    color: white;
    padding: 6px 10px;
    font-size: 12px;
}

/* #CGI_list  .btn-update:hover {
      background-color: #008a47 !important;
    } */

/* =================================================================
       RESULTS SECTION
       =================================================================
    */
#CGI_list .results-section {
    background-color: white;
    border: 1px solid #3333;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

    #CGI_list .results-section h5 {
        font-size: 18px !important;
        font-weight: 500 !important;
        margin-bottom: 20px;
        color: #333 !important;
        border-bottom: 2px solid var(--ebl-blue);
        padding-bottom: 8px;
    }

/* =================================================================
       TABLE STYLING
       =================================================================
    */
#CGI_list .table-responsive {
    overflow-x: auto;
    margin-top: 15px;
}

#CGI_list .table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 5px;
}

    #CGI_list .table th,
    #CGI_list .table td {
        border: 1px solid #333 !important;
        padding: 8px;
        text-align: left;
        font-size: 16px;
    }

    #CGI_list .table th {
        background: var(--ebl-blue) !important;
        color: white !important;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
    }

    #CGI_list .table tr:hover {
        background-color: rgba(0, 83, 155, 0.1);
    }

    #CGI_list .table tr:nth-child(even) {
        background-color: #f8f9fa;
    }

    #CGI_list .table-container {
        position: relative;
        overflow-x: auto;
        max-width: 100%;
    }

    #CGI_list .sticky-action-column {
        position: sticky;
        left: 0;
        background-color: white;
        z-index: 10;
        box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);
        min-width: 80px;
    }

        #CGI_list .sticky-action-column th,
        .sticky-action-column td {
            border-right: 2px solid #333 !important;
        }

        /* Ensure table doesn't collapse */
#CGI_list .table {
    min-width: 800px;
    border-collapse: collapse !important;
    table-layout: fixed;
}
    #CGI_list .table tbody tr {
        border-bottom: 1px solid #333 !important;
    }
    #CGI_list .table tbody tr:hover {
        background-color: #f5f5f5;
    }

/* Fix for overlapping headers */
.table-container {
    overflow-x: auto;
    max-width: 100%;
}

.table {
    min-width: 800px; /* Ensure minimum width for all columns */
}

    /* Fixed widths for all columns to prevent overlap */
    .table th:nth-child(1) {
        width: 80px;
        min-width: 80px;
    }
    /* Action */
    .table th:nth-child(2) {
        width: 120px;
        min-width: 120px;
    }
    /* cgi_ref_no */
    .table th:nth-child(3) {
        width: 100px;
        min-width: 100px;
    }
    /* Amount */
    .table th:nth-child(4) {
        width: 220px;
        min-width: 220px;
    }
    /* collection_trx_id_internal */
    .table th:nth-child(5) {
        width: 180px;
        min-width: 180px;
    }
    /* payment_successful */
    .table th:nth-child(6) {
        width: 100px;
        min-width: 100px;
    }
    /* created_by */
    .table th:nth-child(7) {
        width: 120px;
        min-width: 120px;
    }
    /* created_on */

    /* Apply same widths to td elements */
    .table td:nth-child(1) {
        width: 80px;
        min-width: 80px;
    }

    .table td:nth-child(2) {
        width: 120px;
        min-width: 120px;
    }

    .table td:nth-child(3) {
        width: 100px;
        min-width: 100px;
    }

    .table td:nth-child(4) {
        width: 220px;
        min-width: 220px;
    }

    .table td:nth-child(5) {
        width: 180px;
        min-width: 180px;
    }

    .table td:nth-child(6) {
        width: 100px;
        min-width: 100px;
    }

    .table td:nth-child(7) {
        width: 120px;
        min-width: 120px;
    }

/* Enhanced sticky column styling */
.sticky-action-column {
    position: sticky;
    left: 0;
    background-color: #f8f9fa;
    z-index: 10;
    border-right: 2px solid #dee2e6 !important;
}

/* Prevent text wrapping in headers */
.table th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

/* Prevent text wrapping in cells */
.table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* =================================================================
       STATUS STYLING
       =================================================================
    */
#CGI_list .status-failed {
    color: #dc3545;
    font-weight: bold;
}

#CGI_list .status-success {
    color: var(--ebl-green);
    font-weight: bold;
}

#CGI_list .date-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

    #CGI_list .date-row .form-group {
        flex: 1;
        margin-bottom: 0;
    }

/* calender */
#CGI_list .input-with-icon {
    position: relative;
}

    #CGI_list .input-with-icon input {
        padding-right: 40px; /* space for the icon */
    }

    #CGI_list .input-with-icon .calendar-icon {
        position: absolute;
        right: 10px;
        top: 60%;
        transform: translateY(-50%);
        color: #333;
        cursor: pointer;
        font-size: 18px;
    }

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
    #CGI_list .date-row {
        flex-direction: column;
        gap: 15px;
    }

    #CGI_list .date-row,
    #CGI_list .form-group {
        margin-bottom: 15px;
    }
}

/* =================================================================
       FOOTER STYLING
       =================================================================
    */


/* =================================================================
       RESPONSIVE STYLING
       =================================================================
    */
@media (max-width: 768px) {
    #CGI_list .parameters-container {
        flex-direction: column;
        gap: 15px;
    }

    #CGI_list .parameter-box {
        min-width: 100%;
    }

    #CGI_list .container-fluid {
        padding: 10px;
    }
}

/* =================================================================
       ANIMATION CLASSES
       =================================================================
    */
#CGI_list .fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#CGI_list .highlight-update {
    animation: highlightRow 1s ease-in-out;
}

@keyframes highlightRow {
    0% {
        background-color: var(--ebl-yellow);
    }

    100% {
        background-color: transparent;
    }
}



/* ################################################################################################### */

/*##########################| CGI Failed List End |########################### */

/* ################################################################################################### */