@font-face {
  font-family: "BRCandor";
  src: url("webfonts/BRCandor-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

:root {
  --tooltip-font-size: 0.875rem;
  --tooltip-max-width: 200px;
  --tooltip-color: #ffffffcc;
  --tooltip-bg: #334454;
  --tooltip-border-radius: 12px;
  --tooltip-opacity: 0.9;
  --tooltip-padding-y: 0.125rem;
  --tooltip-padding-x: 0.25rem;
  --tooltip-margin: 0;

  --tooltip-arrow-width: 0.8rem;
  --tooltip-arrow-height: 0.4rem;
  --tooltip-arrow-color: black;
}


body,
html {
  height: 100%;
  margin: 0;
  font-family: "BRCandor", sans-serif;
}

.container-fluid {
  height: 100%;
}

.left-panel {
  background-color: #0d3b66;
  background-image: url("icons/left-background.svg");
  background-size: cover;
  background-position: right;
  color: white;
  text-align: center;

  &.sign-up {
    padding: 48px;
    text-align: left;

    img {
      width: 199px;
      height: 37px;
    }

    .signup-title {
      max-width: 440px;
      margin-top: 72px;
      font-weight: 700;
      font-size: 40px;
      line-height: 52px;

      span {
        color: #f7581f;
      }
    }

    .signup-description {
      margin-top: 20px;
      font-weight: 400;
      font-size: 20px;
      line-height: 26px;
    }

    .signup-title1 {
      max-width: 380px;
      margin-top: 260px;
      font-weight: 700;
      font-size: 24px;
      line-height: 31px;
    }

    .divider {
      margin: 12px 0 20px 0;
      width: 205px;
      border-bottom: 4px solid #ffffff52;
    }

    .pros-list {
      display: flex;
      flex-direction: column;
      gap: 20px;

      img {
        width: 21px;
        height: 18px;
      }

      .description {
        max-width: 360px;
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;

        span {
          font-weight: 600;
        }
      }
    }
  }

  /* &.login {
        img {
            margin-top: 336px;
            width: 282px;
            height: 53px;
        }
    } */

  /* &.reset-password {
        img {
            margin-top: 336px;
            width: 282px;
            height: 53px;
        }
    } */
}

.left-panel h1 {
  margin-top: 20px;
  font-size: 24px;
}

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

.reset-password-box {
  width: 100%;
  max-width: 438px;
  padding: 0px;
  /* margin-bottom: 200px; */

  h2 {
    font-size: 34px;
    font-weight: 700;
    text-align: center;
    line-height: 44.2px;
    color: #303233;
    margin-bottom: 16px;
  }

  p.step-description {
    color: #6c757d;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    line-height: 26px;
    color: #303233cc;
    margin-bottom: 60px;
    /* width: 520px; */
    /* margin-left: -41px; */
  }
}

.login-box {
  width: 100%;
  max-width: 438px;
  padding: 0px;
  /* margin-bottom: 100px; */

  h2 {
    font-size: 34px;
    font-weight: 700;
    text-align: center;
    line-height: 44.2px;
    color: #303233;
    margin-bottom: 16px;
  }

  p {
    color: #6c757d;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    line-height: 31.2px;
    color: #303233cc;
    margin-bottom: 36px;
  }
}

.signup-box {
  width: 100%;
  max-width: 438px;
  padding: 0px;

  .signup2Form {
    .divider {
      width: 100%;
      border-bottom: 1px solid #f1f0f0;
      margin: 32px 0;
    }

    p {
      text-align: left;
      margin: 0;
      color: #303233;

      p {
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
      }
    }

    .btn-choice {
      display: flex;
      gap: 12px;
      width: 100%;
      height: 72px;
      border-radius: 12px;
      padding: 16px 23px;
      border: 1px solid #ebebeb;
      font-weight: 500;
      font-size: 20px;
      line-height: 22px;
      align-items: center;
      color: #303233;

      div {
        padding-top: 4px;
      }

      &.selected {
        background-color: #0032641a;
      }

      &:hover {
        background-color: #00326438;
      }
    }

    .form-check {
      display: flex;
      justify-content: center;
      align-items: center;

      .form-check-input {
        background-color: #c0c0c0;
        border: #003264;
        box-shadow: none;
      }

      .form-check-label {
        color: #303233;
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;

        a {
          font-weight: 600;
          color: #003264;
          cursor: pointer;
          text-decoration: none;
        }
      }
    }
  }
}

.signup-box h2 {
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  line-height: 44.2px;
  color: #303233;
  margin-bottom: 16px;
}

.signup-box p {
  color: #6c757d;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  line-height: 28px;
  color: #303233cc;
  margin-bottom: 36px;
}

.btn-primary {
  background-color: #0d3b66;
  border: none;
  border-radius: 10px;
  padding: 10px;
  width: 100%;
  cursor: pointer;

  &.round {
    border-radius: 50px;
  }

  &.white {
    background-color: white;
    color: #003264;
    border: 1px solid #ebebeb;

    &:hover {
      background-color: rgb(215, 214, 214);
    }
  }

  &.fit {
    width: fit-content;
  }
}

.btn-primary:hover {
  background-color: #0b2e4a;
}

.form-check-label {
  color: #6c757d;
}

.forgot-password {
  color: #003264;
  text-align: center;
  display: block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  margin-top: 16px;
  cursor: pointer;
  text-decoration: none;
}

.back-to-login {
  color: #003264;
  text-align: center;
  display: block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  margin-top: 16px;
  cursor: pointer;
  text-decoration: none;
}

.or-divider {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 12px;
  margin: 40px 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: #303233;
}

.or-divider::before,
.or-divider::after {
  content: "";
  width: 100px;
  margin: 0 12px;
  border-bottom: 2px solid #ebebeb;
}

.or-divider:not(:empty)::before {
  margin-right: 0.25em;
}

.or-divider:not(:empty)::after {
  margin-left: 0.25em;
}

.btn-google {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 14px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #303233;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  cursor: pointer;
  text-decoration: none;

  &:hover {
    background-color: #f7f6f6;
  }
}

.btn-google img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  margin-top: -2px;
}

.join-link {
  color: #0d3b66;
  text-align: center;
  display: block;
  margin-top: 32px;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;

  a {
    font-weight: 600;
    color: #0d3b66;
    text-decoration: none;
  }
}

.error {
  border-color: #dc1313;
}

.form-control {
  border-radius: 10px;
  padding: 12px;
  padding-top: 16px;
  margin-bottom: 10px;
  background-color: #f9f9f9;

  &::placeholder {
    color: #30323366;
  }

  &:focus {
    border-color: #003264;
    /* background-color: #F9F9F9; */
    outline: 0;
    box-shadow: none;
  }
}

.form-control-color {
  width: 32px;
  height: 32px;
  border-radius: 5px !important;
  outline: none !important;
  border: none;
}

.color-picker-label {
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  letter-spacing: 0%;

}



.input-group {
  margin-bottom: 10px;
  position: relative;
}

.input-group span {
  z-index: 100;
}

.input-group .form-control {
  border-radius: 12px !important;
  padding-left: 40px;
  padding-top: 16px;
  margin: 0 !important;

  &.code {
    width: 100%;
    padding-left: 12px;
  }
}

.input-group .input-icon {
  position: absolute;
  left: 10px;
  top: 27px;
  transform: translateY(-50%);
  color: #6c757d;
}

/* Currency input styling - seamless prefix */
.input-group > .input-group-text:first-child {
  background-color: #f6f7f9;
  border-color: #dee2e6;
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 10px 12px;
}

.input-group > .input-group-text:first-child + .form-control {
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  padding-left: 12px !important;
}

.form-check-input:checked {
  background-color: #003264;
  border-color: #003264;
}

.invalid-input {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #dc1313;
  width: 100%;
  margin-top: 8px;
}

.login-failed {
  border-radius: 12px;
  padding: 16px;
  background-color: #dc13131a;
  color: #003264;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;

  div {
    text-align: center;
    font-weight: 700;
  }
}

.failed-field {
  border-radius: 12px;
  padding: 16px;
  background-color: #dc13131a;
  color: #003264;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;

  div {
    text-align: center;
    font-weight: 700;
  }
}

.reset-password {
  cursor: pointer;
}

.sign-up-link {
  cursor: pointer;
}

.sign-in-link {
  cursor: pointer;
}

.styled-select {
  position: relative;

  img {
    position: absolute;
    right: 16px;
    top: 16px;
  }
}

.sidebar {
  position: fixed;
  z-index: 1041;
  top: 0;
  left: 0;
  width: 240px;
  transition: margin-left 0.3s ease-in-out;
  padding-top: 27px;
  padding-left: 24px;
  padding-right: 28px;
  padding-bottom: 68px;
  background-color: #003264;
  color: #ffffff14;
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 24px;

  @media (max-width: 992px) {
    margin-left: -300px;
    width: 80%;
    max-width: 300px;

    &.show {
      margin-left: 0;
    }
  }

  .logo {
    /* padding-bottom: 70px; */

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

  .nav-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .nav {
    .category-divider {
      color: #ffffffb8;
      font-weight: 500;
      font-size: 12px;
      line-height: 15.6px;
      margin-bottom: 8px;
      text-transform: uppercase;
    }

    .gap {
      height: 24px;
    }
  }

  .user-info {
    position: absolute;
    display: flex;
    padding: 12px;
    border-radius: 12px;
    gap: 12px;
    align-items: center;
    bottom: 12px;
    left: 24px;
    right: 28px;
    font-weight: 400;
    font-size: 16px;
    line-height: 20.8px;
    color: white;
    cursor: pointer;
    background-color: #003264;

    span {
      padding-top: 4px;
    }

    img.arrow-left {
      rotate: -90deg;
    }

    &:hover {
      background-color: #ffffff14;
    }
  }

  .user-info-box {
    position: fixed;
    left: 250px;
    bottom: 12px;
    z-index: 100;
    background-color: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 8px #0000001a;
    width: 265px;
    /* height: 175px; */


    /* switch business section */
    .switch-business-heading {
      font-size: 14px;
      font-weight: 600;
      line-height: 18.2px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #003264;

    }

    .profile {
      cursor: pointer;

      &:hover {
        background-color: #f7f7f7;
      }

      .info {
        font-weight: 600;
        font-size: 16px;
        line-height: 20.8px;
        color: #303233;
      }

      .email {
        font-weight: 400;
        font-size: 14px;
        line-height: 18.2px;
        color: #303233cc;
      }
    }

    .divider {
      border-top: 1px solid #00000014;
      width: 233px;
      margin: 12px 0;
    }

    .update-profile {
      cursor: pointer;
      color: #003264cc;
      font-weight: 400;
      font-size: 16px;
      line-height: 20.8px;
      padding: 10px 12px 6px;
      margin-bottom: 12px;

      img {
        margin-top: -4px;
      }

      &:hover {
        background-color: #f7f7f7;
      }
    }

    .log-out {
      cursor: pointer;
      color: #003264cc;
      font-weight: 400;
      font-size: 16px;
      line-height: 20.8px;
      padding: 10px 12px 6px;

      img {
        margin-top: -4px;
      }

      &:hover {
        background-color: #f7f7f7;
      }
    }
  }
}

.sidebar .nav-link {
  color: white;
  font-weight: 400;
  font-size: 16px;
  line-height: 20.8px;
  padding: 12px 0px 8px 12px;
  display: flex;
  gap: 10px;

  &.submenu {
    border-left: 2.5px solid #ebebeb33;
  }

  img {
    margin-top: -4px;
    transition: all;
  }

  img.collapse {
    rotate: 0deg;
    display: block;

    &.show {
      rotate: 180deg;
    }
  }

  img.collapsing {
    height: 100%;
  }
}

.sidebar .nav-link.active {
  background-color: #ffffff14;
  border-radius: 8px;
}

.sidebar .nav-link:hover {
  background-color: #ffffff28;
  border-radius: 8px;
}

.sidebar .nav-link i {
  margin-right: 10px;
}

.content {
  padding-left: 240px;
  width: 100%;
  overflow-x: hidden;
  /* overflow-y: scroll; */

  .offcanvas-back {
    width: 100%;
    height: 100%;
    background: #00326452;
    z-index: 100;
    position: fixed;
    left: 0;
    top: 0;
    display: none;

    &.show {
      display: block;
    }
  }

  @media (max-width: 992px) {
    padding-left: 0px;
  }

  .title {
    /* padding: 24px 32px; */
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 31.2px;
    color: #303233;
    background-color: #ffffff;
    height: 80px;

    .menu-icon {
      display: none;
    }

    @media (max-width: 992px) {
      .menu-icon {
        display: block;
        cursor: pointer;

        &:hover {
          background-color: #00000014;
        }
      }
    }

    .btn {
      width: fit-content;
      border-radius: 50px;
      background-color: #003264;
      color: white;
      padding: 9px 16px 7px 16px;
      border: 1px solid #0d3b66;

      &.white {
        background-color: white;
        color: #003264;
        border: 1px solid #ebebeb;

        &:hover {
          background-color: rgb(215, 214, 214);
        }
      }

      &:hover {
        background-color: #003264dd;
      }
    }

    @media screen and (max-width: 576px) {
      .btn {
        font-size: 14px;
      }
    }

    @media screen and (max-width: 400px) {
      .btn {
        font-size: 10px;
      }
    }

    box-shadow: 0px 0px 4px 0px #00000014 !important;
    border-bottom: 1px solid #00000014 !important;
    position: relative;
    z-index: 10;
  }

  @media screen and (max-width: 400px) {
    .title {
      font-size: 14px;
    }
  }

  .main {
    /* padding: 32px; */
    background-color: #f6f7f9;
    min-height: 100vh;

    .products {
      .section-title {
        color: #303233;
        font-weight: 600;
        font-size: 20px;
        line-height: 26px;
        padding-top: 6px;
      }
    }

    .customers {
      .section-title {
        color: #303233;
        font-weight: 600;
        font-size: 20px;
        line-height: 26px;
        padding-top: 6px;
      }
    }

    @media screen and (max-width: 576px) {
      .customers {
        .section-title {
          font-size: 16px;
        }
      }
    }

    .products.table {
      th {
        background-color: #f7f7f7;
        font-size: 13px;
        font-weight: 600;
        line-height: 20px;
        padding: 9px 12px 7px 12px;
        color: #303233;
        white-space: nowrap;
      }

      td {
        img {
          width: 32px;
          height: 32px;
          border-radius: 4px;
        }

        .status-active {
          background-color: #06a60e0f;
          border-radius: 50px;
          color: #06a60e;
          font-size: 12px;
          font-weight: 600;
          line-height: 15.6px;
          padding: 5px 12px 3px;
        }

        .status-disable {
          background-color: #6e88a20f;
          border-radius: 50px;
          color: #6e88a2;
          font-size: 12px;
          font-weight: 600;
          line-height: 15.6px;
          padding: 5px 12px 3px;
        }

        .status-archived {
          background-color: #9e9e9e0f;
          border-radius: 50px;
          color: #9e9e9e;
          font-size: 12px;
          font-weight: 600;
          line-height: 15.6px;
          padding: 5px 12px 3px;
        }

        .status-draft {
          background-color: #0032640f;
          border-radius: 50px;
          color: #003264;
          font-size: 12px;
          font-weight: 600;
          line-height: 15.6px;
          padding: 5px 12px 3px;
        }

        .status-workshop {
          background-color: #ff98000f;
          border-radius: 50px;
          color: #ff9800;
          font-size: 12px;
          font-weight: 600;
          line-height: 15.6px;
          padding: 5px 12px 3px;
        }

        .price-schedule {
          color: #6e88a2;
          font-size: 11px;
          font-weight: 500;
          line-height: 14.4px;
        }

        button {
          border: 1px solid #ebebeb;
          border-radius: 5px;
          padding: 6px;

          &:hover {
            border-color: #999898;
          }
        }
      }
    }

    .customers.table {
      th {
        background-color: #f7f7f7;
        font-size: 13px;
        font-weight: 600;
        line-height: 20px;
        padding: 9px 12px 7px 12px;
        color: #303233;
      }

      td {
        img {
          width: 32px;
          height: 32px;
          border-radius: 4px;
        }

        .status-active {
          background-color: #06a60e0f;
          border-radius: 50px;
          color: #06a60e;
          font-size: 12px;
          font-weight: 600;
          line-height: 15.6px;
          padding: 5px 12px 3px;
        }

        .status-disable {
          background-color: #6e88a20f;
          border-radius: 50px;
          color: #6e88a2;
          font-size: 12px;
          font-weight: 600;
          line-height: 15.6px;
          padding: 5px 12px 3px;
        }

        .status-archived {
          background-color: #9e9e9e0f;
          border-radius: 50px;
          color: #9e9e9e;
          font-size: 12px;
          font-weight: 600;
          line-height: 15.6px;
          padding: 5px 12px 3px;
        }

        .status-draft {
          background-color: #0032640f;
          border-radius: 50px;
          color: #003264;
          font-size: 12px;
          font-weight: 600;
          line-height: 15.6px;
          padding: 5px 12px 3px;
        }

        .status-workshop {
          background-color: #ff98000f;
          border-radius: 50px;
          color: #ff9800;
          font-size: 12px;
          font-weight: 600;
          line-height: 15.6px;
          padding: 5px 12px 3px;
        }

        .price-schedule {
          color: #6e88a2;
          font-size: 11px;
          font-weight: 500;
          line-height: 14.4px;
        }

        button {
          border: 1px solid #ebebeb;
          border-radius: 5px;
          padding: 6px;

          &:hover {
            border-color: #999898;
          }
        }
      }
    }

    .nav {
      .nav-item {
        .nav-link {
          padding-bottom: 24px;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 8px;
          font-weight: 500;
          font-size: 18px;
          line-height: 23.4px;
          color: #00326480;

          span {
            background-color: #e4e5e8;
            padding: 5px 10px 3px;
            border-radius: 40px;
            font-weight: 500;
            font-size: 16px;
            line-height: 18px;
            color: #003264cc;
          }

          &:hover {
            color: #003264;
            border-width: 0;
            background-color: #f7f7f7;
          }

          &.active {
            font-weight: 600;
            font-size: 18px;
            line-height: 23.4px;
            color: #303233;
            border-width: 0;
            border-bottom: 4px solid #303233;
            background: none;
          }
        }
      }
    }

    .upcoming-pickups-next-returns {
      .section-title {
        height: 30px;
      }

      padding-top: 40px;

      .table {
        padding: 1px;
        border-radius: 12px;
        background-color: #ebebeb;
        overflow: hidden;
        border: 1px solid #ebebeb;
      }

      .table th,
      .table td {
        vertical-align: middle;
        white-space: nowrap;
      }

      .table th {
        border-top: none;
        background-color: #f7f7f7;
        color: #303233cc;
        font-weight: 600;
        font-size: 12px;
        line-height: 20px;
        padding: 7px 12px 5px 12px;
      }

      .table td {
        padding: 11px 12px 9px 12px;
        background-color: #ffffff;
        font-weight: 500;
        font-size: 13px;
        line-height: 20px;
        color: #303233;
        border-width: 0;
        border-left-width: 1px;

        &.time {
          color: #303233b2;
          font-weight: 500;
          font-size: 13px;
          line-height: 18px;
        }

        .text-success, .text-bold {
          font-weight: 600;
          font-size: 13px;
          line-height: 16px;
        }

        .text-success {
          color: #26af51;
        }

        &.text-end {
          padding: 7px 16px 5px 16px;
          justify-items: center;
          color: #003264;
          font-weight: 600;
          font-size: 14px;
          line-height: 32px;
        }
      }

      .table tr {
        cursor: pointer;
        background-color: white;

        &:hover td {
          background-color: #f7f7f7;
        }
      }

      .badge {
        font-size: 0.9em;
      }

      .view-all {
        text-decoration: none;
        width: fit-content;
        color: #003264;
      }

      .view-all:hover {
        text-decoration: underline;
      }

      .section-title {
        font-weight: 600;
        font-size: 20px;
        line-height: 26px;
        color: #303233;
      }

      .late-pickups,
      .late-returns {
        background-color: #f7581f14;
        border-radius: 15px;
        color: #f7581f;
        padding: 8px 16px 6px 16px;
        font-weight: 600;
        font-size: 12px;
        line-height: 15.6px;
      }

      .empty-state-card {
        background-color: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        height: 240px;
        display: flex;
        flex-direction: column;
      }

      .empty-state-header {
        border-bottom: 1px solid #f3f4f6;
        padding: 24px;
        height: 77px;
      }

      .empty-state-title-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .empty-state-title {
        font-weight: 700;
        font-size: 18px;
        line-height: 28px;
        color: #111827;
        margin: 0;
        letter-spacing: -0.5px;
      }

      .empty-state-badge {
        background-color: #fee2e2;
        border: 1px solid #fee2e2;
        border-radius: 9999px;
        color: #dc2626;
        font-weight: 600;
        font-size: 12px;
        line-height: normal;
        padding: 4px 12px;
        letter-spacing: -0.5px;
      }

      .empty-state-content {
        padding: 32px 24px 24px 24px;
        text-align: center;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .empty-state-icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        flex-shrink: 0;
      }

      .empty-state-icon {
        width: 64px;
        height: 64px;
        object-fit: contain;
      }

      .empty-state-message {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #111827;
        margin: 0 0 8px 0;
        letter-spacing: -0.5px;
      }

      .empty-state-description {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #6b7280;
        margin: 0;
        letter-spacing: -0.5px;
      }

      .empty-state-footer {
        border-top: 1px solid #f3f4f6;
        padding: 7px 16px 5px 16px;
        text-align: center;
        height: 53px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .empty-state-footer .view-all {
        color: #003264;
        font-weight: 600;
        font-size: 14px;
        line-height: 32px;
        text-decoration: none;
      }

      .empty-state-footer .view-all:hover {
        text-decoration: underline;
      }
    }

    .upcoming-bookings-active-bookings {
      .section-title {
        height: 30px;
      }

      .live-bookings-badge {
        background-color: #f0fdf4;
        border: 1px solid #dcfce7;
        border-radius: 9999px;
        color: #16a34a;
        font-weight: 600;
        font-size: 12px;
        line-height: normal;
        padding: 4px 12px;
        letter-spacing: -0.5px;
      }

      padding-top: 40px;

      .table {
        padding: 1px;
        border-radius: 12px;
        background-color: #ebebeb;
        overflow: hidden;
        border: 1px solid #ebebeb;
      }

      .table th,
      .table td {
        vertical-align: middle;
      }

      .table th {
        border-top: none;
        background-color: #f7f7f7;
        color: #303233cc;
        font-weight: 600;
        font-size: 12px;
        line-height: 20px;
        padding: 7px 12px 5px 12px;
      }

      .table td {
        padding: 11px 12px 9px 12px;
        background-color: #ffffff;
        font-weight: 500;
        font-size: 13px;
        line-height: 20px;
        color: #303233;

        &.time {
          color: #303233b2;
          font-weight: 500;
          font-size: 13px;
          line-height: 18px;
        }

        .text-success {
          color: #26af51;
          font-weight: 600;
          font-size: 13px;
          line-height: 16px;
        }

        &.text-end {
          padding: 7px 16px 5px 16px;
          justify-items: center;
          color: #003264;
          font-weight: 600;
          font-size: 14px;
          line-height: 32px;
        }
      }

      .table tr {
        cursor: pointer;

        &:hover td {
          background-color: #f7f7f7;
        }
      }

      .badge {
        font-size: 0.9em;
      }

      .view-all {
        text-decoration: none;
        width: fit-content;
        color: #003264;
      }

      .view-all:hover {
        text-decoration: underline;
      }

      .section-title {
        font-weight: 600;
        font-size: 20px;
        line-height: 26px;
        color: #303233;
      }

      .late-pickups,
      .late-returns {
        background-color: #f7581f14;
        border-radius: 15px;
        color: #f7581f;
        padding: 8px 16px 6px 16px;
        font-weight: 600;
        font-size: 12px;
        line-height: 15.6px;
      }

      .empty-state-card {
        background-color: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        height: 240px;
        display: flex;
        flex-direction: column;
      }

      .empty-state-content {
        padding: 32px 24px 24px 24px;
        text-align: center;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .empty-state-icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        flex-shrink: 0;
      }

      .empty-state-icon {
        width: 64px;
        height: 64px;
        object-fit: contain;
      }

      .empty-state-message {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #111827;
        margin: 0 0 8px 0;
        letter-spacing: -0.5px;
      }

      .empty-state-description {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #6b7280;
        margin: 0;
        letter-spacing: -0.5px;
      }

      .empty-state-footer {
        border-top: 1px solid #f3f4f6;
        padding: 7px 16px 5px 16px;
        text-align: center;
        height: 53px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .empty-state-footer .view-all {
        color: #003264;
        font-weight: 600;
        font-size: 14px;
        line-height: 32px;
        text-decoration: none;
      }

      .empty-state-footer .view-all:hover {
        text-decoration: underline;
      }
    }

    .availability-by-products {
      padding-top: 50px;

      .card-wrapper {
        width: 100%;
        border-radius: 16px;
        overflow-x: scroll;
        overflow-y: hidden;

        &::-webkit-scrollbar {
          width: 0px;
          /* Width of the scrollbar */
          height: 0px;
          /* Height of the scrollbar for horizontal scrollbars */
        }

        &::-webkit-scrollbar-track {
          background: #f6f6f6;
          /* Track background color for dark theme */
          border-radius: 4px;
          /* Track border-radius */
        }

        &::-webkit-scrollbar-thumb {
          background-color: #565656;
          /* Thumb color for dark theme */
          border-radius: 4px;
          /* Thumb border-radius */
          border: 0px solid #e3e3e3;
          /* Padding around thumb */
        }

        &::-webkit-scrollbar-thumb:hover {
          background-color: #c0c0c0;
          /* Thumb color on hover for dark theme */
        }

        .card {
          min-width: 1000px;

          .days {
            padding: 16px 12px 8px 12px;
            gap: 8px;

            .day {
              display: flex;
              border-width: 0;
              justify-content: center;
              align-items: center;
              gap: 4px;
              flex-grow: 1;
              flex-direction: column;
              height: 72px;
              text-align: center;
              cursor: pointer;
              padding: 12px 4px;
              border-radius: 10px;
              background-color: #f7f7f7;

              &:hover {
                background-color: #f7f7f777;
              }

              color: #003264;

              span {
                color: #003264cc;
                font-weight: 400;
                font-size: 12px;
                line-height: 16px;
              }

              font-weight: 600;
              font-size: 20px;
              line-height: 20px;

              &.active {
                background-color: #003264;
                color: #ffffff;

                &:hover {
                  background-color: #003264ee;
                }

                span {
                  color: #ffffffcc;
                }
              }
            }
          }
        }
      }

      .container {
        margin-top: 20px;
      }

      .header {
        font-weight: 600;
        font-size: 20px;
        line-height: 26px;

        .btn {
          border-radius: 40px;
          border: 1px solid #dadada;
          padding: 9px 20px 7px 20px;
          color: #003264cc;
          font-weight: 500;
          font-size: 14px;
          line-height: 24px;
          background: none;

          &:hover {
            background-color: #dadada88;
          }
        }
      }

      .time-slots-wrapper {
        position: relative;
        width: 100%;

        .main-time-slots {
          width: 100%;
          overflow-x: scroll;
          overflow-y: hidden;
          position: relative;

          &::-webkit-scrollbar {
            width: 8px;
            /* Width of the scrollbar */
            height: 8px;
            /* Height of the scrollbar for horizontal scrollbars */
          }

          &::-webkit-scrollbar-track {
            background: #f6f6f6;
            /* Track background color for dark theme */
            border-radius: 4px;
            /* Track border-radius */
          }

          &::-webkit-scrollbar-thumb {
            background-color: #565656;
            /* Thumb color for dark theme */
            border-radius: 4px;
            /* Thumb border-radius */
            border: 2px solid #e3e3e3;
            /* Padding around thumb */
          }

          &::-webkit-scrollbar-thumb:hover {
            background-color: #c0c0c0;
            /* Thumb color on hover for dark theme */
          }
        }

        img {
          position: absolute;
          cursor: pointer;
          z-index: 5;
        }
      }

      .time-slots {
        width: 200%;
      }

      .time-slot-bar {
        gap: 4px;
        height: 72px;
        padding: 8px 16px;
        border-top: 0.5px solid #f5f5f5;

        .flex-base-1 {
          flex-basis: 8.3333%;
        }

        .flex-base-1 {
          flex-basis: 8.3333%;
        }

        .flex-base-2 {
          flex-basis: 16.6666%;
        }

        .flex-base-3 {
          flex-basis: 25%;
        }

        .flex-base-4 {
          flex-basis: 33.3333%;
        }

        .flex-base-5 {
          flex-basis: 41.6666%;
        }

        .flex-base-6 {
          flex-basis: 50%;
        }

        .flex-base-7 {
          flex-basis: 58.3333%;
        }

        .flex-base-8 {
          flex-basis: 66.6666%;
        }

        .flex-base-9 {
          flex-basis: 75%;
        }

        .flex-base-10 {
          flex-basis: 83.3333%;
        }

        .flex-base-11 {
          flex-basis: 91.6666%;
        }

        .flex-base-12 {
          flex-basis: 100%;
        }

        .time-slot {
          text-align: center;
          padding: 10px 16px;
          border-radius: 10px;
          cursor: pointer;
          height: 36px;
        }

        .time-slot.available {
          background-color: #d4edda;
          color: #155724;
        }

        .time-slot.unavailable {
          background-color: #f8d7da;
          color: #721c24;
        }
      }

      .availability-items {
        padding-top: 60px;
        width: 300px;

        .item {
          /* display: flex; */
          gap: 8px;
          height: 72px;
          padding: 8px 12px;
          color: #003264cc;
          font-weight: 500;
          font-size: 14px;
          line-height: 18.2px;
          border-top: 1px solid #f5f5f5;
          border-right: 1px solid #f5f5f5;
          cursor: pointer;

          &:hover {
            background-color: #f7f7f7;
          }

          .availability {
            font-size: 14px;
            color: #003264cc;
            font-weight: 400;
            font-size: 12px;
            line-height: 15.6px;
            margin: 0;
            padding-top: 4px;

            span {
              color: #06a60e;

              &.zero {
                color: #dc3545;
              }
            }
          }
        }
      }

      .time-header {
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
        color: #00326499;
        width: 20px;
      }

      .current-time {
        position: absolute;
        bottom: 0;
        transform: translateX(-90%);
        rotate: 90deg;
        transform-origin: center left;
        background-color: #003264;
        font-weight: 600;
        font-size: 8px;
        line-height: 10.4px;
        color: white;
        border-radius: 10px;
        padding: 3px 10px 1px 10px;
      }

      .current-time-line {
        position: absolute;
        bottom: 0;
        rotate: 270deg;
        transform: translateX(10px);
        transform-origin: center left;
        border-bottom: 1px solid #0032641a;
        width: 300px;
      }

      .timeline {
        display: flex;
        align-items: center;
        height: 60px;
        padding: 0 16px;
      }

      .timeline .time-header {
        flex: 1;
        text-align: center;
      }

      .timeline .current-time {
        flex: 1;
        height: 1px;
        background-color: #002855;
      }
    }

    .availability-by-experience {
      padding-top: 50px;

      .time-slots-wrapper {
        position: relative;
        width: 100%;

        .main-time-slots {
          width: 100%;
          overflow-x: scroll;
          overflow-y: hidden;
          position: relative;

          &::-webkit-scrollbar {
            width: 8px;
            /* Width of the scrollbar */
            height: 8px;
            /* Height of the scrollbar for horizontal scrollbars */
          }

          &::-webkit-scrollbar-track {
            background: #f6f6f6;
            /* Track background color for dark theme */
            border-radius: 4px;
            /* Track border-radius */
          }

          &::-webkit-scrollbar-thumb {
            background-color: #565656;
            /* Thumb color for dark theme */
            border-radius: 4px;
            /* Thumb border-radius */
            border: 2px solid #e3e3e3;
            /* Padding around thumb */
          }

          &::-webkit-scrollbar-thumb:hover {
            background-color: #c0c0c0;
            /* Thumb color on hover for dark theme */
          }
        }

        img {
          position: absolute;
          cursor: pointer;
          z-index: 5;
        }
      }

      .time-slots {
        width: 200%;
      }

      .header {
        font-weight: 600;
        font-size: 20px;
        line-height: 26px;
        height: 42px;
      }

      .card-wrapper {
        width: 100%;
        border-radius: 16px;
        overflow-x: scroll;
        overflow-y: hidden;

        &::-webkit-scrollbar {
          width: 0px;
          /* Width of the scrollbar */
          height: 0px;
          /* Height of the scrollbar for horizontal scrollbars */
        }

        &::-webkit-scrollbar-track {
          background: #f6f6f6;
          /* Track background color for dark theme */
          border-radius: 4px;
          /* Track border-radius */
        }

        &::-webkit-scrollbar-thumb {
          background-color: #565656;
          /* Thumb color for dark theme */
          border-radius: 4px;
          /* Thumb border-radius */
          border: 0px solid #e3e3e3;
          /* Padding around thumb */
        }

        &::-webkit-scrollbar-thumb:hover {
          background-color: #c0c0c0;
          /* Thumb color on hover for dark theme */
        }

        .card {
          border-radius: 16px;

          .days {
            padding: 16px 12px 8px 12px;
            gap: 8px;

            .day {
              border-width: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 4px;
              flex-grow: 1;
              flex-direction: column;
              height: 72px;
              text-align: center;
              cursor: pointer;
              padding: 12px 4px;
              border-radius: 10px;
              background-color: #f7f7f7;
              color: #003264;

              &:hover {
                background-color: #f7f7f777;
              }

              span {
                color: #003264cc;
                font-weight: 400;
                font-size: 12px;
                line-height: 16px;
              }

              font-weight: 600;
              font-size: 20px;
              line-height: 20px;

              &.active {
                background-color: #003264;
                color: #ffffff;

                &:hover {
                  background-color: #003264ee;
                }

                span {
                  color: #ffffffcc;
                }
              }
            }
          }
        }
      }

      .book-slots {
        position: relative;
      }

      .book-slot-bar {
        gap: 20px;
        padding: 8px 16px;
        border-top: 0.5px solid #f5f5f5;

        .flex-base-1 {
          flex-basis: 8.3333%;
        }

        .flex-base-1 {
          flex-basis: 8.3333%;
        }

        .flex-base-2 {
          flex-basis: 16.6666%;
        }

        .flex-base-3 {
          flex-basis: 25%;
        }

        .flex-base-4 {
          flex-basis: 33.3333%;
        }

        .flex-base-5 {
          flex-basis: 41.6666%;
        }

        .flex-base-6 {
          flex-basis: 50%;
        }

        .flex-base-7 {
          flex-basis: 58.3333%;
        }

        .flex-base-8 {
          flex-basis: 66.6666%;
        }

        .flex-base-9 {
          flex-basis: 75%;
        }

        .flex-base-10 {
          flex-basis: 83.3333%;
        }

        .flex-base-11 {
          flex-basis: 91.6666%;
        }

        .flex-base-12 {
          flex-basis: 100%;
        }

        .book-slot {
          text-align: center;
          padding: 10px 16px;
          border-radius: 10px;
          cursor: pointer;
          height: 74px;
          background-color: #f7f7f7;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .book-title {
            font-weight: 600;
            font-size: 16px;
            line-height: 20px;
            color: #303233;
            align-items: center;

            span {
              font-weight: 600;
              font-size: 12px;
              line-height: 15.6px;
              color: #26af51;
              padding: 5px 10px 3px;
              height: 24px;
              border-radius: 20px;
              background-color: #26af5114;

              &.failed {
                color: #dc1313;
                background-color: #dc131314;
              }
            }
          }

          .detail {
            img {
              margin-top: -2px;
              position: relative;
            }

            .name {
              color: #303233;
              font-weight: 400;
              font-size: 12px;
              line-height: 16px;
            }

            .time {
              color: #303233;
              font-weight: 400;
              font-size: 12px;
              line-height: 16px;
            }
          }

          &.gap {
            cursor: default;
          }

          .detail {
            flex-direction: column;
          }
        }

        .small.book-slot {
          height: 96px;
        }

        .book-slot.gap {
          background: none;
          color: #721c24;
        }
      }

      .time-header {
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
        color: #00326499;
      }

      .current-time {
        position: absolute;
        bottom: 0;
        transform: translateX(-90%);
        rotate: 90deg;
        transform-origin: center left;
        background-color: #003264;
        font-weight: 600;
        font-size: 8px;
        line-height: 10.4px;
        color: white;
        border-radius: 10px;
        padding: 3px 10px 1px 10px;
      }

      .current-time-line {
        position: absolute;
        bottom: 0;
        rotate: 270deg;
        transform: translateX(10px);
        transform-origin: center left;
        border-bottom: 1px solid #0032641a;
        width: 300px;
      }

      .timeline {
        position: relative;
        display: flex;
        align-items: center;
        height: 60px;
        padding: 0 16px;

        img {
          position: absolute;
        }
      }

      .timeline .time-header {
        flex: 1;
        text-align: center;
      }

      .timeline .current-time {
        flex: 1;
        height: 1px;
        background-color: #002855;
      }
    }
  }
}

.card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: white;
  border-bottom: none;
  font-weight: bold;
}

.card-body {
  background-color: white;
}

.performance-snapshot {
  .section-title {
    color: #303233;
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
  }

  .sales-widgets {
    overflow-x: scroll;

    .card {
      box-shadow: none;
      border: 1px solid #ebebeb;
    }
  }

  .sales-widgets::-webkit-scrollbar {
    display: none;
    /* For Chrome, Safari, and Edge */
  }

  .sales-widgets {
    scrollbar-width: none;
    /* For Firefox */
    -ms-overflow-style: none;
    /* For Internet Explorer and Edge */
  }

  .content {
    padding: 0;
    display: flex;
    gap: 20px;

    .card {
      display: flex;
      gap: 8px;
      flex-direction: column;
      min-width: 240px;
      height: 108px;
      border-radius: 16px;
      padding: 20px 16px;

      @media (max-width: 992px) {
        height: 111px;
        gap: 4px;
      }

      .card-title {
        color: #303233cc;
        font-weight: 500;
        font-size: 14px;
        line-height: 18.2px;
        margin-bottom: 0;

        @media (max-width: 992px) {
          padding: 0;
          font-size: 12px;
          line-height: 15.6px;
        }

        img {
          cursor: pointer;
        }
      }

      .card-text {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 12px;
        font-weight: 500;
        font-size: 32px;
        line-height: 41.6px;
        color: #003264;

        @media (max-width: 992px) {
          flex-direction: column;
          align-items: start;
          gap: 4px;
          font-size: 24px;
          line-height: 31.2px;
        }

        p {
          margin: 0;
          padding-top: 2px;
        }

        .text-success {
          display: flex;
          gap: 2px;
          padding: 4px 0;
          color: #06a60e;
          font-weight: 500;
          font-size: 14px;
          line-height: 18.2px;

          @media (max-width: 992px) {
            padding: 0;
          }
        }

        .text-fail {
          span {
            font-size: 28px;
          }

          display: flex;
          gap: 2px;
          padding: 4px 0;
          color: #6e88a2;
          font-weight: 500;
          font-size: 14px;
          line-height: 18.2px;
        }
      }
    }

    .card:last-child {
      margin-right: 0;
    }
  }
}

.table th,
.table td {
  vertical-align: middle;
}

.availability .card {
  margin-top: 20px;
}

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

.availability .card-header .btn {
  background-color: #1a2b4c;
  color: white;
}

.availability .table th,
.availability .table td {
  text-align: center;
}

.availability .table th {
  background-color: #f8f9fa;
}

.availability .table td {
  background-color: #e9ecef;
}

.availability .table td.available {
  background-color: #d4edda;
}

.availability .table td.unavailable {
  background-color: #f8d7da;
}

.availability .table td {
  padding: 10px;
}

.tooltip-inner {
  background-color: #334454 !important;
  color: #ffffffcc;
  transform: translateX(40%);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  padding: 8px;
  border-radius: 8px;
  text-align: left;
  width: 287px;
}

.tooltip-arrow {
  &::before {
    border-bottom-color: #334454 !important;
  }
}

a {
  text-decoration: none;
  display: block;
}

.modal-custom {
  box-shadow: 0 1px 8px #0000001a;
  position: fixed;
  height: fit-content;
  background-color: white;
  border-radius: 12px;
  z-index: 200;

  @media (max-width: 992px) {
    width: 100%;
    bottom: -100%;
    left: 0 !important;
    top: unset !important;

    &.show {
      bottom: 0 !important;
    }
  }

  &.show {
    z-index: 200;
  }

  .modal-dialog {
    width: 462px;

    @media (max-width: 992px) {
      width: 100%;
    }

    .modal-content {
      position: relative;
      padding: 24px 16px;
      border-radius: 12px;
      overflow: hidden;

      .divider {
        border-bottom: 2px solid #f7f7f7;
        margin: 20px 0;
      }

      .close {
        position: absolute;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        background-color: #f7f7f7;
        color: #003264;
        right: 20px;
        top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 25px;
        padding-top: 4px;
        padding-left: 1px;
        cursor: pointer;

        &:hover {
          background-color: #f7f7f788;
        }
      }

      .card-header {
        border-bottom: none;
        padding-bottom: 0;

        p {
          color: #303233;
          font-weight: 400;
          font-size: 12px;
          line-height: 16px;
        }

        img {
          margin-top: -2px;
        }

        .card-title {
          color: #303233;
          font-weight: 600;
          font-size: 16px;
          line-height: 20px;
          padding-top: 2px;
        }

        .badge {
          background-color: #26af5114;
          color: #26af51;
          padding: 5px 10px 3px 10px;
          font-weight: 600;
          font-size: 12px;
          line-height: 15.6px;
          border-radius: 40px;
        }
      }

      .card-header .close {
        font-size: 1.2rem;
        color: #6c757d;
        cursor: pointer;
      }

      .card-body {
        padding-top: 0;

        .btn {
          padding: 10px 16px 8px 16px;
          border-radius: 12px;
          font-weight: 600;
          font-size: 16px;
          line-height: 22px;
          color: #303233;
          background-color: #ffffff;

          &:hover {
            background-color: #ebebeb33;
          }
        }

        .activity-title {
          color: #303233;
          font-weight: 600;
          font-size: 13px;
          line-height: 16.9px;
        }

        .account-title {
          color: #303233;
          font-weight: 600;
          font-size: 13px;
          line-height: 16.9px;
        }

        .rental-title {
          color: #303233;
          font-weight: 600;
          font-size: 13px;
          line-height: 16.9px;
        }

        .activity-detail {
          color: #303233;
          font-weight: 400;
          font-size: 12px;
          line-height: 16px;
        }

        .account-detail {
          color: #303233;
          font-weight: 400;
          font-size: 12px;
          line-height: 16px;
        }

        .table {
          background-color: #ebebeb;
          border: 1px solid #ebebeb;
          border-radius: 4px;
          overflow: hidden;

          th {
            color: #303233;
            font-weight: 500;
            font-size: 12px;
            line-height: 16px;
            padding: 5px 8px 3px 8px;
          }

          td {
            color: #303233cc;
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            padding: 5px 8px 3px 8px;

            &.total {
              font-weight: 600;
            }
          }
        }
      }

      .btn {
        background-color: #f8f9fa;
        border: 1px solid #ced4da;
        border-radius: 20px;
        color: #007bff;
        font-weight: bold;
      }
    }
  }
}

::-webkit-scrollbar {
  width: 8px;
  /* Width of the scrollbar */
  height: 8px;
  /* Height of the scrollbar for horizontal scrollbars */
}

::-webkit-scrollbar-track {
  background: #003264;
  /* Track background color for dark theme */
  border-radius: 4px;
  /* Track border-radius */
}

::-webkit-scrollbar-thumb {
  background-color: #565656;
  /* Thumb color for dark theme */
  border-radius: 4px;
  /* Thumb border-radius */
  border: 2px solid #003264;
  /* Padding around thumb */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #767676;
  /* Thumb color on hover for dark theme */
}

.table {
  padding: 1px;
  border-radius: 12px;
  background-color: #ebebeb;
  overflow: hidden;
  border: 1px solid #ebebeb;
}

.table th,
.table td {
  vertical-align: middle;
  white-space: nowrap;
}

.table th {
  white-space: nowrap;
  border-top: none;
  background-color: #f7f7f7;
  color: #303233;
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  padding: 7px 12px 5px 12px;
}

.table td {
  padding: 11px 12px 9px 12px;
  background-color: #ffffff;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  color: #303233;
  border-width: 0;
  border-left-width: 1px;
}

.table tr {
  cursor: pointer;
  background-color: white;

  &:hover td {
    background-color: #f7f7f7;
  }
}

.dropdown {
  box-shadow: none !important;

  .btn {
    border: 1px solid #dadada;
    background: none;
    border-radius: 50px;
    /* color: #003264CC; */
    color: #303233;
    padding: 9px 20px 7px 20px;

    &:hover {
      background-color: #e8ecf3;
    }

    img {
      margin-top: -2px;
    }

    &.v1 {
      background: #f9f9f9;
      border-color: #f9f9f9;
    }

    &.v2 {
      background-color: #ffffff;
      border-color: #ffffff;
    }
  }

  .dropdown-menu {
    padding: 12px;
    border-radius: 12px;
    border: none;
    background-color: white;
    overflow: hidden;
    box-shadow: 0 1px 8px #0000001a;
    width: 200px;

    .dropdown-item {
      padding: 8px;
      color: #003264cc;
      display: flex;
      align-items: center;
      gap: 8px;

      &:focus {
        background-color: rgba(255, 255, 255, 0.076);
        color: #00326487;
      }
    }

    .v1 {
      padding-right: 0px;
    }


    .menu-items {
      max-height: 200px;
      overflow-x: hidden;
      overflow-y: scroll;
      padding-right: 2px;

      &::-webkit-scrollbar {
        width: 8px;
        /* Width of the scrollbar */
        height: 8px;
        /* Height of the scrollbar for horizontal scrollbars */
      }

      &::-webkit-scrollbar-track {
        background: #f6f6f6;
        /* Track background color for dark theme */
        border-radius: 4px;
        /* Track border-radius */
      }

      &::-webkit-scrollbar-thumb {
        background-color: #565656;
        /* Thumb color for dark theme */
        border-radius: 4px;
        /* Thumb border-radius */
        border: 2px solid #e3e3e3;
        /* Padding around thumb */
      }

      &::-webkit-scrollbar-thumb:hover {
        background-color: #c0c0c0;
        /* Thumb color on hover for dark theme */
      }
    }
  }

  .dropdown-item {
    font-size: 14px;
    color: #2c3e50;
  }

  .dropdown-item:hover {
    background-color: #e8f0fe;
  }

  .form-control {
    font-size: 14px;
  }

  .dropdown-header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
    padding: 0px;
    padding-right: 12px;
    padding-bottom: 8px;

    .search-box {
      border-radius: 8px;
      background-color: white;
      color: #003264cc;
    }

    input {
      margin-top: 2px;
      /* border: 1px solid #DADADA; */
      /* background-color: white; */
      /* margin-bottom: 0px; */
      /* height: 32px; */
    }
  }
}

.pagination {
  margin-bottom: 0;
}

.pagination .page-item.active .page-link {
  border-radius: 4px;
  border-color: #003264;
  background-color: #003264;
  height: 32px;
  color: #ffffff;
}

.pagination .page-link {
  color: #212b36;
  height: 32px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}

.page-item.disabled .page-link {
  color: #c4cdd5;
  border: 1px solid #dfe3e8;
  background-color: #ffffff;
}

.search-box {
  display: flex;
  align-items: center;
  border: 1px solid #dcdcdc;
  border-radius: 50px;
  padding: 5px 15px;
  background-color: #f8f9fa;
}

.search-box i {
  color: #2c3e50;
  font-size: 1.2rem;

  &.s-1 {
    font-size: 1rem;
  }
}

.search-box input {
  border: none;
  outline: none;
  background: none;
  color: #7f8c8d;
  font-size: 1rem;
  margin-left: 10px;
  margin-top: 2px;

  &::placeholder {
    color: #00326466;
  }
}

.search-count {
  color: #003264cc;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  /* margin-top: 16px; */
}

.ml-3 {
  margin-left: 12px;
}

.mr-3 {
  margin-right: 12px;
}

.modal-content {
  &.delete-modal {
    border-radius: 16px;
    padding: 16px 24px 48px 24px;

    .modal-header {
      padding: 0;
      padding-bottom: 20px;
      border-bottom-width: 2px;

      .modal-title {
        color: #303233;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
      }
    }

    .modal-body {
      padding: 0;
      border-bottom: none;
      text-align: center;

      p {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        width: 329px;
        margin: auto;
      }

      img {
        padding: 24px;
      }

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

      .form-control {
        border-radius: 5px;
      }

      .info-box {
        background-color: #fff3cd;
        padding: 15px;
        border-radius: 5px;
        margin-top: 20px;
        display: flex;
        align-items: center;
        position: absolute;
        bottom: 40px;
        width: 480px;
      }

      .info-box i {
        font-size: 24px;
        margin-right: 10px;
        color: #856404;
      }

      .info-box a {
        color: #856404;
        text-decoration: underline;
      }

      .image-dropzone {
        border: 2px dashed #ced4da;
        border-radius: 5px;
        height: 94px;
        width: 94px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: relative;
      }

      .image-dropzone i {
        font-size: 24px;
        color: #6c757d;
      }

      .image-dropzone input[type="file"] {
        position: absolute;
        width: 100px;
        height: 100px;
        opacity: 0;
        cursor: pointer;
      }

      .image-preview {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
      }

      .form-select {
        border: none;
        background-color: #F6F7F9;
        border-radius: 12px;
        padding: 13px 12px 11px;
      }
    }

    .modal-sidebar.show {
      right: 0;
    }

    .modal-sidebar .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 24px;
      cursor: pointer;
    }

    .br-3 {
      border-radius: 12px !important;
    }

    .p-8-16 {
      padding: 9px 16px 7px;
    }

    .w-100px {
      width: 100px !important;
    }


    .text-left {
      text-align: left !important;
    }

    .border-round {
      border-radius: 1000px;
    }

    .border-003264 {
      border-color: #003264 !important;
    }






    /* New CSS */
    .delete-modal-main {
      --bs-modal-width: 681px;
    }

    .delete-modal-main .btn-cancel,
    .delete-modal-main .btn-confirm {
      width: 100% !important;
      max-width: 132px;
    }

    .add-customer-btn .btn-primary:first-child {
      width: 100% !important;
      max-width: 100px;
      border: 1px solid #6E88A2;
    }

    .successfully-added-card {
      padding: 24px 32px;
      border-radius: 8px;
      background: #FFF;
      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10);
      display: flex;
      align-items: start;
      gap: 12px;
      width: 100%;
      max-width: 341px;
      position: fixed;
      bottom: 30px;
      left: 272px;
      z-index: 122;
    }

    .successfully-icon {
      width: 40px;
      height: 40px;
      background-color: rgba(6, 166, 14, 0.10);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5px;
    }

    .successfully-added-content h5 {
      color: #1A1A1A;
      text-align: start;
      font-size: 24px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      letter-spacing: -0.165px;
      margin: 0;
    }

    .successfully-added-content p {
      color: #656565;
      font-size: 13px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      letter-spacing: 0.25px;
      margin-bottom: 0;
      margin-top: 8px;
    }

    @media screen and (max-width:992px) {
      .successfully-added-content h5 {
        font-size: 18px;
      }

      .successfully-added-content p {
        font-size: 12px;
      }

      .successfully-added-card {
        left: 30px;
      }


    }

    .search-input .input-group {
      width: 100% !important;
      /* max-width: 261px !important; */
      border-radius: 58px;
      background-color: #DADADA;
      max-height: 40px;
    }

    .search-input .input-group .form-control {
      width: 100% !important;
      border-radius: 58px !important;
      /* padding-left: 54px; */
      max-height: 40px !important;
    }

    .search-input .input-group .form-control::placeholder {
      color: rgba(0, 50, 100, 0.40);
    }

    .search-input .input-group .input-icon {
      top: 50%;
    }

    .modal-sidebar input:focus {
      border-color: #003264;
    }


    .modal-sidebar input {
      border: 1px solid rgba(0, 0, 0, 0);
      /* Initial border with opacity 0 */
      transition: border-color 0.3s ease;
      /* Smooth transition for border color */
    }

    .modal-sidebar input:focus {
      border-color: rgba(0, 0, 0, 1);
      /* Change border opacity to 1 on focus */
      outline: none;
      /* Remove the default outline */
    }


    div {
      border: 1x solid red;
    }






    /* Adil dev fixes code (I add only new code here) */

    /* common classes */
    .section-title {
      color: #303233;
      font-weight: 600;
      font-size: 20px;
      line-height: 26px;
      padding-top: 6px;
    }

    /* Media queries */
    @media screen and (max-width: 992px) {
      .modal-sidebar {
        width: 50%;
      }
    }

    @media screen and (max-width: 576px) {
      .modal-sidebar {
        width: 100%;
      }

      /* performance shot media queries */
      .performance-snapshot {
        .sales-widgets {
          .card {
            min-width: 161px;
          }
        }
      }

      .content {
        .main {

          #nav-rentals,
          #nav-experiences {
            font-size: 16px !important;
          }
        }
      }

      /* availability-by-experience media queries */
      .availability-by-experience {
        .book-slot-bar {
          .book-slot {
            height: 100px !important;
          }
        }

        .card-wrapper {
          .card {
            .days {
              overflow-x: scroll;
            }

            .days::-webkit-scrollbar {
              width: 0px;
              /* Width of the scrollbar */
              height: 0px;
              /* Height of the scrollbar for horizontal scrollbars */
            }

            .day {
              min-width: 100px;

            }

            .time-slots-wrapper {
              .main-time-slots {
                .time-slots {
                  .time-header {
                    min-width: 80px;
                  }
                }
              }
            }
          }
        }
      }

      .content {
        .main {
          .availability-by-products {

            .availability-items {
              .item {
                font-size: 12px;
                display: flex;
                align-items: center;

                span {
                  background-color: #26AF5114;
                  padding: 4px 8px;
                  border-radius: 50px;
                  color: #06A60E;
                }
              }
            }
          }
        }
      }

    }

    /* sidebar media queries */

    @media screen and (max-width: 768px) {
      .user-info-box {
        left: 100px !important;
      }

      /* Auth screens media queries */


      .login-box {
        width: 100%;
        max-width: 438px;
        padding: 0px;
        /* margin-bottom: 100px; */

        h2 {
          font-size: 24px;
          font-weight: 600;
          text-align: left;
          line-height: 31.2px;
        }

        p {
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          text-align: left;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;

        }
      }

      .reset-password-box {
        width: 100%;
        max-width: 438px;
        padding: 0px;
        /* margin-bottom: 200px; */

        h2 {
          font-size: 24px;
          font-weight: 600;
          text-align: left;
          line-height: 31.2px;
          color: #303233;
          margin-bottom: 16px;

        }

        p.step-description {
          color: #6c757d;
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          text-align: left;
          color: #303233CC;
          margin-bottom: 60px;
          /* width: 520px; */
          /* margin-left: -41px; */
        }
      }

      .signup-box {

        padding: 2rem 0;

        h2 {
          font-size: 24px;
          font-weight: 600;
          text-align: left;
          line-height: 31.2px;
        }

        p {
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          text-align: left;
          text-underline-position: from-font;
        }
      }
    }




    .action-elipsis {
      background: white;
      border: none;
      padding: 0;
      margin: 0;
    }

    .action-canvas {
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;

      .divider {
        border-color: #F5F5F5;
      }

      .custom-close-btn {
        background: #F7F7F7;
        border-radius: 50%;
        border: none;
        width: 32px;
        height: 32px;
        margin: 0;
      }

      .action-canvas-menu {
        padding: 0;

        .menu-items {
          list-style: none;

          .dropdown-item {
            color: #003264CC;
            display: flex;
            align-items: center;
            gap: 8px;

            &:focus {
              background-color: rgba(255, 255, 255, 0.076);
              color: #00326487;
            }
          }

          &::-webkit-scrollbar {
            width: 8px;
            /* Width of the scrollbar */
            height: 8px;
            /* Height of the scrollbar for horizontal scrollbars */
          }

          &::-webkit-scrollbar-track {
            background: #f6f6f6;
            /* Track background color for dark theme */
            border-radius: 4px;
            /* Track border-radius */
          }

          &::-webkit-scrollbar-thumb {
            background-color: #565656;
            /* Thumb color for dark theme */
            border-radius: 4px;
            /* Thumb border-radius */
            border: 2px solid #e3e3e3;
            /* Padding around thumb */
          }

          &::-webkit-scrollbar-thumb:hover {
            background-color: #c0c0c0;
            /* Thumb color on hover for dark theme */
          }
        }
      }
    }


    .customer-canvas {
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;

      height: 95% !important;

      .divider {
        border-color: #F5F5F5;
      }

      .customer-canvas-body {

        .check {
          padding: 13px 23px 11px;
          font-weight: 500;
          font-size: 16px;
          line-height: 22px;
          border-radius: 12px;
          border: 1px solid #EBEBEB;
          cursor: pointer;

          &.checked {
            font-weight: 500;
            color: #003264;
            background-color: #0032641A;
          }
        }

        .form-group {
          input {
            border-radius: 12px;
            padding: 13px 12px 11px;

            &:focus {
              background-color: #F6F7F9;
            }
          }
        }

        .section-title {
          font-weight: 600;
          font-size: 24px;
          line-height: 31.2px;

          button {
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            padding: 8px 16px 6px 16px;
          }
        }

        .step-indicator {
          display: flex;
          align-items: center;
          margin-bottom: 20px;


          .step {
            &.inactive {
              display: flex;
              align-items: center;
              font-size: 12px;
              font-weight: 600;
              line-height: 24px;
              color: #6E88A2;

              strong {
                width: 24px;
                height: 24px;
                background-color: #6E88A2;
                color: #FFFFFF;
                text-align: center;
                padding-top: 1px;
                border-radius: 20px;
                margin-right: 8px;
              }
            }
          }


          strong {
            width: 24px;
            height: 24px;
            background-color: #003264;
            color: #FFFFFF;
            text-align: center;
            padding-top: 1px;
            border-radius: 20px;
            margin-right: 8px;
          }
        }

        .step-indicator span {
          /* margin-right: 10px; */
        }

        .year-schedule-units {
          .close {
            width: 24px;
            height: 24px;
            background-color: #DC131314;
            color: #DC1313;
            font-size: 24px;
            border-radius: 12px;
            display: block;
            margin-top: 10px;
            cursor: pointer;
          }
        }

        .season-flat {
          .checkboxes {
            input[type='checkbox'] {
              background-color: #003264;
            }
          }
        }

        .step-indicator .step {
          display: flex;
          align-items: center;
          font-size: 12px;
          font-weight: 600;
          line-height: 24px;
          /* gap: 8px; */
        }

        .step-indicator .step:not(:last-child)::after {
          content: ' ';
          background-image: url("icons/arrow-right-w.svg");
          width: 24px;
          height: 24px;
          color: #6c757d;
        }

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

        .form-control {
          border-radius: 5px;
        }

        .info-box {
          background-color: #fff3cd;
          padding: 15px;
          border-radius: 5px;
          margin-top: 20px;
          display: flex;
          align-items: center;
          position: absolute;
          bottom: 40px;
          width: 480px;
        }

        .info-box i {
          font-size: 24px;
          margin-right: 10px;
          color: #856404;
        }

        .info-box a {
          color: #856404;
          text-decoration: underline;
        }

        .image-dropzone {
          border: 2px dashed #ced4da;
          border-radius: 5px;
          height: 94px;
          width: 94px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          position: relative;
        }

        .image-dropzone i {
          font-size: 24px;
          color: #6c757d;
        }

        .image-dropzone input[type="file"] {
          position: absolute;
          width: 100px;
          height: 100px;
          opacity: 0;
          cursor: pointer;
        }

        .image-preview {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 5px;
        }

        .form-select {
          border: none;
          background-color: #F6F7F9;
          border-radius: 12px;
          padding: 13px 12px 11px;
        }
      }

      .custom-close-btn {
        background: #F7F7F7;
        border-radius: 50%;
        border: none;
        margin: 0;
        width: 32px !important;
        height: 32px !important;
      }
    }

    .footer-message-toast {
      background-color: #021930;
      font-size: 12px;
      text-align: center;
      color: #FFFFFF;
    }



    /* Category details css */
    .form-control-category-input {
      background-color: #f9f9f9;
      width: 90%;
      outline: none;

      &::placeholder {
        color: #30323366;
      }
    }

    textarea {
      resize: none;
    }

    .form-control-category {
      border-radius: 10px;
      background-color: #f9f9f9;

      &::placeholder {
        color: #30323366;
      }

      &:focus {
        border-color: #003264;
        outline: 0;
        box-shadow: none;
      }
    }

    .picture-icon-img {
      width: 100px;
      height: 100px;
    }

    .add-category-description {
      width: 100%;
      font-size: 14px;
      height: 40%;
    }


    .dropdown-toggle {
      width: 100%;
      padding: 10px;
      background-color: white;
      border: 1px solid #ccc;
      border-radius: 4px;
      text-align: left;
      cursor: pointer;
    }

    .dropdown-options {
      display: none;
      position: absolute;
      width: 100%;
      background-color: white;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      max-height: 150px;
      overflow-y: auto;
    }

    .dropdown-option {
      padding: 10px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .dropdown-option:hover {
      background-color: #f1f7ee;
    }

    .main-wrapper {
      background-color: #f6f7f9;
      min-height: 100vh;
    }

    /* Header */
    .category-details-header {
      background-color: #ffffff;
    }

    .back-button {
      border: 1px solid #e8e8e8;
      background-color: #ffffff;
      width: 32px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px;
      border-radius: 50%;
      transition: all 0.3s ease-in-out;
    }

    .edit-category-btn:hover,
    .back-button:hover {
      background-color: rgb(215, 214, 214);
    }

    .edit-category-btn {
      border: 1px solid #ebebeb;
      background-color: #ffffff;
      border-radius: 50px;
      font-weight: 500;
      font-size: 16px;
      line-height: 22px;
      padding: 8px 16px;
      color: #0d3b66;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
    }


    .category-personel-details {
      margin-top: 2rem;
      border-radius: 16px;
      background-color: white;
      display: flex;
      align-items: center;
      padding: 16px;
      gap: 16px;
    }

    .picture-icon-img {
      width: 100px;
      height: 100px;
    }

    .category-personel-details .row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
    }

    .category-personel-details img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      object-fit: cover;
      border: 1px solid #ccc;
    }

    .category-personel-details-title {
      font-weight: 600;
      font-size: 16px;
      line-height: 22px;
      color: #303233;
      text-transform: capitalize;
      margin: 0.4rem 0;
    }

    .category-personel-details-data {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #303233cc;
      margin: 0.2rem 0;
    }


    .form-control-category-input {
      background-color: #f9f9f9;
      width: 90%;
      outline: none;
    }


    .col-md-2,
    .col-lg-2 {
      flex: 0 0 120px;
    }

    .col-md-3,
    .col-lg-4 {
      flex: 1;
    }

    .dropdown-options {
      display: none;
    }

    .dropdown-options.show {
      display: block;
    }

    .dropdown-options-mob {
      display: none;
    }

    .dropdown-options-mob.show {
      position: absolute;
      background-color: white;
      width: 100%;
      display: block;
    }

    .dropdown-option:hover {
      background-color: #f6f7f9;
      border-radius: 4px;
    }

    .image-preview-wrapper {
      position: relative;
      display: inline-block;
    }

    .image-preview {
      width: 100px;
      height: 100px;
      border-radius: 8px;
      object-fit: cover;
      border: 1px solid #ddd;
    }

    .remove-image {
      position: absolute;
      top: -3px;
      left: 85px;
      background: white;
      border: 1px solid #ddd;
      border-radius: 50%;
      width: 25px;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .editable {
      background-color: #f6f7f9;
    }


    /* Catgory-list css */

    .form-control-category-input {
      background-color: #f9f9f9;
      width: 90%;
      outline: none;

      &::placeholder {
        color: #30323366;
      }
    }


    .picture-icon-img {
      width: 100px;
      height: 100px;
    }

    .add-category-description {
      width: 100%;
      font-size: 14px;
      height: 100px;
    }


    .dropdown-toggle {
      width: 100%;
      padding: 10px;
      background-color: white;
      border: 1px solid #ccc;
      border-radius: 4px;
      text-align: left;
      cursor: pointer;
    }

    .dropdown-options {
      display: none;
      position: absolute;
      top: -7px;
      width: 100%;
      background-color: white;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      max-height: 300px;
      overflow-y: auto;
    }

    .dropdown-option {
      padding: 10px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    textarea {
      resize: none;
    }

    .dropdown-option:hover {
      background-color: #f6f7f9;
      border-radius: 4px;
    }

    .help-box {
      display: flex;
      align-items: center;
      background-color: #f7c33329;
      border-radius: 12px;
      padding: 20px;
      max-width: 100%;
    }

    .help-box-mob {
      display: flex;
      align-items: center;
      background-color: #f7c33329;
      border-radius: 12px;
      padding: 20px;
      padding-bottom: 28px;
      max-width: 100%;
      line-height: 1px;
    }

    .help-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fdeccf;
      color: #f1a60e;
      font-size: 32px;
      font-weight: 100;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      margin-right: 15px;
    }

    .help-text p {
      font-size: 16px;
      color: #003264cc;
      line-height: 20.8px;
    }

    .help-link {
      font-size: 16px;
      color: #00274d;
      font-weight: bold;
      text-decoration: none;
      display: inline-block;
    }

    .help-link:hover {
      text-decoration: underline;
    }

    .dropdown-options {
      display: none;
    }

    .dropdown-options.show {
      display: block;
    }

    .dropdown-options-mob {
      display: none;
    }

    .dropdown-options-mob.show {
      position: absolute;
      background-color: white;
      width: 100%;
      display: block;
    }


    .dropdown-option:hover {
      background-color: #f6f7f9;
      border-radius: 4px;
    }


    .image-preview-wrapper {
      position: relative;
      display: inline-block;
    }

    .image-preview {
      width: 100px;
      height: 100px;
      border-radius: 8px;
      object-fit: cover;
      border: 1px solid #ddd;
    }

    .remove-image {
      position: absolute;
      top: -3px;
      left: 85px;
      background: white;
      border: 1px solid #ddd;
      border-radius: 50%;
      width: 25px;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* Customer details css */
    /* main wrapper */
    .main-wrapper {
      background-color: #F6F7F9;
      min-height: 100vh;

    }

    /* Header */
    .customer-details-header {
      background-color: #ffffff;
      box-shadow: 0px 0px 4px 0px #00000014;
      border-bottom: 1px solid #00000014;
    }

    .back-button {
      border: 1px solid #E8E8E8;
      background-color: #ffffff;
      width: 32px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px;
      border-radius: 50%;
      transition: all 0.3s ease-in-out;
    }

    .edit-customer-btn {
      border: 1px solid #EBEBEB;
      background-color: #ffffff;
      border-radius: 50px;
      font-weight: 500;
      font-size: 16px;
      line-height: 22px;
      padding: 8px 16px;
      color: #0D3B66;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
    }

    .edit-customer-btn:hover,
    .back-button:hover {
      background-color: rgb(215, 214, 214);
    }

    /* Customer detail section */
    .customer-personel-details {
      margin-top: 2rem;
      border-radius: 16px;
      background-color: white;

      .customer-personel-details-title {
        font-weight: 600;
        line-height: 28px;
        width: 329px;
        margin: auto;
      }

      img {
        padding: 24px;
      }
    }

    .modal-footer {
      border: none;

      .btn {
        width: fit-content;
        border-radius: 8px;
        background-color: #003264;
        color: white;
        padding: 9px 16px 7px 16px;

        &.white {
          background-color: white;
          color: #003264;
          border: 1px solid #6e88a2;

          &:hover {
            background-color: rgb(215, 214, 214);
          }
        }

        &:hover {
          background-color: #003264dd;
        }
      }
    }
  }
}

