* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Nunito", sans-serif;
}
.dataTables_scrollBody {
  min-height: 350px;
}
.dataTables_wrapper.no-footer .dataTables_scrollBody{
    border-bottom: none !important;
}
button {
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
}
.crm-container {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 242px calc(100% - 242px);
}
.crm-body {
  width: 100%;
  position: relative;
}
.crm-body.darkness {
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.14);
  }
}
.aside-container {
  width: 100%;
  background: #0a0a0b;
  padding: 20px 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  .closeAside {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    z-index: 2;
    svg {
      width: 100%;
      height: 100%;
    }
  }
  .crm-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .aside-menu {
    margin-top: 50px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
    .menuLink {
      display: flex;
      align-items: center;
      width: 100%;
      padding-left: 14px;
      position: relative;
      .menuLink-inner {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 15px;
        gap: 14px;
        background: transparent;
        border-radius: 10px 0 0 10px;
        transition: 0.35s ease-in-out;
        img {
          width: 30px;
          height: 30px;
          min-width: 30px;
        }
        p {
          font-weight: 600;
          font-size: 18px;
          line-height: 28px;
          color: #fff;
        }
      }
      &::after {
        content: "";
        position: absolute;
        left: 0;
        width: 5px;
        height: 100%;
        background: transparent;
        border-radius: 0 4px 4px 0;
        transition: 0.35s ease-in-out;
      }
      .right-title-box {
        position: absolute;
        background: transparent;
        top: 0px;
        left: 90px;
        padding: 10px 0 0 10px;
        display: none;
        visibility: hidden;
        opacity: 0;
        transition: 0.35s ease-in-out;
        z-index: 5;
        .right-title {
          padding: 10px 16px;
          background: #202224;
          border-radius: 14px;
          color: #fff;
          font-weight: 400;
          font-size: 18px;
          line-height: 28px;
        }
      }
      &:hover {
        .menuLink-inner {
          background: #4679ef;
        }
        &::after {
          background: #4679ef;
        }
        .right-title-box {
          opacity: 1;
          visibility: visible;
        }
      }
    }
    .menuLink.activeLink {
      .menuLink-inner {
        background: #4679ef;
      }
      &::after {
        background: #4679ef;
      }
    }
    .aside-dropdown {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      transition: 0.3s ease-in-out;
      gap: 0;
      position: relative;
      .asideDownBtn {
        display: flex;
        align-items: center;
        width: 100%;
        padding-left: 14px;
        position: relative;
        .asideDownBtn-inner {
          display: flex;
          align-items: center;
          width: 100%;
          padding: 15px;
          gap: 14px;
          background: transparent;
          border-radius: 10px 0 0 10px;
          transition: 0.35s ease-in-out;
          img {
            width: 30px;
            height: 30px;
            min-width: 30px;
          }
          p {
            font-weight: 600;
            font-size: 18px;
            line-height: 28px;
            color: #fff;
          }
          svg {
            min-width: 24px;
            width: 24px;
            height: 24px;
            transition: 0.3s ease-in-out;
          }
        }
        &::after {
          content: "";
          position: absolute;
          left: 0;
          width: 5px;
          height: 100%;
          background: transparent;
          border-radius: 0 4px 4px 0;
          transition: 0.35s ease-in-out;
        }
      }
      .aside-dropdown-links {
        width: 100%;
        padding-left: 30px;
        height: 0;
        overflow: hidden;
        transition: 0.3s ease-in-out;
        .dropdown-links-inner {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: end;
          gap: 16px;
          padding: 0 16px;
          max-height: 130px;
          overflow-y: auto;
          direction: rtl;
          &::-webkit-scrollbar {
            width: 3px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.8);
          }
          &::-webkit-scrollbar-thumb {
            width: 3px;
            border-radius: 6px;
            background: #4679ef;
          }
          .dropdown-link {
            padding-left: 20px;
            position: relative;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #fff;
            &::after {
              content: "";
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: 0;
              width: 8px;
              height: 8px;
              border-radius: 100px;
              background: #cecece;
              transition: 0.35s ease-in-out;
            }
            &:hover {
              &::after {
                background: #4679ef;
              }
            }
          }
        }
      }
      .right-title-box {
        position: absolute;
        background: transparent;
        top: 0px;
        left: 90px;
        padding: 10px 0 0 10px;
        display: none;
        visibility: hidden;
        opacity: 0;
        transition: 0.35s ease-in-out;
        z-index: 5;
        .box-inner {
          padding: 26px 20px;
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 14px;
          background: #fff;
          box-shadow: 6px 6px 54px 0px rgba(0, 0, 0, 0.05);
          border-radius: 14px;
          min-width: 175px;
          width: 175px;
          .right-title {
            color: #202224;
            font-weight: 400;
            font-size: 20px;
            line-height: 30px;
          }
          .right-dropdown-links {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 16px;
            transition: 0.3s ease-in-out;
            .dropdown-link {
              padding-left: 20px;
              position: relative;
              font-weight: 400;
              font-size: 14px;
              line-height: 20px;
              color: #202224;
              width: 100%;
              &::after {
                content: "";
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                width: 8px;
                height: 8px;
                border-radius: 100px;
                background: #cecece;
                transition: 0.35s ease-in-out;
              }
              &:hover {
                &::after {
                  background: #4679ef;
                }
              }
            }
          }
        }
      }
      &:hover {
        .asideDownBtn {
          .asideDownBtn-inner {
            background: #4679ef;
          }
          &::after {
            background: #4679ef;
          }
        }
        .right-title-box {
          visibility: visible;
          opacity: 1;
        }
      }
    }
    .aside-dropdown.activeLink {
      .asideDownBtn {
        .asideDownBtn-inner {
          background: #4679ef;
        }
        &::after {
          background: #4679ef;
        }
      }
    }
    .aside-dropdown.active {
      gap: 16px;
      .asideDownBtn {
        .asideDownBtn-inner {
          svg {
            transform: rotate(180deg);
          }
        }
      }
      .aside-dropdown-links {
        height: auto;
        overflow: initial;
      }
    }
    .aside-settings {
      margin-top: 150px;
    }
    .exitProfile {
      display: flex;
      align-items: center;
      width: 100%;
      padding-left: 14px;
      position: relative;
      .exitProfile-inner {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 15px;
        gap: 14px;
        background: transparent;
        border-radius: 10px 0 0 10px;
        transition: 0.35s ease-in-out;
        img {
          width: 30px;
          height: 30px;
          min-width: 30px;
        }
        p {
          font-weight: 600;
          font-size: 18px;
          line-height: 28px;
          color: #fff;
        }
      }
      .right-title-box {
        position: absolute;
        background: transparent;
        top: 0px;
        left: 90px;
        padding: 10px 0 0 10px;
        display: none;
        visibility: hidden;
        opacity: 0;
        transition: 0.35s ease-in-out;
        z-index: 5;
        .right-title {
          padding: 10px 16px;
          background: #202224;
          border-radius: 14px;
          color: #fff;
          font-weight: 400;
          font-size: 18px;
          line-height: 28px;
        }
      }
      &::after {
        content: "";
        position: absolute;
        left: 0;
        width: 5px;
        height: 100%;
        transition: 0.35s ease-in-out;
        background: transparent;
        border-radius: 0 4px 4px 0;
      }
      &:hover {
        .exitProfile-inner {
          background: #4679ef;
        }
        &::after {
          background: #4679ef;
        }
        .right-title-box {
          opacity: 1;
          visibility: visible;
        }
      }
    }
  }
}
.short-aside {
  grid-template-columns: 90px calc(100% - 90px);
  transition: 0.3s ease-in-out;
  .aside-container {
    padding: 60px 0 30px;
    .crm-logo {
      width: 74px;
    }
    .aside-menu {
      margin-top: 80px;
      .menuLink {
        .menuLink-inner {
          gap: 0;
          p {
            width: 0;
            overflow: hidden;
          }
        }
        .right-title-box {
          display: block;
        }
      }
      .aside-dropdown {
        .asideDownBtn {
          .asideDownBtn-inner {
            gap: 1px;
            p {
              width: 0;
              overflow: hidden;
            }
          }
        }
        .aside-dropdown-links {
          display: none;
        }
        .right-title-box {
          display: block;
        }
      }
      .aside-dropdown.active {
        gap: 0;
        .asideDownBtn {
          .asideDownBtn-inner {
            svg {
              transform: rotate(0);
            }
          }
        }
        .aside-dropdown-links {
          height: auto;
          overflow: initial;
        }
      }
      .exitProfile {
        .exitProfile-inner {
          p {
            width: 0;
            overflow: hidden;
          }
        }
        .right-title-box {
          display: block;
        }
      }
    }
  }
}
.header {
  width: 100%;
  padding: 15px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-left {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 490px;
    width: 100%;
    .aside_resize_btn {
      width: 24px;
      height: 24px;
      min-width: 24px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .header-search {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      background: #f5f6fa;
      border: 1px solid #d5d5d5;
      border-radius: 100px;
      .search_btn {
        width: 24px;
        height: 24px;
        min-width: 24px;
        svg {
          width: 100%;
          height: 100%;
        }
      }
      input {
        width: 100%;
        background: transparent;
        border: none;
        outline: none;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #000;
        &::placeholder {
          color: #b5b5b5;
        }
      }
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    gap: 24px;
    .header-notification {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: start;
      .notification-btn {
        width: 24px;
        height: 24px;
        min-width: 24px;
        position: relative;
        svg {
          width: 100%;
          height: 100%;
        }
        &::after {
          content: "";
          position: absolute;
          width: 8px;
          height: 8px;
          border-radius: 100px;
          background: #ff0000;
          top: 2px;
          right: 3px;
        }
      }
      .notification-list {
        display: flex;
        flex-direction: column;
        align-items: start;
        background: #fff;
        box-shadow: 8px 8px 10px 0px rgba(103, 102, 102, 0.2);
        position: absolute;
        right: 0;
        width: 280px;
        top: 64px;
        border-radius: 12px;
        max-height: 200px;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transition: 0.35s ease-in-out;
        &::-webkit-scrollbar {
          width: 2px;
          background: #e2e2e2;
        }
        &::-webkit-scrollbar-thumb {
          width: 2px;
          background: #18294b;
        }
        .notification-item {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 2px;
          padding: 12px 20px;
          border-bottom: 1px solid #dadada;
          p {
            font-size: 16px;
            font-weight: 500;
            line-height: 20px;
            color: #202224;
          }
          span {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: #606060;
          }
          &:last-child {
            border-bottom: none;
          }
        }
      }
    }
    .header-notification.active {
      .notification-list {
        top: 54px;
        opacity: 1;
        visibility: visible;
      }
    }
    .header-user {
      display: flex;
      flex-direction: column;
      align-items: start;
      position: relative;
      .header-user-btn {
        display: flex;
        align-items: center;
        gap: 20px;
        .userImg {
          width: 44px;
          height: 44px;
          min-width: 44px;
          border-radius: 100px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 100px;
          }
        }
        .userBody {
          display: flex;
          flex-direction: column;
          align-items: start;
          p {
            font-weight: 700;
            font-size: 14px;
            line-height: 20px;
            color: #404040;
          }
          span {
            font-weight: 600;
            font-size: 12px;
            line-height: 16px;
            color: #565656;
          }
        }
        .down-icon {
          width: 18px;
          height: 18px;
          min-width: 18px;
          transition: 0.35s ease-in-out;
          svg {
            width: 100%;
            height: 100%;
          }
        }
      }
      .header-user-body {
        display: flex;
        flex-direction: column;
        align-items: start;
        background: #fff;
        border-radius: 14px;
        box-shadow: 8px 8px 10px 0px #67666633;
        position: absolute;
        right: 0;
        top: 74px;
        width: 150px;
        z-index: 1;
        opacity: 0;
        visibility: hidden;
        transition: 0.35s ease-in-out;
        .profile_link {
          display: flex;
          align-items: center;
          padding: 13px 20px;
          gap: 10px;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #202224;
          border-bottom: 1px solid #dadada;
          width: 100%;
          svg {
            min-width: 20px;
            width: 20px;
            height: 20px;
          }
        }
        .exitProfile {
          width: 100%;
          display: flex;
          align-items: center;
          padding: 11px 20px;
          gap: 10px;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #202224;
          svg {
            min-width: 24px;
            width: 24px;
            height: 24px;
          }
        }
      }
    }
    .header-user.active {
      .header-user-btn {
        .down-icon {
          transform: rotate(180deg);
        }
      }
      .header-user-body {
        top: 64px;
        opacity: 1;
        visibility: visible;
      }
    }
  }
}
.backLink {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #131527;
  svg {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }
}
.pagination-result {
  border-top: 2px solid #dfdfdf;
  padding: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .result-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #6c757d;
  }
  .pagination-result-right {
    display: flex;
    align-items: center;
    gap: 30px;
    .show_count {
      display: flex;
      align-items: center;
      gap: 10px;
      span {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #6c757d;
      }
      input {
        border: 1px solid #dfdfdf;
        outline: none;
        width: auto;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #343a40;
        border-radius: 4px;
        padding: 4px 0;
        text-align: center;
        width: 50px;
      }
    }
    .pagination {
      display: flex;
      align-items: center;
      gap: 10px;
      .pagination-item {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        color: #6c757d;
      }
      .pagination-item.active {
        background: #4679ef;
        color: #fff;
      }
      .prev,
      .next {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #dfdfdf;
        svg {
          width: 16px;
          height: 16px;
        }
      }
    }
  }
}
.success-modal-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .success-modal {
    max-width: 730px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .closeSuccess {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    img {
      max-width: 300px;
    }
    h2 {
      margin-top: 30px;
      font-weight: 600;
      font-size: 24px;
      line-height: 32px;
      text-align: center;
      color: #1e1e1e;
    }
    p {
      margin: 16px auto 0;
      max-width: 350px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      text-align: center;
      color: #979797;
    }
    .goBack {
      margin: 16px auto 0;
      padding: 12px 52px;
      color: #fff;
      background: #4679ef;
      border-radius: 10px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
    }
  }
}
.error-modal-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .error-modal {
    max-width: 730px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .closeError {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    img {
      max-width: 300px;
    }
    h2 {
      margin-top: 30px;
      font-weight: 600;
      font-size: 24px;
      line-height: 32px;
      text-align: center;
      color: #1e1e1e;
    }
    p {
      margin: 16px auto 0;
      max-width: 350px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      text-align: center;
      color: #979797;
    }
    .goBack {
      margin: 16px auto 0;
      padding: 12px 52px;
      color: #fff;
      background: #4679ef;
      border-radius: 10px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
    }
  }
}
.error-page-container {
  padding: 100px 30px;
  background: #f5f6fa;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .error-page {
    max-width: 770px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      max-width: 580px;
      width: 100%;
    }
    h2 {
      margin-top: 50px;
      font-weight: 600;
      font-size: 40px;
      line-height: 48px;
      text-align: center;
      color: #0a0a0b;
    }
    p {
      margin: 20px auto 0;
      max-width: 100%;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      text-align: center;
      color: #868686;
    }
    .goBack {
      margin: 30px auto 0;
      padding: 12px 52px;
      color: #fff;
      background: #4679ef;
      border-radius: 10px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
    }
  }
}

.generalSearch {
  width: 100%;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 16px;
  .form_inner {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    .form_item {
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 10px;
      width: 100%;
      label {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #0a0a0b;
      }
      input {
        border: 1px solid #d6d6d6;
        border-radius: 14px;
        padding: 15px 20px;
        width: 100%;
        outline: none;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #000;
      }
      select {
        width: 100%;
        border: 1px solid #d6d6d6;
        border-radius: 14px;
        padding: 15px 20px;
        outline: none;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #000;
      }
    }
  }
  .submitForm {
    padding: 12px 28px;
    box-shadow: 2px 2px 4px 0px #c3c3c3;
    background: #4679ef;
    border-radius: 10px;
    display: block;
    margin-left: auto;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
  }
}

