:root
{
  --tema: #0274FF;
  --bolha: #000;
  --modo: #fff;
  --texto-primario: #000;
  --texto-secundario: #333;
}
/*
@media( prefers-color-scheme: dark)
{
 :root
  {
    --modo: #333;
    --bolha: #fff;
    --texto-primario: #fff;
    --texto-secundario: #ddd;
  }
}
 */
 
 .dark-mode
  {
    --modo: #333;
    --bolha: #fff;
    --texto-primario: #fff;
    --texto-secundario: #ddd;
  }

@font-face {
  font-family: Roboto Light;
  src: url('../Fontes/Roboto-Light.ttf');
}

@font-face {
  font-family: Product Sans;
  src: url('../Fontes/ProductSans.ttf');
}

@font-face {
  font-family: Material Symbol;
  src: url('../Fontes/Icones/Material-Symbols-Outlined.woff2');
}

@font-face {
 font-family: Modern Sans;
 src: url('../Fontes/ModernSans-Light.otf');
}

@font-face {
 font-family: Future Earth;
 src: url('../Fontes/future-earth.ttf');
}

html
{
 opacity: 1
}



body
{
  padding: 0;
  margin: 0;
  color: #333;
  margin: 0 30px;
  background: #e7e8ee;
  font-family: Product Sans, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6
{
  font-weight: normal;
}



[icone]:before,
.icone
{
  content:  attr(icone);
  text-transform: lowercase;
  font-family: Material Symbol;
  font-style: normal;
  font-weight: 500;
}


input[type=checkbox].switch-design
{
  all: unset;
  display: inline-flex;
  align-items: center;
  width: 45px;
  height: 27px;
  --checado: calc(100% - 20px);
  --posicao: 5px;
  background: #ccc;
  -webkit-border-radius: 40px;
  -moz-border-radius: 26;
  border-radius: 25px;
  position: relative;
  outline: none;
}


input[type=checkbox].switch-design:after
{
  content: '';
  position: absolute;
  left: var(--posicao);
  width: 20px;
  height: 20px;
  background: var(--modo);
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
  transition: 120ms linear
}

input[type=checkbox].switch-design:checked
{
  background: var(--tema);
  --posicao : calc( 100% - 22px)
}

input[type=checkbox].switch-design:active:after,
input[type=checkbox].switch-design.ativo:after
{
  transform: scale(0.5);
}

input[type='radio'][class*='radio-design']
{
  all: unset;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 15px;
  width: 15px;
  border: 1px #aaa solid;
  border-radius: 16px;
  transition: 200ms linear;
}
  
input[type='radio']:disabled[class*='radio-design']
{
  background: #ddd;
}


input[type='radio'][class*='radio-design']:focus
{
  border-color: var(--tema);
}

input[type='radio'].radio-design-1,
input[type='radio'].radio-design-2,
input[type='radio'].radio-design-3,
input[type='radio'].radio-design-2:after
{
  transition: 200ms linear
}

input[type='radio'].radio-design-1:after
{
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border-radius: 100%;
  background: transparent;
  transition: 200ms linear;
}

input[type='radio'].radio-design-1:checked
{
  border-color: var(--tema);
}

input[type='radio'].radio-design-1:checked:after
{
  background: var(--tema);
  height: 65%;
  width: 65%;
}

input[type='radio'].radio-design-2:after
{
  content: '';
  position: absolute;
  width: 0%;
  height: 0%;
  border-radius: 100%;
  background: var(--modo);
}


input[type='radio'].radio-design-2:checked:after
{
  height: 50%;
  width: 50%;
}

input[type='radio'].radio-design-2:checked
{
  background: var(--tema);
  border-color: var(--tema);
}

input[type='radio'].radio-design-3:checked
{
  background: var(--tema);
  border-color: var(--tema);
}

button.btn,
button.btn-texto
{
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0 5px;
  height: 23px;
  padding: 6px 10px;
  background: var(--tema);
  color: #f8f8f8;
  font-size: 12px;
  border-radius: 5px;
  box-shadow: 0 5px 10px #00000035;
  transition: 200ms linear;
  margin-bottom: 5px;
  text-transform: uppercase;
  user-select: none;
  width: auto;
}

button.btn-texto
{
  position: relative;
  background: transparent;
  color: var(--tema);
  box-shadow: none;
  text-transform: uppercase
}


button.circular,
button.btn-texto.circular
{
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
}

button.btn.borda
{
  border: 1px var(--tema) solid;
  background: transparent;
  color: var(--tema);
  box-shadow: none
}


button.btn-texto.clicado,
button.btn-texto:active
{
  background: #00000025;
}

button.btn.clicado,
button.btn:active
{
  box-shadow: 0 0 0 #00000035;
  backdrop-filter: invert(5%);
  filter: invert(5%);
}


button.btn:disabled
{
  background: #ccc;
  color: #999;
  box-shadow: none
}


button.btn.borda:disabled
{
  border-color: #A1A1A1;
  background: transparent;
}

button.btn-texto:disabled
{
  color: #A1A1A1;
}


input[type = 'range'].range-design-1,
input[type = 'range'].range-design-2,
input[type = 'range'].range-design-3
{
  all: unset;
  height: 4px;
  width: 100px;
  background: #ccc;
  border-radius: 100px;
  position: relative;
}


input[type = 'range'].range-design-1::-webkit-slider-thumb,
input[type = 'range'].range-design-2::-webkit-slider-thumb,
input[type = 'range'].range-design-3::-webkit-slider-thumb

{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 15px;
  background: var(--modo)fff;
  box-shadow: 0 0 10px #00000025;
  position: relative;
  z-index: 1;
}

input[type = 'range'].range-design-2::-webkit-slider-thumb
{
 border: 4px var(--tema) solid;
}

input[type = 'range'].range-design-3::-webkit-slider-thumb
{
 background: var(--tema);
 height: 10px;
 width: 10px;
}
input[type = 'range'].range-design-1:after,
input[type = 'range'].range-design-2:after,
input[type = 'range'].range-design-3:after
{
  position: absolute;
  content: '';
  height: 100%;
  width: var(--progresso);
  background: var(--tema);
  border-radius: 100px;
}


input[type=checkbox].checkbox-design
{
  all: unset;
  display: inline-flex;
  border: 1.5px #aaa solid;
  height: 15px;
  width: 15px;
  background: transparent;
  border-radius: 3px;
  transition:  200ms linear;
  position: relative;
}

input[type=checkbox].checkbox-design:checked
{
  background: var(--tema);
  border-color: var(--tema);
}


input[type=checkbox].checkbox-design:after
{
  position: absolute;
  content: '';
  height: 65%;
  width: 30%;
  border-right: 2px #fff solid;
  border-bottom: 2px #fff solid;
  transform: rotate(45deg) scale(1, 0);
  left: 35%;
  top: auto;
  opacity: 0;
  transition:  200ms linear;
}


input[type=checkbox].checkbox-design:checked:after
{
  opacity: 1;
  transform: rotate(45deg);
}


.fab-vertical
{
  position: fixed;
  width: 50px;
  height: 50px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 80%;
  left: calc( 100% - 80px);
}

.fab-vertical button,
.fab-vertical ul li
{
  all: unset;
  color: #f8f8f8;
  background: var(--tema);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  font-size: 20px;
  box-shadow: 0 3px 10px #00000025;
  transition: 200ms linear;
  font-family: Material Symbol;
}

.fab-vertical button
{
  position: relative;
  height: 50px;
  width: 50px;
  z-index: 2;
}

.fab-vertical.extendido button
{
  transform: rotate(135deg)
}


.fab-vertical ul
{
  all: unset;
  bottom: auto;
  left: 0;
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px 0;
  width: 100%;
}

.fab-vertical ul li
{
  width: 40px;
  height: 40px;
  font-size: 18px;
  position: absolute;
  z-index: 1;
  bottom: -20px;
  transform: scale(0.5);
  opacity: 0;
}



.fab-vertical.extendido ul li
{
  bottom: var(--bottom);
  margin-bottom: -20px;
  transform: scale(1);
  opacity: 1;
}

.fab-vertical ul li:active
{
  transform:  scale(0.9)
}



.efeito-bolha
{
  position: relative!important;
  overflow: hidden!important;
}

.efeito-bolha .bolha
{
  top: 0;
  left: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  background: var(--bolha);
  display: block;
  -webkit-animation:  bolha 400ms linear;
  -o-animation:  bolha 400ms linear;
  animation:  bolha 400ms linear;
  -webkit-border-radius: var(--medida);
  -moz-border-radius: var(--medida);
  border-radius: var(--medida);
}

.efeito-bolha *
{
  pointer-events: none
}

@keyframes bolha
{
  from
  {
     opacity: 0.7;
     height: 0;
     width: 0;
  }
  to
  {
    opacity: 0;
    width: var(--medida);
    height: var(--medida);
  }
}

.card-texto
{
  box-shadow: 0 2px 10px #00000025;
  padding: 15px;
  border-radius: 10px;
  background: #e7e8ee;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px 0;
  background: var(--modo);
  font-family: Product Sans;
}

.card-texto.abrir,
.lista li.abrir
{
 position: relative;
 --bg-abrir: #00000015;
 --cor-abrir: #555
}

.card-texto.abrir:after,
.lista li.abrir:after
{
 content: '›';
 position: absolute;
 right: 15px;
 height: 20px;
 width: 20px;
 border-radius: 20px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: var(--bg-abrir);
 color: var(--cor-abrir);
 font-size: 20px;
 top: calc( 50% - 10px);
 --cor-do-titulo: #444
}

.card-texto .titulo
{
  color: var(--texto-primario);
  font-weight: bold;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.card-texto .paragrafo
{
  font-size: 15px;
  margin: 0;
  padding: 0;
  color: var(--texto-secundario);
}

.card-texto .acoes
{
  padding-top: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0 10px;
  border-top: 1px #00000025 solid; 
}

.card-texto .acoes a
{
  text-decoration: underline;
  text-decoration-color: transparent;
  text-transform: uppercase;
  color: var(--tema);
  font-size: 13px;
  height: 30px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.card-texto .acoes a:active
{
 opacity: 0.5;
}

.card-perfil
{
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 box-shadow: 0 0 10px #00000015;
 background: var(--modo);
 padding: 20px;
 border-radius: 15px;
 gap: 0 10px;
 width: auto;
 box-sizing: border-box;
 width: 100%;
}

.card-perfil.horizontal
{
 align-items: flex-start;
 justify-content: flex-start;
 display: grid;
 grid-template-columns: 80px auto;
 grid-template-areas: "imagem titulo""imagem paragrafo";
}

.card-perfil.horizontal *
{
 text-align: left;
}

.card-perfil.horizontal img
{
 height: 70px;
 width: 70px;
 grid-area: imagem;
}

.card-perfil *
{
 margin: 0;
 padding: 0;
}

.card-perfil img
{
  box-shadow:  0 0 5px #00000045;
  width: 80px;
}
.card-perfil .titulo
{
  width: 100%;
  margin: 0;
  padding: 0;
  font-weight: bold;
  grid-area: titulo;
  font-size: 16px;
  color: var(--texto-primario);
  text-align: left;
}

.card-perfil p
{
 margin: 0;
 padding: 0;
 grid-area: paragrafo;
 width: 100%;
 color: var(--texto-secundario);
 text-align: center;
}
.app-bar-fixa
{
  min-height: 45px;
  width: 100%;
  padding: 7px 15px;
  box-sizing: border-box;
  background: var(--tema);
  color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 10px;
  left: 0;
  z-index: 10;
  box-shadow: 0 5px 10px #00000025;
  gap: 0 5px
}


.app-bar-fixa .icone:not(.icones .icone)
{
  grid-area: menu;
  font-size: 20px;
}

.app-bar-fixa .texto
{
 width: 100%;
 display: inline-flex;
 align-items: flex-start;
 justify-content: center;
 flex-direction: column;
}
.app-bar-fixa .titulo
{
  font-size: 18px;
  max-width: calc(100% - 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-bar-fixa .paragrafo
{
  margin: 0;
}

.app-bar-fixa .icones
{
  grid-area: icones;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 20px;
  box-sizing: border-box;
  width: max-content;
  height: 100%;
  gap: 0 5px;
  transform: translateX(-5px)
}

.app-bar-fixa
{
  position: fixed;
  top: 0;
  left: 0;
}

.app-bar-fixa.moderna
{
 top: 10px;
 left: 10px;
 width: calc( 100% - 20px);
 border-radius: 10px;
 height: 30px!important;
 overflow: hidden!important;
}



.app-bar-fixa.circular
{
  border-radius: 1000px;
}

.tab,
.tab-design-2
{
 padding: 0 30px;
 box-sizing: border-box;
 background-color: var(--modo);
 min-width: 100%;
 height: 50px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 position: sticky;
 z-index: 10;
 color: #aaa;
 box-shadow: 0 0 15px #00000025;
 text-transform: uppercase;
 font-size: 15px;
 overflow: scroll;
 left: 0;
}

.tab ul,
.tab-design-2 ul
{
 padding: 0;
 margin: 0;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 list-style: none;
 position: relative;
 gap: 10px;
}

.tab ul li,
.tab-design-2 ul li
{
 width: max-content;
 height: 100%;
}


.tab ul li.atual,
.tab-design-2 ul li.atual
{
 color: var(--tema);
}

.tab ul li a,
.tab-design-2 ul li a
{
 -webkit-tap-highlight-color: transparent;
 text-decoration: none;
 color: inherit;
 transition: 250ms linear
}

.tab-design-2 ul li.atual a
{
 color: #fff;
}
.tab-design-2 ul li a
{
  color: var(--texto-secundario);
}

.tab span.marcador,
.tab-design-2 span.marcador
{
 position: absolute;
 height: 5px;
 width: 50px;
 display: inline-block;
 left: 0;
 bottom: 0;
 z-index: 200;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 background: var(--tema);
 transition: 300ms linear
}

.tab-design-2 span.marcador
{
 height: calc(100% - 15px);
 z-index: -1;
 border-radius: 100px;
 padding: 0 10px;
 transform: translateX(-10px);
 bottom: auto;
}
img.circular
{
 border-radius: 500px;
 object-fit: cover
}


.lista
{
 list-style: none;
 display: block;
 padding: 0;
 margin: 0;
 width: 100%;
 color: #222;
 --bolha: #00000045
}


.lista li
{
 height: 30px;
 padding: 10px 15px;
 display: flex;
 align-items: center;
 justify-content: flex-start;
 gap: 0 15px;
}

.lista li a
{
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.lista.divisor
{
 border-top: 1px #00000010 solid;
}
.lista.divisor li
{
 border-bottom: 1px #00000010 solid;
}
.lista li:before
{
 font-size: 20px;
}


.navegacao-embaixo
{
 position: fixed;
 z-index: 100;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 80px;
 box-sizing: border-box;
 background: var(--modo);
 box-shadow: 0 -5px 10px #00000025;
 color: #000!important;
}

.navegacao-embaixo ul
{
 margin: 0;
 padding: 10px 10px;
 box-sizing: border-box;
 list-style: none;
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
}

.navegacao-embaixo ul li
{
 display: inline-flex;
 align-items: center;
 flex-direction: column;
 height: 100%;
 box-sizing: border-box;
 position: relative;
 transition: 100ms linear;
 gap: 10px 0;
 width: 100%;
 box-shadow: none!important;
}

.navegacao-embaixo ul li .icone
{
 font-size: 24px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: inherit;
 position: relative;
}

.navegacao-embaixo ul li .icone:after
{
  content: '';
  z-index: -1;
  position: absolute;
  width: 40px;
  height: 35px;
  border-radius: 40px;
  transition: 150ms linear
}

.navegacao-embaixo ul li.atual .icone:after
{
  background: var(--tema);
  width: 60px;
}

.navegacao-embaixo ul li.atual .icone
{
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}




label:focus
{
 outline: 2px #A1A1A1 solid;
}

.inline-flex
{
 display: inline-flex;
 align-items: center;
 gap: 0 10px
}

.progresso.barra
{
 position: relative;
 width: 100%;
 height: 3px;
 background: #bbb;
}

.progresso.barra::after,
.progresso.barra:after
{
 position: absolute;
 content: '';
 left: 0;
 width: var(--barra);
 height: 100%;
 background: var(--tema);
 transition: 100ms linear
}


.preloader-design-1
{
 display: block;
 height: 30px;
 width: 30px;
 background: transparent;
 position: relative;
}


.preloader-design-1 span.dot
{
 position: absolute;
 display: inline-block;
 height: 100%;
 width: 100%;
 animation: preloader-design-1 1.2s ease-in infinite
}

.preloader-design-1 span.dot:after
{
 content: '';
 display: inline-block;
 height: 5px;
 width: 5px;
 top: 2px;
 left: 2px;
 border-radius: 5px;
 background: var(--tema);
}

.preloader-design-1 span.dot:nth-child(2)
{
 animation-delay: 100ms;
}
.preloader-design-1 span.dot:nth-child(3)
{
 animation-delay: 200ms;
}
.preloader-design-1 span.dot:nth-child(4)
{
 animation-delay: 300ms;
}
.preloader-design-1 span.dot:nth-child(5)
{
 animation-delay: 400ms;
}
.preloader-design-1 span.dot:nth-child(6)
{
 animation-delay: 500ms;
}
.preloader-design-1 span.dot:nth-child(7)
{
 animation-delay: 600ms;
}



.preloader-design-2 svg
{
  stroke-dasharray: 82;
  stroke-dashoffset: 62;
  animation: preloader-design-2 1.5s ease-in both infinite alternate, roatate 1s linear infinite;
}

@keyframes preloader-design-1
{
 0%
 {
  transform: rotate(0deg);
  opacity: 1;
 }
 25%
 {
  transform: rotate(200deg);
  opacity: 1;
 }
 50%
 {
  transform: rotate(240deg);
  opacity: 1
 }
 70%
 {
  transform: rotate(270deg);
  opacity: 0;
 }
 80%
 {
  opacity: 0;
 }
 100%
 {
  transform: rotate(360deg);
  opacity: 1;
 }
}


@keyframes preloader-design-2
{
 0%
 {
   stroke-dashoffset: 82;
 }
 100%
 {
  stroke-dashoffset: 0;
 }
}

@keyframes roatate
{
 0%
 {
  transform: rotate(0deg);
 }
 10%
 {
  opacity: 1;
 }
 50%
 {
  transform: rotate(360deg);
 }
 100%
 {
  transform: rotate(720deg);
 }
}

.toast
{
 user-select: none;
 background: var(--modo);
 position: fixed;
 top: 10px;
 left: 5px;
 z-index: 100;
 width: calc(100% - 10px);
 min-height: 90px;
 display: grid;
 align-items: center;
 border-radius: 10px;
 box-sizing: border-box;
 padding: 20px;
 animation: toast 500ms ease-in;
 grid-template-columns: 40px auto 30px;
 grid-template-areas: "icone titulo fechar";
 --bolha: var(--primario);
 --texto: #aaa;
}


.toast .fechar
{
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 20px;
 height: 30px;
 grid-area: fechar;
 border-radius: 30px;
 position: absolute;
 top: -50%;
 left: 50%;
 right: 0;
 color: var(--texto-secundario);
}

.toast .fechar:active
{
 background: var(--bolha);
}

.toast .titulo
{
 display: block;
 margin-bottom: 5px;
 color: var(--texto);
 font-size: 15px;
 grid-area: titulo;
}

.toast .icone:not(.fechar)
{
 font-size: 25px;
 color: var(--primario);
 grid-area: icone;
}

.toast.sucesso
{
 box-shadow: 0 0 15px #03962845!important;
 --texto: var(--primario)!important;
 --primario : #039628!important;
}


.toast.info
{
 --texto: var(--primario)!important;
 box-shadow: 0 0 15px #0274FF45!important;
 --primario : #0274FF!important;
}


.toast.erro
{
  --texto: var(--primario)!important;
 box-shadow: 0 0 15px #F64E4E45!important;
 --primario : #F64E4E!important;
}

.toast.personalizado
{
 --texto: var(--primario);
 box-shadow: 0 0 15px #00000010;
}


@keyframes toast
{
 0%
 {
  transform: scale(0);
  opacity: 0.7;
 }
 80%
 {
  transform: scale(1);
  opacity: 1;
 }
 95%
 {
  transform: translateX(-15px)
 }
 100%
 {
  transform: translateX(15px)
 }
}


.dialogo
{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 padding: 20px;
 z-index: 1000;
 display: flex;
 align-items: center;
 flex-direction: column;
 box-sizing: border-box;
 background: #00000075;
 backdrop-filter: blur(20px);
 letter-spacing: 1px;
 --titulo: #000;
 --texto: #555;
}

.dialogo
{
  
}

.dialogo.confirmacao .grid,
.dialogo.alerta .grid
{
 display: grid;
 width: 100%;
 padding: 20px;
 box-sizing: border-box;
 background: var(--modo);
 border-radius: 30px;
 grid-template-columns: 33.3% 33.3% 33.3%;
 grid-template-areas: "titulo titulo titulo""mensagem mensagem mensagem"". cancelar ok";
 animation: dialogo 300ms linear;
 user-select: none;
}

.dialogo.confirmacao .grid img,
.dialogo.alerta .grid img
{
  display: block;
  margin: auto;
  background: #000;
  max-width: 100%
}

.dialogo.alerta .grid
{
  grid-template-areas: "titulo titulo titulo""mensagem mensagem mensagem"". . fechar";
}


.dialogo.confirmacao .grid .titulo,
.dialogo.alerta .grid .titulo
{
 grid-area:  titulo;
 font-weight: bold;
 font-size: 18px;
 color: var(--texto-primario);
}
.dialogo.confirmacao .grid .mensagem,
.dialogo.alerta .grid .mensagem
{
 display: block;
 grid-area: mensagem;
 line-height: 20px;
 text-align: left;
 font-size: 15px;
 margin-bottom: 25px;
 margin-top: 20px;
 color: var(--texto-secundario);
}
.dialogo.confirmacao .grid .cancelar
{
 grid-area: cancelar;
 margin-right: 10px;
 color: #aaa;
}
.dialogo.confirmacao .grid .ok
{
 grid-area: ok;
}

.dialogo.alerta .grid .fechar
{
 padding: 10px;
 grid-area: fechar;
 width: auto;
}


@keyframes dialogo
{
 from
 {
   opacity: 0;
   transform: scale(0.8)
 }
 to
 {
  opacity: 1;
 }
}


.banner
{
 position: fixed;
 top: 0;
 left: 0;
 min-height: 100px;
 width: 100%;
 padding: 5px 20px;
 padding-top: 20px;
 background: var(--modo);
 box-sizing: border-box;
 z-index: 100;
 box-shadow: 0 5px 10px #55555525;
 animation: banner 500ms linear;
 line-height: 22px
}

@keyframes banner
{
 from
 {
  top: -200px;
 }
 to
 {
  top: 0;
 }
}

.banner p
{
 font-size: 15px;
 margin: 0;
 padding: 0;
 margin-bottom: 10px;
 color: var(--texto-primario);
}

.banner .acoes
{
 display: flex;
 align-items: center;
 justify-content: flex-end;
 width: 100%;
 gap: 0 20px;
}

.banner .ok
{
 width: max-content;
}

.banner .cancelar
{
 width: max-content;
 color: #aaa;
}

.popup
{
 position: fixed;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 bottom: 50px;
 padding: 10px 15px;
 left: 0;
 box-sizing: border-box;
 z-index: 100;
 animation: popup 300ms linear
}

@keyframes popup
{
 from
 {
  opacity: 0;
  transform:  translateY(50px) scale(0)
 }
}
.popup span.texto
{
 display: inline-flex;
 align-items: center;
 justify-content: center;
 height: 20px;
 font-size: 15px;
 padding: 10px 15px;
 border-radius: 40px;
 background: #333;
 color: #eee;
 box-shadow: 0 0 10px #00000035;
}

.popup span.texto:before
{
 margin-right: 5px;
}

.dialogo-carregamento
{
 position: fixed;
 display: flex;
 align-items: center;
 justify-content: center;
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
 padding: 25px;
 box-sizing: border-box;
 z-index: 1000;
 background: #00000045;
 backdrop-filter: blur(10px)
}

.dialogo-carregamento .flexbox
{
 display: flex;
 width: 100%;
 align-items: center;
 gap: 0 10px;
 padding: 15px 30px;
 background: var(--modo);
 color: var(--texto-primario);
 border-radius: 10px;
 font-size: 15px;
 animation: dialogo 300ms linear
}


.lista-seletor
{
 position: fixed;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 z-index: 100;
 background: #00000045;
 backdrop-filter: blur(10px);
 display: none;
}

.lista-seletor.ativo
{
 display: block;
}
.lista-seletor ul
{
 background: var(--modo);
 color: var(--texto-secundario);
 list-style: none;
 width: max-content;
 margin: 0;
 padding: 0;
 padding-top: 15px;
 border-radius: 15px;
 font-size: 15px;
 display: inline-flex;
 flex-direction: column;
 position: absolute;
 top: 20px;
 left: 20px;
 max-width: 100%;
 min-width: 120px;
 max-height: 100%;
 overflow: scroll;
 box-shadow: 0 5px 15px #00000015;
 user-select: none;
 animation:  fadeIn 300ms linear;
 box-shadow: 0 0 15px #00000020
}

.lista-seletor ul .titulo
{
 display: inline-block;
 word-wrap: break-word;
 color: var(--texto-primario);
 font-weight: bold;
 font-size: 16px;
 margin-bottom: 10px;
 padding: 0 15px;
}

.lista-seletor ul li
{
 height: 30px;
 display: inline-flex;
 align-items: center;
 padding: 5px 15px;
 position: relative;
}

.lista-seletor ul li:active
{
  background: #00000025;
}
.lista-seletor ul li.selecionado
{
 color: var(--tema);
}

.lista-seletor ul li.selecionado:after
{
 content: 'done';
 position: absolute;
 font-family: Material Symbol;
 right: 10px;
}


@keyframes fadeIn 
{
 from
 {
  opacity: 0;
 }
 to
 {
  opacity: 1;
 }
}


.snackbar
{
 position: fixed;
 z-index: 100;
 width: 100%;
 height: auto;
 left: 0;
 bottom: 0;
 background: #333;
 color: #fff;
 padding: 5px 10px;
 height: 40px;
 animation: snackbar 400ms linear;
 display: flex;
 align-items: center;
 --tema: #74ADFF
}

@keyframes snackbar
{
 from
 {
  bottom: -100px;
  opacity: 0;
 }to
 {
  bottom: 0;
  opacity: 1;
 }
}
.snackbar .conteudo
{
 display: flex;
 align-items: center;
 width: 100%;
 justify-content: space-between;
 user-select: none;
 box-sizing: border-box;
 padding: 0 25px;
 font-size: 15px;
}

.snackbar .conteudo button
{
  --bolha: var(--tema)!important
}