.modal-sidebar {
  position: fixed;
  top: 0;
  right: -100%;
  /* width: 540px; */
  width: 35%;
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  transition: right 0.3s ease;
  z-index: 1050;
  padding: 2rem;

  .check {
    padding: 13px 23px 11px;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    border-radius: 12px;
    border: 1px solid #ebebeb;
    cursor: pointer;

    &.checked {
      font-weight: 500;
      color: #003264;
      background-color: #0032641a;
    }
  }

  .form-group {
    input {
      border-radius: 12px;
      padding: 13px 12px 11px;

      &:focus {
        background-color: #f6f7f9;
      }
    }
  }

  .section-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 31.2px;

    button {
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      padding: 8px 16px 6px 16px;
    }
  }

  .step-indicator {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .step {
      &.inactive {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 600;
        line-height: 24px;
        color: #6e88a2;

        strong {
          width: 24px;
          height: 24px;
          background-color: #6e88a2;
          color: #ffffff;
          text-align: center;
          padding-top: 1px;
          border-radius: 20px;
          margin-right: 8px;
        }
      }
    }

    strong {
      width: 24px;
      height: 24px;
      background-color: #003264;
      color: #ffffff;
      text-align: center;
      padding-top: 1px;
      border-radius: 20px;
      margin-right: 8px;
    }
  }

  .step-indicator span {
    /* margin-right: 10px; */
  }

  .year-schedule-units {
    .close {
      width: 24px;
      height: 24px;
      background-color: #dc131314;
      color: #dc1313;
      font-size: 24px;
      border-radius: 12px;
      display: block;
      margin-top: 10px;
      cursor: pointer;
    }
  }

  .season-flat {
    .checkboxes {
      input[type="checkbox"] {
        background-color: #003264;
      }
    }
  }

  .step-indicator .step {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    /* gap: 8px; */
  }

  .step-indicator .step:not(:last-child)::after {
    content: " ";
    background-image: url("icons/arrow-right-w.svg");
    width: 24px;
    height: 24px;
    color: #6c757d;
  }

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

  .form-control {
    border-radius: 5px;
  }

  .info-box {
    background-color: #fff3cd;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 40px;
    width: 480px;
  }

  .info-box i {
    font-size: 24px;
    margin-right: 10px;
    color: #856404;
  }

  .info-box a {
    color: #856404;
    text-decoration: underline;
  }

  .image-dropzone {
    border: 2px dashed #ced4da;
    border-radius: 5px;
    height: 94px;
    width: 94px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
  }

  .image-dropzone i {
    font-size: 24px;
    color: #6c757d;
  }

  .image-dropzone input[type="file"] {
    position: absolute;
    width: 100px;
    height: 100px;
    opacity: 0;
    cursor: pointer;
  }

  .image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
  }

  .form-select {
    border: none;
    background-color: #f6f7f9;
    border-radius: 12px;
    padding: 13px 12px 11px;
  }
}

