body {

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
    margin: 0;
    background-color: #367588;
}
.ce-inline-toolbar {
  overflow: visible !important;
}

.container{

    max-width:1000px;
    margin:auto;
    padding:5px 10px;
    /* background-color: rgba(255, 255, 255, 0.021); */
    display: flex;
    justify-content: space-between; /* Um na esquerda, outro na direita */

}

header {

    background-color: rgb(255, 255, 255);

}

aside.sidebar {

    background-color: #E6F2F6;
    border-bottom: solid #1F454F 3px;
    

}

main.main-content .container{

    min-height: 400px;
    background-color: #fff;
    margin-top: 10px;
    border-radius: 5px;

}

body .page {
    width: 100%;
}

/* inicio do page header */

body .page .page-header {
    margin: 0;
    text-transform: uppercase;
    padding: 10px;
    background-color: #1F454F;
    color: #fff;
    border-radius: 5px;
    font-size: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body .page .page-header h2.titulo {
    margin: 0;
    font-size: 16px;
}

body .page .page-header .btn-editar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 10px;
    background-color: #ffffff;
    color: #1F454F;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
}

body .page .page-header .btn-editar:hover {
    background-color: #DDECEF;
    color: #1F454F;
    text-decoration: none;
}

body .page .page-header .btn-editar-icone {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}



/* fim do page header */

body .page .page-body p{

    margin: 0px;

}
body .page-body .flexBox{

    display: flex;
    justify-content: space-between;

}

body .page .page-body .column-left{

    width: 69%;

}
body .page .page-body .column-right{

    width: 30%;


}
body .page h3.titulo{

    padding: 10px;
    margin: 5px 0px;
    background-color: #4A8FA3;
    border-radius: 5px;
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;

}

.conteudo h3.questionario {
    margin-top: 20px !important;
}

.conteudo div.questionario {
    min-height: 200px;
}
.conteudo div.questionario ul.pergunta{

    list-style: none;
    padding: 5px;
    border-bottom: #1F454F solid 1px;
    margin: 5px 0px;

}

.conteudo div.questionario li.pergunta{

    border-bottom: #1F454F solid 1px;
    padding: 5px;
    margin-bottom: 5px;
    border-top: #1F454F solid 2px;;
}

.conteudo div.questionario ul.resposta{

    list-style-type: lower-alpha;
    padding-left: 25px;
    margin-bottom: 25px;

}

.conteudo div.questionario ul.resposta li{

    padding: 5px;
    /* background: #2A5C6B; */
    margin-bottom: 2px;
    border-radius: 5px;

}

.vCards {
    background-color: #E6F2F6;
    border-radius: 5px;
    margin-bottom: 10px;
    padding-top: 1px;
}

.conteudo .column-left .vCards{

    background-color: #FFF;

}



.vCardContent {
    display: flex;
    padding: 10px;
}
.vCardContent .indText, .vCardContent .semFluxoEstudo {
    margin:auto;
}


footer.footer {

    margin-top: 10px;
    background-color: #fff;
    padding: 10px;

}

footer.footer div p {

    margin: auto;
    font-size:clamp(12px,1.2vw,14px);

}
header .container img.logo {

    max-width: 30%;

}

header h2 {

    text-transform: uppercase;
    margin: 5px 5px;
    color: #2A5C6B;

}

.questionario .acoesQuestionario {

  display: flex;

}

.btoPadrao {
  padding: 8px 15px;
  background-color: #4A8FA3 ;
  cursor: pointer;
  border-radius: 5px;
  text-transform: uppercase;
  color: #FFF;
  border: none;
  font-weight: 600;
  /* border: 3px  solid; */
  font-size: 12px;
  margin-left: 5px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif !important;
}

.btoPadrao:hover {
  background-color: #1F454F;
}

.questionario .acoesQuestionario .botoes {

  margin-left: auto;


}

/* Estilo das LIs para quando receberem as classes de correção */
.resposta li.correto {
    background-color: #d4edda;
    border-left: 5px solid #28a745;
    padding-left: 5px;
}

