.sensitive_info {
  margin-top: 24px;
}

  .sensitive_info a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin-bottom: 12px;
    background: #;
    border: 1px solid #ccc;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
  }

  .sensitive_info a:hover {
    background: #22a383;
    color: #fff;
  }




.login {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: 4em;
  align-items: start;
  justify-content: center;
}

  .login .heading {
    margin-bottom: 0.85em;
  }

    .login h2 {
      margin: 0;
      line-height: 1.15em;
      font-size: 1.3em;
    }

    .login p {
      margin: 0;
      margin-top: .85em;
      line-height: 1.15em;
      font-size: .85em;
    }



  .login > div {
    background: #222227;
    box-shadow: 0 0 6px 0 rgba(0,0,0,.04), 0 4px 10px 0 rgba(13,35,67,.15);
    border-radius: 1em;
    padding: 2em 2em;
  }


    .login ::placeholder {
      -webkit-appearance: none;
      position: relative;
      font-size: 18px;
    }



    .login .field {
      box-sizing: border-box;
      width: 100%;
      margin-bottom: 1em;
      background: #1a1a1a;
      border-radius: 16px;
      overflow: hidden;
    }
      .login .field img.icon {
        display: inline-block;
        width: 32px;
      }
      .login .field input[type="number"]::-webkit-inner-spin-button,
      .login .field input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      .login .field input {
        -webkit-appearance: none;
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        height: 56px;
        background: transparent;
        border: 0;
        padding-left: 16px;
        text-align: left;
        font-size: 1.15em;
        color: #fff;
      }



    .login .field.icheckbox {
      position: relative;
      display: flex;
      width: 100%;
      align-items: flex-start;
      justify-content: flex-start;
      background: #1a1a1a;
      padding: 16px;
    }
      .icheckbox .check {
        display: inline-flex;
        justify-content: center;
        width: 24px;
        margin-right: 20px;
      }
        .check-material input[type="checkbox"]{display:none}
        .check-material input[type="checkbox"]:checked + label{
          background: #22a383;
          border-color: #22a383
        }
        .check-material input[type="checkbox"]:checked + label:after{
          transform:scale(1.3)
        }
        .check-material label{
          display: block;
          box-sizing: border-box;
          width: 18px;
          height: 18px;
          background: transparent;
          border: 2px solid #22a383;
          border-radius: 10%;
          position: relative;
          cursor: pointer;
          transition: .2s
        }
        .check-material label:before{
          content:'';
          position:absolute;
          display:block;
          height:300%;
          width:300%;
          top:-100%;
          left:-100%;
          z-index:-1;
          border-radius:50%;
          transition:.3s
        }
        .check-material label:after{
          content:'';
          display:block;
          height:100%;
          width:100%;
          background:url(../images/icons/ic_check.svg) center center no-repeat;
          background-size:contain;
          transform:scale(0);
          transition:.2s
        }
        .check-material label:active:before{background:red; transition: 1s;}


      .icheckbox .label {
        width: 100%;
        text-align: left;
        line-height: 1.0em;
      }
        .icheckbox .label label {
          position: relative;
          top: 0px;
          cursor: pointer;
          font-size: 0.875em;
        }



    .login .button {
      cursor: pointer;
      display: flex;
      width: 100%;
      height: 48px;
      margin: auto;
      align-items: center;
      justify-content: center;
      background: #22a383;
      border: 0px solid black;
      border-radius: 16px;
      text-transform: uppercase;
      font-size: 18px;
      font-weight: 600;
      color: #fff;
    }
      .login .button .loaderImg.hide {
        display: none !important;
      }
      .login .button .loaderImg {
        display: flex;
        align-items: center;
      }
        .login .button .loaderImg img {
          width: 44px;
          height: 44px;
        }

  input[type=text].error::placeholder {
    display: ;
    font-weight: 600;
    color: red;
  }