.modal-sidebar.show {
  right: 0;
}

.modal-sidebar .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
}

.br-3 {
  border-radius: 12px !important;
}

.p-8-16 {
  padding: 9px 16px 7px;
}

.w-100px {
  width: 100px !important;
}

.text-left {
  text-align: left !important;
}

.border-round {
  border-radius: 1000px;
}

.border-003264 {
  border-color: #003264 !important;
}

/* New CSS */
.delete-modal-main {
  --bs-modal-width: 681px;
}

.delete-modal-main .btn-cancel,
.delete-modal-main .btn-confirm {
  width: 100% !important;
  max-width: 132px;
}

.add-customer-btn .btn-primary:first-child {
  width: 100% !important;
  max-width: 100px;
  border: 1px solid #6e88a2;
}

.successfully-added-card {
  padding: 24px 32px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: start;
  gap: 12px;
  width: 100%;
  max-width: 341px;
  position: fixed;
  bottom: 30px;
  left: 272px;
  z-index: 1100 !important;
}

.successfully-icon {
  width: 40px;
  height: 40px;
  background-color: rgba(6, 166, 14, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.successfully-added-content h5 {
  color: #1a1a1a;
  text-align: start;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.165px;
  margin: 0;
}

.successfully-added-content p {
  color: #656565;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.25px;
  margin-bottom: 0;
  margin-top: 8px;
}

@media screen and (max-width: 992px) {
  .successfully-added-content h5 {
    font-size: 18px;
  }

  .successfully-added-content p {
    font-size: 12px;
  }

  .successfully-added-card {
    left: 30px;
  }
}

.search-input {
  min-width: 240px;
}

.search-input .input-group {
  width: 100% !important;
  /* max-width: 261px !important; */
  border-radius: 58px;
  background-color: #dadada;
  max-height: 40px;
  margin-bottom: 0;
  min-width: 200px;
}

.search-input .input-group .form-control {
  width: 100% !important;
  border-radius: 58px !important;
  /* padding-left: 54px; */
  max-height: 40px !important;
}

.search-input .input-group .form-control::placeholder {
  color: rgba(0, 50, 100, 0.4);
}

.search-input .input-group .input-icon {
  top: 50%;
}

.modal-sidebar input:focus {
  border-color: #003264;
}

.modal-sidebar input {
  border: 1px solid rgba(0, 0, 0, 0);
  /* Initial border with opacity 0 */
  transition: border-color 0.3s ease;
  /* Smooth transition for border color */
}

.modal-sidebar input:focus {
  border-color: rgba(0, 0, 0, 1);
  /* Change border opacity to 1 on focus */
  outline: none;
  /* Remove the default outline */
}

div {
  border: 1x solid red;
}

/* Adil dev fixes code (I add only new code here) */

/* common classes */
.section-title {
  color: #303233;
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  padding-top: 6px;
}

/* Media queries */
@media screen and (max-width: 992px) {
  .modal-sidebar {
    width: 50%;
  }
}

@media screen and (max-width: 576px) {
  .modal-sidebar {
    width: 100%;
  }

  /* performance shot media queries */
  .performance-snapshot {
    .sales-widgets {
      overflow-x: visible !important;
      flex-direction: column;
      gap: 12px;

      .card {
        min-width: 100%;
        width: 100%;
        height: auto;
        min-height: 90px;
      }
    }
  }

  .content {
    .main {

      #nav-rentals,
      #nav-experiences {
        font-size: 16px !important;
      }
    }
  }

  /* availability-by-experience media queries */
  .availability-by-experience {
    .book-slot-bar {
      .book-slot {
        height: 100px !important;
      }
    }

    .card-wrapper {
      .card {
        .days {
          overflow-x: scroll;
        }

        .days::-webkit-scrollbar {
          width: 0px;
          /* Width of the scrollbar */
          height: 0px;
          /* Height of the scrollbar for horizontal scrollbars */
        }

        .day {
          min-width: 100px;
        }

        .time-slots-wrapper {
          .main-time-slots {
            .time-slots {
              .time-header {
                min-width: 80px;
              }
            }
          }
        }
      }
    }
  }

  .content {
    .main {
      .availability-by-products {
        .availability-items {
          .item {
            font-size: 12px;
            display: flex;
            align-items: center;

            span {
              background-color: #26af5114;
              padding: 4px 8px;
              border-radius: 50px;
              color: #06a60e;
            }
          }
        }
      }
    }
  }
}

/* sidebar media queries */

@media screen and (max-width: 768px) {
  .user-info-box {
    left: 100px !important;
  }

  /* Auth screens media queries */

  .login-box {
    width: 100%;
    max-width: 438px;
    padding: 0px;
    /* margin-bottom: 100px; */

    h2 {
      font-size: 24px;
      font-weight: 600;
      text-align: left;
      line-height: 31.2px;
    }

    p {
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
    }
  }

  .reset-password-box {
    width: 100%;
    max-width: 438px;
    padding: 0px;
    /* margin-bottom: 200px; */

    h2 {
      font-size: 24px;
      font-weight: 600;
      text-align: left;
      line-height: 31.2px;
      color: #303233;
      margin-bottom: 16px;
    }

    p.step-description {
      color: #6c757d;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      text-align: left;
      color: #303233cc;
      margin-bottom: 60px;
      /* width: 520px; */
      /* margin-left: -41px; */
    }
  }

  .signup-box {
    padding: 2rem 0;

    h2 {
      font-size: 24px;
      font-weight: 600;
      text-align: left;
      line-height: 31.2px;
    }

    p {
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      text-align: left;
      text-underline-position: from-font;
    }
  }
}

.action-elipsis {
  background: white;
  border: none;
  padding: 0;
  margin: 0;
}

.action-canvas {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;

  .divider {
    border-color: #f5f5f5;
  }

  .custom-close-btn {
    background: #f7f7f7;
    border-radius: 50%;
    border: none;
    width: 32px;
    height: 32px;
    margin: 0;
  }

  .action-canvas-menu {
    padding: 0;

    .menu-items {
      list-style: none;

      .dropdown-item {
        color: #003264cc;
        display: flex;
        align-items: center;
        gap: 8px;

        &:focus {
          background-color: rgba(255, 255, 255, 0.076);
          color: #00326487;
        }
      }

      &::-webkit-scrollbar {
        width: 8px;
        /* Width of the scrollbar */
        height: 8px;
        /* Height of the scrollbar for horizontal scrollbars */
      }

      &::-webkit-scrollbar-track {
        background: #f6f6f6;
        /* Track background color for dark theme */
        border-radius: 4px;
        /* Track border-radius */
      }

      &::-webkit-scrollbar-thumb {
        background-color: #565656;
        /* Thumb color for dark theme */
        border-radius: 4px;
        /* Thumb border-radius */
        border: 2px solid #e3e3e3;
        /* Padding around thumb */
      }

      &::-webkit-scrollbar-thumb:hover {
        background-color: #c0c0c0;
        /* Thumb color on hover for dark theme */
      }
    }
  }
}

.customer-canvas {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;

  height: 95% !important;

  .divider {
    border-color: #f5f5f5;
  }

  .customer-canvas-body {
    .check {
      padding: 13px 23px 11px;
      font-weight: 500;
      font-size: 16px;
      line-height: 22px;
      border-radius: 12px;
      border: 1px solid #ebebeb;
      cursor: pointer;

      &.checked {
        font-weight: 500;
        color: #003264;
        background-color: #0032641a;
      }
    }

    .form-group {
      input {
        border-radius: 12px;
        padding: 13px 12px 11px;

        &:focus {
          background-color: #f6f7f9;
        }
      }
    }

    .section-title {
      font-weight: 600;
      font-size: 24px;
      line-height: 31.2px;

      button {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        padding: 8px 16px 6px 16px;
      }
    }

    .step-indicator {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .step {
        &.inactive {
          display: flex;
          align-items: center;
          font-size: 12px;
          font-weight: 600;
          line-height: 24px;
          color: #6e88a2;

          strong {
            width: 24px;
            height: 24px;
            background-color: #6e88a2;
            color: #ffffff;
            text-align: center;
            padding-top: 1px;
            border-radius: 20px;
            margin-right: 8px;
          }
        }
      }

      strong {
        width: 24px;
        height: 24px;
        background-color: #003264;
        color: #ffffff;
        text-align: center;
        padding-top: 1px;
        border-radius: 20px;
        margin-right: 8px;
      }
    }

    .step-indicator span {
      /* margin-right: 10px; */
    }

    .year-schedule-units {
      .close {
        width: 24px;
        height: 24px;
        background-color: #dc131314;
        color: #dc1313;
        font-size: 24px;
        border-radius: 12px;
        display: block;
        margin-top: 10px;
        cursor: pointer;
      }
    }

    .season-flat {
      .checkboxes {
        input[type="checkbox"] {
          background-color: #003264;
        }
      }
    }

    .step-indicator .step {
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      line-height: 24px;
      /* gap: 8px; */
    }

    .step-indicator .step:not(:last-child)::after {
      content: " ";
      background-image: url("icons/arrow-right-w.svg");
      width: 24px;
      height: 24px;
      color: #6c757d;
    }

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

    .form-control {
      border-radius: 5px;
    }

    .info-box {
      background-color: #fff3cd;
      padding: 15px;
      border-radius: 5px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      position: absolute;
      bottom: 40px;
      width: 480px;
    }

    .info-box i {
      font-size: 24px;
      margin-right: 10px;
      color: #856404;
    }

    .info-box a {
      color: #856404;
      text-decoration: underline;
    }

    .image-dropzone {
      border: 2px dashed #ced4da;
      border-radius: 5px;
      height: 94px;
      width: 94px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      position: relative;
    }

    .image-dropzone i {
      font-size: 24px;
      color: #6c757d;
    }

    .image-dropzone input[type="file"] {
      position: absolute;
      width: 100px;
      height: 100px;
      opacity: 0;
      cursor: pointer;
    }

    .image-preview {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 5px;
    }

    .form-select {
      border: none;
      background-color: #f6f7f9;
      border-radius: 12px;
      padding: 13px 12px 11px;
    }
  }

  .custom-close-btn {
    background: #f7f7f7;
    border-radius: 50%;
    border: none;
    margin: 0;
    width: 32px !important;
    height: 32px !important;
  }
}

.footer-message-toast {
  background-color: #021930;
  font-size: 12px;
  text-align: center;
  color: #ffffff;
}

/* Category details css */
.form-control-category-input {
  background-color: #f9f9f9;
  width: 90%;
  outline: none;

  &::placeholder {
    color: #30323366;
  }
}

textarea {
  resize: none;
}

.form-control-category {
  border-radius: 10px;
  background-color: #f9f9f9;
  position: relative;

  &::placeholder {
    color: #30323366;
  }

  &:focus {
    border-color: #003264;
    outline: 0;
    box-shadow: none;
  }

  &.timeSelect {
    .input-icon {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
    }
  }
}

.picture-icon-img {
  width: 100px;
  height: 100px;
}

.add-category-description {
  width: 100%;
  font-size: 14px;
  height: 40%;
}

.dropdown-toggle {
  width: 100%;
  padding: 10px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
}

.dropdown-options {
  display: none;
  position: absolute;
  width: 100%;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 150px;
  overflow-y: auto;
}

.dropdown-option {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dropdown-option:hover {
  background-color: #f1f7ee;
}

.main-wrapper {
  background-color: #f6f7f9;
  min-height: 100vh;
}

/* Header */
.category-details-header {
  background-color: #ffffff;
}

.back-button {
  border: 1px solid #e8e8e8;
  background-color: #ffffff;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

.edit-category-btn:hover,
.back-button:hover {
  background-color: rgb(215, 214, 214);
}

.edit-category-btn {
  border: 1px solid #ebebeb;
  background-color: #ffffff;
  border-radius: 50px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  padding: 8px 16px;
  color: #0d3b66;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.category-personel-details {
  margin-top: 2rem;
  border-radius: 16px;
  background-color: white;
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 16px;
}

.picture-icon-img {
  width: 100px;
  height: 100px;
}

.category-personel-details .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.category-personel-details img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #ccc;
}

.category-personel-details-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #303233;
  text-transform: capitalize;
  margin: 0.4rem 0;
}

.category-personel-details-data {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #303233cc;
  margin: 0.2rem 0;
}

.form-control-category-input {
  background-color: #f9f9f9;
  width: 90%;
  outline: none;
}

.col-md-2,
.col-lg-2 {
  flex: 0 0 120px;
}

.col-md-3,
.col-lg-4 {
  flex: 1;
}

.dropdown-options {
  display: none;
}

.dropdown-options.show {
  display: block;
}

.dropdown-options-mob {
  display: none;
}

.dropdown-options-mob.show {
  position: absolute;
  background-color: white;
  width: 100%;
  display: block;
}

.dropdown-option:hover {
  background-color: #f6f7f9;
  border-radius: 4px;
}

.image-preview-wrapper {
  position: relative;
  display: inline-block;
}

.image-preview {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #ddd;
}

.remove-image {
  position: absolute;
  top: -3px;
  left: 85px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.editable {
  background-color: #f6f7f9;
  border-radius: 6px;
}

/* Catgory-list css */

.form-control-category-input {
  background-color: #f9f9f9;
  width: 90%;
  outline: none;

  &::placeholder {
    color: #30323366;
  }
}

.picture-icon-img {
  width: 100px;
  height: 100px;
}

.add-category-description {
  width: 100%;
  font-size: 14px;
  height: 100px;
}

.dropdown-toggle {
  width: 100%;
  padding: 10px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
}

.dropdown-options {
  display: none;
  position: absolute;
  top: -7px;
  width: 100%;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
}

.dropdown-option {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

textarea {
  resize: none;
}

.dropdown-option:hover {
  background-color: #f6f7f9;
  border-radius: 4px;
}

.help-box {
  display: flex;
  align-items: center;
  background-color: #f7c33329;
  border-radius: 12px;
  padding: 20px;
  max-width: 100%;
}

.help-box-mob {
  display: flex;
  align-items: center;
  background-color: #f7c33329;
  border-radius: 12px;
  padding: 20px;
  padding-bottom: 28px;
  max-width: 100%;
  line-height: 1px;
}

.help-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fdeccf;
  color: #f1a60e;
  font-size: 32px;
  font-weight: 100;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-right: 15px;
}

.help-text p {
  font-size: 16px;
  color: #003264cc;
  line-height: 20.8px;
}

.help-link {
  font-size: 16px;
  color: #00274d;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
}

.help-link:hover {
  text-decoration: underline;
}

.dropdown-options {
  display: none;
}

.dropdown-options.show {
  display: block;
}

.dropdown-options-mob {
  display: none;
}

.dropdown-options-mob.show {
  position: absolute;
  background-color: white;
  width: 100%;
  display: block;
}

.dropdown-option:hover {
  background-color: #f6f7f9;
  border-radius: 4px;
}

.image-preview-wrapper {
  position: relative;
  display: inline-block;
}

.image-preview {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #ddd;
}

.remove-image {
  position: absolute;
  top: -3px;
  left: 85px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Customer details css */
/* main wrapper */
.main-wrapper {
  background-color: #f6f7f9;
  min-height: 100vh;
}

/* Header */
.customer-details-header {
  background-color: #ffffff;
  box-shadow: 0px 0px 4px 0px #00000014;
  border-bottom: 1px solid #00000014;
}

.back-button {
  border: 1px solid #e8e8e8;
  background-color: #ffffff;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

.edit-customer-btn {
  border: 1px solid #ebebeb;
  background-color: #ffffff;
  border-radius: 50px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  padding: 8px 16px;
  color: #0d3b66;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.edit-customer-btn:hover,
.back-button:hover {
  background-color: rgb(215, 214, 214);
}

/* Customer detail section */
.customer-personel-details {
  margin-top: 2rem;
  border-radius: 16px;
  background-color: white;

  .customer-personel-details-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #303233;
    text-transform: capitalize;
    margin: 0.2rem 0;
  }

  .customer-personel-details-data {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #303233cc;
    margin: 0.2rem 0;
  }
}

/* Notes section */
.notes-section {
  margin-top: 2rem;
  border-radius: 16px;
  background-color: white;

  .notes-section-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
  }

  .notes-section-add-button,
  .note-item-input-delete-btn {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    border: none;
    background-color: transparent;
    color: #003264;
    padding: 0;
    margin: 0;
  }

  .notes-section-edit-button {
    border: none;
    background-color: transparent;
  }

  .notes-section-add-button,
  .note-item-input-delete-btn,
  .notes-section-edit-button,
  .note-item-input-cross-btn {
    transition: all 0.3s ease-in-out;

    &:hover {
      opacity: 0.7;
    }
  }

  .note-item-input-cross-btn {
    border: none;
    background-color: transparent;
  }

  .note-item-input-save-btn,
  .note-item-input-update-btn {
    border: none;
    border-radius: 29px;
    padding: 4px 16px 4px 16px;
  }

  .notes-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Default to 4 columns */
    gap: 16px;
    /* Spacing between grid items */
  }

  .grid-item {
    background-color: #003264;
    color: white;
    padding: 16px;
    border-radius: 8px;
    text-align: center;
  }

  /* Adjust columns for medium screens */
  @media (max-width: 992px) {
    .notes-grid-container {
      grid-template-columns: repeat(2, 1fr);
      /* 2 columns for medium screens */
    }
  }

  /* Adjust columns for small screens */
  @media (max-width: 576px) {
    .notes-grid-container {
      grid-template-columns: 1fr;
      /* 1 column for small screens */
    }
  }

  .note-item {
    border-radius: 12px;
    background-color: #f6f7f9;
    border: none;
    height: 150px;
    font-size: 12px;
    font-weight: 400;
    line-height: 15.6px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #303233;

    .notes-section-timestamp {
      font-size: 12px;
      font-weight: 400;
      line-height: 15.6px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #6e88a2;
    }

    textarea {
      border: none;
      background-color: #f6f7f9;
      border-radius: 12px;
      padding: 13px 12px 11px;
      resize: none;
      font-size: 12px;
      font-weight: 400;
      line-height: 15.6px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #303233;
    }
  }
}

/* Booking history secrtion */

.booking-history-section-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.nav {
  .nav-item {
    .nav-link {
      padding-bottom: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      font-weight: 500;
      font-size: 18px;
      line-height: 23.4px;
      color: #00326480;

      span {
        background-color: #e4e5e8;
        padding: 5px 10px 3px;
        border-radius: 40px;
        font-weight: 500;
        font-size: 16px;
        line-height: 18px;
        color: #003264cc;
      }

      &:hover {
        color: #003264;
        border-width: 0;
        background-color: #f7f7f7;
      }

      &.active {
        font-weight: 600;
        font-size: 18px;
        line-height: 23.4px;
        color: #303233;
        border-width: 0;
        border-bottom: 4px solid #303233;
        background: none;
      }
    }
  }
}

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

/* Smaller form control for opening hours */
.form-control-category.form-control-sm {
  padding: 6px 12px;
  min-height: 36px;
  font-size: 14px;
}

.form-control-category.form-control-sm .form-control-category-input {
  font-size: 14px;
}

.opening-hours-row .dropdown {
  position: relative;
}

.opening-hours-row .dropdown-options {
  max-height: 200px;
  overflow-y: auto;
}

/* Ensure Alpine.js x-show dropdowns are visible */
[x-cloak] {
  display: none !important;
}

/* Fix arrow icon positioning in opening hours form-control-category */
.opening-hours-row .form-control-category {
  position: relative;
  display: flex;
  align-items: center;
}

.opening-hours-row .form-control-category-input {
  flex: 1;
}

.opening-hours-row .form-control-category .input-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
}

/* Make time dropdown columns narrower */
.opening-hours-time-col {
  max-width: 140px;
}

@media (max-width: 768px) {
  .opening-hours-time-col {
    max-width: 100%;
  }
}

/* Prevent tooltip from blocking interaction on small screens */
@media (max-width: 576px) {
  .opening-hours-row [data-bs-toggle="tooltip"] {
    pointer-events: auto;
  }
  
  .tooltip {
    pointer-events: none;
  }
}

/* Show dropdown-options when parent x-show is true (Alpine adds style="display: block") */
.opening-hours-row [x-show][style*="display: block"] .dropdown-options,
.opening-hours-row [x-show].open .dropdown-options {
  display: block !important;
}

.form-control-category-input {
  background-color: #f9f9f9;
  width: 90%;
  outline: none;

  &::placeholder {
    color: #30323366;
  }
}

.dropdown-toggle::after {
  display: none !important;
  /* Hides the default dropdown icon */
}

.dropdown-options {
  display: none;
  position: absolute;
  width: 100%;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 150px;
  overflow-y: auto;
}

.dropdown-option {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dropdown-option:hover {
  background-color: #f1f7ee;
}

.dropdown-options {
  display: none;
}

.dropdown-options.show {
  display: block;
}

.dropdown-option:hover {
  background-color: #f6f7f9;
  border-radius: 4px;
}

.category-card {
  background-color: #ffffff;
  /* White card background */
  border-radius: 12px;
  /* Rounded corners */
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
  /* Subtle shadow */
  padding: 20px;
  /* Inner spacing */

  margin: 20px auto;
  /* Center the card */
  text-align: left;
  /* Center text */
}

.category-title {
  font-size: 14px;
  /* Title font size */
  font-weight: 600;
  /* Semi-bold font */
  color: #2d2d2d;
  /* Dark text color */
  margin-bottom: 10px;
  /* Spacing below title */
}

.category-description {
  font-size: 14px;
  /* Description font size */
  font-weight: 400;
  color: #6c757d;
  /* Gray text */
  margin-bottom: 20px;
  /* Spacing below description */
}

.category-card .add-category-btn {
  background-color: #122b51;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 20.8px;
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.add-category-btn span {
  font-size: 18px;
  font-weight: bold;
}

.add-category-btn:hover {
  background-color: #0f2040;
}

.help-box {
  display: flex;
  align-items: center;
  background-color: #fff7e8;
  border-radius: 10px;
  padding: 20px;
  max-width: 100%;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.help-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fdeccf;
  color: #f1a60e;
  font-size: 32px;
  font-weight: 100;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  margin-right: 15px;
}

.help-text p {
  margin: 0;
  font-size: 16px;
  color: #4a4a4a;
  line-height: 1.5;
}

.help-link {
  font-size: 16px;
  color: #00274d;
  font-weight: bold;
  text-decoration: none;
  line-height: 1;
  display: inline-block;
}

.help-link:hover {
  text-decoration: underline;
}

/* Container and spacing */
.checkbox-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1rem;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Checkbox styling */
.custom-checkbox {
  appearance: none;
  width: 16.67px;
  padding: 0 !important;
  height: 16.67px;
  border: 2px solid #0073e6;
  /* Primary blue */
  border-radius: 5px;
  /* Rounded corners */
  background-color: #6e88a27a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Checked state */
.custom-checkbox:checked {
  background-color: #003264;
  border-color: #003264;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Label styling */
.checkbox-label {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  cursor: pointer;
}

/* Hover effects */
.custom-checkbox:hover {
  border-color: #005bb5;
}

.checkbox-label:hover {
  color: #005bb5;
}

/* Section title styling */
.type-of-season {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.text-muted {
  font-size: 12px;
  color: #777;
}

.season-fields {
  border: 2px solid #ddd;
  border-radius: 16px;
}

.season-title {
  font-weight: 600;
  size: 16px;
  line-height: 22px;
}

.year-schedule-units {
  .close {
    width: 24px;
    height: 24px;
    background-color: #dc131314;
    color: #dc1313;
    font-size: 24px;
    border-radius: 12px;
    display: block;
    margin-top: 10px;
    cursor: pointer;
  }
}

.season-flat {
  .checkboxes {
    input[type="checkbox"] {
      background-color: #003264;
    }
  }
}

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

.form-control {
  border-radius: 5px;
}

.info-box {
  background-color: #fff3cd;
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 40px;
  width: 480px;
}

.info-box i {
  font-size: 24px;
  margin-right: 10px;
  color: #856404;
}

.info-box a {
  color: #856404;
  text-decoration: underline;
}

.image-dropzone {
  border: 2px dashed #ced4da;
  border-radius: 5px;
  height: 94px;
  width: 94px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.image-dropzone i {
  font-size: 24px;
  color: #6c757d;
}

.image-dropzone input[type="file"] {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0;
  cursor: pointer;
}

.image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.form-select {
  border: none;
  background-color: #f6f7f9;
  border-radius: 12px;
  padding: 13px 12px 11px;
}

.check {
  padding: 13px 23px 11px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  border-radius: 12px;
  border: 1px solid #ebebeb;
  cursor: pointer;

  &.checked {
    font-weight: 500;
    color: #003264;
    background-color: #0032641a;
  }
}

.modal-right-bar {
  .step-indicator {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .step {
      &.inactive {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 600;
        line-height: 24px;
        color: #6e88a2;

        strong {
          width: 24px;
          height: 24px;
          background-color: #6e88a2;
          color: #ffffff;
          text-align: center;
          padding-top: 1px;
          border-radius: 20px;
          margin-right: 8px;
        }
      }
    }

    strong {
      width: 24px;
      height: 24px;
      background-color: #003264;
      color: #ffffff;
      text-align: center;
      padding-top: 1px;
      border-radius: 20px;
      margin-right: 8px;
    }
  }

  .step-indicator .step {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    line-height: 24px;
    color: #003264;
    /* gap: 8px; */
  }
}

.modal-sidebar .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
}

/* Editor */
.ql-toolbar {
  border: none !important;
  color: #6e88a2 !important;
}

.ql-container {
  border: none !important;
  height: 110px !important;
}

.ql-editor-wrapper {
  background-color: #f6f7f9;
  border-radius: 12px;
}

/* product details css*/

.form-control-product-input {
  background-color: #f9f9f9;
  width: 90%;
  outline: none;

  &::placeholder {
    color: #30323366;
  }
}

textarea {
  resize: none;
}

.form-control-product {
  border-radius: 10px;
  padding: 12px;
  padding-top: 16px;
  margin-bottom: 10px;
  background-color: #f9f9f9;

  &::placeholder {
    color: #30323366;
  }

  &:focus {
    border-color: #003264;
    /* background-color: #F9F9F9; */
    outline: 0;
    box-shadow: none;
  }
}

.picture-icon-img {
  width: 100px;
  height: 100px;
}

.add-product-description {
  width: 100%;
  font-size: 14px;
  height: 40%;
}

.dropdown-toggle {
  position: relative;
  /* Ensure positioning context */
}

.dropdown-toggle::after {
  display: inline-block;
  position: absolute;
  /* Position it absolutely within the .dropdown-toggle */
  right: 1em;
  /* Adjust the distance from the right edge */
  top: 50%;
  /* Center vertically */
  transform: translateY(-50%);
  /* Ensure vertical centering */
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.dropdown-toggle {
  width: 100%;
  padding: 10px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
}

.dropdown-options {
  display: none;
  position: absolute;
  width: 100%;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 150px;
  overflow-y: auto;
}

.dropdown-option {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dropdown-option:hover {
  background-color: #f1f7ee;
}

.main-wrapper {
  background-color: #f6f7f9;
  min-height: 100vh;
}

/* Header */
.product-details-header {
  background-color: #ffffff;
}

.back-button {
  border: 1px solid #e8e8e8;
  background-color: #ffffff;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

.edit-product-btn:hover,
.back-button:hover {
  background-color: rgb(215, 214, 214);
}

.edit-product-btn {
  border: 1px solid #ebebeb;
  background-color: #ffffff;
  border-radius: 50px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  padding: 8px 16px;
  color: #0d3b66;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

@media screen and (max-width: 768px) {
  .edit-product-btn {
    border: 1px solid #ebebeb;
    background-color: #ffffff;
    border-radius: 50px;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    padding: 8px 16px;
    color: #0d3b66;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
  }
}

.wrapper {
  display: grid;
}

.product-section-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.nav {
  .nav-item {
    .nav-link {
      padding-bottom: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      font-weight: 500;
      font-size: 18px;
      line-height: 23.4px;
      color: #00326480;

      span {
        background-color: #e4e5e8;
        padding: 5px 10px 3px;
        border-radius: 40px;
        font-weight: 500;
        font-size: 16px;
        line-height: 18px;
        color: #003264cc;
      }

      &:hover {
        color: #003264;
        border-width: 0;
        background-color: #f7f7f7;
      }

      &.active {
        font-weight: 600;
        font-size: 18px;
        line-height: 23.4px;
        color: #303233;
        border-width: 0;
        border-bottom: 4px solid #303233;
        background: none;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .nav {
    .nav-item {
      .nav-link {
        font-size: 16px !important;
        /* Reduced font size for nav link */
        line-height: 20px !important;

        span {
          font-size: 14px !important;
          /* Adjusted font size for span */
          line-height: 16px !important;
          padding: 4px 8px 2px !important;
          /* Adjusted padding for better proportions */
        }
      }
    }
  }
}

.product-personel-details {
  border-radius: 16px;
  background-color: white;
  padding: 28px !important;
  gap: 16px;
}

.picture-icon-img {
  width: 100px;
  height: 100px;
}

.product-personel-details img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #ccc;
}

.product-personel-details-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #303233;
  margin: 0.4rem 0;
}

.product-personel-details-data {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #303233cc;
  margin: 0.2rem 0;

  a {
    text-decoration: none;
    color: #003264;
  }
}

.product-details-description {
  width: 108%;
  margin: 0 auto;
  /* Center align */
}

.product-personel-details-mob {
  margin-top: 2rem;
  border-radius: 16px;
  background-color: white;
  display: flex;
  align-items: center;
  padding: 8px;
  gap: 16px;
}

.form-control-product-input {
  background-color: #f9f9f9;
  width: 90%;
  outline: none;
}

.form-control-product {
  border-radius: 10px;
  padding: 12px;
  padding-top: 16px;
  margin-bottom: 10px;
  background-color: #f9f9f9;

  &::placeholder {
    color: #30323366;
  }

  &:focus {
    border-color: #003264;
    /* background-color: #F9F9F9; */
    outline: 0;
    box-shadow: none;
  }
}

.picture-icon-img-mob {
  width: 100px;
  height: 100px;
}

.product-details-description-mob {
  width: 300px;
}

@media screen and (max-width: 768px) {
  .product-personel-details-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    color: #303233;
    margin: 0.4rem 0;
  }

  .product-personel-details-data {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #303233cc;
    margin: 0.2rem 0;
  }
}

.product-personel-details-mob img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #ccc;
}

.col-md-2,
.col-lg-2 {
  flex: 0 0 120px;
}

.col-md-3,
.col-lg-4 {
  flex: 1;
}

.dropdown-options {
  display: none;
}

.dropdown-options.show {
  display: block;
}

.dropdown-options-mob {
  display: none;
}

.dropdown-options-mob.show {
  position: absolute;
  background-color: white;
  width: 100%;
  display: block;
}

.dropdown-option:hover {
  background-color: #f6f7f9;
  border-radius: 4px;
}

.image-preview-wrapper {
  position: relative;
  display: inline-block;
}

.image-preview {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #ddd;
}

.remove-image {
  position: absolute;
  top: -3px;
  left: 85px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-primary-second {
  background-color: #0d3b66;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  padding: 10px;
  width: 100%;
  cursor: pointer;

  &.round {
    border-radius: 50px;
  }

  &.white-second {
    background-color: white;
    color: #003264;
    border: 1px solid #003264;

    &:hover {
      background-color: rgb(215, 214, 214);
    }
  }

  &.fit {
    width: 6rem;
  }
}

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

@media screen and (max-width: 768px) {
  .product-details-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
  }
}

.form-group {
  input {
    border-radius: 12px;
    padding: 13px 12px 11px;

    &:focus {
      background-color: #f6f7f9;
    }
  }

  label {
    font-size: 16px;
    font-weight: 600;
    line-height: 20.8px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
  }

  small {
    font-size: 12px;
    font-weight: 400;
    color: #00326499;
  }
}

.quantity-container {
  text-align: start;
  margin-top: 10px;
}

.quantity-input {
  display: flex;
  align-items: start;
  justify-content: space-between;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 10px;
}

.quantity-display {
  font-size: 18px;
  font-weight: bold;
}

.control-button {
  border: none;
  background-color: #e9ecef;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.control-button:focus {
  outline: none;
}

.action-buttons button {
  margin: 10px 5px;
}

.editable-input {
  border: 1px solid rgba(0, 0, 0, 0);
  min-width: 90px;
  border-radius: 6px;
  height: 38px;
}

.editable-input-action-btn {
  width: 88px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editable-input-action-btn:hover {
  background-color: #6e88a2 !important;
}




/* Bookings (Rental view) */
.clear-filter-btn {
  border: none;
  background-color: transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #DC1313;
}


/* Ad new Bookings */


.booking-checkout {
  .booking-checkout-header-wrapper {
    border-bottom: 1px solid #EBEBEB;
  }

  .booking-checkout-header {
    button {
      border: none;
      font-size: 16px;
      font-weight: 600;
      line-height: 22px;
      text-align: left;
      color: #DC1313;
      background-color: transparent;
    }

    .cart-value {
      background-color: #F3F3F3;
      font-size: 14px;
      border-radius: 50px;
      width: 31px;
      height: 22px;
      font-weight: 600;
      line-height: 22px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
    }
  }

  .checkout-content-wrapper {
    .booking-checkout-heading {
      font-size: 18px;
      font-weight: 500;
      line-height: 24px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;

    }

    .booking-checkout-product {

      .checkout-actions {
        display: flex;
        align-items: center;
        gap: 2px;
        margin: 8px 0;

        button {
          background: #F6F7F9;
          border-radius: 4px;
          border: none;
          padding: 8px;
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: opacity 0.3s ease;
        }

        .delete-btn {
          border: none;
          background-color: transparent;
          margin-left: 1rem;
        }

        .product-count {
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        button:hover {
          opacity: 0.7;
        }
      }

      .product-total-price {
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        text-align: right;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
      }

      .product-price-per-piece {
        font-size: 13px;
        font-weight: 500;
        line-height: 16.9px;
        text-align: right;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;

      }
    }

    .custom-card {
      background-color: #f6f7f9;
      border-radius: 12px;
      padding: 24px 16px;
      margin: auto;
    }

    .add-tag-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #003264;
      font-size: 16px;
      font-weight: 600;
      line-height: 22px;
      text-align: left;
    }

    .section-title i {
      margin-right: 8px;
    }

    .note-item {
      background-color: #e9ecef;
      border-radius: 4px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 8px;
    }

    .note-item span {
      font-size: 14px;
      color: #495057;
    }

    .text-area-bg {
      background-color: #6e88a21a;
      border-radius: 8px !important;
    }

    textarea:focus {
      outline: none;
      border: none;
      box-shadow: none;
    }

    .add-tags-style {
      font-size: 14px;
      font-weight: 500;
      line-height: 22px;
      text-align: left;

      background-color: transparent;
      color: #003264;

      button {
        background-color: transparent;
        color: #f6f7f9;
      }
    }

    .add-tags-input {
      background-color: white !important;
      border-radius: 12px;
      padding: 16px !important;
    }

    .transparent-bg {
      background: transparent;
    }
  }

  .payment-summary {
    border: none;
    border-radius: 12px;
    background-color: #f6f7f9;
    padding: 24px 16px;
    box-shadow: none;

    .payment-summary-title {
      font-size: 16px;
      font-weight: 600;
      line-height: 22px;
      text-align: left;
    }

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

    .form-check-label {
      margin-right: 10px;

      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
    }

    .amount {
      color: #2c3e50;
      font-weight: bold;
    }

    .discount {
      color: #e74c3c;
    }

    .total {
      font-weight: bold;
      font-size: 1.2rem;
    }

    .btn-primary {
      background-color: #002a72;
      border: none;
      font-weight: bold;
      width: 100%;
      border-radius: 8px;
    }

    input[type="number"] {
      width: 100%;
      border: 1px solid #ccc;
      padding: 5px;
      border-radius: 6px;
    }

    .form-control-group {
      background-color: white;
      color: #003264;
      border-radius: 12px;
      padding: 8px 16px;

      .percentage {
        color: #6e88a2;
      }
    }

    .form-control-group input:focus {
      border: none;
      box-shadow: none;
      outline: none;
    }

    .form-switch {
      display: flex;
      direction: row;
      gap: 44px;

      label {
        font-size: 12px;
        font-weight: 500;
        line-height: 22px;
        text-align: left;
        color: #6e88a2;
      }
    }

    .subtotal-text {
      color: #003264;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      text-align: left;
    }
  }

}


/* 
====================================================================
Blank Booking styles start
====================================================================
*/

.blank-booking-heading {
  color: #003264CC !important;
}

.blank-booking-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #00326480;
}

.blank-booking-container {
  border: none !important;
}

.blank-booking-image {
  filter: grayscale(100%);
  border: none;
  padding: 20px;
  display: block;
  margin-bottom: 16px;
}

/* Experiences Calendar Empty State */
.experiences-empty-state {
  width: 100%;
  padding: 60px 20px 80px 20px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.experiences-empty-state-icon {
  margin-bottom: 24px !important;
  display: block !important;
  position: relative;
  width: 84px;
  height: 84px;
}

.experiences-empty-state-icon img {
  width: 84px;
  height: 84px;
  display: block !important;
  position: relative;
  margin: 0;
  padding: 0;
}

.experiences-empty-state-heading {
  font-size: 18px;
  font-weight: 600;
  color: #003264CC;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  display: block !important;
  position: relative;
  width: 100%;
}

.experiences-empty-state-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  color: #00326480;
  display: block !important;
  position: relative;
  margin-top: 0 !important;
  width: 100%;
}

.blank-booking-btn:disabled {
  background-color: #6E88A2 !important;
  opacity: 0.9;
}

/* Bookings empty state */
.bookings-empty-state {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  padding: 48px 24px 24px 24px;
  text-align: center;
  position: relative;
  min-height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bookings-empty-state-icon-wrapper {
  position: relative;
  margin-bottom: 24px;
}

.bookings-empty-state-main-icon {
  display: block;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.bookings-empty-state-heading {
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  color: #111827;
  margin: 0 0 20px 0;
  letter-spacing: -0.5px;
}

.bookings-empty-state-description {
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: #6b7280;
  margin: 0 0 32px 0;
  letter-spacing: -0.5px;
  max-width: 448px;
}

.bookings-empty-state .btn-primary {
  margin-bottom: 32px;
  padding-left: 24px;
  padding-right: 24px;
}

.bookings-empty-state-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.bookings-empty-state-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  letter-spacing: -0.5px;
  transition: color 0.2s;
}

.bookings-empty-state-footer-link:hover {
  color: #111827;
  text-decoration: none;
}

.bookings-empty-state-footer-icon {
  width: 15.75px;
  height: 14px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.bookings-empty-state-footer-link:first-child .bookings-empty-state-footer-icon,
.bookings-empty-state-footer-link:first-child img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.bookings-empty-state-footer-link img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.bookings-empty-state .bookings-empty-state-footer-link:first-child img[src*="guide.svg"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-width: 0 !important;
}

.bookings-empty-state-footer-link:last-child .bookings-empty-state-footer-icon {
  width: 14px;
  height: 14px;
  border: none !important;
  outline: none;
}

.bookings-empty-state-footer-divider {
  width: 4px;
  height: 4px;
  background-color: #d1d5db;
  border-radius: 9999px;
}

/* 
====================================================================
Bkank Booking styles end
====================================================================
*/

.booking-content-divider {
  border-bottom: 2px solid #EBEBEB
}

/* Responsive styles for new booking page header and filters */
.booking-content-header {
  flex-wrap: wrap;
  gap: 10px;
}

.booking-content-header .search-input {
  flex-wrap: nowrap;
  align-items: center;
}

.booking-content-header .search-input .input-group {
  max-width: 200px;
  flex-shrink: 1;
}

.clear-filter-wrapper {
  min-width: fit-content;
}

@media screen and (max-width: 991px) {
  .booking-content-header > .col,
  .booking-content-header > .col-md-3,
  .booking-content-header > .col-md-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .booking-content-header .search-input {
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }

  .booking-content-header .search-input .input-group {
    max-width: none;
    flex: 1 1 150px;
    min-width: 150px;
  }

  .booking-content-header .search-input .dropdown-filter {
    flex-shrink: 0;
  }
}

@media screen and (max-width: 576px) {
  .booking-content-header .search-input {
    gap: 8px !important;
  }

  .booking-content-header .search-input .input-group {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .booking-content-header .search-input .dropdown-filter button {
    padding: 7px 10px !important;
    font-size: 13px;
  }
}

/* Buffer time input styles */
.buffer-time-input {
  display: flex;
  gap: 4px;
}

.buffer-time-number {
  width: 80px;
  flex-shrink: 0;
}

.buffer-time-unit {
  flex: 1;
}

.text-area-bg {
  background-color: #6e88a21a;
  border-radius: 8px !important;
}

.transparent-bg {
  background: transparent;
}

.note-text-area-font {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-align: left;


  background-color: transparent;
  color: #003264;

  button {
    background-color: transparent;
    color: #003264;

    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-align: right;
  }
}

.text-area-bg-edit {
  background-color: white;
  border-radius: 8px !important;
}

#tagName {
  outline: none;
}

.booking-search-input {
  background-color: white !important;

  input {
    background-color: white;
  }
}

.mobile-checkout-btn {
  position: fixed;
  bottom: 0;
  width: 100%;

  span {
    width: 30px;
    height: 20px;
    background-color: #F3F3F3;
    border-radius: 50px;
    color: #303233;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    text-align: center;

  }
}

.booking-add-customer-container {
  position: sticky;
  bottom: 0;
  background-color: white;

}

.booking-payment-text-success {
  color: #158A74;
  font-weight: 600;
}

.booking-payment-text-danger {
  color: #CC4747;
  font-weight: 600;
}

.booking-list-rentals-dropdown {
  color: #003264CC !important;
}

.booking-section-customer-dropdown:focus {
  background-color: transparent !important;
}



/* 
====================================================================
Booking common styles End
====================================================================
*/


.booking-content {
  .booking-check {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 6px 0;
    background-color: white;
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  .booking-check-checked {
    background-color: #0032641a !important;
  }

  .booking-filters-heading {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #303233;
  }



  .add-participant-btn {
    background-color: transparent;
    border: none;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #003264;

  }

  .date-time-container {
    .same-rental-label {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #303233;

    }

    .date-time-container-info-box {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #003264;
    }
  }
}

.product-card {
  border-radius: 16px;
  background-color: #6e88a21a;
  padding: 10.5px 12px;
  box-shadow: none !important;
  margin-bottom: 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .product-card-body {
    background-color: #6e88a21a;
    border-radius: 0px 0px 16px 16px;
    background-color: transparent;
    padding: 0px;
  }

  .product-card-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    overflow: hidden;
    max-width: 100%;
  }

  .product-card-image {
    border-radius: 16px;
    max-width: 100%;
    height: auto;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
  }

  @media (max-width: 768px) {
    .product-card-image {
      max-height: 180px;
    }
  }

  @media (max-width: 576px) {
    .product-card-image {
      max-height: 150px;
    }
  }
}

.product-card img {
  border-radius: 4px;
}

.product-title {
  font-weight: 600;
  font-size: 14px;
  margin: 10px 0px 0px 0px;
  line-height: 22px;
}

.product-availability {
  font-weight: 400;
  color: #00326480;
  font-size: 12px;
  line-height: 15.6px;
  margin-bottom: 4px;
}

.product-price {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
}

.add-btn {
  font-weight: 600;
  background-color: transparent;
  border-radius: 50px;
  padding: 8px 16px 7px 12px;
  border: #003264cc solid;
  color: #003264cc;
  transition: all 0.3s ease-in-out;


  &:hover {
    background-color: #003264;
    color: white;
  }
}

.add-btn-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}


/* Payment Method Pop up */

.payment-modal {
  --bs-modal-width: 503px;
  max-height: 703px;
}

.payment-popup-heading {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
}

.offcanvas-header {
  border-bottom: none;
}

.payment-summary {
  background-color: #f6f7f9;
  padding: 16px 16px 8px 16px;
  border-radius: 12px;

  .payment-button-checkout {
    background-color: #003264 !important;
    border-radius: 12px !important;
  }

}

.payment-summary-item-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  color: #6e88a2;
}


.subtotal-text {
  color: #003264;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  font-weight: 500;
}

.payment-summary-item-total {
  font-size: 18px;
  font-weight: 400;
  line-height: 23.4px;
  text-align: left;
  color: #003264;

}

.payment-option {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #6e88a23d;
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 12px;
  background-color: white;
  transition: all 0.3s ease-in-out;
}

.payment-option-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
}

.payment-option-details {
  font-size: 13px;
  font-weight: 400;
  line-height: 16.9px;
  text-align: left;
  color: #00326480;
}

.payment-option:hover {
  border-color: #003264;
  background-color: #6e88a23d;
}

.payment-option img {
  width: 30px;
  margin-right: 1rem;
}

.payment-btn-active {
  background: #00326414;

}

.cancel-reason-option:hover {
  background-color: #F6F7F9 !important;
  border-color: #6E88A2 !important;
}

.cancel-reason-option[style*="background-color: #F0F7FF"]:hover {
  background-color: #F0F7FF !important;
  border-color: #003264 !important;
}

.back-btn {
  color: #003264;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  border-radius: 12px;
}

.input-text-popup {
  color: #003264;
}


.add-participant-canvas {
  .participat-form-header {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #303233;

    label {
      font-weight: 400;
    }
  }

  .add-participant-form {
    border: 1px solid #EBEBEB;
    padding: 1rem;
    border-radius: 12px;
  }

  .customer-info {
    padding: 1.5rem;
    background-color: #F6F7F9;
    border-radius: 16px;

    .customer-email,
    .customer-phone {
      padding: 4px 0;
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #303233CC;

    }
  }
}


/* 
===================================================================
Booking Details Start
===================================================================
*/
.section-booking-detail {
  background-color: white;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  color: #303233;
  min-width: 0;
  overflow: hidden;

  .size-color {
    color: #003264CC;
  }

  .sku {
    color: #6E88A2;
  }
}

.section-booking-detail-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
}

.section-booking-detail-data {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
}

.section-booking-detail-sub-data {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  color: #303233cc;
}

.section-booking-detail-sub-data-sub {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  text-align: left;
}

.pill {
  display: inline-flex;
  align-items: center;
  background-color: #f2f5f8;
  color: #0d3053;
  border-radius: 40px;
  padding: 5px 12px;
  margin: 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-align: left;

  &.red {
    background-color: rgba(220, 19, 19, 0.15);
    color: rgba(220, 19, 19, 1);
  }

  &.green {
    background-color: rgba(6, 166, 14, 0.1);
    color: rgba(6, 166, 14, 1);
  }

  &.purple {
    color: #003264;
    background-color: #0032640F;
  }
}

.pill .close-btn {
  margin-left: 8px;
  cursor: pointer;
  font-size: 26px;
  font-weight: 200;
  color: #6e88a2;
}

.pill .close-btn:hover {
  color: #0d3053;
}

.payment-summary-container {
  width: 30%;
}

.bottom-bar-wrapper {
  position: relative
}

.bottom-bar-style {
  position: fixed;
  bottom: 0px;
  left: 0;
  width: 100%;
  padding: 16px 16px 16px 16px;
  background-color: white;

  button {
    border-radius: 50px;
  }
}

.tags-section {
  width: 70%;
  max-height: 200px;
  overflow-y: auto;
}


@media (max-width: 768px) {
  .tags-section {
    width: 100%;
    max-height: 100px;
  }

  .flex-column-reverse-sm {
    flex-direction: column-reverse !important;

  }

  .payment-summary-container {
    width: 100%;
    margin-top: 10px;

    button {
      margin-top: 24px;
      margin-bottom: 70px;
    }
  }

  .section-booking-detail {
    background-color: white;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
  }

  .section-booking-detail-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
  }

  .section-booking-detail-data {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
  }

  .section-booking-detail-sub-data {
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: #303233cc;
  }

  .section-booking-detail-sub-data-sub {
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
    text-align: left;
  }
}



/* 
===================================================================
Booking Datails End
===================================================================
*/


/* 
===================================================================
Calender Start
===================================================================
*/

.availability-by-experience-calendar {
  .book-slot-bar {
    .book-slot {
      height: 100px !important;
    }
  }

  .card-wrapper {
    .card {
      .days {
        overflow-x: scroll;
      }

      .days::-webkit-scrollbar {
        width: 0px;
        /* Width of the scrollbar */
        height: 0px;
        /* Height of the scrollbar for horizontal scrollbars */
      }

      .day {
        min-width: 100px;
      }

      .time-slots-wrapper {
        .main-time-slots {
          .time-slots {
            .time-header {
              min-width: 80px;
            }
          }
        }
      }
    }
  }
}

.availability-by-experience-calendar {


  .time-slots-wrapper {
    position: relative;
    width: 100%;

    .main-time-slots {
      width: 100%;
      overflow-x: scroll;
      overflow-y: hidden;
      position: relative;

      &::-webkit-scrollbar {
        width: 8px;
        /* Width of the scrollbar */
        height: 8px;
        /* Height of the scrollbar for horizontal scrollbars */
      }

      &::-webkit-scrollbar-track {
        background: #f6f6f6;
        /* Track background color for dark theme */
        border-radius: 4px;
        /* Track border-radius */
      }

      &::-webkit-scrollbar-thumb {
        background-color: #565656;
        /* Thumb color for dark theme */
        border-radius: 4px;
        /* Thumb border-radius */
        border: 2px solid #e3e3e3;
        /* Padding around thumb */
      }

      &::-webkit-scrollbar-thumb:hover {
        background-color: #c0c0c0;
        /* Thumb color on hover for dark theme */
      }
    }

    img {
      position: absolute;
      cursor: pointer;
      z-index: 5;
    }
  }

  .time-slots {
    width: 200%;
  }

  .header {
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    height: 42px;
  }

  .card-wrapper {
    width: 100%;
    border-radius: 16px;
    /* overflow-x: scroll;
    overflow-y: hidden; */

    &::-webkit-scrollbar {
      width: 0px;
      /* Width of the scrollbar */
      height: 0px;
      /* Height of the scrollbar for horizontal scrollbars */
    }

    &::-webkit-scrollbar-track {
      background: #f6f6f6;
      /* Track background color for dark theme */
      border-radius: 4px;
      /* Track border-radius */
    }

    &::-webkit-scrollbar-thumb {
      background-color: #565656;
      /* Thumb color for dark theme */
      border-radius: 4px;
      /* Thumb border-radius */
      border: 0px solid #e3e3e3;
      /* Padding around thumb */
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: #c0c0c0;
      /* Thumb color on hover for dark theme */
    }

    .card {
      border-radius: 16px;

      .days {
        padding: 16px 12px 8px 12px;
        gap: 8px;

        .day {
          border-width: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 4px;
          flex-grow: 1;
          flex-direction: column;
          height: 72px;
          text-align: center;
          cursor: pointer;
          padding: 12px 4px;
          border-radius: 10px;
          background-color: #f7f7f7;
          color: #003264;

          &:hover {
            background-color: #f7f7f777;
          }

          span {
            color: #003264cc;
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
          }

          font-weight: 600;
          font-size: 20px;
          line-height: 20px;

          &.active {
            background-color: #003264;
            color: #ffffff;

            &:hover {
              background-color: #003264ee;
            }

            span {
              color: #ffffffcc;
            }
          }
        }
      }
    }
  }

  .book-slots {
    position: relative;
  }

  .book-slot-bar {
    gap: 20px;
    padding: 8px 16px;
    border-top: 0.5px solid #f5f5f5;

    .flex-base-1 {
      flex-basis: 8.3333%;
    }

    .flex-base-1 {
      flex-basis: 8.3333%;
    }

    .flex-base-2 {
      flex-basis: 16.6666%;
    }

    .flex-base-3 {
      flex-basis: 25%;
    }

    .flex-base-4 {
      flex-basis: 33.3333%;
    }

    .flex-base-5 {
      flex-basis: 41.6666%;
    }

    .flex-base-6 {
      flex-basis: 50%;
    }

    .flex-base-7 {
      flex-basis: 58.3333%;
    }

    .flex-base-8 {
      flex-basis: 66.6666%;
    }

    .flex-base-9 {
      flex-basis: 75%;
    }

    .flex-base-10 {
      flex-basis: 83.3333%;
    }

    .flex-base-11 {
      flex-basis: 91.6666%;
    }

    .flex-base-12 {
      flex-basis: 100%;
    }

    .book-slot {
      text-align: center;
      padding: 10px 16px;
      border-radius: 10px;
      cursor: pointer;
      height: 74px;
      background-color: #f7f7f7;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .book-title {
        font-weight: 600;
        font-size: 16px;
        line-height: 20px;
        color: #303233;
        align-items: center;

        span {
          font-weight: 600;
          font-size: 12px;
          line-height: 15.6px;
          color: #26af51;
          padding: 5px 10px 3px;
          height: 24px;
          border-radius: 20px;
          background-color: #26af5114;

          &.failed {
            color: #dc1313;
            background-color: #dc131314;
          }
        }
      }

      .detail {
        img {
          margin-top: -2px;
          position: relative;
        }

        .name {
          color: #303233;
          font-weight: 400;
          font-size: 12px;
          line-height: 16px;
        }

        .time {
          color: #303233;
          font-weight: 400;
          font-size: 12px;
          line-height: 16px;
        }
      }

      &.gap {
        cursor: default;
      }

      .detail {
        flex-direction: column;
      }
    }

    .small.book-slot {
      height: 96px;
    }

    .book-slot.gap {
      background: none;
      color: #721c24;
    }
  }

  .time-header {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #00326499;
  }

  .current-time {
    position: absolute;
    bottom: 0;
    transform: translateX(-90%);
    rotate: 90deg;
    transform-origin: center left;
    background-color: #003264;
    font-weight: 600;
    font-size: 8px;
    line-height: 10.4px;
    color: white;
    border-radius: 10px;
    padding: 3px 10px 1px 10px;
  }

  .current-time-line {
    position: absolute;
    bottom: 0;
    rotate: 270deg;
    transform: translateX(10px);
    transform-origin: center left;
    border-bottom: 1px solid #0032641a;
    width: 300px;
  }

  .timeline {
    position: relative;
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 16px;

    img {
      position: absolute;
    }
  }

  .timeline .time-header {
    flex: 1;
    text-align: center;
  }

  .timeline .current-time {
    flex: 1;
    height: 1px;
    background-color: #002855;
  }
}


.inventory-modal {
  display: none;
  /* position: fixed; */
  /* z-index: 1050; */
  /* width: 450; */
  max-width: 540px;
  transition: opacity 0.3s ease;
  /* Smooth transition for visibility */
}


.availability-by-products-calendar {


  .card-wrapper {
    width: 100%;
    border-radius: 16px;
    overflow-x: scroll;
    overflow-y: hidden;

    &::-webkit-scrollbar {
      width: 0px;
      /* Width of the scrollbar */
      height: 0px;
      /* Height of the scrollbar for horizontal scrollbars */
    }

    &::-webkit-scrollbar-track {
      background: #f6f6f6;
      /* Track background color for dark theme */
      border-radius: 4px;
      /* Track border-radius */
    }

    &::-webkit-scrollbar-thumb {
      background-color: #565656;
      /* Thumb color for dark theme */
      border-radius: 4px;
      /* Thumb border-radius */
      border: 0px solid #e3e3e3;
      /* Padding around thumb */
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: #c0c0c0;
      /* Thumb color on hover for dark theme */
    }

    .card {
      min-width: 1000px;

      .days {
        padding: 16px 12px 8px 12px;
        gap: 8px;

        .day {
          display: flex;
          border-width: 0;
          justify-content: center;
          align-items: center;
          gap: 4px;
          flex-grow: 1;
          flex-direction: column;
          height: 72px;
          text-align: center;
          cursor: pointer;
          padding: 12px 4px;
          border-radius: 10px;
          background-color: #f7f7f7;

          &:hover {
            background-color: #f7f7f777;
          }

          color: #003264;

          span {
            color: #003264cc;
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
          }

          font-weight: 600;
          font-size: 20px;
          line-height: 20px;

          &.active {
            background-color: #003264;
            color: #ffffff;

            &:hover {
              background-color: #003264ee;
            }

            span {
              color: #ffffffcc;
            }
          }
        }
      }
    }
  }

  .container {
    margin-top: 20px;
  }

  .header {
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;

    .btn {
      border-radius: 40px;
      border: 1px solid #dadada;
      padding: 9px 20px 7px 20px;
      color: #003264cc;
      font-weight: 500;
      font-size: 14px;
      line-height: 24px;
      background: none;

      &:hover {
        background-color: #dadada88;
      }
    }
  }

  .time-slots-wrapper {
    position: relative;
    width: 100%;

    .main-time-slots {
      width: 100%;
      overflow-x: scroll;
      overflow-y: hidden;
      position: relative;

      &::-webkit-scrollbar {
        width: 8px;
        /* Width of the scrollbar */
        height: 8px;
        /* Height of the scrollbar for horizontal scrollbars */
      }

      &::-webkit-scrollbar-track {
        background: #f6f6f6;
        /* Track background color for dark theme */
        border-radius: 4px;
        /* Track border-radius */
      }

      &::-webkit-scrollbar-thumb {
        background-color: #565656;
        /* Thumb color for dark theme */
        border-radius: 4px;
        /* Thumb border-radius */
        border: 2px solid #e3e3e3;
        /* Padding around thumb */
      }

      &::-webkit-scrollbar-thumb:hover {
        background-color: #c0c0c0;
        /* Thumb color on hover for dark theme */
      }
    }

    /* img {
      position: absolute;
      cursor: pointer;
      z-index: 5; */
    /* } */
  }

  .time-slots {
    width: 200%;
  }

  .time-slot-bar {
    gap: 20px;
    height: 72px;
    padding: 8px 16px;
    border-top: 0.5px solid #f5f5f5;

    .flex-base-1 {
      flex-basis: 8.3333%;
    }

    .flex-base-1 {
      flex-basis: 8.3333%;
    }

    .flex-base-2 {
      flex-basis: 16.6666%;
    }

    .flex-base-3 {
      flex-basis: 25%;
    }

    .flex-base-4 {
      flex-basis: 33.3333%;
    }

    .flex-base-5 {
      flex-basis: 41.6666%;
    }

    .flex-base-6 {
      flex-basis: 50%;
    }

    .flex-base-7 {
      flex-basis: 58.3333%;
    }

    .flex-base-8 {
      flex-basis: 66.6666%;
    }

    .flex-base-9 {
      flex-basis: 75%;
    }

    .flex-base-10 {
      flex-basis: 83.3333%;
    }

    .flex-base-11 {
      flex-basis: 91.6666%;
    }

    .flex-base-12 {
      flex-basis: 100%;
    }

    .time-slot {
      text-align: center;
      padding: 10px 16px;
      border-radius: 10px;
      cursor: pointer;
      height: 36px;
    }

    .time-slot.available {
      background-color: #d4edda;
      color: #155724;
    }

    .time-slot.unavailable {
      background-color: #f8d7da;
      color: #721c24;
    }
  }

  .availability-items {
    padding-top: 60px;
    width: 300px;

    .item {
      /* display: flex; */
      gap: 8px;
      height: 72px;
      padding: 8px 12px;
      color: #003264cc;
      font-weight: 500;
      font-size: 14px;
      line-height: 18.2px;
      border-top: 1px solid #f5f5f5;
      border-right: 1px solid #f5f5f5;
      cursor: pointer;

      &:hover {
        background-color: #f7f7f7;
      }

      .availability {
        font-size: 14px;
        color: #003264cc;
        font-weight: 400;
        font-size: 12px;
        line-height: 15.6px;
        margin: 0;
        padding-top: 4px;

        span {
          color: #06a60e;

          &.zero {
            color: #dc3545;
          }
        }
      }
    }
  }

  .time-header {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #00326499;
    width: 20px;
  }

  .current-time {
    position: absolute;
    bottom: 0;
    transform: translateX(-90%);
    rotate: 90deg;
    transform-origin: center left;
    background-color: #003264;
    font-weight: 600;
    font-size: 8px;
    line-height: 10.4px;
    color: white;
    border-radius: 10px;
    padding: 3px 10px 1px 10px;
  }

  .current-time-line {
    position: absolute;
    bottom: 0;
    rotate: 270deg;
    transform: translateX(10px);
    transform-origin: center left;
    border-bottom: 1px solid #0032641a;
    width: 300px;
  }

  .timeline {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 16px;
  }

  .timeline .time-header {
    flex: 1;
    text-align: center;
  }

  .timeline .current-time {
    flex: 1;
    height: 1px;
    background-color: #002855;
  }
}

.table-time {
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;

  color: #303233a9;

}





/* Parent container */

.pick-up-modal-title {
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 17px;
  color: rgba(48, 50, 51, 0.8);
}

.toggle-group {
  display: flex;
  border: 1px solid #DADADA;
  border-radius: 30px;
  overflow: hidden;
  max-width: 100%;
  /* Ensuring it doesn't overflow on smaller screens */

}

.toggle-btn {
  flex: 1;
  text-align: center;
  padding: 10px 15px;
  cursor: pointer;
  border: none;
  background: none;
  font-weight: bold;
  transition: background 0.3s ease, color 0.3s ease;
  font-size: 16px;
}

/* Active button style */
.active-btn {
  background-color: #0F3B66 !important;
  color: white !important;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}

.non-active-btn {
  color: #6E88A2;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .toggle-group {
    height: fit-content;
    border-radius: 20px;
    /* Smaller border radius for mobile */
  }

  .toggle-btn {
    padding: 4px 12px;
    font-size: 10px;
  }

  .active-btn {
    padding: 4px 12px;
  }

  .active-btn,
  .non-active-btn {
    font-size: 10px;
    line-height: 16px;

  }
}

.add-btn {
  font-weight: 600;
  background-color: transparent;
  border-radius: 50px;
  padding: 8px 16px 7px 12px;
  border: #003264cc solid;
  color: #003264cc;
  transition: all 0.3s ease-in-out;


  &:hover {
    background-color: #003264;
    color: white;
  }
}

.add-btn-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

@media (max-width: 480px) {
  .active-btn {
    padding: 4px 6px;
  }

  .toggle-btn {
    padding: 4px 6px;
    font-size: 10px;
  }

  .active-btn,
  .non-active-btn {
    font-size: 12px;
    line-height: 10px;
  }
}

.date-container-wrapper {
  overflow-x: auto;
  /* Enables horizontal scrolling */
  max-width: 100%;
  padding-bottom: 10px;
  white-space: nowrap;
  /* Prevent wrapping of date items */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
}

.date-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 0;
  white-space: nowrap;
}

.date-container::-webkit-scrollbar {
  display: none;
  scroll-behavior: smooth;
  /* Hides scrollbar */
}

.date-item {
  padding: 15px;
  border-radius: 10px;
  background-color: #F7F7F7;
  text-align: center;
  min-width: 60px;
  font-weight: bold;
  color: #0d2c4d;
  cursor: pointer;
}

.date-item-date-text {
  /* 08 */


  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  /* identical to box height, or 100% */

  color: #003264;




}

.date-item-day-text {
  /* 08 */


  /* SuN */


  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  /* identical to box height, or 133% */
  text-align: center;
  text-transform: uppercase;

  color: rgba(0, 50, 100, 0.8);



}



.month-title-text {

  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  /* identical to box height */
  text-align: center;
  text-transform: uppercase;

  color: rgba(0, 50, 100, 0.8);
}

.date-item-date-text.active {
  color: white !important;
}


.date-item-day-text.active {
  color: white !important;
}

.date-item.active {
  background-color: #003264;
  color: white !important;
}

@media (max-width: 820px) {
  .date-item {
    padding: 8px;
    border-radius: 10px;
    background-color: #F7F7F7;
    text-align: center;
    min-width: 50px;
    font-weight: bold;
    color: #0d2c4d;
  }
}

.today-text {
  font-size: 14px;
  font-weight: bold;
  color: #4b678c;
}

.date-number {
  font-size: 32px;
  font-weight: bold;
  color: #0d2c4d;
}

.date-label {
  font-size: 14px;
  font-weight: bold;
  color: #4b678c;
}



.pill {
  display: inline-flex;
  align-items: center;
  background-color: #f2f5f8;
  color: #0d3053;
  border-radius: 40px;

  padding: 5px 12px;
  margin: 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-align: left;

  &.booking {
    padding: 1px 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    margin: 0px;
  }

  &.label {
    padding: 1px 6px;
    border-radius: 10px;
  }

  &.red {
    background-color: rgba(220, 19, 19, 0.15);
    color: rgba(220, 19, 19, 1);
  }

  &.green {
    background-color: rgba(6, 166, 14, 0.1);
    color: rgba(6, 166, 14, 1);
  }

  &.popup-font {

    font-weight: 600;
    font-size: 11px;
    line-height: 14px;

    color: #26AF51;

  }
}

.experience-list-item:hover {
  background-color: #F6F7F9;
}

.experience-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #303233;
}

.experience-data {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #444444;

}


.experience {
  .experience-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 21px;
    color: #303233;
  }

  .experience-data {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #003264;

  }

  .experience-pill {
    display: inline-flex;
    align-items: center;
    background-color: #f2f5f8;
    color: #0d3053;
    border-radius: 40px;
    padding: 5px 12px;
    margin: 5px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    line-height: 15.6px;
    text-align: left;


    &.red {
      background-color: rgba(220, 19, 19, 0.15);
      color: rgba(220, 19, 19, 1);
    }

    &.green {
      background-color: rgba(6, 166, 14, 0.1);
      color: rgba(6, 166, 14, 1);
    }

    &.purple {
      color: #003264;
      background-color: #0032640F;
    }
  }

  .table {
    padding: 1px;
    border-radius: 12px;
    background-color: #ebebeb;
    overflow: hidden;
    border: 1px solid #ebebeb;
  }

  .table th,
  .table td {
    vertical-align: middle;
    white-space: nowrap;
  }




  .table th {
    white-space: nowrap;
    border-top: none;
    background-color: #f7f7f7;
    color: #303233;
    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
    padding: 8px 12px 8px 12px;
  }

  .table td {
    padding: 8px 12px !important;
    background-color: #ffffff;
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: #303233;
    border-width: 0;
    border-left-width: 1px;
    height: 20px;
  }

  .status {
    text-align: center;
  }


  .table tr {
    cursor: pointer;
    background-color: white;

    &:hover td {
      background-color: #f7f7f7;
    }
  }
}

.calendar-modal-content::before {
  content: "";
  position: absolute;
  top: var(--tooltip-top, 38px);
  left: -20px;
  width: 0;
  height: 0;

  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #fff;
  filter: drop-shadow(-2px 2px 4px rgba(109, 109, 109, 0.1));
}

@media (max-width: 820px) {
  .calendar-modal-content::before {
    content: "";
    position: absolute;
    top: 38px;
    left: -10px;
    width: 0;
    height: 0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #ffffff;
    filter: drop-shadow(-2px 2px 4px rgba(109, 109, 109, 0.1));
  }
}

.modal-rental-title {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
}



.body-canvas {
  padding-top: 0;

  .btn {
    padding: 10px 16px 8px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #303233;
    background-color: #ffffff;
    border-color: #303233;

    &:hover {
      background-color: #ebebeb33;
      border-color: #303233;
    }
  }

  .activity-title {
    color: #303233;
    font-weight: 600;
    font-size: 13px;
    line-height: 16.9px;
  }

  .account-title {
    color: #303233;
    font-weight: 600;
    font-size: 13px;
    line-height: 16.9px;
  }

  .rental-title {
    color: #303233;
    font-weight: 600;
    font-size: 13px;
    line-height: 16.9px;
  }

  .activity-detail {
    color: #303233;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
  }

  .account-detail {
    color: #303233;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
  }

  .table {
    background-color: #ebebeb;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    overflow: hidden;

    th {
      color: #303233;
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      padding: 5px 8px 3px 8px;
    }

    td {
      color: #303233cc;
      font-weight: 400;
      font-size: 12px;
      line-height: 18px;
      padding: 5px 8px 3px 8px;

      &.total {
        font-weight: 600;
      }
    }
  }
}

.overflow-x-auto-md {
  justify-content: end;
}

@media (max-width: 1024px) {
  .overflow-x-auto-md {
    justify-content: space-between;

  }
}

.overflow-product-x-auto-md {
  justify-content: end;
}

@media (max-width: 480px) {
  .overflow-product-x-auto-md {
    justify-content: space-between;

  }




}

@media (max-width: 1024px) {
  .overflow-x-auto-experience {
    overflow-x: auto;
    height: 100rem;
    min-width: 250%
  }

  .overflow-x-auto-experience-wrapper {
    overflow-x: auto;
  }
}

#experience-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

@media (max-width: 768px) {
  #experience-table {
    overflow-x: auto;
  }

  .mb-4 {
    min-width: 768px;
  }
}

