.header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  mat-icon {
    color: #968bdb;
    cursor: pointer;
  }
}
.pos {
  position: relative;

  .form-form-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    width: 100%;
    display: flex;
    min-height: 76vh;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    .form-row {
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      line-height: 28px;
      color: #968bdb;
      letter-spacing: 1px;
      text-align: center;
      width: 90%;
      .form-field-wrapper {
        border: 1px solid rgba(237, 132, 79, 0.8);
        box-sizing: border-box;
        border-radius: 10px;
        height: 44px;
        margin-top: 20px;
        width: 330px;
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
      }
      label {
        span {
          color: #e684ad;
        }
      }
      .sc-avatar-wrapper {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        margin: 30px 0 20px;
        .avatar {
          height: 150px;
          width: 141px;
        }
        img:nth-child(2) {
          margin-top: 15px;
          margin-left: 15px;
          cursor: pointer;
        }
        div {
          svg {
            cursor: pointer;
            margin-top: 3px;
          }
        }
      }
    }
    &.av {
      display: flex;
      flex-direction: column;
    }
  }

  .form-button-next {
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 100;
    button.frm-next-btn {
      width: 130px;
      height: 40px;
      background: linear-gradient(270deg, #ee844f 0%, #ee4b80 100%);
      border-radius: 100px;
      border: none;
      color: #fff;
      font-style: normal;
      font-weight: 600;
      font-size: 15px;
      text-align: center;
      cursor: pointer;
    }
  }
  .form-button-next-arrow {
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 100;
    button.frm-next-btn {
      display: none;
      width: 40px;
      height: 40px;
      background: linear-gradient(270deg, #ee844f 0%, #ee4b80 100%);
      border-radius: 100px;
      border: none;
      color: #fff;
      font-style: normal;
      font-weight: 600;
      font-size: 15px;
      line-height: 19px;
      text-align: center;
      cursor: pointer;
    }
  }
}
.pc-tab > input,
.pc-tab section > div {
  display: none;
}

#tab1:checked ~ section .tab1,
#tab2:checked ~ section .tab2,
#tab3:checked ~ section .tab3,
#tab4:checked ~ section .tab4,
#tab5:checked ~ section .tab5,
#tab6:checked ~ section .tab6,
#tab7:checked ~ section .tab7,
#tab8:checked ~ section .tab8 {
  display: block;
}

#tab1:checked ~ nav .tab1,
#tab2:checked ~ nav .tab2,
#tab3:checked ~ nav .tab3,
#tab4:checked ~ nav .tab4,
#tab5:checked ~ nav .tab5,
#tab6:checked ~ nav .tab6,
#tab7:checked ~ nav .tab7,
#tab8:checked ~ nav .tab8 {
  color: red;
}

.pc-tab {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  ul {
    list-style: none;
    margin: 0;
    display: flex;
    border-bottom: 1px solid #20253b;
    align-items: flex-start;
    li {
      label {
        float: left;
        padding: 2px 20px 10px;
        border-bottom: 0;
        background: transparent;
        color: #968bdb;
        font-weight: 600;
        &:hover {
          color: #ea635f;
          cursor: pointer;
        }
        &:active {
          color: #ea635f;
        }
      }
      &:not(:last-child) label {
        border-right-width: 0;
      }
    }
  }
  section {
    clear: both;
    div {
      padding: 10px;
      background: transparent;
      line-height: 1.5em;
      letter-spacing: 0.3px;
      color: #444;
      h2 {
        margin: 0;
        font-family: "Raleway";
        letter-spacing: 1px;
        color: #34495e;
      }
    }
  }
}

