button,
input,
textarea {
  border: none;
  outline: none;
  background-color: transparent;
  padding: 0;
}

.link-fix {
  @extend %fix;
  z-index: 3;
}

[class^="btn-gradient"],
[class*=" btn-gradient"] {
  @extend %relative;
  overflow: hidden;
  z-index: 2;

  &::before {
    content: "";
    @extend %absolute;
    @include fix;
    opacity: 0;
    z-index: -1;
    transition: all 0.3s linear;
  }

  &:hover::before {
    opacity: 1;
  }
}

.btn {
  max-width: 159px;
  width: 100%;
  text-align: center;
  display: inline-block;
  height: 48px;
  line-height: 48px;
  @extend %radius-8;
  font-size: 14px;
  font-weight: 500;

  &-gradient {
    &-primary {
      color: #fff;
      background-image: linear-gradient(
        144.99deg,
        #8f2ffd 42.05%,
        #f6509c 111.39%
      );

      &::before {
        background-image: linear-gradient(
          -144.99deg,
          #8f2ffd 42.05%,
          #f6509c 111.39%
        );
      }

      &-2 {
        background-image: linear-gradient(
          157.53deg,
          #8f2ffd 5.26%,
          #48187f 85.37%
        );
        color: #f7efff;

        &::before {
          background-image: linear-gradient(
            -157.53deg,
            #8f2ffd 5.26%,
            #48187f 85.37%
          );
        }
      }

      &-3 {
        background-image: linear-gradient(
          144.99deg,
          #8f2ffd 42.05%,
          #f6509c 111.39%
        );
        color: #f7efff;

        &::before {
          background-image: linear-gradient(
            -144.99deg,
            #8f2ffd 42.05%,
            #f6509c 111.39%
          );
        }
      }

      &-4 {
        background-image: linear-gradient(
          220.81deg,
          #8f2ffd 13.36%,
          #6318b8 77.15%
        );
        color: #fff;

        &::before {
          background-image: linear-gradient(
            -220.81deg,
            #8f2ffd 13.36%,
            #6318b8 77.15%
          );
        }
      }

      &-5 {
        background-image: linear-gradient(
          28.58deg,
          #8f2ffd 31.42%,
          #f6509c 65.17%
        );
        color: #fff;

        &::before {
          background-image: linear-gradient(
            -28.58deg,
            #8f2ffd 31.42%,
            #f6509c 65.17%
          );
        }
      }

      &-6 {
        background-image: linear-gradient(
          135.49deg,
          #f6509c 24.79%,
          #8f2ffd 100.44%
        );
        color: #fff;

        &::before {
          background-image: linear-gradient(
            -135.49deg,
            #f6509c 24.79%,
            #8f2ffd 100.44%
          );
        }
      }

      &-7 {
        background-image: linear-gradient(
          220.81deg,
          #8f2ffd 13.36%,
          #6318b8 77.15%
        );
        color: #fff;

        &::before {
          background-image: linear-gradient(
            -220.81deg,
            #8f2ffd 13.36%,
            #6318b8 77.15%
          );
        }
      }

      &-8 {
        background-image: linear-gradient(
          220.81deg,
          #8f2ffd 13.36%,
          #7622d6 49.09%,
          #6318b8 77.15%
        );
        color: #fff;

        &::before {
          background-image: linear-gradient(
            -220.81deg,
            #8f2ffd 13.36%,
            #7622d6 49.09%,
            #6318b8 77.15%
          );
        }
      }
    }

    &-warning {
      background-image: linear-gradient(
        119.6deg,
        #fa6755 18.12%,
        #fba928 92.35%
      );
      color: #fff;

      &::before {
        background-image: linear-gradient(
          -119.6deg,
          #fa6755 18.12%,
          #fba928 92.35%
        );
      }

      &-2 {
        background-image: linear-gradient(
          152.53deg,
          #fbad25 4.34%,
          #fa4b68 100.46%
        );
        color: #fff;

        &::before {
          background-image: linear-gradient(
            -152.53deg,
            #fbad25 4.34%,
            #fa4b68 100.46%
          );
        }
      }
    }
  }
}

.section-heading {
  margin-bottom: 48px;

  &-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 34px;
    margin-bottom: 21px;
    color: #fff;
    text-shadow: 0 3px 6px rgba(#000, 0.16);

    span {
      color: #acb3c9;
    }
  }

  p {
    line-height: 21px;
    color: #99a1b9;
  }
}