@media (max-width: 480px) {
  #experience-table {
    overflow-x: auto;
  }

  .mb-4 {
    min-width: 768px;
  }

  .d-flex.justify-content-between {
    flex-wrap: nowrap;
  }
}

.experience-table-header-wrapper {
  border-radius: 16px;
  background-color: white;
  overflow-x: auto;
  width: 100%;
  border: 1px solid #EBEBEB
}

.experience-table-header-title {

  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #303233;
}

.experience-list-table-view-wrapper {
  border-radius: 12px;
  background-color: white;
  padding: 12px 1px;
}

.experience-list-table-view-wrapper::-webkit-scrollbar {
  display: none;
}

.inventory-modal-title {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #303233;
}

.new-booking-header-btn {
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  text-align: center;

  color: #FFFFFF;
}

.header-title {

  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;

  color: #303233;
}



.calendar-container {


  background: white;
  border-radius: 20px;
  border: 1px solid #ddd;
}

@media (max-width: 480px) {
  .calendar-container {
    overflow-x: scroll;
    /* width: 200%; */
  }
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.month-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  text-transform: uppercase;
  color: rgba(0, 50, 100, 0.8);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: left;
}

.calendar-grid div {
  padding: 16px;
  min-width: 210px;
  height: 113.4px;
  /* border: 0.1px solid #ddd; */
  background: #fff;
  position: relative;
}

