/* -------------------------------------------------------------------------- */
/* 1. RESET & BASE STYLES                                                     */
/* -------------------------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :root {
    --white: #fff;
    --border: #E5E7EB;
    --primary-color: #017653;
    --secondary-color: #E8BB02;
    --background-color: #F5F7FA;
    --table-header-bg:#F9FAFB;
    --table-header:#4A5565;
    --text-color:#101828;
    --black: #000;
    --white: #fff;
    --primary: #4abd99;
    --secondary: #5ac4a3;
    --buttonGradientPrimary: #3ba986;
    --buttonGradientSecondary: #047e58;
    --modalHeading: #2d9e7a;
  }

  /* a {
      text-decoration: none !important;
      color: #fff !important;
  } */


  /* -------------------------------------------------------------------------- */
  /* 2. FONT DECLARATIONS                                                       */
  /* -------------------------------------------------------------------------- */
  @font-face {
    font-family: alexandriaFont-ExtraLight;
    src: url("../fonts/webfonts/Alexandria-ExtraLight.ttf");
    font-display: swap;
  }

  @font-face {
    font-family: alexandriaFont-SemiBold;
    src: url("../fonts/webfonts/Alexandria-SemiBold.ttf");
    font-display: swap;
  }

  @font-face {
    font-family: poppinsFont-Thin;
    src: url("../fonts/webfonts/Poppins-Thin.ttf");
    font-display: swap;
  }

  @font-face {
    font-family: poppinsFont-Light;
    src: url("../fonts/webfonts/Poppins-Light.ttf");
    font-display: swap;
  }

  @font-face {
    font-family: poppinsFont-Regular;
    src: url("../fonts/webfonts/Poppins-Regular.ttf");
    font-display: swap;
  }

  @font-face {
    font-family: poppinsFont-Bold;
    src: url("../fonts/webfonts/Poppins-Bold.ttf");
    font-display: swap;
  }

  @font-face {
    font-family: poppinsFont-SemiBold;
    src: url("../fonts/webfonts/Poppins-SemiBold.ttf");
    font-display: swap;
  }

  @font-face {
    font-family: arial-regular;
    src: url("../fonts/webfonts/ARIAL-Regular.TTF");
  }
  @font-face {
    font-family: arial-Bold;
    src: url("../fonts/webfonts/ARIAL-Bold.TTF");
  }


  /* -------------------------------------------------------------------------- */
  /* 3. UTILITY CLASSES                                                         */
  /* -------------------------------------------------------------------------- */
  .fw-thin {
    font-weight: 100 !important;
  }

  .list-style {
    list-style-position: inside;
  }

  .fs-1-2 {
    font-size: 2.1875rem !important;
    /* 35px */
  }

  .error {
    font-size: 0.8125rem;
  }

  /* -------------------------------------------------------------------------- */
  /* 4. LAYOUT & CONTAINERS                                                     */
  /* -------------------------------------------------------------------------- */

  /* Main Page Backgrounds */

  .wrapper-container {
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(90deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(99, 61, 2, 0.1) 100%),
      url(../Images/login-bg-2.png);
  }

  /* Glassmorphism Form Section */
  .section-form {
    width: 660px;
    backdrop-filter: blur(15px);
    padding: 3.75rem 4.875rem;
    border-radius: 40px;
    background-color: rgba(0, 0, 0, 0.17);
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .section-form #login-form {
    width: 100%;
  }


  /* -------------------------------------------------------------------------- */
  /* 5. ICON & DECORATION POSITIONING                                           */
  /* -------------------------------------------------------------------------- */
  .companyNameIcon,
  .firstNameIcon,
  .lastNameIcon,
  .contactNumberIcon,
  .emailIcon,
  .passwordIcon {
    top: 50%;
    transform: translateY(-50%);
    left: 24px;
  }

  .eyeIcon {
    top: 50%;
    transform: translateY(-50%);
    right: 24px;
    cursor: pointer;
    z-index: 10;
  }

  /* Bottom line decorative element for headings */
  .signUpText::before {
    content: "";
    position: absolute;
    background-image: url("../img/bottom-line.png");
    width: 7.5rem;
    height: 5px;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    background-size: cover;
    z-index: 1;
  }

  /* background image */
  .wrapper-container {
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(90deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(99, 61, 2, 0.1) 100%),
      url(../img/login-bg-2.png);
  }

  /* -------------------------------------------------------------------------- */
  /* 6. COMPONENT STYLES (BUTTONS, TEXT, LINKS)                                 */
  /* -------------------------------------------------------------------------- */

  /* Grouping subheading styles */
  :is(.signup-subheading,
    .reset-subheading,
    .login-subheading,
    .forgot-subheading) {
    margin-bottom: 40px;
    font-family: alexandriaFont-ExtraLight;
  }

  /* 1. Shared Button Base Styles */
  .signup-btn,
  .login-btn,
  .forgot-btn,
  .reset-btn {
    margin-top: 40px;
    background: linear-gradient(to right,
        var(--buttonGradientPrimary),
        var(--buttonGradientSecondary));
    font-family: alexandriaFont-SemiBold;
    border: none;
    color: var(--white);
    border-radius: 40px;
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;

    &.signup-btn {
      padding-left: 7.9307rem;
      padding-right: 7.9307rem;
    }

    &.login-btn {
      padding-left: 8.63rem;
      padding-right: 8.63rem;
    }

    &.forgot-btn {
      padding-left: 5.974rem;
      padding-right: 5.974rem;
    }

    &.reset-btn {
      padding-left: 6.023rem;
      padding-right: 6.023rem;
    }
  }

  /* Nested Link & Text Groupings */
  .login-forgotLink {
    & a {
      color: var(--secondary);
      font-family: poppinsFont-SemiBold;
      text-decoration: none;

      &:hover {
        filter: brightness(1.2);
      }
    }
  }

  .agree-signUp {
    font-family: poppinsFont-Thin;

    &>span {
      font-family: poppinsFont-Bold;
    }
  }

  .already-signup,
  .already-login,
  .already-forgot {
    font-family: poppinsFont-Thin;

    & a {
      font-family: poppinsFont-Bold;
    }
  }

  /* Specific color overrides */
  #cs,
  #cs2 {
    color: var(--secondary);
  }

  :is(#forgot-account, #login-account, #signup-account) {
    & a {
      color: var(--primary);
    }
  }

  /* -------------------------------------------------------------------------- */
  /* 7. LIST STYLES                                                             */
  /* -------------------------------------------------------------------------- */
  .list-reset {
    list-style-position: inside;
  }

  .reset-ul {
    font-family: poppinsFont-Light;
  }

  .reset-li {
    font-family: poppinsFont-Thin;
    font-size: 0.875rem;
  }

  /* -------------------------------------------------------------------------- */
  /* 8. FORM NORMALIZATION (SCOPED)                                             */
  /* -------------------------------------------------------------------------- */
  :is(.form-signup, .form-reset, .form-forgot, .form-login)>form {

    /* Generic Inputs & Form Controls */
    & input[type="text"],
    & input[type="email"],
    & input[type="number"],
    & input[type="password"],
    & .form-control {
      font-size: 1rem !important;
      font-family: alexandriaFont-ExtraLight;
      border-radius: 40px !important;
      border: 1px solid var(--white) !important;
      background-color: transparent !important;
      padding-left: 3.25rem !important;
      min-height: 60px !important;
      color: var(--white) !important;
      letter-spacing: 0.5px !important;

      &::placeholder {
        color: var(--white);
        opacity: 1;
        font-weight: 100;
      }

      &:focus {
        box-shadow: none;
        border: 1px solid var(--primary) !important;
        background-color: transparent !important;
      }

      &:-webkit-autofill,
      &:-webkit-autofill:active {
        -webkit-text-fill-color: var(--white) !important;
        transition: background-color 5000s ease-in-out 0s;
      }
    }

    & .form-check-input {
      height: 20px !important;
      width: 20px !important;
      margin: 0;
      cursor: pointer;

      /* 1. Default State: Transparent background with primary border */
      background-color: transparent !important;
      border: 1px solid var(--primary) !important;

      /* 2. Focus State: Maintains primary border and removes Bootstrap shadow */
      &:focus {
        outline: 0;
        box-shadow: none;
        border-color: var(--primary) !important;
        /* Optional: background-color: rgba(74, 189, 153, 0.1) !important; */
      }

      /* 3. Checked State: Fills with primary color and shows checkmark */
      &:checked {
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
        outline: 0;
        box-shadow: none;
      }
    }

    /* Remove Number Input Spinners */
    & input[type="number"] {
      appearance: textfield;
      -moz-appearance: textfield;

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }
  }

  /* -------------------------------------------------------------------------- */
  /* 9. MEDIA QUERIES (DESKTOP ENHANCEMENTS)                                    */
  /* -------------------------------------------------------------------------- */
  @media (min-width: 1920px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl,
    .container-xxxl {
      max-width: 1632px;
    }

    .signup-section {
      justify-content: end !important;
    }
  }

  /* -------------------------------------------------------------------------- */
  /* 10. MODAL STYLES (PRIVACY POLICY & TERMS OF SERVICE)                        */
  /* -------------------------------------------------------------------------- */
  .modal-title {
    color: var(--modalHeading);
  }











  /* 25/12/2025 */

  /* ----------------Dashboard css---------------- */
  .menu-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .u-input {
    outline: 0;
    border: 1px solid #d0d0d0;
    padding: 5px 10px;
    height: 35px;
    font-size: 12px;
    border-radius: 10px;
    background-clip: padding-box;
  }

  .tooltip {
    width: 120px;
  }

  .tooltip-inner {
    padding: 8px 10px;
    color: var(--white);
    text-align: center;
    background-color: #051835;
    font-size: 12px;
    border-radius: 3px;
  }

  .tooltip-arrow {
    border-right-color: #051835 !important;
  }

  .header-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 12px;
    border-radius: 8px;
  }

  .header-icon .fa-bars:before,
  .header-icon .fa-navicon:before {
    content: "\f0c9";
    color: var(--secondary-color);
    font-size: 1.4rem;
  }

  .top-header {
    z-index: 10;
    width: 100%;
    transition: 0.3s ease-in-out;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #F5F7FA;
    /* padding: 2px 0px 10px 0px; */
  }

  .header-inner {
    margin-left: 24px;
    margin-right: 24px;
    margin-top: 12px;
    background: var(--white);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px;
    padding: 0 14px;
    border: 1px solid #e5e7eb;
  }

  .sidebar {
    width: 260px;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--white);
    transition: 0.3s ease-in-out;
    border-right: 1px solid var(--sidebar-border);
  }

  .sidebar .logo {
    padding: 10px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.5s ease-in-out;
    border-bottom: 1px solid var(--sidebar-border);
  }

  .sidebar .logo img {
    transition: width 0.5s ease-in-out;
    max-width: 150px;
  }

  .sidebar .logo .col-logo {
    display: none;
  }

  .sidebar-expanded .logo .col-logo {
    display: block;
  }

  .sidebar-expanded .logo .main-logo {
    display: none;
  }

  .sidebar-expanded .logo img {
    max-width: 100%;
  }

  body.sidebar-expanded .sidebar .logo {
    padding: 14px 0px;
  }

  .sidebar-expanded .sidebar {
    width: 80px;
  }
  .sidebar-expanded .sidebar .menu-items.active .active_dot {
    display: none !important;
    margin-left: auto;
  }
  .menu-nav>ul {
    display: flex;
    flex-direction: column;
  }

  .menu-nav>ul .menu-item {
    color: var(--white);
    max-width: 100%;
    overflow: hidden;
  }

  .menu-items span.items-name {
    text-wrap: nowrap;
  }

  .menu-nav>ul .menu-item-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 60px;
    position: relative;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
  }

  .menu-nav>ul .menu-item.is-active .menu-item-inner i {
    color: var(--white);
  }

  .menu-nav>ul .menu-item.is-active .menu-item-inner .menu-item-title span {
    color: var(--white);
  }

  .menu-nav>ul .menu-item.is-active .menu-item-inner:before {
    height: 36px;
    opacity: 1;
  }

  .menu-nav>ul .menu-item i {
    flex: 0 0 70px;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    transition: all 0.5s ease-in-out;
  }

  .menu-nav>ul .menu-item .menu-item-expand {
    position: relative;
    left: 100px;
    padding-right: 20px;
    margin-left: auto;
    transition: all 1s ease-in-out;
  }

  .sidebar-expanded .menu-nav>ul .menu-item .menu-item-expand {
    left: 0px;
  }

  .menu-nav>ul .menu-item .menu-item-title {
    flex-basis: 100%;
    padding-right: 10px;
    position: relative;
    transition: all 0.7s ease-in-out;
  }

  .sidebar-expanded .menu-nav>ul .menu-item .menu-item-title {
    left: 0px;
    opacity: 1;
  }

  .menu-nav>ul .menu-item .menu-submenu {
    background-color: #051835;
    padding: 15px;
    font-size: 12px;
    display: none;
  }

  .menu-nav>ul .menu-item .menu-submenu li {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid;
    border-color: var(--secondary-color);
    color: #5f9cfd;
  }

  .menu-nav>ul .menu-item .menu-submenu li:last-child {
    margin: 0;
    padding: 0;
    border: 0;
  }

  main.main-body {
    width: calc(100% - 260px);
    height: 100%;
    transition: 0.3s ease-in-out;
    float: right;
    min-height: 100vh;
  }

  main.main-body .content-wrapper {
    padding: 16px 24px;
    height: 100%;
  }

  main.main-body .content-wrapper .page-content {
    border-top: 1px solid #d0d0d0;
    padding-top: 25px;
  }

  main.main-body .content-wrapper-bg .page-content {
    background: var(--white);
    border-radius: 3px;
    border: 1px solid #d0d0d0;
    padding: 25px;
  }

  main.main-body .page-title {
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 25px;
  }

  .sidebar-expanded main.main-body {
    width: calc(100% - 80px);
  }

  .close-sidebar {
    display: none;
  }

  .hamburger-toggle img {
    height: 40px;
  }

  main.main-body {
    background: var(--background-color);
  }

  .menu-nav {
    position: relative;
    min-height: 100vh;
    background-color: #ffc107;
  }

  .log-out {
    position: absolute;
    bottom: 0;
  }

  /* div.container {
    max-width: 1200px;
  } */

  .dt-length>label {
    margin-left: 10px;
  }

  /* ------------Navbar----------- */
  .nav-right {
    gap: 20px;
  }

  .nav-right .notification i {
    font-size: 27px;
    color: var(--primary-color);
  }

  .profile {
    width: 39px;
  }

  .profile img {
    width: 100%;
  }

  .profile-name {
    display: flex;
    flex-direction: column;
    color: var(--text-color);
  }

  .profile-name .name {
    font-size: 14px;
  }

  .profile-name .designation {
    font-size: 12px;
  }

  ul.dropdown-menu.show {
    border-radius: 6px;
  }

  .dropdown a i {
    color: var(--text-color);
    padding: 5px;
  }

  .main-profile {
    padding: 6px;
    border-radius: 50px;
    background-color: transparent;
    min-width: 124px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none !important;
  }

  /* -----------------Sidebar start-------- */

  ul.menu-item {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  ul.menu-item li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    padding: 8px 20px;
    border-radius: 12px;
    gap: 12px;
    align-self: stretch;
  }

  ul.menu-item li a {
    color: #ffffff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    display: flex;
    gap: 13px;
    align-items: center;
  }


  ul.menu-item li span.items-name {
    color: rgba(255, 255, 255, 0.80);
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }

  ul.menu-item li.active span.items-name {
    color: #FFF;
    font-weight: 700;
  }

  ul.menu-item li.active {
    height: 56px;
    border: 1.4px solid #D5A416;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
    color: #fff;
  }

  .ul.menu-item li .active_dot {
    display: none;
  }

  .menu-items.active .active_dot {
    display: block;
    margin-left: auto;
  }


  ul.menu-item li.active span svg path {
    stroke: var(--white);
  }


  ul.menu-item li.active a {
    color: var(--white);
    text-decoration: none;
    font-weight: normal;
  }

  .sidebar-expanded .items-name {
    display: none;
  }

  .sidebar-expanded ul.menu-item li {
    justify-content: center;
    width: 48px;
  }



  /* ---------------Task Management--------------- */



  .nav-pills-container {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav-pills>li>a:has(:nth-child(2)) {
    color: var(--secondary-color);
  }

  .nav-pills {
    gap: 8px;
  }

  .task-input {
    display: block;
    width: 100%;
    height: 42px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 0.5px solid var(--border);
    border-radius: 23px;
  }

  .task-input:focus {
    outline: none;
  }

  .nav-pills::before {
    display: none !important;
  }

  .nav-pills-right {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .filter-grp {
    font-size: 16px;
    font-weight: 500;
    color: var(--secondary-color);
  }

  .urgent-container {
    width: auto;
    padding-left: 15px;
    position: relative;
  }

  .urgent-container .flag,
  .nav-pills span {
    font-size: 16px;
    font-weight: 500;
  }

  .urgent-container .flag1 {
    color: red;
  }

  .urgent-container .flag2 {
    color: orangered;
  }

  .urgent-container .task-count,
  .urgent-btns {
    background-color: var(--primary-color);
    padding: 3px 15px !important;
    color: var(--white);
    font-weight: 400;
    border-radius: 20px !important;
  }

  .urgent-container::before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    height: 30px;
    width: 4px;
    background-color: red;
  }

  .high-container::before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    height: 30px;
    width: 4px;
    background-color: orangered !important;
  }

  #cstmr_table1>tbody>tr:nth-child(even) {
    background-color: var(--line1) !important;
    color: var(--text-color);
  }

  #cstmr_table1>tbody>tr:nth-child(odd) {
    background-color: var(--white) !important;
    color: var(--text-color);
  }


  #grid .urgent-container {
    background-color: var(--primary-color);
    padding: 8px 10px;
    border-radius: 0 6px 6px 0;
    width: 100%;
  }

  #grid .urgent-container .urgent-btns,
  #grid .urgent-container .task-count {
    padding: 0 !important;
  }

  #grid .urgent-container .urgent-btns i {
    margin-right: 0;
  }

  #grid .urgent-container-last {
    width: fit-content;
  }

  #grid .urgent-container .grid-btn {
    padding: 4px;
    color: var(--white);
  }

  .grid-card-outer .grid-btn {
    border: none;
    background-color: transparent;
    font-size: 16px;
    padding: 5px;
    width: fit-content;
    margin-inline: auto;
  }

  #grid .urgent-container .grid-btn:focus {
    outline: none;
    box-shadow: none;
  }

  #grid .urgent-container::before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    height: 46px;
    width: 4px;
    background-color: var(--secondary-color);
  }

  #grid .urgent-container .flag {
    color: var(--white);
  }

  .grid-card-inner {
    padding: 15px;
    background-color: var(--white);
    border-radius: 23px;
  }

  .grid-card-inner>span {
    font-size: 15px;
  }

  .grid-items span {
    font-size: 16px;
  }

  .grid-card-outer {
    border-radius: 25px;
    padding: 5px 5px;
    background-color: var(--white);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }

  .grid-card {
    border-radius: 25px;
    background-color: var(--secondary-color);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }

  .nav-pills .nav-link.active {
    background-color: var(--primary-color);
  }

  .nav-pills .nav-link.active .pill-icon path,
  .nav-pills .nav-link.active g rect {
    stroke: white;
  }

  .nav-pills .nav-link.active .cal path {
    fill: white;
  }






  /* today css started */

  .menu-items.active .side_menu_icon {
    background-color: #d5a416;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05) inset;
  }

  .side_menu_icon {
    display: flex;
    width: 36px;
    height: 36px;
    justify-content: center;
    align-items: center;
    padding: 6px 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
  }

  .items-name {
    flex-grow: 1;
  }

  .new-orders {
    align-items: center;
    gap: 8px;
    background-color: #e8bb02;
    border: 1px dashed #d5a416;
    padding: 6px 8px;
    border-radius: 16px;
    color: #fff;
  }

  .neworder-icon {
    padding: 6px 8px;
    background-color: #0a7736;
    border-radius: 18px;
  }

  .neworder-count {
    padding: 6px 8px;
    background-color: #d5a416;
    border-radius: 18px;
    border: 1px solid #e8bb02;
  }

  .on-hold {
    align-items: center;
    gap: 8px;
    background-color: #f5f7fa;
    border: 1px solid #e5e7eb;
    padding: 6px 12px;
    border-radius: 16px;
  }

  .onhold-icon {
    padding: 6px 8px;
    background-color: #fff;
    border-radius: 18px;
  }

  .onhold-count {
    padding: 5px 12px;
    background-color: #fff;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
  }

  .dashboard-tabs {
    width: 100%;
    padding: 6px 8px;
    background-color: #fff;
    border-radius: 16px;
  }

  .table-icon {
    background-color: rgba(33, 164, 229, 0.08);
    padding: 4px 7px;
    border-radius: 20px;
  }

  .table-check {
    background-color: rgba(74, 189, 153, 0.08);
    padding: 4px 7px;
    border-radius: 20px;
  }

  .table-pause {
    background-color: rgba(213, 164, 22, 0.08);
    padding: 4px 7px;
    border-radius: 20px;
  }

  .table-delete {
    background-color: rgba(255, 1, 1, 0.08);
    padding: 4px 7px;
    border-radius: 20px;
  }

  table.dataTable>thead>tr {
    background-color: #f9fafb;
    /* border: 1px solid #e5e7eb; */
    /* height: 56px; */
  }

  /* table.dataTable>tbody>tr {
    height: 56px;
  } */

  table.dataTable>tbody>tr:nth-child(odd) {
    background-color: #ffffff;
  }

  table.dataTable>tbody>tr:nth-child(even) {
    background-color: #eff6f4 !important;
  }

  .data-table {
    background-color: #fff;
    border-radius: 16px;
  }

  .table-filter {
    display: flex;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }

  .table-export {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }

  .table-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }

  table.dataTable.stripe>tbody>tr:nth-child(odd)>*,
  table.dataTable.display>tbody>tr:nth-child(odd)>* {
    box-shadow: none !important;
  }

  table.dataTable.display>tbody>tr:nth-child(odd)>.sorting_1,
  table.dataTable.order-column.stripe>tbody>tr:nth-child(odd)>.sorting_1 {
    box-shadow: none !important;
  }

  table.dataTable.order-column>tbody tr>.sorting_1,
  table.dataTable.order-column>tbody tr>.sorting_2,
  table.dataTable.order-column>tbody tr>.sorting_3,
  table.dataTable.display>tbody tr>.sorting_1,
  table.dataTable.display>tbody tr>.sorting_2,
  table.dataTable.display>tbody tr>.sorting_3 {
    box-shadow: none !important;
  }

  .serach input {
    border: none !important;
  }

  .nav-order {
    padding: 10px 24px;
    align-items: center;
  }

  div.dt-container div.dt-layout-row {
    padding: 0 24px 8px 24px;
  }

  #myTable th,
  td {
    border-right: 1px solid #E5E7EB;
  }

  #myTable th,
  td:last-child {
    border-right: none;
  }

  table.dataTable thead th {
    font-weight: 600;
    padding: 12px !important;
    border-top: 1px solid #E5E7EB !important;
    border-bottom: 1px solid #E5E7EB !important;
    border-right: 1px solid #E5E7EB !important;
  }
  table.dataTable thead th:last-child {
    border-right: none !important;
  }

  div.dt-container .dt-paging .dt-paging-button.disabled,
  div.dt-container .dt-paging .dt-paging-button,
  div.dt-container .dt-paging .dt-paging-button.disabled:hover,
  div.dt-container .dt-paging .dt-paging-button.disabled:active {
    border-radius: 6px !important;
    padding: 6px 16px !important;
    color: #000 !important;
    font-size: 16px !important;
  }

  div.dt-container .dt-paging .dt-paging-button.current {
    color: #fff !important;
  }

  div.dt-container .dt-paging .dt-paging-button.current,
  div.dt-container .dt-paging .dt-paging-button.current:hover {
    color: #fff !important;
    background: #017653 !important;
  }

  .div.dt-container div.dt-layout-row {
      margin: 0.25em 0;
  }




  /* Tab navigation for order listing */


  .nav-tab-wrapper {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 20px;
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0 1px 4px 0 rgba(240, 187, 32, 0.10);
    border: 1px solid #E5E7EB;
  }

  .nav-tabs {
    border-bottom: none;
    gap: 20px;
  }

  .nav-tabs .nav-link {
    border-radius: 10px;
    border: 1px solid #E5E7EB;
    background: #F5F7FA;
    gap: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 48px;
    padding: 16px;
    color: #101828;
    text-align: center;
    font-family: Arial;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24.287px;
  }

  .nav-tabs .nav-link.active {
    background-color: var(--secondary-color);
    color: var(--white);
    border: 1px dashed #D5A416;
  }

  .nav-tabs .nav-link .tab_icons,
  .nav-tabs .nav-link .badge_styl {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: #fff;
    border-radius: 100px;
    border: 1px solid #E5E7EB;
  }

  .nav-tabs .nav-link.active .tab_icons {
    background-color: #0A7736;
    border: none;
  }

  .nav-tabs .nav-link.active .badge_styl {
    border: 1px solid #C49303;
    background: #D5A416;
    color: #FFF;
    text-align: center;
    font-family: Arial;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24.287px;
  }

  .nav-tabs .nav-link.active span svg path {
    stroke: var(--white);
  }



  .POS-btn{
   background-color: var(--primary-color);
   padding: 4px;
   border-radius: 8px;
  }
  .add-POS{
     color: #fff;
  }





  /* table custom styling */

  .table-wrapper {
    background-color: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
  }

  .table-heading {
    margin: 0.25em 0;
    padding: 8px 24px;
  }

  table.dataTable>thead>tr>th,
  table.dataTable>thead>tr>td,
  th.dt-orderable-asc.dt-orderable-desc.dtfc-fixed-end.dtfc-fixed-right.dt-ordering-desc {
  background-color: var(--table-header-bg) !important;
  color: var(--table-header);
  font-family: "Arial-Regular";
  font-style: Bold;
  font-size: 14px;
  line-height: 17.32px;
  letter-spacing: 0.65px;
  text-transform: uppercase;
  }


  table.dataTable tbody tr>.dtfc-fixed-start,
  table.dataTable tbody tr:nth-child(even)>.dtfc-fixed-end {
    background-color: #eff6f4 !important;
  }

  table.dataTable > tbody > tr > th, table.dataTable > tbody > tr > td
   {
  padding: 6px 10px;
  font-family: "Arial-Regular";
  font-weight: 400;
  font-size: 14px;
  line-height: 21.65px;
  letter-spacing: 0px;
  color: var(--text-color);
  ;

  }

  table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover, table.dataTable thead > tr > td.dt-orderable-asc:hover, table.dataTable thead > tr > td.dt-orderable-desc:hover {
      outline: none !important;
      outline-offset: inherit !important;
  }

  .span.dt-column-title {
      color: #4a5565;
  }


  /* previousone */

  .modal-footer .modalBtn {
    border-radius: 40px;
    background: linear-gradient(90deg, #3ba986 0%, #047e58 100%);
    display: inline-block;
    padding: 16px;
    width: 100%;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    text-align: center;
  }

  .modal-header .m-heading {
    color: #2d9e7a;
    font-size: 24px;
  }

  .successfullyOuterwrapper .modal-content {
    border-radius: 25px;
  }
  .successfullyOuterwrapper .modal-footer {
    padding: 0px 30px 30px 30px;
  }

  .successfullyOuterwrapper .modal-body {
    padding: 20px 70px;
  }
  .condition-wrapper .modal-content {
    padding: 30px;
    border-radius: 15px;
  }
  /* table export button */

  button.dt-button {
    border: 1.25px solid #E5E7EB !important;
    border-radius: 8px !important;
    background: transparent !important;
    outline: 0 !important;
  }


  div.dt-container div.dt-layout-end input {
    border: 1.25px solid #E5E7EB !important;
    border-radius: 8px !important;
    background: transparent !important;
    outline: 0 !important;
    padding: 6px 16px;
  }
  /* Table Search */
  .dt-search:after {
    content: '';
    width: 18px;
    height: 18px;
    position: absolute;
    left: 10px;
    top: 8px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.084 14.0967L16.6507 16.6634M15.8398 9.58008C15.8398 11.2377 15.1814 12.8274 14.0093 13.9995C12.8372 15.1716 11.2474 15.8301 9.58984 15.8301C7.93224 15.8301 6.34253 15.1716 5.17043 13.9995C3.99832 12.8274 3.33984 11.2377 3.33984 9.58008C3.33984 7.92247 3.99832 6.33276 5.17043 5.16066C6.34253 3.98856 7.93224 3.33008 9.58984 3.33008C11.2474 3.33008 12.8372 3.98856 14.0093 5.16066C15.1814 6.33276 15.8398 7.92247 15.8398 9.58008Z' stroke='%234A5565' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e ");
  }
  .dt-search {
    position: relative;
  }
  .dt-search input {
    padding-left: 32px !important;
  }


  /* Loader CSS */

  .loader-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }




  /* HTML: <div class="loader"></div> */
  .spinner{
    width: 50px;
    aspect-ratio: 1;
    --_c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000);
    background:
      var(--_c) top,
      var(--_c) left,
      var(--_c) right,
      var(--_c) bottom;
    background-size: 12px 12px;
    animation: l7 1s infinite;
  }
  @keyframes l7 {to{transform: rotate(.5turn)}}



  /* button */
  .btn:active{
      color: var(--white);
      background-color: var(--primary-color);
      border: 0;
  }
  .POS-btn .btn:hover{
    color: var(--white) !important;
  }



