@font-face {
  font-family: Material Icon Outline;
  src: url('../Fonts/Material-Icon-Outline.ttf');
}

@font-face {
  font-family: Poppins;
  src: url('../Fonts/Poppins-Regular.ttf');
}

:root
{
  --principal: #5370FF;
  --fundo: #e7e7ee;
  --pesquisa: #ffffff45;
  --saudacao: #555;
  --grafico: #ffffff90;
  --stroke: #bbb;
  --lista: #fff;
  --sombra-lista: #ddd;
  --lista-concluida: #ffffff95;
  --sombra: #bbb;
}

.dark:root
{
  --fundo: #16161A;
  --pesquisa: #333;
  --saudacao: #757575;
  --grafico: #31323795;
  --stroke: #555;
  --lista: #333;
  --lista-concluida: #444;
  --lista-cor: #bbb;
  --sombra-lista: #39393A45;
  --sombra: #3B3C4B;
}

.dark button:disabled
{
  background: #595959!important;
  color: #eee!important;
}


*
{
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html
{
  min-height: 100vh;
  
}


body
{
  background: var(--fundo);
  font-family: Poppins;
  padding: 0 20px;
  margin-bottom: 50px;
}

.icone
{
  font-family: Material Icon Outline;
  font-size: 20px;
  font-style: normal;
}

.pre-loader
{
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--fundo);
  position: fixed;
  z-index: 2000;
}

.pre-loader img
{
  -ms-filter: drop-shadow( 0 0 5px var(--sombra));
  filter: drop-shadow( 0 0 5px var(--sombra));
  height: 60px;
  width: 60px;
}

.pre-loader .nome-app
{
  margin-top: 20px;
  color: var(--principal);
}

.pre-loader .dev
{
  position: fixed;
  bottom: 30px;
  font-size: 15px;
  color: var(--lista-cor);
}

.pre-loader .load
{
  position: relative;
  height: 40px;
  width: 40px;
  margin-top: 60px;
}

.pre-loader .load span:nth-child(1)
{
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  border: 3px transparent solid;
  border-left-color: var(--principal);
  border-right-color: var(--principal);
  -webkit-animation: rotate 600ms linear infinite;
  -o-animation: rotate 600ms linear infinite;
  animation: rotate 600ms linear infinite;
}

.pre-loader .load span:nth-child(2)
{
  top: 25%;
  left: 25%;
  position: absolute;
  height: 50%;
  width: 50%;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  border: 3px transparent solid;
  border-left-color: var(--principal);
  border-right-color: var(--principal);
  -webkit-animation: rotate 600ms linear infinite reverse;
  -o-animation: rotate 600ms linear infinite reverse;
  animation: rotate 600ms linear infinite reverse;
}