/*============== Dashboard ==================*/
.dashboard-continer {
  padding: 30px;
  background: #f5f6fa;
  h1 {
    font-weight: 700;
    font-size: 32px;
    line-height: 44px;
    color: #202224;
  }
  .dashboard-boxes {
    margin-top: 30px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    .dashboard-box {
      padding: 16px;
      border-radius: 12px;
      display: flex;
      align-items: start;
      gap: 10px;
      width: 100%;
      background: #fff;
      justify-content: space-between;
      .box-left {
        display: flex;
        flex-direction: column;
        align-items: start;
        .box-title {
          font-weight: 600;
          font-size: 16px;
          line-height: 24px;
          color: #202224;
        }
        .box-count {
          margin-top: 16px;
          font-weight: 700;
          font-size: 28px;
          line-height: 38px;
          color: #202224;
        }
        .box-status {
          margin-top: 30px;
          display: flex;
          align-items: center;
          gap: 8px;
          img {
            width: 24px;
            height: 24px;
            min-width: 24px;
          }
          p {
            font-weight: 600;
            font-size: 16px;
            line-height: 24px;
            color: #606060;
            span {
              font-weight: 600;
              font-size: 16px;
              line-height: 24px;
            }
          }
        }
        .box-decrease {
          p {
            span {
              color: #f93c65;
            }
          }
        }
        .box-increase {
          p {
            span {
              color: #00b69b;
            }
          }
        }
        .box-static {
          p {
            span {
              color: #f8b924;
            }
          }
        }
      }
      .icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 24px;
        img {
          min-width: 30px;
          width: 30px;
          height: 30px;
        }
      }
      &:nth-child(4n + 1) {
        .icon {
          background: rgba(132, 130, 238, 0.2);
        }
      }
      &:nth-child(4n + 2) {
        .icon {
          background: rgba(94, 212, 152, 0.2);
        }
      }
      &:nth-child(4n + 3) {
        .icon {
          background: rgba(254, 202, 79, 0.2);
        }
      }
      &:nth-child(4n + 4) {
        .icon {
          background: rgba(255, 193, 169, 0.2);
        }
      }
    }
  }
  .today_notifications_container {
    margin-top: 40px;
    h2 {
      font-weight: 700;
      font-size: 24px;
      line-height: 30px;
      color: #202224;
    }
    .today_notifications {
      width: 100%;
      margin-top: 30px;
      display: flex;
      align-items: start;
      gap: 24px;
      .calendar {
        width: 350px;
        min-width: 350px;
        border-radius: 4px;
        background: #fff;
        padding: 24px 30px;
        box-shadow: 6px 6px 54px 0px rgba(0, 0, 0, 0.05);
        border-radius: 14px;
        .calendar-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          .calendar-month-year {
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 400;
            font-size: 24px;
            line-height: 30px;
            color: #192a4d;
            .calendar-month {
              font-weight: 700;
            }
          }
          .calendar-header-buttons {
            display: flex;
            align-items: center;
            gap: 20px;
            button {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 34px;
              height: 34px;
              min-width: 34px;
              border-radius: 6px;
              background: transparent;
              transition: 0.35s ease-in-out;
              svg {
                width: 24px;
              }
              &:hover {
                background: #18294b;
                svg {
                  path {
                    fill: #fff;
                    transition: 0.35s ease-in-out;
                  }
                }
              }
            }
          }
        }
        .calendar-days {
          width: 100%;
          margin-top: 30px;
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 12px;
          .calendar-day-item {
            font-size: 16px;
            font-weight: 500;
            line-height: 25px;
            text-align: center;
            color: #18294b;
          }
        }
        .calendar-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          margin-top: 12px;
          gap: 3px 12px;
          .prev-month,
          .next-month {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            text-align: center;
            color: rgba(141, 141, 141, 0.2);
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .current-month {
            color: #202224;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            text-align: center;
            width: 30px;
            height: 30px;
            min-width: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .active {
            background: #fb6141;
            color: #fff;
            border-radius: 100px;
          }
        }
      }
      .today_notifications_boxes {
        width: calc(100% - 375px);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 24px;
        .today_notifications_box {
          padding: 16px 20px 16px 50px;
          background: #fff;
          border-radius: 14px;
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          &::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 14px 0 0 14px;
            background: #18294b;
            width: 22px;
            height: 100%;
          }
          .box-title {
            font-weight: 700;
            font-size: 16px;
            line-height: 22px;
            text-transform: capitalize;
            color: #202224;
          }
          .box-list {
            display: flex;
            flex-direction: column;
            align-items: start;
            padding-right: 8px;
            gap: 6px;
            max-height: 83px;
            overflow-y: auto;
            width: 100%;
            &::-webkit-scrollbar {
              width: 2px;
            }
            &::-webkit-scrollbar-track {
              background: #ccc;
            }
            &::-webkit-scrollbar-thumb {
              background: #18294b;
            }
            .list-item {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #202224;
            }
          }
        }
      }
    }
  }

  .chart-items {
    margin-top: 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 40px;
    .chart-item {
      width: 100%;
      background: #fff;
      border-radius: 14px;
      padding: 32px 32px 58px;
      box-shadow: 6px 6px 54px 0px rgba(0, 0, 0, 0.05);
      .chart-item-head {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 46px;
        h2 {
          font-weight: 700;
          font-size: 24px;
          line-height: 30px;
          color: #202224;
        }
        select {
          border: 1px solid #d5d5d5;
          background: #fcfdfd;
          padding: 8px 12px;
          width: 105px;
          min-height: 28px;
          border-radius: 4px;
          font-weight: 400;
          font-size: 12px;
          line-height: 14px;
          text-align: center;
          color: rgba(43, 48, 52, 0.4);
          outline: none;
        }
      }
      .chart-item-body {
        .chart {
          width: 100%;
          canvas {
            width: 100% !important;
          }
        }
      }
    }
  }
}

/*============== Payments ==================*/
.payments-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .payments-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    /* justify-content: space-between; */
    gap: 32px;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .payments-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .payments-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .payments-table {
      margin-top: 60px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: 130px;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .view_link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 0.5px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                  }
                  .deleteTableRow {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 2) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
            &:nth-child(2) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
  }
}
.viewPayments-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewPayments-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .viewPayments-body {
    margin-top: 40px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .viewPayments-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #4679ef;
      }
    }
    .viewPayments-form {
      max-width: 760px;
      width: 100%;
      margin-top: 30px;
      .form-items {
        gap: 30px 80px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        .form-item {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            border: 1px solid #d6d6d6;
            padding: 15px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            background: #fff;
            input {
              width: 100%;
              border: none;
              outline: none;
              background: #fff;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #0a0a0b;
            }
            span {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #a7a7a7;
            }
          }
        }
      }
    }
  }
}

.drivers-tabs {
  display: flex;
  align-items: center;
  gap: 14px;

  .driver-tab {
    margin-top: 22px;

    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #a9a6a6;
    border-bottom: 2px solid transparent;
  }
  .driver-tab.active {
    color: #4679ef;
    border-color: #4679ef;
  }
}