.resposta li.incorreto {
    background-color: #f8d7da;
    border-left: 5px solid #dc3545;
    padding-left: 5px;
}

/* Revelar a resposta certa caso o usuário tenha errado */
.resposta-certa-revelada {
    font-weight: bold;
    color: #155724;
}
.resultadoQuestionario {
  display: flex;
}
.resultadoQuestionario span {
  margin: auto;
}

  ul.lista-limpa{
    margin:0;
  }
  .lista-limpa {
    list-style-type: none;
    padding-left: 0;
    font-family: 'Segoe UI', Roboto, sans-serif;
    max-width: 100%;
  }

  /* Item da lista */
  .lista-limpa li {
    display: block;
    flex-direction: column; /* Garante que a sublista fique abaixo do link */
    
    /* position: relative; */
  }

  /* Estilização do Link */
  .lista-limpa a {
    text-decoration: none;
    color: #1F454F;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-block;
    width: fit-content;
    margin-bottom: 10px;
    font-size:clamp(12px,16px,22px);
    background: #FFF;
    
    
  }

  /* Efeito ao passar o mouse */
  .lista-limpa a:hover {
    background-color: #f1f5f9;
    color: #FFF;
    padding-left: 18px; /* Pequeno "pulo" visual */
    background: #4A8FA3;
  }

  /* Sublistas (Níveis Infinitos) */
  .lista-limpa ul {
    list-style-type: none;
    padding-left: 20px; /* Recuo da hierarquia */
    border-left: 2px solid #e2e8f0; /* Linha guia lateral */
    margin-left: 10px; /* Alinhamento com o link pai */
    margin-top: 13px;
    margin-bottom: 13px;
    display: block;
  }

  /* Ajuste para telas pequenas */
  @media (max-width: 480px) {
    .lista-limpa ul {
      padding-left: 15px;
      margin-left: 5px;
    }
    /* .lista-limpa a {
      font-size: 15px;
    } */
  }

/* -MOBILE-INICIO- */

/* Celulares pequenos */
@media (max-width: 360px) {


    .btoPadrao {
      width: 100%;
    }
    .acoesQuestionario .botoes {
    
      margin-left: auto !important;
      width: 100%;
    }

    .btoPadrao {
      
      margin-top: 5px;
      margin-left: auto;

    }

    header h2 {

        text-transform: uppercase;
        margin: 5px 5px;
        text-align: center;

    }

    body .page-body .flexBox{

        flex-direction: column-reverse;

    }

    body .conteudo .page .page-body .flexBox{

        flex-direction: column;


    }

    body .page .page-body .column-left, body .page .page-body .column-right{

        width: 100%;
        /* margin-bottom: 10px; */

    }


}


/* Celulares médios */
@media (min-width: 361px) and (max-width: 480px) {

    .btoPadrao {
      width: 100%;
    }
    .acoesQuestionario .botoes {
    
      margin-left: auto !important;
      width: 100%;
    }

    .btoPadrao {
      
      margin-top: 5px;
      margin-left: auto;

    }

    header h2 {

        text-transform: uppercase;
        margin: 5px 5px;
        text-align: center;

    }

    body .page-body .flexBox{

        flex-direction: column-reverse;

    }

    body .conteudo .page .page-body .flexBox{

        flex-direction: column;


    }

    body .page .page-body .column-left, body .page .page-body .column-right{

        width: 100%;
        margin-bottom: 20px;

    }


}


/* Celulares grandes */
@media (min-width: 481px) and (max-width: 767px) {

    .btoPadrao {
      width: 100%;
    }
    .acoesQuestionario .botoes {
    
      margin-left: auto !important;
      width: 100%;
    }

    .btoPadrao {
      
      margin-top: 5px;
      margin-left: auto;

    }

    header h2 {

        text-transform: uppercase;
        margin: 5px 5px;
        text-align: center;

    }

    body .page-body .flexBox{

        flex-direction: column-reverse;

    }

    body .conteudo .page .page-body .flexBox{

        flex-direction: column;


    }

    body .page .page-body .column-left, body .page .page-body .column-right{

        width: 100%;
        margin-bottom: 20px;

    }

}