.calendar-grid section {
  padding: 16px;
  background: #f7f7f7;
  border-radius: 10px;
  cursor: pointer;
}

.day-header {
  font-weight: 500;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  color: rgba(0, 50, 100, 0.8);
}

.day-title {
  font-weight: 600;
  font-size: 16px;
  color: rgba(0, 50, 100, 0.8);
}

.event {
  display: block;
  margin-top: 5px;
  font-size: 0.9rem;
  padding: 5px;
  border-radius: 5px;
  background-color: #f7f7f7;
  height: 24px;
  font-weight: 500;
  font-size: 12px;
  position: absolute;
  width: calc(100% - 10px);
  z-index: 10;
  left: 2px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  color: #303233;
  flex-shrink: 0;
}

.btn-custom {
  border-radius: 50%;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border: none;
  z-index: 1000;
  background-color: transparent;
  color: #003264;
}

/* 
===================================================================
Calender End
===================================================================
*/


/* 
===================================================================
Experiences Screens Phase - 2 Start
===================================================================
*/

.experiences-subheading {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}

.experiences-card-border {
  border: 1px solid #ebebeb;
  border-radius: 12px;
}

#experiences-availaibility {
  #experiences-availaibility-fields {
    #daterange {
      background-color: transparent !important;
    }

    .calendar-btn {
      border: none;
      background-color: transparent;
    }
  }
}