/*============== Drivers ==================*/
.drivers-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .drivers-container-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 60px;
    width: 100%;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }

    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      /* margin-left: auto; */
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewDriver {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .drivers-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .drivers-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .drivers-table {
      margin-top: 25px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 5) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3),
            &:nth-child(4),
            &:nth-child(5) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
  }
}
.viewDrivers-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewDrivers-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .viewDrivers-body {
    margin-top: 40px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .viewDrivers-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #4679ef;
      }
    }
    .viewDrivers-form {
      width: 100%;
      margin-top: 30px;
      .form-items {
        max-width: 760px;
        width: 100%;
        gap: 30px 80px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        .form-item {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            border: 1px solid #d6d6d6;
            padding: 15px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            background: #fff;
            input {
              width: 100%;
              border: none;
              outline: none;
              background: #fff;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #0a0a0b;
            }
            .password-eye {
              width: 24px;
              height: 24px;
              min-width: 24px;
              svg {
                width: 100%;
                height: 100%;
              }
              .eye-open {
                display: none;
              }
              .eye-close {
                display: block;
              }
            }
            .password-eye.showed {
              .eye-open {
                display: block;
              }
              .eye-close {
                display: none;
              }
            }
          }
        }
      }
      .driver-document-images {
        margin-top: 40px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        .document-box {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 20px;
          width: 100%;
          h2 {
            font-weight: 500;
            font-size: 16px;
            line-height: 20px;
            color: rgba(0, 0, 0, 0.6);
          }
          .document-list {
            width: 100%;
            padding: 24px;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.04);
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 24px;
            border-radius: 12px;
            .document-item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              gap: 20px;
              .document-title {
                display: flex;
                align-items: center;
                gap: 16px;
                img {
                  width: 30px;
                  height: 30px;
                  min-width: 30px;
                }
                p {
                  display: inline-block;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  font-weight: 400;
                  font-size: 13px;
                  line-height: 15px;
                  color: #0f91d2;
                  max-width: 350px;
                }
              }
              .document-actions {
                display: flex;
                align-items: center;
                gap: 10px;
                .viewDocument,
                .deleteDocument {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.add-driver-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-driver {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddDriver {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        .form-item {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          width: 100%;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            input {
              width: 100%;
              border: none;
              outline: none;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #000;
            }
            .password-eye {
              width: 24px;
              height: 24px;
              min-width: 24px;
              svg {
                width: 100%;
                height: 100%;
              }
              .eye-open {
                display: none;
              }
              .eye-close {
                display: block;
              }
            }
            .password-eye.showed {
              .eye-open {
                display: block;
              }
              .eye-close {
                display: none;
              }
            }
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
        }
      }
      .upload-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 12px;
        .add_file_box {
          width: 100%;
          border: 1px solid #d6d6d6;
          padding: 10px 20px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          gap: 12px;
          position: relative;
          input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
            cursor: pointer;
          }
          .uploadIcon {
            width: 36px;
            height: 36px;
            min-width: 36px;
          }
          .box-text {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
            p {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: #474747;
            }
            span {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: rgba(71, 71, 71, 0.5);
            }
          }
          .selectFileTxt {
            margin-left: auto;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: #0a0a0b;
          }
        }
        .document-list {
          width: 100%;
          padding: 16px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 12px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-driver-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-driver {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditDriver {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        .form-item {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          width: 100%;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            input {
              width: 100%;
              border: none;
              outline: none;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #000;
            }
            .password-eye {
              width: 24px;
              height: 24px;
              min-width: 24px;
              svg {
                width: 100%;
                height: 100%;
              }
              .eye-open {
                display: none;
              }
              .eye-close {
                display: block;
              }
            }
            .password-eye.showed {
              .eye-open {
                display: block;
              }
              .eye-close {
                display: none;
              }
            }
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
        }
      }
      .upload-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 12px;
        .add_file_box {
          width: 100%;
          border: 1px solid #d6d6d6;
          padding: 10px 20px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          gap: 12px;
          position: relative;
          input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
            cursor: pointer;
          }
          .uploadIcon {
            width: 36px;
            height: 36px;
            min-width: 36px;
          }
          .box-text {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
            p {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: #474747;
            }
            span {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: rgba(71, 71, 71, 0.5);
            }
          }
          .selectFileTxt {
            margin-left: auto;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: #0a0a0b;
          }
        }
        .document-list {
          width: 100%;
          padding: 16px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 12px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.send-notification-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .send-notification {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeSendNotification {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
        }
        select,
        textarea {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
        textarea {
          height: 110px;
          resize: none;
        }
      }
      .upload-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 12px;
        .add_file_box {
          width: 100%;
          border: 1px solid #d6d6d6;
          padding: 10px 20px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          gap: 12px;
          position: relative;
          input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
            cursor: pointer;
          }
          .uploadIcon {
            width: 36px;
            height: 36px;
            min-width: 36px;
          }
          .box-text {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
            p {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: #474747;
            }
            span {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: rgba(71, 71, 71, 0.5);
            }
          }
          .selectFileTxt {
            margin-left: auto;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: #0a0a0b;
          }
        }
        .document-list {
          width: 100%;
          padding: 16px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 12px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.payment-driver-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .payment-driver {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closePaymentDriver {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select,
        textarea {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
        textarea {
          height: 110px;
          resize: none;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}

/*============== Notifications ==================*/
.notification-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .notification-container-head {
    display: flex;
    align-items: center;
    gap: 60px;
    width: 100%;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      /* margin-left: auto; */
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewNotification {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .notification-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .notification-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .notifications-table {
      margin-top: 25px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 2) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
  }
}
.add-notification-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-notification {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddNotification {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 30px;
        .form-item {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          width: 100%;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            input,
            textarea {
              width: 100%;
              border: none;
              outline: none;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #000;
            }
            textarea {
              height: 110px;
              resize: none;
            }
            span {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #a7a7a7;
            }
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          .form_radios {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 14px;
            .form_radio {
              position: relative;
              p {
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #202224;
                padding: 8px 16px;
                border-radius: 10px;
                background: #fff;
                border: 1px solid #e7e7e7;
              }
              input {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
                opacity: 0;
                border-radius: 10px;
                cursor: pointer;
              }
              input:checked ~ p {
                background: #f7f7f7;
                border-color: #cfcfcf;
              }
            }
          }
        }
      }
      .form-filter-container {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
        gap: 10px;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-filter {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 50px;
          .filter-main {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: start;
            .filter-main-btn {
              display: flex;
              align-items: center;
              gap: 10px;
              padding: 6px 14px;
              font-weight: 400;
              font-size: 14px;
              line-height: 21px;
              color: #202224;
              background: #f2f2f2;
              border-radius: 10px;
              svg {
                min-width: 24px;
                width: 24px;
                height: 24px;
              }
            }
            .driversListBox {
              position: absolute;
              left: 0;
              top: 56px;
              width: 300px;
              border: 1px solid rgba(0, 0, 0, 0.05);
              box-shadow: 6px 6px 50px 0px rgba(0, 0, 0, 0.05);
              z-index: 10;
              background: #fff;
              padding: 24px;
              border-radius: 24px;
              display: none;
              flex-direction: column;
              align-items: start;
              h3 {
                font-weight: 600;
                font-size: 12px;
                line-height: 15px;
                color: #202224;
              }
              .driversList {
                margin-top: 14px;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 16px;
                height: 104px;
                overflow: hidden;
                .driverItem {
                  display: flex;
                  align-items: center;
                  gap: 12px;
                  input {
                    width: 14px;
                    height: 14px;
                  }
                  p {
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    color: #202224;
                  }
                }
              }
              .full_list {
                height: auto;
                max-height: 104px;
                overflow: auto;
                &::-webkit-scrollbar {
                  width: 2px;
                }
                &::-webkit-scrollbar-thumb {
                  width: 2px;
                  background: #000;
                }
                &::-webkit-scrollbar-track {
                  width: 2px;
                  background: #c5c5c5;
                }
              }
              .seeAllDrivers {
                margin-top: 14px;
                width: 100%;
                border: 1px solid rgba(0, 0, 0, 0.05);
                border-radius: 100px;
                text-align: center;
                padding: 10px;
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
                color: #202224;
              }
            }
            .showBox {
              display: flex;
            }
          }
          .filter_selected {
            width: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            .selectedItem {
              display: flex;
              align-items: center;
              gap: 6px;
              background: rgba(28, 28, 28, 0.05);
              width: max-content;
              border-radius: 100px;
              padding: 6px 16px;
              transition: 0.2s ease-in-out;
              p {
                font-weight: 400;
                font-size: 16px;
                line-height: 20px;
                color: #202224;
                transition: 0.2s ease-in-out;
              }
              .remoceSelectItem {
                display: none;
                align-items: center;
                justify-content: center;
                width: 10px;
                height: 10px;
                svg {
                  width: 100%;
                  height: 100%;
                }
              }
              &:hover {
                background: #4679ef;
                p {
                  color: #fff;
                }
                .remoceSelectItem {
                  display: flex;
                }
              }
            }
          }
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.viewNotification-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewNotification-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .viewNotification-body {
    margin-top: 40px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .viewNotification-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #4679ef;
      }
    }
    .viewNotification-form {
      width: 100%;
      margin-top: 30px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      .notification-title,
      .notification-status,
      .notification-note,
      .notification-users {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        h3 {
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        p {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: rgba(0, 0, 0, 0.6);
        }
        .users-list {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          p {
            padding: 6px 12px;
            border-radius: 100px;
            color: #fff;
            background: #4679ef;
          }
        }
      }
    }
  }
}

/*============== Auto ==================*/
.auto-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .auto-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 32px;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewAuto {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .auto-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .auto-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .auto-table {
      margin-top: 25px;
      width: 100%;
      /* overflow-x: auto; */
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .inDrive {
                display: flex;
                align-items: center;
                min-width: 110px;
                width: max-content;
                justify-content: center;
                gap: 8px;
                background: #ddf6e9;
                border-radius: 10px;
                padding: 6px 14px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #59cb92;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #59cb92;
                  transform: rotate(45deg);
                }
              }
              .idle {
                display: flex;
                align-items: center;
                min-width: 110px;
                width: max-content;
                justify-content: center;
                gap: 8px;
                background: #fff5d5;
                border-radius: 10px;
                padding: 6px 14px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #f9ab43;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #f9ab43;
                  transform: rotate(45deg);
                }
              }
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 5) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3),
            &:nth-child(4),
            &:nth-child(5) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
  }
}
.viewAuto-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewAuto-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .viewAuto-body {
    margin-top: 40px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .viewAuto-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #4679ef;
      }
    }
    .viewAuto-form {
      max-width: 760px;
      width: 100%;
      margin-top: 30px;
      .form-items {
        gap: 30px 80px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        .form-item {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            border: 1px solid #d6d6d6;
            padding: 15px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            background: #fff;
            input {
              width: 100%;
              border: none;
              outline: none;
              background: #fff;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #0a0a0b;
            }
            span {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #a7a7a7;
            }
          }
        }
      }
    }
  }
}
.add-auto-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-auto {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddAuto {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        .form-item {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          width: 100%;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            input {
              width: 100%;
              border: none;
              outline: none;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #000;
            }
            span {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #a7a7a7;
            }
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
        }
      }
      .submit {
        width: 100%;
        margin-top: 50px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-auto-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-auto {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditAuto {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        .form-item {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          width: 100%;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            input {
              width: 100%;
              border: none;
              outline: none;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #000;
            }
            span {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #a7a7a7;
            }
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
        }
      }
      .submit {
        width: 100%;
        margin-top: 50px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}

/*============== Penalty ==================*/
.penalty-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .penalty-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewPenalty {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .penalty-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .penalty-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .penalty-table {
      margin-top: 60px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .paid {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                min-width: 130px;
                width: max-content;
                background: #ddf6e9;
                border-radius: 10px;
                padding: 6px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #59cb92;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #59cb92;
                  transform: rotate(45deg);
                }
              }
              .unpaid {
                display: flex;
                align-items: center;
                min-width: 130px;
                width: max-content;
                justify-content: center;
                gap: 8px;
                background: #fff5d5;
                border-radius: 10px;
                padding: 6px 14px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #f9ab43;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #f9ab43;
                  transform: rotate(45deg);
                }
              }
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  min-width: 130px;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
              .action {
                .action-links {
                  top: auto;
                  bottom: 0;
                }
                .action-links.active {
                  top: auto;
                  bottom: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
.add-penalty-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-penalty {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddPenalty {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-penalty-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-penalty {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditPenalty {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.payment-penalty-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .payment-penalty {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closePaymentPenalty {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select,
        textarea {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
        textarea {
          height: 110px;
          resize: none;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.viewPenalty-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewPenalty-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .viewPenalty-body {
    margin-top: 40px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .viewPenalty-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #4679ef;
      }
    }
    .viewPenalty-form {
      max-width: 760px;
      width: 100%;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 80px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
    }
  }
}

/*============== Insurance ==================*/
.insurance-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .insurance-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 32px;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewInsurance {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .insurance-body {
    margin-top: 30px;
    padding: 32px 0;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .insurance-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 20px;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .insurance-table {
      margin-top: 25px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 20px 16px;
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 20px;
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              min-width: 55px;
              max-width: 250px;
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  min-width: 130px;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 3) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
          .row-red {
            background: rgba(255, 0, 0, 0.8);
            td {
              color: #fff;
            }
          }
          .row-yellow {
            background: rgba(255, 198, 13, 0.8);
            td {
              color: #fff;
            }
          }
        }
      }
    }
    .total-payment {
      padding: 24px 30px 0;
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 8px;
      p,
      span {
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        color: #202224;
      }
      span {
        font-weight: 700;
      }
    }
  }
}
.add-insurance-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-insurance {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddInsurance {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        .form-item {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          width: 100%;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            input {
              width: 100%;
              border: none;
              outline: none;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #000;
            }
            span {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #a7a7a7;
            }
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
        }
      }
      .upload-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 12px;
        .add_file_box {
          width: 100%;
          border: 1px solid #d6d6d6;
          padding: 10px 20px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          gap: 12px;
          position: relative;
          input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
            cursor: pointer;
          }
          .uploadIcon {
            width: 36px;
            height: 36px;
            min-width: 36px;
          }
          .box-text {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
            p {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: #474747;
            }
            span {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: rgba(71, 71, 71, 0.5);
            }
          }
          .selectFileTxt {
            margin-left: auto;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: #0a0a0b;
          }
        }
        .document-list {
          width: 100%;
          padding: 16px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 12px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-insurance-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-insurance {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditInsurance {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        .form-item {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          width: 100%;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            input {
              width: 100%;
              border: none;
              outline: none;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #000;
            }
            span {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #a7a7a7;
            }
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
        }
      }
      .upload-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 12px;
        .add_file_box {
          width: 100%;
          border: 1px solid #d6d6d6;
          padding: 10px 20px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          gap: 12px;
          position: relative;
          input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
            cursor: pointer;
          }
          .uploadIcon {
            width: 36px;
            height: 36px;
            min-width: 36px;
          }
          .box-text {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
            p {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: #474747;
            }
            span {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: rgba(71, 71, 71, 0.5);
            }
          }
          .selectFileTxt {
            margin-left: auto;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: #0a0a0b;
          }
        }
        .document-list {
          width: 100%;
          padding: 16px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 12px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.viewInsurance-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewInsurance-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .viewInsurance-body {
    margin-top: 40px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .viewInsurance-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #4679ef;
      }
    }
    .viewInsurance-form {
      max-width: 760px;
      width: 100%;
      margin-top: 30px;
      .form-items {
        gap: 30px 80px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        .form-item {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            border: 1px solid #d6d6d6;
            padding: 15px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            background: #fff;
            input {
              width: 100%;
              border: none;
              outline: none;
              background: #fff;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #0a0a0b;
            }
            span {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #a7a7a7;
            }
          }
        }
      }
      .document-box {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 20px;
        width: 100%;
        h2 {
          font-weight: 500;
          font-size: 16px;
          line-height: 20px;
          color: rgba(0, 0, 0, 0.6);
        }
        .document-list {
          width: 100%;
          padding: 24px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 24px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}
.payment-insurance-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .payment-insurance {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closePaymentInsurance {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select,
        textarea {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
        textarea {
          height: 110px;
          resize: none;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}

/*============== Technical review ==================*/
.technical-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .technical-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    /* justify-content: space-between; */
    gap: 32px;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewTechnical {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .technical-body {
    margin-top: 30px;
    padding: 32px 0;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .technical-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 20px;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .technical-table {
      margin-top: 25px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 20px;
          }
          &:last-child {
            padding-right: 20px;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 20px;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 20px;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  min-width: 130px;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 3) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
          .row-red {
            background: rgba(255, 0, 0, 0.8);
            td {
              color: #fff;
            }
          }
          .row-yellow {
            background: rgba(255, 198, 13, 0.8);
            td {
              color: #fff;
            }
          }
        }
      }
    }
    .total-payment {
      padding: 24px 30px 0;
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 8px;
      p,
      span {
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        color: #202224;
      }
      span {
        font-weight: 700;
      }
    }
  }
}
.add-technical-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-technical {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddTechnical {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        .form-item {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          width: 100%;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            input {
              width: 100%;
              border: none;
              outline: none;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #000;
            }
            span {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #a7a7a7;
            }
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
        }
      }
      .upload-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 12px;
        .add_file_box {
          width: 100%;
          border: 1px solid #d6d6d6;
          padding: 10px 20px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          gap: 12px;
          position: relative;
          input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
            cursor: pointer;
          }
          .uploadIcon {
            width: 36px;
            height: 36px;
            min-width: 36px;
          }
          .box-text {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
            p {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: #474747;
            }
            span {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: rgba(71, 71, 71, 0.5);
            }
          }
          .selectFileTxt {
            margin-left: auto;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: #0a0a0b;
          }
        }
        .document-list {
          width: 100%;
          padding: 16px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 12px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-technical-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-technical {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditTechnical {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        .form-item {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          width: 100%;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            input {
              width: 100%;
              border: none;
              outline: none;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #000;
            }
            span {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #a7a7a7;
            }
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
        }
      }
      .upload-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 12px;
        .add_file_box {
          width: 100%;
          border: 1px solid #d6d6d6;
          padding: 10px 20px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          gap: 12px;
          position: relative;
          input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
            cursor: pointer;
          }
          .uploadIcon {
            width: 36px;
            height: 36px;
            min-width: 36px;
          }
          .box-text {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
            p {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: #474747;
            }
            span {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: rgba(71, 71, 71, 0.5);
            }
          }
          .selectFileTxt {
            margin-left: auto;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: #0a0a0b;
          }
        }
        .document-list {
          width: 100%;
          padding: 16px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 12px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.viewTechnical-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewTechnical-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .viewTechnical-body {
    margin-top: 40px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .viewTechnical-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #4679ef;
      }
    }
    .viewTechnical-form {
      max-width: 760px;
      width: 100%;
      margin-top: 30px;
      .form-items {
        gap: 30px 80px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        .form-item {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            border: 1px solid #d6d6d6;
            padding: 15px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            background: #fff;
            input {
              width: 100%;
              border: none;
              outline: none;
              background: #fff;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #0a0a0b;
            }
            span {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #a7a7a7;
            }
          }
        }
      }
      .document-box {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 20px;
        width: 100%;
        h2 {
          font-weight: 500;
          font-size: 16px;
          line-height: 20px;
          color: rgba(0, 0, 0, 0.6);
        }
        .document-list {
          width: 100%;
          padding: 24px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 24px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}
.payment-technical-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .payment-technical {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closePaymentTechnical {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select,
        textarea {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
        textarea {
          height: 110px;
          resize: none;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}

/*============== Oil Change ==================*/
.oilChange-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .oilChange-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    /* justify-content: space-between; */
    gap: 32px;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewOilChange {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .oilChange-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .oilChange-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .oilChange-table {
      margin-top: 25px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .activeOil {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                min-width: 110px;
                width: max-content;
                background: #ddf6e9;
                border-radius: 10px;
                padding: 6px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #59cb92;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #59cb92;
                  transform: rotate(45deg);
                }
              }
              .deactiveOil {
                display: flex;
                align-items: center;
                min-width: 110px;
                width: max-content;
                justify-content: center;
                gap: 8px;
                background: #fff5d5;
                border-radius: 10px;
                padding: 6px 14px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #f9ab43;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #f9ab43;
                  transform: rotate(45deg);
                }
              }
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  min-width: 130px;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 3) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
    .total-payment {
      padding: 24px 30px 0;
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 8px;
      p,
      span {
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        color: #202224;
      }
      span {
        font-weight: 700;
      }
    }
  }
}
.add-oilChange-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-oilChange {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddOilChange {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .upload-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 12px;
        .add_file_box {
          width: 100%;
          border: 1px solid #d6d6d6;
          padding: 10px 20px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          gap: 12px;
          position: relative;
          input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
            cursor: pointer;
          }
          .uploadIcon {
            width: 36px;
            height: 36px;
            min-width: 36px;
          }
          .box-text {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
            p {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: #474747;
            }
            span {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: rgba(71, 71, 71, 0.5);
            }
          }
          .selectFileTxt {
            margin-left: auto;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: #0a0a0b;
          }
        }
        .document-list {
          width: 100%;
          padding: 16px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 12px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-oilChange-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-oilChange {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditOilChange {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .upload-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 12px;
        .add_file_box {
          width: 100%;
          border: 1px solid #d6d6d6;
          padding: 10px 20px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          gap: 12px;
          position: relative;
          input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
            cursor: pointer;
          }
          .uploadIcon {
            width: 36px;
            height: 36px;
            min-width: 36px;
          }
          .box-text {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
            p {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: #474747;
            }
            span {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: rgba(71, 71, 71, 0.5);
            }
          }
          .selectFileTxt {
            margin-left: auto;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: #0a0a0b;
          }
        }
        .document-list {
          width: 100%;
          padding: 16px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 12px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.viewOilChange-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewOilChange-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .viewOilChange-body {
    margin-top: 40px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .viewOilChange-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #4679ef;
      }
    }
    .viewOilChange-form {
      max-width: 760px;
      width: 100%;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 80px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .document-box {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 20px;
        width: 100%;
        h2 {
          font-weight: 500;
          font-size: 16px;
          line-height: 20px;
          color: rgba(0, 0, 0, 0.6);
        }
        .document-list {
          width: 100%;
          padding: 24px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 24px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}

/*============== Credit ==================*/
.credit-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .credit-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    /* justify-content: space-between; */
    gap: 32px;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewCredit {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .credit-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .credit-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .credit-table {
      margin-top: 25px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  min-width: 130px;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 3) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
    .payDesc {
      display: flex;
      align-items: center;
      justify-content: end;
      padding: 24px 30px 0;
      gap: 50px;
      .total-payment,
      .paid {
        display: flex;
        align-items: center;
        gap: 8px;
        p,
        span {
          font-weight: 500;
          font-size: 18px;
          line-height: 28px;
          color: #202224;
        }
        span {
          font-weight: 700;
        }
      }
    }
  }
}
.add-credit-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-credit {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddCredit {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-credit-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-credit {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditCredit {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.viewCredit-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewCredit-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .viewCredit-body {
    margin-top: 40px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .viewCredit-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #4679ef;
      }
    }
    .viewCredit-form {
      max-width: 760px;
      width: 100%;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 80px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
    }
  }
}

/*============== Brand ==================*/
.brand-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .brand-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    /* justify-content: space-between; */
    gap: 32px;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewBrand {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .brand-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .brand-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .brand-table {
      margin-top: 25px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .activeBrand {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                min-width: 110px;
                width: max-content;
                background: #ddf6e9;
                border-radius: 10px;
                padding: 6px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #59cb92;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #59cb92;
                  transform: rotate(45deg);
                }
              }
              .deactiveBrand {
                display: flex;
                align-items: center;
                min-width: 110px;
                width: max-content;
                justify-content: center;
                gap: 8px;
                background: #fff5d5;
                border-radius: 10px;
                padding: 6px 14px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #f9ab43;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #f9ab43;
                  transform: rotate(45deg);
                }
              }
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  min-width: 130px;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 2) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
  }
}
.add-brand-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-brand {
    max-width: 680px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddBrand {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 20px;
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 30px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-brand-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-brand {
    max-width: 680px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditBrand {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 20px;
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 30px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}

/*============== Model ==================*/
.model-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .model-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    /* justify-content: space-between; */
    gap: 32px;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewModel {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .model-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .model-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .model-table {
      margin-top: 25px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .activeModel {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                min-width: 110px;
                width: max-content;
                background: #ddf6e9;
                border-radius: 10px;
                padding: 6px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #59cb92;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #59cb92;
                  transform: rotate(45deg);
                }
              }
              .deactiveModel {
                display: flex;
                align-items: center;
                min-width: 110px;
                width: max-content;
                justify-content: center;
                gap: 8px;
                background: #fff5d5;
                border-radius: 10px;
                padding: 6px 14px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #f9ab43;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #f9ab43;
                  transform: rotate(45deg);
                }
              }
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  min-width: 130px;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 2) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
  }
}
.add-model-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-model {
    max-width: 680px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddModel {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 20px;
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 30px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-model-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-model {
    max-width: 680px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditModel {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 20px;
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 30px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}

/*============== Ban Type==================*/
.banType-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .banType-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    /* justify-content: space-between; */
    gap: 32px;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewBanType {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .banType-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .banType-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .banType-table {
      margin-top: 25px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .activeBan {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                min-width: 110px;
                width: max-content;
                background: #ddf6e9;
                border-radius: 10px;
                padding: 6px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #59cb92;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #59cb92;
                  transform: rotate(45deg);
                }
              }
              .deactiveBan {
                display: flex;
                align-items: center;
                min-width: 110px;
                width: max-content;
                justify-content: center;
                gap: 8px;
                background: #fff5d5;
                border-radius: 10px;
                padding: 6px 14px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #f9ab43;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #f9ab43;
                  transform: rotate(45deg);
                }
              }
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  min-width: 130px;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 2) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
  }
}
.add-banType-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-banType {
    max-width: 680px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddBanType {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 20px;
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 30px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-banType-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-banType {
    max-width: 680px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditBanType {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 20px;
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 30px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}

/*============== Leasing ==================*/
.leasing-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .leasing-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    /* justify-content: space-between; */
    gap: 32px;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewLeasing {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .leasing-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .leasing-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .leasing-table {
      margin-top: 25px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 3) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
    .total-payment {
      padding: 24px 30px 0;
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 8px;
      p,
      span {
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        color: #202224;
      }
      span {
        font-weight: 700;
      }
    }
  }
}
.add-leasing-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-leasing {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddLeasing {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .upload-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 12px;
        .add_file_box {
          width: 100%;
          border: 1px solid #d6d6d6;
          padding: 10px 20px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          gap: 12px;
          position: relative;
          input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
            cursor: pointer;
          }
          .uploadIcon {
            width: 36px;
            height: 36px;
            min-width: 36px;
          }
          .box-text {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
            p {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: #474747;
            }
            span {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: rgba(71, 71, 71, 0.5);
            }
          }
          .selectFileTxt {
            margin-left: auto;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: #0a0a0b;
          }
        }
        .document-list {
          width: 100%;
          padding: 16px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 12px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-leasing-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-leasing {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditLeasing {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .upload-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 12px;
        .add_file_box {
          width: 100%;
          border: 1px solid #d6d6d6;
          padding: 10px 20px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          gap: 12px;
          position: relative;
          input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
            cursor: pointer;
          }
          .uploadIcon {
            width: 36px;
            height: 36px;
            min-width: 36px;
          }
          .box-text {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
            p {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: #474747;
            }
            span {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: rgba(71, 71, 71, 0.5);
            }
          }
          .selectFileTxt {
            margin-left: auto;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: #0a0a0b;
          }
        }
        .document-list {
          width: 100%;
          padding: 16px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 12px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.viewLeasing-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewLeasing-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .viewLeasing-body {
    margin-top: 40px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .viewLeasing-tabs {
      max-width: 640px;
      width: 100%;
      justify-content: space-between;
      display: flex;
      align-items: center;
      gap: 12px;
      .leasing_tab {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        padding-bottom: 8px;
        border-bottom: 2px solid transparent;
        color: #a9a9a9;
      }
      .leasing_tab.active {
        color: #4679ef;
        border-color: #4679ef;
      }
    }
    .viewLeasing_content {
      margin-top: 30px;
      width: 100%;
      display: none;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        max-width: 760px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 80px;
      }
      .form-item {
        max-width: 760px;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
    }
    .driverInfoContent {
      .driver-document-images {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        .document-box {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 20px;
          width: 100%;
          h2 {
            font-weight: 500;
            font-size: 16px;
            line-height: 20px;
            color: rgba(0, 0, 0, 0.6);
          }
          .document-list {
            width: 100%;
            padding: 24px;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.04);
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 24px;
            border-radius: 12px;
            .document-item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              gap: 20px;
              .document-title {
                display: flex;
                align-items: center;
                gap: 16px;
                img {
                  width: 30px;
                  height: 30px;
                  min-width: 30px;
                }
                p {
                  display: inline-block;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  font-weight: 400;
                  font-size: 13px;
                  line-height: 15px;
                  color: #0f91d2;
                  max-width: 350px;
                }
              }
              .document-actions {
                display: flex;
                align-items: center;
                gap: 10px;
                .viewDocument,
                .deleteDocument {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
    .leasingInfoContent {
      .documents {
        width: 100%;
        max-width: 760px;
        .document-box {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 20px;
          width: 100%;
          h2 {
            font-weight: 500;
            font-size: 16px;
            line-height: 20px;
            color: rgba(0, 0, 0, 0.6);
          }
          .document-list {
            width: 100%;
            padding: 24px;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.04);
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 24px;
            border-radius: 12px;
            .document-item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              gap: 20px;
              .document-title {
                display: flex;
                align-items: center;
                gap: 16px;
                img {
                  width: 30px;
                  height: 30px;
                  min-width: 30px;
                }
                p {
                  display: inline-block;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  font-weight: 400;
                  font-size: 13px;
                  line-height: 15px;
                  color: #0f91d2;
                  max-width: 350px;
                }
              }
              .document-actions {
                display: flex;
                align-items: center;
                gap: 10px;
                .viewDocument,
                .deleteDocument {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
    .viewLeasing_content.active {
      display: flex;
    }
  }
}

/*============== Deposits ==================*/
.deposits-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .deposits-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    /* justify-content: space-between; */
    gap: 32px;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewDeposits {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .deposits-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .deposits-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .deposits-table {
      margin-top: 25px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 2) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
    .total-payment {
      padding: 24px 30px 0;
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 8px;
      p,
      span {
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        color: #202224;
      }
      span {
        font-weight: 700;
      }
    }
  }
}
.add-deposits-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-deposits {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddDeposits {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-deposits-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-deposits {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditDeposits {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.viewDeposits-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewDeposits-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .viewDeposits-body {
    margin-top: 40px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .viewDeposits-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #4679ef;
      }
    }
    .viewDeposits-form {
      max-width: 760px;
      width: 100%;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 80px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
    }
  }
}

/*============== Expenses ==================*/
.expenses-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .expenses-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    /* justify-content: space-between; */
    gap: 32px;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewExpenses {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .expenses-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .expenses-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .expenses-table {
      margin-top: 25px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 3) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
    .total-payment {
      padding: 24px 30px 0;
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 8px;
      p,
      span {
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        color: #202224;
      }
      span {
        font-weight: 700;
      }
    }
  }
}
.add-expenses-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-expenses {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddExpenses {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-expenses-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-expenses {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditExpenses {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.viewExpenses-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewExpenses-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .viewExpenses-body {
    margin-top: 40px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .viewExpenses-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #4679ef;
      }
    }
    .viewExpenses-form {
      max-width: 760px;
      width: 100%;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 80px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
    }
  }
}

/*============== Revenue ==================*/
.revenue-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .revenue-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    /* justify-content: space-between; */
    gap: 32px;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewRevenue {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .revenue-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .revenue-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .revenue-table {
      margin-top: 60px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 1) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
    .total-payment {
      padding: 24px 30px 0;
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 8px;
      p,
      span {
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        color: #202224;
      }
      span {
        font-weight: 700;
      }
    }
  }
}
.add-revenue-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-revenue {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddRevenue {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-revenue-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-revenue {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditRevenue {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.viewRevenue-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewRevenue-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .viewRevenue-body {
    margin-top: 40px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .viewRevenue-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #4679ef;
      }
    }
    .viewRevenue-form {
      max-width: 760px;
      width: 100%;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 80px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
    }
  }
}

/*============== Debt ==================*/
.debt-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .debt-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewDebt {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .debt-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .debt-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .debt-table {
      margin-top: 60px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 1) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1) {
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
  }
}
.add-debt-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-debt {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddDebt {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-debt-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-debt {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditDebt {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.viewDebt-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewDebt-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .viewDebt-body {
    margin-top: 40px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .viewDebt-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #4679ef;
      }
    }
    .viewDebt-form {
      max-width: 760px;
      width: 100%;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 80px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
    }
  }
}

/*============== Cashbox ==================*/
.cashbox-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .cashbox-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewCashbox {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .cashbox-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .cashbox-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .cashbox-table {
      margin-top: 60px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 1) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1){
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
  }
}
.add-cashbox-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-cashbox {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddCashbox {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-cashbox-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-cashbox {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditCashbox {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.viewCashbox-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewCashbox-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .viewCashbox-body {
    margin-top: 40px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .viewCashbox-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #4679ef;
      }
    }
    .viewCashbox-form {
      max-width: 760px;
      width: 100%;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 80px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input,
          textarea {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 110px;
            resize: none;
          }
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #a7a7a7;
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
    }
  }
}

/*============== Users ==================*/
.users-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .users-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    /* justify-content: space-between; */
    gap: 32px;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewUsers {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .users-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .users-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .users-table {
      margin-top: 25px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .activeUser {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                min-width: 110px;
                width: max-content;
                background: #ddf6e9;
                border-radius: 10px;
                padding: 6px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #59cb92;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #59cb92;
                  transform: rotate(45deg);
                }
              }
              .deactiveUser {
                display: flex;
                align-items: center;
                min-width: 110px;
                width: max-content;
                justify-content: center;
                gap: 8px;
                background: #fff5d5;
                border-radius: 10px;
                padding: 6px 14px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #f9ab43;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #f9ab43;
                  transform: rotate(45deg);
                }
              }
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  min-width: 130px;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;

            }
            &:nth-last-child(-n + 3) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3){
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
  }
}
.add-user-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-user {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddUser {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          .password-eye {
            width: 24px;
            height: 24px;
            min-width: 24px;
            svg {
              width: 100%;
              height: 100%;
            }
            .eye-open {
              display: none;
            }
            .eye-close {
              display: block;
            }
          }
          .password-eye.showed {
            .eye-open {
              display: block;
            }
            .eye-close {
              display: none;
            }
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .upload-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 12px;
        .add_file_box {
          width: 100%;
          border: 1px solid #d6d6d6;
          padding: 10px 20px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          gap: 12px;
          position: relative;
          input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
            cursor: pointer;
          }
          .uploadIcon {
            width: 36px;
            height: 36px;
            min-width: 36px;
          }
          .box-text {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
            p {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: #474747;
            }
            span {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: rgba(71, 71, 71, 0.5);
            }
          }
          .selectFileTxt {
            margin-left: auto;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: #0a0a0b;
          }
        }
        .document-list {
          width: 100%;
          padding: 16px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 12px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-user-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-user {
    max-width: 830px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditUser {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          .password-eye {
            width: 24px;
            height: 24px;
            min-width: 24px;
            svg {
              width: 100%;
              height: 100%;
            }
            .eye-open {
              display: none;
            }
            .eye-close {
              display: block;
            }
          }
          .password-eye.showed {
            .eye-open {
              display: block;
            }
            .eye-close {
              display: none;
            }
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .upload-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 12px;
        .add_file_box {
          width: 100%;
          border: 1px solid #d6d6d6;
          padding: 10px 20px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          gap: 12px;
          position: relative;
          input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
            cursor: pointer;
          }
          .uploadIcon {
            width: 36px;
            height: 36px;
            min-width: 36px;
          }
          .box-text {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
            p {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: #474747;
            }
            span {
              font-weight: 400;
              font-size: 13px;
              line-height: 15px;
              color: rgba(71, 71, 71, 0.5);
            }
          }
          .selectFileTxt {
            margin-left: auto;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: #0a0a0b;
          }
        }
        .document-list {
          width: 100%;
          padding: 16px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 12px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .submit {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.viewUser-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewUser-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .viewUser-body {
    margin-top: 40px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .viewUser-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #4679ef;
      }
    }
    .viewUser-form {
      max-width: 760px;
      width: 100%;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          .password-eye {
            width: 24px;
            height: 24px;
            min-width: 24px;
            svg {
              width: 100%;
              height: 100%;
            }
            .eye-open {
              display: none;
            }
            .eye-close {
              display: block;
            }
          }
          .password-eye.showed {
            .eye-open {
              display: block;
            }
            .eye-close {
              display: none;
            }
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .document-box {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 20px;
        width: 100%;
        h2 {
          font-weight: 500;
          font-size: 16px;
          line-height: 20px;
          color: rgba(0, 0, 0, 0.6);
        }
        .document-list {
          width: 100%;
          padding: 24px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 24px;
          border-radius: 12px;
          .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 20px;
            .document-title {
              display: flex;
              align-items: center;
              gap: 16px;
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 400;
                font-size: 13px;
                line-height: 15px;
                color: #0f91d2;
                max-width: 350px;
              }
            }
            .document-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              .viewDocument,
              .deleteDocument {
                width: 24px;
                height: 24px;
                min-width: 24px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}

/*============== Role Permission ==================*/
.rolePermission-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .rolePermission-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    /* justify-content: space-between; */
    gap: 32px;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewRolePermission {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .rolePermission-body {
    margin-top: 30px;
    padding-bottom: 100px;
    background: transparent;
    .rolePermission-table {
      border: 2px solid rgba(0, 0, 0, 0.04);
      border-radius: 14px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          border-bottom: 2px solid rgba(0, 0, 0, 0.04);
          width: 100%;
        }
        td,
        th {
          padding: 20px 16px;
          text-align: left;
          font-size: 14px;
          line-height: 16px;
          background: #fff;
        }
        th {
          font-weight: 600;
          color: #534d59;
          text-wrap: nowrap;
        }
        tbody {
          tr {
            vertical-align: top;
            td {
              font-weight: 400;
              color: #474747;
              .action-links {
                display: flex;
                align-items: center;
                gap: 24px;
                .action-link {
                  min-width: 24px;
                  width: 24px;
                  height: 24px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
              .table_role_items {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
                .roleItem {
                  padding: 6px 12px;
                  border-radius: 100px;
                  background: rgba(70, 121, 239, 0.12);
                  font-weight: 400;
                  font-size: 10px;
                  line-height: 12px;
                  color: #131527;
                }
              }
            }
            &:nth-child(odd) {
              td {
                background: #f9fafc;
              }
            }

            &:last-child {
              border-bottom: none;
              td {
                &:first-child {
                  border-bottom-left-radius: 14px;
                }
                &:last-child {
                  border-bottom-right-radius: 14px;
                }
              }
            }
          }
        }
      }
    }
  }
}
.addRolePermisson-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .addRolePermisson-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .roleForm {
    width: 100%;
    margin-top: 40px;
    .role-name {
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 8px;
      width: 100%;
      label {
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.6);
      }
      input {
        width: 100%;
        background: #fbfbfb;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 12px;
        padding: 18px;
        outline: none;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #000;
        &::placeholder {
          color: rgba(26, 26, 26, 0.6);
        }
      }
    }
    .permissons {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      width: 100%;
      p {
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.6);
      }
      .permissons-boxes {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        .permisson-box {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 20px;
          background: #fff;
          border-radius: 12px;
          padding: 12px;
          h2 {
            width: 100%;
            text-align: center;
            padding: 16px;
            font-weight: 500;
            font-size: 16px;
            line-height: 20px;
            color: #131527;
            background: rgba(70, 121, 239, 0.05);
            border-radius: 8px;
          }
          .permisson-list {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 16px;
            padding: 0 8px 8px;
            .permisson-item {
              display: flex;
              align-items: center;
              gap: 8px;
              input {
                width: 20px;
                height: 20px;
                min-width: 20px;
                accent-color: #4679ef;
              }
              label {
                font-weight: 400;
                font-size: 14px;
                line-height: 18px;
                color: #474747;
                input:checked + & {
                  color: #4679ef;
                }
              }
            }
          }
        }
      }
    }
    .saveForm {
      display: block;
      margin-top: 48px;
      margin-left: auto;
      padding: 14px 28px;
      color: #fff;
      background: #4679ef;
      border-radius: 6px;
      font-weight: 400;
      font-size: 16px;
      line-height: 19px;
    }
  }
}
.editRolePermisson-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .editRolePermisson-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .roleForm {
    width: 100%;
    margin-top: 40px;
    .role-name {
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 8px;
      width: 100%;
      label {
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.6);
      }
      input {
        width: 100%;
        background: #fbfbfb;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 12px;
        padding: 18px;
        outline: none;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #000;
        &::placeholder {
          color: rgba(26, 26, 26, 0.6);
        }
      }
    }
    .permissons {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      width: 100%;
      p {
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.6);
      }
      .permissons-boxes {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        .permisson-box {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 20px;
          background: #fff;
          border-radius: 12px;
          padding: 12px;
          h2 {
            width: 100%;
            text-align: center;
            padding: 16px;
            font-weight: 500;
            font-size: 16px;
            line-height: 20px;
            color: #131527;
            background: rgba(70, 121, 239, 0.05);
            border-radius: 8px;
          }
          .permisson-list {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 16px;
            padding: 0 8px 8px;
            .permisson-item {
              display: flex;
              align-items: center;
              gap: 8px;
              input {
                width: 20px;
                height: 20px;
                min-width: 20px;
                accent-color: #4679ef;
              }
              label {
                font-weight: 400;
                font-size: 14px;
                line-height: 18px;
                color: #474747;
                input:checked + & {
                  color: #4679ef;
                }
              }
            }
          }
        }
      }
    }
    .saveForm {
      display: block;
      margin-top: 48px;
      margin-left: auto;
      padding: 14px 28px;
      color: #fff;
      background: #4679ef;
      border-radius: 6px;
      font-weight: 400;
      font-size: 16px;
      line-height: 19px;
    }
  }
}
.viewRolePermisson-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .viewRolePermisson-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    h1 {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #202224;
    }
  }
  .roleForm {
    width: 100%;
    margin-top: 40px;
    .role-name {
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 8px;
      width: 100%;
      label {
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.6);
      }
      input {
        width: 100%;
        background: #fbfbfb;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 12px;
        padding: 18px;
        outline: none;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #000;
        &::placeholder {
          color: rgba(26, 26, 26, 0.6);
        }
      }
    }
    .permissons {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 30px;
      width: 100%;
      p {
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.6);
      }
      .permissons-boxes {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        .permisson-box {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 20px;
          background: #fff;
          border-radius: 12px;
          padding: 12px;
          h2 {
            width: 100%;
            text-align: center;
            padding: 16px;
            font-weight: 500;
            font-size: 16px;
            line-height: 20px;
            color: #131527;
            background: rgba(70, 121, 239, 0.05);
            border-radius: 8px;
          }
          .permisson-list {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 16px;
            padding: 0 8px 8px;
            .permisson-item {
              display: flex;
              align-items: center;
              gap: 8px;
              input {
                width: 20px;
                height: 20px;
                min-width: 20px;
                accent-color: #4679ef;
              }
              label {
                font-weight: 400;
                font-size: 14px;
                line-height: 18px;
                color: #474747;
                input:checked + & {
                  color: #4679ef;
                }
              }
            }
          }
        }
      }
    }
  }
}

/*============== Role Management ==================*/
.roleManagement-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .roleManagement-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewRoleManagement {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .roleManagement-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .roleManagement-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .roleManagement-table {
      margin-top: 60px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .activeRole {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                min-width: 110px;
                width: max-content;
                background: #ddf6e9;
                border-radius: 10px;
                padding: 6px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #59cb92;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #59cb92;
                  transform: rotate(45deg);
                }
              }
              .deactiveRole {
                display: flex;
                align-items: center;
                min-width: 110px;
                width: max-content;
                justify-content: center;
                gap: 8px;
                background: #fff5d5;
                border-radius: 10px;
                padding: 6px 14px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #f9ab43;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #f9ab43;
                  transform: rotate(45deg);
                }
              }
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  min-width: 130px;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 2) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2){
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
  }
}
.add-roleManagement-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-roleManagement {
    max-width: 660px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddRoleManagement {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 50px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
        .form-item {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          width: 100%;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            input {
              width: 100%;
              border: none;
              outline: none;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #000;
            }
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
        }
      }
      .submit {
        width: 100%;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-roleManagement-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-roleManagement {
    max-width: 660px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditRoleManagement {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 50px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
        .form-item {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          width: 100%;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            input {
              width: 100%;
              border: none;
              outline: none;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #000;
            }
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
        }
      }
      .submit {
        width: 100%;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}

/*============== Oil Change Type ==================*/
.oilChangeType-container {
  padding: 30px 30px 0;
  background: #f5f6fa;
  width: 100%;
  .oilChangeType-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    /* justify-content: space-between; */
    gap: 32px;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
    .head-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
      .export_excel {
        padding: 12px 28px;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #7b7676;
        background: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
      .addNewOilChangeType {
        padding: 12px 28px;
        box-shadow: 2px 2px 4px 0px #c3c3c3;
        background: #4679ef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .oilChangeType-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    .oilChangeType-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
      .modul-search {
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
        border-radius: 100px;
        .search_btn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          svg {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #000;
          &::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }
    .oilChangeType-table {
      margin-top: 25px;
      width: 100%;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
        }
        th {
          font-weight: 600;
          color: #a5a3b0;
          text-wrap: nowrap;
          font-size: 18px;
          line-height: 28px;
          text-align: start;
          padding: 0 8px 16px;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
            text-align: end;
          }
        }
        td {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-align: start;
          color: #202224;
          padding: 16px 8px;
          min-width: 100px;
          &:first-child {
            padding-left: 0;
            min-width: 40px;
          }
          &:last-child {
            padding-right: 0;
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #dadada;
            td {
              max-width: 250px;
              .activeOilType {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                min-width: 110px;
                width: max-content;
                background: #ddf6e9;
                border-radius: 10px;
                padding: 6px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #59cb92;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #59cb92;
                  transform: rotate(45deg);
                }
              }
              .deactiveOilType {
                display: flex;
                align-items: center;
                min-width: 110px;
                width: max-content;
                justify-content: center;
                gap: 8px;
                background: #fff5d5;
                border-radius: 10px;
                padding: 6px 14px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #f9ab43;
                span {
                  width: 10px;
                  height: 10px;
                  min-width: 10px;
                  border-radius: 2px;
                  background: #f9ab43;
                  transform: rotate(45deg);
                }
              }
              .action {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: end;
                .actionBtn {
                  width: 24px;
                  height: 24px;
                  min-width: 24px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #ede9e9;
                  img {
                    width: 15px;
                  }
                }
                .action-links {
                  padding: 0 6px;
                  border: 1px solid rgba(206, 206, 206, 0.25);
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: start;
                  border-radius: 14px;
                  width: max-content;
                  min-width: 130px;
                  position: absolute;
                  top: 44px;
                  opacity: 0;
                  visibility: hidden;
                  right: 0;
                  z-index: 2;
                  .action-link {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    border-bottom: 1px solid #dadada;
                    width: 100%;
                    padding: 12px 8px;
                    color: #202224;
                    img {
                      width: 20px;
                      height: 20px;
                      min-width: 20px;
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                  }
                }
                .action-links.active {
                  opacity: 1;
                  visibility: visible;
                  top: 34px;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:nth-last-child(-n + 2) {
              .action {
                .action-links {
                  top: auto;
                  bottom: 44px;
                }
                .action-links.active {
                  top: auto;
                  bottom: 34px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2){
              .action {
                .action-links {
                  top: 44px;
                  bottom: auto;
                }
                .action-links.active {
                  top: 34px;
                  bottom: auto;
                }
              }
            }
          }
        }
      }
    }
  }
}
.add-oilChangeType-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .add-oilChangeType {
    max-width: 660px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeAddOilChangeType {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 50px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
        .form-item {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          width: 100%;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            input {
              width: 100%;
              border: none;
              outline: none;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #000;
            }
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
        }
      }
      .submit {
        width: 100%;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
.edit-oilChangeType-container {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  padding: 20px 16px;
  .edit-oilChangeType {
    max-width: 660px;
    width: 100%;
    background: #fff;
    position: relative;
    padding: 70px 60px;
    box-shadow: 2px 2px 4px 0px rgba(154, 154, 154, 0.25);
    border-radius: 14px;
    max-height: 90svh;
    overflow: auto;
    h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
      text-align: center;
    }
    .closeEditOilChangeType {
      width: 30px;
      height: 30px;
      min-width: 30px;
      position: absolute;
      top: 40px;
      right: 40px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    form {
      margin-top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 50px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
        .form-item {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 10px;
          width: 100%;
          label {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #0a0a0b;
          }
          .form-input {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            input {
              width: 100%;
              border: none;
              outline: none;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #000;
            }
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
        }
      }
      .submit {
        width: 100%;
        text-align: center;
        padding: 14px;
        border-radius: 100px;
        background: #0a0a0b;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}

/*============== Logo Management ==================*/
.logoManagement-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .logoManagement-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
  }
  .logoManagement-body {
    margin-top: 30px;
    padding: 32px 20px;
    background: #fff;
    border-radius: 14px;
    .logoManagement-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #202224;
      }
    }
    .addLogo {
      max-width: 700px;
      width: 100%;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 40px;
      .add_file_box {
        width: 100%;
        border: 1px solid #d6d6d6;
        padding: 10px 20px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
        input {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 2;
          opacity: 0;
          cursor: pointer;
        }
        .uploadIcon {
          width: 36px;
          height: 36px;
          min-width: 36px;
        }
        .box-text {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 8px;
          p {
            font-weight: 400;
            font-size: 13px;
            line-height: 15px;
            color: #474747;
          }
          span {
            font-weight: 400;
            font-size: 13px;
            line-height: 15px;
            color: rgba(71, 71, 71, 0.5);
          }
        }
        .selectFileTxt {
          margin-left: auto;
          font-weight: 400;
          font-size: 14px;
          line-height: 16px;
          color: #0a0a0b;
        }
      }
      .logoImg {
        width: 142px;
        img {
          width: 100%;
        }
      }
      .saveLogo {
        display: flex;
        align-items: center;
        padding: 13px 28px;
        gap: 10px;
        background: #ffffff;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px rgba(195, 195, 195, 1);
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        border-radius: 10px;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
}

/*============== Profile ==================*/
.profile-container {
  padding: 30px;
  background: #f5f6fa;
  width: 100%;
  .profile-container-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    h1 {
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      color: #202224;
    }
  }
  .profile-body {
    margin-top: 30px;
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    .profile-body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      h2 {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #4679ef;
      }
    }
    .profileForm {
      max-width: 700px;
      width: 100%;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 40px;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
      .form-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #0a0a0b;
        }
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          input {
            width: 100%;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          .password-eye {
            width: 24px;
            height: 24px;
            min-width: 24px;
            svg {
              width: 100%;
              height: 100%;
            }
            .eye-open {
              display: none;
            }
            .eye-close {
              display: block;
            }
          }
          .password-eye.showed {
            .eye-open {
              display: block;
            }
            .eye-close {
              display: none;
            }
          }
        }
        select {
          width: 100%;
          border: 1px solid #d6d6d6;
          border-radius: 14px;
          padding: 15px 20px;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;
        }
      }
      .saveProfile {
        display: flex;
        align-items: center;
        padding: 13px 28px;
        gap: 10px;
        background: #ffffff;
        border: 1px solid #dadada;
        box-shadow: 2px 2px 4px 0px rgba(195, 195, 195, 1);
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        border-radius: 10px;
        svg {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
}

.entry-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 100svh;
  padding: 40px 20px;
  .bgImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
    filter: brightness(70%);
  }
  .entry-box {
    max-width: 700px;
    width: 100%;
    height: auto;
    background: rgba(96, 96, 96, 0.16);
    backdrop-filter: blur(4px);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 90px 100px;
    .logo {
      height: 140px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .box-title {
      font-weight: 700;
      font-size: 30px;
      line-height: 36px;
      margin-top: 24px;
      color: #fff;
    }
    form {
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: start;
      width: 100%;
      .form-inputs {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
        gap: 24px;
        input {
          border: 1px solid #d8d8d8;
          border-radius: 14px;
          padding: 12px 20px;
          background: transparent;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #fff;
          width: 100%;
          outline: none;
          &::placeholder {
            color: #b3b2b7;
          }
        }
      }
      .form-bottom {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 16px;
        .saveMemory {
          display: flex;
          align-items: center;
          gap: 10px;
          input {
            width: 14px;
            height: 14px;
          }
          label {
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            color: #ffffff;
          }
        }
        .forgetPasswordLink {
          font-weight: 400;
          font-size: 12px;
          line-height: 18px;
          text-decoration: underline;
          color: #ffffff;
        }
      }
      .submitBtn {
        margin-top: 60px;
        width: 100%;
        padding: 12px;
        background: #4679ef;
        border-radius: 100px;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        text-align: center;
      }
    }
  }
}
@media only screen and (max-width: 1250px) {
  .crm-container {
    grid-template-columns: 210px calc(100% - 210px);
  }
  .aside-container {
    .crm-logo {
      width: 120px;
    }
    .aside-menu {
      margin-top: 30px;
      gap: 16px;
      .menuLink {
        padding-left: 10px;
        .menuLink-inner {
          padding: 10px;
          gap: 12px;
          img {
            width: 28px;
            height: 28px;
            min-width: 28px;
          }
          p {
            font-size: 16px;
            line-height: 24px;
          }
        }
        &::after {
          left: 0;
          width: 3px;
        }
        .right-title-box {
          left: 80px;
          padding: 6px 0 0 6px;
          .right-title {
            padding: 8px 14px;
            font-size: 16px;
            line-height: 24px;
          }
        }
      }
      .aside-dropdown {
        .asideDownBtn {
          padding-left: 10px;
          .asideDownBtn-inner {
            padding: 10px;
            gap: 10px;
            img {
              width: 28px;
              height: 28px;
              min-width: 28px;
            }
            p {
              font-size: 16px;
              line-height: 24px;
            }
            svg {
              min-width: 22px;
              width: 22px;
              height: 22px;
            }
          }
          &::after {
            width: 3px;
            height: 100%;
          }
        }
        .aside-dropdown-links {
          padding-left: 24px;
          .dropdown-links-inner {
            gap: 14px;
            padding: 0 12px;
            max-height: 90px;
            &::-webkit-scrollbar {
              width: 2px;
            }
            &::-webkit-scrollbar-thumb {
              width: 2px;
            }
            .dropdown-link {
              padding-left: 16px;
              &::after {
                width: 6px;
                height: 6px;
              }
            }
          }
        }
        .right-title-box {
          left: 80px;
          padding: 6px 0 0 6px;
          .box-inner {
            padding: 20px 14px;
            gap: 12px;
            min-width: 165px;
            width: 165px;
            .right-title {
              font-size: 18px;
              line-height: 28px;
            }
            .right-dropdown-links {
              gap: 12px;
              .dropdown-link {
                padding-left: 16px;
                &::after {
                  width: 6px;
                  height: 6px;
                }
              }
            }
          }
        }
      }
      .aside-dropdown.active {
        gap: 12px;
      }
      .aside-settings {
        margin-top: 70px;
      }
      .exitProfile {
        padding-left: 10px;
        .exitProfile-inner {
          padding: 10px;
          gap: 10px;
          img {
            width: 28px;
            height: 28px;
            min-width: 28px;
          }
          p {
            font-size: 16px;
            line-height: 24px;
          }
        }
        .right-title-box {
          position: absolute;
          background: transparent;
          top: 0px;
          left: 90px;
          padding: 10px 0 0 10px;
          display: none;
          visibility: hidden;
          opacity: 0;
          transition: 0.35s ease-in-out;
          z-index: 5;
          .right-title {
            padding: 10px 16px;
            background: #202224;
            border-radius: 14px;
            color: #fff;
            font-weight: 400;
            font-size: 18px;
            line-height: 28px;
          }
        }
        &::after {
          width: 3px;
        }
      }
    }
  }
  .short-aside {
    grid-template-columns: 80px calc(100% - 80px);
    .aside-container {
      padding: 40px 0 20px;
      .crm-logo {
        width: 64px;
      }
      .aside-menu {
        margin-top: 50px;
      }
    }
  }
  .header {
    padding: 10px 20px;
    .header-left {
      gap: 20px;
      max-width: 390px;
      .aside_resize_btn {
        width: 22px;
        height: 22px;
        min-width: 22px;
      }
      .header-search {
        gap: 10px;
        padding: 6px 8px;
        .search_btn {
          width: 22px;
          height: 22px;
          min-width: 22px;
        }
      }
    }
    .header-right {
      gap: 20px;
      .header-notification {
        .notification-btn {
          width: 22px;
          height: 22px;
          min-width: 22px;
          &::after {
            width: 7px;
            height: 7px;
          }
        }
        .notification-list {
          right: 0;
          width: 240px;
          top: 60px;
          .notification-item {
            padding: 8px 14px;
            p {
              font-size: 14px;
              line-height: 18px;
            }
            span {
              font-size: 12px;
              line-height: 14px;
            }
          }
        }
      }
      .header-notification.active {
        .notification-list {
          top: 50px;
        }
      }
      .header-user {
        .header-user-btn {
          gap: 16px;
          .userImg {
            width: 40px;
            height: 40px;
            min-width: 40px;
          }
          .down-icon {
            width: 16px;
            height: 16px;
            min-width: 16px;
          }
        }
        .header-user-body {
          top: 70px;
          width: 150px;
          .profile_link {
            padding: 10px 16px;
            gap: 8px;
            font-size: 15px;
            line-height: 22px;
            svg {
              min-width: 18px;
              width: 18px;
              height: 18px;
            }
          }
          .exitProfile {
            padding: 8px 16px;
            gap: 8px;
            font-weight: 400;
            font-size: 15px;
            line-height: 22px;
            svg {
              min-width: 22px;
              width: 22px;
              height: 22px;
            }
          }
        }
      }
      .header-user.active {
        .header-user-body {
          top: 60px;
        }
      }
    }
  }
  .pagination-result {
    padding: 8px 20px;
    .pagination-result-right {
      gap: 20px;
      .pagination {
        gap: 8px;
      }
    }
  }
  .success-modal-container {
    .success-modal {
      max-width: 630px;
      padding: 40px 20px;
      .closeSuccess {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      img {
        max-width: 200px;
      }
      h2 {
        margin-top: 20px;
        font-size: 20px;
        line-height: 28px;
      }
      p {
        margin: 12px auto 0;
        max-width: 300px;
        font-size: 15px;
        line-height: 22px;
      }
      .goBack {
        margin: 14px auto 0;
        padding: 10px 40px;
        font-size: 15px;
        line-height: 22px;
      }
    }
  }
  .error-modal-container {
    .error-modal {
      max-width: 630px;
      padding: 40px 20px;
      .closeError {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      img {
        max-width: 230px;
      }
      h2 {
        margin-top: 20px;
        font-size: 20px;
        line-height: 28px;
      }
      p {
        margin: 12px auto 0;
        max-width: 300px;
        font-size: 15px;
        line-height: 22px;
      }
      .goBack {
        margin: 14px auto 0;
        padding: 10px 40px;
        font-size: 15px;
        line-height: 22px;
      }
    }
  }
  .generalSearch {
    gap: 16px;
    .form_inner {
      grid-template-columns: repeat(4, 1fr);
      .form_item {
        gap: 8px;
        label {
          font-size: 14px;
          line-height: 20px;
        }
        input {
          padding: 12px 16px;
        }
        select {
          padding: 12px 16px;
        }
      }
    }
    .submitForm {
      padding: 10px 24px;
      font-size: 15px;
      line-height: 22px;
    }
  }

  /*============== Dashboard ==================*/

  .dashboard-continer {
    padding: 20px;
    h1 {
      font-size: 28px;
      line-height: 36px;
    }
    .dashboard-boxes {
      margin-top: 20px;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      .dashboard-box {
        .box-left {
          .box-count {
            margin-top: 12px;
            font-size: 24px;
            line-height: 32px;
          }
          .box-status {
            margin-top: 20px;
            gap: 6px;
            img {
              width: 20px;
              height: 20px;
              min-width: 20px;
            }
            p {
              font-size: 14px;
              line-height: 20px;
              span {
                font-size: 14px;
                line-height: 20px;
              }
            }
          }
        }
        .icon {
          width: 50px;
          height: 50px;
          min-width: 50px;
          border-radius: 20px;
          img {
            min-width: 24px;
            width: 24px;
            height: 24px;
          }
        }
      }
    }
    .today_notifications_container {
      margin-top: 30px;
      h2 {
        font-size: 20px;
        line-height: 28px;
      }
      .today_notifications {
        margin-top: 20px;
        gap: 20px;
        .calendar {
          width: 320px;
          min-width: 320px;
          padding: 20px 26px;
          .calendar-header {
            gap: 10px;
            .calendar-month-year {
              font-size: 20px;
              line-height: 28px;
            }
            .calendar-header-buttons {
              gap: 16px;
              button {
                width: 30px;
                height: 30px;
                min-width: 30px;
                svg {
                  width: 20px;
                }
              }
            }
          }
          .calendar-days {
            margin-top: 20px;
            grid-template-columns: repeat(7, 1fr);
            gap: 10px;
            .calendar-day-item {
              font-size: 14px;
              line-height: 20px;
            }
          }
          .calendar-grid {
            margin-top: 10px;
            gap: 2px 12px;
            .prev-month,
            .next-month {
              font-size: 14px;
              line-height: 20px;
              height: 28px;
            }
            .current-month {
              font-size: 14px;
              line-height: 20px;
              width: 28px;
              height: 28px;
              min-width: 28px;
            }
          }
        }
        .today_notifications_boxes {
          width: calc(100% - 340px);
          gap: 14px 20px;
          .today_notifications_box {
            padding: 12px 16px 12px 30px;
            gap: 8px;
            &::after {
              width: 16px;
            }
            .box-list {
              padding-right: 6px;
              gap: 4px;
              max-height: 73px;
              .list-item {
                font-size: 15px;
                line-height: 22px;
              }
            }
          }
        }
      }
    }
    .chart-items {
      margin-top: 30px;
      gap: 30px;
      .chart-item {
        padding: 24px 24px 44px;
        .chart-item-head {
          padding-bottom: 30px;
          h2 {
            font-size: 20px;
            line-height: 28px;
          }
        }
      }
    }
  }

  /*============== Payments ==================*/

  .payments-container {
    padding: 20px 20px 0;
    .payments-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .payments-body {
      margin-top: 20px;
      padding: 20px 16px;
      .payments-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .payments-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .action {
                  .action-links {
                    width: 120px;
                    .view_link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                    .deleteTableRow {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .viewPayments-container {
    padding: 20px;
    .viewPayments-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .viewPayments-body {
      margin-top: 30px;
      padding: 30px;
      .viewPayments-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .viewPayments-form {
        max-width: 100%;
        margin-top: 20px;
        gap: 20px;
        .form-items {
          gap: 20px 60px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              padding: 12px;
              gap: 10px;
            }
          }
        }
      }
    }
  }

  /*============== Drivers ==================*/
  .drivers-container {
    padding: 20px 20px 0;
    .drivers-container-head {
      gap: 30px;
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .drivers-tabs {
        .driver-tab {
          font-size: 14px;
          line-height: 20px;
        }
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewDriver {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .drivers-body {
      margin-top: 20px;
      padding: 20px 16px;
      .drivers-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .drivers-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .viewDrivers-container {
    padding: 20px;
    .viewDrivers-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .viewDrivers-body {
      margin-top: 30px;
      padding: 30px;
      .viewDrivers-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .viewDrivers-form {
        margin-top: 20px;
        gap: 20px;
        .form-items {
          max-width: 100%;
          gap: 20px 60px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              padding: 12px;
              gap: 10px;
            }
          }
        }
        .driver-document-images {
          margin-top: 30px;
          .document-box {
            gap: 14px;
            h2 {
              font-size: 14px;
              line-height: 18px;
            }
            .document-list {
              padding: 20px;
              gap: 20px;
              .document-item {
                gap: 16px;
                .document-title {
                  gap: 12px;
                  img {
                    width: 28px;
                    height: 28px;
                    min-width: 28px;
                  }
                  p {
                    font-size: 12px;
                    line-height: 14px;
                  }
                }
                .document-actions {
                  gap: 8px;
                  .viewDocument,
                  .deleteDocument {
                    width: 22px;
                    height: 22px;
                    min-width: 22px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .add-driver-container {
    .add-driver {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddDriver {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              gap: 10px;
              padding: 12px 16px;
              .password-eye {
                width: 20px;
                height: 20px;
                min-width: 20px;
              }
            }
            select {
              padding: 12px 16px;
            }
          }
        }
        .upload-box {
          gap: 10px;
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            .uploadIcon {
              width: 32px;
              height: 32px;
              min-width: 32px;
            }
            .box-text {
              gap: 6px;
              p {
                font-size: 12px;
                line-height: 14px;
              }
              span {
                font-size: 12px;
                line-height: 14px;
              }
            }
            .selectFileTxt {
              font-size: 13px;
              line-height: 15px;
            }
          }
          .document-list {
            padding: 12px;
            gap: 12px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-driver-container {
    .edit-driver {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditDriver {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              gap: 10px;
              padding: 12px 16px;
              .password-eye {
                width: 20px;
                height: 20px;
                min-width: 20px;
              }
            }
            select {
              padding: 12px 16px;
            }
          }
        }
        .upload-box {
          gap: 10px;
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            .uploadIcon {
              width: 32px;
              height: 32px;
              min-width: 32px;
            }
            .box-text {
              gap: 6px;
              p {
                font-size: 12px;
                line-height: 14px;
              }
              span {
                font-size: 12px;
                line-height: 14px;
              }
            }
            .selectFileTxt {
              font-size: 13px;
              line-height: 15px;
            }
          }
          .document-list {
            padding: 12px;
            gap: 12px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .send-notification-container {
    .send-notification {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeSendNotification {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
          }
          select,
          textarea {
            padding: 12px 16px;
          }
          textarea {
            height: 90px;
          }
        }
        .upload-box {
          gap: 10px;
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            .uploadIcon {
              width: 32px;
              height: 32px;
              min-width: 32px;
            }
            .box-text {
              gap: 6px;
              p {
                font-size: 12px;
                line-height: 14px;
              }
              span {
                font-size: 12px;
                line-height: 14px;
              }
            }
            .selectFileTxt {
              font-size: 13px;
              line-height: 15px;
            }
          }
          .document-list {
            padding: 12px;
            gap: 12px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .payment-driver-container {
    .payment-driver {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closePaymentDriver {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
          }
          select,
          textarea {
            padding: 12px 16px;
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 90px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }

  /*============== Notifications ==================*/
  .notification-container {
    padding: 20px 20px 0;
    .notification-container-head {
      gap: 30px;
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewNotification {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .notification-body {
      margin-top: 20px;
      padding: 20px 16px;
      .notification-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .notifications-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .add-notification-container {
    .add-notification {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddNotification {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              gap: 10px;
              padding: 12px 16px;
              textarea {
                height: 100px;
              }
            }
            select {
              padding: 12px 16px;
            }
            .form_radios {
              gap: 12px;
              .form_radio {
                p {
                  padding: 6px 12px;
                }
              }
            }
          }
        }
        .form-filter-container {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-filter {
            gap: 30px;
            .filter-main {
              .filter-main-btn {
                gap: 8px;
                padding: 4px 12px;
                svg {
                  min-width: 22px;
                  width: 22px;
                  height: 22px;
                }
              }
              .driversListBox {
                top: 46px;
                width: 250px;
                padding: 20px;
                border-radius: 20px;
                .driversList {
                  margin-top: 12px;
                  gap: 12px;
                  height: 96px;
                  .driverItem {
                    gap: 12px;
                  }
                }
                .full_list {
                  max-height: 96px;
                }
                .seeAllDrivers {
                  margin-top: 12px;
                  padding: 8px;
                }
              }
            }
            .filter_selected {
              .selectedItem {
                padding: 5px 14px;
                p {
                  font-size: 15px;
                }
              }
            }
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .viewNotification-container {
    padding: 20px;
    .viewNotification-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .viewNotification-body {
      margin-top: 30px;
      padding: 30px;
      .viewNotification-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .viewNotification-form {
        margin-top: 20px;
        gap: 20px;
      }
    }
  }

  /*============== Ban Type==================*/
  .banType-container {
    padding: 20px 20px 0;
    .banType-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewBanType {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .banType-body {
      margin-top: 20px;
      padding: 20px 16px;
      .banType-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .banType-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .activeBan {
                  gap: 6px;
                  min-width: 90px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .deactiveBan {
                  gap: 6px;
                  min-width: 90px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .add-banType-container {
    .add-banType {
      max-width: 580px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddBanType {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-banType-container {
    .edit-banType {
      max-width: 580px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditBanType {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }

  /*============== Brand ==================*/
  .brand-container {
    padding: 20px 20px 0;
    .brand-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewBrand {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .brand-body {
      margin-top: 20px;
      padding: 20px 16px;
      .brand-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .brand-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .activeBrand {
                  gap: 6px;
                  min-width: 90px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .deactiveBrand {
                  gap: 6px;
                  min-width: 90px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .add-brand-container {
    .add-brand {
      max-width: 580px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddBrand {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-brand-container {
    .edit-brand {
      max-width: 580px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditBrand {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }

  /*============== Model ==================*/
  .model-container {
    padding: 20px 20px 0;
    .model-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewModel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .model-body {
      margin-top: 20px;
      padding: 20px 16px;
      .model-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .model-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .activeModel {
                  gap: 6px;
                  min-width: 90px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .deactiveModel {
                  gap: 6px;
                  min-width: 90px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .add-model-container {
    .add-model {
      max-width: 580px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddModel {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-model-container {
    .edit-model {
      max-width: 580px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditModel {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }

  /*============== Auto ==================*/
  .auto-container {
    padding: 20px 20px 0;
    .auto-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewAuto {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .auto-body {
      margin-top: 20px;
      padding: 20px 16px;
      .auto-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .auto-table {
        margin-top: 25px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .inDrive {
                  gap: 6px;
                  min-width: 90px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .idle {
                  gap: 6px;
                  min-width: 90px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .viewAuto-container {
    padding: 20px;
    .viewAuto-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .viewAuto-body {
      margin-top: 30px;
      padding: 30px;
      .viewAuto-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .viewAuto-form {
        max-width: 100%;
        margin-top: 20px;
        .form-items {
          gap: 20px 60px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              padding: 12px;
              gap: 10px;
            }
          }
        }
      }
    }
  }
  .add-auto-container {
    .add-auto {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddAuto {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        .form-items {
          gap: 16px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              gap: 10px;
              padding: 12px 16px;
            }
            select {
              padding: 12px 16px;
            }
          }
        }
        .submit {
          margin-top: 28px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-auto-container {
    .edit-auto {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditAuto {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        .form-items {
          gap: 16px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              gap: 10px;
              padding: 12px 16px;
            }
            select {
              padding: 12px 16px;
            }
          }
        }
        .submit {
          margin-top: 28px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }

  /*============== Penalty ==================*/
  .penalty-container {
    padding: 20px 20px 0;
    .penalty-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewPenalty {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .penalty-body {
      margin-top: 20px;
      padding: 20px 16px;
      .penalty-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .penalty-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .paid {
                  gap: 6px;
                  min-width: 110px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .unpaid {
                  gap: 6px;
                  min-width: 110px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .add-penalty-container {
    .add-penalty {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddPenalty {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
              resize: none;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-penalty-container {
    .edit-penalty {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditPenalty {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
              resize: none;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .payment-penalty-container {
    .payment-penalty {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closePaymentPenalty {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
          }
          select,
          textarea {
            padding: 12px 16px;
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 90px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .viewPenalty-container {
    padding: 20px;
    .viewPenalty-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .viewPenalty-body {
      margin-top: 30px;
      padding: 30px;
      .viewPenalty-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .viewPenalty-form {
        max-width: 100%;
        margin-top: 20px;
        gap: 20px;
        .form-items {
          max-width: 100%;
          gap: 20px 60px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px;
            textarea {
              height: 90px;
            }
          }
          select {
            padding: 12px;
          }
        }
      }
    }
  }

  /*============== Oil Change ==================*/
  .oilChange-container {
    padding: 20px 20px 0;
    .oilChange-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewOilChange {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .oilChange-body {
      margin-top: 20px;
      padding: 20px 16px;
      .oilChange-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .oilChange-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .activeOil {
                  gap: 6px;
                  min-width: 90px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .deactiveOil {
                  gap: 6px;
                  min-width: 90px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .total-payment {
        padding: 20px 24px 0;
        p,
        span {
          font-size: 16px;
          line-height: 24px;
        }
      }
    }
  }
  .add-oilChange-container {
    .add-oilChange {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddOilChange {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
              resize: none;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .upload-box {
          gap: 10px;
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            .uploadIcon {
              width: 32px;
              height: 32px;
              min-width: 32px;
            }
            .box-text {
              gap: 6px;
              p {
                font-size: 12px;
                line-height: 14px;
              }
              span {
                font-size: 12px;
                line-height: 14px;
              }
            }
            .selectFileTxt {
              font-size: 13px;
              line-height: 15px;
            }
          }
          .document-list {
            padding: 12px;
            gap: 12px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-oilChange-container {
    .edit-oilChange {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditOilChange {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
              resize: none;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .upload-box {
          gap: 10px;
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            .uploadIcon {
              width: 32px;
              height: 32px;
              min-width: 32px;
            }
            .box-text {
              gap: 6px;
              p {
                font-size: 12px;
                line-height: 14px;
              }
              span {
                font-size: 12px;
                line-height: 14px;
              }
            }
            .selectFileTxt {
              font-size: 13px;
              line-height: 15px;
            }
          }
          .document-list {
            padding: 12px;
            gap: 12px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .viewOilChange-container {
    padding: 20px;
    .viewOilChange-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .viewOilChange-body {
      margin-top: 30px;
      padding: 30px;
      .viewOilChange-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .viewOilChange-form {
        max-width: 100%;
        margin-top: 20px;
        gap: 20px;
        .form-items {
          gap: 20px 60px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px;
            textarea {
              height: 90px;
            }
          }
          select {
            padding: 12px;
          }
        }
        .document-box {
          gap: 14px;
          h2 {
            font-size: 14px;
            line-height: 18px;
          }
          .document-list {
            padding: 20px;
            gap: 20px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
      }
    }
  }

  /*============== Credit ==================*/
  .credit-container {
    padding: 20px 20px 0;
    .credit-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewCredit {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .credit-body {
      margin-top: 20px;
      padding: 20px 16px;
      .credit-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .credit-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .payDesc {
        padding: 20px 24px 0;
        gap: 30px;
        .total-payment,
        .paid {
          p,
          span {
            font-size: 16px;
            line-height: 24px;
          }
        }
      }
    }
  }
  .add-credit-container {
    .add-credit {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddCredit {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
              resize: none;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-credit-container {
    .edit-credit {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditCredit {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
              resize: none;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .viewCredit-container {
    padding: 20px;
    .viewCredit-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .viewCredit-body {
      margin-top: 30px;
      padding: 30px;
      .viewCredit-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .viewCredit-form {
        max-width: 100%;
        margin-top: 20px;
        gap: 20px;
        .form-items {
          max-width: 100%;
          gap: 20px 60px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px;
            textarea {
              height: 90px;
            }
          }
          select {
            padding: 12px;
          }
        }
      }
    }
  }

  /*============== Technical review ==================*/
  .technical-container {
    padding: 20px 20px 0;
    .technical-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewTechnical {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .technical-body {
      margin-top: 20px;
      padding: 20px 0;
      .technical-body-head {
        padding: 0 16px;
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .technical-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 12px;
            }
            &:last-child {
              padding-right: 12px;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 12px;
            }
            &:last-child {
              padding-right: 12px;
            }
          }
          tbody {
            tr {
              td {
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .total-payment {
        padding: 20px 24px 0;
        p,
        span {
          font-size: 16px;
          line-height: 24px;
        }
      }
    }
  }
  .add-technical-container {
    .add-technical {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddTechnical {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              gap: 10px;
              padding: 12px 16px;
            }
            select {
              padding: 12px 16px;
            }
          }
        }
        .upload-box {
          gap: 10px;
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            .uploadIcon {
              width: 32px;
              height: 32px;
              min-width: 32px;
            }
            .box-text {
              gap: 6px;
              p {
                font-size: 12px;
                line-height: 14px;
              }
              span {
                font-size: 12px;
                line-height: 14px;
              }
            }
            .selectFileTxt {
              font-size: 13px;
              line-height: 15px;
            }
          }
          .document-list {
            padding: 12px;
            gap: 12px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-technical-container {
    .edit-technical {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditTechnical {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              gap: 10px;
              padding: 12px 16px;
            }
            select {
              padding: 12px 16px;
            }
          }
        }
        .upload-box {
          gap: 10px;
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            .uploadIcon {
              width: 32px;
              height: 32px;
              min-width: 32px;
            }
            .box-text {
              gap: 6px;
              p {
                font-size: 12px;
                line-height: 14px;
              }
              span {
                font-size: 12px;
                line-height: 14px;
              }
            }
            .selectFileTxt {
              font-size: 13px;
              line-height: 15px;
            }
          }
          .document-list {
            padding: 12px;
            gap: 12px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .viewTechnical-container {
    padding: 20px;
    .viewTechnical-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .viewTechnical-body {
      margin-top: 30px;
      padding: 30px;
      .viewTechnical-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .viewTechnical-form {
        max-width: 100%;
        margin-top: 20px;
        .form-items {
          gap: 20px 60px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              gap: 10px;
              padding: 12px;
            }
          }
        }
        .document-box {
          gap: 14px;
          h2 {
            font-size: 14px;
            line-height: 18px;
          }
          .document-list {
            padding: 20px;
            gap: 20px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
      }
    }
  }
  .payment-technical-container {
    .payment-technical {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closePaymentTechnical {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
          }
          select,
          textarea {
            padding: 12px 16px;
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 90px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }

  /*============== Insurance ==================*/
  .insurance-container {
    padding: 20px 20px 0;
    .insurance-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewInsurance {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .insurance-body {
      margin-top: 20px;
      padding: 20px 0;
      .insurance-body-head {
        padding: 0 16px;
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .insurance-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 12px;
            }
            &:last-child {
              padding-right: 12px;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 12px;
            }
            &:last-child {
              padding-right: 12px;
            }
          }
          tbody {
            tr {
              td {
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .total-payment {
        padding: 20px 24px 0;
        p,
        span {
          font-size: 16px;
          line-height: 24px;
        }
      }
    }
  }
  .add-insurance-container {
    .add-insurance {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddInsurance {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              gap: 10px;
              padding: 12px 16px;
            }
            select {
              padding: 12px 16px;
            }
          }
        }
        .upload-box {
          gap: 10px;
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            .uploadIcon {
              width: 32px;
              height: 32px;
              min-width: 32px;
            }
            .box-text {
              gap: 6px;
              p {
                font-size: 12px;
                line-height: 14px;
              }
              span {
                font-size: 12px;
                line-height: 14px;
              }
            }
            .selectFileTxt {
              font-size: 13px;
              line-height: 15px;
            }
          }
          .document-list {
            padding: 12px;
            gap: 12px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-insurance-container {
    .edit-insurance {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditInsurance {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              gap: 10px;
              padding: 12px 16px;
            }
            select {
              padding: 12px 16px;
            }
          }
        }
        .upload-box {
          gap: 10px;
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            .uploadIcon {
              width: 32px;
              height: 32px;
              min-width: 32px;
            }
            .box-text {
              gap: 6px;
              p {
                font-size: 12px;
                line-height: 14px;
              }
              span {
                font-size: 12px;
                line-height: 14px;
              }
            }
            .selectFileTxt {
              font-size: 13px;
              line-height: 15px;
            }
          }
          .document-list {
            padding: 12px;
            gap: 12px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .viewInsurance-container {
    padding: 20px;
    .viewInsurance-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .viewInsurance-body {
      margin-top: 30px;
      padding: 30px;
      .viewInsurance-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .viewInsurance-form {
        max-width: 100%;
        margin-top: 20px;
        .form-items {
          gap: 20px 60px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              gap: 10px;
              padding: 12px;
            }
          }
        }
        .document-box {
          gap: 14px;
          h2 {
            font-size: 14px;
            line-height: 18px;
          }
          .document-list {
            padding: 20px;
            gap: 20px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
      }
    }
  }
  .payment-insurance-container {
    .payment-insurance {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closePaymentInsurance {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
          }
          select,
          textarea {
            padding: 12px 16px;
          }
          select {
            width: 100%;
            border: 1px solid #d6d6d6;
            border-radius: 14px;
            padding: 15px 20px;
            outline: none;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
          }
          textarea {
            height: 90px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }

  /*============== Leasing ==================*/
  .leasing-container {
    padding: 20px 20px 0;
    .leasing-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewLeasing {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .leasing-body {
      margin-top: 20px;
      padding: 20px 16px;
      .leasing-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .leasing-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .total-payment {
        padding: 20px 24px 0;
        p,
        span {
          font-size: 16px;
          line-height: 24px;
        }
      }
    }
  }
  .add-leasing-container {
    .add-leasing {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddLeasing {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .upload-box {
          gap: 10px;
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            .uploadIcon {
              width: 32px;
              height: 32px;
              min-width: 32px;
            }
            .box-text {
              gap: 6px;
              p {
                font-size: 12px;
                line-height: 14px;
              }
              span {
                font-size: 12px;
                line-height: 14px;
              }
            }
            .selectFileTxt {
              font-size: 13px;
              line-height: 15px;
            }
          }
          .document-list {
            padding: 12px;
            gap: 12px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-leasing-container {
    .edit-leasing {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditLeasing {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .upload-box {
          gap: 10px;
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            .uploadIcon {
              width: 32px;
              height: 32px;
              min-width: 32px;
            }
            .box-text {
              gap: 6px;
              p {
                font-size: 12px;
                line-height: 14px;
              }
              span {
                font-size: 12px;
                line-height: 14px;
              }
            }
            .selectFileTxt {
              font-size: 13px;
              line-height: 15px;
            }
          }
          .document-list {
            padding: 12px;
            gap: 12px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .viewLeasing-container {
    padding: 20px;
    .viewLeasing-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .viewLeasing-body {
      margin-top: 30px;
      padding: 30px;
      .viewLeasing-tabs {
        max-width: 540px;
        gap: 12px;
        .leasing_tab {
          font-size: 18px;
          line-height: 24px;
          padding-bottom: 6px;
        }
      }
      .viewLeasing_content {
        .form-items {
          max-width: 100%;
          gap: 20px 60px;
        }
        .form-item {
          max-width: 100%;
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px;
            textarea {
              height: 90px;
            }
          }
          select {
            padding: 12px;
          }
        }
      }
      .driverInfoContent {
        .driver-document-images {
          .document-box {
            gap: 14px;
            h2 {
              font-size: 14px;
              line-height: 18px;
            }
            .document-list {
              padding: 20px;
              gap: 20px;
              .document-item {
                gap: 16px;
                .document-title {
                  gap: 12px;
                  img {
                    width: 28px;
                    height: 28px;
                    min-width: 28px;
                  }
                  p {
                    font-size: 12px;
                    line-height: 14px;
                  }
                }
                .document-actions {
                  gap: 8px;
                  .viewDocument,
                  .deleteDocument {
                    width: 22px;
                    height: 22px;
                    min-width: 22px;
                  }
                }
              }
            }
          }
        }
      }
      .leasingInfoContent {
        .documents {
          max-width: 100%;
          .document-box {
            gap: 14px;
            h2 {
              font-size: 14px;
              line-height: 18px;
            }
            .document-list {
              padding: 20px;
              gap: 20px;
              .document-item {
                gap: 16px;
                .document-title {
                  gap: 12px;
                  img {
                    width: 28px;
                    height: 28px;
                    min-width: 28px;
                  }
                  p {
                    font-size: 12px;
                    line-height: 14px;
                  }
                }
                .document-actions {
                  gap: 8px;
                  .viewDocument,
                  .deleteDocument {
                    width: 22px;
                    height: 22px;
                    min-width: 22px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  /*============== Deposits ==================*/
  .deposits-container {
    padding: 20px 20px 0;
    .deposits-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewDeposits {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .deposits-body {
      margin-top: 20px;
      padding: 20px 16px;
      .deposits-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .deposits-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .total-payment {
        padding: 20px 24px 0;
        p,
        span {
          font-size: 16px;
          line-height: 24px;
        }
      }
    }
  }
  .add-deposits-container {
    .add-deposits {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddDeposits {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-deposits-container {
    .edit-deposits {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditDeposits {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .viewDeposits-container {
    padding: 20px;
    .viewDeposits-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .viewDeposits-body {
      margin-top: 30px;
      padding: 30px;
      .viewDeposits-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .viewDeposits-form {
        max-width: 100%;
        margin-top: 20px;
        gap: 20px;
        .form-items {
          gap: 20px 60px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px;
            textarea {
              height: 90px;
              resize: none;
            }
          }
          select {
            padding: 12px;
          }
        }
      }
    }
  }

  /*============== Expenses ==================*/
  .expenses-container {
    padding: 20px 20px 0;
    .expenses-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewExpenses {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .expenses-body {
      margin-top: 20px;
      padding: 20px 16px;
      .expenses-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .expenses-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .total-payment {
        padding: 20px 24px 0;
        p,
        span {
          font-size: 16px;
          line-height: 24px;
        }
      }
    }
  }
  .add-expenses-container {
    .add-expenses {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddExpenses {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-expenses-container {
    .edit-expenses {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditExpenses {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .viewExpenses-container {
    padding: 20px;
    .viewExpenses-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .viewExpenses-body {
      margin-top: 30px;
      padding: 30px;
      .viewExpenses-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .viewExpenses-form {
        max-width: 100%;
        margin-top: 20px;
        gap: 20px;
        .form-items {
          gap: 20px 60px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px;
            textarea {
              height: 90px;
              resize: none;
            }
          }
          select {
            padding: 12px;
          }
        }
      }
    }
  }

  /*============== Revenue ==================*/
  .revenue-container {
    padding: 20px 20px 0;
    .revenue-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewRevenue {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .revenue-body {
      margin-top: 20px;
      padding: 20px 16px;
      .revenue-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .revenue-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .total-payment {
        padding: 20px 24px 0;
        p,
        span {
          font-size: 16px;
          line-height: 24px;
        }
      }
    }
  }
  .add-revenue-container {
    .add-revenue {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddRevenue {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-revenue-container {
    .edit-revenue {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditRevenue {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .viewRevenue-container {
    padding: 20px;
    .viewRevenue-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .viewRevenue-body {
      margin-top: 30px;
      padding: 30px;
      .viewRevenue-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .viewRevenue-form {
        max-width: 100%;
        margin-top: 20px;
        gap: 20px;
        .form-items {
          gap: 20px 60px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px;
            textarea {
              height: 90px;
              resize: none;
            }
          }
          select {
            padding: 12px;
          }
        }
      }
    }
  }

  /*============== Cashbox ==================*/
  .cashbox-container {
    padding: 20px 20px 0;
    .cashbox-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewCashbox {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .cashbox-body {
      margin-top: 20px;
      padding: 20px 16px;
      .cashbox-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .cashbox-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .add-cashbox-container {
    .add-cashbox {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddCashbox {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-cashbox-container {
    .edit-cashbox {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditCashbox {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .viewCashbox-container {
    padding: 20px;
    .viewCashbox-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .viewCashbox-body {
      margin-top: 30px;
      padding: 30px;
      .viewCashbox-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .viewCashbox-form {
        max-width: 100%;
        margin-top: 20px;
        gap: 20px;
        .form-items {
          gap: 20px 60px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px;
            textarea {
              height: 90px;
              resize: none;
            }
          }
          select {
            padding: 12px;
          }
        }
      }
    }
  }

  /*============== Debt ==================*/
  .debt-container {
    padding: 20px 20px 0;
    .debt-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewDebt {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .debt-body {
      margin-top: 20px;
      padding: 20px 16px;
      .debt-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .debt-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .add-debt-container {
    .add-debt {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddDebt {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-debt-container {
    .edit-debt {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditDebt {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            textarea {
              height: 90px;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .viewDebt-container {
    padding: 20px;
    .viewDebt-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .viewDebt-body {
      margin-top: 30px;
      padding: 30px;
      .viewDebt-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .viewDebt-form {
        max-width: 100%;
        margin-top: 20px;
        gap: 20px;
        .form-items {
          gap: 20px 60px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px;
            textarea {
              height: 90px;
              resize: none;
            }
          }
          select {
            padding: 12px;
          }
        }
      }
    }
  }

  /*============== Users ==================*/
  .users-container {
    padding: 20px 20px 0;
    .users-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewUsers {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .users-body {
      margin-top: 20px;
      padding: 20px 16px;
      .users-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .users-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .activeUser {
                  gap: 6px;
                  min-width: 90px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .deactiveUser {
                  gap: 6px;
                  min-width: 90px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .add-user-container {
    .add-user {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddUser {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            .password-eye {
              width: 20px;
              height: 20px;
              min-width: 20px;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .upload-box {
          gap: 10px;
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            .uploadIcon {
              width: 32px;
              height: 32px;
              min-width: 32px;
            }
            .box-text {
              gap: 6px;
              p {
                font-size: 12px;
                line-height: 14px;
              }
              span {
                font-size: 12px;
                line-height: 14px;
              }
            }
            .selectFileTxt {
              font-size: 13px;
              line-height: 15px;
            }
          }
          .document-list {
            padding: 12px;
            gap: 12px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-user-container {
    .edit-user {
      max-width: 630px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditUser {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          gap: 16px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px 16px;
            .password-eye {
              width: 20px;
              height: 20px;
              min-width: 20px;
            }
          }
          select {
            padding: 12px 16px;
          }
        }
        .upload-box {
          gap: 10px;
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            .uploadIcon {
              width: 32px;
              height: 32px;
              min-width: 32px;
            }
            .box-text {
              gap: 6px;
              p {
                font-size: 12px;
                line-height: 14px;
              }
              span {
                font-size: 12px;
                line-height: 14px;
              }
            }
            .selectFileTxt {
              font-size: 13px;
              line-height: 15px;
            }
          }
          .document-list {
            padding: 12px;
            gap: 12px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
        .submit {
          margin-top: 12px;
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .viewUser-container {
    padding: 20px;
    .viewUser-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .viewUser-body {
      margin-top: 30px;
      padding: 30px;
      .viewUser-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .viewUser-form {
        max-width: 100%;
        margin-top: 20px;
        gap: 20px;
        .form-items {
          gap: 20px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12px;

            .password-eye {
              width: 20px;
              height: 20px;
              min-width: 20px;
            }
          }
          select {
            padding: 12px;
          }
        }
        .document-box {
          gap: 14px;
          h2 {
            font-size: 14px;
            line-height: 18px;
          }
          .document-list {
            padding: 20px;
            gap: 20px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
      }
    }
  }

  /*============== Logo Management ==================*/
  .logoManagement-container {
    padding: 20px;
    .logoManagement-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
    }
    .logoManagement-body {
      margin-top: 20px;
      padding: 20px 16px;
      .logoManagement-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .addLogo {
        max-width: 500px;
        margin-top: 30px;
        gap: 30px;
        .add_file_box {
          padding: 8px 16px;
          gap: 10px;
          .uploadIcon {
            width: 32px;
            height: 32px;
            min-width: 32px;
          }
          .box-text {
            gap: 6px;
            p {
              font-size: 12px;
              line-height: 14px;
            }
            span {
              font-size: 12px;
              line-height: 14px;
            }
          }
          .selectFileTxt {
            font-size: 13px;
            line-height: 15px;
          }
        }
        .logoImg {
          width: 132px;
        }
        .saveLogo {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
  }

  /*============== Role Permission ==================*/
  .rolePermission-container {
    padding: 20px 20px 0;
    .rolePermission-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewRolePermission {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .rolePermission-body {
      margin-top: 20px;
      padding-bottom: 70px;
      .rolePermission-table {
        table {
          td,
          th {
            padding: 16px 12px;
            font-size: 13px;
            line-height: 15px;
          }
          tbody {
            tr {
              td {
                .action-links {
                  gap: 20px;
                  .action-link {
                    min-width: 22px;
                    width: 22px;
                    height: 22px;
                  }
                }
                .table_role_items {
                  .roleItem {
                    padding: 5px 10px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .addRolePermisson-container {
    padding: 20px;
    .addRolePermisson-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .roleForm {
      margin-top: 30px;
      .role-name {
        input {
          padding: 14px;
        }
      }
      .permissons {
        margin-top: 30px;
        gap: 20px;
        .permissons-boxes {
          gap: 20px;
          .permisson-box {
            gap: 16px;
            padding: 10px;
            h2 {
              padding: 14px;
              font-size: 15px;
              line-height: 20px;
            }
            .permisson-list {
              gap: 14px;
              .permisson-item {
                input {
                  width: 18px;
                  height: 18px;
                  min-width: 18px;
                }
                label {
                  font-size: 13px;
                  line-height: 16px;
                }
              }
            }
          }
        }
      }
      .saveForm {
        margin-top: 40px;
        padding: 12px 24px;
        font-size: 15px;
      }
    }
  }
  .editRolePermisson-container {
    padding: 20px;
    .editRolePermisson-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .roleForm {
      margin-top: 30px;
      .role-name {
        input {
          padding: 14px;
        }
      }
      .permissons {
        margin-top: 30px;
        gap: 20px;
        .permissons-boxes {
          gap: 20px;
          .permisson-box {
            gap: 16px;
            padding: 10px;
            h2 {
              padding: 14px;
              font-size: 15px;
              line-height: 20px;
            }
            .permisson-list {
              gap: 14px;
              .permisson-item {
                input {
                  width: 18px;
                  height: 18px;
                  min-width: 18px;
                }
                label {
                  font-size: 13px;
                  line-height: 16px;
                }
              }
            }
          }
        }
      }
      .saveForm {
        margin-top: 40px;
        padding: 12px 24px;
        font-size: 15px;
      }
    }
  }
  .viewRolePermisson-container {
    padding: 20px;
    .viewRolePermisson-container-head {
      h1 {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .roleForm {
      margin-top: 30px;
      .role-name {
        input {
          padding: 14px;
        }
      }
      .permissons {
        margin-top: 30px;
        gap: 20px;
        .permissons-boxes {
          gap: 20px;
          .permisson-box {
            gap: 16px;
            padding: 10px;
            h2 {
              padding: 14px;
              font-size: 15px;
              line-height: 20px;
            }
            .permisson-list {
              gap: 14px;
              .permisson-item {
                input {
                  width: 18px;
                  height: 18px;
                  min-width: 18px;
                }
                label {
                  font-size: 13px;
                  line-height: 16px;
                }
              }
            }
          }
        }
      }
      .saveForm {
        margin-top: 40px;
        padding: 12px 24px;
        font-size: 15px;
      }
    }
  }

  /*============== Role Management ==================*/
  .roleManagement-container {
    padding: 20px 20px 0;
    .roleManagement-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewRoleManagement {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .roleManagement-body {
      margin-top: 20px;
      padding: 20px 16px;
      .roleManagement-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .roleManagement-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .activeRole {
                  gap: 6px;
                  min-width: 90px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .deactiveRole {
                  gap: 6px;
                  min-width: 90px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .add-roleManagement-container {
    .add-roleManagement {
      max-width: 580px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddRoleManagement {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 32px;
        .form-items {
          gap: 16px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              gap: 10px;
              padding: 12px 16px;
            }
            select {
              padding: 12px 16px;
            }
          }
        }
        .submit {
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-roleManagement-container {
    .edit-roleManagement {
      max-width: 580px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditRoleManagement {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 32px;
        .form-items {
          gap: 16px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              gap: 10px;
              padding: 12px 16px;
            }
            select {
              padding: 12px 16px;
            }
          }
        }
        .submit {
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }

  /*============== Oil Change Type ==================*/
  .oilChangeType-container {
    padding: 20px 20px 0;
    .oilChangeType-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
      .head-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        .export_excel {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
        .addNewOilChangeType {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .oilChangeType-body {
      margin-top: 20px;
      padding: 20px 16px;
      .oilChangeType-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
        .modul-search {
          gap: 8px;
          padding: 6px 8px;
          .search_btn {
            width: 22px;
            height: 22px;
            min-width: 22px;
          }
        }
      }
      .oilChangeType-table {
        margin-top: 40px;
        table {
          th {
            font-size: 16px;
            line-height: 24px;
            padding: 0 8px 12px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          td {
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
            &:first-child {
              padding-left: 0;
            }
            &:last-child {
              padding-right: 0;
            }
          }
          tbody {
            tr {
              td {
                .activeOilType {
                  gap: 6px;
                  min-width: 90px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .deactiveOilType {
                  gap: 6px;
                  min-width: 90px;
                  font-size: 13px;
                  line-height: 16px;
                  span {
                    width: 8px;
                    height: 8px;
                    min-width: 8px;
                  }
                }
                .action {
                  .action-links {
                    .action-link {
                      font-size: 15px;
                      line-height: 22px;
                      padding: 8px 6px;
                      img {
                        width: 19px;
                        height: 19px;
                        min-width: 19px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .add-oilChangeType-container {
    .add-oilChangeType {
      max-width: 580px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeAddOilChangeType {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 32px;
        .form-items {
          gap: 16px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              gap: 10px;
              padding: 12px 16px;
            }
            select {
              padding: 12px 16px;
            }
          }
        }
        .submit {
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
  .edit-oilChangeType-container {
    .edit-oilChangeType {
      max-width: 580px;
      padding: 30px 20px;
      h2 {
        font-size: 28px;
        line-height: 36px;
      }
      .closeEditOilChangeType {
        width: 24px;
        height: 24px;
        min-width: 24px;
        top: 16px;
        right: 16px;
      }
      form {
        margin-top: 20px;
        gap: 32px;
        .form-items {
          gap: 16px;
          .form-item {
            gap: 8px;
            label {
              font-size: 14px;
              line-height: 20px;
            }
            .form-input {
              gap: 10px;
              padding: 12px 16px;
            }
            select {
              padding: 12px 16px;
            }
          }
        }
        .submit {
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }

  /*============== Profile ==================*/
  .profile-container {
    padding: 20px;
    .profile-container-head {
      h1 {
        font-size: 28px;
        line-height: 36px;
      }
    }
    .profile-body {
      margin-top: 20px;
      padding: 30px;
      .profile-body-head {
        h2 {
          font-size: 18px;
          line-height: 24px;
        }
      }
      .profileForm {
        max-width: 100%;
        margin-top: 20px;
        gap: 20px;
        .form-items {
          gap: 20px;
        }
        .form-item {
          gap: 8px;
          label {
            font-size: 14px;
            line-height: 20px;
          }
          .form-input {
            gap: 10px;
            padding: 12;
            .password-eye {
              width: 20px;
              height: 20px;
              min-width: 20px;
            }
          }
          select {
            padding: 12px;
          }
        }
        .saveProfile {
          padding: 10px 24px;
          gap: 8px;
          font-size: 15px;
          line-height: 22px;
          svg {
            min-width: 22px;
            width: 22px;
            height: 22px;
          }
        }
      }
    }
  }

  .error-page-container {
    padding: 70px 20px;
    .error-page {
      max-width: 670px;
      img {
        max-width: 480px;
      }
      h2 {
        margin-top: 40px;
        font-size: 36px;
        line-height: 44px;
      }
      p {
        margin: 16px auto 0;
        font-size: 15px;
        line-height: 22px;
      }
      .goBack {
        margin: 24px auto 0;
        padding: 10px 44px;
        font-size: 15px;
        line-height: 22px;
      }
    }
  }

  .entry-container {
    .entry-box {
      max-width: 600px;
      padding: 40px 60px 70px;
      .logo {
        width: 120px;
        height: 120px;
        min-width: 120px;
      }
      .box-title {
        font-size: 24px;
        line-height: 32px;
        margin-top: 20px;
      }
      form {
        margin-top: 32px;
        .form-inputs {
          gap: 20px;
          input {
            padding: 10px 18px;
          }
        }
        .form-bottom {
          margin-top: 12px;
        }
        .submitBtn {
          margin-top: 40px;
          padding: 10px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
}

@media only screen and (max-width: 992px) {
  .crm-container {
    display: flex;
    align-items: start;
  }
  .aside-container {
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    padding-right: 8px;
    z-index: 5;
    transition: 0.35s ease-in-out;
    .closeAside {
      display: flex;
    }
    &::-webkit-scrollbar {
      width: 4px;
      border-radius: 6px;
    }
    &::-webkit-scrollbar-thumb {
      width: 4px;
      border-radius: 6px;
      background: #4679ef;
    }
    .crm-logo {
      width: 130px;
    }
    .aside-menu {
      .menuLink {
        .right-title-box {
          display: none;
        }
      }
      .aside-dropdown {
        .asideDownBtn {
          .asideDownBtn-inner {
            svg {
              margin-left: auto;
            }
          }
        }
        .aside-dropdown-links {
          .dropdown-links-inner {
            max-height: 130px;
          }
        }
        .right-title-box {
          display: none;
        }
      }
      .aside-settings {
        margin-top: 0;
      }
      .exitProfile {
        .right-title-box {
          display: none;
        }
      }
    }
  }
  .short-aside {
    grid-template-columns: none;
    transition: 0.3s ease-in-out;
    .aside-container {
      padding: 20px 0 30px;
      padding-right: 8px;
      left: 0;
      .crm-logo {
        width: 130px;
      }
      .aside-menu {
        margin-top: 30px;
        .menuLink {
          .menuLink-inner {
            gap: 12px;
            p {
              width: auto;
              overflow: visible;
            }
          }
          .right-title-box {
            display: none;
          }
        }
        .aside-dropdown {
          .asideDownBtn {
            .asideDownBtn-inner {
              gap: 10px;
              p {
                width: auto;
                overflow: visible;
              }
            }
          }
          .aside-dropdown-links {
            display: flex;
          }
          .right-title-box {
            display: none;
          }
        }
        .aside-dropdown.active {
          gap: 12px;
          .asideDownBtn {
            .asideDownBtn-inner {
              svg {
                transform: rotate(180deg);
              }
            }
          }
          .aside-dropdown-links {
            height: auto;
            overflow: initial;
          }
        }
        .exitProfile {
          .exitProfile-inner {
            p {
              width: auto;
              overflow: visible;
            }
          }
          .right-title-box {
            display: none;
          }
        }
      }
    }
  }
  .pagination-result {
    padding: 12px 20px;
    justify-content: center;
    .result-text {
      display: none;
    }
    .pagination-result-right {
      .show_count {
        display: none;
      }
    }
  }
  .generalSearch {
    .form_inner {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

@media only screen and (max-width: 768px) {
  .header {
    .header-left {
      max-width: max-content;
      .header-search {
        display: none;
      }
    }
    .header-right {
      .header-notification {
        .notification-list {
          width: 220px;
          top: 55px;
        }
      }
      .header-notification.active {
        .notification-list {
          top: 45px;
        }
      }
      .header-user {
        .header-user-btn {
          gap: 12px;
          .userBody {
            display: none;
          }
        }
        .header-user-body {
          top: 60px;
          width: 120px;
        }
      }
      .header-user.active {
        .header-user-body {
          top: 50px;
        }
      }
    }
  }
  .generalSearch {
    .form_inner {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  /*============== Dashboard ==================*/
  .dashboard-continer {
    .dashboard-boxes {
      grid-template-columns: repeat(2, 1fr);
    }
    .today_notifications_container {
      .today_notifications {
        flex-direction: column;
        .calendar {
          width: 100%;
          min-width: 0;
          padding: 20px 14px;
          .calendar-grid {
            .current-month {
              width: auto;
              position: relative;
              z-index: 2;
            }
            .current-month.active {
              background: transparent;
              &::after {
                content: "";
                position: absolute;
                width: 28px;
                height: 28px;
                min-width: 28px;
                border-radius: 100px;
                background: #fb6141;
                z-index: -1;
              }
            }
          }
        }
        .today_notifications_boxes {
          width: 100%;
        }
      }
    }
    .chart-items {
      gap: 20px;
      .chart-item {
        padding: 20px 20px 30px;
        .chart-item-head {
          padding-bottom: 20px;
        }
      }
    }
  }

  /*============== Payments ==================*/
  .payments-container {
    .payments-container-head {
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
    }
    .payments-body {
      .payments-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }
  .viewPayments-container {
    .viewPayments-body {
      margin-top: 20px;
      padding: 20px;
      .viewPayments-form {
        .form-items {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }

  /*============== Drivers ==================*/
  .drivers-container {
    .drivers-container-head {
      flex-direction: column;
      align-items: start;
      gap: 16px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        margin-left: 0;
        gap: 16px;
      }
    }
    .drivers-body {
      .drivers-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }
  .viewDrivers-container {
    .viewDrivers-body {
      margin-top: 20px;
      padding: 20px;
      .viewDrivers-form {
        .form-items {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
        .driver-document-images {
          margin-top: 20px;
          grid-template-columns: repeat(1, 1fr);
          .document-box {
            .document-list {
              padding: 12px;
              gap: 12px;
              .document-item {
                gap: 16px;
                .document-title {
                  gap: 12px;
                  img {
                    width: 28px;
                    height: 28px;
                    min-width: 28px;
                  }
                  p {
                    font-size: 12px;
                    line-height: 14px;
                  }
                }
                .document-actions {
                  gap: 8px;
                  .viewDocument,
                  .deleteDocument {
                    width: 22px;
                    height: 22px;
                    min-width: 22px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  /*============== Notifications ==================*/
  .notification-container {
    .notification-container-head {
      flex-direction: column;
      align-items: start;
      gap: 16px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        margin-left: 0;
        gap: 16px;
      }
    }
    .notification-body {
      .notification-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }

  .viewNotification-container {
    .viewNotification-body {
      margin-top: 20px;
      padding: 20px;
      .viewNotification-form {
        grid-template-columns: repeat(1, 1fr);
      }
    }
  }

  /*============== Ban Type==================*/
  .banType-container {
    .banType-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .banType-body {
      .banType-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }

  /*============== Brand ==================*/
  .brand-container {
    .brand-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .brand-body {
      .brand-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }

  /*============== Model ==================*/
  .model-container {
    .model-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .model-body {
      .model-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }

  /*============== Auto ==================*/
  .auto-container {
    .auto-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .auto-body {
      .auto-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }
  .viewAuto-container {
    .viewAuto-body {
      margin-top: 20px;
      padding: 20px;
      .viewAuto-form {
        gap: 16px;
        .form-items {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }

  /*============== Penalty ==================*/
  .penalty-container {
    .penalty-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .penalty-body {
      .penalty-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }
  .viewPenalty-container {
    .viewPenalty-body {
      margin-top: 20px;
      padding: 20px;
      .viewPenalty-form {
        gap: 16px;
        .form-items {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }

  /*============== Oil Change ==================*/
  .oilChange-container {
    .oilChange-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .oilChange-body {
      .oilChange-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }
  .viewOilChange-container {
    .viewOilChange-body {
      margin-top: 20px;
      padding: 20px;
      .viewOilChange-form {
        gap: 16px;
        .form-items {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
        .document-box {
          .document-list {
            padding: 12px;
            gap: 12px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
      }
    }
  }

  /*============== Credit ==================*/
  .credit-container {
    .credit-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .credit-body {
      .credit-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
      .payDesc {
        gap: 6px;
        flex-direction: column;
        align-items: end;
      }
    }
  }
  .viewCredit-container {
    .viewCredit-body {
      margin-top: 20px;
      padding: 20px;
      .viewCredit-form {
        gap: 16px;
        .form-items {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }

  /*============== Technical review ==================*/
  .technical-container {
    .technical-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .technical-body {
      .technical-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }
  .viewTechnical-container {
    .viewTechnical-body {
      margin-top: 20px;
      padding: 20px;
      .viewTechnical-form {
        .form-items {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
        .document-box {
          .document-list {
            padding: 12px;
            gap: 12px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
      }
    }
  }

  /*============== Insurance ==================*/
  .insurance-container {
    .insurance-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .insurance-body {
      .insurance-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }
  .viewInsurance-container {
    .viewInsurance-body {
      margin-top: 20px;
      padding: 20px;
      .viewInsurance-form {
        .form-items {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
        .document-box {
          .document-list {
            padding: 12px;
            gap: 12px;
            .document-item {
              gap: 16px;
              .document-title {
                gap: 12px;
                img {
                  width: 28px;
                  height: 28px;
                  min-width: 28px;
                }
                p {
                  font-size: 12px;
                  line-height: 14px;
                }
              }
              .document-actions {
                gap: 8px;
                .viewDocument,
                .deleteDocument {
                  width: 22px;
                  height: 22px;
                  min-width: 22px;
                }
              }
            }
          }
        }
      }
    }
  }

  /*============== Leasing ==================*/
  .leasing-container {
    .leasing-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .leasing-body {
      .leasing-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }
  .viewLeasing-container {
    .viewLeasing-body {
      margin-top: 20px;
      padding: 20px;
      .viewLeasing-tabs {
        max-width: 100%;
        gap: 20px;
        .leasing_tab {
          font-size: 14px;
          line-height: 20px;
          padding-bottom: 4px;
        }
      }
      .viewLeasing_content {
        gap: 16px;
        .form-items {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
      }
      .driverInfoContent {
        .driver-document-images {
          grid-template-columns: repeat(1, 1fr);
          .document-box {
            .document-list {
              padding: 12px;
              gap: 12px;
              .document-item {
                gap: 16px;
                .document-title {
                  gap: 12px;
                  img {
                    width: 28px;
                    height: 28px;
                    min-width: 28px;
                  }
                  p {
                    font-size: 12px;
                    line-height: 14px;
                  }
                }
                .document-actions {
                  gap: 8px;
                  .viewDocument,
                  .deleteDocument {
                    width: 22px;
                    height: 22px;
                    min-width: 22px;
                  }
                }
              }
            }
          }
        }
      }
      .leasingInfoContent {
        .documents {
          .document-box {
            .document-list {
              padding: 12px;
              gap: 12px;
              .document-item {
                gap: 16px;
                .document-title {
                  gap: 12px;
                  img {
                    width: 28px;
                    height: 28px;
                    min-width: 28px;
                  }
                  p {
                    font-size: 12px;
                    line-height: 14px;
                  }
                }
                .document-actions {
                  gap: 8px;
                  .viewDocument,
                  .deleteDocument {
                    width: 22px;
                    height: 22px;
                    min-width: 22px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  /*============== Deposits ==================*/
  .deposits-container {
    .deposits-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .deposits-body {
      .deposits-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }
  .viewDeposits-container {
    .viewDeposits-body {
      margin-top: 20px;
      padding: 20px;
      .viewDeposits-form {
        gap: 16px;
        .form-items {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }

  /*============== Expenses ==================*/
  .expenses-container {
    .expenses-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .expenses-body {
      .expenses-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }
  .viewExpenses-container {
    .viewExpenses-body {
      margin-top: 20px;
      padding: 20px;
      .viewExpenses-form {
        gap: 16px;
        .form-items {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }

  /*============== Revenue ==================*/
  .revenue-container {
    .revenue-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .revenue-body {
      .revenue-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }
  .viewRevenue-container {
    .viewRevenue-body {
      margin-top: 20px;
      padding: 20px;
      .viewRevenue-form {
        gap: 16px;
        .form-items {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }

  /*============== Cashbox ==================*/
  .cashbox-container {
    .cashbox-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .cashbox-body {
      .cashbox-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }
  .viewCashbox-container {
    .viewCashbox-body {
      margin-top: 20px;
      padding: 20px;
      .viewCashbox-form {
        gap: 16px;
        .form-items {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }

  /*============== Debt ==================*/
  .debt-container {
    .debt-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .debt-body {
      .debt-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }
  .viewDebt-container {
    .viewDebt-body {
      margin-top: 20px;
      padding: 20px;
      .viewDebt-form {
        gap: 16px;
        .form-items {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }

  /*============== Users ==================*/
  .users-container {
    .users-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .users-body {
      .users-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }
  .viewUser-container {
    .viewUser-body {
      margin-top: 20px;
      padding: 20px;
      .viewUser-form {
        gap: 16px;
        .form-items {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  /*============== Logo Management ==================*/
  .logoManagement-container {
    .logoManagement-container-head {
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
    }
  }

  /*============== Role Permission ==================*/
  .rolePermission-container {
    .rolePermission-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .rolePermission-body {
      padding-bottom: 40px;
      .rolePermission-table {
        table {
          tbody {
            tr {
              td {
                .action-links {
                  gap: 14px;
                  .action-link {
                    min-width: 20px;
                    width: 20px;
                    height: 20px;
                  }
                }
                .table_role_items {
                  min-width: 252px;
                }
              }
            }
          }
        }
      }
    }
  }

  /*============== Role Management ==================*/
  .roleManagement-container {
    .roleManagement-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .roleManagement-body {
      .roleManagement-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }

  /*============== Oil Change Type ==================*/
  .oilChangeType-container {
    .oilChangeType-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
      .head-buttons {
        gap: 16px;
      }
    }
    .oilChangeType-body {
      .oilChangeType-body-head {
        flex-direction: column;
        gap: 10px;
        align-items: start;
        .modul-search {
          max-width: 100%;
        }
      }
    }
  }

  /*============== Profile ==================*/
  .profile-container {
    .profile-container-head {
      h1 {
        font-size: 24px;
        line-height: 32px;
      }
    }
    .profile-body {
      padding: 20px;
      .profileForm {
        gap: 16px;
        .form-items {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }

  .entry-container {
    .entry-box {
      max-width: 100%;
      padding: 30px 20px;

      form {
        .submitBtn {
          margin-top: 30px;
        }
      }
    }
  }
}

@media only screen and (max-width: 575px) {
  .generalSearch {
    .form_inner {
      grid-template-columns: repeat(1, 1fr);
      gap: 14px;
      .form_item {
        gap: 6px;
        label {
          font-size: 12px;
          line-height: 16px;
        }
        input {
          border-radius: 10px;
          padding: 8px 12px;
        }
        select {
          border-radius: 10px;
          padding: 8px 12px;
        }
      }
    }
  }
  .aside-container {
    width: 100%;
  }
  .dashboard-continer {
    .dashboard-boxes {
      grid-template-columns: repeat(1, 1fr);
    }
    .today_notifications_container {
      .today_notifications {
        .today_notifications_boxes {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .payments-container {
    .payments-container-head {
      flex-direction: column;
      align-items: start;
      gap: 12px;
    }
  }
  .add-driver-container {
    .add-driver {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
        .upload-box {
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            flex-direction: column;
            align-items: center;
            .box-text {
              align-items: center;
            }
            .selectFileTxt {
              margin-left: 0;
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
  .edit-driver-container {
    .edit-driver {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
        .upload-box {
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            flex-direction: column;
            align-items: center;
            .box-text {
              align-items: center;
            }
            .selectFileTxt {
              margin-left: 0;
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
  .payment-driver-container {
    .payment-driver {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .add-notification-container {
    .add-notification {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-filter-container {
          .form-filter {
            gap: 20px;
            flex-direction: column;
            align-items: start;
          }
        }
      }
    }
  }
  .send-notification-container {
    .send-notification {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
        .upload-box {
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            flex-direction: column;
            align-items: center;
            .box-text {
              align-items: center;
            }
            .selectFileTxt {
              margin-left: 0;
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
  .add-banType-container {
    .add-banType {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
    }
  }
  .edit-banType-container {
    .edit-banType {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
    }
  }
  .add-brand-container {
    .add-brand {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
    }
  }
  .edit-brand-container {
    .edit-brand {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
    }
  }
  .add-auto-container {
    .add-auto {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .edit-auto-container {
    .edit-auto {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .add-penalty-container {
    .add-penalty {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .edit-penalty-container {
    .edit-penalty {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .payment-penalty-container {
    .payment-penalty {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .add-oilChange-container {
    .add-oilChange {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
        .upload-box {
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            flex-direction: column;
            align-items: center;
            .box-text {
              align-items: center;
            }
            .selectFileTxt {
              margin-left: 0;
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
  .edit-oilChange-container {
    .edit-oilChange {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        margin-top: 20px;
        gap: 16px;
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
        .upload-box {
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            flex-direction: column;
            align-items: center;
            .box-text {
              align-items: center;
            }
            .selectFileTxt {
              margin-left: 0;
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
  .add-credit-container {
    .add-credit {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .edit-credit-container {
    .edit-credit {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .add-technical-container {
    .add-technical {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
        .upload-box {
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            flex-direction: column;
            align-items: center;
            .box-text {
              align-items: center;
            }
            .selectFileTxt {
              margin-left: 0;
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
  .edit-technical-container {
    .edit-technical {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
        .upload-box {
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            flex-direction: column;
            align-items: center;
            .box-text {
              align-items: center;
            }
            .selectFileTxt {
              margin-left: 0;
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
  .payment-technical-container {
    .payment-technical {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .add-insurance-container {
    .add-insurance {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
        .upload-box {
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            flex-direction: column;
            align-items: center;
            .box-text {
              align-items: center;
            }
            .selectFileTxt {
              margin-left: 0;
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
  .edit-insurance-container {
    .edit-insurance {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
        .upload-box {
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            flex-direction: column;
            align-items: center;
            .box-text {
              align-items: center;
            }
            .selectFileTxt {
              margin-left: 0;
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
  .payment-insurance-container {
    .payment-insurance {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .add-leasing-container {
    .add-leasing {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
        .upload-box {
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            flex-direction: column;
            align-items: center;
            .box-text {
              align-items: center;
            }
            .selectFileTxt {
              margin-left: 0;
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
  .edit-leasing-container {
    .edit-leasing {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
        .upload-box {
          .add_file_box {
            padding: 8px 16px;
            gap: 10px;
            flex-direction: column;
            align-items: center;
            .box-text {
              align-items: center;
            }
            .selectFileTxt {
              margin-left: 0;
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
  .add-deposits-container {
    .add-deposits {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .edit-deposits-container {
    .edit-deposits {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .add-expenses-container {
    .add-expenses {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .edit-expenses-container {
    .edit-expenses {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .add-revenue-container {
    .add-revenue {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .edit-revenue-container {
    .edit-revenue {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .add-cashbox-container {
    .add-cashbox {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .edit-cashbox-container {
    .edit-cashbox {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .add-debt-container {
    .add-debt {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .edit-debt-container {
    .edit-debt {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .add-user-container {
    .add-user {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .edit-user-container {
    .edit-user {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  /*============== Logo Management ==================*/
  .logoManagement-container {
    .logoManagement-body {
      .addLogo {
        gap: 16px;
        .add_file_box {
          gap: 10px;
          flex-direction: column;
          align-items: center;
          .box-text {
            align-items: center;
          }
          .selectFileTxt {
            margin-left: 0;
            margin-top: 12px;
          }
        }
      }
    }
  }

  .addRolePermisson-container {
    .roleForm {
      margin-top: 20px;
      .role-name {
        input {
          padding: 12px;
        }
      }
      .permissons {
        margin-top: 20px;
        gap: 16px;
        .permissons-boxes {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
      }
      .saveForm {
        margin-top: 30px;
      }
    }
  }
  .editRolePermisson-container {
    .roleForm {
      margin-top: 20px;
      .role-name {
        input {
          padding: 12px;
        }
      }
      .permissons {
        margin-top: 20px;
        gap: 16px;
        .permissons-boxes {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
      }
      .saveForm {
        margin-top: 30px;
      }
    }
  }
  .viewRolePermisson-container {
    .roleForm {
      margin-top: 20px;
      .role-name {
        input {
          padding: 12px;
        }
      }
      .permissons {
        margin-top: 20px;
        gap: 16px;
        .permissons-boxes {
          gap: 16px;
          grid-template-columns: repeat(1, 1fr);
        }
      }
      .saveForm {
        margin-top: 30px;
      }
    }
  }
  .add-roleManagement-container {
    .add-roleManagement {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
    }
  }
  .edit-roleManagement-container {
    .edit-roleManagement {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
    }
  }
  .add-oilChangeType-container {
    .add-oilChangeType {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
    }
  }
  .edit-oilChangeType-container {
    .edit-oilChangeType {
      max-width: 100%;
      h2 {
        font-size: 24px;
        line-height: 32px;
      }
    }
  }

  .error-page-container {
    padding: 40px 20px;
    .error-page {
      max-width: 100%;
      img {
        max-width: 330px;
      }
      h2 {
        margin-top: 30px;
        font-size: 32px;
        line-height: 40px;
      }
      p {
        margin: 14px auto 0;
      }
      .goBack {
        margin: 20px auto 0;
      }
    }
  }
}

.action-links {
  display: none !important;
}

.action-links.active {
  display: block !important;
}
.dataTables_empty {
  text-align: center !important;
}

.buttons-colvis {
  padding: 12px 28px !important;
  box-shadow: 2px 2px 4px 0px #c3c3c3 !important;
  background: #4679ef !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #fff !important;
  border: none !important;
}

.dataTables_wrapper .dt-buttons {
  float: right !important;
}