/*
    ==============================
    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#certificate_qr {
        position: absolute;
        left: 900px;
        top: 611px;
        width: 145px;
        height: 145px;
        background: #fff;
        padding: 8px;
    }

    #mycertificate span#school_logo {
        left: 1575px;
        top: 1050px;
        width: 199px;
        background-color: #FFF;

    }

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

    #mycertificate span#school_issuer {
        left: 1555px;
        top: 1010px;
        font-size: 15px;
        text-align: center;
        width: 230px;
        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: 1400px;
        top: 1400px;
        font-size: 26px;
        color: #a1a1a1;
    }

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

    /* a.btn é inline por padrão: padding/margin vertical não empurram o
       conteúdo seguinte, então o botão visualmente encavala no texto abaixo. */
    .certificate_box #download.btn {
        display: inline-block;
        margin: 15px 0 35px;
    }

    .certificate_box #certificate-action-message {
        min-height: 1.2em;
        margin: 10px 0;
        font-weight: bold;
        color: #087f4c;
    }

    .certificate_box h3 {
        margin-top: 30px;
        margin-bottom: 15px;
    }

    img.icon-user-report {
        width: 16px;
        vertical-align: middle;
    }

    ul.user_group_list {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 16px;
        margin: 24px 0 0;
        padding: 0;
    }

    li.user-list-school {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px;
        border-radius: 8px;
        background-color: #fff;
        border: 1px solid #e6e6e6;
        border-left: 4px solid #b1b1b1;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        word-break: break-word;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }

    li.user-list-school:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

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

    li.user-list-school.a {
        border-left-color: #7a8ba6;
    }

    li.user-list-school.b {
        border-left-color: #2b9b41;
    }

    li.user-list-school.c {
        border-left-color: #d9534f;
    }

    .student-status-badge {
        align-self: flex-start;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 3px 8px;
        border-radius: 20px;
        color: #fff;
    }

    .student-status-badge.status-active {
        background-color: #2b9b41;
    }

    .student-status-badge.status-pending {
        background-color: #7a8ba6;
    }

    .student-status-badge.status-inactive {
        background-color: #d9534f;
    }

    .student-name {
        font-size: 15px;
        color: #222;
    }

    .user-list-school .lemail {
        display: block;
        margin-top: -8px;
        color: #888;
        font-size: 11px;
    }

    .student-meta {
        display: flex;
        flex-direction: column;
        gap: 3px;
        color: #555;
        font-size: 12px;
        border-top: 1px solid #f0f0f0;
        padding-top: 8px;
    }

    .student-uid {
        color: #aaa;
        font-size: 10px;
    }

    .student-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: auto;
        padding-top: 4px;
    }

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

    .user-list-school .school_btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: #444;
        font-size: 11px;
        text-decoration: none;
        background-color: #f2f2f2;
        padding: 5px 8px;
        border-radius: 20px;
        white-space: nowrap;
    }

    .user-list-school .school_btn:hover {
        background-color: #0066cc;
        color: #fff;
    }

    .user-list-school .school_btn:hover img {
        filter: brightness(0) invert(1);
    }

    .getAvareage {
        color: #11871f;
    }

    .didnotGetAverage {
        color: #d80637;
    }

    /* Tabela de lições/status do aluno (student-status.php, students-lessons.php) —
       escopado por #table-ranking-list.sortable-table para não colidir com o outro
       #table-ranking-list (sem essa classe) usado dentro de #addtext. */
    .table-card-wrapper {
        overflow-x: auto;
        border-radius: 10px;
        border: 1px solid #e6e6e6;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        margin-top: 16px;
        background-color: #fff;
    }

    #table-ranking-list.sortable-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    #table-ranking-list.sortable-table thead th {
        position: sticky;
        top: 0;
        background-color: #f7f7f7;
        color: #333;
        text-align: left;
        padding: 10px 12px;
        font-weight: 700;
        border-bottom: 2px solid #e6e6e6;
        white-space: nowrap;
    }

    #table-ranking-list.sortable-table th.col-rank {
        width: 40px;
    }

    #table-ranking-list.sortable-table th.th-sortable {
        cursor: pointer;
        user-select: none;
    }

    #table-ranking-list.sortable-table th.th-sortable:hover {
        background-color: #eee;
    }

    #table-ranking-list.sortable-table th.th-sortable::after {
        content: '\21C5';
        display: inline-block;
        margin-left: 4px;
        font-size: 10px;
        color: #aaa;
    }

    #table-ranking-list.sortable-table th.th-sortable.sort-asc::after {
        content: '\25B2';
        color: #0066cc;
    }

    #table-ranking-list.sortable-table th.th-sortable.sort-desc::after {
        content: '\25BC';
        color: #0066cc;
    }

    #table-ranking-list.sortable-table tbody td {
        padding: 8px 12px;
        border-bottom: 1px solid #f0f0f0;
        color: #444;
    }

    #table-ranking-list.sortable-table tbody tr:nth-child(even) {
        background-color: #fafafa;
    }

    #table-ranking-list.sortable-table tbody tr:hover {
        background-color: #f0f6ff;
    }

    #table-ranking-list.sortable-table td.col-rank {
        color: #aaa;
        font-size: 11px;
        text-align: center;
    }

    #table-ranking-list.sortable-table .lesson-progress {
        position: relative;
        width: 90px;
        height: 20px;
        background-color: #f2f2f2;
        border-radius: 20px;
        overflow: hidden;
    }

    #table-ranking-list.sortable-table .lesson-progress-bar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        background-color: #2b9b41;
        opacity: 0.25;
    }

    #table-ranking-list.sortable-table .lesson-progress-label {
        position: relative;
        z-index: 1;
        display: block;
        text-align: center;
        line-height: 20px;
        font-size: 11px;
        color: #333;
        text-decoration: none;
    }

    #table-ranking-list.sortable-table .status-badge {
        display: inline-flex;
        align-items: center;
        font-size: 11px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 20px;
        text-decoration: none;
        white-space: nowrap;
    }

    #table-ranking-list.sortable-table .status-badge.status-approved {
        background-color: #2b9b41;
        color: #fff;
    }

    #table-ranking-list.sortable-table .status-badge.status-approved:hover {
        background-color: #237a34;
    }

    #table-ranking-list.sortable-table .status-badge.status-pending {
        background-color: #eef0f2;
        color: #7a8ba6;
    }

    /* CÓDIGO DE USUÁRIO PARA SUPORTE (RODAPÉ) */

    .idsuporte-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 14px;
        background-color: #f2f6fc;
        border: 1px solid #d6e4f7;
        border-radius: 20px;
        color: #555;
        font-size: 12px;
    }

    .idsuporte-badge a {
        color: #0066cc;
        text-decoration: none;
        font-weight: 600;
    }

    .idsuporte-badge a:hover {
        text-decoration: underline;
    }

    .idsuporte-code {
        display: inline-block;
        min-width: 16px;
        padding: 2px 8px;
        background-color: #0066cc;
        color: #fff;
        border-radius: 10px;
        font-weight: 700;
        font-family: 'Courier New', monospace;
        font-size: 11px;
        line-height: 1.4;
    }

    @media (max-width: 600px) {
        #table-ranking-list.sortable-table {
            font-size: 12px;
        }

        #table-ranking-list.sortable-table thead th,
        #table-ranking-list.sortable-table tbody td {
            padding: 6px 8px;
        }
    }

    #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;
    }

    .idsuporte-badge {
        font-size: 10px;
        padding: 4px 10px;
    }

    .idsuporte-code {
        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;
}

