.paginaTopo {

    width: auto;
    margin: 15px 0;
    background: white;
    color: #575757;
    padding: 10px;

}

.paginaTopoTitulo {

   display:grid;
   font-size: 17px;
   font-weight: bold;
   color: grey;
   fill: grey;
   gap: 5px;
   text-transform: capitalize;
   align-items: center;
   padding-bottom: 3px;

}

.paginaTopoTitulo>svg {

   width: 20px;
   height: 20px;
   
}

.paginaTopoNav{
   width: 100%;
   padding: 0;
   display: flex;
   place-items: center;
   border: 2px solid #80808063;
   border-left: 0;
   border-right: 0;
   flex-wrap: wrap;
   place-content: space-between;
}

.paginaTopoFiltro{
   
    padding-top: 5px;
    place-content: space-around;
    place-items: center;
    display: flex;

}

.paginaTopoNav>.paginaTopoNavNovo {

   margin: -2px 0 -2px 0;
   border-radius: 0;
   padding:15px;

}

.labelEA {
   display: inline-grid;
   margin-left: 5px;
   gap: 5px;
}

.paginaCardEAModelo{
   border: solid 1px;
   margin: 4px 0;
   padding: 3px;
   width: calc(100% - 6px);
   text-align: left;
   color: var(--pagCardColor);
   background: var(--pagCardBGColor);
   border-radius: var(--pagCardRadius);
}

.paginaCardEATituloModelo{
   /*background-color: #f7c31a;*/
   border: solid 1px;
   margin: 3px auto;
   padding: 3px 5px;
   width: calc(100% - 16px);
   font-weight: 550;
   text-align: left;
   color: var(--pagCardTituloColor);
   background-image: var(--pagCardTituloBGImage);
   background-color: var(--pagCardTituloBGColor);
   border-radius: var(--pagCardTituloRadius);
}
.paginaCardEAModelo .paginaCardEATituloModelo p{
   margin:5px;
}

.shadow{
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.pagEAModelo_1{

   --pagCardBGColor: transparent;
   --pagCardColor: black;
   --pagCardRadius:0px;
   --pagCardTituloColor: black;
   --pagCardTituloBGImage:unset;
   --pagCardTituloBGColor: #f7c31a;
   --pagCardTituloRadius:0px;

}

.pagEAModelo_2{

   --pagCardBGColor: white;
   --pagCardColor: #888888;
   --pagCardRadius: 5px;
   --pagCardTituloColor: white;
   --pagCardTituloBGImage: linear-gradient(#999999, #888888, #999999);
   --pagCardTituloBGColor: #f7c31a;
   --pagCardTituloRadius: 5px;

}
.pagEAModelo_3{

   --pagCardBGColor: white;
   --pagCardColor: #999999;
   --pagCardRadius: 5px;
   --pagCardTituloColor: white;
   --pagCardTituloBGImage: linear-gradient(#999999, #888888, #999999);
   --pagCardTituloBGColor: unset;
   --pagCardTituloRadius: 5px;

}

.btn_2.c_filtro,
.btn_2.c_filtro2:hover{
    --c_filtro:#343333;
    gap:5px;
    border:2px solid !important;
    border-color:var(--c_2) !important;
    background: var(--c_filtro) !important;
    color: var(--c_2) !important;
    fill: var(--c_2) !important;   
}
.btn_2.c_filtro:hover,
.btn_2.c_filtro2{
   --c_filtro:#343333;
    gap:5px;
    border:2px solid !important;
    border-color:var(--c_filtro) !important;
    background: var(--c_2) !important;
    color: var(--c_filtro) !important;
    fill: var(--c_filtro) !important;   
}

.btn_2.c_icon{
   --c_icon:#343333;
   gap:5px;
   border:2px solid !important;
   border-color:var(--c_2) !important;
   background: var(--c_icon) !important;
   color: var(--c_2) !important;
   fill: var(--c_2) !important;   
}
.btn_2.c_icon:hover{
   gap:5px;
   border:2px solid !important;
   border-color:var(--c_icon) !important;
   background: var(--c_2) !important;
   color: var(--c_icon) !important;
   fill: var(--c_icon) !important;   
}

.btn_2.c_icon>svg{
   max-height: 15px;
   max-width: 15px;
}
.btn_2.c_icon>font{
   place-content: center;
   place-items: center;
   display: flex;
}

@media only screen and (max-width: 600px) {
   .btn_2.c_icon>font{
       display:none;
   }
   .btn_2.c_icon>svg{
       max-height: 20px;
       max-width: 20px;
   }
}

.pagEAModelo_1 select {
   outline: 0;
   border: 1px solid #80808061;
   box-shadow: none;
   font-weight: 600;
   padding: 0.5em 0 0.5em 0.5em;
   color: grey;
   background-color: white;
   cursor: pointer;
   max-width: fit-content;
   margin: 10px;
   height: inherit;
}

.pagEAModelo_1 .labelmarcadesmarca>img {
   margin: 5px;
}

.pagEAModelo_1 .labelmarcadesmarca>label {
   margin: auto;
   border-radius: 0;
   padding: 4px;
}

.pagEAModelo_1 .labelmarcadesmarca>img {
   margin: 5px;
   max-width: 100px;
   min-width: 100px;
}

.pagEAModelo_1 .labelmarcadesmarca p {
   background: #f8f8f8;
   border: 1px solid grey;
   width: calc(100% - 150px);
   display: flex;
   place-content: center;
   place-items: center;
   text-align: center;
   padding: 3px;
}

.pagEAModelo_1 textarea {
   outline: none;
   width: auto;
   padding-top: 5px;
   padding-bottom: 5px;
   margin-top: 15px;
   border-radius: 5px;
   border: 1px solid var(--c_f);
   font-size: 15px;
   resize: none;
   transition: 0.4s ease-in-out;
   width: calc(100% - 10px);
}

.pagEAModelo_1 .tituloComent {
   outline: none;
   width: auto;
   padding-top: 5px;
   padding-bottom: 5px;
   margin-top: 15px;
   border-radius: 5px;
   border: 1px solid var(--c_f);
   font-size: 15px;
   resize: none;
   transition: 0.4s ease-in-out;
   width: calc(100% - 10px);
}

.paginaTopoNav:empty {
   border-bottom:0px;
}

.paginaTopoFiltro .book:before,
.paginaTopoFiltro .book:after{
   content:unset !important;
}

.progress{
   background: #efefef;
   width: 347px;
   height: 15px;
}

.progress:after {
   content: "";
   background: #8BC34A;
   width: inherit;
   height: inherit;
   position: absolute;
   transition: calc( var(--time) * 1s);
   transform: scaleX(0.95);
   transform-origin: left;
   animation: percent calc( (var(--time) + 1) * 1s) ease-in-out;
}

.pagina_mensagens_topo_btns {

   --paddingItens: 0 10px;
   --corAtv: yellow;
   --corTxtAtv: #2f2f2f;
   width: 100%;
   display: flex;
   place-content: space-evenly;
   place-items: center;
   gap: 5px;

}

@keyframes percent {
   0% {
      background: #009688;
      transform: scaleX(0.0);
  }
  8% {
      transform: scaleX(0.0);
  }
  10% {
      transform: scaleX(0.20);
  }
  50% {
      transform: scaleX(0.40);
  }
  90% {
      transform: scaleX(0.90);
  }
  100% {
      background: #8BC34A;
      transform: scaleX(0.95);
  }
}

@media only screen and (min-width: 600px) {
   .pagEAModelo_1 .labelmarcadesmarca>label {
       padding: 9px;
       border-radius: 5px;
   }
}