:root {
    --white: #ffffff;
    --white-10: rgb(255 255 255 / 10%);
    --white-12: rgb(255 255 255 / 12%);
    --white-80: rgb(255 255 255 / 80%);
    --black: #000000;
    --body-bg: #f3f5f8;
    --text-black: #2c2e3b;
    --text-black-50: rgb(44 46 59 / 50%);
    --main-color: #7f56d9;
    --main-color-20: rgb(127 86 217 / 20%);
    --para-text: #596680;
    --stroke-color: #e4e6eb;
    --green: #24bb16;
    --yellow: #ffae02;
    --blue: #0084ff;
    --gray: #808080;
    --red: #ff4e4e;
    --bg-color: #f3f5f8;
    --input-color: #fafbfc;
    --cancel-color: #ebedf0;
    --stroke-2-color: #eef0f3;
    --green-light: #e9f8e8;
    --yellow-light: #fff5df;
    --blue-light: #e6f2fd;
    --red-light: #f8e8e8;
    --purple-light: #f3f1ff;
    --secondary-color: #f5f7fa;
    --scroll-track: #efefef;
    --scroll-thumb: #dadada;
    --sidebar-hover: #282f3e;
    --sidebar-shadow: #3e4a64;
    --sidebar-text-color: #929bac;
    --sidebar-hover-icon: #7f56d9;
    --header-text: #929bac;
    --header-search-bg: #2e384d;
    --bg-fliter: #3e1597;
    --color1: #1f242e;
    --color2: #1d2840;
    --color3: #e9edf5;
    --color4: #d956cc;
    --color5: #3ab8ff;
    --color6: #4a3aff;
    --color7: #56d1d9;
    --color8: #d3d9e5;
    --color9: #eaeaea;
    --color10: #000f30;
    --color11: #0e141f;
    --color12: #b7b8bc;
  }

  // Font Family
  $inter-tight: "Inter Tight", sans-serif;
  $bodyFont: $inter-tight;
  $bodyText: var(--para-text);
  $transition: all 0.3s;
  // Font Weight
  $fw_thin: 100;
  $fw_extraLight: 200;
  $fw_light: 300;
  $fw_regular: 400;
  $fw_medium: 500;
  $fw_semiBold: 600;
  $fw_bold: 700;
  $fw_extraBold: 800;
  $fw_black: 900;
  $fw_weight: 1000;
  // Color
  $white: var(--white);
  $white-10: var(--white-10);
  $white-12: var(--white-12);
  $white-80: var(--white-80);
  $black: var(--black);
  $body-bg: var(--body-bg);
  $text-black: var(--text-black);
  $text-black-50: var(--text-black-50);
  $main-color: var(--main-color);
  $main-color-20: var(--main-color-20);
  $para-text: var(--para-text);
  $stroke-color: var(--stroke-color);
  $green: var(--green);
  $yellow: var(--yellow);
  $blue: var(--blue);
  $gray: var(--gray);
  $red: var(--red);
  $bg-color: var(--bg-color);
  $input-color: var(--input-color);
  $cancel-color: var(--cancel-color);
  $stroke-2-color: var(--stroke-2-color);
  $green-light: var(--green-light);
  $yellow-light: var(--yellow-light);
  $blue-light: var(--blue-light);
  $red-light: var(--red-light);
  $purple-light: var(--purple-light);
  $secondary-color: var(--secondary-color);
  $scroll-track: var(--scroll-track);
  $scroll-thumb: var(--scroll-thumb);
  $sidebar-hover: var(--sidebar-hover);
  $sidebar-shadow: var(--sidebar-shadow);
  $sidebar-text-color: var(--sidebar-text-color);
  $sidebar-hover-icon: var(--sidebar-hover-icon);
  $header-text: var(--header-text);
  $header-search-bg: var(--header-search-bg);
  $bg-fliter: var(--bg-fliter);
  $color1: var(--color1);
  $color2: var(--color2);
  $color3: var(--color3);
  $color4: var(--color4);
  $color5: var(--color5);
  $color6: var(--color6);
  $color7: var(--color7);
  $color8: var(--color8);
  $color9: var(--color9);
  $color10: var(--color10);
  $color11: var(--color11);
  $color12: var(--color12);

  // Fonts
  @import "../component/font";
  // Color
  @import "../component/color";
  // Padding
  @import "../component/padding";
  // Margin
  @import "../component/margin";
  // Gap
  @import "../component/gap";
  // Width
  @import "../component/width";
  // Border
  @import "../component/border";
  // Select
  @import "../component/zSelect";
  // Table
  @import "../component/zTable";
  // Form
  @import "../component/zForm";
  // Component
  @import "../component/component";
  // Button
  @import "../component/button";
  // Hover
  @import "../component/hover";
  // Sidebar
  @import "../component/sidebar";
  // Tabs
  @import "../component/zTabs";
  // Landing page
  @import "../component/landing-page";

  html,
  body {
    height: 100%;
    font-family: $bodyFont;
    background-color: $body-bg;
    color: $bodyText;
    transition: $transition;
    // overflow-x: hidden;
    scroll-behavior: smooth;
  }
  * {
    transition: $transition;
  }

  iframe {
    border: none;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 0 !important;
  }

  p {
    margin: 0 !important;
  }

  a,
  b,
  div,
  ul,
  li {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -moz-outline-: none;
    -webkit-transition: $transition;
    -o-transition: $transition;
    transition: $transition;
  }

  input,
  input:hover,
  input:focus,
  input:active,
  textarea,
  textarea:hover,
  textarea:focus,
  textarea:active,
  select:focus,
  select:hover {
    -moz-outline: none;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  button,
  button:hover,
  button:focus,
  button:active {
    -moz-outline: none;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  // img:not([draggable]),
  embed,
  object,
  video {
    max-width: 100%;
    height: auto;
  }

  a {
    text-decoration: none;
    outline: 0;
  }

  a:active,
  a:focus,
  a:hover,
  a:visited {
    text-decoration: none;
    outline: 0;
  }

  :focus {
    outline: none;
  }

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

  button:focus {
    outline: none;
    box-shadow: none !important;
  }

  .zScrollbar-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .btn.focus,
  .btn:focus {
    border: 1px solid transparent;
  }

  .form-control:focus,
  .btn.focus,
  .btn:focus {
    color: #495057;
    background-color: #fff;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  a:focus {
    outline: 0px solid;
  }

  a {
    text-decoration: none;
  }

  a:hover {
    color: var(--primary-color);
    text-decoration: none;
  }

  a:active,
  a:hover {
    outline: 0 none;
    color: var(--hover-color);
  }

  ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
  }

  .clear {
    clear: both;
  }

  .rotate-n-45 {
    transform: rotate(-45deg);
  }

  /* Data Background */
  [data-background] {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  /* Number Input Increase/Decrease button */
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type="number"] {
    appearance: textfield;
  }
  /* Select2 */
  .select2-container {
    width: 100% !important;
    &:focus-visible {
      outline: none;
    }
    .selection {
      &:focus-visible {
        outline: none;
      }
      .select2-selection {
        &:focus-visible {
          outline: none;
        }
        .select2-selection__rendered {
          &:focus-visible {
            outline: none;
          }
        }
      }
    }
  }
  .select2-selection {
    outline: none !important;
  }
  .sf-select-section {
    height: 40px;
    border-radius: 8px !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    &.select2-selection--single {
      background-color: $secondary-color;
      border: 1px solid $secondary-color !important;
      border-radius: 8px !important;
      padding-bottom: 0 !important;
      padding-right: 0 !important;
      min-height: 40px;
      &:focus,
      &:hover {
        border: 1px solid #dadee7;
      }
      .select2-selection__rendered {
        color: $text-black;
        line-height: 40px;
        font-size: 14px;
        font-weight: 400;
        padding-left: 10px;
        padding-right: 30px;
      }
      .select2-selection__arrow {
        height: 40px !important;
        top: 0 !important;
        right: 5px !important;
        b {
          border-width: 0 !important;
          background-image: url(../images/icon/angle-down.svg);
          width: 12px !important;
          height: 7px !important;
          background-repeat: no-repeat;
          -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
          -webkit-transition: all 0.3s;
          -o-transition: all 0.3s;
          transition: all 0.3s;
        }
      }
    }
    &.select2-selection--multiple {
      border: 1px solid #dadee7 !important;
      .select2-selection__rendered {
        .select2-selection__choice {
          margin-top: 9px;
          background-color: red !important;
          border-color: red !important;
          color: red !important;
          &:not(:first-child) {
            margin-left: toRem(10);
          }
          .select2-selection__choice__remove {
            border-color: red !important;
            color: red;
          }
        }
      }
    }
  }
  .sf-select-dropdown {
    border-color: $color3 !important;
    border-radius: toRem(6) !important;
    background-color: $white;
    box-shadow: 0px 10px 20px -5px rgba(163, 177, 204, 0.2), 0px 0px 10px 0px rgba(163, 177, 204, 0.12);
    padding: toRem(10) 0 0;
    z-index: 1057;
    min-width: toRem(100);
    .select2-search--dropdown {
      padding: 0;
      margin-bottom: toRem(10);
      .select2-search__field {
        border-color: red;
        border-radius: toRem(12);
        @include fontFamily(12, $fw_semiBold, 16, red);
        padding: toRem(10);
        &:focus {
          @include fontFamily(12, $fw_semiBold, 16, red);
        }
      }
    }
    .select2-results__options {
      &::-webkit-scrollbar {
        width: 6px;
      }
      &::-webkit-scrollbar-track {
        background: #efefef;
        border-radius: 50px;
      }
      &::-webkit-scrollbar-thumb {
        background: #dadada;
        border-radius: 50px;
      }
      .select2-results__option {
        padding: 0 toRem(15);
        margin-bottom: toRem(7);
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        color: $para-text;
        border-radius: 0;
        &:last-child {
          margin-bottom: 0;
        }
        &.select2-results__option--highlighted,
        &.select2-results__option--selected {
          background-color: $purple-light;
          color: $main-color;
        }
      }
    }
  }
  .cs-select {
    &-1 {
      ~ .select2-container {
        .sf-select-section {
          &.select2-selection--single {
            min-height: 29px;
            .select2-selection__rendered {
              font-weight: $fw_medium;
              line-height: 29px;
              padding-left: 9px;
              padding-right: 32px;
            }
            .select2-selection__arrow {
              height: 29px !important;
              right: 9px !important;
            }
          }
        }
      }
    }
    &-form {
      ~ .select2-container {
        .sf-select-section {
          &.select2-selection--single {
            background-color: $input-color;
            border-color: $stroke-color !important;
          }
        }
      }
    }
  }
  /* Datatable */
  .tableTop {
    padding-bottom: toRem(20);
  }
  .tableBottom {
    padding-top: toRem(20);
  }
  .tableLengthInput {
    @media screen and (max-width: 575px) {
      float: none !important;
    }
    label {
      display: flex;
      align-items: center;
      gap: 13px;
      @include fontFamily(14, $fw_regular, 17, $para-text);
      @media screen and (max-width: 575px) {
        justify-content: center;
      }
    }
    select {
      border: toRem(1) solid var(--black-5) !important;
      border-radius: toRem(8) !important;
      background-color: $input-color !important;
      padding: toRem(11) toRem(15) !important;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      @include fontFamily(18, $fw_medium, 22, $text-black !important);
      text-align: center;
    }
  }
  .tableInfo {
    .dataTables_info {
      @include fontFamily(14, $fw_regular, 17, $para-text);
      padding-top: 0;
    }
  }
  .tablePagi {
    .paginate_button {
      padding: toRem(6) toRem(10) !important;
      border: toRem(1) solid $stroke-color !important;
      border-radius: toRem(6) !important;
      background: $white !important;
      width: toRem(30);
      height: toRem(30);
      font-size: toRem(14);
      font-weight: $fw_regular;
      line-height: toRem(17) !important;
      color: $para-text !important;
      margin-left: toRem(8) !important;
      &.current,
      &:hover {
        color: $white !important;
        background: $main-color !important;
        border-color: $main-color !important;
      }
    }
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: red !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
  .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    font-size: toRem(10) !important;
    color: $para-text !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
  .dataTables_wrapper .dataTables_paginate .paginate_button.current,
  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: $white !important;
  }
  /* Main content */
  .zSidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: toRem(250);
    background-color: $color1;
    z-index: 1001;
    transition: all 0.5s ease;
    &[data-background] {
      background-position: center top;
    }
    @media screen and (max-width: 1023px) {
      left: calc(-1 * toRem(250));
    }
  }
  // Mobile Menu
  .mobileMenu {
    position: relative;
    display: none;
    @media screen and (max-width: 1023px) {
      display: block;
    }
  }
  .zSidebar {
    .zSidebar-overlay {
      content: "";
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      background: rgb(0 0 0 / 50%);
      z-index: -1;
    }
    &.menuClose {
      @media screen and (max-width: 1023px) {
        left: 0;
      }
      .zSidebar-overlay {
        opacity: 1;
        visibility: visible;
      }
    }
  }
  // No record block
  .no-record-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: toRem(73) toRem(20);
    .icon {
      width: clamp(toRem(50), toRem(148), toRem(148));
      height: clamp(toRem(50), toRem(148), toRem(148));
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: $secondary-color;
      @include fontFamily(58, $fw_semiBold, 24, $para-text);
      margin-bottom: toRem(24);
    }
    .title {
      @include fontFamily(18, $fw_semiBold, 24, $text-black);
      padding-bottom: toRem(5);
    }
    .info {
      @include fontFamily(14, $fw_regular, 24, $para-text);
      text-align: center;
    }
  }
  .monthlyAffPay {
    @media screen and (max-width: 767px) {
      flex-direction: column;
    }
    .left {
      border-right: toRem(1) solid $stroke-color;
      padding: toRem(59) 0;
      padding-right: toRem(64);
      @media screen and (max-width: 991px) {
        padding-right: toRem(10);
      }
      @media screen and (max-width: 767px) {
        padding-right: 0;
        border-right: 0;
        border-bottom: toRem(1) solid $stroke-color;
        padding: toRem(30);
        width: 100%;
        text-align: center;
      }
    }
  }
  .paymentMethod {
    &-one {
      display: flex;
      gap: toRem(10);
      flex-wrap: wrap;
      .item {
        flex: 1 1 auto;
        padding: 0;
        max-width: toRem(151);
        width: 100%;
        height: toRem(100);
        border: toRem(1) solid $stroke-color;
        border-radius: toRem(10);
        background-color: $input-color;
        display: flex;
        justify-content: center;
        align-items: center;
        &.active {
          border-color: $main-color;
        }
        @media screen and (max-width: 575px) {
          max-width: toRem(137);
        }
      }
    }
    &-two {
      display: flex;
      flex-wrap: wrap;
      gap: toRem(16) toRem(19);
      .item {
        flex: 1 0 auto;
        max-width: toRem(187);
        min-width: toRem(187);
        height: toRem(182);
        border: toRem(1) solid $stroke-color;
        border-radius: toRem(9);
        padding: toRem(24) toRem(18);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        @media screen and (max-width: 991px) {
          max-width: 100%;
          min-width: toRem(180);
        }
        .img {
          max-width: toRem(124);
          max-height: toRem(69);
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .link {
          display: inline-block;
          padding: toRem(13) toRem(25);
          @include fontFamily(16, $fw_semiBold, 19, $main-color);
          border: toRem(1) solid $main-color;
          border-radius: toRem(12);
          white-space: nowrap;
          &:hover {
            background-color: $main-color;
            color: $white;
          }
        }
      }
    }
  }

  // Add plan modal
  // .bilingCycle-open-items {
  //   .bilingCycle-open-item {
  //     display: none;
  //   }
  // }
