/*---------------------------- Mobile Version ---------------------- */
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root
{
    --box-width: 400px;
    --box-height: 600px;

    --overlay-p-i: -1px; 
    --overlay-p-f: 50em; 

    --overlay-rea: 280px;
    --overlay-rea-i: 270px;

    --box-min-width: 400px;
    --box-min-height: 390px;
}

body
{
    background-color: rgb(26, 33, 51);
}



.cadastro
{
    margin-bottom: -9%;
    z-index: 2;
}

.login
{
    z-index: 1;
}

/*--------------------------------- box container --------------------------------------------------------*/
.cadastro, .login
{
   box-shadow: 0px 10px 16px 1px rgba(11, 17, 34, 0.788);
   border: 1px solid rgba(255, 160, 96, 0.747); 
   background-color: rgb(19, 27, 48);
   margin-top: 20%;
   margin-left: 6%;
   border-radius: 8px;
   padding: 15px;
   max-width: var(--box-width);
   width: 100%;
   min-width: var(--box-min-width);
}

.cadastro
{
    margin-top: 3em;
}

.cadastro h3, .login h3
{
    color: rgb(253, 250, 248);
    font-size: 30px;
    text-align: center;
    font-weight: 900;
    padding: 5px;
}

.mobile .user-input
{
    margin-bottom: 10px;
    margin-top: 3%;
    box-shadow: 0px 5px 16px 1px rgb(12, 18, 34);
    border-radius: 12px;
}

.mobile .user-input:hover
{
    border: 1px solid orange;
}

.mobile .submit-cad
{
    margin: 8% 1% 1% 36%;
}

.mobile .user-data div span
{
    background-color: #c6ccca;
    color: rgb(28, 30, 32);
    font-weight: 500;
}

.mobile .user-data button
{
    max-width: 200px;
    width: 100%;
    font-weight: 700;
    font-size: 18px;
    margin: 20px 25.5%;
}

/*---------------------------- OVERLAY CHANNEL -----------------------------*/

.overlay-box
{
    position: absolute;
    /*------------  Height and Width  -----------*/
    max-height: calc(var(--box-height) - var(--overlay-rea));
    max-width: calc(var(--box-width) + 40px);
    height: 100%;
    width: 100%;
    min-width: 430px;
    min-height: var(--box-min-height);
    background-color: rgb(26, 47, 78);
    transform: translateY(-95%);
    border-radius: 9px;
    border: 1px solid orange;
    z-index: 3;margin-left: 0.6em;
    transform: translateY(-24em);
    /* transform: ; */
    /* transform: translateX(20px); */
    transition: all .3s ease;
}

.overlay-content
{
    color: rgb(235, 218, 218);
    text-align: center;
    margin-top: 35%;
    display: block;
}


/*---------------- button preset -------------------*/
.btn-reg
{
    box-shadow: 0px 5px 16px 1px rgb(12, 18, 34);
    background-color: rgb(29, 71, 187);
    transition: all .84s ease;
    border-radius: 9px;
    font-weight: bold;

    max-width: 15em;
    max-height: 65px;
    width: 100%;
    height: 100%;

    color: white;
    padding: 20px;
    border: none;
    outline: none;

    margin-top: 3%;
    margin-left: 18.5%;
}

.btn-reg:hover
{
    background-color: red;
}

.active
{
    transform: translateY(-758px);
    height: var( --overlay-rea-i);
}