/* ---- Treino personalizado (custom.php) ---- */
#addtext {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    padding: 26px 30px 30px;
}

#addtext p {
    color: #555;
}

textarea#customtext {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea#customtext:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}

#addtext span#crctr {
    display: inline-block;
    margin-top: 0px;
    padding: 4px 10px;
    border-radius: 20px;
    background-color: #f0f0f0;
    color: #777;
    margin-bottom: 21px;
}

#addtext a#addtext-btn.btn {
    font-size: 15px;
    padding: 12px 26px;
}

#addtext h3 {
    text-align: left;
    margin-top: 36px;
    margin-bottom: 10px;
    color: #666;
}

.table-scroll {
    overflow-x: auto;
}

#addtext table#table-ranking-list {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

#addtext table#table-ranking-list th {
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 10px 8px;
    white-space: nowrap;
}

#addtext table#table-ranking-list td {
    font-size: 12px;
    padding: 9px 8px;
    white-space: nowrap;
}

#addtext table#table-ranking-list tr:hover td {
    background-color: #fbeef2;
}

#addtext table#table-ranking-list td.empty-row {
    text-align: center;
    color: #999;
    white-space: normal;
    background-color: #fff;
}

#addtext table#table-ranking-list a.previous-text {
    color: #0066cc;
    font-weight: 600;
    text-decoration: none;
}

#addtext table#table-ranking-list a.previous-text:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    #addtext {
        padding: 16px;
    }
}