@import url('https://fonts.cdnfonts.com/css/poppins');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: rgb(63,94,251);
    background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(70,195,252,1) 100%);
}
.wrapper {
    height: 350px;

    background: #fff;
    max-width: 410px;
    border-radius: 8px;
    padding: 16px 25px;
    box-shadow: 3px 5px 5px rgba(255, 255, 255, 0.5);

    transition: height 0.2s ease;

    overflow: hidden;
}
header h1 {
    font-size: 22px;
    font-weight: 500;
}
header p {
    font-size: 16px;
    margin-top: 5px;
    color: #474747;
}
.wrapper .form {
    margin: 20px 0 25px;
}
.form :where(input, button) {
    width: 100%;
    height: 55px;
    border: none;
    outline: none;
    border-radius: 6px;
}
.form input {
    font-size: 18px;
    border: 1px solid #999;
    padding: 0 17px;
}
.form button {
    background: rgb(63,94,251);
    background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(70,195,252,1) 100%);
    margin-top: 20px;
    color: #fff;
    cursor: pointer;
    font-size: 18px;

    transition: 0.5s ease;
}
.form button:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.5);
}
.qr-code {
    border: 1px solid #ccc;

    opacity: 0;
    pointer-events: none;

    padding: 33px 0;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    display: flex;

    max-width: 550px;
    width: 100%;
    max-height: 530px;
    height: 250px;

    position: relative;
}
.qr-code img {
    width: 50%;
    height: 50%;
    position: absolute;
    
    display: flex;
    text-align: center;
}

.active {
    height: 630px;
}

.wrapper.active .qr-code {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s 0.5s ease;
}

/* Segunda parte do QR Code */

.container.moveToReadQrCode .wrapper{
   display: none;
}
.wrapperReader {

    width: 420px;
    height: 270px;
    background: transparent;
    padding: 30px 30px 35px;
    border-radius: 7px;
    box-shadow: 3px 5px 5px rgba(255, 255, 255, 0.5);
    border: 1px solid #fff;
   
    margin-top: 2rem;

    display: none;

    position: absolute;

    transition: height 0.2s ease;
}
.wrapperReader form {
    background: #e3f2fd;
    height: 225px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 7px;
    height: 210px;
    cursor: pointer;

    transition: height 0.2s ease;
}
.wrapperReader form img {
    max-width: 148px;
    display: none;
}
.wrapperReader form .content {
    display: none;
}
.wrapperReader form .content ion-icon{
    color: #0b85ff;
    font-size: 55px;
}
.wrapperReader form .content p{
    color: #0b85ff;
    font-size: 16px;
    margin-top: 15px;
}
.wrapperReader .details {
    margin-top: 25px;
    opacity: 0;
    pointer-events: none;
}
.wrapperReader .details textarea {
    width: 100%;
    height: 128px;
    padding: 10px 15px;
    background: none;
    outline: none;
    border: 1px solid #fff;
    border-radius: 6px;
    color: #fff;
    font-size: 18px;
}
.wrapperReader .details .buttons{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.wrapperReader button {
    height: 55px;
    width: calc(100%/ 2 - 10px);
    outline: none;
    border: none;
    color: #0b85ff;
    background: #fff;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 500;
}

.container.moveToReadQrCode .wrapperReader {
    display: block;
    position: relative;
}

.wrapperReader.activeReader {
    height: 525px;
}

.wrapperReader.activeReader form {
    height: 225px;
    pointer-events: none;
}

.wrapperReader.activeReader form img {
    display: block;
}

.wrapperReader.activeReader .details {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s 0.5s ease;
}