/* ================================
         🌈 DESIGN SYSTEM VARIABLES
      =================================*/
      :root {
        /* Colors */
        --black: #000;
        --blue: #007bff;
        --red: #dc3545;
        --FF671F: #FF671F;
        --color-FF671F: #FF671F;
        --color-626262: #626262;
        --color-000000: #000000;

        /* Font Sizes */
        --fs-10: 10px;
        --fs-12: 12px;
        --fs-14: 14px;
        --fs-16: 16px;
        --fs-18: 18px;
        --fs-20: 20px;
        --fs-24: 24px;
        --fs-30: 30px;

        /* Font Weight */
        --fw-100: 100;
        --fw-200: 200;
        --fw-400: 400;
        --fw-500: 500;
        --fw-600: 600;
        --fw-700: 700;
        --fw-800: 800;
        --fw-900: 900;

        /* Padding Scale (Top & Bottom) */
        --p-10: 10px;
        --p-20: 20px;
        --p-30: 30px;
        --p-40: 40px;
        --p-50: 50px;
        --p-60: 60px;
        --p-70: 70px;
        --p-80: 80px;
        --p-90: 90px;
        --p-100: 100px;
      }

      /* ================================
         ⚙️ Utility Classes
      =================================*/
      .pt-10 { padding-top: var(--p-10) }
      .pt-20 { padding-top: var(--p-20) }
      .pt-30 { padding-top: var(--p-30) }
      .pt-40 { padding-top: var(--p-40) }
      .pt-50 { padding-top: var(--p-50) }
      .pt-60 { padding-top: var(--p-60) }
      .pt-70 { padding-top: var(--p-70) }
      .pt-80 { padding-top: var(--p-80) }
      .pt-90 { padding-top: var(--p-90) }
      .pt-100 { padding-top: var(--p-100) }

      .pb-10 { padding-bottom: var(--p-10) }
      .pb-20 { padding-bottom: var(--p-20) }
      .pb-30 { padding-bottom: var(--p-30) }
      .pb-40 { padding-bottom: var(--p-40) }
      .pb-50 { padding-bottom: var(--p-50) }
      .pb-60 { padding-bottom: var(--p-60) }
      .pb-70 { padding-bottom: var(--p-70) }
      .pb-80 { padding-bottom: var(--p-80) }
      .pb-90 { padding-bottom: var(--p-90) }
      .pb-100 { padding-bottom: var(--p-100) }

      /* Font size helpers */
      .fs-10 { font-size: var(--fs-10) }
      .fs-12 { font-size: var(--fs-12) }
      .fs-14 { font-size: var(--fs-14) }
      .fs-16 { font-size: var(--fs-16) }
      .fs-18 { font-size: var(--fs-18) }
      .fs-20 { font-size: var(--fs-20) }
      .fs-24 { font-size: var(--fs-24) }
      .fs-30 { font-size: var(--fs-30) }
      
      /* Font Weight helpers */
      .fs-100 { font-size: var(--fs-100) }
      .fs-200 { font-size: var(--fs-200) }
      .fs-400 { font-size: var(--fs-400) }
      .fs-500 { font-size: var(--fs-500) }
      .fs-600 { font-size: var(--fs-600) }
      .fs-700 { font-size: var(--fs-700) }
      .fs-800 { font-size: var(--fs-800) }
      .fs-900 { font-size: var(--fs-900) }

      /* Color helpers */
      .color-FF671F { color: var(--color-FF671F) }
      .color-626262 { color: var(--color-626262) }
      .color-000000 { color: var(--color-000000) }
    
      /* ---------------------------
         🌐 RESET & BASE
      ----------------------------*/
      *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        font-family: "Roboto", sans-serif;
      }

      a {
        color: #0d6efd;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }

      img {
        max-width: 100%;
        height: auto;
      }

      ul, li {
        text-decoration: none;
        list-style: none;
        padding: 0;
        margin: 0;
      }
      /* ---------------------------
         🖋️ TYPOGRAPHY
      ----------------------------*/
      h1, h2, h3, h4, h5, h6 {
        font-weight: 700;
        color: #000;
        margin-bottom: 1rem;
      }

      p {
        margin-bottom: 1rem;
      }

      input:focus, textarea:focus, select:focus {
        border-color: none;
        outline: none;
        box-shadow: none;
      }

      /* ---------------------------
         🖋️ Login Page
      ----------------------------*/
      .login-page {
            display: flex;
            align-items: center;
            height: 100vh;
        }
      .login-logo img {
            width: 100%;
            padding: 0 100px;
        }
      .login-title h2 {
            font-size: 36px;
            font-weight: 500;
        }
        .login-card {
            background: #fff;
            border-bottom: 10px solid #FF671F;
            border-radius: 10px;
            padding: 50px 38px;
            box-shadow: 0px 8px 16px 4px rgba(0, 0, 0, 0.25);
        }
        .login-btn {
            font-size: 25px;
            font-weight: 600;
            color: #fff;
            background: rgba(255, 103, 31, 1);
            border: none;
            width: 100%;
            border-radius: 8px;
            padding: 8px 30px;
        }
        .g-icon {
            width: 48px;
        }
        .login-divider {
            position: relative;
            text-align: center;
            margin: 26px 0;
        }
        .login-divider span {
    font-size: 24px;
    font-weight: 400;
}
.login-divider:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 35%;
    background: #F0F0F0;
    left: 38px;
    top: 19px;
}
.login-divider:after {
    content: "";
    position: absolute;
    height: 2px;
    width: 35%;
    background: #F0F0F0;
    right: 38px;
    top: 19px;
}
.login-title img {
    width: 70px;
    margin-right: 12px;
}
.login-page:before {
    content: "";
    position: absolute;
    background: url(../images/s-logo.png) no-repeat;
    background-size: contain;
    opacity: .4;
    width: 100%;
    height: 100%;
    left: -130px;
    z-index: -1;
}
.login-sub-title {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}
.login-btn.disable {
    background: #FF671FB2;
}
.otp-inputs input {
    border: none;
    border-bottom: 1px solid #B9B9B9;
    width: 48px;
    text-align: center;
}
.resend-otp {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #B9B9B9;
    margin-top: 6px;
}



 /* ---------------------------
         🖋️ Header Section
 ----------------------------*/


    .search-bar {
        display: flex;
        gap: 10px;
        justify-content: flex-start;
        align-items: center;
      }
      .nav-input-group {
        border: 1px solid #ff6600;
        border-radius: 8px;
        display: flex;
        align-items: center;
      }
      .nav-input-group:focus-within {
        box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.3);
      }
      .nav-input-group .form-select,
      .nav-input-group .form-control {
        border: none;
        background-color: transparent;
        box-shadow: none;
      }
      .nav-input-group .form-select:focus,
      .nav-input-group .form-control:focus {
        box-shadow: none;
      }
      .nav-input-group-text {
        background: transparent;
        border: none;
        color: #555;
      }
      .search-icon {
        font-size: 1.2rem;
        color: #333;
        cursor: pointer;
      }
    .nav-form-select {
        width: 50px;
        font-size: 15px;
        border: none;
        border-right: 1px solid #c19797;
        background: #00000000;
    }
    .nav-logo {
        width: 149px;
    }
    .user-short {
    font-size: 11px;
    font-weight: 400;
    margin: 0;
    color: #030712;
}
.user-name {
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    color: #030712;
}
.nav-wrap {
    padding: 14px 20px;
    background: #F3F3F3;
}
/* Change the switch ON color to orange */
.cs-switch.form-check-input:checked {
  background-color: #E60A0A;
  border-color: #E60A0A;
}

