@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

body {
  height: 100%;
  background-color: #fafbfc;
  --color-p1: #1D3353;
  --color-p2: #0D4BC4;
  --color-p3: #4CB6F1;
  --color-p4: #D8E6EE;
  --color-s1: #F1DD31;
}

.loading {
  background-color: rgba(0, 0, 0, .8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999999;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading .load {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border: 10px solid white;
  border-radius: 50%;
  border-top: 10px solid transparent;
  animation: rotate-animation .5s linear infinite;
}

@keyframes rotate-animation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.content {
  display: flex;
  flex-wrap: wrap;
}

.container {
  width: calc(100% - 70px);
}

.container.aside-active {
  width: calc(100% - 250px);
}

.page {
  padding: 1rem 1.5rem;
  overflow-y: auto;
}

.breadcrumb {
  margin-bottom: 1rem;
}

.breadcrumb>* {
  font-size: 10px;
  color: #aaaaaa;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
  color: #717171;
}

.alert {
  background: #ffa9a9;
  color: red;
  margin-top: 1rem;
  display: block;
  padding: .5rem 2rem;
  border-radius: 5px;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.mb-2 {
  margin-bottom: 2rem;
}

.btn-default {
  background-color: var(--color-p1);
  color: var(--color-p4);
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-weight: 500;
  transition: .3s;
}

.btn-default:hover {
  box-shadow: 3px 8px 8px rgba(0, 0, 0, .3);
  background-color: var(--color-p2);
}

/* LOGIN */
.imagem {
  width: 60%;
  background-color: var(--color-p1);
  height: 100vh;
  background-image: url('./../img/restrito.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.formulario {
  width: 40%;
  padding: 2rem;
  text-align: center;
}

.formulario h1 {
  color: var(--color-p2);
  padding-bottom: 3rem;
  text-transform: uppercase;
}

.formulario h2 {
  color: var(--color-p1);
  padding-bottom: 3rem;
  text-transform: uppercase;
}

.formulario p {
  color: #717171;
  padding-bottom: 1rem;
  font-style: italic;
}

.formulario form {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  padding-bottom: 4rem;
}

.formulario form input[type="text"],
.formulario form input[type="password"] {
  width: 100%;
  display: block;
  margin-bottom: 1rem;
  font-size: 15px;
  padding: 10px 16px;
  border: 1px solid var(--color-p1);
  border-radius: 30px;
}

.formulario form input[type="submit"] {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 15px;
  padding: 10px 3rem;
  background-color: var(--color-p1);
  color: white;
  border-radius: 30px;
  border: 0;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, .3);
  cursor: pointer;
  font-weight: 700;
  transition: .3s;
  margin-top: 1rem;
}

.formulario form .left {
  text-align: left;
}

.formulario form .left a {
  font-size: 12px;
  color: #717171;
  padding-left: .5rem;
  transition: .3s;
}

.formulario form .left a:hover {
  color: var(--color-p2);
}

.formulario form input[type="submit"]:hover {
  background-color: #F1DD31;
  color: var(--color-p2);
}

.content .voltar {
  text-align: right;
}

.content .voltar a {
  font-size: 12px;
  color: #717171;
  padding-left: .5rem;
  transition: .3s;
}

.content .voltar a:hover {
  color: var(--color-p2);
}

@media screen and (max-width: 700px) {

  .imagem,
  .formulario {
    width: 100%;
  }

  .imagem {
    height: 200px;
  }
}

/* FIM LOGIN */

/*******************************/
/* Painel do Aluno */
/* SIDEBAR */
.aside {
  width: 70px;
  background-color: var(--color-p1);
  height: 100vh;
  padding: 18px;
  overflow-y: auto;
  position: sticky;
  left: 0;
  top: 0;
}

.aside.active {
  width: 250px;
}

.aside .logo {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.aside .logo a {
  text-decoration: none;
  color: white;
}

.aside .logo a img {
  width: 100%;
  max-width: 35px;
}

.aside.aside.active .logo a {
  display: inline-block;
  width: 100%;
}

.aside a span {
  display: none;
  font-size: 18px;
  padding-left: 5px;
}

.aside.active a span {
  display: inline-block;
}

.aside .links ul {
  list-style-type: none;
  text-align: center;
}

.aside.active .links ul {
  text-align: left;
}

.aside .links ul li {
  display: inline-block;
  width: 100%;
  padding: 8px 0;
}

.aside .links ul li a {
  text-decoration: none;
  color: white;
  opacity: .5;
  font-size: 25px;
  padding: 10px 0;
  transition: .3s;
  position: relative;
}

.aside .links ul li a>*:first-child {
  width: 35px;
  text-align: center;
}

.aside .links ul li a:hover {
  opacity: 1;
}

.aside.active .links ul li a:hover>span {
  position: inherit;
  display: inherit;
  background-color: inherit;
  font-size: 18px;
  margin-left: inherit;
  border-radius: inherit;
  padding: inherit;
  border: inherit;
}

.aside .links ul li a:hover>span {
  position: fixed;
  display: inline-block;
  background-color: var(--color-p1);
  font-size: 15px;
  margin-left: 10px;
  border-radius: 4px;
  padding: 5px 10px;
  border: 1px solid #ccc;
}

.header {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  height: 66px;
  padding: 15px;
  position: sticky;
  top: 0;
  z-index: 99999;
  background-color: #fafbfc;
}

.header .btn-menu {
  border: none;
  font-size: 22px;
  padding: 5px 8px;
  border-radius: 4px;
  color: #1D3353;
  background-color: transparent;
  cursor: pointer;
  transition: .3s;
}

.header .btn-user {
  position: relative;
  border: 2px solid var(--color-p1);
  color: white;
  border-radius: 50%;
  padding: 5px 9px;
  background-color: var(--color-p1);
  cursor: pointer;
}

.header .user-links {
  position: fixed;
  right: 15px;
  top: 55px;
  width: 180px;
  border: 1px solid #ccc;
  background-color: white;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 5px 8px 8px rgba(0, 0, 0, .3);
  display: none;
}

.header .user-links.active {
  display: block;
}

.header .user-links ul {
  list-style-type: none;
}

.header .user-links ul li {
  display: inline-block;
  margin: 5px;
  width: 100%;
}

.header .user-links li a {
  display: inline-block;
  text-decoration: none;
  color: var(--color-p1);
  padding: 5px;
  width: 100%;
}

.header .user-links li a:hover {
  background-color: var(--color-p4);
  border-radius: 4px;
}

.overlay {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, .5);
  z-index: 99;
}

@media screen and (max-width: 480px) {
  .aside {
    display: none;
  }

  .container,
  .container.aside-active {
    width: 100%;
  }

  .overlay {
    visibility: visible;
    display: none;
  }

  .overlay.active {
    display: block;
  }

  .aside.active {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    height: 100vh;
    max-width: 250px;
    box-shadow: 5px 10px 10px rgba(0, 0, 0, .5);
    z-index: 999;
  }
}

/* FIM SIDEBAR */

/* FOTOMETRIA */
.fotometria {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to right bottom, var(--color-p1), var(--color-p2));
  text-align: center;
  padding: 2rem;
}

.fotometria .container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.fotometria h1 {
  color: var(--color-p1);
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  font-size: 12px;
}

.fotometria h2 {
  color: var(--color-p4);
  font-weight: 400;
  margin: 1rem 0;
}

.fotometria .msg > h3 {
  color: white;
  font-weight: 200;
  margin-top: 3rem;
}

.fotometria p {
  color: #ccc;
  font-size: 12px;
}

.fotometria .video-container {
  margin: 1rem auto;
  background-color: black;
  border-radius: 10px;
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 300px;
  text-align: center;
}

.fotometria .video-container video {
  max-width: 100%;
  width: 400px;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
  transform: scaleX(-1);
}

.fotometria #registrar,
.termouso #aceito,
.fotometria #validar {
  padding: 10px 20px;
  border: none;
  background-color: var(--color-p3);
  color: var(--color-p1);
  border-radius: 20px;
  font-weight: 700;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
  cursor: pointer;
  transition: .3s;
}

.fotometria #registrar:hover,
.fotometria #validar:hover,
.termouso #aceito:hover {
  background-color: var(--color-p2);
  color: var(--color-p4);
}