.right-canvas {
  .booking-information-radio {
    .form-check-input[type="radio"] {
      border: 1.5px solid #6E88A27A !important;
    }

    .form-check-label {
      color: #303233;
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
    }
  }

  .experience-btn {
    background-color: transparent;
    border: none;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #003264;
    transition: all 0.3s ease-in-out;

    &:hover {
      opacity: 0.8;
    }

  }

  #availabilityTime {
    overflow: scroll;
  }

  #availabilityTime::-webkit-scrollbar {
    display: none;
  }

}

.experience-detail-availability {
  background-color: #FFFFFF;
  border-radius: 16px;

  .experience-detail-availability-header {
    .experience-detail-availability-title {
      font-size: 16px;
      font-weight: 600;
      line-height: 22px;
      text-align: left;

    }

    button {
      width: fit-content;
      border-radius: 50px;
      background-color: #003264;
      color: white;
      padding: 9px 16px 7px 16px;
      border: 1px solid #0d3b66;
    }
  }
}


/* switch business */

/* sidebar user settings */
.sidebar-offcanvas {
  .name-mob {
    font-size: 16px;
    font-weight: 600;
    line-height: 20.8px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #303233;
  }

  .sidebar-mob-btn {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: #003264CC;
  }
}

.switch-business-subheading {
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  text-align: left;
  color: #444444CC;
}

.switch-business-bold-heading {
  font-size: 14px;
  font-weight: 600;
  line-height: 18.2px;
  color: #003264;
}

.switch-business-dropdown {
  width: 233px !important;

  .dropdown-menu {
    width: 100%;
  }

  .dropdown-item {
    color: #444444 !important;
  }

  .dropdown-menu-desktop {
    width: 100%;
    position: absolute !important;
    transform: translate(254px, 0px) !important;
  }

  .btn {
    border-radius: 8px;
    background-color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 18.2px;
    text-align: left;

  }

  .switch-business-dropdown-sub-value {
    font-size: 12px;
    font-weight: 400;
    line-height: 15.6px;
    text-align: left;
    color: #444444CC;
  }
}



/* Settings screen start */
.settings-layout {
  .settings-buttons-list {
    .form-group {
      margin-bottom: 12px;

      .settings-check {
        font-weight: 400;
        font-size: 16px;
        line-height: 20.8px;
        letter-spacing: 0%;
        color: #303233B2;
      }

      .checked {
        color: #003264;
        font-weight: 600;
      }
    }
  }

  .settings-content-wraper {
    .settings-card {
      background-color: white;
      border-radius: 16px;
      padding: 24px;
    }

    width: 100%;

    .accounts-detail {
      width: 100%;

      .accounts-detail-basic-info {
        .form-label {
          font-weight: 600;
        }

        .form-group {
          width: 100%;


          input {
            border: 1px solid transparent;

            &:focus {
              border-color: #003264;
            }
          }
        }
      }
    }

    .settings-list-heading {
      font-weight: 600;
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0%;
      color: #303233CC;

    }

    .settings-list-description {
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0%;
      color: #303233CC;
    }

    .settings-input {
      height: 48px;
    }

    .color-pickerinput-percentage {
      top: 22%;
      right: 3%;
      border-left: 1px solid #6E88A280;
      padding-left: 6px;
    }

    .widget-container {
      border-right: 1px solid #DADADA;

    }

    .code-block::-webkit-scrollbar {
      width: 8px;
    }

    .code-block::-webkit-scrollbar-thumb {
      background: #ffff;
      border-radius: 6px;
    }

    .code-block::-webkit-scrollbar-track {
      background: #222;
      /* Track background */
    }

    .copy-btn {
      background-color: #E2E7ED;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      color: #003264;
      border: none;
      border-radius: 50px;
      outline: none;
      cursor: pointer;
      width: 178;
      padding-top: 6px;
      padding-right: 12px;
      padding-bottom: 6px;
      padding-left: 12px;
    }


    .booking-widget-card {
      border-radius: 16px;
      padding: 24px;
      border: 1px solid transparent;
      box-shadow: 0px 1px 4px 0px #0000001A;

      .booking-widget-card-img {
        border-radius: 8px;
      }

      .booking-widget-card-status {
        width: max-content;
      }

      .product-name {
        font-weight: 600;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #303233;
      }

      .product-price {
        font-weight: 600;
        font-size: 24px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #303233;
      }

      .hourly-status {
        font-weight: 500;
        font-size: 12px;
        line-height: 22px;
        letter-spacing: 0%;
        color: #444444CC;
      }

      .availability {
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0%;
        color: #444444CC;
      }

      .product-description {
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0%;
        color: #444444CC;
        width: 80%;
      }

      .add-booking-btn {
        background-color: #26AF51;
        color: white;
        border: none;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;
        border-radius: 12px;
        padding-top: 8px;
        padding-right: 16px;
        padding-bottom: 8px;
        padding-left: 16px;
        display: flex;
        gap: 10px;
        transition: all 0.3s ease-in-out;
      }

      .add-booking-btn:disabled {
        background-color: #B0BFCD;
      }

      .add-booking-btn:hover {
        opacity: 0.8;
      }

    }

    .experience-level {
      .experience-heaidng {
        font-weight: 600;
        font-size: 18px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #303233;
      }

      .experience-sbheaing {
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0%;
        color: #6E88A2;
      }

      .edit-level-btn {
        font-weight: 600;
        font-size: 14px;
        line-height: 24px;
        letter-spacing: 0%;
        text-align: center;
        color: #003264;

      }
    }

    #productList,
    #categories {
      overflow: scroll;
    }

    #productList::-webkit-scrollbar,
    #categories::-webkit-scrollbar {
      display: none;
    }

  }

  .filters {
    button {
      border: none;
      outline: none;
      background-color: transparent;
      font-weight: 600;
      font-size: 14px;
      line-height: 100%;
      letter-spacing: 6%;
      color: #444444CC;
    }

  }

  .nav-tabs-container {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs-container::-webkit-scrollbar {
    display: none;
  }

  .form-control {
    border: 1px solid transparent;

    &:focus {
      border-color: #003264;
    }
  }


  .busines-plan-card {
    padding: 24px;
    border: 1px solid #F4F4F4;
    border-radius: 16px;

    .plan-btn {
      color: #003264;
      border-radius: 32px;
      background-color: white;
      border: none;
      padding: 2px 16px;

      &.v2 {
        background-color: #003264;
        color: white;
      }
    }

    .plan-title {
      font-weight: 500;
      font-size: 14px;
      line-height: 26px;
      letter-spacing: 0%;

      &.v1 {
        color: #444444;
      }

      &.v2 {
        color: white;
      }
    }

    .plan-price {
      font-weight: 600;
      font-size: 20px;
      line-height: 22px;
      letter-spacing: 0%;

      &.v1 {
        color: #444444;
      }

      &.v2 {
        color: white;
      }
    }

    .plan-list {
      font-weight: 400;
      font-size: 14px;
      line-height: 18.2px;
      letter-spacing: 0%;

      &.v1 {
        color: #444444;
      }

      &.v2 {
        color: white;
      }

      &.shaded {
        opacity: 0.3;
      }

    }

    &.dark {
      background-color: #003264;
    }
  }


  @media screen and (max-width: 768px) {
    .settings-buttons-list {
      display: flex;
      width: 100%;
      overflow-x: scroll;

      .form-group {
        width: 100%;
        white-space: nowrap;
      }

      scroll-behavior: smooth;
      /* Enables scrolling */
      scrollbar-width: none;
      /* For Firefox */
      -ms-overflow-style: none;
      /* For IE and Edge */

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .settings-content-wraper {
      .experience-level {
        .experience-heaidng {
          font-size: 16px;
        }
      }

      .wizard-pargaraph {
        width: 100% !important;
      }

      .booking-widget-card-status {
        margin-top: 10px;
      }

      .widget-container {
        border-right: none;

      }
    }


  }


  .tooltip-inner {
    .tax-info-tooltip-title {
      color: white;
      font-weight: 600;
      font-size: 14px
    }
  }
}

.right-canvas {
  .form-group {
    input:focus {
      border-color: #003264;
    }
  }

  .remove-level-btn {
    border: none;
    outline: none;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    padding: 15px;
  }
}


.percentage-sign {
  position: absolute;
  top: 55%;
  right: 30px;
}

.condition-type-inputs {
  border: 1px solid #EBEBEB;
  border-radius: 12px;
  padding: 16px;
}

/* Settting screen end */



/* 
===================================================================
Experiences Screens Phase - 2 End
===================================================================
*/


/* 
===================================================================
Screens Phase - 3 Start
===================================================================
*/

/* Ticket Details */
.ticket-grid-container {
  display: grid;
  grid-template-columns: 2fr 2fr 5fr 3fr;
  /* Different widths for columns */
  gap: 10px;
  /* Space between columns */
  padding: 20px;

  .ticket-grid-item {
    text-align: center;
  }

}

.ticket-image-screenshot {
  border: 1px solid #F6F7F9;
  border-radius: 8px;
  overflow: hidden;
}

.ticket-details-divider {
  width: 100%;
  border-bottom: 1px solid #DFDFDFCC;
}

.ticket-details-header {
  padding: 16px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .ticket-heading {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #303233;

  }
}

.ticket-details-date {
  font-weight: 500;
  font-size: 12px;
  line-height: 15.6px;
  letter-spacing: 0%;
  color: #303233CC;
}

.ticket-details-description {
  font-weight: 400;
  font-size: 14px;
  line-height: 18.2px;
  letter-spacing: 0%;
  padding-bottom: 16px;
  color: #303233CC;

}

.ticket-textarea {
  border-radius: 12px;
  /* padding: 13px 12px 11px; */
  border: 1px solid rgba(0, 0, 0, 0);
  transition: border-color 0.3s ease;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  resize: none;
}

.add-attachment-btn {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0%;
  color: #003264;
  border: none;
  background-color: transparent;

}

@media screen and (max-width: 768px) {
  .ticket-grid-container {
    grid-template-columns: 1fr;
    /* 1 column for small screens */
  }
}

/* 
===================================================================
Screens Phase - 3 End
===================================================================
*/


/* 
===================================================================
Screens Phase - 4 Start
===================================================================
*/

/* Reports Pages start */
.reports-widgets {
  overflow: visible !important;

  .card {
    overflow: visible !important;
    height: auto !important;
    min-height: 108px;
  }
}

.reports-section {
  .chart-container {
    background-color: white;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid #EBEBEB;
    color: #303233;


    .chart-dropdown {
      padding-top: 8px;
      padding-right: 16px;
      padding-bottom: 8px;
      padding-left: 16px;

    }

  }

  .chart-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 34px;
    letter-spacing: 0;
    vertical-align: middle;
  }

  .chart-subtitle {
    font-weight: 500;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0px;
    color: #6E88A2;
  }

  .chart-note {
    font-weight: 400;
    font-size: 11px;
    font-style: italic;
    color: #8FA3B8;
    margin-top: 4px;
  }

  .chart-btn {
    border-radius: 60px;
    border: 1px solid #0032643D;
    padding-top: 4px;
    padding-right: 12px;
    padding-bottom: 4px;
    padding-left: 12px;
    display: flex;
    align-items: center;
    background-color: white;
    color: #003264;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;

    &:hover {
      background-color: #e8ecf3;
    }
  }

  .filter-btn-group {
    border: 1px solid #DADADA;
    border-radius: 50px;
    padding: 4px;
    width: max-content;
  }

  .btn-group .filter-btn {
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    border-radius: 50px;
    padding-top: 8px;
    padding-right: 20px;
    padding-bottom: 8px;
    padding-left: 20px;
    color: #003264CC;

  }

  .btn-group .filter-btn.active {
    background-color: #003264;
    /* Active button background color */
    color: white;
    /* Active button text color */
  }


  .custom-chart-tooltip {
    position: absolute;
    background: #003264;
    color: white;
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-radius: 16px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    /* Ensure tooltip stays on top */

    &::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      width: 20px;
      height: 20px;
      background: #003264;
      /* Match tooltip background color */
      border-radius: 3px;
      z-index: 999;
      /* Place tip behind tooltip body */
    }

    .tooltip-title {
      font-weight: 400;
      font-size: 8px;
      line-height: 12px;
      letter-spacing: 0px;
      color: #FFFFFF99;
    }

    .tooltip-value {
      font-weight: 700;
      font-size: 14px;
      line-height: 100%;
      letter-spacing: 0px;
      color: #FFFFFF;
      margin-bottom: 4px;
    }

    .tooltip-footer {
      font-weight: 400;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
      text-align: center;
      color: #FFFFFF;
    }
  }

  .chart-dropdown span {
    font-size: 14px;
    color: #003264CC;
    font-weight: 500;
  }



  @media screen and (max-width: 768px) {}
}