/* Optional: add glow on focus */
.cs-switch.form-check-input:focus {
  box-shadow: none;
}

 /* ---------------------------
         🖋️ Nav Section
 ----------------------------*/
.menu-icon {
    background: linear-gradient(90deg, #07943B 21.15%, #15CB58 100%);
    padding: 12px 10px;
    width: 39px;
    border-radius: 8px;
}
.nav-lists {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
}
.nav-list {
    display: inline-block;
    padding: 10px 18px;
    font-size: 12px;
}
.nav-list img {
    width: 20px;
}
.nav-list.active {
    background: linear-gradient(90deg, #FFFFFF 0.47%, #FF671F 21.15%, #FF671F 83.66%, #FFFFFF 100%);
    color: #fff;
}


 /* ---------------------------
         🖋️ Overview page
 ----------------------------*/
 .chart-container {
    width: 40px;
    height: 200px;
    position: relative;
    margin: auto;
  }
.overview-card-graph {
    background: #fff;
    border-bottom: 2px solid #FF671F;
    box-shadow: 0px 4.23px 16.93px 0px #E9830314;
    border-radius: 8px;
    padding: 20px 10px;
    margin-bottom: 20px;
}
.overview-card-heading {
    font-size: 20px;
    font-weight: 600;
}
.overview-card-count {
  display: inline-block;
    margin-top: 10px;
    background-color: #FFEDD5;
    border: 1px solid #FED7AA;
    border-radius: 8px;
    padding: 6px 10px;
    color: #C2410C;
    font-size: 13px;
    font-weight: 600;
}

.btn-orange-outline {
  border-radius: 50px;
  border: 1px solid #F3F4F6;
  color: #EA8301;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 18px;
  transition: 0.3s;
}

.btn-orange-outline:hover {
  background-color: var(--FF671F);
  color: #fff;
}
.overview-card-title {
    font-size: 15px;
    font-weight: 400;
    color: #FF671F;
    margin: 0;
}
.cs-form-select {
    border: 1px solid #ff6600;
    border-radius: 8px;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
}
.escalations {
    background: #fff;
    border-bottom: 2px solid #FF671F;
    box-shadow: 0px 4.23px 16.93px 0px #E9830314;
    border-radius: 8px;
    padding: 20px 10px;
    margin-bottom: 20px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.escalations::-webkit-scrollbar {
    width: 6px;
}

.escalations::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.escalations::-webkit-scrollbar-thumb {
    background: #FF671F;
    border-radius: 10px;
}

.escalations::-webkit-scrollbar-thumb:hover {
    background: #ff5a1a;
}
.cs-form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('../images/icons/forward-arrow.svg') no-repeat right 12px center / 10px auto;;
    border: 1px solid #FF671F;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 14px 12px;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
}
 /* ---------------------------
  🖋️ Shipments Incoming and Shorting
 ----------------------------*/
.page-header-title h1 {
    font-size: 32px;
    font-weight: 600;
    color: #101750;
    margin: 0;
}
.page-header-title {
    background: #FFF3ED;
    padding: 22px 58px;
}
.form-control-first {
  display: flex;
  align-items: center;
  justify-content: space-between;
    font-size: 14px;
    font-weight: 400;
    color: #A3AED0;
    border: 1px solid #E0E5F2;
    border-radius: 10px;
    width: 100%;
    padding: 12px 18px;
}
.bag-id {
    font-size: 22px;
    font-weight: 700;
    color: #EA580C;
    margin: 0;
}
.barcode-icon {
    width: 26px;
}
.ps-count {
    font-size: 14px;
    font-weight: 400;
    color: #000;
}
.table-card {
    background: #FFF3ED;
    border: 1px solid #E9E9E9;
    box-shadow: 0px 4px 14px 0px #70707040;
    padding: 30px 42px;
}
.table-head-bg {
  background: linear-gradient(91.79deg, #FF671F 34.13%, #0B8443 68.61%);
  
}
.table-head-bg th {
    font-size: 10px;
    color: #fff;
    font-weight: 400;
}
.chip-16A34A {
    font-size: 12px;
    background: #16A34A;
    color: #fff;
    border-radius: 6px;
    padding: 6px 8px;
}
.cs-table {
  border: 1px solid #FF671F;
  border-radius: 5px;
}
.table>:not(caption)>*>* {
  border-bottom: 1px solid #FF671F;

}
::-webkit-scrollbar {
  height: 3px;
  border-radius: 30px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #FF671F;
}
.primary-button {
    font-size: 14px;
    font-weight: 700;
    background: #16A34A;
    border: none;
    color: #ffff;
    padding: 10px 30px;
    border-radius: 8px;
}
.secondary-button {
    font-size: 14px;
    font-weight: 700;
    background: #FF671F;
    border: none;
    color: #ffff;
    padding: 10px 30px;
    border-radius: 8px;
}
.cs-nav-link {
    font-size: 15px;
    font-weight: 600;
    background: #0000;
    border: none;
    color: #626262;
    padding: 14px 20px;
    border-bottom: 1px solid #E6E6E6;
}
.cs-nav-link.active {
    color: #000000;
    border-bottom: 3px solid var(--color-FF671F);
}
.cs-card {
    background: #fff;
    border-radius: 8px;
    border-bottom: 2px solid var(--color-FF671F);
    padding: 19px 24px;
    box-shadow: 0px 4.23px 16.93px 0px #E9830314;
}
.create-bag-count h5 {
    font-size: 20px;
    font-weight: 700;
}
.create-bag-count h2 {
    font-size: 80px;
    font-weight: 700;
    color: var(--color-FF671F);
    text-align: center;
}
.create-bag-count p {
    font-size: 17px;
    font-weight: 700;
    color: #626262;
    text-align: center;
}
 .custom-pagination {
      display:flex;
      gap:18px;
      align-items:center;
      justify-content:end;
      padding-top: 24px;
    }
  .chev img {
      width: 22px;
  }
    .custom-pagination .chev {
      font-size: 20px;
      line-height: 1;
      color: #111;
      cursor: pointer;
      user-select: none;
    }

    .custom-pagination .page-list {
      display:flex;
      gap:12px;
      align-items:center;
      list-style:none;
      padding:0;
      margin:0;
    }

    .custom-pagination .page-list li {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width: 18px;
      height: 24px;
      color: #111;
      font-weight: 600;
      cursor: pointer;
    }

    /* inactive number */
    .custom-pagination .page-list li .page-num {
      font-size: 14px;
      padding: 2px 6px;
      border-radius: 4px;
      color: #111;
      transition: all .15s;
    }
    .custom-pagination .page-list li .page-num:hover {
      background: rgba(0,0,0,0.04);
    }

    /* active circle style */
    .custom-pagination .page-list li.active .page-num {
      background: var(--color-FF671F);
      color: #fff;
      padding: 6px 9px;
      border-radius: 50%;
      box-shadow: 0 0 0 2px var(--color-FF671F);
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border: 2px solid #fff;
    }

    /* ellipsis */
    .custom-pagination .ellipsis {
      padding: 0 6px;
      color: #333;
      font-size: 18px;
    }

.awb-count {
  font-size: 6px;
  color: #050505;
  margin: 0;
}
.t-add-icon {
    width: 20px;
}
.cs-progress {
    width: 100%;
    border-radius: 50px;
    height: 8px;
    margin-bottom: 4px;
}
.table-card-heading {
    font-size: 18px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 0px;
}
.p-card-btn {
    font-size: 12px;
    font-weight: 600;
    background: #FF671F;
    border: 1px solid #FF671F;
    color: #ffff;
    padding: 4px 12px;
    border-radius: 8px;
}
.b-card-btn {
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #FF671F;
    color: #FF671F;
    padding: 4px 12px;
    border-radius: 8px;
    background: transparent;
}