:root {
    /*WHITE*/
    --color-white: #FFFFFF;
    --color-white-900: #EFEFEF;
    --color-white-800: #F2F2F2;
    --color-white-700: #EBEBEB;
    --color-white-500: #F0F0F0;
    --color-white-600: #F6F6F6;
    /*BLACK*/
    --color-black: #000000;
    --color-black-900: #050505;
    --color-black-800: #181818;
    --color-black-200: #221a17;
    --color-black-100: #1E2340;
    /*YELLOW*/
    --color-yellow: #FF9B04;
    --color-yellow-100: #FDC97C;
    --color-yellow-500: #fff0da;
    --color-yellow-600: #F7B100;
    /*GREEN*/
    --color-green: #54D969;
    --color-green-100: #E8F3EC;
    --color-green-500: #f0dec3;
    /*BLUE*/
    --color-blue: #0F7BA6;
    --color-blue-900: #0000FF;
    --color-blue-800: #04B4FF;
    --color-blue-700: #0A66C2;
    --color-blue-600: #3D77B7;
    --color-blue-100: #E8EFF1;
    --color-blue-grid: #459ad6;
    /*GRAY*/
    --color-gray-800: #333;
    --color-gray-700: #6B6B6B;
    --color-gray-600: #595959;
    --color-gray-500: #898A8D;
    --color-gray-300: #B3BAC5;
    --color-gray-200: #C1C9D8;
    --color-gray-100: #e1e9ef;
    /*RED*/
    --color-red-600: #E91D62;
    --color-red-100: #F6EBEB;
    --color-red: #F00;
    /*HOVER*/
    --hover-box: #F5F9FF;
    /* Colors */
    --BgBody: #F9F9F9;
    --body-color: #e4e9f7;
    --sidebar-color: #fff;
    --primary-color: #E8F0FB;
    --primary-color-light: #f6f5ff;
    --toggle-color: #ddd;
    --text-color: #707070;
    --color-grey-100: #D4D4D4;
    --icons-item-nav: #B3BAC5;
    --color-icon-hover: #1565D8;
    --icons-nav-active: #1565D8;
    --Ttulo: #183B56;
    --icons-nav-bg-active: #E8F0FB;
    --Logos-BgSaladoFuturo: rgba(229, 3, 3, 0.14);
    /* Tranistions */
    --tran-02: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
    /*CORES VERTICAIS*/
    --color-frequencia: #E36496;
    --color-avalicao: #006B7B;
    --color-registror-aulas: #F7B100;
    --color-fechamento: #EB5757;
    --color-turmas: #20C7A3;
    --color-eletiva: #6495ED;
    /*CORES LEGENDA CALEDARIO*/
    --color-indisponivel: #9A9CA7;
    --color-nao-letivo: #d92121;
    --color-dia-disponiveis: #374F78;
    --color-dia-lancado: #20C7A3;
    --color-dia-atual: #F7B100;
    /*CORES TABELA*/
    --color-grey-500: #F9F9F9;
    --color-grey-600: #f1f1f1;
    /*CARD ALLUNO*/
    --color-blue-112: #3194B2;
    --Text-Default: #606878;
    --color-gray-450: #3F4756;
    --color-gray-095: #E5E9F2;
    --Text-Title: #374F78;
    --color-sombra-rgba: rgba(0, 0, 0, 0.20);
    --color-aluno-ativo: #25AF6B;
    --color-aluno-inativo: #FFA500;
    --color-aluno-transferencia: #868B89;
    --color-verde-presenca: #20C7A3;
    --color-vermelho-falta: #E53239;
    --color-cinza-desabilitado: #BDBDBD;
    --bb-table-sticky-background-color: #0d6efd;
}

.div-grid {
    border: 1px;
    border-radius: 15px;
    padding-top: 0.5rem;
    /*box-shadow: 0px 2.571px 20px 7px rgba(0, 0, 0, 0.06);*/
}

.bg-primary {
    color: #FFF !important;
    background-color: #0d6efd !important;
}

.bg-primary-grid {
    color: #FFF !important;
    background-color: #51ABEB !important;
}

.bb-table-sticky>thead>tr>th {
    background-color: #51ABEB !important;
}

/* BARRA DE SCROLL BONITA*/
body::-webkit-scrollbar {
    width: 7px;
}

body::-webkit-scrollbar-track {
    background-color: var(--color-white-500);
}

body::-webkit-scrollbar-thumb {
    background-color: #211916;
    border-radius: 20px;
    border: 3px solid #211916;
}

.modal-body::-webkit-scrollbar {
    width: 7px;
}

.modal-body::-webkit-scrollbar-track {
    background-color: var(--color-white-500);
}

.modal-body::-webkit-scrollbar-thumb {
    background-color: #211916;
    border-radius: 20px;
    border: 3px solid #211916;
}

.table-responsive::-webkit-scrollbar {
    width: 4px !important;
}

.table-responsive::-webkit-scrollbar-track {
    background-color: var(--color-white-500);
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: #1351b4;
    border-radius: 5px;
    /*border: 3px solid #1351b4;*/
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: #0d6efd;
}

/* END BARRA DE SCROLL BONITA*/

body {
    overflow: auto !important;
    font-family: 'Open Sans', sans-serif;
}

.btn {
    border-radius: 2.75rem;
    width: 100%;
    font-weight: 500;
}


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

    .btn-primary {
        padding-left: 10px;
        padding-right: 10px;
    }

    .btn-outline-primary {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.btn-outline-primary {
    --bs-btn-color: #1351B4;
    --bs-btn-border-color: #1351B4;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1351B4;
    --bs-btn-hover-border-color: #1351B4;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1351B4;
    --bs-btn-active-border-color: #1351B4;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #1351B4;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #1351B4;
    --bs-gradient: none;
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] {
    background-color: #bdbdbd;
    color: #606878;
    cursor: no-drop;
    border: solid 1.8px #707070;
    cursor: not-allowed;
}

select.disabled,
select[disabled] {
    cursor: not-allowed;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-color: #2e6da4;
    pointer-events: auto;
}

.invalid {
    outline: #e50000 solid 1px
}

.validation-message {
    color: #e50000
}

.field-validation-error {
    margin: 0 0 4px;
    color: var(--color-white);
    background-color: #f74949;
    padding: 2px 5px;
    width: 100%;
    display: flex
}

.perfil-aluno {
    padding: 0px;
    display: flex;
    justify-content: center;
}

.perfil-aluno span {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-gray-200);
    color: var(--color-white);
    font-weight: bold;
    font-size: x-large;
    border-radius: 50%;
}

.img-aluno {
    border-radius: 50%;
    width: 6rem;
    height: 6rem;
    overflow: hidden;
}

.img-aluno img {
    width: 100%;
}

.iniciais-perfil {
    border-radius: 50%;
    width: 6rem;
    height: 6rem;
    overflow: hidden;
}

.iniciais-perfil img {
    width: 100%;
}


.img-aluno-small {
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
}

.img-aluno-small img {
    width: 100%;
}

.iniciais-perfil-small {
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
}

.iniciais-perfil-small img {
    width: 100%;
}