/* Reports Pages End */



/* 
===================================================================
Screens Phase - 4 End
===================================================================
*/


/* 
===================================================================
Screens Phase - 5 Start
===================================================================
*/

/* Staff Detail */
.documents {
  color: #003264;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;

  img {
    border: none;
  }

  .delete-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background-color: #D1002814;
  }
}

.staff-table-header {
  button {
    border-radius: 48px !important;
    padding: 9px 16px;
    white-space: nowrap;
  }
}

.staff-btn {
  border: 1px solid #DADADA;
  border-radius: 50px;
  padding: 8px 20px;
  color: #003264CC;
}

@media screen and (max-width: 768px) {
  .staff-detail-container {
    gap: 0 !important;
  }
}



.calendar-schedule-wrapper {
  overflow-x: auto;
  width: 100%;
}

.calendar-schedule-wrapper::-webkit-scrollbar {
  display: none;
}

/* Calender Schedule */
.calender-schedule-card {
  border-radius: 20px;
  background-color: #ffff;
  min-width: 1400px;
  width: 100%;
}

.calender-left-side {
  width: 20%;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-right: 1px solid #DADADA;
}

.calender-right-side {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  width: 80%;
}

.calender-slots {
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #00326499;
  height: 72px !important;
  border-bottom: 1px solid #DADADA;
}

.calender-search-wrapper {
  position: relative;
}

.calender-search {
  border: 1px solid #DADADA;
  border-radius: 8px;
  border-width: 1px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 36px;
  outline: none;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
}

.calender-search::placeholder {
  color: #00326466;
}

.search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
}

.team-search-header {
  height: 72px !important;
  border-bottom: 1px solid #DADADA;
}

.team-bar {
  min-height: 58px;
  border-top: 1px solid #DADADA;
  padding: 8px 12px;
}

.team-calendar-row {
  min-height: 58px !important;
  border-bottom: 1px solid #DADADA;
}

.team-member-title {
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #303233;
}

.team-member-subtitle {
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #30323380;
}

/* Custom accordion styling */
.accordion-button {
  background-color: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: 42px !important;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #303233 !important;

}

.accordion-button::after {
  display: none !important;
}

.accordion-button:not(.collapsed) {
  box-shadow: none !important;
}


.calendar-label {
  border-radius: 10px;
  padding-top: 11px;
  padding-right: 12px;
  padding-bottom: 11px;
  padding-left: 12px;
  background-color: #F7F7F7;

  &.w-40 {
    width: 40%;
  }

  .time {
    font-weight: 600;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0%;
    align-items: center;
    white-space: nowrap;
    color: #303233;

    &.v1 {
      white-space: wrap;
      font-size: 11px;
    }

    &.v2 {
      white-space: wrap;
      font-size: 8px;
    }
  }

  .status {
    color: #26AF51;
    background-color: #26AF5114;
    padding: 4px 10px;
    border-radius: 40px;

    &.v1 {
      font-size: 9px;
    }
  }

  .name {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0%;
    color: #303233;
  }
}

/* Compact calendar label for 2-week and month views */
.calendar-label-compact {
  border-radius: 6px;
  padding: 4px 6px;
  background-color: #F7F7F7;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.calendar-label-compact .time-compact {
  color: #303233;
}

.compact-more {
  font-size: 9px;
  color: #666;
  font-weight: 500;
  padding: 2px 4px;
}

.one-week-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
  gap: 10px;
  border-bottom: 1px solid #DADADA;
  height: 72px !important;
  padding: 0 8px;
}

.two-week-container {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  width: 100%;
  gap: 10px;
  border-bottom: 1px solid #DADADA;
  height: 72px !important;
  padding: 0 8px;
}

.month-container {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  width: 100%;
  gap: 1px;
  border-bottom: 1px solid #DADADA;
  height: 72px !important;
  padding: 0 8px;
}



.one-week-container-slots {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
  gap: 1px;
  background-color: #DADADA;

}

.two-weeks-container-slots {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  width: 100%;
  gap: 1px;
  background-color: #DADADA;
}

.month-container-slots {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  width: 100%;
  gap: 1px;
  background-color: #DADADA;
  padding: 0 8px;
}

.week-day-slot {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #ffff;
  width: 100%;
  padding: 8px 4px;
  min-height: 72px;
  overflow: hidden;
}

.week-day {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #F7F7F7;
  border-radius: 8px;
  padding: 8px 4px;
  width: 100%;
  height: 56px;
  align-self: center;

  .date {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #003264;

    &.v1 {
      font-size: 13px;
    }
  }

  .day {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
    color: #003264CC;

    &.v1 {
      font-size: 9px;
    }
  }
}


/* team celender */

.calendar-row {
  .left-team-bar {
    width: 20%;
    border-right: 1px solid #DADADA;
    border-bottom: 1px solid #DADADA;
  }

  .right-team-bar {
    width: 80%;
    border-bottom: 1px solid #DADADA;
  }
}

.show-more-btn {
  color: #003264;
  font-weight: 600;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0%;
  background-color: transparent;
  border: none;
  outline: none;
  transition: all 0.3s ease-in-out;

  &:hover {
    opacity: 0.7;
  }

  &.v1 {
    font-size: 8px;
  }
}

.duration {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #003264;
}


.schedule-calendar-modal {
  .heading {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #303233;
  }

  .text {
    color: #303233;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0%;
  }

  .subheading {
    font-weight: 600;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #303233;
    margin: 10px 0px;
  }

  .shift-delete-btn {
    border-radius: 8px;
    padding: 12px 18px;
    border: 1px solid #dc1313;
    background-color: transparent;

    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0%;
    color: #DC1313;
    transition: all 0.3s ease-in-out;

    &:hover {
      opacity: 0.7;
    }
  }

  .shift-edit-btn {
    background-color: #003264;
    border-radius: 8px;
    padding: 12px 24px;
    border: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0%;
    color: white;
    transition: all 0.3s ease-in-out;

    &:hover {
      opacity: 0.7;
    }
  }
}

.warning-text {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0%;
  color: #CF1210;
}

#rosterModal {
  .roster-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0%;
    text-align: center;
    color: #303233;
  }

  .roster-para {
    margin-top: 16px;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0%;
    text-align: center;
    color: #303233CC;
  }

  .label {
    display: flex;
    margin: 16px 0;
    text-align: left !important;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #303233;
  }

  .check-heading {
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0%;
    color: #303233;
  }

  .roster-check {
    border-radius: 12px;
    padding: 16px;
    border: 1.5px solid #EBEBEB;
    cursor: pointer;


    &.checked {
      background-color: #0032641A;
      border: 1px solid #00326433
    }

  }

  .check-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #303233CC;
  }
}


/* 
===================================================================
Screens Phase - 5 End
===================================================================
*/





/* 
===================================================================
Screens Phase - 6 Start
===================================================================
*/


.form-builder-wrapper {

  .elements {
    height: 80vh;
    overflow: auto;
  }

  .elements {
    border-radius: 16px;
    padding: 24px 16px;
    background-color: white;


    .element-handle {
      font-weight: 500;
      font-size: 16px;
      line-height: 100%;
      letter-spacing: 0%;
      color: #003264;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 12px;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
      white-space: nowrap;

      &:hover {
        background-color: #003264;
        color: white;

        img {
          filter: brightness(0) invert(1);
        }

        img.first-handle {
          filter: none;
        }
      }
    }

    #elements-list::-webkit-scrollbar {
      display: none;
    }



  }

  .form-content {
    flex-grow: 1;

    .dropdown {
      .btn {
        padding: 13px 12px 11px;
        border-radius: 12px;
      }

      input[type="checkbox"] {
        outline: none;
        border: none;


        &:focus {
          background-color: #00274d;
          border: none;
        }
      }
    }

    .save-template-btn {
      border-radius: 50px;
      padding: 8px 20px;
      background-color: #003264;
      font-weight: 500;
      font-size: 14px;
      line-height: 100%;
      letter-spacing: 0%;
      text-align: center;
      color: white;
      border: none;
      outline: none;
      width: fit-content;
      transition: all 0.3s ease-in-out;

      &:hover {
        opacity: 0.7;
      }
    }

    .border-dashed {
      border: 1px dashed #CBD5DE;
    }

    .form-add-logo-btn {
      border-radius: 50px;
      padding: 8px 16px;
      border-width: 1px;
      font-weight: 500;
      font-size: 16px;
      line-height: 100%;
      letter-spacing: 0%;
      color: #003264CC;
      display: flex;
      gap: 15px;
      border: 1px dashed #CBD5DE;
      align-items: center;
      white-space: nowrap;
    }


    .form-content-wrapper {
      border-radius: 12px;
      padding: 32px;
      background-color: white;

      .drag-and-drop-layout {
        border-radius: 16px;
        padding: 54px;
        display: flex;
        justify-content: center;
        gap: 20px;
        align-items: center;
        border: 1px dashed #6E88A252;
        background-color: #B1BFCD1A;
        font-weight: 500;
        font-size: 20px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #00326466;
      }
    }

    .form-builder-input-wrapper {
      border-radius: 16px;
      padding: 16px;
      position: relative;
      transition: all 0.3s ease-in-out;
      border: 1px solid #CBD5DE66;

      &.selected {
        border: 1px solid #003264;

      }
    }

    .form-builder-input-actions {
      position: absolute;
      right: -15px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 2;


      .edit-btn {
        background-color: #003264;
      }

      .delete-btn {
        background-color: #DC1313;
      }

      button {
        border: none;
        outline: none;
        background-color: transparent;
        cursor: pointer;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        padding: 6px;
        transition: all 0.3s ease-in-out;

        &:hover {
          opacity: 0.7;
        }

      }
    }

    .form-builder-input-actions {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease;
    }

    /* Show actions only when selected */
    .form-builder-input-wrapper.selected .form-builder-input-actions {
      opacity: 1;
      visibility: visible;
    }


    .form-builder-check-radio,
    .form-builder-check-checkbox {
      .form-check-input {
        border: 1.5px solid #6E88A27A !important;
        padding: 0;

        &:checked {
          background-color: #003264 !important;
        }
      }

      label {
        font-weight: 500;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #3A393D;
      }

    }

    .form-builder-heading {
      font-weight: 600;
      font-size: 24px !important;
      line-height: 100%;
      letter-spacing: 0%;
      color: #303233;
    }

    .form-builder-subheading {
      font-weight: 400;
      font-size: 16px !important;
      line-height: 100%;
      letter-spacing: 0%;
      color: #303233CC;

    }

    .page-number {
      font-weight: 500;
      font-size: 16px;
      line-height: 100%;
      letter-spacing: 0%;
      color: #003264CC;
    }

    .delete-page-btn:hover {
      transition: all 0.3s ease-in-out;
      opacity: 0.7;
    }

  }
}

.templates {
  .template-item {
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #003264;
    height: 40px;
    padding-right: 8px;
    padding-left: 16px;
    cursor: pointer;

    &.active {
      border-radius: 8px;
      background-color: #003264;
      color: #FFFFFF;
    }
  }
}

#preview-templates-container {
  img {
    filter: grayscale(100%);
  }

  .template-title-empty {
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: center;
    color: #003264CC;
    margin-top: 16px;
  }

  .template-description-empty {
    max-width: 370px;
    margin-top: 16px;
    color: #00326480;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;

  }
}


#previewFormCanvas {
  width: calc(100% - 240px) !important;
  border-top-left-radius: 32px;
  border-bottom-left-radius: 32px;
  background-color: #F6F7F9;


  .close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    outline: none;
    background-color: #D1002814;
  }

  .divider {
    border: 1px solid #0032641A
  }


  .publish-banner-wrapper {
    border-radius: 16px;
    padding: 14px 24px;
    background-color: #F7581F;
  }

  .publish-link {
    border-radius: 12px;
    padding: 16px;
    background-color: #F6F7F9;
    width: fit-content;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0%;

  }

  .publish-now-btn {
    border-radius: 50px;
    padding-top: 8px;
    padding-right: 16px;
    padding-bottom: 7px;
    padding-left: 16px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    border: none;
    outline: none;
    color: #003264;
    background-color: #FFFFFF;
    transition: all 0.3s ease-in-out;

    &:hover {
      opacity: 0.7;
    }
  }


  .form-preview-container {
    max-width: 620px;
    padding: 32px 24px;
    background-color: white;
  }
}

.form-heading {
  font-weight: 600;
  font-size: 24px !important;
  line-height: 100%;
  letter-spacing: 0%;
  color: #303233;
}

.form-subheading {
  font-weight: 400;
  font-size: 16px !important;
  line-height: 100%;
  letter-spacing: 0%;
  color: #303233CC;

}

.publish-modal-header {
  .close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    outline: none;
    background-color: #D1002814;

  }
}

.publish-modal-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
  color: #303233;
  margin: 0;
}

.copy-link-input {
  border: 1px solid #6E88A2;
}

.open-new-tab-btn {
  display: flex;
  align-items: center;
  border: none;
  outline: none;
  background-color: transparent;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #003264;
}

.copy-link-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-radius: 8px;
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #003264;
  color: white;
  margin-right: 3px;
}

.qr-code-wrapper {
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #F0F0F0;

  .qr-code-title {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0%;
    color: #003264;
  }

  .qr-code-description {
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #6E88A2;
  }
}



.publish-modal {
  border-radius: 16px;

  .modal-content {
    border: none !important;

  }

  .modal-body {
    padding-top: 16px;
    padding-right: 24px;
    padding-bottom: 48px;
    padding-left: 24px;
  }

  .publish-modal-dropdown-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #003264;
  }

  .dropdown {
    .dropdown-menu {
      width: fit-content;
    }
  }

  .dropdown-item {
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #6E88A23D;
    cursor: pointer;

    &.active {
      border: 1px solid #003264;
      background-color: #00326414;
    }


    .dropdown-item-title {
      font-weight: 600;
      font-size: 14px;
      line-height: 100%;
      letter-spacing: 0%;
      color: #303233;
    }

    .dropdown-item-subtitle {
      font-weight: 400;
      font-size: 12px;
      line-height: 100%;
      letter-spacing: 0%;
      color: #00326480;
    }
  }

  .share-link-text {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0%;
    color: #6E88A2;
  }

  .publish-modal-textarea {
    height: 126px;
    border-radius: 16px;
    border: none;
    padding: 16px;
    outline: none;
    text-align: left;
    background-color: #B1BFCD1A;
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #003264CC;
  }


  .download-qr-code-btn {
    border-radius: 50px;
    padding: 6px 16px;
    color: white;
    border: none;
    outline: none;
    background-color: #003264;
    transition: all 0.3s ease-in-out;

    &:hover {
      opacity: 0.7;
    }

  }

  .copy-publish-link-btn {
    border-radius: 50px;
    padding: 6px 16px;
    color: #003264;
    background-color: #E2E7ED;
    border: none;
    outline: none;
    transition: all 0.3s ease-in-out;

    &:hover {
      opacity: 0.7;
    }
  }
}


/* Waiver form details */

.form-delete-btn {
  background-color: #DC1313 !important;
  border: none !important;
  transition: all 0.3s ease-in-out;

  &:hover {
    opacity: 0.7;
  }
}

#editFormResponseCanvas {
  .navigation-buttons {
    display: flex;
    gap: 8px;

    button {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: #003264;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease-in-out;
      outline: none;
      border: none;

      &:hover {
        opacity: 0.7;
      }
    }
  }


  .data-wrapper {
    background-color: #6E88A21A;
    border-radius: 16px;
    padding: 16px;

    .data-title {
      font-weight: 600;
      font-size: 16px;
      line-height: 22px;
      letter-spacing: 0%;
      color: #303233;

    }

    .data-value {
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0%;
      color: #303233;
    }

  }

  .star-rating .star {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.2s;
  }

  .star-rating .star:hover {
    transform: scale(1.1);
  }
}



/* Successfull Form submission page */
.successfull-response-wrapper {
  margin-top: 202px;
  border-radius: 16px;
  padding: 32px 24px;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #E5EAEF;
  background-color: #FFFFFF;

  .title {
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #303233;
  }

  .description {
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #6E88A2;
  }

  .outline {
    background-color: transparent;
    border: 1px solid #003264;
    color: #003264;
    transition: all 0.3s ease-in-out;

    &:hover {
      opacity: 0.7;
    }
  }

  button {
    padding: 16px 20px;
    border-radius: 12px;
  }
}


/* Form User perspective page */
.user-waiver-form {
  padding: 32px 24px;
  background-color: #FFFFFF;
  max-width: 650px;
  margin: auto;

  .page-count {
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #003264CC;
  }
}


@media screen and (max-width: 768px) {
  .waiver-forms-list-filters {
    gap: 5px !important;

    button,
    input {
      font-size: 12px;
    }
  }

  .successfull-response-wrapper {
    button {
      font-size: 14px;
    }
  }

  .form-builder-wrapper {
    .elements {
      background-color: #F6F7F9 !important;
      height: auto;
      padding: 0;
      overflow: visible;
    }

    .form-content {
      .form-content-wrapper {
        padding: 20px;

        .drag-and-drop-layout {
          padding: 48px;
          white-space: nowrap;
          font-size: 14px;
        }
      }
    }
  }

  .add-new-page-container {
    margin-bottom: 100px;
  }

  .element-handle {
    background-color: white;
  }

  #previewFormCanvas {
    width: 100% !important;
    height: 100vh !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    .offcanvas-body {
      padding: 0;
    }

    .publish-link {
      font-size: 13px;
      margin-bottom: 1rem;
    }
  }



}


/* 
===================================================================
Screens Phase - 6 End
===================================================================
*/






/* 
===================================================================
GLOBAL STYLES
===================================================================
*/

/* Pills/Badges */
.section-subtitle {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #303233;
}

.text-small-variant {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0px;
  color: #6E88A2;

}

.status-pill {
  padding: 4px 12px;
  border-radius: 40px;
  font-size: 12px;
  line-height: 15.6px;
  font-weight: 600;
}

.status-pill-danger {
  color: #DC1313;
  background-color: #DC13130F;
}

.status-pill-warning {
  color: #06A60E;
  background-color: #06A60E0F;
}

.status-pill-pending {
  color: #F7581F;
  background-color: #F7581F0F;
}

.status-pill-success {
  color: #26AF51;
  background-color: #26AF510F;
}

.status-pill-draft {
  background-color: #0032640f;
  color: #003264;
}

.status-pill-info {
  background-color: #0d6efd0f;
  color: #0d6efd;
}

/* Table */

.table-sort-btn {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.table-row-checkbox {
  cursor: pointer;
  height: 15px;
  width: 15px;
  border: 2px solid #c0c0c0;
}

/* dropdown */
.dropdown {
  position: relative;
  width: 100%;
  color: #003264cc;
}

.dropdown-small {
  position: relative;
  width: 200px;
}

/* sidebar */
.right-canvas {
  width: 35% !important;
  background-color: white;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  padding: 2rem;
  border: none !important;

  .title {
    color: #303233;
    font-weight: 600;
    font-size: 24px;
    line-height: 26px;
    padding-top: 6px !important;
    line-height: 31.2px;
  }

  label {
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
  }

  input,
  textarea {
    border-radius: 12px;
    /* padding: 13px 12px 11px; */
    border: 1px solid rgba(0, 0, 0, 0);
    transition: border-color 0.3s ease;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    resize: none;
  }

  /* for products page */
  #bufferTimeToggle,
  #variationsToggle {
    cursor: pointer;
    width: 24px;
    height: 15px;
  }

  #variationEnable,
  #bufferTimeEnable {
    color: #6e88a2;
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
  }

  #bufferTime {
    border: 1px solid #ebebeb;
    border-radius: 12px;
  }

  #editCategory {
    cursor: pointer;
    background-color: transparent;
    border: none;
    color: #003264;
    font-weight: 600;
  }

  #propertyList {
    li {
      border: none !important;
    }
  }

  #variations {
    h5 {
      font-size: 16px;
      font-weight: 600;
      line-height: 22px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      padding: 0;
      margin: 0;

    }
  }
}



@media screen and (max-width: 992px) {
  .right-canvas {
    width: 100% !important;
    height: 90vh !important;
  }
}

@media screen and (max-width: 576px) {
  .right-canvas {
    width: 100% !important;
    padding: 1rem;

    /* for product page */

    .step-indicator .step {
      font-size: 10px;

      &.inactive {
        font-size: 10px;
      }
    }
  }
}

