/* -------------------------------- 

MODAL

-------------------------------- */

.modal {
    border-color: var(--ifht-sys-cor-primaria-1);
}

/* Acerta o header (retira o fundo que vem com o tema e coloca a borda superior) */
.modal:not(.sign_up_modal) .modal-dialog .modal-header {
    background-image: none;
    box-shadow: none;
    padding: 1.25rem 1.75rem;
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

/* Acerta o título do header (retira o que vem com o tema) */
.modal:not(.sign_up_modal) .modal-dialog .modal-header .modal-title {
    color: var(--ifht-sys-cor-primaria-2);
    font-weight: normal;
    max-width: 80%;
}

.modal-title.h4,
.modal-title.h5 {
    text-transform:uppercase !important;
}

.modal-title.h6 {text-transform:none !important;}

.modal-title.h4  {font-size: 1.6rem !important;} /*32px*/
.modal-title.h5  {font-size: 1.2rem !important;} /*24px*/
.modal-title.h6  {font-size: 1rem !important;} /*20px*/

/* Acerta o body do modal */
.modal-body {
    padding: 1rem 1.75rem;
}

.modal:not(.sign_up_modal) .modal-dialog .modal-content .modal-body,
.modal-body {
    padding: 1rem 2rem;
    max-height: 60vh;
    overflow-y: auto;
}

/* Acerta no Mobile a Aba "ver mais" */
.nav-tabs:not(.more-nav) .nav-link, 
.nav-pills .nav-link {
    margin: 0.125rem;
    padding: var(--ifht-ref-espaçamento-1) var(--ifht-ref-espaçamento-2);
    border-radius: var(--ifht-sys-raio-borda-lg);
    background: var(--ifht-sys-cor-neutra-3);
}

/* Acerta o botão de fechar (X) */
.modal:not(.sign_up_modal) .modal-dialog .modal-header .close {
    position: relative;
    right: 0;
    top: 0;
    padding: 1rem;
}

.modal:not(.sign_up_modal) .modal-dialog .modal-header .close {
    color: var(--ifht-sys-cor-neutra-0);
}

.modal:not(.sign_up_modal) .modal-dialog .modal-header .close:hover, 
.modal:not(.sign_up_modal) .modal-dialog .modal-header .close:active, 
.modal:not(.sign_up_modal) .modal-dialog .modal-header .close:focus {
    color: var(--ifht-sys-cor-neutra-4);
}

/* Acerta a cor do botão de fechar no rodapé do modal */
.modal:not(.sign_up_modal) .btn:not(.btn-link),
.modal .modal-footer .btn-default {
    background-color: var(--ifht-sys-cor-primaria-1);
    color:var(--ifht-sys-cor-neutra-4);
}

.modal:not(.sign_up_modal) .btn:not(.btn-link):hover,
.modal .modal-footer .btn-default:hover  {
    background-color: var(--ifht-botao-primario-cor-hover) !important;
}

/* MODAL FULLSCREEN */
/* .modal:not(.sign_up_modal) .modal-dialog.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
    
} */
 
.modal:not(.sign_up_modal) .modal-dialog.modal-fullscreen{
    width: 100vw !important;
    max-width: 100% !important;
    height: 100%;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative;
}

/* MODAL DE ADICIONAR ATIVIDADE OU RECURSO - MOODLE */
.modal .optionscontainer .optionname {
    font-size: 18px;
    line-height: normal;
}

.componente-modal .modal:not(.sign_up_modal) .modal-dialog .modal-header .modal-title {
    font-size: var(--ifht-sys-h4);
}

/* --------- CONFIGURAÇÃO 992px para cima (LG) --------- */
@media (min-width:992px) {

    /* .modal:not(.sign_up_modal) .modal-dialog.modal-lg {
        max-width: 800px !important;
    } */

    /* Acerta o botão de fechar (X) no modal de sign in */
    .sign_up_modal .modal-header {
        padding:0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sign_up_modal .modal-header button.close {
        margin:0;
        padding:0;
    }

    /* Acerta o título do header (retira o que vem com o tema) */
    .modal:not(.sign_up_modal) .modal-dialog .modal-header .modal-title {
        max-width: 100%;
        margin-bottom: 0;
    }

    /* Acerta o header (retira o fundo que vem com o tema e coloca a borda superior) */
    .modal:not(.sign_up_modal) .modal-dialog .modal-header {
        padding: 1.25rem 2.5rem;
    }

    .modal:not(.sign_up_modal) .modal-dialog .modal-header {
        align-items: center;
    }

    /* Acerta o body do modal */
    .modal:not(.sign_up_modal) .modal-dialog .modal-content .modal-body, 
    .modal-body {
        padding: 1rem 2.5rem;
    }

    .nav-tabs:not(.more-nav) .nav-link, 
    .nav-pills .nav-link {
        background: transparent;
    }
}

/* --------- CONFIGURAÇÃO 1200px para cima (XL) --------- */
@media (min-width:1200px) {
    .modal:not(.sign_up_modal) .modal-dialog.modal-xl {
        max-width: 80vw !important;
    }

    .modal:not(.sign_up_modal) .modal-dialog.modal-lg{
        max-width: 60vw !important;
    }

    .modal:not(.sign_up_modal) .modal-dialog.modal-md{
        max-width: 40vw !important;
    }

    .modal:not(.sign_up_modal) .modal-dialog.modal-sm{
        max-width: 20vw !important;
    }
}


/* RECURSOS BOX DE DESTAQUE -- AINDA VAMOS ACERTAR!*/

/* .modal.atencao .modal-content,
.modal.dica .modal-content, 
.modal.glossario .modal-content,
.modal.material-complementar .modal-content,
.modal.para-refletir .modal-content,
.modal.saiba-mais .modal-content   {
    border-width: 1px;
    border-style: solid;
    border-top-width: 6px;
}

.modal.atencao h4,
.modal.dica h4,
.modal.glossario h4,
.modal.material-complementar h4,
.modal.para-refletir h4,
.modal.saiba-mais h4 {
    border-bottom: none;
    width: 100%;
    margin-bottom: 0;
    margin-left: 2rem;
}

.modal.atencao h4 {color: var(--laranja-90-IFHT);}
.modal.dica h4 {color: var(--amarelo-70-IFHT);}
.modal.glossario h4 {color: var(--marinho-50-IFHT);}
.modal.material-complementar h4 {color: var(--turquesa-50-IFHT);}
.modal.para-refletir h4 {color: var(--roxo-50-IFHT);}
.modal.saiba-mais h4 {color: var(--violeta-50-IFHT);}

.modal.atencao .modal-dialog .modal-header .modal-title {color: var(--laranja-90-IFHT) !important;}
.modal.dica .modal-dialog .modal-header .modal-title {color: var(--amarelo-70-IFHT) !important;}
.modal.glossario .modal-dialog .modal-header .modal-title {color: var(--marinho-50-IFHT) !important;}
.modal.material-complementar .modal-dialog .modal-header .modal-title {color: var(--turquesa-50-IFHT) !important;}
.modal.para-refletir .modal-dialog .modal-header .modal-title {color: var(--roxo-50-IFHT) !important;}
.modal.saiba-mais .modal-dialog .modal-header .modal-title {color: var(--violeta-50-IFHT) !important;}

.modal.atencao .modal-dialog .modal-content {border-color: var(--laranja-90-IFHT) !important;}
.modal.dica .modal-dialog .modal-content {border-color: var(--amarelo-70-IFHT) !important;}
.modal.glossario .modal-dialog .modal-content {border-color: var(--marinho-50-IFHT) !important;}
.modal.material-complementar .modal-dialog .modal-content {border-color: var(--turquesa-50-IFHT) !important;}
.modal.para-refletir .modal-dialog .modal-content {border-color: var(--roxo-50-IFHT) !important;}
.modal.saiba-mais .modal-dialog .modal-content {border-color: var(--violeta-50-IFHT) !important;}


.modal.atencao .modal-body,
.modal.dica .modal-body,
.modal.glossario .modal-body,
.modal.material-complementar .modal-body,
.modal.para-refletir .modal-body,
.modal.saiba-mais .modal-body {
    margin-left:1.5rem;
} */

/* Cor da margin-top */
/* .modal.atencao .modal-content {border-color: var(--laranja-90-IFHT);}
.modal.dica .modal-content {border-color: var(--amarelo-60-IFHT);}
.modal.glossario .modal-content {border-color: var(--marinho-50-IFHT);}
.modal.material-complementar .modal-content {border-color: var(--turquesa-50-IFHT);}
.modal.para-refletir .modal-content {border-color: var(--roxo-50-IFHT);}
.modal.saiba-mais .modal-content  {border-color: var(--violeta-50-IFHT);}


.modal.atencao .modal-footer .btn-default {
    background: var(--laranja-90-IFHT);
    color: #fff;
    border-color: var(--laranja-90-IFHT);
}

.modal.atencao .modal-footer .btn-default:hover {
    background: var(--laranja-70-IFHT);
    color: #fff;
    border-color: var(--laranja-70-IFHT);
}

.modal.dica .modal-footer .btn-default {
    background: var(--amarelo-60-IFHT);
    color: #fff;
    border-color: var(--amarelo-60-IFHT);
}

.modal.dica .modal-footer .btn-default:hover {
    background: var(--amarelo-50-IFHT);
    color: #fff;
    border-color: var(--amarelo-50-IFHT);
}

.modal.glossario .modal-footer .btn-default {
    background: var(--marinho-50-IFHT);
    color: #fff;
    border-color: var(--marinho-50-IFHT);
}

.modal.glossario .modal-footer .btn-default:hover {
    background: var(--marinho-30-IFHT);
    color: #fff;
    border-color: var(--marinho-30-IFHT);
}

.modal.material-complementar .modal-footer .btn-default {
    background: var(--turquesa-50-IFHT);
    color: #fff;
    border-color: var(--turquesa-50-IFHT);
}

.modal.material-complementar .modal-footer .btn-default:hover {
    background: var(--turquesa-40-IFHT);
    color: #fff;
    border-color: var(--turquesa-40-IFHT);
}

.modal.para-refletir .modal-footer .btn-default {
    background: var(--roxo-50-IFHT);
    color: #fff;
    border-color: var(--roxo-50-IFHT);
}

.modal.para-refletir .modal-footer .btn-default:hover {
    background: var(--roxo-40-IFHT);
    color: #fff;
    border-color: var(--roxo-40-IFHT);
}

.modal.saiba-mais .modal-footer .btn-default {
    background: var(--violeta-50-IFHT);
    color: #fff;
    border-color: var(--violeta-50-IFHT);
}

.modal.saiba-mais .modal-footer .btn-default:hover {
    background: var(--violeta-40-IFHT);
    color: #fff;
    border-color: var(--violeta-40-IFHT);
} */

/* Ajuste nos ícones dos boxes em modal nos smartphones */
/* @media (max-width: 767px) {
    .modal.atencao h4::before, 
    .modal.dica h4::before, 
    .modal.glossario h4::before, 
    .modal.material-complementar h4::before, 
    .modal.para-refletir h4::before, 
    .modal.saiba-mais h4::before {
        width: 65px;
        top: -15px;
        left: -10px;
    }

    .modal.atencao h4, 
    .modal.dica h4, 
    .modal.glossario h4, 
    .modal.material-complementar h4, 
    .modal.para-refletir h4, 
    .modal.saiba-mais h4 {
        margin-top: 1.5rem;
    }
} */