.fotometria #registrar:disabled,
.fotometria #validar:disabled {
  opacity: .2;
}

.termouso {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .5);
}

.termouso .termo {
  margin: 0 auto;
  background-color: white;
  width: 80%;
  max-width: 500px;
  max-height: 500px;
  overflow-y: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 10px 15px 15px rgba(0, 0, 0, .3);
}

.termouso .termo h3 {
  padding-bottom: .5rem;
  border-bottom: 1px solid #ccc;
  margin-bottom: .5rem;
}

.termouso .btn-aceito {
  margin-top: 2rem;
  text-align: center;
}

.valida-fotometria {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999999;
}

/* FIM FOTOMETRIA */

/* SESSÃO */
.sessao h1 {
  color: var(--color-p1);
  margin-bottom: 2rem;
  font-weight: 400;
}

.sessao p {
  color: #717171;
}

/* DADOS CADASTRAIS */
.meus-dados {
  margin-bottom: 2rem;
}

.meus-dados .dados {
  display: flex;
  flex-wrap: wrap;
}

.meus-dados .dados ul {
  list-style-type: none;
  color: #717171;
}

.meus-dados .dados h3 {
  padding-bottom: 1rem;
  color: var(--color-p2);
}

.meus-dados .dados .dados-aluno,
.meus-dados .dados .dados-cnh {
  width: 50%;
  padding-right: 1rem;
  margin-bottom: 2rem;
}