/*FOOTER*/
.footer-main {
    background: var(--Label-bg, #FFF);
    margin-top: auto;
    position: relative;
    bottom: 0px;
}

.rodape {
    display: flex;
    width: 76rem;
    padding: 0.625rem;
    align-items: center;
    gap: 3.125rem;
    flex-shrink: 0;
    max-width: 1248px;
    width: 100%;

    & .links {
        display: flex;
        padding: 0.625rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
        align-self: stretch;

        h6 {
            color: var(--Ttulo, #183B56);
            font-family: 'Open Sans', sans-serif;
            font-size: 0.6875rem;
            font-style: normal;
            font-weight: 700;
            line-height: 1.25rem;
            /* 181.818% */
            letter-spacing: 0.00975rem;
            margin-bottom: 0;
        }

        a {
            color: var(--Ttulo, #183B56);
            font-family: 'Open Sans', sans-serif;
            font-size: 0.6875rem;
            font-style: normal;
            font-weight: 500;
            line-height: 1.25rem;
            /* 181.818% */
            letter-spacing: 0.00975rem;
            /*text-transform: capitalize;*/
        }
    }
}

.btn-store {
    display: block;
    padding: 0.375rem;
    align-items: center;
    gap: 0.5rem;
    text-indent: -9999px;
    cursor: pointer;
}

.btn-store:hover {
    background-position: bottom;
}

.btn-google {
    width: 8.5625rem;
    height: 2.13731rem;
    background-image: url(./assests/icon-google-play.png);
}

.btn-apple {
    width: 8.5625rem;
    height: 2.20331rem;
    background-image: url(./assests/icon-apple.png)
}

.logo-footer {
    margin-top: 2.81rem;
    display: block;
    max-width: 13.375rem;
    width: 100%;
    height: 3.875rem;
    display: flex;
    padding: 2.8125rem 0.625rem 0.625rem 0.625rem;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
    background-image: url(./assests/logo-sala-do-futuro-footer.png);
    background-repeat: no-repeat;
    background-position: center center;
}

/*FOOTER TABLET*/
@media only screen and (max-width: 1180px) {
    .logo-footer {
        max-width: 100%;
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .logo-footer {
        max-width: 768px;
        width: 100%;
    }

    .rodape {
        padding-left: 80px;
        gap: 15px;

        & .links {
            max-width: 261px;
            width: 100%;
        }
    }

}

/*FOOTER CELULAR*/
@media only screen and (max-width: 430px) {
    .rodape {
        padding-left: 0px;
        gap: 5px;

        & .links {
            align-items: center;
        }
    }
}

/*END FOOTER*/


/*//TOP HEADER PAGE*/
.bb-top-row {
    border-bottom: 0;
    height:
}

@media (min-width: 641px) {
    .bb-top-row {
        position: inherit !important;
        height: 4.5rem !important;
    }
}

.dropdown__Perfil {
    & .dropdown-menu {
        flex-direction: column !important;
        align-items: flex-start !important;
        border-radius: 0.375rem !important;
        border: 1px solid rgba(53, 53, 53, 0.75) !important;
        background: #FFF;
        padding: 0 !Important;

        & .header-down-perfil {
            width: 100%;
            padding: 0.9375rem 0.625rem;
            border-bottom: 1px solid rgba(53, 53, 53, 0.75);
            color: #183B56;
            font-family: 'Open Sans', sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            text-transform: uppercase;
            position: relative;

            &:before {
                position: absolute;
                content: " ";
                font-size: 15px;
                background-image: url(./assests/icon-close.svg);
                width: 19px;
                height: 19px;
                right: 10px;
                cursor: pointer;
                top: 14px;
            }
        }

        & .dropdown__prefil_item {
            display: flex;
            height: 3.25rem;
            padding: 0rem 1.125rem;
            align-items: center;
            gap: 0.9375rem;
            align-self: stretch;
            height: 3.25rem;
            color: #183B56;
            font-family: 'Open Sans', sans-serif;
            font-size: 0.6875rem;
            font-style: normal;
            font-weight: 500;
            line-height: 1.25rem;
            /* 181.818% */
            letter-spacing: 0.00975rem;
        }

    }
}

.btn-down-perfil {
    & .btn-group {
        & .dropdown-toggle {
            background-color: #FFFFFF;
            border: none !important;
            padding: 0;
            color: var(--Ttulo, #183B56);
            font-family: 'Open Sans', sans-serif;
            font-size: 0.85813rem;
            font-style: normal;
            font-weight: 500;
            line-height: 1.22588rem;
            /* 142.857% */
            letter-spacing: 0.00956rem;
        }

    }
}

@media only screen and (max-width: 430px) {
    .conteudo-perfil {
        gap: 5px !important;
    }

    .btn-down-perfil {
        & .btn-group {
            & .dropdown-toggle {
                white-space: nowrap;
                width: 60px;
                overflow: hidden;
                text-overflow: ellipsis;
                /*                &::after
                {
                    left:0!important;
                    top:0!important;
                }*/
            }
        }
    }
}

.icon-alterar-de {
    width: 37px;
    height: 37px;
    display: block;
    background-image: url(./assests/icon-troca-de.svg);
    background-position: top 3px center;
    background-size: contain;
    background-repeat: no-repeat;
}

.btn-alterar-de {
    display: flex;
    width: auto;
    height: 2.9375rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-radius: 1.4375rem;
    box-shadow: 0px 1px 4.7px 0px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    padding: 0 15px;

    p {
        text-decoration: none;
        color: var(--ttulo2, rgba(24, 59, 86, 0.87));
        text-align: left;
        font-family: 'Open Sans', sans-serif;
        font-size: 0.75rem;
        font-style: normal;
        line-height: normal;
        font-weight: 400;
        margin-bottom: 0;
        color: var(--Teclado-tecladoteclas2, #ADB3BC);

        b {
            font-weight: bold;
            color: var(--ttulo2, rgba(24, 59, 86, 0.87));
        }

        span {
            color: var(--ttulo2, rgba(24, 59, 86, 0.87));
        }
    }

    &:hover {
        opacity: 0.8;
        box-shadow: 0px 0.5px 4.7px 0px rgba(0, 0, 0, 0.15);

        i {
            opacity: 0.6;
        }
    }
}

.icon-alterar-perfil {
    width: 34px;
    height: 36px;
    display: block;
    background-image: url(./assests/icon-alterar-perfil-blue.svg);
    background-position: top 3px center;
    background-size: contain;
    background-repeat: no-repeat;
}

.btn-alterar-perfil {
    display: flex;
    width: auto;
    height: 2.9375rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-radius: 1.4375rem;
    box-shadow: 0px 1px 4.7px 0px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    padding: 0 15px;

    p {
        text-decoration: none;
        color: var(--ttulo2, rgba(24, 59, 86, 0.87));
        text-align: left;
        font-family: 'Open Sans', sans-serif;
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-bottom: 0;
    }

    &:hover {
        opacity: 0.8;
        box-shadow: 0px 0.5px 4.7px 0px rgba(0, 0, 0, 0.15);

        i {
            opacity: 0.6;
        }
    }
}

.icon-policia {
    width: 30px;
    height: 30px;
    display: block;
    background-image: url(./assests/police_hat.svg);
    /*background-position: top 1px center;*/
    background-size: contain;
    background-repeat: no-repeat;
    /*filter: invert(1);*/
    margin-right: -5px;
}

.btn-chamar-policia {
    display: flex;
    width: auto;
    min-width: 165px;
    height: 2.9375rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-radius: 1.4375rem;
    box-shadow: 0px 1px 4.7px 0px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    padding: 0 10px;
    background-color: #d22d2d;
    color: white;

    p {
        text-decoration: none;
        color: white;
        text-align: left;
        font-family: 'Open Sans', sans-serif;
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-bottom: 0;
    }

    &:hover {
        opacity: 0.8;
        box-shadow: 0px 0.5px 4.7px 0px rgba(0, 0, 0, 0.15);

        i {
            opacity: 0.6;
        }
    }
}

.icon-sfa {
    width: 200px;
    height: 56px;
    display: block;
    background-image: url(./assests/icon-sfa.svg);
    background-position: top 1px center;
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-sfa:hover {
    width: 200px;
    height: 56px;
    display: block;
    background-image: url(./assests/icon-sfa-expandido.svg);
    background-position: top 1px center;
    background-size: contain;
    background-repeat: no-repeat;
}

.btn-sfa {
    display: flex;
    width: auto;
    height: 2.9375rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-radius: 1.4375rem;
    /*box-shadow: 0px 1px 4.7px 0px rgba(0, 0, 0, 0.25);*/
    text-decoration: none;
    padding: 0 15px;
    p

{
    text-decoration: none;
    color: var(--ttulo2, rgba(24, 59, 86, 0.87));
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    font-style: normal;
    line-height: normal;
    font-weight: 400;
    margin-bottom: 0;
    color: var(--Teclado-tecladoteclas2, #ADB3BC);
    b

{
    font-weight: bold;
    color: var(--ttulo2, rgba(24, 59, 86, 0.87));
}

span {
    color: var(--ttulo2, rgba(24, 59, 86, 0.87));
}

}

&:hover {
    opacity: 0.8;
    /*box-shadow: 0px 0.5px 4.7px 0px rgba(0, 0, 0, 0.15);*/
    i

{
    opacity: 0.6;
}

}
}


@media only screen and (max-width: 980px) {
    .btn-alterar-perfil {
        box-shadow: 0px 1px 4.7px 0px rgba(0, 0, 0, 0.25);
        border-radius: 50%;
        width: 48px;
        height: 48px;
        padding: 0 7px;

        & .icon-alterar-perfil {
            width: 36px;
        }

        p {
            display: none;
        }
    }

    .btn-alterar-de {
        box-shadow: 0px 1px 4.7px 0px rgba(0, 0, 0, 0.25);
        border-radius: 50%;
        width: 48px;
        height: 48px;
        padding: 0 7px;

        p {
            display: none;
        }
    }

    .btn-chamar-policia {
        box-shadow: 0px 1px 4.7px 0px rgba(0, 0, 0, 0.25);
        border-radius: 50%;
        width: 48px;
        min-width: 48px;
        height: 48px;
        padding: 0 3px 0 0;

        p {
            display: none;
        }
    }
}




/*CONTEUDO DA PAGINA*/
.conteudo-geral {
    position: relative;
    margin: 0 auto;
    display: block;
    max-width: 1368px;
    width: 100%;
}

@media only screen and (max-width: 1366px) {
    .conteudo-geral {
        max-width: 1186px;
        padding-left: 60px !important;
    }
}

@media only screen and (max-width: 1280px) {
    .conteudo-geral {
        max-width: 1186px;
        padding-left: 60px !important;
    }
}

@media only screen and (max-width: 1180px) {
    .conteudo-geral {
        max-width: 1100px;
        padding-left: 60px !important;
    }
}

@media only screen and (max-width: 980px) {
    .conteudo-geral {
        max-width: 900px;
        padding-left: 60px !important;
    }
}

@media only screen and (max-width: 768px) {
    .conteudo-geral {
        max-width: 950px;
        padding-left: 60px !important;
    }
}

@media only screen and (max-width: 800px) {
    .conteudo-geral {
        max-width: 740px;
        padding-left: 88px !important;
    }
}

@media only screen and (max-width: 430px) {
    .conteudo-geral {
        max-width: 97%;
        padding: 0 6px !important;
        padding-right: 0px !important;
        margin-right: 5px;
    }

    .conteudo-geral .boas-vindas .boas-vindas-infos h3 {
        font-size: 17px;
    }

    .conteudo-geral .boas-vindas .boas-vindas-infos .boas-vindas-perfil {
        align-items: center;
    }

    .conteudo-geral .boas-vindas .boas-vindas-infos .boas-vindas-perfil p {
        font-size: 13px;
    }

    .conteudo-icon-nome-escola {
        flex-direction: row !important;
    }
}

@media only screen and (max-width: 768px) {
    .conteudo-geral .boas-vindas {
        flex-direction: column;
    }

    .conteudo-geral .boas-vindas .boas-vindas-infos {
        align-items: center;
    }
}



/*MENU SIDEBAR DIARIO DE CLASSE*/

.sidebar-padrao {
    margin-right: 10px;
    background-color: transparent !important;

    & .bb-sidebar-content {
        border-right: none !important;
    }
}

.sidebar-padrao nav .nav-item a {
    color: var(--TextEscuroLogin, #3F4756);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 400 !important;
    line-height: normal;

    height: 3rem;
    line-height: 31px !Important;
    padding: 0.6875rem 1rem;

    display: grid;
    grid-template-columns: 0fr 2fr 0fr;
}

@media only screen and (max-width: 1280px) and (min-width: 430px) {
    .sidebar-padrao nav .nav-item a {
        font-size: 0.7rem;
    }
}

.sidebar-padrao nav .nav-item a.active {
    border-radius: 0rem 2.875rem 2.875rem 0rem;
    border: 0px solid var(--CorBorda, #C1C9D8);
    background-color: var(--MenusHome-bg, #FFF) !important;
    color: var(--TextEscuroLogin, #3F4756);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 600 !important;
    line-height: normal;
}

.sidebar-padrao nav .nav-item a:hover {
    border-radius: 0rem 2.875rem 2.875rem 0rem;
    border: 0px solid var(--CorBorda, #C1C9D8);
    background-color: var(--MenusHome-bg, #FFF) !important;
}

.sidebar-padrao nav .nav-item.nav-item-group:has(.nav-link.active) {
    border-radius: 0rem 1.75rem 0rem 0rem;
    background-color: var(--MenusHome-bg, #FFF) !important;
}

.sidebar-padrao .nav-item {
    margin: 5px 0;
}

@media only screen and (max-width: 1280px) {
    .sidebar-padrao {
        max-width: 240px;
        margin-right: 10px;
    }
}

@media only screen and (max-width: 430px) {
    .sidebar-padrao {
        max-width: 100%;
        margin-right: 0px;
    }
}

/*END MENU SIDEBAR DIARIO DE CLASSE*/

/*TITULO PAGINAS*/
.titulo-page {
    padding: 0.72rem 0;

    & .icon-page {
        color: var(--icons-item-nav, #B3BAC5);
    }

    & h2 {
        color: var(--Ttulo, #183B56);
        font-family: 'Open Sans', sans-serif;
        font-size: 1.5625rem;
        font-style: normal;
        font-weight: 700;
        line-height: 2.23825rem;
        /* 143.247% */
        letter-spacing: 0.014rem;
    }
}

/*END TITULO PAGINAS*/


.breadcrumb-page {
    z-index: 550;

    & .breadcrumb {
        display: flex;
        align-items: center;

        & .breadcrumb-item {
            a {
                color: var(--Subttulo, rgba(0, 0, 0, 0.60));
                font-family: 'Open Sans', sans-serif;
                font-size: 0.875rem;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                text-decoration: none;
            }
        }

        & .active {
            color: rgba(51, 51, 51, 0.89);
            font-family: 'Open Sans', sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

    }
}



.TituloVertical {
    padding: 0px 10px;
    border-radius: 5px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    display: flex;
    width: 100%;
    position: relative;

    & .TituloIcone {
        display: flex;
        align-items: center;
        gap: 15px;
        color: #FFF;
        text-align: left;
        font-family: 'Open Sans', sans-serif;
        font-size: 1.5625rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;

        & .icone-page {
            display: block;
            width: 68px;
            height: 60px;
            background-position: center center;
            background-repeat: no-repeat;
        }
    }

    & .AnoLetivo {
        display: flex;
        padding: 0rem 0.375rem;
        align-items: center;
        gap: 0.625rem;

        color: #FFF;
        text-align: center;
        font-family: 'Open Sans', sans-serif;
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
}

.TituloPage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    color: var(--Text-Title, #374F78);
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5625rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0.9rem 0;

    & .icone-page-info {
        display: block;
        width: 2.5rem;
        height: 1.5rem;
        background-position: top right -2px;
        background-image: url(./assests/icon-informacao.svg);
        background-repeat: no-repeat;
    }
}

@media only screen and (max-width: 1280px) {
    .TituloVertical {
        padding: 0px 10px;

        & .TituloIcone {
            & .icone-page {
                width: 55px;
                height: 49px;
            }
        }
    }
}


.page-interna {
    padding: 0 20px;
}

@media only screen and (max-width: 430px) {
    .page-interna {
        padding: 0 5px;
    }

}
.icone-filtro {
    width: 1rem;
    height: 0.875rem;
    display: block;
    background-image: url(./assests/icon-filter.svg);
}

.icone-menu-togglesidebar {
    background-color: #FFF;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: transform .1s;
    border: 1.699px solid transparent;

    &:hover {
        border: 1.699px solid var(--hover-borda, rgba(22, 47, 103, 0.67));
        transform: scale(1.1);
        background-color: var(--hover-bg, #F5F9FF);
    }
}

@media only screen and (max-width: 430px) {
    .icone-menu-togglesidebar {
        display: none;
    }
}


.bb-scrollbar-hidden {
    & .flex-column {
        & .nav-item {
            border-radius: 0rem 2.875rem 2.875rem 0rem;
            border: 0px solid var(--CorBorda, #C1C9D8);
            background-color: var(--MenusHome-bg, #FFF)
        }
    }
}


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

    .conteudo-filter {
        width: 100%;

        select {
            width: 100%;

            option {
                overflow-x: hidden;
                width: 100%;
            }
        }
    }

}

.conteudoItens-verde .item {
    border-radius: 8px;
    border: 3px solid transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

    .conteudoItens-verde .item:hover {
        background-color: #E6FCEB;
        border-color: #32CD32;
    }

/*END conteudoItens*/


.conteudo-btns {
    display: flex;
    gap: 0.625rem;

    & .btn-opcoes {
        display: flex;
        width: 100%;
        padding: 0.7rem 1.28563rem;
        justify-content: center;
        align-items: center;
        gap: 0.42856rem;
        border-radius: 2.75rem;
        text-align: center;
        font-family: 'Open Sans', sans-serif;
        font-size: 0.9rem;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
        /* 1.25rem */
        border: 0.857px solid var(--color-avalicao);

        &:hover {
            opacity: 0.8;
            background-color: var(--color-avalicao);
        }

        & disabled {
            /*opacity:0.1;*/
        }
    }

    & .btn-outline-avalicao {
        color: #006B7B;
        border: 0.857px solid var(--color-avalicao);

        &:hover {
            color: white;
            background-color: var(--color-avalicao);
        }

    }
}

.btn-opcoes:disabled,
.btn-opcoes[disabled] {
    /* opacity: 0.4;*/
}

@media only screen and (max-width: 1366px) {
    .conteudo-btns {
        & .btn-opcoes {
            i {
                display: none;
            }
        }
    }
}

@media only screen and (max-width: 1200px) {
    .conteudoItens {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media only screen and (max-width: 800px) {
    .conteudoItens {
        grid-template-columns: repeat(1, 1fr);
    }
}

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

    .conteudoItens {
        grid-template-columns: repeat(1, 1fr);
    }
}

.box-vertical {
    border-radius: 0.77675rem;
    background: #FFF;
    box-shadow: 0px 0px 6.784px 0px rgba(0, 0, 0, 0.10);
    padding: 5rem 0rem 3.2rem 0rem;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.01756rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
    border: 1.699px solid transparent;

    &:hover {
        border-radius: 1.06175rem;
        border: 1.699px solid var(--hover-borda, rgba(22, 47, 103, 0.67));
        background-color: var(--hover-bg, #F5F9FF);
    }
}

.box-desativado {
    color: #C1C9D8;
    background-color: #F5F5F5;
    cursor: not-allowed;
    border: 1.699px solid var(--hover-borda, #F5F5F5; );

    &: hover {
        background-color: #F5F5F5 !important;
        border: 1.699px solid var(--hover-borda, #F5F5F5; ) !important;
        color: #C1C9D8 !important;
    }
}

/*TABELA datatables*/
table.dataTable td.dt-type-numeric {
    text-align: center !important;
}

table.dataTable {
    border-left: solid 4px var(--BgBody);
    border-right: solid 4px var(--BgBody);
    border-top: solid 4px var(--BgBody);
    border-bottom: solid 4px var(--BgBody);
}

.nota-input {
    width: 14%;

    & input {
        display: block;
        width: 100%;
        padding: 0.375rem 2.25rem 0.375rem 0.75rem;
        -moz-padding-start: calc(0.75rem - 3px);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-align: center;
    }
}

.nota-input {
    & input:disabled {
        background: #dddddd;
    }
}

input:disabled {
    background-color: #e7e7e7 !important;
}

.table {
    width: 100%;
    display: table;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overflow-x: auto;
    padding: 10px;
    box-sizing: border-box;
    scrollbar-color: #1351b4 transparent;
    margin-bottom: unset;
    &::-webkit-scrollbar{
    width: 8px;

    }
    
    &::-webkit-scrollbar-track {
        background: transparent;
    }
    
    &::-webkit-scrollbar-thumb {
        background-color: #1351b4;
        border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: #0d3e8c;
    }

    & thead {
        color: #FFF;
        /*background-color: #51ABEB;*/
        background-color: #374F78;

        & tr {
            /*border-bottom: solid;*/
            background-color: #f9f9f9;

            & th {
                padding: 5px 5px !important;
                border: 3px solid #f9f9f9;
                color: #99989b;
                text-align: center;
                font-family: 'Open Sans', sans-serif;
                font-size: 0.8rem;
                font-style: normal;
                font-weight: 600 !important;
                line-height: 1.25rem;
                /* 142.857% */
                position: relative;
                white-space: nowrap;

            }

            & th .dt-column-title {
                display: inline-block;
                padding-right: 25px;
                vertical-align: middle;
                min-width: 50px;
            }

            & th .dt-column-order {
                position: absolute;
                right: 5px;
                top: 50%;
                transform: translateY(0%);
                pointer-events: none;
            }

        }
    }

    & tbody {
        & tr {

            &:nth-child(odd) {
                &>* {
                    /*background-color: var(--color-grey-600);*/
                    background-color: white;
                }
            }

            &:nth-child(even) {
                &>* {
                    /*background-color: var(--color-grey-500);*/
                    background-color: white;
                }
            }

& td {
    padding: 5px 5px !important;
    /*border: 3px solid #f9f9f9;*/
    border-bottom: 3px solid #f9f9f9;
    color: #183b56 !important;
    background-color: white !important;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    /* 133.333% */
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
        }
    }

    & tfoot {
        border-bottom: 0;
    }
}



/* toggle switch css start */
.conteudo-switch {
    display: flex;
    align-items: center;
    gap: 15px;
}

.switch-btn {
    position: relative;
    display: block;
    vertical-align: top;
    width: 80px;
    height: 30px;
    border-radius: 18px;
    cursor: pointer;
    position: relative;
}

.checked-switch {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.text-switch {
    background-color: #E53239;
    border: 1px solid #E53239;
    border-radius: inherit;
    color: #fff;
    display: block;
    font-size: 15px;
    height: inherit;
    position: relative;
    text-transform: uppercase;
}

.text-switch:before,
.text-switch:after {
    position: absolute;
    top: 50%;
    margin-top: -.5em;
    line-height: 1;
    -webkit-transition: inherit;
    -moz-transition: inherit;
    -o-transition: inherit;
    transition: inherit;
}

.text-switch:before {
    content: attr(data-no);
    right: 11px;
}

.text-switch:after {
    content: attr(data-yes);
    left: 11px;
    color: #FFFFFF;
    opacity: 0;
}

.checked-switch:checked~.text-switch {
    background-color: #25AF6B;
    border: 1px solid #25AF6B;
}

.checked-switch:checked~.text-switch:before {
    opacity: 0;
}

.checked-switch:checked~.text-switch:after {
    opacity: 1;
}

.toggle-btn {
    background: linear-gradient(#eee, #fafafa);
    border-radius: 100%;
    height: 28px;
    left: 1px;
    position: absolute;
    top: 1px;
    width: 28px;
}

.toggle-btn::before {
    color: #aaaaaa;
    content: " ";
    font-size: 12px;
    /*  display: inline-block; 
    letter-spacing: -2px;*/
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    padding: 4px 0;
    vertical-align: middle;
}

.checked-switch:checked~.toggle-btn {
    left: 51px;
}

.text-switch,
.toggle-btn {
    transition: All 0.3s ease;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
}

.no-radius,
.no-radius .toggle-btn {
    border-radius: 0;
}

.circle-style .toggle-btn::before {
    background: linear-gradient(#dedede, #cacaca);
    border-radius: 50%;
    content: "";
    height: 14px;
    margin-top: 6px;
    padding: 0;
    width: 14px;
}

.opcoes-header {
    display: flex;
    /*    padding: var(--Professor-condicional-CountAulaRealizadas, 0rem) 0.625rem;*/
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

@media only screen and (max-width:980px) {
    .listagem-alunos {
        .opcoes-header {
            padding: 18px 0;
        }
    }
}


.btn-opcoes-downloads {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;

    & .btn-downloads {
        display: flex;
        width: 4.0625rem;
        height: 2.375rem;
        padding: 0.3125rem 0.625rem;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
        border-radius: 0.375rem;
        background: #1351B4;

        &:hover {
            background: rgba(19, 81, 180, 0.70);
        }
    }

    & .btn-downloads-mapao {
        display: flex;
        width: 8.0625rem;
        height: 2.375rem;
        padding: 0.3125rem 0.625rem;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
        border-radius: 1.375rem;
        background: #1351B4;

        &:hover {
            background: rgba(19, 81, 180, 0.70);
        }
    }

    & .btn-downloads-mapao p {
        color: white;
        font-size: 0.75rem;
        margin-top: 15px;
    }
}


.grid-listagem {
    padding-top: 10px;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.grid-listagem-header {
    display: grid;
    /*grid-template-columns: 1fr 6fr 1fr;*/
    grid-template: "p p p" / 70px 1fr 95px;
    border-bottom: 1px solid #374F78;
    background: #FFF;
    padding: 20px 10px;

    & p {
        margin-bottom: 0;
        color: #374F78;
        font-family: 'Open Sans', sans-serif;
        font-style: normal;
        line-height: normal;

        b {
            font-weight: 700;
        }
    }
}

/*FORMULARIO*/
label {
    color: var(--TextEscuroLogin, #3F4756);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

input {
    border-radius: 0.16738rem !important;
    border: var(--Professor-condicional-CountAulaRealizadas, 0.714px) solid var(--CorBorda, #C1C9D8);
}

select {
    border-radius: 0.16738rem !important;
    border: var(--Professor-condicional-CountAulaRealizadas, 0.714px) solid var(--CorBorda, #C1C9D8);
}

.

/*  DATEPICKER*/
    {
    border: 1px #dadada solid;
    background-color: #FFF;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url(./assests/icon-calendario-input.svg);
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.input-aula-hora {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 0;

    & .multi-select-button {
        width: 100%;
        max-width: 100%;
        box-shadow: none;
        padding: 0.375rem 2.25rem 0.375rem 0.75rem;
        -moz-padding-start: calc(0.75rem - 3px);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: #fff;
        background-image: url(./assests/icon-relogio-input.svg);
        background-repeat: no-repeat;
        background-position: right 10px center;

        &:after {
            right: 18px;
            top: 15px;
            position: absolute;
            border: none;
        }
    }

    & .selectBox {
        position: relative;

        select {
            width: 100%;
            /*font-weight: bold;*/
        }

        & .overSelect {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    }

    & #checkboxes {
        border: 1px #dadada solid;
        background-color: #FFF;
        display: none;
        position: relative;
        width: 100%;

        label {
            display: block;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            padding: 5px 5px;
            cursor: pointer;

            input {
                margin-right: 5px;
            }

            &:hover {
                background-color: #C1C9D8;
            }
        }
    }
}

.conteudo_btn_modal {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 15px;
}

.header_sucesso {
    & .modal-title {
        color: #25AF6B;
        position: relative;
        padding-left: 30px;

        &:before {
            position: absolute;
            content: " ";
            font-size: 15px;
            background-image: url(./assests/icon-ok.svg);
            background-repeat: no-repeat;
            background-size: 99%;
            width: 29px;
            height: 29px;
            left: 0;
            top: 3px;
        }
    }
}

/*Inicio Modal Notification */
.modal-notification .modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99999 !important;
}

.modal-notification .modal-dialog {
    margin: 0;
    max-width: 500px;

}

.modal-notification .modal-confirm {
    color: #636363;
    width: 400px;
    margin: 30px auto;
}

.modal-notification .modal-confirm .modal-content {
    padding: 20px;
    border-radius: 5px;
    border: none;
    text-align: center;
    font-size: 16px;
}

.modal-notification .modal-confirm .modal-header {
    border-bottom: none;
    position: relative;
    justify-content: center;
    height: 60px;
    padding-top: 10px;
    padding-bottom: 5px;
}

.modal-notification .modal-confirm .modal-body h4 {
    margin-top: 4px;
    margin-bottom: 18px;
}

.modal-notification .modal-confirm .modal-body p {
    margin-top: 4px;
    margin-bottom: 4px;
}

.modal-notification .modal-footer {
    border-top: none;
}

.modal-notification .modal-confirm .icon-box i {
    font-size: 58px;
    position: relative;
    top: 3px;
}

.modal-notification .modal-confirm .modal-dialog {
    margin-top: 80px;
}

.modal-notification .modal-confirm .btn {
    min-width: 120px;
    min-height: 40px;
    width: auto;
    /*margin: 10px;*/
}

.btn-icon {
    align-items: center;
    gap: 10px;
}

.btn-icon .material-icons {
    font-size: 18px;
    vertical-align: middle;
}

.btnCloseModalNotification {
    position: absolute;
    top: -15px;
    right: 10px;
    background: none;
    border: none;
    font-size: 48px;
    cursor: pointer;
    z-index: 9999;
    color: darkgray;
}

.progress {
    width: 100%;
    height: 5px;
    background-color: #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    width: 0;
    height: 100%;
    background-color: #007bff;
    /*transition: width 3s linear;*/
}

/* Estilos para diferentes tipos de notificacao */
/* Amarelo */
.icon-warning {
    background: #fff;
    color: #FFC107;
}

.text-warning {
    color: #FFC107;
}

/* Verde */
.icon-success {
    background: #fff;
    color: rgb(25 135 84);
}

.text-success {
    color: rgb(25 135 84);
}

/* Vermelho */
.icon-danger {
    background: #fff;
    color: rgb(220 53 69);
}

.text-danger {
    color: rgb(220 53 69);
}

/* Azul claro */
.icon-info {
    background: #fff;
    color: rgb(13 202 240);
}

.text-info {
    color: rgb(13 202 240);
}

/* Verde */
.icon-question {
    background: #fff;
    color: #25af6b;
}

.text-question {
    color: #25af6b;
}

/* Azul claro */
.icon-save {
    background: #fff;
    color: rgb(13 202 240);
}

.text-save {
    color: rgb(13 202 240);
}

/* Vermelho */
.icon-delete {
    background: #fff;
    color: rgb(220 53 69);
}

.text-delete {
    color: rgb(220 53 69);
}

/* Ajustes para smartphones menores */
@media only screen and (max-width: 429px) {
    .modal-notification .modal-dialog {
        max-width: 95%;
    }

    .modal-notification .modal-confirm .modal-content {
        padding: 10px;
        font-size: 16px;
    }

    .btnCloseModalNotification {
        font-size: 40px;
        top: -5px
    }

    .modal-notification .modal-confirm .icon-box i {
        font-size: 40px;
        top: 15px;
    }

    .modal-notification .modal-confirm .btn {
        min-width: 90px;
        min-height: 35px;
        padding: 0 10px;
    }

}

/* Ajustes para dispositivos entre 430px e 768px (smartphones e tablets menores) */
@media only screen and (max-width: 768px) and (min-width: 430px) {
    .modal-notification .modal-dialog {
        max-width: 85%;
    }

    .modal-notification .modal-confirm .modal-content {
        padding: 15px;
        font-size: 16px;
    }

    .btnCloseModalNotification {
        font-size: 36px;
        top: -5px;
    }

    .modal-notification .modal-confirm .icon-box i {
        font-size: 48px;
        top: 15px;
    }

    .modal-notification .modal-confirm .btn {
        min-width: 100px;
        min-height: 35px;
        padding: 0 10px;
    }

    .modal-notification .modal-footer {
        border-top: none;
    }
}

/* Ajustes para dispositivos entre 769px e 1024px (tablets e notebooks pequenos) */
@media only screen and (max-width: 1024px) and (min-width: 769px) {
    .modal-notification .modal-dialog {
        max-width: 75%;
    }

    .modal-notification .modal-confirm .modal-content {
        padding: 18px;
        font-size: 14px;
    }

    .btnCloseModalNotification {
        font-size: 40px;
    }

    .modal-notification .modal-confirm .icon-box i {
        font-size: 48px;
        top: 15px;
    }

    .modal-notification .modal-confirm .btn {
        min-width: 110px;
        min-height: 38px;
        padding: 0 10px;
    }

    .modal-notification .modal-footer {
        border-top: none;
    }
}

/* Ajustes para monitores menores e notebooks antigos (entre 1025px e 1280px) */
@media only screen and (max-width: 1280px) and (min-width: 1025px) {
    .modal-notification .modal-dialog {
        max-width: 70%;
    }

    .modal-notification .modal-confirm .modal-content {
        padding: 20px;
        font-size: 15px;
    }

    .btnCloseModalNotification {
        font-size: 42px;
    }

    .modal-notification .modal-confirm .icon-box i {
        font-size: 48px;
        top: 15px;
    }

    .modal-notification .modal-confirm .btn {
        min-width: 120px;
        min-height: 40px;
        padding: 0 10px;
    }

    .modal-notification .modal-footer {
        border-top: none;
    }
}

/*Fim ModalNotification */


/* ICONE TABELA ACOES */

.conteudo-icon-acoes {

    & .icon-acoes {
        margin: 0 2px;
    }
}


.input-copy {
    display: flex;
    flex-direction: row;
    position: relative;

    #myInputText {
        width: 100%;
        height: 46px;
        border-radius: 0.16738rem;
        border: var(--Professor-condicional-CountAulaRealizadas, 0.714px) solid var(--CorBorda, #C1C9D8);
        background: #EAEAEA;
        padding: 0 10px;
    }

    .btn-copy {
        width: 30px;
        position: absolute;
        right: 10px;
        top: 8px;
        display: flex;
        align-content: center;
        align-items: center;
        border: none;
    }
}


.paragrafo-center {
    color: var(--ttulo2, rgba(24, 59, 86, 0.87));
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
    /* 1.5rem */
}

.box-configuracao-home {
    padding: 0.625rem 0.9375rem;
    border-radius: 0.375rem;
    border: 1px solid var(--CorBorda, #C1C9D8);
    background: var(--MenusHome-bg, #FFF);
    margin-bottom: 20px;
    position: relative;

    p {
        color: var(--Subttulo, rgba(0, 0, 0, 0.60));
        font-family: 'Open Sans', sans-serif;
        font-size: 0.9rem;
        font-style: normal;
        font-weight: 400;
        line-height: 200%;
        /* 1.25rem */
        text-transform: capitalize;
        margin-bottom: 0;

        b {
            color: var(--Ttulo, #183B56);
            text-align: center;
            font-family: 'Open Sans', sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }
    }

    & .icon-configuracao-home {
        position: absolute;
        right: 18px;
        top: 35%;

        i {
            color: #183B56;
        }

        &:hover {
            opacity: 0.7;
        }
    }
}

.configuracoes_sobre {
    & .icon-versao {
        width: 120px;
        display: block;
        margin: 0 auto;

        img {}

        p {
            font-family: 'Open Sans', sans-serif;
            text-align: center;
        }
    }

    p {
        color: var(--Subttulo, rgba(0, 0, 0, 0.60));
        text-align: justify;
        leading-trim: both;
        text-edge: cap;
        font-family: 'Open Sans', sans-serif;
        font-size: 0.8rem;
        font-style: normal;
        font-weight: 400;
        line-height: 200%;
        /* 1.5rem */
        text-transform: capitalize;
        margin-bottom: 5px;

        b {
            color: var(--Ttulo, #183B56);
            font-family: 'Open Sans', sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 300;
            line-height: normal;
            letter-spacing: 0.014rem;
        }

    }
}

.suporte-diario {
    & p {
        color: #8D8D8D;
        text-align: center;
        font-family: 'Open Sans', sans-serif;
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    & .img-avatar-edu {
        background-image: url(./assests/avatar-edu.png);
        background-repeat: no-repeat;
        width: 100%;
        max-width: 363px;
        height: 305px;
        display: block;
        margin: 0 auto;
    }
}

.conteudo-box-suporte {
    display: flex;
    padding: 0.625rem 0rem 0.9375rem 0rem;
    align-items: flex-start;
    gap: 1.46075rem;
    justify-content: center;
    align-items: stretch;

    & .box-suporte {
        display: flex;
        width: 11.85444rem;
        /* height: 5.4375rem; */
        padding: 0.625rem;
        flex-direction: column;
        align-items: center;
        gap: 0.3125rem;
        border-radius: 0.44944rem;
        background: var(--DuvidasFrequentes-BgBox, #3D7FDF);
        justify-content: center;

        p {
            margin-bottom: 0;

            b {
                color: #FFF;
                text-align: center;
                font-family: 'Open Sans', sans-serif;
                font-size: 0.875rem;
                font-style: normal;
                font-weight: 700;
                line-height: 98.77%;
                /* 0.86425rem */
            }

            span {
                color: #FFF;
                text-align: center;
                font-family: 'Open Sans', sans-serif;
                font-size: 0.6875rem;
                font-style: normal;
                font-weight: 400;
                line-height: 92.77%;
                /* 0.63781rem */
            }
        }
    }

    & .box-suporte-vdois {
        display: flex;
        padding: 10px 10px;
        flex-direction: column;
        align-items: center;
        gap: 0.3125rem;

        flex: 1 0 0;
        align-self: stretch;
        border-radius: 0.343rem;
        background: #FFF;
        box-shadow: 0px 6px 12.8px 0px rgba(0, 0, 0, 0.10);

        color: var(--DuvidasFrequentes-IconBox, #3D7FDF);
        text-align: center;
        font-family: 'Open Sans', sans-serif;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 700;
        line-height: 98.77%;
        /* 0.86425rem */
        text-decoration: none;
        cursor: pointer;

        &:hover {
            box-shadow: 0px 6px 12.8px 0px rgba(0, 0, 0, 0.07);
            opacity: 0.8;
        }

        span {
            color: #8D8D8D;
            text-align: center;
            font-family: 'Open Sans', sans-serif;
            font-size: 0.6875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }
    }
}

@media only screen and (max-width: 768px) {
    .conteudo-box-suporte {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .suporte-diario {
        & .img-avatar-edu {
            background-image: url(./assests/avatar-edu.png);
            background-repeat: no-repeat;
            background-size: 100%;
        }
    }
}

.box-notificacoes {
    display: flex;
    padding: 0.625rem 0.3125rem;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 0.5625rem;
    background: var(--MenusHome-bg, #FFF);

    & .info-notificaoes {
        p {
            b {
                color: var(--Ttulo, #183B56);
                font-family: 'Open Sans', sans-serif;
                font-size: 0.875rem;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
            }
        }
    }
}

.box-notificacoes-email {
    display: flex;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3125rem;
    align-self: stretch;
    border-radius: 0.5625rem;
    background: var(--MenusHome-bg, #FFF);

    h4 {
        color: var(--Ttulo, #183B56);
        font-family: 'Open Sans', sans-serif;
        font-size: 0.875rem;
        text-align: left;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        width: 100%;
    }

    & .conteudo-aceite {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        width: 100%;
        margin-bottom: 8px;

        p {
            margin-bottom: 0;
            color: var(--TextEscuroLogin, #3F4756);
            font-family: 'Open Sans', sans-serif;
            font-size: 0.75rem;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
        }
    }
}


.tema-diario {
    h3 {
        color: var(--Ttulo, #183B56);
        font-family: 'Open Sans', sans-serif;
        font-size: 1rem;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
        letter-spacing: 0.014rem;
    }

    p {
        color: var(--Subttulo, rgba(0, 0, 0, 0.60));
        leading-trim: both;
        text-edge: cap;
        font-family: 'Open Sans', sans-serif;
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 400;
        line-height: 200%;
        /* 1.5rem */
        /*text-transform: capitalize;*/
    }

    & .conteudo-automatico {
        display: flex;
        max-width: 40rem;
        width: 100%;
        padding: 15px;
        justify-content: space-between;
        align-items: center;
        border-radius: 0.375rem;
        background: var(--Label-bg, #FFF);

        & .info-automatico {
            display: flex;
            flex-direction: column;

            p {
                margin-bottom: 0;
                color: var(--TextEscuroLogin, #3F4756);
                font-family: 'Open Sans', sans-serif;
                font-size: 0.75rem;
                font-style: normal;
                font-weight: 400;
                line-height: 150%;

                /* 1.125rem */
                b {
                    color: var(--TextEscuroLogin, #3F4756);
                    font-family: 'Open Sans', sans-serif;
                    font-size: 0.875rem;
                    font-style: normal;
                    font-weight: 500;
                    line-height: normal;

                }
            }
        }
    }
}

@media only screen and (max-width: 430px) {
    .tema-diario {
        & .conteudo-automatico {
            flex-direction: column;
            gap: 12px;
        }
    }

    .conteudo-tema-opcoes {
        flex-direction: column;
    }
}

.conteudo-tema-opcoes {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.0625rem;
    align-self: stretch;

    & .box-opcoes-tema {
        max-width: 28.34375rem;
        width: 100%;
        height: 7.72231rem;
        color: var(--TextEscuroLogin, #3F4756);
        font-family: 'Open Sans', sans-serif;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        border-radius: 0.375rem;
        border: 1px solid var(--CorBorda, #C1C9D8);
        background: var(--Label-bg, #FFF);
        padding-top: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;

        input {
            border-radius: 100% !important;
            width: 20px;
            height: 20px;
        }
    }

    & .claro {
        color: var(--TextEscuroLogin, #3F4756);
        font-family: 'Open Sans', sans-serif;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        border: 1px solid var(--CorBorda, #C1C9D8);
        background-color: var(--Label-bg, #FFF);
        background-image: url(./assests/bg-tema-claro.png);
        background-repeat: no-repeat;
        background-position: top 10px center;
        background-size: 95%;
    }

    & .escuro {
        color: var(--TextEscuroLogin, rgba(255, 255, 255, 0.87));
        font-family: 'Open Sans', sans-serif;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        border-radius: 0.375rem;
        border: 1px solid var(--CorBorda, rgba(255, 255, 255, 0.50));
        background-color: var(--Label-bg, #464647);
        background-image: url(./assests/bg-tema-escuro.png);
        background-repeat: no-repeat;
        background-position: top 10px center;
        background-size: 95%;

    }
}

.duvidas-frequentes-sala {
    & .accordion {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    & .accordion-item {
        border: none !important;
    }

    & .accordion-header {
        & .accordion-button {
            /**/
            border-radius: 0.375rem;
            background: var(--Faq-bgFaq, #E8F0FB);
            border-radius: 0.375rem;
            color: var(--Faq-LabelFaq, #183B56);
            font-family: 'Open Sans', sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            letter-spacing: 0.014rem;
        }

        & .accordion-button.collapsed {
            border-radius: 0.375rem;
            color: var(--Faq-LabelFaq, #183B56);
            font-family: 'Open Sans', sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            letter-spacing: 0.014rem;
        }
    }
}


.page-error-404 {
    .img-error {
        width: 422px;
        height: 372px;
        display: block;
        margin: 0 auto;
    }

    h3 {
        color: #000;
        text-align: center;
        font-feature-settings: 'clig' off, 'liga' off;
        font-family: 'Open Sans', sans-serif;
        font-size: 2rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    p {
        color: #000;
        text-align: center;
        font-feature-settings: 'clig' off, 'liga' off;
        font-family: 'Open Sans', sans-serif;
        font-size: 1rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }
}

.icone-escola {
    width: 18px;
    height: 18px;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(./assests/icon-minha-escola.svg)
}

/*TELA PERFIL */

.main-page-perfil {
    border-radius: 0.5625rem;
    background: var(--MenusHome-bg, #FFF);

    & .header-perfil {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 20px;

        & .img-perfil-iniciais {
            width: 6.1875rem;
            height: 6.1875rem;
            border-radius: 6.875rem;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #c1c9d8;

            span {
                color: #FFF;
                text-align: center;
                font-family: 'Open Sans', sans-serif;
                font-size: 3.1625rem;
                font-style: normal;
                font-weight: 500;
                line-height: 3.1625rem;
                /* 100% */
                letter-spacing: 0.027rem;
            }
        }

        & .info-perfil {
            flex: 1;

            p {
                margin-bottom: 0;
                color: var(--Text-Title, #374F78);
                font-family: 'Open Sans', sans-serif;
                font-size: 0.75rem;
                font-style: normal;
                font-weight: 400;
                line-height: 200%;
                /* 1.5rem */
                /*text-transform: capitalize;*/
                display: flex;
                gap: 5px;

                b {
                    color: #183B56;
                    font-family: 'Open Sans', sans-serif;
                    font-size: 0.75rem;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 200%;
                    /* 1.5rem */
                    /*text-transform: capitalize;*/
                }
            }

            h3 {
                color: #183B56;
                font-family: 'Open Sans', sans-serif;
                font-size: 1.4375rem;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                letter-spacing: 0.01225rem;
                margin-bottom: 0;
            }
        }

        & .conteudo-carterinha-qrcode {
            display: flex;
            padding: 0.625rem;
            width: 8.8125rem;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0.3125rem;

            img {
                width: 100%;
            }

            a {
                color: #1351B4;
                font-family: 'Open Sans', sans-serif;
                font-size: 0.75rem;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                text-decoration-line: underline;
                text-transform: capitalize;
            }
        }
    }
}


@media only screen and (max-width: 430px) {
    .main-page-perfil {
        width: 90%;
        margin: 0 auto;

        & .header-perfil {
            flex-wrap: wrap;
            justify-content: center;

            & .conteudo-carterinha-qrcode {
                order: 2;
            }

            & .info-perfil {
                order: 3;
                display: flex;
                flex-direction: column;
                align-items: center;

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

    .perfil-escola {
        & .conteudo-emails {
            gap: 6px;
            flex-direction: column;

            & .divisoria {
                width: 125px !important;
                height: 2px !important;
            }
        }
    }



}


.perfil-email {
    display: flex;
    flex-direction: column;

    h3 {
        color: #183B56;
        font-family: 'Open Sans', sans-serif;
        font-size: 1rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .conteudo-emails {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;

        i {
            color: #1E75B6;
        }

        & .divisoria {
            width: 2px;
            height: 20px;
            background-color: #1E75B6;
        }

        p {
            margin-bottom: 0;
            color: #3F4756;
            font-family: 'Open Sans', sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;

            a {
                color: #3F4756;
            }
        }
    }
}

.perfil-escola {
    h3 {
        color: #183B56;
        font-family: 'Open Sans', sans-serif;
        font-size: 1rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    & .conteudo-emails {
        display: flex;
        align-items: center;
        gap: 1.375rem;
        align-self: stretch;

        & .divisoria {
            width: 2px;
            height: 125px;
            background-color: #1E75B6;
        }

        & .info-escola-perfil {
            display: flex;
            flex-direction: column;
            gap: 5px;

            h5 {
                color: #1E75B6;
                font-family: 'Open Sans', sans-serif;
                font-size: 1rem;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                text-transform: uppercase;
                margin-bottom: 0;
            }

            p {
                margin-bottom: 0;
                color: #3F4756;
                font-family: 'Open Sans', sans-serif;
                font-size: 0.875rem;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                display: flex;
                gap: 10px;

                a {
                    margin-bottom: 0;
                    color: #3F4756;
                    font-family: 'Open Sans', sans-serif;
                    font-size: 0.875rem;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                }
            }
        }
    }
}

.icone-escola-perfil {
    width: 2.5rem;
    height: 2rem;
    display: block;
    background-image: url(./assests/icon-escola-perfil.svg);
}

.icone-de-escola-perfil {
    width: 0.75rem;
    height: 0.5625rem;
    display: block;
    background-image: url(./assests/icon-nome-escola-perfil.svg);
}

.icone-de-codigo-perfil {
    width: 0.5625rem;
    height: 0.6875rem;
    display: block;
    background-image: url(./assests/icon-cie-escola-perfil.svg);
}

.icone-de-dotp-perfil {
    width: 0.5625rem;
    height: 0.6875rem;
    display: block;
    background-image: url(./assests/icon-localizacao-escola-perfil.svg);
}

.icone-de-telefone-perfil {
    width: 0.6875rem;
    height: 0.6875rem;
    display: block;
    background-image: url(./assests/icon-tel-escola-perfil.svg);
}

.icone-de-email-perfil {
    width: 0.625rem;
    height: 0.5rem;
    display: block;
    background-image: url(./assests/icon-email-escola-perfil.svg);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-gray-200) !important;
}



.multi-select-container {
    display: inline-block;
    position: relative;
}

.multi-select-menu {
    position: absolute;
    left: 0;
    top: 0.8em;
    z-index: 1;
    float: left;
    min-width: 100%;
    background: #fff;
    margin: 1em 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: none;
}

.multi-select-menuitem {
    display: block;
    font-size: 0.875em;
    padding: 0.6em 1em 0.6em 30px;
    white-space: nowrap;
}

.multi-select-legend {
    font-size: 0.875em;
    font-weight: bold;
    padding-left: 10px;
}

.multi-select-legend+.multi-select-menuitem {
    padding-top: 0.25rem;
}

.multi-select-menuitem+.multi-select-menuitem {
    padding-top: 0;
}

.multi-select-presets {
    border-bottom: 1px solid #ddd;
}

.multi-select-menuitem input {
    position: absolute;
    margin-top: 0.25em;
    margin-left: -20px;
}

.multi-select-button {
    display: inline-block;
    font-size: 0.875em;
    padding: 0.2em 0.6em;
    max-width: 16em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: -0.5em;
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: default;
}

.multi-select-button:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.4em 0.4em 0 0.4em;
    border-color: #999 transparent transparent transparent;
    margin-left: 0.4em;
    vertical-align: 0.1em;
}

.multi-select-container--open .multi-select-menu {
    display: block;
}

.multi-select-container--open .multi-select-button:after {
    border-width: 0 0.4em 0.4em 0.4em;
    border-color: transparent transparent #999 transparent;
}

.multi-select-container--positioned .multi-select-menu {
    box-sizing: border-box;
}

.multi-select-container--positioned .multi-select-menu label {
    white-space: normal;
}


/*  DATEPICKER */
.ui-state-default {
    text-align: center;
    border: 1px solid #c5c5c5;
    border-radius: 15px;
}

.ui-state-disabled {
    cursor: default !important;
    pointer-events: auto;
    border-radius: 15px !important;
    text-align: center !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight {
    font-weight: bold;
    text-align: center;
    border-radius: 15px;
}

.DiaLancado .ui-state-default {
    background-color: rgb(39, 172, 83);
    color: rgb(255, 255, 255);
    background: rgb(39, 172, 83) !important;
    text-align: center;
    border-radius: 15px;
}

.DiaLancado .ui-state-active {
    border: 1px solid rgb(39, 172, 83);
    color: rgb(39, 172, 83);
    background: var(--color-dia-atual) !important;
    text-align: center;
    border-radius: 15px;
    font-weight: bold;
}

.DiaLancar .ui-state-default {
    background-color: rgb(55, 79, 120);
    color: rgb(255, 255, 255);
    background: rgb(55, 79, 120) !important;
    text-align: center;
    border-radius: 15px;
}

.DiaLancar .ui-state-active {
    border: 1px solid rgb(55, 79, 120);
    color: rgb(55, 79, 120);
    background: var(--color-dia-atual) !important;
    text-align: center;
    border-radius: 15px;
    font-weight: bold;
}

.DiaNaoLancado .ui-state-default {
    background-color: rgb(105, 105, 105);
    color: rgb(255, 255, 255);
    background: rgb(105, 105, 105);
    text-align: center;
    border-radius: 15px;
}

DiaLancar .ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
    opacity: 1.7 !important;
    text-align: center;
    border-radius: 15px;
}

.DiaNaoLetivo .ui-state-default {
    background: var(--color-nao-letivo);
    color: #fff;
    text-align: center;
    border-radius: 15px;
}

.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: .2em;
    text-decoration: none;
    text-align: center;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    width: 35px;
}

.titulo-card-item {
    text-transform: uppercase;

    b {
        text-transform: uppercase !important;
    }
}

.de {
    /*text-transform: capitalize;*/
    font-weight: 400;
    position: relative;
    padding-left: 22px;

    &:before {
        position: absolute;
        left: 0;
        top: -1px;
        width: 18px;
        height: 16px;
        display: block;
        content: "";
        background-image: url(./assests/icon-de.svg);
    }
}

.escola {
    /*text-transform: capitalize;*/
    font-weight: 400;
    position: relative;
    padding-left: 25px;

    &:before {
        position: absolute;
        left: 0;
        top: -3px;
        width: 20px;
        height: 17px;
        display: block;
        content: "";
        background-image: url(./assests/icon-minha-escola-itens.svg);
    }
}

.serie {
    /*text-transform: capitalize;*/
    font-weight: 400;
    position: relative;
    padding-left: 25px;

    &:before {
        position: absolute;
        left: 0;
        top: -3px;
        width: 20px;
        height: 17px;
        display: block;
        content: "";
        background-image: url(./assests/icon-minha-escola-itens.svg);
    }
}

.tipo-enino {
    font-weight: 700;
    position: relative;
    padding-left: 19px;

    /*text-transform: capitalize;*/
    &:before {
        position: absolute;
        left: 0;
        top: -1px;
        width: 15px;
        height: 15px;
        display: block;
        content: "";
        background-image: url(./assests/icon-informacao-itens.svg);
        background-repeat: no-repeat;
        background-size: 100%;
    }
}

.prof-user {
    font-weight: 700;
    position: relative;
    padding-left: 19px;

    /*text-transform: capitalize;*/
    &:before {
        position: absolute;
        left: 0;
        top: -1px;
        width: 15px;
        height: 15px;
        display: block;
        content: " ";
        background-image: url(./assests/user-regular.svg);
        background-repeat: no-repeat;
        background-size: 100%;
    }
}

.dispensado {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background-color: #bdbdbd;
    border-radius: 50%;
    color: white;
    font-size: 19px;
    font-weight: bold;
}

.div-relatorio-buttons {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
    justify-content: flex-end;
    padding-bottom: 1rem;
}

.relatorio-buttons {
    padding: 10px 20px;
    display: flex;
    gap: 8px;
}


.calendario-padrao {
    flex-direction: column;
}

.conteudo-legenda {
    flex-direction: row;
    flex-wrap: wrap;
}

/*CALENDARIO*/
@media only screen and (max-width: 768px) {

    .opcoes-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-top: 20px;
    }

    .marcacao_falta_presenca {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        align-items: center;
    }
}

@media (min-width: 641px) {
    .nav-scrollable {
        height: auto !important;
        overflow-y: inherit !important;
    }
}
}


.nav-scrollable {
    height: auto !important;
    overflow-y: inherit !important;
}

@media only screen and (max-width: 1280px) and (min-width: 430px) {
    .tooltip {
        display: nome !important;
    }
}


.btn-visibility-mobile {
    display: none;
}

@media only screen and (max-width:980px) {
    .conteudo-btn-desktop {
        display: none;
    }

    .btn-visibility-mobile {
        display: block;
    }
}

.custom-tooltip .tooltip-inner {
    background-color: #d0e7ff !important; /* Azul mais claro */
    color: black !important; /* Cor do texto */
    font-size: 20px !important;
    padding: 5px !important;
    border-radius: 4px !important; /* Bordas arredondadas, se desejar */
}


table{
    thead{
        tr{
          th.dtfc-fixed-start{
            background-color: #51ABEB;
            z-index: 999;
          }
        }
    }
}


.btnLapis-rounded {
    display: inline-flex; /* Alinha o ícone centralizado */
    align-items: center;
    justify-content: center;
    width: 40px; /* Largura do botão */
    height: 40px; /* Altura do botão, igual à largura para ser circular */
    border-radius: 50%; /* Deixa o botão redondo */
    background-color: #007bff; /* Cor de fundo */
    border: none; /* Remove a borda */
    color: white; /* Cor do ícone */
    cursor: pointer; /* Mostra o cursor de clique */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra sutil */
    transition: background-color 0.3s ease; /* Efeito de transição ao passar o mouse */
}

.btnLapis-rounded:hover {
    background-color: #0056b3; /* Cor ao passar o mouse */
}

.btnLapis-rounded:active {
    background-color: #003d80; /* Cor ao clicar */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Reduz a sombra ao clicar */
}

.custom-switch input {
    border-radius: 2em !important;
    /*height: 1.2em !important;*/
    margin-left: 5px !important;
}

.custom-switch input:disabled:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    opacity: 1 !important;
}

.custom-switch input:disabled {
    cursor: default;
    pointer-events: none;
    opacity: 1 !important;
}



/* SWITCH Igual ao figma */
.switch-neo {
    --w: 90px; /* largura total */
    --h: 36px; /* altura total  */
    --pad: 6px; /* folga interna da trilha */
    --car-extra: 18px; /* carro mais comprido que a altura */
    --track: #ececec; /* trilha cinza */
    --dot-on: #17c088; /* ponto ON */
    --dot-off: #6c6c6c; /* ponto OFF */
    --dot-size: 14px; /* diâmetro do ponto */

    position: relative;
    display: inline-block;
    width: var(--w);
    height: var(--h);
}

    /* Bootstrap dá padding-left no .form-switch; zere aqui */
    .switch-neo.form-switch {
        padding-left: 0 !important;
    }

    /* Esconde o visual do input, mas deixa clicável/acessível */
    .switch-neo .form-check-input {
        position: absolute;
        inset: 0;
        width: var(--w);
        height: var(--h);
        margin: 0;
        opacity: 0; /* invisível, mas recebe clique/foco */
        cursor: pointer;
        /* remove qualquer arte/knob nativo do bootstrap */
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

        .switch-neo .form-check-input::before,
        .switch-neo .form-check-input::after {
            display: none !important;
        }

    /* TRILHA (cinza) — desenhada no wrapper */
    .switch-neo::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--track);
        border-radius: 10px;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
    }

    /* CARRO branco + PONTO central — desenhado no wrapper */
    .switch-neo::after {
        content: "";
        position: absolute;
        top: var(--pad);
        left: var(--pad);
        width: calc( (var(--h) - (var(--pad) * 2)) + var(--car-extra) );
        height: calc( var(--h) - (var(--pad) * 2) );
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(0,0,0,.18);
        transition: left .22s ease, background-image .22s ease;
        background-image: radial-gradient(circle at center, var(--dot-off) 0 45%, transparent 46% 100%);
        background-repeat: no-repeat;
        background-size: var(--dot-size) var(--dot-size);
        background-position: center;
    }

    /* LIGADO: move o carro e troca a cor do ponto */
    .switch-neo:has(.form-check-input:checked)::after {
        left: calc( var(--w) - var(--pad) - ( (var(--h) - (var(--pad) * 2)) + var(--car-extra) ) );
        background-image: radial-gradient(circle at center, var(--dot-on) 0 45%, transparent 46% 100%);
    }

    /* Foco acessível na TRILHA quando o input ganha foco */
    .switch-neo:has(.form-check-input:focus-visible)::before {
        outline: 2px solid #9ad4ff;
        outline-offset: 2px;
    }

    /* Desabilitado */
    .switch-neo:has(.form-check-input:disabled) {
        opacity: .6;
        cursor: not-allowed;
    }

    /* deixe os pseudo-elementos ignorarem cliques */
    .switch-neo::before,
    .switch-neo::after {
        pointer-events: none;
    }

    /* e garanta que o input fique acima na pilha */
    .switch-neo .form-check-input {
        z-index: 1;
    }

/* Respeita reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .switch-neo::after {
        transition: none;
    }
}