#tab1:checked ~ nav .tab1,
#tab2:checked ~ nav .tab2,
#tab3:checked ~ nav .tab3,
#tab4:checked ~ nav .tab4,
#tab5:checked ~ nav .tab5,
#tab6:checked ~ nav .tab6,
#tab7:checked ~ nav .tab7,
#tab8:checked ~ nav .tab8 {
  label {
    background: transparent;
    color: #ea635f;
    position: relative;
    &:after {
      content: "";
      display: block;
      position: absolute;
      height: 3px;
      width: 40%;
      background: url("../../../assets/images/active-tab.png") no-repeat;
      left: 0;
      bottom: -1px;
      right: 0;
      margin: auto;
    }
  }
}
.scroll-student {
  overflow-x: scroll;
}
.scroll-student::-webkit-scrollbar {
  height: 0px;
}
.facial-hair-title {
  width: 69px;
}
.color-list-wrapper.Hairstyle {
  li {
    label {
      &.color1 {
        background: #a55727 !important;
      }
      &.color2 {
        background: #2d1b19 !important;
      }
      &.color3 {
        background: #b48042 !important;
      }
      &.color4 {
        background: #d6b371 !important;
      }
      &.color5 {
        background: #724133 !important;
      }
      &.color6 {
        background: #4a312c !important;
      }
      &.color7 {
        background: #f987d8 !important;
      }
      &.color8 {
        background: #f59797 !important;
      }
      &.color9 {
        background: #c93306 !important;
      }
      &.color10 {
        background: #e9e1e1 !important;
      }
    }
  }
}

.color-list-wrapper {
  display: flex;
  border: none;
  padding: 0;
  flex-wrap: wrap;
  border-bottom: none !important;
  margin-top: 30px !important;
  li {
    position: relative;
    width: calc(100% / 7);
    text-align: center;

    margin-bottom: 30px;
    margin-top: 10px;
    span {
      display: block;
      color: #968bdb;
      font-size: 14px;
    }
    input[type="radio"] {
      width: 50px;
      height: 50px;
      opacity: 0;
      position: relative;
      z-index: 9999;
      cursor: pointer;
      left: 0;
      top: -4px;
    }
    label {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      position: absolute;
      left: 0;
      padding: 0 !important;
      cursor: pointer;
      &.color1 {
        background: #a55727 !important;
      }
      &.color2 {
        background: #f9d25d !important;
      }
      &.color3 {
        background: #fedbb3 !important;
      }
      &.color4 {
        background: #edb98a !important;
      }
      &.color5 {
        background: #cf8b5a !important;
      }
      &.color6 {
        background: #ae5d28 !important;
      }
      &.color7 {
        background: #604335 !important;
      }
      &.color8 {
        background: #f987d8 !important;
      }
      &.color9 {
        background: #c93306 !important;
      }
      &.color10 {
        background: #fff !important;
      }
      &::after {
        width: 63px;
        height: 63px;
        position: absolute;
        content: "";
        top: -8px;
        left: -8px;
        opacity: 0;
        z-index: -1;
        border: 2px solid #9845c7;
        border-radius: 100%;
        box-shadow: -1px -2px 29px 1px #9845c7;
      }
    }
    input:checked + label:after {
      opacity: 1;
    }
  }
  &.hairstyle {
    border-top: 1px dashed;
    padding-top: 30px !important;
    li {
      position: relative;
      width: calc(100% / 7);
      text-align: center;
      margin-bottom: 20px;
      width: 110px !important;
      height: 130px;
      display: block;
      background: rgba(33, 30, 61, 0.7);
      border: 1px solid #38336d;
      box-sizing: border-box;
      border-radius: 8px;
      margin-right: 20px;
      input[type="radio"] {
        width: 99px;
        height: 123px;
        opacity: 0;
        position: relative;
        z-index: 9999;
        cursor: pointer;
        left: 0;
        top: 0;
      }
      label {
        text-align: center;
        width: 100%;
        float: none;
        display: block;
        left: 0;
        right: 0;
        margin: auto;
        top: 0px;
        &::after {
          width: 105px;
          height: 125px;
          position: absolute;
          content: "";
          border: 1px solid #a64cd7;
          top: -20px;
          left: 0;
          border-radius: 8px;
          opacity: 0;
        }
      }
      input:checked + label:after {
        opacity: 1;
      }
    }
  }
  &.b-list {
    li {
      position: relative;
      width: calc(100% / 7);
      text-align: center;
      margin-bottom: 20px;
      width: 105px !important;
      height: 130px;
      display: block;
      background: rgba(33, 30, 61, 0.7);
      border: 1px solid #38336d;
      box-sizing: border-box;
      border-radius: 8px;
      margin-right: 18px;
      input[type="radio"] {
        width: 106px;
        height: 127px;
        opacity: 0;
        position: relative;
        z-index: 9999;
        cursor: pointer;
        left: 0;
        top: 0;
        margin: 0;
      }
      label {
        width: 109px;
        height: 100%;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 0;
        padding: 0 !important;
        cursor: pointer;
        &:after {
          width: 107px;
          height: 128px;
          position: absolute;
          content: "";
          top: -1px;
          left: -1px;
          z-index: 0;
          background: #53257b9c;
          border-radius: 8px;
          border: 1px solid #a64cd7;
          box-shadow: 1px 1px 20px 0.5px #a64cd7;
        }
        img {
          margin-top: 30px;
          position: relative;
          z-index: 9;
        }
      }
      input:checked + label:after {
        opacity: 1;
      }
    }
  }
  &.cloths {
    border-bottom: 1px dashed #38336d !important;
    padding-top: 30px !important;
    padding-bottom: 20px !important;
    margin-bottom: 10px !important;
    border-top: 1px dashed #38336d !important;
    margin-top: 0 !important;
  }
  &.tshirt-logo {
    li {
      width: 66px !important;
      height: 66px !important;
      margin-top: 0;
      border-radius: 50% !important;
      padding: 0 !important;
      margin-right: 48px !important;
      margin-bottom: 50px !important;
      input[type="radio"] {
        height: 66px;
        width: 66px;
      }
      label {
        width: 66px;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          margin-top: -2px;
        }
        &:after {
          width: 115px;
          height: 115px;
          position: absolute;
          content: "";
          background: url("../../../assets/images/round-after.png");
          top: -32px;
          left: -31px;
          opacity: 0;
          z-index: 0;
        }
      }
    }
  }
}

