/*********************************
     IMPORT MAIN PACKAGE
**********************************/
@import "./../../../assets/css/main.css"; 


/*********************************
            Default
**********************************/
.notice{
    background-color:var(--dark);
    color:var(--white);
    padding:5px 10px;
    border-radius:3px;
    position:relative;
}

/*********************************
            HEADER
**********************************/
header .flash_screen{
    text-align:center;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    flex-direction:column;
}

header .flash_screen .buttons{
    margin-top:3rem;
    gap:1rem;
}

/*********************************
            DIVISIONS
**********************************/
.divisions{
    align-items:center;
    flex-wrap:wrap;
    flex-direction:column;
    justify-content:center;
    gap:4rem;
    display:none;
}

.division_1{
    display:flex;
}

.divisions .action_buttons{
    gap:1rem;
}

/*division_2*/
.division_2 article{
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:2rem;
    text-align:center;
}

.input_buttons{
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:center;
}   

.input_buttons .input_button{
    padding:5px 10px;
    border:1px solid rgba(1,1,1,0.3);
    border-radius:3px;
    background-color:transparent;
    color:var(--gray);
    transition:0.5s;
    cursor:pointer;
    position:relative;
    display:inline-block;
}

.input_buttons .input_button:hover{
    border:1px solid rgba(1,1,1,0.8);
    color:var(--dark);
}

.input_buttons .active, .input_buttons .active:hover{
    background-color:var(--dark);
    color:var(--primary);
}

.input_buttons .active mark{
    position:absolute;
    top:-10px;
    left:-10px;
    z-index:1;
    border-radius:50%;
    width:20px;
    height:20px;
    background-color:var(--secondary);
    color:var(--dark);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
}

.input_buttons .input_button input{
    display:none;
}


/*division_3*/
.division_3 article{
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:2rem;
    text-align:center;
}

.division_3 form{
    width:50%;
}

form fieldset, .input_field{
    width:100%;
    border:2px solid rgba(1,1,1,0.2);
    border-radius:5px;
    margin:0;
    padding:0;
    overflow:hidden;
}

form fieldset input, .input_field input{
    width:100%;
    padding:0.8rem 1rem;
    border:0;
    width:100%;
}

form fieldset .btn, .input_field .btn{
    display:flex;
    align-items:center;
    justify-content:center;
}


/*DIVISION_4*/
.division_4 article{
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
}

.division_4 form, .division_4 .input_field{
    width:50%;
    display:block;
    margin-top:2rem;
}

@media (max-width:540px){
    .division_4 form, .division_4 .input_field{
        width:100%;
    }
    
    .input_buttons .active mark{
        font-size:11px;
        width:18px;
        height:18px;
        top:-8px;
        left:-8px;
    }
}