/* Estilos CSS para o círculo giratório da página de login*/
#spinner{

    display: none;
    position: fixed;
    top: 48%;
    left: 48%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    animation: spin 2s linear infinite;
    z-index: 99;

}

#spinner_litle{
    position: absolute;
    top: 5px;
    left: 45%;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    animation: spin 2s linear infinite;
    z-index: 99;
    border: 1px solid black;

}

@keyframes spin {

    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    
}

.spinner_ball{
    position: absolute;
    height: 13px;
    width: 13px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .45);
    backdrop-filter: blur(3px);
    box-shadow: inset 1px 1px 1px 1px green, -1px -1px 3px 3px white;
}

.spinner_litle_ball{
    position: absolute;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .45);
    backdrop-filter: blur(3px);
    box-shadow: inset 1px 1px 1px 1px green, -1px -1px 3px 3px white;
}

.spinner_ball:nth-child(1) { top: 18px; left: 0; transform: rotate(315deg);}
.spinner_ball:nth-child(2) { top: 5px; left: 5px; transform: rotate(0deg);}
.spinner_ball:nth-child(3) { top: 0; left: 18px; transform: rotate(45deg);}
.spinner_ball:nth-child(4) { top: 5px; right: 6px; transform: rotate(90deg);}
.spinner_ball:nth-child(5) { right: 0; top: 18px; transform: rotate(135deg);}
.spinner_ball:nth-child(6) { right: 5px; bottom: 6px; transform: rotate(180deg);}
.spinner_ball:nth-child(7) { right: 19px; bottom: 0; transform: rotate(225deg);}
.spinner_ball:nth-child(8) { left: 5px; bottom: 6px; transform: rotate(240deg);}





.spinner_litle_ball:nth-child(1) { bottom: 11px; left: 0; transform: rotate(315deg);}

.spinner_litle_ball:nth-child(2) { top: 3px; left: 3px; transform: rotate(0deg);}

.spinner_litle_ball:nth-child(3) { top: 0; left: 11px; transform: rotate(45deg);}/*1*/

.spinner_litle_ball:nth-child(4) { top: 3px; right: 3px; transform: rotate(90deg);}/*2*/

.spinner_litle_ball:nth-child(5) { top: 11px; right: 0px; transform: rotate(135deg);}/*3*/

.spinner_litle_ball:nth-child(6) { right: 3px; bottom: 3px; transform: rotate(180deg);}/*4*/

.spinner_litle_ball:nth-child(7) { right: 11px; bottom: 0px; transform: rotate(225deg);}

.spinner_litle_ball:nth-child(8) { left: 3px; bottom: 3px; transform: rotate(240deg);}