.cs {

  .js-openCs {
    position: fixed;
    right: 14px; bottom: 14px;
    z-index: $header-index + 2;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 2px 2px 14px 4px rgba(0,0,0,.3);

    img { width: 60px }
  }

  &-pop {
    position: fixed;
    right: 14px; bottom: 56px;
    width: 358px;
    border-radius: 13px;
    box-shadow: 1px 1px 7px 2px rgba(0, 0, 0, 0.15);
    background-color: #ffffff;
    z-index: $header-index + 1;
    overflow: hidden;

    &__wrap {
      box-sizing: border-box;
      width: 100%;
      height: 724px;
      max-height: calc(100vh - 14px - 70px);
      padding: 20px 30px 30px;
      overflow: auto;
      overflow-x: hidden;

      &::-webkit-scrollbar {
        width: 8px;
      }
      &::-webkit-scrollbar-track {
        background-color: #ccc;
      } /* the new scrollbar will have a flat appearance with the set background color */

      &::-webkit-scrollbar-thumb {
        background-color: #999;
      } /* this will style the thumb, ignoring the track */

      &::-webkit-scrollbar-button {
        background-color: #333;
        max-height: 200px;
      } /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

      &::-webkit-scrollbar-corner {
        background-color: black;
      }
    }

    &__tab {
      padding-bottom: 20px;
      font-size: 0;

      .btn {
        width: 50%;
        padding: 6px ;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        font-weight: 900;
        text-align: center;
        color: #ccc;

        &.on {
          color: #6035bd;
          border-color: #6035bd;
        }
      }
    }

    &__default {
      .cs-block {
        position: relative;
        width: 100%;
        height: 264px;
        text-align: center;
        background: url(https://assets-store.itam.games/cs/cs-bg.jpg) no-repeat center center;
        background-size: cover;

        img {
          position: absolute;
          left: 54%; top:50%;
          transform: translate(-50%, -50%);
          width: 40%;
        }
      }
    }

    &__titie {
      padding-bottom: 17px;
      text-align: left;

      h3 {
        padding-bottom: 3px;
        font-size: 14px;
        font-weight: 900;
        color: #230f3b;

        img {
          width: 22px;
          vertical-align: middle;
        }
        span {
          display: inline-block;
          vertical-align: middle;
        }
      }
      p {
        white-space: pre-line;
        font-size: 12px;
        font-weight: 300;
        line-height: 1.42;
        color: #4a4a4a;
      }

      &.underline {
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid #ccc;
      }
    }

    &__link {
      padding-bottom: 16px;
      margin-bottom: 6px;
      border-bottom: solid 1px #e8e8e8;

      a {
        display: block;
        padding: 10px;
        font-size: 12px;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #471b6b;
        text-align: center;
        border-radius: 6px;
        background-color: #f6f2fa;
      }
    }

    &__menu {
      position: relative;
      padding-bottom: 6px;
      margin-bottom: 16px;
      border-bottom: solid 1px #e8e8e8;
      z-index: 1;
    }

    .cs-title {
      font-size: 13px;
      font-weight: 500;
      color: #471b6b;

      b {
        font-size: 14px;
      }

      span {
        display: inline-block;
        vertical-align: middle;

        &.ico {
          width: 15px;
          height: 15px;
          border-radius: 50%;
          line-height: normal;
          color: #fff;
          text-align: center;
          background: #471b6b;
        }
      }
    }

    &__send {
      .transfer {
        position: relative;
        height: 250px;
        text-align: center;

        &.ing {
          background: red;
        }

        .photo {
          padding-bottom: 8px;
          img { width: 137px }
        }

        h4 {
          font-size: 17px;
          font-weight: bold;
          color: #bbb;
        }

        p {
          padding: 5px 0;
          white-space: pre-line;
          font-size: 14px;
          line-height: 1.29;
          color: #b0b0b0;
        }

        .btns {
          position: absolute;
          left: 0; right: 0; bottom: 0;
        }
      }
    }

    &__q {
      .file {
        padding-bottom: 8px;

        .filebox {
          float: left;
        }
        .fR {
          width: calc(100% - 70px);
          font-size: 11px;
          font-weight: normal;
          font-style: normal;
          font-stretch: normal;
          line-height: 1.45;
          letter-spacing: normal;
          color: #797979;
        }
      }
    }

    .file-list {
      display: block;
      width: 100%;

      li {
        position: relative;
        width: 100%;
        padding: 9px 15px;
        color: #ccc;
        margin-bottom: 4px;
        background-color: #f8f8f8;

        span {
          font-size: 12px;
        }

        .btn {
          float: right;
          margin-top: 4px;
          font-size: 10px;
          color: #ccc;
          background: transparent;
        }
      }
    }

    .btns {
      .btn {
        width: 100%;
        padding: 11px;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 500;
        text-align: center;
        color: #ffffff;
        background-color: #471b6b;

        &.btn-warning {
          background-color: #ffc400;
        }

        &.js-qna {
          margin-bottom: 7px;
        }

        &.js-sendBack {
          background-color: #9b9b9b;
        }

        &.js-back {
          background-color: #9b9b9b;
        }
      }

      .row {
        .fL,
        .fR {
          width: 48.5%;
        }
      }

      &.double {
        bottom: -20px;

        .btn {
          width: 48%;
        }
      }
    }

    .agreement {
      padding-bottom: 20px;
      font-size: 10px;
      font-weight: normal;
      font-style: normal;
      font-stretch: normal;
      line-height: normal;
      letter-spacing: normal;
      color: #999;
    }

    .js-send {
      width: 100%;
      border-radius: 5px;
      padding: 9px;
      background-color: #471b6b;
      font-size: 12px;
      font-weight: 500;
      color: #fff;
    }

    &__faq {

      .accordion {
        h4 {
          position: relative;
          padding: 10px 15px 10px 0;
          font-size: 13px;
          font-weight: normal;
          line-height: 1.57;
          color: #9f9f9f;
          cursor: pointer;

          .ico { font-weight: bolder }

          .plus {
            position: absolute;
            right: 10px; top: 19px;

            span {
              position: absolute;
              display: block;
              width: 11px;
              height: 1px;
              background: #d6d6d6;
              transform: rotate(0);

              transition: all .3s ease;
            }

            & span:nth-of-type(2) {
              transform: rotate(90deg);
            }
          }
        }

        .answer {
          position: relative;
          overflow: hidden;
          color: #471b6b;

          .ico {
            font-weight: bolder;
          }

          p {
            font-size: 0;
            line-height: 0;
            vertical-align: top;
            transition: all .3s ease;
          }

          a {
            color: #1ebde9;
            text-decoration: underline;
          }
        }

        .on {
          h4 {
            color: #471b6b;

            .plus {
              span {
                background: #ffc400;
              }

              & span:nth-of-type(2) {
                transform: rotate(0);
              }
            }
          }
          .answer {
            p {
              font-size: 14px;
              line-height: 1.57;
            }
          }
        }
      }

    }
  }

  //== select
  .select {
    margin-bottom: 10px;
    position: relative;

    h4 {
      position: relative;
      box-sizing: border-box;
      height: 36px;
      padding: 9px 15px;
      border-radius: 5px;
      font-size: 12px;
      font-weight: bold;
      font-style: normal;
      font-stretch: normal;
      line-height: normal;
      letter-spacing: normal;
      color: #999;
      background-color: #f8f8f8;

      &::after {
        position: absolute;
        right: 15px;
        top: calc(50% - 6px);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 8px solid #999;

        -webkit-transform: rotate(0);
        transform: rotate(0);

        transition: transform .3s ease;
      }
    }
    ul {
      position: absolute;
      display: block;
      width: 100%;

      max-height: 0;
      overflow: hidden;

      transition: max-height .2s ease;
    }

    li {
      display: block;

      .btn {
        box-sizing: border-box;
        width: 100%;
        padding: 9px 15px;
        border-bottom: solid 1px #e8e8e8;
        font-size: 12px;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #4a4a4a;
        background-color: #fafafa;

        &:hover,
        &:active {
          background-color: #eee;
        }
      }

      &:last-child {
        .btn {
          border-radius: 0 0 5px 5px;
          border-bottom: 0;
        }
      }
    }

    &:hover,
    &:active {
      h4::after {
        transform: rotate(90deg);
      }
      ul {
        max-height: 147px;
      }
    }
  }


  .form-group {
    margin-bottom: 10px;

    input[type="text"] {
      height: 36px;
      width: 100%;
      padding: 7px 9px;
      font-size: 12px;
      border-radius: 5px;
      background-color: #f8f8f8;
    }

    textarea {
      width: 100%;
      min-height: 125px;
      min-width: 100%;
      max-width: 100%;
      padding: 7px 9px;
      border: 0;
      font-size: 12px;
      border-radius: 5px;
      background-color: #f8f8f8;
    }

    input[type="text"],
    textarea {
      &::-webkit-input-placeholder {
        color: #ccc;
      }
      &::-moz-placeholder {
        color: #ccc;
      }
      &:-ms-input-placeholder {
        color: #ccc;
      }
      &:-moz-placeholder {
        color: #ccc;
      }

      &:focus {
        outline: 1px solid #ffc400;

        &::-webkit-input-placeholder {
          color: #ffc400;
        }
        &::-moz-placeholder {
          color: #ffc400;
        }
        &:-ms-input-placeholder {
          color: #ffc400;
        }
        &:-moz-placeholder {
          color: #ffc400;
        }
      }
    }
  }

  .filebox {
    label {
      display: inline-block;
      padding: .5em .75em;
      border: 1px solid #e8e8e8;
      border-radius: .25em;
      color: #8c8c8c;
      font-size: 12px;
      background-color: #e8e8e8;
      vertical-align: middle;
      cursor: pointer;
      -webkit-transition: all 0.2s;
      transition: all 0.2s;

      &:hover {
        color: #fff;
        background-color: #C9C9C9;
      }
      &:active {
        background-color: #B7B7B7;
      }
    }

    input[type="file"] {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
    }
  }
}

@media screen and (max-width: $grid-breakpoint-mb) {
  .cs {

    &.on {
      .js-openCs {
        right: 14px;
        top: 31px;
        bottom: auto;

        img { width: 38px }
      }

      &:before {
        content: '';
        display: block;
        position: fixed;
        left: 0; top: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,.5);
        z-index: $header-index +1 ;
      }
    }

    &-pop {
      left: 0;
      right: 0;
      bottom:0;
      width: 100%;
      border-radius: 30px 30px 0 0;

      &__wrap {
        box-sizing: border-box;
        width: 100%;
        height: calc(100vh - 77px);
        max-height: none;
        padding: 20px 30px 30px;
        overflow: auto;
        overflow-x: hidden;
      }
    }
  }
}