:root
{
 --fundo: #f2f2f2!important;
 --inicio: #ffffff45;
 user-select: none
}

:root.dark-mode
{
 --fundo: #000!important;
 --inicio: #00000045;
 --tema: #407BFF;
 --modo: #252525
}

body
{
 margin: 25px;
 background: var(--fundo);
}

.inicio
{
 position: fixed;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 box-sizing: border-box;
 z-index: 10000;
 background: var(--inicio);
 backdrop-filter: blur(40px)
}

.inicio .logo-do-app
{
 position: absolute;
 top: calc(50% - 120px);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 30px 0
}

.logo
{
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 border-radius: 60px;
 height: 50px;
 width: 50px;
 background: var(--tema);
 font-size: 12px;
 position: relative;
 box-shadow: inset 0 4px 10px #4F5EFF, 0 5px 10px #0274FF67;
 transform: scale(1.3);
 animation: logo 1s ease;
 animation-delay: 1.4s
}

@keyframes logo
{
 from
 {
  transform:  scale(1);
 }
 to
 {
  transform:  scale(5);
 }
}
.logo .texto
{
 top: 13px;
 position: absolute;
 transform: scaleY(0.5);
}

.logo > .icone
{
 top: auto;
 font-size: 35px;
 z-index: 2;
 position: absolute;
 text-shadow: 0 4px 20px #D5D8FF;
}


.inicio > .logo-do-app > .nome-do-app
{
 display: block;
 font-size: 18px;
 color: var(--texto-primario);
 font-family: Product Sans, sans-serif;
 text-transform: uppercase;
 text-shadow: 0 5px 10px #0274FF67;
}

.inicio > .preloader-design-1
{
 position: absolute;
 top: calc( 50% + 100px);
 transform: scale(1.2);
 animation: revelar 400ms linear
}

@keyframes revelar
{
 0%{
  opacity: 0;
 }
 50%
 {
  opacity: 0;
 }
 100%
 {
  opacity: 1;
 }
}
.inicio > .desenvolvedor
{
 position: absolute;
 bottom: 30px;
 animation: revelar 400ms linear;
 color: var(--texto-secundario);
}

.inicio > .logo-lion
{
 position: absolute;
 bottom: 40px;
}

.inicio > .logo-lion img
{
 width: 100px;
 /*animation: logo 500ms linear*/
}
.app-bar-fixa
{
 box-shadow: none;
 text-transform: uppercase;
 z-index: 11;
}


h1
{
 font-size: 30px;
 font-weight: 100;
 color: var(--texto-primario);
}

.tab-design-2
{
 top: 45px;
 box-shadow: none;
 border-bottom: 1px #55555555 solid;
 overflow: hidden;
 color: var(--texto-secundario)!important
}

.horarios-de-hoje
{
 padding-bottom: 50px;
 animation: fadeIn 300ms linear
}

.horarios-de-hoje .flexbox
{
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction:  column;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 padding: 30px;
 backdrop-filter: blur(10px);
 background: var(--inicio);
 z-index: 10;
 color: var(--texto-primario);
}

.horarios-de-hoje .flexbox.sem-dados
{
 background: inherit;
}

.horarios-de-hoje .flexbox h1
{
 color: var(--tema);
 font-weight: normal;
}
.horarios-de-hoje .flexbox img
{
 width: calc(100% - 30px);
 margin: 0;
}

.horarios-de-hoje .flexbox.refeicao
{
 display: none;
 
}

.horarios-de-hoje .card-texto
{
 opacity: 0;
 transform: translateX(-100%);
 transition: 300ms linear;
 padding: 20px 15px;
 border-radius: 25px;
}

.horarios-de-hoje .card-texto .paragrafo
{
 font-size: 1.15rem;
}

.horarios-de-hoje .card-texto .titulo
{
  text-transform: uppercase;
  font-size: 0.85rem;
}
    
.horarios-de-hoje .card-texto.riscado
{
 text-decoration: line-through;
 text-decoration-color: var(--texto-primario);
 color: #aaa;
 background: #ddd;
 box-shadow: none;
}


.dark-mode .horarios-de-hoje .card-texto.riscado
{
 background: #151515;
}


.horarios-de-hoje .card-texto.materia-atual
{
 background: var(--tema);
 box-shadow: 0 5px 10px #0274FF67;
 --texto-primario: #fff;
 --texto-secundario: #eee;
 --bg-abrir: #ffffff45;
 --cor-abrir: #eee;
 --bolha: #eee;
}

.navegacao-embaixo > ul > li
{
  color: var(--texto-secundario);
}

.navegacao-embaixo > ul > li.atual .icone
{
  color: #fff;
}


.grade
{
 animation:  fadeIn 300ms linear
}


#segunda,
#terca,
#quarta,
#quinta,
#sexta
{
 animation: crescer 350ms linear
}

@keyframes crescer
{
 from
 {
  transform: translateX( -100% );
  opacity: 0;
 }
 to
 {
  transform: translateX(0);
  opacity: 1;
 }
}
.grade ul li
{
 color: var(--texto-secundario);
 --bolha: var(--texto-secundario)
}


.sobre
{
 margin-top: 80px;
 padding-bottom: 50px;
 animation: fadeIn 300ms linear
}

.sobre .lista label
{
 width: 100%;
 justify-content: space-between;
}
.sobre .card-perfil
{
 margin-bottom: 30px;
 border-radius: 30px
}

.sobre .card-perfil img
{
 box-shadow:  0 0 15px #77B7FF45;
 border: 1px #555 solid ;
}

.sobre .card-texto
{
 padding: 0;
 overflow: hidden;
 border-radius: 30px;
}

.sobre .card-texto li
{
 padding-left: 20px;
 padding-right: 20px;
 color: var(--texto-secundario);
 --bolha: var(--texto-secundario)
}

.dialogo.alerta ul li
{
 color: var(--texto-secundario);
}

.redes-sociais
{
 display: flex;
 align-items: center;
 justify-content: space-around;
}

.redes-sociais a
{
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 -webkit-border-radius: 40px;
 -moz-border-radius: 40px;
 border-radius: 40px;
 background: var(--fundo);
 -webkit-tap-highlight-color: transparent;
 transition: 100ms linear
}

.dialogo.alerta .redes-sociais a img
{
 background: transparent;
 width: 25px;
 height: 25px;
}

.redes-sociais a:active
{
 transform: scale(0.95)
}