@import "common";

body {
  margin: 0;
  padding: 0;
  background-color: #12141B;
  color: #E5E7EF;
}
.title {
  text-align: center;
  font-size: .9rem;
  margin-top: 2.72rem;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.66rem;
  .out-box {
    width: 13rem;
    height: 1.84rem;
    margin-bottom: .8rem;
    border: 1px solid #CCCCCC;
    border-radius: .92rem;
    .inner-box {
      display: flex;
      align-items: center;
      width: 12.36rem;
      height: 1.84rem;
      margin: 0 auto;
    }
    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.94rem;
      height: .8rem;
      .icon-img {
        width: .8rem;
        height: .8rem;
        margin-left: .1rem;
      }
    }
    .line {
      width: .04rem;
      height: .8rem;
      background-color: #6F7073;
    }
    .input {
      flex: 1;
      height: 80%;
      margin-left: .48rem;
      input {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: transparent;
        border: none;
        color: white;
        font-size: .56rem;
        outline: none;
      }
    }
    .btn-code {
      width: 3.48rem;
      height: 1.08rem;
      font-size: .48rem;
      background-color: #FC913A;
      border-radius: .54rem;
      text-align: center;
      line-height: 1.08rem;
      margin-left: .28rem;
    }
    .btn-password {
      display: flex;
      align-items: center;
      justify-content: right;
      width: .8rem;
      height: .8rem;
      margin-right: .56rem;
      margin-left: .28rem;
      .btn-password-img {
        width: .72rem;
        height: .52rem;
      }
    }
  }
  .yaoqingma {
    margin: 0;
  }
  .protocol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13rem;
    height: .56rem;
    font-size: .52rem;
    color: #707173;
    margin-top: .84rem;
    margin-bottom: .84rem;
    input[type='checkbox']{
      box-sizing: border-box;
      width: .56rem;
      height: .56rem;
      background-color: transparent;
      -webkit-appearance:none;
      border: 2px solid #979797;
      border-radius: 2px;
      outline: none;
    }
    .checkbox input[type='checkbox']:checked{
      // background: url("../images/Rectangle.png") no-repeat center;
      background-color: #FF9B40;
    }
    .checkbox {
      display: flex;
      align-items: center;
    }
    .txt {
      display: block;
      margin-left: .28rem;
      line-height: .56rem;
      a {
        color: #D48634;
        text-decoration: none;
      }
    }
  }
  input[type='submit'] {
    width: 13rem;
    height: 1.84rem;
    border-radius: .92rem;
    border: none;
    background-image: linear-gradient(to right, #FF7C39 , #FF9C40);
    color: white;
    font-size: .56rem;
    box-shadow: 0 0 8px #ff7b398a;
  }
}