/*
    ==============================
    Fábio G. Silva (www.fabiog.com.br)
    ==============================
    https://www.toptal.com/developers/cssminifier
    */

    @charset "utf-8";

    /* CSS Document */

    body {
        font-family: Roboto, Arial, Helvetica, sans-serif;
        /* background-image: url(../img/background.jpg); */
        background-repeat: repeat;
        margin: 0;
        padding: 0;
        color: #000;
        background-color: #9b1e49;
    }


    /* ~~ Seletores de elementos/tag ~~ */

    ul,
    ol,
    dl {
        /* Devido a variações entre navegadores, é recomendado zerar o padding e a margem nas listas. É possível especificar as quantidades aqui ou nos itens da lista (LI, DT, DD) que eles contêm. Lembre-se: o que você fizer aqui ficará em cascata para a lista de navegação a não ser que você escreva outro seletor mais específico. */
        padding: 0;
        margin: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        margin-top: 0;
        /* ao remover a margem superior, as margens podem escapar das suas containing div. A margem inferior restante vai mantê-la afastada de qualquer elemento que se segue. */
        padding-right: 15px;
        padding-left: 15px;
        /* adicionando o padding para os lados dos elementos dentro dos divs, ao invés dos próprios divs o livra de qualquer combinação de modelo de caixa. Um div aninhado com padding lateral também pode ser usado como método alternativo. */
        color: #666;
    }

    h1 {
        font-size: 22px;
        text-align: center;
        clear: both;
        padding-top: 20px;
    }

    h2 {
        color: #999999;
        font-size: 18px;
        text-align: center;
    }

    h3 {
        color: #999999;
        font-size: 16px;
        text-align: center;
    }

    p {
        color: #000;
        font-size: 14px;
        text-align: center;
    }

    a img {
        /* esse seletor remove a borda azul padrão exibida em alguns navegadores ao redor de uma imagem circundada por um link. */
        border: none;
    }


    /* ~~ A estilização dos links do seu site deve permanecer nesta ordem – incluindo o grupo de seletores que criam o efeito hover. ~~ */

    a:link {
        color: #42413C;
        text-decoration: underline;
        /* a não ser que você estilize seus links para que pareçam extremamente únicos, é melhor utilizar links sublinhados para uma identificação visual mais rápida. */
    }

    a:visited {
        color: #6E6C64;
        text-decoration: underline;
    }

    a:hover,
    a:active,
    a:focus {
        /* esse grupo de seletores dará ao navegador que estiver um teclado a mesma experiência hover do que uma pessoa usando um mouse. */
        text-decoration: none;
    }


    /* ~~ esse contêiner de largura fixa cerca todos os outros elementos ~~ */

    .container {
        width: 80%;
        max-width: 950px;
        background-color: #fff;
        margin: 0 auto;
        /* o valor automático nos lados, combinado com a largura, centraliza o layout */
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        box-shadow: 0 1px 23px #000;
    }


    /* ~~ Informações sobre o layout. ~~ 

    1) O padding é posto somente na parte superior e inferior do div. Os elementos nesse div têm padding nos seus lados impedindo o modelo tipo caixa. Lembre-se: ao adicionar qualquer padding lateral ou bordas no próprio div, ele será adicionado à largura que você define para criar a largura *total*. Também é necessário remover o padding no elemento do div e estabelecer um segundo div, sem largura e o padding necessário para o seu design.

    */

    .content {
        transition: all 0.5s ease;
        padding: 10px 0;
        position: relative;
    }


    /* ~~ flutuações diversas/limpeza de classes ~~ */

    .fltrt {
        /* essa classe pode ser usada para flutuar um elemento à direita da página. O elemento flutuado deve preceder o elemento e ser o próximo da página. */
        float: right;
        margin-left: 8px;
    }

    .fltlft {
        /* essa classe pode ser usada para flutuar um elemento à esquerda da página. O elemento flutuado deve preceder o elemento e ser o próximo da página. */
        float: left;
        margin-right: 8px;
    }

    .clearfloat {
        /* essa classe pode ser colocada em um <br /> ou em um div vazio como o elemento final que segue o último div flutuado (no #contêiner) caso o overflow:hidden no contêiner for removido. */
        clear: both;
        height: 0;
        font-size: 1px;
        line-height: 0px;
    }

    div#text-display {
        padding: 10px;
        font-size: x-large;
    }

    input#input-type {
        border: none;
        padding: 10px;
        text-align: center;
        font-size: x-large;
        border-bottom: thin solid #999;
        width: 87%;
    }

    .letter {
        transition: all 0.5s ease;
    }

    .letter.wrong {
        color: #FFF;
        background-color: #F00;
    }

    .letter.correct {
        color: #FFF;
        /*	background-color:#090;*/
        background-color: #8fb9db;
    }

    .noSelected {
        -webkit-touch-callout: none;
        /* iPhone OS, Safari */
        -webkit-user-select: none;
        /* Chrome, Safari 3 */
        -khtml-user-select: none;
        /* Safari 2 */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* IE10+ */
        user-select: none;
        /* Possível implementação no futuro */
        /* cursor: default; */
    }

    #pause {
        background-color: #d7ab73;
        color: #FFF;
        padding: 4px;
        cursor: default;
        border-radius: 5px;
        margin: 10px;
    }

    #pause.active {
        background-color: #093;
    }

    #pause:hover.active {
        background-color: #0C3;
    }

    #pause:hover {
        background-color: #dda153;
    }

    ::-webkit-input-placeholder {
        color: #e1e1e1;
    }

    :-moz-placeholder {
        /* Firefox 18- */
        color: #e1e1e1;
    }

    ::-moz-placeholder {
        /* Firefox 19+ */
        color: #e1e1e1;
    }

    :-ms-input-placeholder {
        color: #e1e1e1;
    }

    .hand {
        display: block;
        width: 50%;
        font-size: 12px;
        text-align: left;
        margin-bottom: 22px;
    }

    .left.hand {
        float: left;
    }

    .right.hand {
        float: right;
    }

    #tutorial {
        width: 90%;
        margin: auto;
        margin-top: 20px;
    }

    #tutorial img {
        width: 90%;
        height: auto;
    }

    a.btn {
        clear: both;
        padding: 10px;
        background-color: #0066CC;
        color: #FFF;
        margin: 10px;
        text-decoration: none;
        transition: all 0.5s ease;
        border-radius: 5px;
    }

    a.btn:hover {
        background-color: #099;
    }

    button.create_btn {
        background-color: #5daf31;
    }

    button.create_btn:hover {
        background-color: #4ca31d;
    }

    a#reload {
        display: inline-block;
        margin: 10px;
    }

    button.login_btn {
        background-color: #b16502;
    }

    div#logo {
        width: 300px;
        margin: auto;
    }

    .classNavigation {
        position: relative;
        width: 120px;
        display: inline-block;
        font-size: 12px;
        position: absolute;
        top: 18px;
    }

    #next {
        right: 0px;
        float: right;
    }

    #buy-course {
        right: 100px;
        width: 130px;
        display: inline-block;
    }

    #previous {
        left: 0px;
        float: left;
        width: 159px;
    }

    ul.lessons_list {
        list-style-type: none;
        -moz-column-count: 2;
        -moz-column-gap: 20px;
        -webkit-column-count: 2;
        -webkit-column-gap: 20px;
        column-count: 2;
        column-gap: 20px;
    }

    .lessons_list li {
        margin-left: 30px;
        margin-bottom: 5px;
        margin-top: 5px;
        white-space: nowrap;
        max-width: 350px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .content a.list,
    .content a.list:visited {
        text-decoration: none;
        padding: 10px;
        display: inline-block;
        transition: all 0.1s ease;
        border-radius: 5px;
    }

    .content a.list:hover {
        /*text-decoration: underline;*/
        background-color: #c64e03;
        margin-left: 10px;
        color: #FFF;
    }

    .content a.list.offline {}

    .content a.list.done {
        background-color: #00cc66;
        color: #FFF;
    }

    .content a.list.incomplete {
        background-color: #ff9933;
        color: #FFF;
    }

    ul.group_list li {
        margin-bottom: 10px;
        margin-top: 10px;
    }

    ul.group_list {
        margin-left: 50px;
        list-style-type: none;
    }

    div.home {
        padding: 20px;
        display: inline-block;
    }

    a div.block,
    a div.block span {
        text-decoration: none;
    }

    div.block {
        padding: 20px;
        background-color: #4da6ff;
        display: block;
        text-align: center;
        float: left;
        min-width: 150px;
        min-height: 150px;
        margin: 10px;
        color: #FFF;
        transition: all 0.5s ease;
    }

    div.block:not(.nocursor):hover {
        background-color: #ff8c1a;
    }

    div.block span.title {
        font-weight: 400;
    }

    div.block span.big {
        font-size: 30px;
        text-align: center;
        margin: auto;
        display: block;
        margin-top: 40px;
    }

    div.block img {
        max-width: 100px;
        margin: 10px;
    }

    div.dashboard {
        clear: both;
        margin: auto;
    }

    a.btn.removeEspecialChars {
        cursor: default;
    }


    /*--------------LOGIN*/

    input[type=number],
    input[type=date],
    input[type=email],
    input[type=text],
    input[type=password],
    select {
        padding: 10px;
        font-size: 1.2em;
        border: thin solid #e1e1e1;
        margin: 10px;
        font-size: 15px;
        font-family: "Arial";
    }

    button {
        padding: 11px;
        border: none;
        background-color: #0066CC;
        color: #FFF;
        font-size: 18px;
        margin-top: 10px;
        margin-left: 5px;
        min-width: 150px;
        border-radius: 24px;
    }

    button:hover {
        background-color: #ff6600;
    }

    .register_box,
    .forgot_box,
    .login_box {}

    .center_box {
        text-align: center;
        margin: 40px;
    }

    .register_box label {
        display: inline-table;
        list-style: none;
    }

    label {
        display: list-item;
        list-style: none;
    }

    img#poweredby,
    img#logo {
        margin: auto;
        width: 250px;
        display: block;
    }

    img#poweredby {
        width: 120px;
    }


    /*--------------LOGIN*/

    span.info,
    span.error {
        display: block;
        border: thin solid #da203a;
        padding: 10px;
        margin: 20px;
    }

    span.info {
        border: thin solid #090;
    }

    .payment_box.center_box {
        text-align: left;
    }

    .nocursor {
        cursor: default;
    }

    span.license {
        display: inline-block;
        padding: 12px;
        margin: 15px;
        border-radius: 10px;
        color: #FFF;
    }

    span.license.free {
        background-color: #00cc66;
    }

    span.license.pro {
        background-color: #668cff;
    }

    span.license.admin {
        background-color: #000;
    }

    span.license.partner {
        background-color: #e2891f;
    }

    span.lesson.done {
        font-size: 10px;
        background-color: #00b359;
        color: white;
        padding: 4px;
        margin: 0px 9px 0px 0px;
    }

    table {
        border-collapse: collapse;
        width: 87%;
        margin: auto;
    }

    td,
    th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }

    table {
        font-size: 11px;
    }

    th {
        background-color: #f95893;
        color: white;
    }

    tr:nth-child(even) {
        background-color: #ededed;
    }

    #info {
        cursor: alias;
    }

    .info_box {
        /*
        transition: all 0.5s ease;
        display: block;
        height: 0px;
        width: 0%;
        overflow:hidden;*/
    }

    .info_box.open {
        /*width: 100%;
        height: auto;
        overflow:auto;*/
    }

    span#percentual {
        font-size: 21px;
        margin: 12px;
        color: #d2691e;
        background-color: beige;
        padding: 36px;
        border: thin solid #d7ab73;
        display: block;
    }

    span#percentual.correct {
        color: #3d916a;
        background-color: #dec;
        padding: 36px;
        border: thin solid #73d7c4;
        display: block;
    }

    a.btn-buy {
        background-color: #0099ff;
        padding: 10px;
        text-align: center;
        margin: 0 0 0 0;
        border-radius: 9px;
        color: #fff;
        text-decoration: none;
        display: inline-block;
    }

    .content #buy-course a.btn {
        background-color: #093;
    }

    .content #buy-course a.btn:hover {
        background-color: #0c3;
    }

    a.btn-buy:hover {
        background-color: #eb782f;
    }

    a.btn-buy span {
        font-weight: bolder;
    }

    span.off {
        text-decoration: line-through;
        color: #E1E286;
    }

    input#off {
        text-transform: uppercase;
    }

    a span.off-nonbold {
        font-weight: normal;
        font-size: 13px;
    }

    #addtext {
        width: 80%;
        display: block;
        margin: auto;
        text-align: center;
        margin-bottom: 50px;
    }

    textarea#customtext {
        width: 100%;
        min-height: 200px;
        margin-bottom: 30px;
        font-size: 20px;
        word-break: break-all;
    }

    span#crctr {
        margin-top: -20px;
        display: block;
        font-size: 12px;
    }

    .info_box {
        margin-bottom: 22px;
    }

    #mycertificate {
        background-image: url(../img/certificado-digitacao_certificado-template.png);
        background-color: #FFF;
        width: 2000px;
        height: 1700px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position-x: center;
        background-position-y: center;
        margin: auto;
        position: relative;
        margin-bottom: 23px;
    }

    #mycertificate span#name,
    #mycertificate span#date,
    #mycertificate span#tpm,
    #mycertificate span#hours,
    #mycertificate span#idcertificado,
    #mycertificate span#course_period,
    #mycertificate span#school_logo,
    #mycertificate span#school_issuer {
        position: absolute;
        text-transform: uppercase;
        left: 147px;
        top: 229px;
        text-align: center;
        font-size: 60px;
    }

    #mycertificate span#school_logo {
        left: 1595px;
        top: 1150px;
        width: 170px;
        background-color: #FFF;
    }

    #mycertificate span#school_logo img {
        width: 100%;
    }

    #mycertificate span#school_issuer {
        left: 1580px;
        top: 1133px;
        font-size: 15px;
        text-align: center;
        width: 205px;
        line-height: 17px;
    }

    #mycertificate span#course_period {
        left: 751px;
        top: 1362px;
        font-size: 20px;
        color: #c3c3c3;
    }

    #mycertificate span#name {
        top: 900px;
        position: absolute;
        text-transform: uppercase;
        left: 462px;
        width: 1087px;
        text-align: center;
    }

    #mycertificate span#date {
        top: 1200px;
        left: 430px;
    }

    #mycertificate span#tpm {
        top: 1200px;
        left: 920px;
    }

    #mycertificate span#hours {
        left: 1325px;
        top: 1200px;
    }

    #mycertificate span#idcertificado {
        left: 1550px;
        top: 1400px;
        font-size: 26px;
        color: #a1a1a1;
    }

    div#hidecertificate {
        display: block;
        overflow: hidden;
        width: 1px;
        height: 1px;
    }

    ul.user_group_list {
        margin: 50px;
    }

    img.icon-user-report {
        width: 20px;
    }

    ul.user_group_list {
        list-style: none;
    }

    li.user-list-school {
        margin: 8px;
        padding: 12px;
        max-width: 180px;
        float: left;
        border-radius: 5px;
        color: #FFF;
        word-break: break-word;
        min-height: 225px;
        min-width: 195px;
    }

    li.user-list-school span {
        font-size: 12px;
    }

    li.user-list-school.active {
        background-color: #2b9b41;
    }

    li.user-list-school.inactive {
        background-color: #e6767a;
    }

    .school.navigation_aula:hover {
        background-color: #fb689ebf;
    }

    .user-list-school .school_btn {
        color: #666;
        font-size: 14px;
        margin: 2px;
        text-decoration: none;
        margin: 5px;
        display: inline-block;
        background-color: #ffffff;
        padding: 4px;
        border-radius: 6px;
        float: left;
    }

    .user-list-school .school_btn:hover {
        background-color: #dadada;
    }

    .getAvareage {
        color: #11871f;
    }

    .didnotGetAverage {
        color: #d80637;
    }

    #increase,
    #decrease {
        border: thin solid #ccc;
        padding: 2px;
        background-color: #dcdcdc;
        cursor: pointer;
    }

    #increase:hover,
    #decrease:hover {
        background-color: #fff;
    }

    #decrease .a {
        font-size: 11px;
    }

    #increase .a {
        font-size: 16px;
    }

    #sound {
        width: 20px;
        top: 0px;
        position: relative;
        cursor: pointer;
    }


    /* videos */

    .videos_box.center_box {
        text-align: left;
    }

    .videos_box.center_box p {
        text-align: left;
    }

    .videos_box.center_box ul {
        text-align: left;
        margin: 20px;
        padding: 6px;
    }

    .videos_box.center_box ul li {
        padding: 6px;
    }

    .aula {
        display: none;
    }

    .navigation_aula {
        background-color: #f7206fbf;
        font-size: 20px;
        padding: 9px;
        display: block;
        width: 160px;
        text-align: center;
        cursor: pointer;
        color: #FFF;
    }

    div#finish_aula,
    div#next_aula {
        float: right;
    }

    div#prev_aula {
        float: left;
    }

    h2 {
        color: #2d8eb5;
        font-size: 22px;
        text-align: center;
        margin-top: 59px;
    }

    .videos_box.center_box iframe {
        width: 100%;
        height: 442px;
    }

    .school.navigation_aula {
        color: #FFF;
        text-decoration: none;
        float: left;
        margin: 10px;
        border-radius: 6px;
    }

    .log_box ul {
        list-style: decimal-leading-zero;
        text-align: left;
    }

    p#idsuporte a,
    p#idsuporte {
        font-size: 10px;
    }

    div#school-menu {
        display: inline-block;
        clear: both;
    }


    /* INICIO COR DE FUNDO RODAPE */

    .color-box {
        display: inline-block;
        width: 15px;
        height: 15px;
        margin-right: 5px;
        cursor: pointer;
        border-radius: 5px;
    }

    .backgroundColor1 {
        /*
        background-color: #4da6ff;
        */
        background-color: #1775d2;
    }

    .backgroundColor2 {
        background-color: #9b1e49;
    }

    .backgroundColor3 {
        background-color: gray;
    }

    .backgroundColor4 {
        background-color: #111111;
    }

    div#backgroundcolorselect {
        width: 100px;
        margin: auto;
        margin-left: 20px;
        font-size: 10px;
    }


    /* FIM COR DE FUNDO RODAPE */


    /* FORMULARIOS CENTER BOX */



    /* Estilo dos campos de entrada */
    .center_box input[type="text"],
    .center_box input[type="email"],
    .center_box input[type="password"],
    .center_box input[type="number"],
    .center_box input[type="date"],
    .center_box select,
    select#estado {
        width: 100%; /* Largura total */
        padding: 10px; /* Espaçamento interno */
        border: 1px solid #ddd; /* Borda sutil */
        border-radius: 4px; /* Bordas arredondadas */
        margin-top: 5px; /* Espaço acima do campo */
        box-sizing: border-box; /* Para incluir padding e borda no cálculo da largura */
        font-size: 14px; /* Tamanho da fonte */
        max-width:none;
    }

    /* Estilo geral da caixa de registro */
    .register_box,
    .login_box {
        background-color: #f9f9f9; /* Fundo claro */
        border-radius: 8px; /* Bordas arredondadas */
        box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
        padding: 20px; /* Espaçamento interno */
        margin: 20px auto; /* Centraliza a caixa */
        max-width: 600px; /* Largura máxima */
    }

    /* Títulos */
    .register_box h3 {
        font-size: 24px; /* Tamanho da fonte */
        color: #333; /* Cor do texto */
        margin-bottom: 10px; /* Espaço abaixo do título */
    }

    .register_box h4 {
        font-size: 12px; /* Tamanho menor para o subtítulo */
        color: #666; /* Cor do texto mais clara */
        margin-bottom: 15px; /* Espaço abaixo do subtítulo */
    }

    /* Parágrafos */
    .register_box p {
        font-size: 14px; /* Tamanho padrão */
        color: #555; /* Cor do texto padrão */
        line-height: 1.5; /* Espaçamento entre linhas */
    }

    /* Estilo dos labels */
    .register_box label {
        display: grid; /* Faz o label ocupar a largura total */
        margin-bottom: 10px; /* Espaço abaixo de cada label */
        font-weight: bold; /* Destaca os labels */
        color: #333; /* Cor do texto */
    }
    /* Efeito de foco nos campos */
    .register_box input:focus,
    .register_box select:focus {
        border-color: #007bff; /* Cor da borda ao focar */
        outline: none; /* Remove o contorno padrão */
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Sombra ao focar */
    }


    /* Estilo para o texto de rodapé */
    .register_box span {
        display: block; /* Ocupa a largura total */
        margin-top: 20px; /* Espaço acima do rodapé */
        font-size: 10px; /* Tamanho menor */
        color: #777; /* Cor do texto mais clara */
        text-align: center; /* Centraliza o texto */
    }

    /* Estilo de texto dentro do span */
    .register_box p {
        margin: 0; /* Remove margem padrão */
    }
    .center_box input[type="number"].input-report{
        width: 200px;
    }

    /* FIM FORMULARIOS CENTER BOX */




/* ---- Instruction section ---- */
#instruction {
  text-align: left;
  font-size: 13px;
  color: #ccc;
  background: #3a3a3a;
  border-radius: 10px;
  clear: both;
  margin: 20px auto;
  max-width: 860px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
#instruction h2 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-align: left !important;
  margin: 0 !important;
  padding: 12px 20px;
  background: #06c;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#instruction ul {
  list-style: none;
  padding: 16px;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  counter-reset: inst-counter;
}
#instruction li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #444;
  border-radius: 7px;
  border: 1px solid #555;
  line-height: 1.5;
  color: #ccc;
  counter-increment: inst-counter;
}
#instruction li::before {
  content: counter(inst-counter);
  background: #06c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  min-width: 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
#instruction a   { color: #6ea8fe; }
#instruction img.info { vertical-align: middle; width: 16px; filter: brightness(1.5); }

/* ---- Lesson responsive ---- */
@media (max-width: 620px) {
  #instruction ul { grid-template-columns: 1fr; padding: 10px; }
}
@media (max-width: 600px) {
  #hands-panel { flex-direction: column; }
}



#tutorial h2{
    margin-top:20px;
}