/* 14-01-2026 Company info */
.breadcrumb .breadcrumb-item a{
  text-decoration: none;
  color: #4D4D4D;
}

.breadcrumb .breadcrumb-item{
  text-decoration: none;
  color: #4D4D4D;
}

.input-field > label{
  font-size: 14px;
  color: #4A5565;
}

.input-field > input,
.group-type > select,
.credit-limit > input{
  padding: 12px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
}

.input-field > input::placeholder{
  font-size: 16px;
  color: #101828;
}

.Company.Details,
.permission-settings {
    padding: 20px;
    background-color: #fff;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
}

.labels > h6{
    font-weight: 400;
    color: #4A5565;
    margin-bottom: 13px;
}

.label.form-check-label{
  color: #101828;
  font-size: 16px;
  font-weight: 400;
}

.form-check.cstm-input {
    display: flex;
    gap: 10px;
    align-items: center;
}
.cstm-input > input{
  width: 24px;
  height: 24px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--border);
}


/* Edit customer user */

   .modal-backdrop.fade.show {
    z-index: 9;
}

.cstm-canvasbg{
    background-color: #F5F7FA;
}

.add-customer-admin div#offcanvasRight {
    max-width: 876px;
    width: 100%;
}




.add-customer-admin div.useredit {
  max-width: 876px;
  width: 100%;
}