.login .error.hide {
  margin-bottom: 16px;
  border: 0px;
  font-size: 14px;
  font-weight: 600;
  color: red;
}

    .login .auth_info {
      background: #;
      border: 1px solid #fff;
      border-radius: 12px;
      padding: 8px 12px;
      color: #fff;
    }
      .login .auth_info h3 {
        font-weight: 700;
      }
      .login .auth_info p {
        margin: 0;
        line-height: 1.5;
        font-size: .85em;
        font-weight: ;
        color: #fff;
      }
      .login .mybutton {
        cursor: pointer;
        display: flex;
        width: 100%;
        height: 40px;
        margin: 12px auto;
        align-items: center;
        justify-content: center;
        background: #22a383;
        border: 0px solid black;
        border-radius: 12px;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
      }


@media screen and (max-width: 800px) {

  .login {
    display: block;
    margin-top: 12px;
    margin-bottom: 111px;
  }
    .login > div {
      margin-bottom: 24px;
      box-shadow: 0 0 6px 0 rgba(0,0,0,.04), 0 4px 10px 0 rgba(13,35,67,.15);
      border-radius: 1em;
      padding: 16px 12px;
    }

    .login .heading {
      margin-bottom: 0.85em;
    }
      .login h2 {
        font-weight: 700;
      }


      .login .field input {
        height: 48px;
        /*padding: 16px 16px;*/
        font-size: 17px;
      }
      .login .field input::placeholder {
        font-size: 17px;
      }
}










/**/


































/* index.php */
@media screen and (min-width: 800px) {
.user_info_grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  grid-template-rows: auto;
  grid-column-gap: 32px;
  grid-row-gap: 16px;
  padding: 0px 0;
  align-content: center;
}
  .user_info_grid > div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 200px;
    background: #222227;
    box-shadow: 0 0 6px 0 rgba(0,0,0,.04),
    0 4px 10px 0 rgba(13,35,67,.15);
    border-radius: 12px;
  }
    .user_info_grid label {
      position: absolute;
      top: 16px;
      left: 16px;
      font-weight: 700;
      font-size: 1em;

    }
    .user_info_grid span {
      font-weight: 200;
      font-size: 2.5em;
    }
    .user_info_grid span.balance {
      font-weight: 700;
      font-size: 5em;
      color: #22a383;
    }
    .user_grid span.code {
      font-weight: 200;
      font-size: 2.5em;
    }
}

@media screen and (max-width: 800px) {

  .user_name_new_block {
    display: block;
    margin-top: -12px;
    margin-bottom: 24px;
    background: #222227;
    text-align: center;
    padding: 0.75em 12px !important;
    text-align: ;

  }
    .user_name_new_block span {
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 400;
    }

    .user_name_new_block span.name {
      display: block;
      text-transform: none;
      font-size: 1.15em;
      font-weight: 500;
    }



  .user_bonuses_new_block {
    text-align: center;
  }

    .user_bonuses_new_block span {
      text-transform: uppercase;
      font-size: 1.2em;
      font-weight: 600;
    }

    .user_bonuses_new_block span.balance {
      display: block;
      margin: 0;
      line-height: 0.9;
      font-size: 96px;
      font-weight: 900;
      color: #22a383;
    }



  .user_code_new_block {
    display: block;
    margin: 24px 0 8px 0;
    background: #22a383;
    text-align: center;
    padding: 1.5em 0;
    color: #fff;
  }

    .user_code_new_block span {
      display: block;
      text-transform: uppercase;
      font-size: .9em;
      font-weight: 500;
    }

    .user_code_new_block span.code {
      line-height: 1;
      font-size: 44px;
      font-weight: 700;
    }

}