/* dropdown filter */
.dropdown-filter {
  position: relative;

  color: #003264cc;
  box-shadow: none !important;

  .dropdown-filter-placeholder-text {
    padding: 0px 5px 0px 15px;
  }

  .btn {
    border: 1px solid #dadada;
    background: none;
    border-radius: 50px;
    color: #003264cc;

    &:hover {
      background-color: #e8ecf3;
    }

    img {
      margin-top: -2px;
    }

    &.v1 {
      background: #f9f9f9;
      border-color: #f9f9f9;
    }
  }

  .dropdown-menu {
    padding: 12px;
    border-radius: 12px;
    border: none;
    background-color: white;
    overflow: hidden;
    box-shadow: 0 1px 8px #0000001a;
    width: 197px;
    height: 322px;

    .dropdown-item {
      padding: 8px;
      color: #003264cc;
      display: flex;
      align-items: center;
      gap: 8px;

      &:focus {
        background-color: rgba(255, 255, 255, 0.076);
        color: #00326487;
      }
    }

    &.v1 {
      padding-right: 0px;
      overflow: auto;
      scroll-behavior: smooth;
      /* Enables scrolling */
      scrollbar-width: none;
      /* For Firefox */
      -ms-overflow-style: none;
      /* For IE and Edge */

      &::-webkit-scrollbar {
        display: none;
      }

    }
  }

  .menu-items {
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-right: 2px;

    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    &::-webkit-scrollbar-track {
      background: #f6f6f6;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #565656;
      border-radius: 4px;
      border: 2px solid #e3e3e3;
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: #c0c0c0;
    }
  }

  .dropdown-header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
    padding: 0px;
    padding-right: 12px;
    padding-bottom: 8px;

    .search-box {
      border-radius: 8px;
      background-color: white;
      color: #003264cc;
    }

    input {
      margin-top: 2px;
      /* border: 1px solid #DADADA; */
      /* background-color: white; */
      /* margin-bottom: 0px; */
      /* height: 32px; */
    }
  }
}

.small-heading-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  text-align: left;
  text-decoration-skip-ink: none;
  color: #303233CC;
}

.seasonal-checkbox-label {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  text-align: left;
}

#briefText {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* Limit to 3 lines */
  overflow: hidden;
}

#briefText.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.table-button-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}

/* Apply fixed table layout to ensure consistent column widths */
#variationRows {
  table-layout: fixed;
  width: 100%;
  /* Ensure the table takes the full container width */
  border-collapse: collapse;
  /* Remove gaps between table cells */
}

/* First child (image section) with a smaller width */
#variationRows td:first-child {
  width: 1%;
  /* Adjust width for the first column (less width) */
  height: 78px;
  /* Consistent height for the row */
  vertical-align: middle;
}

/* All other columns share the remaining width */
#variationRows td:not(:first-child) {
  width: calc(90% / 3);
  /* Divide the remaining width equally among the other columns */
  height: 78px;
  /* Maintain consistent row height */
  vertical-align: middle;
  padding: 8px;
  white-space: nowrap;
  /* Prevent text wrapping */
  overflow: hidden;
  /* Clip overflowing content */
  text-overflow: ellipsis;
  /* Add ellipsis for overflowing content */
}

.table-variation-font {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
}


/* Date Range Picker */
.daterange {
  background: #f8f9fa;
  border: none;
  border-radius: 16px;
  padding: 10px;
  border-radius: 12px;
  text-align: center;
  font-size: 16px;
  overflow: hidden;
  outline: none;
  width: 100%;
  text-align: left;
}

.date-picker-wrapper {
  position: relative;
  height: 48px;
  width: 100%;

  button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 12px;
    padding: 0;
    margin: 0;
  }
}

.daterangepicker::before,
.daterangepicker::after {
  content: none !important;
  /* Remove the pseudo-elements */
}


.daterangepicker {
  border-radius: 12px !important;
  box-shadow: 0px 1px 4px 0px #0000001A !important;
  border: none;
}

.daterangepicker .drp-calendar {
  padding: 15px;
}

.daterangepicker .drp-calendar .month {
  font-size: 18px;
  font-weight: bold;
}

.daterangepicker .drp-calendar th {
  font-weight: bold;
  color: #1d3557;
}

.daterangepicker td.in-range {
  background-color: #1d3557 !important;
  color: #ffffff !important;
}

.daterangepicker td.in-range:first-child {
  border-radius: 25px 0px 0px 25px;
}

.daterangepicker td.in-range:last-child {
  border-radius: 0px 25px 25px 0px;
}

.daterangepicker td.in-range:nth-last-child(1) {
  border-radius: 0px 25px 25px 0px;
}

.daterangepicker td.off {
  color: #c0c0c0 !important;
}

.daterangepicker .drp-calendar.right {
  display: none !important;
}

.daterangepicker td.active {
  background-color: #1d3557 !important;
  color: #ffffff !important;
  border-radius: 25px 0px 0px 25px;
}

.daterangepicker td.end-date {
  background-color: #1d3557 !important;
  color: #ffffff !important;
  border-radius: 0px 25px 25px 0px;
}

.daterangepicker .drp-calendar .prev,
.daterangepicker .drp-calendar .next {
  color: #ffffff;
  border-radius: 50%;
  padding: 8px;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* For booking rental */
#datPickerParent {
  width: 100%;
  position: relative;

  .daterangepicker {
    top: 100% !important;
    left: 80% !important;
  }

  /* Adjust for smaller screens (e.g., 1080p or smaller) */
  @media (max-width: 1920px) {
    .daterangepicker {
      left: 80% !important;
      /* Adjust left position for smaller screens */
    }
  }

  /* Adjust for very small screens (e.g., 720p or smaller) */
  @media (max-width: 1280px) {
    .daterangepicker {
      left: 60% !important;
      /* Adjust further for even smaller screens */
    }
  }

  /* Adjust for mobile devices (e.g., 480px and below) */
  @media (max-width: 768px) {
    .daterangepicker {
      left: 30% !important;
      /* Center the date picker for mobile screens */
    }
  }

  @media (max-width: 480px) {
    .daterangepicker {
      left: 0% !important;
      /* Center the date picker for mobile screens */
    }
  }
}


.payment-text-sucess {
  color: #158A74;
  font-weight: 500;
}

.payment-text-danger {
  color: #CC4747;
  font-weight: 500;
}







/* Custom Calendar start */

.custom-date-input-container {
  max-width: 477px;
  margin: 2rem auto;
  position: relative;

  .calendar-wrapper {
    max-width: 477px;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 1px 4px 0px #0000001A;
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    margin-top: 5px;
    border-radius: 16px;
  }

  .custom-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 10px;
  }

  .custom-calendar-header {
    padding: 12px;
    text-align: center;
    color: #003264;
    font-weight: 600;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0%;

  }

  .calendar-day {
    font-weight: 500;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    justify-self: center;
  }

  .current-month {
    background: #fff;
  }

  .current-month:hover {
    background: #e9ecef;
    border-radius: 50%;
  }

  .disabled-day {
    color: #6E88A280;
    cursor: not-allowed;
  }

  .selected-day {
    background: #003264 !important;
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .custom-select {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #6E88A21F;
    padding: 6px 12px;
    border-radius: 8px;

    &:focus {
      box-shadow: none;
      border: 1px solid #6E88A21F;
    }
  }


}

/* Custom Calendar end */

/* Seasons table responsiveness */
.settings-content-container .table {
	table-layout: fixed;
	width: 100%;
}

.settings-content-container .table th,
.settings-content-container .table td {
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal;
}

.settings-content-container .table .applicable-days-col {
	width: 18%;
}

/* =================================================================
   Experience Calendar Styles - All Screen Sizes
   ================================================================= */

/* Default: show full day names, hide short names */
.availability-by-experience-calendar .day .day-short,
.availability-by-products-calendar .day .day-short {
	display: none;
}

.availability-by-experience-calendar .day .day-full,
.availability-by-products-calendar .day .day-full {
	display: inline;
}

/* Experience cards - proper text handling at ALL sizes */
.availability-by-experience-calendar .book-slot-booked,
.availability-by-products-calendar .book-slot-booked {
	min-width: 120px;
	text-align: left !important;
	overflow: visible !important;
	padding: 8px 10px !important;
}

/* Book title removed - now using direct book-slot-header */

/* Experience name - smaller font and ellipsis for overflow */
.availability-by-experience-calendar .book-slot-booked .book-slot-header,
.availability-by-products-calendar .book-slot-booked .book-slot-header {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	font-size: 12px;
}

/* Schedule ID and availability on same row */
.availability-by-experience-calendar .book-slot-booked .schedule-availability-row,
.availability-by-products-calendar .book-slot-booked .schedule-availability-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
}

.availability-by-experience-calendar .book-slot-booked .schedule-id,
.availability-by-products-calendar .book-slot-booked .schedule-id {
	font-size: 10px;
	color: #6E88A2;
}

/* Availability indicator (dot + optional text like "3/3") */
.availability-by-experience-calendar .book-slot-booked .availability-indicator,
.availability-by-products-calendar .book-slot-booked .availability-indicator {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 500;
}

.availability-by-experience-calendar .book-slot-booked .availability-indicator::before,
.availability-by-products-calendar .book-slot-booked .availability-indicator::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}

.availability-by-experience-calendar .book-slot-booked .availability-indicator.green,
.availability-by-products-calendar .book-slot-booked .availability-indicator.green {
	color: #28a745;
}

.availability-by-experience-calendar .book-slot-booked .availability-indicator.green::before,
.availability-by-products-calendar .book-slot-booked .availability-indicator.green::before {
	background-color: #28a745;
}

.availability-by-experience-calendar .book-slot-booked .availability-indicator.red,
.availability-by-products-calendar .book-slot-booked .availability-indicator.red {
	color: #dc3545;
}

.availability-by-experience-calendar .book-slot-booked .availability-indicator.red::before,
.availability-by-products-calendar .book-slot-booked .availability-indicator.red::before {
	background-color: #dc3545;
}

/* Legacy pill styles - keep for backwards compatibility */
.availability-by-experience-calendar .book-slot-booked .pill.label,
.availability-by-products-calendar .book-slot-booked .pill.label {
	white-space: nowrap;
	flex-shrink: 0;
	font-size: 11px !important;
	padding: 1px 5px !important;
}

/* Detail section - compact layout with time then guide */
.availability-by-experience-calendar .book-slot-booked .detail,
.availability-by-products-calendar .book-slot-booked .detail {
	font-size: 10px;
	margin-top: 4px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.availability-by-experience-calendar .book-slot-booked .detail .name,
.availability-by-experience-calendar .book-slot-booked .detail .time,
.availability-by-products-calendar .book-slot-booked .detail .name,
.availability-by-products-calendar .book-slot-booked .detail .time {
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #6E88A2;
}

.availability-by-experience-calendar .book-slot-booked .detail img,
.availability-by-products-calendar .book-slot-booked .detail img {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	vertical-align: middle;
}

.availability-by-experience-calendar .book-slot-booked .detail .book-slot-name,
.availability-by-products-calendar .book-slot-booked .detail .book-slot-name {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* =================================================================
   Experience Calendar Responsive Styles - Tablet
   ================================================================= */

/* Tablet breakpoint: more compact design */
@media (max-width: 992px) {
	/* Detail section - hide at tablet */
	.availability-by-experience-calendar .book-slot-booked .detail,
	.availability-by-products-calendar .book-slot-booked .detail {
		display: none !important;
	}

	/* Show abbreviated day names (SAT, MON, etc.) */
	.availability-by-experience-calendar .day .day-full,
	.availability-by-products-calendar .day .day-full {
		display: none;
	}

	.availability-by-experience-calendar .day .day-short,
	.availability-by-products-calendar .day .day-short {
		display: inline;
	}

	/* Compact experience cards */
	.availability-by-experience-calendar .book-slot-booked,
	.availability-by-products-calendar .book-slot-booked {
		min-width: 100px;
		padding: 6px 8px !important;
	}

	/* Experience name - smaller font */
	.availability-by-experience-calendar .book-slot-booked .book-slot-header,
	.availability-by-products-calendar .book-slot-booked .book-slot-header {
		font-size: 11px;
		line-height: 1.2;
	}

	/* Availability badge - compact */
	.availability-by-experience-calendar .book-slot-booked .pill.label,
	.availability-by-products-calendar .book-slot-booked .pill.label {
		font-size: 9px !important;
		padding: 2px 4px !important;
	}

	/* Schedule ID - smaller */
	.availability-by-experience-calendar .book-slot-booked .book-slot-header small,
	.availability-by-products-calendar .book-slot-booked .book-slot-header small {
		font-size: 8px !important;
	}

	/* Day selector - ensure all days visible */
	.availability-by-experience-calendar .day,
	.availability-by-products-calendar .day {
		min-width: 80px;
		padding: 8px 4px;
	}

	/* Day date text - smaller */
	.availability-by-experience-calendar .day,
	.availability-by-products-calendar .day {
		font-size: 14px;
	}
}

/* ===========================================
   Active Season Highlighting
   Highlights the season that applies to selected dates
   =========================================== */

/* Table row highlighting for seasonal pricing */
.active-season {
	background-color: #e8f5e9 !important;
	border-left: 3px solid #4caf50 !important;
}

.active-season td {
	background-color: #e8f5e9 !important;
}

/* Tab highlighting for seasonal pricing */
.active-season-tab {
	background-color: #e8f5e9 !important;
	font-weight: 600;
}

/* Badge showing "Applies" on active season */
.active-season-badge {
	display: inline-block;
	background-color: #4caf50;
	color: white;
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 4px;
	margin-left: 8px;
	vertical-align: middle;
}

/* Ensure badge styling in tabs */
.nav-link .active-season-badge {
	margin-left: 4px;
}

/* ===========================================
   Global Search
   Command palette style search across all modules
   =========================================== */

.global-search-container {
	width: 100%;
	max-width: 400px;
}

.global-search-input {
	position: relative;
	display: flex;
	align-items: center;
}

.global-search-input .form-control {
	padding-left: 40px;
	padding-right: 75px;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
	background-color: #f9fafb;
	height: 44px;
	font-size: 14px;
	width: 100%;
}

.global-search-input .form-control:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	background-color: #fff;
}

.global-search-input .form-control::placeholder {
	color: #9ca3af;
}

.global-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: flex;
	align-items: center;
}

.global-search-icon img {
	width: 16px;
	height: 16px;
	opacity: 0.5;
}

.global-search-shortcut {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	gap: 2px;
	z-index: 4;
	pointer-events: none;
}

.global-search-shortcut kbd {
	padding: 3px 6px;
	font-size: 10px;
	font-family: inherit;
	background-color: #e5e7eb;
	border-radius: 4px;
	border: 1px solid #d1d5db;
	color: #6b7280;
	font-weight: 500;
	line-height: 1;
}

.global-search-spinner {
	position: absolute;
	right: 80px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
}

/* Results Dropdown */
.global-search-results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	max-height: 420px;
	overflow-y: auto;
	background: white;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	z-index: 1050;
	border: 1px solid #e5e7eb;
}

.search-category {
	padding: 8px 0;
	border-bottom: 1px solid #f3f4f6;
}

.search-category:last-child {
	border-bottom: none;
}

.search-category-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px 4px;
	font-size: 11px;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.search-category-header img {
	width: 14px;
	height: 14px;
	opacity: 0.5;
}

.search-result-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s;
	cursor: pointer;
}

.search-result-item:hover {
	background-color: #f3f4f6;
	text-decoration: none;
	color: inherit;
}

.result-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.result-title {
	font-size: 14px;
	font-weight: 500;
	color: #111827;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.result-subtitle {
	font-size: 12px;
	color: #6b7280;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.result-meta {
	flex-shrink: 0;
	margin-left: 12px;
}

.result-meta .badge {
	font-size: 11px;
	padding: 4px 8px;
	font-weight: 500;
}

.search-no-results {
	padding: 32px;
	text-align: center;
	color: #6b7280;
}

.search-no-results img {
	width: 40px;
	height: 40px;
	opacity: 0.3;
	margin-bottom: 12px;
}

.search-no-results p {
	margin: 0;
	font-size: 14px;
}

/* Selected state for keyboard navigation */
.search-result-item.selected {
	background-color: #e0f2fe;
}

/* Tag color dot */
.tag-color-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Search footer */
.search-footer {
	padding: 10px 16px;
	border-top: 1px solid #f3f4f6;
	background-color: #f9fafb;
	border-radius: 0 0 12px 12px;
}

.search-footer .view-all-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-decoration: none;
	color: #3b82f6;
	font-size: 13px;
	font-weight: 500;
}

.search-footer .view-all-link:hover {
	color: #2563eb;
	text-decoration: none;
}

.search-footer-hint {
	font-size: 11px;
	color: #9ca3af;
	font-weight: 400;
}

/* Responsive */
@media screen and (max-width: 991px) {
	.global-search-container {
		max-width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.global-search-results {
		position: fixed;
		left: 16px;
		right: 16px;
		top: 70px;
		max-height: calc(100vh - 100px);
	}
}

/* Search Results Page */
.search-results-header .input-group {
	border: 1px solid #d1d5db;
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.search-results-header .input-group:focus-within {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-results-header .input-group .input-group-text {
	border: none;
	border-radius: 0;
}

.search-results-header .input-group .form-control {
	border: none;
	border-radius: 0;
}

.search-results-header .input-group .form-control:focus {
	box-shadow: none;
}

/* ========================================
   Check Availability Modal & Grid Styles
   ======================================== */

.check-availability-modal {
	max-width: 900px;
}

.check-availability-modal .modal-body {
	padding: 0;
}

/* Item Selector Dropdown */
.check-availability-selector {
	position: relative;
}

.check-availability-selector .dropdown-menu {
	max-height: 300px;
	overflow-y: auto;
	width: 100%;
}

.check-availability-selector .dropdown-item {
	padding: 0.5rem 1rem;
	cursor: pointer;
}

.check-availability-selector .dropdown-item:hover {
	background-color: #f8f9fa;
}

.check-availability-selector .dropdown-item.active,
.check-availability-selector .dropdown-item:active {
	background-color: #0d3b66;
	color: white;
}

.check-availability-selector .dropdown-header {
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	color: #6c757d;
	padding: 0.5rem 1rem;
	background-color: #f8f9fa;
}

/* Week Navigation */
.check-availability-week-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1rem;
	background-color: #f8f9fa;
	border-bottom: 1px solid #dee2e6;
}

.check-availability-week-nav .week-label {
	font-weight: 600;
	min-width: 200px;
	text-align: center;
}

.check-availability-week-nav button {
	padding: 0.375rem 0.75rem;
	border: 1px solid #dee2e6;
	background-color: white;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.15s ease-in-out;
}

.check-availability-week-nav button:hover {
	background-color: #e9ecef;
}

.check-availability-week-nav button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Availability Grid Table */
.availability-table {
	font-size: 0.875rem;
}

.availability-table th {
	font-weight: 600;
	white-space: nowrap;
}

.availability-table td {
	transition: all 0.15s ease-in-out;
}

/* Availability Cell States */
.availability-cell {
	min-width: 60px;
	min-height: 40px;
	vertical-align: middle;
}

.availability-cell.available {
	background-color: #dcfce7;
	color: #166534;
}

.availability-cell.available:hover {
	background-color: #bbf7d0;
	transform: scale(1.02);
}

.availability-cell.low {
	background-color: #fef3c7;
	color: #92400e;
}

.availability-cell.low:hover {
	background-color: #fde68a;
	transform: scale(1.02);
}

.availability-cell.unavailable {
	background-color: #fee2e2;
	color: #991b1b;
}

.availability-cell.closed {
	background-color: #f3f4f6;
	color: #9ca3af;
}

.availability-cell.no-data {
	background-color: #f9fafb;
	color: #d1d5db;
}

.availability-cell.past {
	background-color: #f3f4f6;
	color: #d1d5db;
	cursor: default !important;
}

/* Selected States */
.availability-cell.selected {
	background-color: #0d3b66 !important;
	color: white !important;
	font-weight: 600;
	box-shadow: inset 0 0 0 2px #0a2d4d;
}

.availability-cell.in-range {
	background-color: #dbeafe !important;
	color: #1e40af !important;
}

/* Legend */
.availability-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 0.75rem 1rem;
	background-color: #f8f9fa;
	border-top: 1px solid #dee2e6;
	font-size: 0.75rem;
}

.availability-legend-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.availability-legend-color {
	width: 16px;
	height: 16px;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.availability-legend-color.available {
	background-color: #dcfce7;
}

.availability-legend-color.low {
	background-color: #fef3c7;
}

.availability-legend-color.unavailable {
	background-color: #fee2e2;
}

.availability-legend-color.selected {
	background-color: #0d3b66;
}

/* Selection Summary */
.selection-summary {
	padding: 0.75rem 1rem;
	background-color: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 6px;
	margin: 1rem;
}

.selection-summary .selection-label {
	font-weight: 600;
	color: #1e40af;
	margin-bottom: 0.25rem;
}

.selection-summary .selection-dates {
	color: #1e3a8a;
}

/* Modal Footer */
.check-availability-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	border-top: 1px solid #dee2e6;
	background-color: white;
}

/* Placeholder / Loading State */
.availability-grid-placeholder {
	padding: 2rem;
}

.availability-grid-placeholder .placeholder-row {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.availability-grid-placeholder .placeholder-cell {
	flex: 1;
	height: 40px;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border-radius: 4px;
}

@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.check-availability-modal {
		margin: 0.5rem;
	}

	.check-availability-week-nav {
		padding: 0.75rem;
	}

	.check-availability-week-nav .week-label {
		min-width: auto;
		font-size: 0.875rem;
	}

	.availability-table {
		font-size: 0.75rem;
	}

	.availability-cell {
		min-width: 45px;
		padding: 0.25rem !important;
	}

	.availability-legend {
		gap: 0.5rem;
		font-size: 0.625rem;
	}

	.selection-summary {
		margin: 0.75rem;
		padding: 0.5rem 0.75rem;
		font-size: 0.875rem;
	}

	.check-availability-footer {
		flex-direction: column;
		gap: 0.75rem;
	}

	.check-availability-footer .btn {
		width: 100%;
	}
}

/* Discount input styling for bundles */
.discount-input-group {
	width: 115px;
}

.discount-input-group .discount-input {
	-webkit-appearance: textfield !important;
	-moz-appearance: textfield !important;
	appearance: textfield !important;
	text-align: right;
	padding-right: 6px !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.discount-input-group .discount-input::-webkit-outer-spin-button,
.discount-input-group .discount-input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0;
}

.discount-input-group .input-group-text {
	display: flex;
	align-items: center;
	padding-left: 6px;
	padding-right: 6px;
}

/* Percentage input - input comes first, % comes after */
.discount-input-group .discount-input:first-child {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-right: none !important;
}

.discount-input-group .input-group-text:last-child {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* Currency input - $ comes first, input comes after */
.discount-input-group .input-group-text:first-child {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.discount-input-group .discount-input:last-child {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-left: none !important;
}
/* AI Generate Button - Dash Purple Gradient */
.ai-generate-btn {
	background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
	border: none;
	color: white;
	border-radius: 20px;
	padding: 4px 12px;
	font-size: 12px;
	transition: all 0.2s ease;
}
.ai-generate-btn:hover {
	background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 100%);
	color: white;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);
}
.ai-generate-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}
.ai-generate-btn:focus {
	color: white;
	box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.25);
}

/* ========================
   Onboarding Wizard & Setup
   ======================== */

.onboarding-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1050;
	display: flex;
	align-items: center;
	justify-content: center;
}

.onboarding-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	background: rgba(255, 255, 255, 0.3);
}

.onboarding-card {
	position: relative;
	z-index: 1;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	width: 90%;
	max-width: 720px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 2rem;
}

/* Step Indicator */
.onboarding-step-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 0 1rem;
}

.onboarding-step-indicator .step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.onboarding-step-indicator .step-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	border: 2px solid #d0d5dd;
	color: #6c757d;
	background: #fff;
	transition: all 0.2s ease;
}

.onboarding-step-indicator .step-item.active .step-circle {
	border-color: #003264;
	background: #003264;
	color: #fff;
}

.onboarding-step-indicator .step-item.completed .step-circle {
	border-color: #003264;
	background: #003264;
	color: #fff;
}

.onboarding-step-indicator .step-label {
	font-size: 13px;
	color: #6c757d;
	white-space: nowrap;
}

.onboarding-step-indicator .step-item.active .step-label {
	color: #003264;
	font-weight: 600;
}

.onboarding-step-indicator .step-item.completed .step-label {
	color: #003264;
}

.onboarding-step-indicator .step-line {
	width: 48px;
	height: 2px;
	background: #d0d5dd;
	margin: 0 4px;
	margin-bottom: 24px;
	flex-shrink: 0;
}

.onboarding-step-indicator .step-line.completed {
	background: #003264;
}

/* Choice Cards */
.onboarding-choice-card {
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 1.5rem;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.onboarding-choice-card:hover {
	border-color: #003264;
	box-shadow: 0 0 0 1px #003264;
}

.onboarding-choice-card .choice-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
	font-size: 20px;
}

/* Upload Area */
.onboarding-upload-area {
	border: 2px dashed #d0d5dd;
	border-radius: 12px;
	padding: 1.5rem;
	text-align: center;
	transition: border-color 0.2s ease;
}

.onboarding-upload-area:hover {
	border-color: #003264;
}

/* Responsive */
@media screen and (max-width: 768px) {
	.onboarding-card {
		width: 95%;
		padding: 1.5rem;
		max-height: 95vh;
	}

	.onboarding-step-indicator .step-line {
		width: 24px;
	}

	.onboarding-step-indicator .step-label {
		font-size: 11px;
	}

	.onboarding-step-indicator .step-circle {
		width: 30px;
		height: 30px;
		font-size: 12px;
	}
}

@media screen and (max-width: 375px) {
	.onboarding-card {
		width: 100%;
		border-radius: 0;
		max-height: 100vh;
		padding: 1rem;
	}

	.onboarding-step-indicator .step-line {
		width: 16px;
	}

	.onboarding-step-indicator .step-label {
		font-size: 10px;
	}
}