* {
    box-sizing: border-box;
}

body {
    padding: 2px;
    background: #009c3b;
    font-family: Arial, Tahoma, Verdana;
    font-size: 15px;
    font-weight: bold;
    color: #002776;
    font-weight: bold;
}
a {
    font-weight: bold;
    text-decoration: none;
    color: #009c3b;
}

table { 
    border: none;
    padding: 2px;
    vertical-align: middle;
}

table, th {
    font-weight: bold;
    vertical-align: middle;
}

table, td {
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
}


input[type=text], input[type=number], input[type=password], input[type=email], input[type=file], select {
    height: 24px;
    background-color: #ffffff;
    color: #002776;
    padding: 2px;
    border: 1px solid #002776;
}

    input[type=text]:focus, input[type=number]:focus, input[type=password]:focus,
    input[type=email]:focus, input[type=file]:focus, select:focus {
        height: 25px;
        background-color: #FFFFFF;
        color: #002776;
        padding: 2px;
        border: 2px solid #002776;
    }

input[type=button] {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}


#divCabecalho {
    width: 100%;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    text-align: center;
}

 
#divRodape {
    width: 100%;  
    margin: 0;
    padding: 0;
    vertical-align: middle;
    text-align: center;
    font: 13px, verdana;
}


#menusup {
    overflow: hidden;
    font-size: 14px; 
    color: #ffffff;
}
#menusup ul {
    list-style: none;
    margin: 0;
    padding: 0;

}
#menusup ul li {
    float: left;
    position: relative;
    display: inline-grid;
}
    #menusup ul li a {
        text-decoration: none;
        margin: 1px;
        padding: 5px 5px;
        display: block;
        color: #ffffff;
    }
#menusup li ul {
    display: none;
}
    #menusup ul li a:hover { 
        color: #002776;
    }
#menusup li:hover ul {
    display: block;
    position: relative;
}
#menusup li:hover li {
    float: none;
    font-size: 14px;

}


/* Style the top navigation bar */
.menusub {
    overflow: hidden;
    font-size: 14px; 
}

/* Style the topnav links */
    .menusub a {
        float: left;
        display: block;
        color: #ffffff; 
        margin: 1px;
        padding: 5px 5px;
        text-decoration: none;
    }
/* Change color on hover */
        .menusub a:hover { 
            color: #002776;
        }


 
#tableApuracao, th {
    font-weight: bold;
}

#tableApuracao, td {
    font-weight: normal;
}

/* Create three unequal columns that floats next to each other */
.column {
    float: left;
    padding: 10px;
}

/* Left and right column */
.column.side {
    width: 33%;
}

/* Middle column */
.column.middle {
    width: 34%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both; 
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column.side, .column.middle {
        width: 100%;
    }
}


/* Define a animação */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Aplica a animação ao elemento */
.elemento-animado {
    opacity: 0; /* Começa invisível */
    animation: fadeIn 1s ease-out forwards; /*c Inicia a animação imediatamente ao carregar */
}

/* Selecione o elemento que você quer girar */
.meu-elemento {
    /* Rotação de 45 graus no sentido horário */
    transform: rotate(45deg);
}

.meu-elemento-animado {
    /* Define a duração da transição */
    transition: transform 0.5s ease;
}

    .meu-elemento-animado:hover {
        /* Gira 360 graus ao passar o mouse */
        transform: rotate(360deg);
    }