.orders_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 32px;
  align-items: ;
  justify-content: center;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgba(0,0,0,.04), 0 4px 10px 0 rgba(13,35,67,.15);
  padding: 0px;
}


  .order_item {
    position: relative;
    margin-bottom: 16px;
    background: #222227;
    border-radius: 12px;
    padding: 12px;
  }

    .order_item .grid2 {
      display: grid;
      grid-template-columns: 2fr 1fr;
      align-items: center;
      margin: 0;
      padding: 0;
      line-height: 1em;
    }

    .order_item .orderMain,
    .order_item .orderSum {
      font-size: 1em;
      font-weight: 700;
    }
    .order_item .orderTime {
      text-align: right;
      font-size: .85em;
      font-weight: 500;
    }

    .order_item .orderContent {
      margin: 12px 0;
      font-size: 1em;
    }
      .order_item .orderContent p {
        margin: 4px 0;
        font-weight: ;
      }

    .order_item .status {
      display: inline-block;
      background: #F6B14B;
      border-radius: 8px;
      padding: 4px 8px;
      text-transform: uppercase;
      font-size: .85em;
      font-weight: 700;
      color: #fff;
    }
    .order_item .status.done {
      background: green;
    }
    .order_item .status.reject {
      background: red;
    }



@media screen and (max-width: 800px) {

  .orders_grid {
    display: block;
  }
    .order_item {
      margin-bottom: 16px;
    }
      .order_item p {
        margin: 4px 0;
      }
      .order_item .orderContent {
        margin: 8px 0;
      }
        .order_item .orderContent p {
          margin: 2px 0;
        }

}




















.accordion {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
  grid-column-gap: 32px;
  grid-row-gap: 1em;
  align-items: start;
}

.accordion .ac {
  box-shadow: 0 0 6px 0 rgba(0,0,0,.04), 0 4px 10px 0 rgba(13,35,67,.15);
  border-radius: 12px;
  color: #fff;
}

  .accordion .ac > .ac-q {
    position: relative;
    cursor: pointer;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    height: 4em;
    margin: 0;
    background: #222227;
    border-radius: 12px;
    padding-left: 12px;
    text-align: left;
    font-weight: 500;
    color: #fff;
  }

  .accordion .ac.active > .ac-q {
    background: #22a383;
    color: #fff;
  }

  .accordion .ac > .ac-q::after {
    content: "+";
    text-align: center;
    width: 15px;
    right: 10px;
    top: 55%;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
  }

  .accordion .ac > .ac-a {
    overflow: hidden;
    -o-transition-property: all;
    -o-transition-timing-function: ease;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: ease;
    transition-property: all;
    transition-timing-function: ease;
  }
    .accordion .ac > .ac-a p {
      margin: 0;
      padding: 10px;
      text-align: left;
      line-height: 1.5;
      font-size: .85em;
    }

  .accordion .ac.active > .ac-q::after {
    top: 50%;
    content: "\2013";
  }

@media screen and (max-width: 800px) {

  .accordion {
    margin: 0;
    grid-template-columns: 1fr;
    grid-row-gap: 16px;
    box-shadow: 0 0 6px 0 rgba(0,0,0,.04), 0 4px 10px 0 rgba(13,35,67,.15);
    border-radius: 12px;
  }
    .accordion .ac {
      box-shadow: none;

    }

    .accordion .ac > .ac-q {
      padding-right: 12px;
      font-size: 15px;
    }
    .accordion .ac > .ac-a p {
      font-size: 14px;
    }

    .accordion .ac > .ac-q::after {
      font-size: 24px;
      font-weight: 300;
    }

}








#userLogout {
  display: block;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
  color: red;
}


/* END */















.smscode-disabled, .smscode-btn{
  cursor: pointer;
  display: flex;
  width: 100%;
  height: 48px;
  margin: auto;
  align-items: center;
  justify-content: center;
  background: #333;
  border: 0px solid black;
  border-radius: 16px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-top: 10px;
}

.smscode-btn {
  opacity: 1;
  transition: all .3s;
  cursor: pointer;
  background-color: #90c32d;
  color: #333;
  font-weight: 600;
  font-size: 14px;
}
.smscode-btn.hidden{
  opacity: 0;
  display: none;
}
.smscode-disabled.hidden {
  display: none;
}