.swiper {
  padding-bottom: 70px;

  &-bottom {
    max-width: fit-content;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;

    > * {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }

  &-button {
    &-next,
    &-prev {
      border-radius: 9px;
      width: 38px;
      height: 38px;
      border: 1px solid #757d91;
      background-color: transparent;
      flex: 0 0 auto;
      z-index: 2;

      &,
      &::before {
        transition: all 0.3s linear;
      }

      &::after {
        font-size: 11px;
        color: #757d91;
      }

      &::before {
        content: "";
        @extend %absolute;
        top: 0;
        left: 0;
        border-radius: 9px;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: linear-gradient(
          135.49deg,
          #8f2ffd 24.79%,
          #f6509c 100.44%
        );
        opacity: 0;
      }

      &:hover {
        border-width: 0;

        &::before {
          opacity: 1;
        }

        &::after {
          color: #fff;
        }
      }
    }
  }

  &-pagination {
    margin: 0 16px;

    &-bullet {
      width: 12px;
      height: 12px;
      margin: 0;
      @extend %radius-circle;
      background-color: rgba(#757d91, 0.3);
      opacity: 1;
      transition: all 0.3s ease-in-out;

      &:not(:last-child) {
        margin-right: 11px;
      }

      &-active {
        background-color: #757d91;
      }

      &-active + & {
        background-color: rgba(#757d91, 0.6);
      }
    }
  }
}

.faq-item {
  border-radius: 11px;
  background-color: rgba(#1c212d, 0.7);
  border: 1px solid rgba(#1c212d, 0.7);

  &-heading {
    padding-right: 35px;
    cursor: pointer;

    .icon {
      &-ques {
        border-radius: 11px 0 24px 11px;
        background-color: #2b303c;
        width: 60px;
        height: 60px;
        margin: -1px 15px 0 -1px;
        font-size: 28px;
        color: #757d91;
        flex: 0 0 auto;
      }

      &-angle-down {
        color: rgba(#dcd8e1, 0.38);
        font-size: 12px;
        margin-left: auto;
      }
    }

    span {
      font-size: 14px;
      font-weight: 500;
      line-height: 18px;
      color: #757d91;
      margin-right: 15px;
    }
  }

  &-content {
    padding: 0 33px 0 60px;
    font-size: 12px;
    line-height: 28px;
    font-weight: 500;
    color: #c8cee1;
    height: 0;
  }

  &:not(:last-child) {
    margin-bottom: 12px;
  }

  &.opened {
    background-color: rgba(#8f2ffd, 0.6);
    border-color: rgba(#8f2ffd, 0.6);
    padding-bottom: 17px;
  }

  &.opened &-heading {
    margin-bottom: 14px;

    .icon {
      &-ques {
        background-color: rgba(#1c212d, 0.6);
        border-color: rgba(#1c212d, 0.6) rgba(#33204a, 0.6) rgba(#33204a, 0.6)
          rgba(#1c212d, 0.6);
        border-radius: 11px 0 25px 0;
      }

      &-angle-down {
        transform: rotate(-180deg);
      }
    }

    span {
      color: #f6faff;
    }
  }

  @include sm {
    &-heading {
      padding-right: 28px;
    }

    &-content {
      padding: 0 16px 0 19px;
    }
  }
}

.tabs {
  gap: 13px;

  li {
    background-color: #30384b;
    @extend %radius-8;
    max-width: 50%;
    width: 100%;
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 500;
    color: #8c90a1;
    padding: 14px 8px;
    line-height: 21px;
    cursor: pointer;

    &::before {
      background-image: linear-gradient(
        119.6deg,
        #fa6755 18.12%,
        #fba928 92.35%
      );
      transition: all 0.3s ease-in-out;
      opacity: 0;
    }

    &.active {
      color: #ffffff;

      &::before {
        opacity: 1;
      }
    }
  }
}

.tab-pane {
  display: none;
  transition: all 0.3s ease-in-out;

  &.active {
    display: block;
  }
}

.form-control {
  max-width: 100%;
  width: 100%;
  display: block;
  background-color: #1b1f2a;
  border: 1px solid #282c37;
  border-radius: 6px;
  height: 50px;
  padding: 0 30px;
  font-size: 12px;
  font-weight: 500;
  color: #979ba8;

  &:focus {
    border-color: #8f2ffd;
  }

  @include sm {
    padding: 0 16px;
  }
}

textarea.form-control {
  border-radius: 9px;
  resize: none;
  height: 139px;
  padding: 23px 30px 0;
  scrollbar-width: 3px;
  scrollbar-color: #8f2ffd #dbe1f3;

  @include sm {
    padding: 23px 16px 0;
  }

  &::-webkit-scrollbar {
    width: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #8f2ffd;
  }

  &::-webkit-scrollbar-track {
    background-color: #dbe1f3;
  }
}

select.form-control {
  background: #2e3443 url("./../images/icon/arrow-select.svg") right 16px center
    no-repeat;
  background-size: 16px;
  border: 1px solid #1e2330;
  @extend %radius-12;
  appearance: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 21px;
  color: #8f96aa;
  height: 50px;
  padding: 0 40px 0 16px;
}

[data-message] {
  @extend %relative;

  &::after {
    content: attr(data-message);
    @extend %absolute;
    padding: 12px;
    border-radius: 5px;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: #1b1f2a;
    color: #8c90a1;
    min-width: 250px;
    font-size: 14px;
    font-weight: 500;
    line-height: 27px;
    font-family: "Poppins";
    transition: all 0.3s linear;
    opacity: 0;
    visibility: hidden;
    z-index: 999;
  }

  &:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -12px);
  }

  @include lg {
    &::after {
      transform: translate(-25%, 0);
    }

    &:hover::after {
      transform: translate(-25%, -12px);
    }
  }
}

.dashbord {
  &-sidebar {
    z-index: 1024;
    transition-delay: 0.3s;

    &::before {
      background-color: rgba(#1d222e, 0.52);
      left: 7px;
      max-width: 275px;
    }

    &-backdrop {
      background: rgba(#000, 0.8);
      backdrop-filter: blur(8px);
      height: 100%;
      top: 0;
      left: 0;
    }

    &,
    &-content {
      top: 0;
      left: 0;
      height: 100%;
      max-width: 275px;
      transition-delay: 0s;
    }

    &-content {
      background-color: #1d222e;
      overflow: hidden auto;
      -ms-overflow-style: none;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    &-avatar {
      padding: 48px 0 47px;
      background: url("./../images/background/bg-sidebar-avatar.png") 0 0
        no-repeat;
      background-size: 100% 100%;
      margin-bottom: 44px;

      .image {
        @extend %radius-circle;
        border: 1px solid rgba(#000, 0.18);
        max-width: fit-content;
        margin-bottom: 27px;

        &::before {
          background-color: rgba(#ff0000, 0.06);
          filter: blur(25px);
        }

        &::after {
          background-color: #1d222e;
          opacity: 0.33;
          border: 2px solid rgba(#000, 0.18);
        }

        span {
          background: url("./../images/logo-s.png") 0 0 no-repeat;
          background-size: 100% 100%;
          width: 79px;
          height: 99px;
          top: 5px;
          left: 7px;
          z-index: -1;
          opacity: 0.49;
          filter: blur(9px);
        }

        img {
          mix-blend-mode: luminosity;
        }
      }

      .name {
        font-size: 12px;
        font-weight: 600;
        color: #fff;
        line-height: 15px;
        margin-bottom: 5px;

        &::before {
          left: 50%;
          transform: translate(-50%, -16px);
          width: 46px;
          height: 3px;
          background-color: #131313;
          filter: blur(2px);
        }
      }

      .email {
        font-size: 11px;
        font-weight: 500;
        line-height: 14px;
        color: #a3a4ae;
      }
    }

    &-nav {
      padding: 0 19px;
      margin-bottom: 44px;

      ul {
        li {
          &:not(:last-child) {
            margin-bottom: 10px;
          }

          a {
            padding: 18px 22px;
            font-size: 16px;
            font-weight: 500;
            line-height: 25px;
            border-radius: 15px;

            &::before {
              background-image: linear-gradient(
                151.68deg,
                #8f2ffd 7.71%,
                rgba(#2c3343, 0) 49.95%
              );
              transition: all 0.3s ease-in-out;
              opacity: 0;

            }

            i {
              font-size: 18px;
              color: #979bb0;
              margin-right: 20px;
              background-image: linear-gradient(
                to bottom,
                #fff,
                rgba(#fff, 0.5)
              );
              background-clip: text;

              &::after {
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 23px;
                height: 23px;
                @extend %radius-circle;
                background-color: rgba(#fff, 0.19);
                filter: blur(3px);
                transition: all 0.3s ease-in-out;
                opacity: 0;
              }
            }

            span {
              color: #757d91;

              &::before {
                @extend %radius-circle;
                background-image: radial-gradient(
                  #f6509c 0%,
                  #8f2ffd 10%,
                  #8f2ffd 23.2%,
                  #8f2ffd 36.5%,
                  transparent 49.7%,
                  transparent 62.7%,
                  transparent 75.5%,
                  transparent 88.1%,
                  transparent 100%
                );
                transition: all 0.3s ease-in-out;
                opacity: 0;
              }
            }

            &.active,
            &:hover {
              background-color: #242a39;

              &::before,
              i::after {
                opacity: 1;
              }

              i {
                &::before {
                  -webkit-text-fill-color: transparent;
                }
              }

              span {
                color: #fff;

                &::before {
                  opacity: 0.41;
                }
              }
            }
          }
        }
      }
    }

    &-logout {
      padding: 31px 0 30px;
      font-size: 16px;
      font-weight: 500;
      line-height: 19px;
      color: #757d91;
      background: url("./../images/background/bg-exit.png") 0 0 no-repeat;
      background-size: 100% 100%;
      margin-top: auto;

      i {
        color: #979bb0;
        font-size: 20px;
        margin-right: 6px;
      }

      &::before {
        width: 263px;
        height: 201px;
        background-image: url("./../images/background/bg-aside-dashbord-2.png");
        opacity: 0.09;
        filter: blur(20px);
        pointer-events: none;
      }
    }
  }

  &-header,
  &-content {
    margin: 21px 39px 0 314px;
  }

  &-header {
    margin-bottom: 39px;
    background: #262c3a url("./../images/background/bg-dashbord-header.png") 0 0
      no-repeat;
    background-size: 100% 100%;
    border-radius: 20px;
    padding: 17px 30px 15px 41px;

    &::before {
      background-color: rgba(#262c3a, 0.27);
      border-radius: inherit;
      top: 8px;
      right: 7px;
    }

    &-logo {
      margin-right: auto;
    }

    &-search {
      max-width: 284px;
      margin-right: 13px;

      .form-control {
        @extend %radius-8;
        background-color: #29303e;
        border-color: #2f3543;
        font-weight: 500;
        line-height: 18px;
        color: #757d91;
        padding: 0 16px 0 48px;
      }

      button {
        font-size: 15px;
        color: #757d91;
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
      }

      &-backdrop {
        background-color: rgba(#000, 0.7);
        backdrop-filter: blur(4px);
        @include fix;
        z-index: -1;
      }
    }

    .btn-icon {
      width: 44px;
      height: 44px;
      background-color: #2d3443;
      @extend %radius-8;
      font-size: 20px;
      color: #8c90a1;

      &:hover {
        background-color: #8f2ffd;
        color: #fff;
      }
    }

    &-btn-search.btn-icon {
      background-image: linear-gradient(180deg, #fba729 0%, #7e5415 100%);
      color: #fff;
    }

    .notification {
      margin: 0 11px 0 13px;

      span {
        width: 15.4px;
        height: 15.4px;
        background-color: #f64e64;
        border: 1px solid #313448;
        color: #fff;
        @extend %radius-circle;
        color: #fff;
        font-size: 8px;
        font-weight: 800;
        top: 10.2px;
        right: 9.9px;
        text-indent: -2px;
      }
    }

    .btn {
      i {
        font-size: 17px;
        margin-right: 5px;
      }
    }

    &-btn-nav {
      width: 44px;
      height: 44px;
      @extend %radius-8;
    }
  }

  &-content {
    margin-top: 0;
  }

  @include xl {
    &-header,
    &-content {
      margin-right: 28px;
      margin-left: 300px;
    }
  }

  @include lg {
    &-sidebar {
      opacity: 0;
      visibility: hidden;
      max-width: 100%;

      &-content {
        left: -275px;
      }

      &.opened {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
      }

      &.opened &-content {
        left: 0;
        transition-delay: 0.3s;
      }
    }

    &-header,
    &-content {
      margin-right: 12px;
      margin-left: 12px;
    }
  }

  @include md {
    &-header {
      margin: 0 0 35px;
      padding: 19px 10px 19px 11px;

      &,
      &::before {
        border-radius: 0;
      }

      &::before {
        right: 0;
      }
    }

    &-content {
      margin: 0;
      padding: 0 12px;
    }
  }

  @include sm {
    &-header {
      background-image: url("./../images/background/bg-dashbord-header-2.png");
      background-size: cover;
      background-position: center;

      &-logo img {
        height: 50px;
        width: auto;
      }

      .btn-icon,
      &-btn-nav {
        width: 40px;
        height: 40px;
      }

      .notification {
        background-image: linear-gradient(180deg, #f6509c 0%, #7b284e 100%);
        color: #fff;
        font-size: 20px;

        span {
          top: 7.2px;
          right: 8.9px;
        }
      }

      &-btn-search.btn-icon {
        font-size: 17px;
      }

      &-search {
        position: fixed;
        @include flex(center, center);
        z-index: 999;
        max-width: 100%;
        margin: 0;
        padding: 12px;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;

        &,
        input,
        button {
          transition: all 0.3s linear;
        }

        input {
          transform: translateY(-100px);
        }

        button {
          transform: translateY(-110px);
        }

        &.opened {
          opacity: 1;
          visibility: visible;

          input {
            transform: unset;
          }

          button {
            transform: translateY(-50%);
          }
        }
      }
    }
  }

  @include xs {
    &-header {
      &-logo img {
        height: 45px;
      }
    }
  }
}

.table {
  max-width: 100%;
  width: 100%;
  border-collapse: separate;
  text-align: left;
  border-spacing: 0 13px;

  label {
    margin-right: 8px;
    cursor: pointer;

    span {
      width: 17px;
      height: 17px;
      border-radius: 4px;
      background-color: rgba(#fff, 0.06);

      &::before {
        content: "\e90f";
        font-family: "icomoon";
        font-size: 7px;
        color: #fff;
        transition: all 0.3s ease-in-out;
        opacity: 0;
      }
    }

    input:checked + span {
      background-color: #fa4b68;

      &::before {
        opacity: 1;
      }
    }
  }

  thead tr,
  tbody tr {
    @extend %relative;
    z-index: 2;

    &::before {
      content: "";
      @extend %absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 1px solid rgba(#fff, 0.1);
      z-index: -2;
      border-radius: 7px;
    }
  }

  thead tr th,
  tbody tr td {
    white-space: nowrap;

    &,
    &.type i,
    button {
      transition: all 0.3s ease-in-out;
    }
  }

  thead tr {
    &::before {
      background-color: #222836;
      opacity: 0.72;
    }

    th {
      font-size: 12px;
      font-family: "IRANYekan";
      font-weight: 600;
      color: #a3a4ae;
      padding: 13px 12px 10px;

      &:first-child {
        padding-left: 14px;
      }

      &:last-child {
        padding-right: 24px;
      }
    }
  }

  tbody tr {
    &::before {
      background-color: #1e2330;
      opacity: 0.77;
    }

    td {
      font-size: 12px;
      font-weight: 500;
      color: #a3a4ae;
      line-height: 15px;
      padding: 20px 12px;

      &:first-child {
        padding-left: 15px;
      }

      &:last-child {
        padding-right: 25px;
      }
    }
  }

  .icons {
    top: 0;
    right: 27px;
    width: 150px;
    height: 100%;
    gap: 6px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);

    button {
      width: 25px;
      height: 25px;
      border-radius: 4px;
      background-color: #2c3344;
      font-size: 13px;
      color: #a3a4ae;

      &:hover {
        background-color: #a77a12;

        i {
          color: #fff;
        }
      }
    }
  }

  tr.show-icons .icons {
    opacity: 1;
    visibility: visible;
    transform: unset;
  }

  @include md {
    &-responsive {
      overflow: auto hidden;
      -ms-overflow-style: none;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }
  }

  @include sm {
    thead {
      display: none;
    }
  }
}

.discount-box {
  background-image: linear-gradient(
    217.7deg,
    #252b3a 18.99%,
    rgba(#50383f, 0.212) 89.98%
  );
  border: 1px dashed rgba(#fff, 0.2);
  border-radius: 13px;
  padding: 0 20px 8px 10px;
  margin: 27px 0;

  img {
    mix-blend-mode: lighten;
    margin-right: 10px;
  }

  .detail {
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
    color: #8c90a1;

    .price {
      margin-top: 7px;

      del,
      span {
        font-size: 14px;
        font-weight: 600;
      }

      del {
        color: #d9035a;
      }

      span {
        margin: 0 8px;
        color: #fff;
      }
    }
  }
}

.total-price {
  border: 1px dashed rgba(#fff, 0.2);
  border-radius: 13px;
  padding: 9px 11px 11px 32px;
  background-color: #1d222e;
  color: #8c90a1;
  font-size: 12px;
  line-height: 21px;

  .left,
  .right {
    max-width: 50%;
    width: 100%;
    flex: 0 0 auto;

    span {
      font-size: 16px;
      font-weight: 900;
      line-height: 27px;
    }
  }

  .left span {
    color: #28c76f;
  }

  .right {
    background-color: #252b3a;
    border-radius: 9px;
    padding: 12px 8px;

    span {
      color: #fff;
    }
  }

  @include xs {
    padding: 11px 15px 11px;
  }

  @include media("max", 369px) {
    .left,
    .right {
      span {
        font-size: 14px;
      }
    }
  }
}

.pagination {
  gap: 11px;

  li {
    font-family: "Yekan Bakh";
    color: #757d91;

    a {
      width: 30px;
      height: 30px;
      border-radius: 5px;
      background-color: #242937;
      font-size: 10px;
      font-weight: 800;
      color: #757d91;

      &:hover {
        background-color: #8f2ffd;
        box-shadow: 0 5px 30px rgba(#1b7ef0, 0.35);
        color: #fff;
      }
    }

    &.dots {
      font-family: "IRANYekan";
      font-size: 12px;
      font-weight: bold;
      line-height: 21px;
    }

    &.total-pages {
      font-size: 11px;
      font-weight: bold;

      span {
        font-size: 12px;
        margin-right: 7px;
      }
    }

    &.next {
      a {
        font-size: 9px;
        background-color: transparent;
        color: #73747e;
        width: auto;
        height: auto;
      }
    }
  }

  &-lg {
    li {
      a {
        width: 38px;
        height: 38px;
        font-size: 14px;
        font-weight: 800;
        border-radius: 8px;
      }

      &.total-page {
        font-size: 14px;
        font-weight: bold;
      }

      &.next a {
        font-size: 12px;
      }
    }
  }
}

.card {
  background-color: #1d222e;
  @extend %radius-12;
  padding-bottom: 41px;

  &-heading {
    padding: 25px 17px 25px 21px;
    border-radius: 12px 12px 0 0;
    background-color: #202533;
    margin-bottom: 31px;
    border-bottom: 1px solid rgba(#fff, 0.05);
  }

  &-title {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #f6faff;
    padding-left: 5px;

    &::before {
      width: 3px;
      height: 12px;
      background-color: #df8228;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  &-back {
    font-size: 18px;
    font-weight: 300;
    color: #757d91;

    i {
      width: 32px;
      height: 32px;
      background-color: #2d3443;
      @extend %radius-8;
      font-size: 9px;
      color: #a3a4ae;
      margin-left: 7px;
    }

    &:hover {
      color: #fff;

      i {
        background-color: #8f2ffd;
        color: #fff;
      }
    }
  }

  &-body {
    padding: 0 20px;

    form {
      label {
        font-size: 12px;
        font-weight: 500;
        line-height: 21px;
        margin-bottom: 4px;
        color: #757d91;
        display: inline-block;

        .danger {
          color: #cb2f54;
        }

        i {
          font-size: 12px;
          color: #8c90a1;
          margin-left: 2px;
        }
      }

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

      .form-control {
        height: 53px;
      }

      select.form-control {
        background-color: #1b1f2a;
        border-color: #282c37;

        &:focus {
          border-color: #8f2ffd;
        }
      }
    }
  }

  @include xs {
    &-heading {
      padding: 34px 21px 28px;
      margin-bottom: 33px;

      &::before {
        content: none;
      }
    }

    &-body {
      padding: 0 10px;
    }
  }
}

.domain {
  .form-control {
    padding: 0 140px 0 18px;
  }

  label {
    padding: 12px 10px 12px 30px;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background-color: #1d222e;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #8c90a1;
    cursor: pointer;
    flex: 0 0 auto;

    i {
      margin-left: 6px;
    }

    &::before {
      width: 17px;
      height: 17px;
      background-color: rgba(#fff, 0.06);
      border-radius: 4px;
      top: 50%;
      left: 9px;
      transform: translateY(-50%);
      font-family: "icomoon";
      font-size: 6px;
      text-indent: -1px;
      @include flex(center, center);
      transition: all 0.3s ease-in-out;
      color: #fff;
    }
  }

  input:checked + label {
    background-color: #252b3a;
    color: #fff;

    &::before {
      content: "\e90f";
      background-color: #8f2ffd;
    }
  }

  @include lg {
    label {
      i {
        &::after {
          transform: translate(-85%, 0);
        }

        &:hover::after {
          transform: translate(-85%, -12px);
        }
      }
    }
  }
}

.keywords {
  gap: 8px;
  margin-bottom: 33px;

  input {
    flex: 0 0 calc(25% - 23px);
    transition: 0s;

    &:nth-child(4n - 3):not(:nth-last-child(5)),
    &:nth-child(4n - 2):not(:nth-last-child(4)),
    &:nth-child(4n - 1):not(:nth-last-child(3)),
    &:nth-child(4n):not(:nth-last-child(2)) {
      flex: 0 0 calc(25% - 6px);
    }
  }

  button {
    margin-left: 14px;
    flex: 0 0 auto;
    background-color: #202533;
    border: 1px dashed #565b6b;
    border-radius: 5px;
    width: 45px;
    height: 60px;
    color: #979bb0;
    font-size: 14px;
  }

  @include md {
    input {
      &,
      &:nth-child(4n - 3):not(:nth-last-child(5)),
      &:nth-child(4n - 2):not(:nth-last-child(4)),
      &:nth-child(4n - 1):not(:nth-last-child(3)),
      &:nth-child(4n):not(:nth-last-child(2)) {
        flex: 0 0 calc(33.333333% - 28px);
      }

      &:nth-child(3n - 2):not(:nth-last-child(4)),
      &:nth-child(3n - 1):not(:nth-last-child(3)),
      &:nth-child(3n):not(:nth-last-child(2)) {
        flex: 0 0 calc(33.333333% - 6px);
      }
    }
  }

  @include sm {
    input {
      &,
      &:nth-child(4n - 3):not(:nth-last-child(5)),
      &:nth-child(4n - 2):not(:nth-last-child(4)),
      &:nth-child(4n - 1):not(:nth-last-child(3)),
      &:nth-child(4n):not(:nth-last-child(2)),
      &:nth-child(3n - 2):not(:nth-last-child(4)),
      &:nth-child(3n - 1):not(:nth-last-child(3)),
      &:nth-child(3n):not(:nth-last-child(2)) {
        flex: 0 0 calc(50% - 38px);
      }

      &:nth-child(2n - 1):not(:nth-last-child(3)),
      &:nth-child(2n):not(:nth-last-child(2)) {
        flex: 0 0 calc(50% - 4px);
      }
    }
  }

  @include xs {
    input {
      &,
      &:nth-child(4n - 3):not(:nth-last-child(5)),
      &:nth-child(4n - 2):not(:nth-last-child(4)),
      &:nth-child(4n - 1):not(:nth-last-child(3)),
      &:nth-child(4n):not(:nth-last-child(2)),
      &:nth-child(3n - 2):not(:nth-last-child(4)),
      &:nth-child(3n - 1):not(:nth-last-child(3)),
      &:nth-child(3n):not(:nth-last-child(2)),
      &:nth-child(2n - 1):not(:nth-last-child(3)),
      &:nth-child(2n):not(:nth-last-child(2)) {
        flex: 0 0 100%;
      }
    }

    .btn-add {
      max-width: 100%;
      margin-left: 0;
      width: 100%;
    }
  }
}

.custom-check {
  label {
    @extend %relative;
    padding-left: 23px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 500;
    color: #8c90a1;
    cursor: pointer;

    &::before,
    &::after {
      @extend %absolute;
      top: 50%;
      left: 0;
      width: 17px;
      height: 17px;
      border-radius: 4px;
      transform: translateY(-50%);
      transition: all 0.3s ease-in-out;
    }

    &::before {
      content: "";
      background-color: rgba(#fff, 0.06);
    }

    &::after {
      content: "\e90f";
      @include flex(center, center);
      font-size: 8px;
      color: #fff;
      font-family: "icomoon";
      opacity: 0;
    }
  }

  input:checked + label {
    &::before {
      background-color: #fa4b68;
    }

    &::after {
      opacity: 1;
    }
  }
}

.switch {
  label {
    @extend %relative;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    color: #757d91;
    padding-right: 62px;
    cursor: pointer;

    &::before,
    &::after {
      content: "";
      @extend %absolute;
      transition: all 0.3s linear;
    }

    &::before {
      width: 51px;
      height: 25px;
      background-color: #272d3d;
      border-radius: 20px;
      top: 0;
      right: 0;
    }

    &::after {
      background-color: #5e6275;
      width: 17px;
      height: 17px;
      @extend %radius-circle;
      top: 4px;
      right: 28px;
    }
  }

  input:checked + label {
    &::after {
      right: 6px;
      background-color: #df8228;
    }
  }
}

.article {
  background-color: #1D222E;
  border-radius: 27px;
  padding: 17px 12px 23px 17px;

  figure {
    img {
      border-radius: 28px;
      object-fit: cover;
    }
  }

  h2 {
    margin: 18px 0 17px;
    font-size: 18px;
    font-weight: bold;
    line-height: 31px;
    color: #ACB3C9;

    &::after {
      content: '';
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      width: 68px;
      height: 1px;
      background-color: #2E3643;
    }

    a:hover {
      color: #8F2FFD;
    }
  }

  p {
    font-size: 14px;
    line-height: 24px;
    color: #8C90A1;
    padding-bottom: 10px;
    margin-bottom: 18px;
    border-bottom: 1px dashed rgba(#DFDFDF, .1);
  }

  .author {
    font-size: 12px;
    line-height: 18px;
    color: #7D8192;
    
    img {
      border: 2px solid rgba(#000, .18);
      border-radius: 50%;
      margin-right: 11px;
    }

    &:hover {
      color: #8F2FFD;
    }
  }

  ul {
    li {
      font-size: 12px;
      line-height: 19px;
      color: #7D8192;

      &:not(:last-child) {
        margin-right: 28px;
      }

      i {
        margin-right: 10px;
        font-size: 16px;
        color: #474B5B;
      }
    }
  }

  @include xl {
    .author img,
    ul li:not(:last-child) {
      margin-right: 8px;
    }
  }

  @include lg {
    padding: 17px 12px 23px;

    .ul li {
      i {
        font-size: 14px;
        margin-right: 5px;
      }
    }
  }
}

.article-two {
  border-radius: 27px;
  background-color: #1D222E;
  padding-left: 17px;

  figure {
    padding: 18px 15px 0 0;

    img {
      border-radius: 28px;
    }
  }

  h2 {
    margin: 22px 17px 10px 0;
    font-size: 18px;
    font-weight: bold;
    line-height: 31px;

    &::after {
      content: '';
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      width: 68px;
      height: 1px;
      background-color: #2E3643;
    }

    a:hover {
      color: #8F2FFD;
    }
  }

  .author {
    line-height: 21px;
    color: #7D8192;

    img {
      border-radius: 50%;
      margin-right: 13px;
      border: 2px solid rgba(#000, .18);
    }
  }

  .view-more {
    border-radius: 19px 0 17px 0;
    background-color: #242936;
    padding: 17px 25px 21px 31px;
    color: #ACB3C9;

    i {
      margin-left: 9px;
      font-size: 20px;
      color: #5E6275;
      transition: all 0.3s ease-in-out;
    }
  }

  &:hover {
    .view-more {
      background-color: #8F2FFD;

      &,
      i {
        color: #fff;
      }
    }
  }

  @include lg {
    padding-left: 14px;

    .view-more {
      padding: 17px 16px 21px;
      font-size: 13px;

      i {
        font-size: 18px;
        margin-left: 6px;
      }
    }
  }

  @include xs {
    .author,
    .view-more {
      font-size: 12px;
    }
  }
}