@keyframes rotate
{
  100%
  {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

  
.apresentacao
{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--fundo);
  position: fixed;
  z-index: 200;
  display: none;
  align-items: center;
  flex-direction: column;
  overflow: scroll;
  margin-bottom: 50px;
}

.apresentacao h1
{
  margin-top: 20px;
  font-size: 25px;
  text-align: center;
  color: var(--principal);
  margin-bottom: 50px;
}

.apresentacao p
{
  color: var(--lista-cor);
  margin-bottom: 50px;
  margin-top: 20px;
}


.apresentacao p b
{
  color: var(--principal);
}

.apresentacao img
{
  width: 200px;
  margin-bottom: 20px;
}

.apresentacao .info-nome
{
  margin-top: 10px;
  font-size: 12px;
  color: #B16604;
}

.apresentacao button
{
  font-size: 16px;
  width: 90px!important
}

.acoes-nav
{
  width: 100%;
  margin-top: 10px;
  margin-left: -20px;
  height: 30px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  background: var(--fundo);
  z-index: 10;
  top: 0;
  left: 0;
}

.acoes-nav .icone
{
  color: #757575;
}

.acoes-nav .caixa-pqs
{
  position: relative;
  width: calc(100% - 80px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.acoes-nav .caixa-pqs .icone
{
  position: absolute;
  left: 10px;
}
.acoes-nav input
{
  all: unset;
  width: 100%;
  height: 35px;
  color: var(--lista-cor);
  text-align: center;
  background: var(--pesquisa);
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  padding: 0 10px;
  padding-left: 30px;
}

::-webkit-search-cancel-button
{
 all: unset; 
}


.app-bar
{
  height: 30px;
  text-align: center;
  margin-top: 10px;
}

.app-bar h1
{
  color: var(--saudacao);
  font-size: 27px;
  text-align: left;
  margin-top: 20px;
}

h3.info
{
  margin-top: 25px;
  color: #888;
  margin-bottom: 10px;
}

.sobre
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: none;
  align-items: center;
  flex-direction: column;
  z-index: 20;
  background: var(--fundo);
  overflow: scroll;
}

.sobre.visivel
{
  display: flex;
  opacity: 1;
  -webkit-animation: para_baixo 300ms linear;
  -o-animation: para_baixo 300ms linear;
  animation: para_baixo 300ms linear;
}

.sobre h1
{
  width: 100%;
  font-size: 25px;
  text-align: left;
  margin-bottom: 20px;
}

.sobre h1 span
{
  color: var(--principal);
}

.sobre h1 .icone
{
  color: #757575;
  background: #ffffff45;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  height: 25px;
  width: 25px;
}

.sobre .card-sb
{
  background: var(--lista);
  padding: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: calc(100% - 40px);
  margin-bottom: 20px;
}


.sobre .card-sb .imagem
{
  display: flex;
  height: 80px;
  width: 80px;
  overflow: hidden;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  margin: auto;
  margin-bottom: 20px;
  border: 3px var(--principal) solid;
  background: var(--principal);
  -webkit-transition: 250ms linear;
  -moz-transition: 250ms linear;
  -ms-transition: 250ms linear;
  -o-transition: 250ms linear;
  transition: 250ms linear;
}

.sobre .card-sb .imagem:hover
{
  width: 200px;
  height: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border:none;
}

.sobre .card-sb img
{
  width: 100%;
  object-fit: cover
}

.sobre .card-sb h3
{
  color: var(--lista-cor);
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  line-height: 25px;
  gap: 10px
}

.sobre .card-sb p
{
  font-size: 15px;
}

.sobre .card-sb .icone
{
  color: var(--principal);
  font-size: 20px;
}

.card-sb .cx
{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sobre .card-sb input
{
  all: unset;
  height: 30px;
  width: calc(100% - 70px);
  color: var(--lista-cor);
  padding: 0 10px;
  border-bottom: 2px #eee solid;
  -webkit-transition: 150ms linear;
  -moz-transition: 150ms linear;
  -ms-transition: 150ms linear;
  -o-transition: 150ms linear;
  transition: 150ms linear;
}

.sobre .card-sb input:focus
{
  border-bottom-color: var(--principal);
}

.sobre .card-sb button
{
  all: unset;
  background: var(--principal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  width: 40px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #fff;
  -webkit-box-shadow: 0 2px 5px var(--sombra);
  -moz-box-shadow: 0 2px 5px var(--sombra);
  box-shadow: 0 2px 5px var(--sombra);
  -webkit-transition: 150ms linear;
  -moz-transition: 150ms linear;
  -ms-transition: 150ms linear;
  -o-transition: 150ms linear;
  transition: 150ms linear;
}

.sobre .card-sb button:active
{
  -webkit-box-shadow: 0 0 0 var(--sombra);
  -moz-box-shadow: 0 0 0 var(--sombra);
  box-shadow: 0 0 0 var(--sombra);
}

.sobre .card-sb button .icone
{
  color: #fff;
}

.grafico
{
  gap: 10px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: var(--grafico);
  box-shadow: 0 5px 30px var(--sombra-lista);
  color: #888;
  margin-bottom: 10px;
  word-wrap: break-word;
  border-left: 2px var(--principal) solid;
  border-right: 2px var(--principal) solid;
}

.grafico .Progresso circle
{
  fill: transparent;
}

.grafico .Progresso circle:nth-child(1)
{
  stroke: var(--stroke)
}

.grafico p
{
  width: 100%;
  text-align: center;
}


.tarefas
{
  margin-top: 50px;
  
}

.tarefas h3
{
  font-size: 18px;
  margin-bottom: 20px;
  color: #888;
}

.tarefas ul
{
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.tarefas ul .erro
{
  margin-top: 20px;
  width: 200px;
}

.tarefas ul .info
{
  margin-top: 20px;
  text-align: center;
  color: var(--lista-cor);
}

.tarefas ul li
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 10px;
  min-width: 20px;
  list-style: none;
  background: var(--lista);
  box-shadow: 0 5px 30px var(--sombra-lista);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  font-weight: bold;
  color: var(--lista-cor);
  width: calc(100% - 30px)
}


.tarefas ul li.concluida
{
  background: var(--lista-concluida);
}

.tarefas ul li.concluida span
{
  color: #888;
  text-decoration: line-through;
}

.tarefas ul li span
{
  text-align: left;
  width: calc(100% - 80px);
  white-space: 2;
  overflow: hidden;
}



.tarefas ul li input[type=checkbox]
{
  all: unset;
  position: relative;
  width: 17px;
  height: 17px;
  margin-right: 10px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  display: inline-flex;
  border: 2px var(--principal) solid;
  -webkit-transition: 250ms linear;
  -moz-transition: 250ms linear;
  -ms-transition: 250ms linear;
  -o-transition: 250ms linear;
  transition: 250ms linear;
}

.tarefas ul li input[type=checkbox]:checked
{
  background: var(--principal);
  border-color: var(--principal);
}

.tarefas ul li input[type=checkbox]:after
{
  color: #eee;
  content: 'done';
  font-family: Material Icon Outline;
  opacity: 0;
  -webkit-transform: rotate(-45deg) scale(1);
  -moz-transform: rotate(-45deg) scale(1);
  -ms-transform: rotate(-45deg) scale(1);
  -o-transform: rotate(-45deg) scale(1);
  transform: rotate(-45deg) scale(0);
  -webkit-transition: 250ms linear;
  -moz-transition: 250ms linear;
  -ms-transition: 250ms linear;
  -o-transition: 250ms linear;
  transition: 250ms linear;
}


.tarefas ul li input[type=checkbox]:checked:after
{
  opacity: 1;
  -webkit-transform: rotate(0deg) scale(1);
  -moz-transform: rotate(0deg) scale(1);
  -ms-transform: rotate(0deg) scale(1);
  -o-transform: rotate(0deg) scale(1);
  transform: rotate(0deg) scale(1);
}

.tarefas ul li .acoes
{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 50px;
}

.tarefas ul li .acoes .icone
{
  font-weight: normal;
}

.tarefas ul li .acoes .icone:active
{
  color: var(--principal);
}
button.add
{
  all: unset;
  bottom: 10%;
  right: 20px;
  position: fixed;
  height: 50px;
  width: 50px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background: var(--principal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px var(--sombra);
  font-size: 27px;
}

button.add:active
{
  box-shadow: 0 0 0 #A2AAFF
}

button.add .icone
{
  color: #fff;
  font-size: inherit;
}

.tela-2,
.edicao
{
  top: 0;
  left: 0;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: var(--fundo);
  opacity: 0;
  z-index: 100;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  transition: all 300ms linear;
}


.tela-2.visivel,
.edicao.visivel
{
  opacity: 1;
  height: 100%;
  width: 100%;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.tela-2 h1,
.edicao h1
{
  margin-top: 20px;
  font-size: 22px;
  color: var(--principal);
}

.tela-2 h1 span,
.edicao h1 span
{
  display: inline-block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 0 10px;
}

.tela-2 h1 .icone,
.edicao h1 .icone
{
  color: #757575;
  background: #ffffff45;
  margin-right: 10px;
  margin-left: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  height: 25px;
  width: 25px;
}

.tela-2 h1 .icone:active,
.edicao h1 .icone:active
{
  background: #bbb;
}

.tela-2 .caixa,
.edicao .caixa
{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15%;
}

.apresentacao  input,
.tela-2 .caixa input,
.edicao .caixa input
{
  all: unset;
  background: #ffffff50;
  width: calc(100% - 80px);
  height: 40px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 0 15px;
  box-sizing: border-box;
  color: var(--lista-cor);
}

.tela-2 .caixa input::-webkit-input-placeholder,
.edicao .caixa input::-webkit-input-placeholder
{
  color: #aaa
}

.apresentacao  input:focus,
.tela-2 .caixa input:focus,
.edicao .caixa input:focus
{
  box-shadow: 0 0 10px var(--sombra)
}


.tela-2 .flex,
.edicao .flex
{
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

   .sobre .cx button:disabled,
.apresentacao button:disabled,
.tela-2 .flex button:disabled,
.edicao .flex button:disabled
{
  background: #aaa;
  box-shadow: 0 3px 7px var(--sombra)
}

.apresentacao button,
.tela-2 .flex button,
.edicao .flex button
{
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 20px;
  width: 80px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #eee;
  background: var(--principal);
  box-shadow: 0 3px 7px var(--sombra-lista);
  -webkit-transition: 150ms linear;
  -moz-transition: 150ms linear;
  -ms-transition: 150ms linear;
  -o-transition: 150ms linear;
  transition: 150ms linear;
  margin-top: 40px;
  position: absolute;
  bottom: 20px;
  right: 20px;
}


.tela-2 .flex button .icone,
.edicao .flex button .icone
{
  margin-right: 10px;
}

.tela-2 .flex button:active,
.edicao .flex button:active
{
  -webkit-box-shadow: 0 0 0 #9AA2FF;
  -moz-box-shadow: 0 0 0 #9AA2FF;
  box-shadow: 0 0 0 #9AA2FF;
}

.tela-2 .flex img,
.edicao .flex img
{
  margin: auto;
  width: 50%;
  -webkit-animation: flutuar 1s alternate linear infinite;
  -o-animation: flutuar 1s linear alternate infinite;
  animation: flutuar 1s linear alternate infinite;
}


@keyframes flutuar
{
  0%
  {
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
  }
}

.pop-up
{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
  display: none;
  align-items: center ;
  flex-direction: column;
  background: #00000057;
}

.pop-up.visivel
{
  display: flex;
}

.pop-up .box
{
  margin-top: 10%;
  width: calc(100% - 80px);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--lista);
  padding: 20px;
  -webkit-animation: para_baixo 500ms linear;
  -o-animation: para_baixo 500ms linear;
  animation: para_baixo 500ms linear;
}


@keyframes para_baixo
{
  0%
  {
    margin-top: -50%;
    transform: scale(0)
  }
}

.pop-up .box p
{
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  color: var(--lista-cor);
  margin-bottom: 20px;
}

.pop-up .box img
{
  width: 200px;
}


.pop-up .box .acoes
{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.pop-up .box .acoes button
{
  all: unset;
  color: var(--principal);
  padding: 2px 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-transform: uppercase;
}

.pop-up .box .acoes button:active
{
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}

.pop-up .box .acoes button:nth-child(1)
{
 color: #757575;
}


.toast-fundo
{
 position: fixed;
 bottom: 0;
 z-index: 1000;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 color: var(--lista-cor);
}
    
.toast-fundo .toast-box
{
  padding: 0 20px;
  height: 40px;
  background: var(--lista);
  margin-bottom: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
  -webkit-box-shadow: 0 0 20px var(--sombra);
  -moz-box-shadow: 0 0 20px var(--sombra);
  box-shadow: 0 0 20px var(--sombra);
  -webkit-animation: toast 300ms linear;
  -moz-animation: toast 300ms linear;
  -o-animation: toast 300ms linear;
  animation: toast 300ms linear;
}

@keyframes toast
{
  0%
  {
    opacity: 0;
    margin-bottom: 0px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
}


.toast-fundo .toast-box .icone
{
  background: var(--principal);
  height: 100%;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #eee;
  font-size: 30px;
  font-weight: normal;
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  -ms-transform: translateX(-20px);
  -o-transform: translateX(-20px);
  transform: translateX(-20px);
}