.meus-dados .dados .dados-aluno ul li,
.meus-dados .dados .dados-cnh ul li {
  padding: 3px 0;
}

@media screen and (max-width: 700px) {

  .meus-dados .dados .dados-aluno,
  .meus-dados .dados .dados-cnh {
    width: 100%;
  }
}
/* FIM MEUS DADOS */

/* MEUS CURSOS */
.cursos {
  width: 100%;
}

.cursos .curso {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  box-shadow: 10px 10px 25px rgba(0, 0, 0, .2);
  background-color: white;
  margin-bottom: 2rem;
}

.cursos .curso h3 {
  width: 100%;
  text-transform: uppercase;
  color: var(--color-p2);
  font-size: 15px;
  margin-bottom: .5rem;
}

.cursos .curso img {
  width: 100%;
  max-width: 350px;
  height: 200px;
  display: inline-block;
  border-radius: 4px 0 0 4px;
}

.cursos .curso .info {
  padding: 1rem;
  width: calc(100% - 350px);
}

.cursos .curso .info .progresso {
  width: 350px;
  max-width: 100%;
  background-color: #d9d9d9;
  height: 10px;
  border-radius: 50px;
  margin-top: 1rem;
  margin-bottom: .5rem;
}

.cursos .curso .info .progresso .avanco {
  background-color: #0D4BC4;
  height: 10px;
  border-radius: 50px;
}

.cursos .curso .info p {
  font-size: 12px;
  padding-bottom: 8px;
}

.cursos .curso .area-btn {
  margin-top: 2rem;
  display: inline-block;
  width: 100%;
  font-size: 12px;
}

.cursos .curso .download-certificado {
  background-color: #215721;
  margin-right: .5rem;
}

.cursos .curso .download-certificado:hover {
  background-color: #3f913f;
}