/* Tablets */
@media (min-width: 768px) and (max-width: 1023px) {

}


/* Notebook / Laptop */
@media (min-width: 1024px) and (max-width: 1279px) {

}


/* Desktop */
@media (min-width: 1280px) and (max-width: 1439px) {

}


/* Desktop grande */
@media (min-width: 1440px) {

}

/* -MOBILE-FIM- */

.clearboth {
    clear: both;
}

/* BLOCO DO MENU */

    .sidebar .container {

        padding: 0px;
        z-index: 999999;

    }

    .sidebar .container ul{

        margin: 0px;
        padding: 0px;
        list-style: none;
        margin-right: auto; 
        z-index: 99999;

    }

    /* body {
      background: #f5f5f5;
    } */


    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
    }

    .logo {
      font-size: 20px;
      font-weight: bold;
    }

    .menu {
      list-style: none;
      display: flex;
      
    }

    .menu li {
      position: relative;
    }

    .menu > li {
      margin-right: 10px;
    }

    .menu a {
      color: #1F454F;;
      text-decoration: none;
      padding: 10px;
      display: block;
      transition: 0.3s;
      /* border-right: #1F454F 1px solid;
      border-bottom: #1F454F 1px solid;
      border-bottom-right-radius: 5px; */
      background-color: rgb(255, 255, 255);;
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px;
      text-transform: uppercase;
      font-weight: 600;
      font-size: 13px;
    }

    .menu a:hover {
      background: #1F454F;
      border-radius: 5px;
      color: #E6F2F6;
      
    }

    /* Submenu */
    .submenu {
      position: absolute;
      top: 100%;
      left: 0;
      background: #E6F2F6;
      display: none;
      min-width: 200px;
      border-radius: 9px;
      border: solid #367588 3px;
      /* margin-top: 1px !important; */
    }

    .submenu li {
      width: 100%;
    }

    .submenu .submenu {
      left: 100%;
      top: 0;
    }



    /* Removido hover automático para permitir controle por clique */

    .submenu.active {
    display: block;
    }

    /* Mobile */
    .menu-toggle {
      display: none;
      font-size: 24px;
      cursor: pointer;
      color: #1F454F;
    }

    @media (max-width: 768px) {
      

      .menu {
        position: absolute;
        top: 105px;
        left: 0;
        width: 100%;
        flex-direction: column;
        background: #E6F2F6 ;
        display: none;
      }

      .menu a {
        border-bottom: solid 1px #367588;
      }

      .menu.active {
        display: flex;
      }

      .menu > li {
        margin: 0;
      }

      .submenu {
        position: static;
        display: none;
      }

      .submenu.active {
        display: block;
      }

      .menu-toggle {
        display: block;
        padding: 10px;
        font-weight: bold;
        
        clear: both;
        margin-left: auto;
      }
    }

/* BLOCO DO MENU FIM */

/* inicio do css 3 colunas */

.ce-columns-wrapper {
  margin: 10px 0;
}

.ce-columns-controls {
  margin-bottom: 5px;
}

.ce-columns-controls button {
  margin-right: 5px;
  padding: 4px 8px;
  cursor: pointer;
}

.ce-columns {
  display: flex;
  gap: 10px;
}

.ce-column {
  flex: 1;
  /* border: 1px solid #ccc; */
  padding: 10px;
  min-height: 100px;
  border-radius: 8px;
  /* background: #fafafa; */
}

/* Responsivo */
@media (max-width: 600px) {
  .ce-columns {
    flex-direction: column;
  }
}

.ce-columns-controls {
  opacity: 0;
  transition: 0.2s;
}

.ce-columns-wrapper:hover .ce-columns-controls {
  opacity: 1;
}

/* fim do css 3 colunas */