@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


 .fade-in-div-goups {
  opacity: 0;
  transform: scale(0.75);
  animation: fadeInScale 0.6s ease-out forwards;
  /* opcional: para evitar glitches */
  will-change: opacity, transform;
  height: 60px;
  padding: 10px;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.75);
  }
  to {
    opacity: 1;
    transform: scale(0.95);
  }
}


html{
    min-height: 100vh;
    background-color: var(--branco);
}
:root{
    font-family: "Roboto", sans-serif;

    --cor01:#343434;
    --cor02:#707070;
    --cor02-1:#DBDBDB;
    --cor03:#F3F3F3;
    --cor04:#E22323;
    --cor05:#4CAA47;
    --cor06:#EBDF65;
    --cor08:#d0d2d1;
    --cor09:rgb(0, 225, 255);

    --boxshadow: 0px 3px 6px rgba(0, 0, 0, 0.205);

}

.imgLoading{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 22220;
    width: 100px;
    transform: translate(-50%,-50%);
}

.cursorPointer{
    cursor: pointer;
}
.mensagemStatus{
    width: 300px;
    height: 0px;
    background-color: var(--cor05);
    z-index: 330;
    border-radius: 10px 10px 0px 0px ;
    font-size: 0.8em;
    animation: animacao 2.5s linear;
    overflow: hidden;
    color: var(--cor01);
    justify-content: center;
    align-items: center;
    
}

.error{
    background-color: #f44343;
    color: white;
}


@keyframes animacao{
    0% {
        height: 0;
    }
    10%{
        height: 40px;
    }
    90%{
        height: 40px;
    }
    100%{
        height: 0px;
    }
}




.headerFiltro{
    margin-top: 20px;
    background-color: var(--cor01);
    color: var(--cor06);
}
.headerFiltro2{
    background-color: var(--cor02);
    color: var(--cor03);
}

.green{
    color: var(--cor06);
}



.bgGrenn{
    background-color: var(--cor05);
}
.bgGrenn2{
    background-color: var(--cor06);
    color: black;
}
.bgGray{
    background-color: var(--cor02);
}

.gray{
    background-color: rgb(161, 161, 161);
}

.grenn{
    background-color: #25dc1b;
}
.bgRed{
    background-color: var(--cor04);
}
.bgBlue{
    background-color: var(--cor09);
}

.visibilityHidden{
  visibility: hidden;
}
.displayNone{
    display: none;
}


.displayFlex{
    display: flex;
}

.columnCenterBetween{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.columnCenterArround{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.columnLeftBetween{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: left;
}


.columnCenterCenter{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
}

.columnCenterCenterSpecial{
   
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
}
.columnCenterStart{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
  
}

.columnCenterAround{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    
}

.rowCenter{
    display: flex;
    flex-direction: row;
    align-items: center;


    
}
.rowCenterCenter{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    

    
}

.rowCenterStart{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    

}

.rowCenterCenterAround{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    

    
}

.rowCenterCenterAroundSpecial{

    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    

    
}
.rowCenterBetween{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    

    
}

.visibilityHidden{
    visibility: hidden;
}


abbr{
    text-decoration: none;
    height: 30%;
    max-height: 30px;
}