.main {
    background: rgba(0, 0, 0, 0.5);
    top: 95px;
}

.pix_box {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.pix {
    display: flex;
    flex-direction: column;
}

.pix_data {
    height: auto !important;
    margin-left: 20px;
}

.generate {
    padding: 5px;
    margin-top: 10px;
}

.compact {
    display: none;
}

input {
    width: 98%;
}

textarea {
    width: 360px;
    height: 120px;
}

hr {
    margin: 10px 0px;
}

@media screen and (max-width: 800px) {
    .main {
        margin: 0px 5px;
        padding: 0px;
        top: 85px;
    }

    .pix_box {
        flex-direction: column;
        scroll-behavior: smooth;
        height: calc(100vh - 175px);
        overflow-y: scroll;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    .pix_box::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
    }

    .pix_data {
        margin-left: 0px;
    }

    .no_show {
        display: none;
    }

    .compact {
        display: block;
    }

    textarea {
        width: 98%;
        height: 360px;

    }
    .qrcode {
        margin-top: calc(80vw - 115px);
    }

    hr {
        margin: 5px 0px;
    }

}