.ss-tag {
  li {
    label {
      left: 50% !important;
      transform: translate(-50%, 0);
    }
  }
}

.hair-list {
  li {
    .all-hair {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translate(-50%, 0);
      width: 100%;
      padding: 0;
      span {
        line-height: 1.2;
        font-size: 13px;
      }
    }
  }
}

.Accessoriescolor {
  li {
    label {
      &.color1 {
        background: #262d33 !important;
      }
      &.color2 {
        background: #65c8ff !important;
      }
      &.color3 {
        background: #5199e5 !important;
      }
      &.color4 {
        background: #5199e5 !important;
      }
      &.color5 {
        background: #e5e5e5 !important;
      }
      &.color6 {
        background: #919598 !important;
      }
      &.color7 {
        background: #3c4f5c !important;
      }
      &.color8 {
        background: #b2e1ff !important;
      }
      &.color9 {
        background: #a7fec3 !important;
      }
      &.color10 {
        background: #ffdeb5 !important;
      }
      &.color11 {
        background: #ffafba !important;
      }
      &.color12 {
        background: #ffffb1 !important;
      }
      &.color13 {
        background: #ff488e !important;
      }
      &.color14 {
        background: #ff5c5d !important;
      }
      &.color15 {
        background: #ffffff !important;
      }
    }
  }
}

@media only screen and (max-width: 572px) {
  img#userimage {
    width: 50%;
    margin-left: 40px;
  }
  .color-list-wrapper li {
    width: 82px !important;
  }
  .color-list-wrapper.b-list > li {
    width: 100px !important;
    margin-right: 10px;
  }
  .pc-tab ul {
    overflow-y: scroll;
    padding: 0;
  }
  .pc-tab ul::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
  .color-list-wrapper.b-list {
    li {
      label:after {
        width: 101px;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .header {
    border-bottom: 1px solid #20253b;
  }
}
@media screen and (max-width: 1024px) {
  .form-button-next-arrow {
    button.frm-next-btn {
      display: block !important;
      line-height: 0px !important;
    }
  }
  .form-button-next {
    button.frm-next-btn {
      display: none;
    }
  }
}