@media screen and (max-width: 1000px) {
  .cursos .curso {
    width: 100%;
  }

  .cursos .curso .info {
    width: 100%
  }

  .cursos .curso img {
    width: 100%;
    max-width: inherit;
    height: auto;
  }

  .btn-default, #download-certificado {
    display: inline-block;
    width: 100%;
    margin-bottom: .5rem;
    text-align: center;
    margin-right: 0;
  }
}

/* FIM MEUS CURSOS */

/* SALA DE AULA */
.sala {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.sala .conteudo {
  width: calc(100% - 350px - 1rem);
  background-color: white;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.sala .conteudo .concluir {
  margin: 0 1rem;
  text-align: right;
}

.sala .conteudo .concluir > span {
  text-align: right;
  border: 2px solid #3f913f;
  border-radius: 5px;
  color: #215721;
  padding: 5px 15px;
  font-size: 12px;
  font-weight: bold;
  background-color: #b4d4b4;
}

.sala .conteudo .btn-concluir {
  background-color: #215721;
}

.sala .conteudo .btn-concluir:hover {
  background-color: #3f913f;
}

.sala .conteudo .toolbar {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: .5rem 2rem;
  background-color: var(--color-p1);
  color: white;
  border-radius: 10px 10px 0 0;
  font-size: 12px;
}

.sala .conteudo .toolbar a {
  color: #d9d9d9;
  text-decoration: none;
  transition: .3s;
}

.sala .conteudo .toolbar a:hover {
  color: white;
}

.sala .conteudo .info h1 {
  font-size: 18px;
  padding: .5rem 1rem .3rem 1rem;
  color: #717171;
  font-weight: 300;
}

.sala .conteudo .info h2 {
  font-size: 10px;
  padding: 0 1rem .3rem 1rem;
  color: #717171;
  font-weight: 300;
}

.sala .conteudo .info h3 {
  font-size: 10px;
  margin: 0 1rem 1rem 1rem;
  color: #717171;
  font-weight: 300;
}

.sala .menu {
  width: 350px;
  background-color: white;
  height: calc(100vh - 145px);
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.sala .menu .cargamaxima {
  margin: .5rem;
  padding: .5rem;
  border-radius: 10px;
  border: 1px solid #ffc74e;
  font-size: 10px;
  background-color: #ffeec8;
}

.sala .menu .modulo .nome {
  margin: 10px;
  padding: 7px 5px 5px 5px;
  font-size: 15px;
  cursor: pointer;
  transition: .3s;
  border-bottom: 2px solid var(--color-p1);
  border-top: .5px solid #eee;
}

.sala .menu .modulo .nome:hover {
  background-color: #d9d9d9;
}

.sala .menu .modulo ul {
  width: 100%;
  list-style-type: none;
  display: none;
}

.sala .menu .modulo ul.active {
  display: inline-block;
}

.sala .menu .modulo ul li {
  width: 100%;
  transition: .3s;
  display: block;
  margin: 0;
  padding: 0;
}

.sala .menu .modulo ul li a {
  width: 100%;
  padding: 8px 18px;
  text-decoration: none;
  color: #717171;
  display: block;
  font-size: 12px;
}

.sala .menu .modulo ul li:hover {
  background-color: #ccc;
}

.sala .menu .modulo ul li a .fa-check-circle {
  color: #3f913f;
}

.sala .menu .modulo ul li a.active {
  background-color: var(--color-p4);
}

@media screen and (max-width: 1200px) {
  .sala .conteudo,
  .sala .menu {
    width: 100%;
    height: auto;
  }
}
/* FIM SALA DE AULA */

/* AULA */
.aula {
  width: 100%;
  padding: 1rem;
}

.aula .aula-descricao {
  padding: 1rem 0;
}

.aula .aula-descricao h4 {
  color: #717171;
  padding-bottom: .5rem;
  font-weight: 500;
}

.aula .aula-descricao p {
  color: #333;
  padding-bottom: .5rem;
}

.aula .video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.aula .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.aula > video {
  width: 100%;
}

.aula .pdf-container {
  width: 100%;
  border: 1px solid #ccc;
}

.aula .pdf-container embed {
  width: 100%;
  height: 90%;
  border: none;
}

.aula .pdf-container.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  overflow-y: auto;
  z-index: 999999;
}

.aula .pdf-container .btntelacheia {
  background-color: white;
  text-align: right;
  padding: .5rem 1rem;
}

.aula .pdf-container .btntelacheia button,
.aula .pdf-container .btntelacheia a {
  border: 1px solid #ccc;
  padding: .3rem 1rem;
  color: #717171;
  cursor: pointer;
  border-radius: 5px;
  transition: .3s;
}

.aula .pdf-container .btntelacheia button:hover {
  color: #1D3353;
  border-color: #1D3353;
}

.aula .navegapagina {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrpa;
  text-align: center;
  align-items: baseline;
}

.aula .navegapagina div {
  font-size: 12px;
  color: #717171;
}

#the-canvas {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  direction: ltr;
  overflow-y: auto;
}

.sala .btn-iniciar {
  text-align: center;
  margin-top: 2rem;
}

.sala .btn-iniciar input {
  margin-top: 1rem;
}

.full {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  background-color: #fafbfc;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.sala .questoes {
  margin: 0 auto;
  width: 100%;
  max-width: 700px;
}

.sala .questoes .status {
  text-align: center;
  margin-top: 1rem;
}

.sala .questoes .status .bullet {
  text-align: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #d9d9d9;
  display: inline-block;
  margin: 0 5px;
}

.sala .questoes .status .bullet.active {
  background-color: var(--color-p2);
}

.sala .questoes .timer {
  width: 100%;
  padding: 1rem 2rem;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  border-bottom: 1px solid #ccc;
}

.sala .questoes .questao {
  display: none;
}

.sala .questoes .questao.active {
  display: block;
}

.sala .questoes .pergunta {
  margin-top: 1rem;
  padding-bottom: 1rem;
}

.sala .questoes .pergunta p {
  text-align: justify;
  color: #333;
}

.sala .questoes .pergunta p > span {
  font-weight: 700;
}

.sala .questoes .opcoes .opcao {
  padding-bottom: .5rem;
  color: #333;
}

.sala .questoes .opcoes .opcao input {
  cursor: pointer;
}

.sala .questoes .next-prev {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  border-top: 1px solid #ccc;
  padding: 1rem;
}

.sala .questoes .next-prev button.disabled {
  display: none;
}

.sala .questoes .next-prev .btn-enviar {
  background-color: #3f913f;
}

.sala .questoes .next-prev .btn-enviar:hover {
  background-color: #215721;
}

.sala .questoes .next-prev .btn-enviar.disabled {
  display: none;
}

.sala .questoes h3 {
  margin: 1rem 0;
  padding-bottom: 1rem;
  color: var(--color-p1);
  border-bottom: 1px solid #ccc;
}

.sala .questoes .opcao .correto {
  border: 1px solid #215721;
  background-color: #8dce8d;
  color: #215721;
  padding: 7px 15px;
  border-radius: 5px;
}

.sala .questoes .opcao .errado {
  border: 1px solid #ac0d0d;
  background-color: #f89292;
  color: #ac0d0d;
  padding: 7px 15px;
  border-radius: 5px;
  margin-bottom: 1.5rem;
}

.sala .questoes .opcoes hr {
  margin: 3rem 0;
}

.sala .nota {
  margin-top: 1rem;
  border: 1px solid;
  padding: 10px 20px;
  border-radius: 4px;
  display: inline-block;
}

/* FIM AULA */

/* SUMMERNOTE */
.conteudo-exibido {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.conteudo-exibido img {
  max-width: 100%;
  height: auto;
}