@import './../styles/index.scss';

.device-not-approved-container {
  font-family: 'NunitoSans';
  width: 328px;
  height: 513px;
  border-radius: 0px 0px 7px 7px;

  .device-not-approved-header {
    height: 60px;
    width: 100%;

    .back-button {
      position: absolute;
      top: 42px;
      left: 15px;
      border: none;
      outline: none;
      border-radius: 100px;
      width: 36px;
      height: 36px;
      background-color: rgba(255, 255, 255, 0.26);
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.11);
      font-size: 22px;
      color: #ffffff;
      padding: 5px 0px 0px 2px;

      &:hover {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
      }
    }

    .criptext-logo {
      height: 100%;
      width: 80%;
      float: right;
      .icon {
        height: 33px;
        width: 96px;
        float: right;
        position: relative;
        top: calc(50% - 12px);
        right: 20px;
        color: #ffffff;
        background-image: url(../#{$_PATH_TO_IMAGES}/icon-criptext.svg);
        background-position: center;
        background-size: 100%;
      }
    }
  }

  .device-not-approved-content {
    height: calc(100% - 70px);
    width: 100%;

    .content-header {
      height: 22%;
      color: #ffffff;
      text-align: center;
      h4 {
        font-size: 17px;
        font-weight: 800;
        margin: 0px;
        position: relative;
        top: 30%;
      }
    }

    .content-message {
      height: 50%;
      color: #ffffff;
      text-align: center;
      padding: 0 37px;

      p {
        font-size: 15px;
        font-weight: 400;
        margin: 0px 0px 25px 0px;
      }

      .content-icon {
        width: 19%;
        height: 21%;
        margin: 20px auto;
        font-size: 40px;
        color: #ffffff;
        border-radius: 50%;
        background-color: rgba($color: #373a45, $alpha: 0.1);
      }
    }

    .cant-access {
      position: absolute;
      bottom: 15px;
      left: 27%;
      width: 45%;
      font-size: 14px;
      text-align: center;
      color: #ffffff;
      margin: 0 auto;
      cursor: pointer;
      span {
        border-bottom: solid 1px #fff;
        position: relative;
        top: 2px;
      }
    }
  }
}