.cstm-header{
  background: #0D5143;
  background: linear-gradient(90deg, #0d5143 0%, #0d5143 90%);
  color: #fff;
}

.user-icon{
  position: absolute;
  top: 42px;
  right: 20px;
}

.btn-update,
.btn-update:hover,
.btn-update:focus,
.btn.btn-update:active{
  background-color: #016749;
  border-radius: 10px;
  padding: 8px 22px;
  color: #fff;
}

.btn-cancel,
.btn-cancel:hover,
.btn-cancel:focus,
.btn.btn-cancel:active{
  background-color:#FFF;
  color: #101828;
  border-radius: 10px;
  padding: 8px 22px;
  border: 1px solid #E5E7EB;
  margin-right: 5px;
}

.add-admin {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  margin-bottom: 30px;
}

.first-name > input,
.last-name > input,
.email > input,
.contact > input,
.role > select{
  padding: 12px;
  border-radius: 10px;
}

/* Mask the phone number by default */
/* .phone-number::before {
  content: "(###) ###-#### ";
} */

/* Show the full phone number on hover */
/* .phone-number:hover::before {
  content: attr(data-phone);
} */






   /* Inspired by WhiteHatDesigner Card Layout dummy csss */

   input[readonly] {
    /* Blur the text content */
    /* filter: blur(2px); */

    /* Greyed-out appearance */
    background-color: #f2f2f2; /* Light grey background */
    border: 1px solid #ccc;    /* Muted grey border */
    color: #777;               /* Muted text color */

    /* Optional: UI refinements */
    cursor: not-allowed;       /* Changes cursor to a "blocked" icon */
    pointer-events: none;      /* Prevents user interaction */
    user-select: none;         /* Prevents text highlighting */
  }

   .doc-icon-wrapper {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    margin: -40px auto 0; /* Overlaps the header */
    padding: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-icon-inner {
    width: 100%;
    height: 100%;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-content {
    padding: 0 20px 20px;
}

.doc-title {
    font-weight: 700;
    color: #333;
}

.doc-purpose {
    font-size: 0.9rem;
    min-height: 45px;
}

.btn-view {
    color: #555;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 5px 15px;
    border: 1.5px solid #eee;
    border-radius: 8px;
    transition: all 0.2s;
}

.btn-view:hover {
    background: #f8f9fa;
    border-color: #ddd;
}


/* // for customer model chnge pass */

.modal-overlaychnge {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-contentchnge {
  background: white;
  padding: 24px;
  border-radius: 12px;
  width: 300px;
  font-family: sans-serif;
}

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

.input-group label {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
  color: #555;
}

.input-group input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.btn-save { background: #017653; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; }
.btn-cancel { background: #eee; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; }

.password-wrapper {
  display: flex;
  align-items: center;
}
.password-wrapper input {
  flex: 1;
}


h2 {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

h3 {
  color: #444;
  text-align: center;
  margin-bottom: 10px;
}

.dummylogo img,
.default-image img {
  height: 139px;
}

.default-image div {
  margin-bottom: 20px;
}

.color-box {
  background-color: #228B22;
  width: 50px;
  height: 50px;
  margin: 10px auto;
}

.company-info p {
  font-size: 16px;
  margin: 10px 0;
}

.company-info strong {
  color: #333;
}

.company-info {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.default-image div img {
  max-width: 200px;
  /* Add a max width for consistency */
}


.edit-size-btn, .delete-size-btn {
  text-decoration: none !important;
  border: none;
  outline: none;
  /* display: inline-flex; */
   /* Centers the SVG inside the link */
  align-items: center;
}


/* Creates space between text and dropdown */
.dt-length {
  display: flex !important;
  flex-direction: row;
}
.dt-length label {

  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #4b5563;
  margin-right: 6px;
}

/* Styles the dropdown itself */
.dt-length select {
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
    background-color: #fff;
}

/* Optional: Add spacing to the footer row */
.dt-layout-row:last-child {
  padding-top: 20px;
  margin-top: 10px;
  border-top: 1px solid #f3f4f6;
}

/* Ensures the Excel button looks clean */
.btn-export-excel {
  background: transparent !important;
  border: 1px solid #017653 !important;
  color: #017653 !important;
  border-radius: 4px;
  font-weight: bold;
}





#savePasswordBtn.disabled-btn,
#savePasswordBtn:disabled {
    background-color: #ccc !important;
    border-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.required_asterisk {
    color: red; /* or any other color */
    margin-left: 2px;
}

.is-invalid {
    border-color: #dc3545;
}

.validation-error {
    font-size: 13px;
}




/* Customer-Group */

.cstmr-group {
  padding: 20px;
  background-color: var(--white);
  border-radius: 16px;
  border: 1px solid var(--border);
}


.draggable-section-wrap {
  margin-top: 20px;
}

.group-type>label {
  font-size: 14px;
  color: var(--label-text);
}

.cstmr-ul {
  border-radius: 8px;
  border: 1px solid #9D9D9D;
  overflow: hidden;
}

.cstmr-ul li {
  border-bottom: 1px solid #e5e7eb;
}

.cstmr-ul li:nth-child(odd) {
  display: flex;
  height: 48px;
  padding-left: 20px;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  align-self: stretch;
  background: var(--white);

}

.cstmr-ul li:nth-child(even) {
  display: flex;
  height: 48px;
  padding-left: 20px;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  align-self: stretch;
  background: var(--Bg-Light-Green, #EFF6F4);
}

.cstmr-head {
  display: flex;
  height: 45px;
  padding: 12px 20px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  background: #007A55;
}

.cstmr-head h6,
.cstmr-head label {
  color: var(--white);
}

.cstmr-head p {
  color: var(--white);
}

.cstmr-ul li p {
  margin: 0;
}

.cstmr-ul li.selected {
  border: 1px solid #E8BB02;
  background: var(--Yellow-Gradient-Tab, linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%));
}

.cstmr-group .group-name input {
  max-width: 45%;
}

.move-button-wrap {
  display: flex;
  width: 48px;
  height: 440px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  margin: auto;
}

.forward-btn,
.backward-btn {
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--Primary-color, #016749);

}

.customer-name.selected {
  background-color: #e8bb02;
  color: white;
  padding: 5px;
  border-radius: 4px;
}
.drag-text{
  font-size: 14px;
  color: var(--label-text);
  text-align: center;
  padding: 20px;
  display: block;
  font-weight: 500;
}

.state-scroll-wrapper {
    scrollbar-width: thin; /* Firefox */
    scrollbar-gutter: stable;
}

/* Chrome, Edge, and Safari */
.state-scroll-wrapper::-webkit-scrollbar {
    width: 6px;
}
.state-scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}

/* Custom Scrollbar for better UI */
div::-webkit-scrollbar {
    width: 8px;
}
div::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
div::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 4px;
}
div::-webkit-scrollbar-thumb:hover {
    background: #555; 
}



.Product-info-wrapper{
  padding: 20px;
  gap: 20px;
  border-radius: 16px;
  background: #FFF;
  box-shadow: 0 1px 4px 0 rgba(240, 187, 32, 0.10);
  border: 1px solid var(--border);
}
.Product-info-wrapper h5{
  color: #0C0D0C;
  font-weight: 400;
  font-size: 1.125rem;

}
.Product-info-wrapper .input-field>label{
  color: #4A5565;
  font-size: 0.938rem;
}
.Product-info-wrapper .input-field>label>sup{
  color: #F02C2C;
}
.Product-info-wrapper .input-field .form-control ,.form-select{
  padding: 8px;
      border: 1px solid var(--border);
    border-radius: 10px;
}
.Label-content{
  padding: 20px;
  gap: 20px;
  border-radius: 16px;
  background: #FFF;
  box-shadow: 0 1px 4px 0 rgba(240, 187, 32, 0.10);
  border: 1px solid var(--border);
  margin-top: 16px;
}
.Label-content label>sup{
  color: #F02C2C;
}
.Mark-up{
  padding: 20px;
  gap: 20px;
  border-radius: 16px;
  background: #FFF;
  box-shadow: 0 1px 4px 0 rgba(240, 187, 32, 0.10);
  border: 1px solid var(--border);
  margin-top: 16px;
}
.Mark-up .form-control,
.Mark-up .form-select{
  background-color: #F5F7FA;
}

.Mark-up .table thead th{
  font-weight: 400;
  background-color: #017653;
  white-space: nowrap;
  color: white;
  border-left: 1px solid white;
}

iframe {
  width: 100% !important;
  margin: auto;
  display: block;

}
iframe{
  height:100px !important;
 
}
.rich-text-box{
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}
.rich-text-color{
  background-color: #EFF6F4;
  padding: 8px;
  border-radius: 8px 8px 0px 0px;
}
.rich-text-color button{
   border:none;
   background-color: transparent;
   
}
.rich-text-color .input-box{
  border: 1px solid #E5E7EB;
  background-color: white;
  width: 100px;
  border-radius: 5px;
  outline: none;

  padding-right: 8px;
}
.rich-text-color .input-search{
      border-right: 1px solid #4A5565;
    display: inline-block;
    padding-right: 10px;

}
.Label-content span{
  color: #4A5565;
  margin-top: 8px;
  display: block;
}
.border-inline{
  border-inline: 1px solid var(--black);
}


/* * document-detail screen */ 

.document-details .icon-info {
  display: flex;
   height: 52px;
  justify-content: space-between;
  align-items: center;
}



.document-details .card {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--white);
}

.icon-info .docs_icons {
  border-radius: 100px;
  height: 48px;
  width: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-info .docs_icons.first-icon {
  background: linear-gradient(180deg, #EFF6F4 0%, #D4EBE5 100%);
}

.icon-info .docs_icons.second-icon {
  background: linear-gradient(180deg, #FEF9E7 0%, #FCEDB3 100%);
}

.icon-info .docs_icons.third-icon {
  background: linear-gradient(180deg, #E5EBFF 0%, #C7D4F7 100%);
}

.icon-info .docs_icons.fourth-icon {
  background: var(--blue-light-8, rgba(33, 164, 229, 0.08));
}

.icon-info .tag-capsule {
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--white);
}

.icon-info .tag-capsule.first-cap {
  background: var(--primary-color);
}

.icon-info .tag-capsule.second-cap {
  background: #E8BB02;
}

.icon-info .tag-capsule.third-cap {
  background: #253B80;
}

.icon-info .tag-capsule.fourth-cap {
  background: #21A4E5;
}

.document-details .docs-content h4 {
  color: #101828;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
}

.document-details .docs-content p {
  color: #676C69;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.document-details .docs-card-footer {
  border-top: 1px solid var(--border);
  padding: 8px 0px;
}

.document-details .docs-card-footer span {
  color: #676C69;
}

.document-details .card {
  padding: 20px;
}