body {
    font-family: "Roboto", sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;     /* Fixes the height to the exact window dimension */
    overflow: hidden;  /* Cuts and eliminates any scrollbar */
    /* INTEGRATED ACCESS PANEL BACKGROUND IMAGE */
    background-image: url('../images/bg-logistica.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* The container will now adapt to the remaining space */
.container {
    position: relative; /* Keeps the reference for internal absolutes to work */
    width: 100%;
    max-width: 797px;
    height: 380px; /* Defines a fixed height so the box never stretches */
    box-shadow: 0 0 10px rgb(3, 3, 3);
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
    flex-grow: 0;   /* PREVENTS the box from stretching downwards */
    margin: auto;   /* Perfectly centers horizontally and vertically */
}
.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(246, 248, 252, 0.582); /* Your background is now here */
    z-index: -2; /* Stays behind the mask which is -1 */
}
#login, #cadastro{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 2s ease;
}
.col-40{
    width: 40%;
    padding: 20px 40px;
}
.col-60{
    width: 50%;
    padding: 40px 20px;
}
.form-login{
    text-align: center;
}
.form-login input{
    width: 100%;
    border: none;
    outline: none;
    border-bottom: solid 1px #333;
    padding: 5px 0;
    margin-bottom: 20px;
}
.form-login button{
    width: 100%;
    border: solid 1px#333;
    background-color: #fff;
    padding: 10px;
    border-radius: 200px;
    cursor: pointer;
}
.form-login p{
    font-size: 12px;
    text-align: center;
}
.text-login{
    color: #fff;
}
#cadastro .text-login{
    text-align: right;
    padding-left: 10px;
    transform: translateY(-30px); /* Moves text up so it doesn't leave the mask */
}
#cadastro .col-60 {
    padding-right: 50px; /* Reduces useful width to not invade the blue background */
}
.mascara{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #0894aa;
    top: 0;
    left: -60%;
    z-index: -1;
    transform: skewX(-40deg);
    transition: all 1s 1s ease;
}
#cadastro:target, #login:target{
    transition: all 1s 2s ease;
}
/* Functionality to show only after click */
#cadastro:target ~ .mascara{
    transform: skewX(40deg);
    left: 60%;
}
#cadastro:not(:target), #login:not(:target){
    opacity: 0;
    z-index: -2;
}

.form-login .select-register {
    width: 100%;
    border: none;
    outline: none;
    border-bottom: solid 1px #333;
    padding: 5px 0;
    margin-bottom: 20px;
    background: #fff;
    font-family: "Roboto", sans-serif;
    color: #333;
    cursor: pointer;
}
 .error-message-register,
 .error-message-login-invalid,
 .error-message-login-pending,
 .error-message-login-registered {
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
 }

 .error-message-register,
 .error-message-login-invalid {
    color: #b91c1c;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
 }

 .error-message-login-pending {
    color: #b45309;
    background-color: #fffbeb;
    border: 1px solid #fde68a;
 }

 .error-message-login-registered {
    color: #15803d;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
 }
 
 / *   A d d e d   f r o m   a u t h / l o g i n . p h p   * /  
 . l o g i n - t o g g l e - l i n k   {   f o n t - w e i g h t :   7 0 0 ;   c o l o r :   # 0 0 5 6 b 3 ;   b a c k g r o u n d :   r g b a ( 0 ,   8 6 ,   1 7 9 ,   0 . 1 ) ;   p a d d i n g :   4 p x   1 2 p x ;   b o r d e r - r a d i u s :   2 0 p x ;   t e x t - d e c o r a t i o n :   n o n e ;   f o n t - s i z e :   1 4 p x ;   m a r g i n - l e f t :   5 p x ;   t r a n s i t i o n :   a l l   0 . 3 s ;   }  
 . l o g i n - t o g g l e - l i n k : h o v e r   {   b a c k g r o u n d :   r g b a ( 0 ,   8 6 ,   1 7 9 ,   0 . 2 ) ;   }  
 