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

.panel-wrapper {
  background: linear-gradient(to bottom, #00c4ff, #0091ff);
  font-family: 'NunitoSans';

  header {
    height: 60px;
    width: 100%;

    &.invisible {
      visibility: hidden;
    }

    .button-section {
      height: 100%;
      width: 20%;
      float: left;

      .back-button {
        position: relative;
        top: calc(50% - 18px);
        left: calc(50% - 18px);
        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%;
      }
    }
  }

  section {
    height: 454px;
    position: relative;
  }

  footer {
    bottom: 0;
    margin-bottom: 20px;
    position: absolute;
    text-align: center;
    width: 100%;

    span {
      color: #99d9ff;
      font-size: 14px;
      font-weight: 300;

      .footer-link {
        color: white;
        text-decoration: none;
        cursor: pointer;
      }
    }
  }
}
