@charset 'utf8';

:root{
    --palAzul01: #0511F2;
    --palAzul01b: #0511f249;
    --palAzul02: #29A7D9;
    --palAzul02b: #29a7d917;
    --palVerde01: #8DBF41;
    --palVerde01b: rgba(141, 191, 65, 0.267);
    --palLaranja01: #F2911B;
    --palLaranja01b: rgba(242, 145, 27, 0.267);
    --palPreto01: #0D0D0D;

    --gradiente01: linear-gradient(to left, var(--palAzul01),transparent);
    --gradiente02: linear-gradient(to left, var(--palLaranja01b), var(--palLaranja01));
    --gradiente03: linear-gradient(to left, var(--palVerde01b), var(--palVerde01));
}

*{
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

html{
    /* border: 2px solid white; */
    align-items: center;
    background-image: var(--gradiente02);
    background-size: 100vw 100vh;
    display: flex;
    height: 100vh;
    justify-content: center;
    width: 100vw;
}

body{
    /* border: 2px solid green; */
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    align-items: center;
    width: 300px;
}

main{
    /* border: 2px solid yellow; */
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 90%;
    justify-content: center;
    width: 90%;
}

main > section.logo > img{
    /* border: 2px solid blue; */
    display: block;
    height: 100%;
    padding: 1rem;
    width: 100%;
}

main > section.login{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

main > section.login > p{
    align-items: center;
    display: flex;
    gap: .5rem;
    justify-content: space-around;
}

main > section.login > p.erro{
    color: red;
    display: none;
    text-shadow: 0px 0px 5px white;
}

main section label{
    /* border: 1px solid white; */
    color: white;
    text-align: right;
    text-shadow: 0px 0px 3px black;
    width: 30%;
}

main section input{
    border: none;
    border-radius: 10px;
    padding: .3rem .5rem;
    width: 70%;
}

button{
    background: rgb(81, 0, 255);
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 5px #464646;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    padding: .7rem 3rem;
    text-shadow: 0px 0px 3px black;
    transition: 0.3s;
}

button:hover{
    opacity: 50%;
}

#section_menu_sistemas{
    max-height: 50%;
    /* border: 2px solid red; */
}

#section_menu_sistemas, 
#section_menu_sistemas > div#div_men_sistemas, 
#section_menu_sistemas > div#div_men_sistemas > div.card{
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}

#section_menu_sistemas > div#div_men_sistemas{
    overflow-y: scroll;
    padding: .5rem 0rem;
}

#section_menu_sistemas, 
#section_menu_sistemas > div#div_men_sistemas{
    gap: 1rem;
}

#section_menu_sistemas > div#div_men_sistemas > div.card{
    background: var(--gradiente03);
    border-radius: 10px;
    box-shadow: 0px 0px 0px 2px white;
    cursor: pointer;
    gap: .3rem;
    justify-content: center;
    min-height: 5rem;
    margin: 0% 5%;
    padding: .5rem;
    width: 90%
}

#section_menu_sistemas > div#div_men_sistemas > div.card > h3{
    color: var(--palAzul01);
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 0rem 0rem 5px white;
}

#section_menu_sistemas > div#div_men_sistemas > div.card > h4{
    color: white;
    font-size: .8rem;
    text-shadow: 0rem 0rem 5px var(--palAzul01);
}

footer{
    /* border: 1px solid red; */
    color: white;
    text-shadow: 0px 0px 3px black;
    display: flex;
    justify-content: center;
    /* margin-top: 2rem; */
    width: 100%;
}

/* footer p { */
    /* border: 1px solid black; */
/* } */

.oculto{
    display: none !important;
}