@font-face{ font-family: 'Vietnam'; src: url(../fonts/BeVietnamPro-Light.ttf); font-weight: 300 }
@font-face{ font-family: 'Vietnam'; src: url(../fonts/BeVietnamPro-Regular.ttf); font-weight: 400 }
@font-face{ font-family: 'Vietnam'; src: url(../fonts/BeVietnamPro-Medium.ttf); font-weight: 500 }
@font-face{ font-family: 'Vietnam'; src: url(../fonts/BeVietnamPro-SemiBold.ttf); font-weight: 600 }
@font-face{ font-family: 'Vietnam'; src: url(../fonts/BeVietnamPro-Bold.ttf); font-weight: 700 }
@font-face{ font-family: 'Vietnam'; src: url(../fonts/BeVietnamPro-ExtraBold.ttf); font-weight: 800 }

:root{
    --branco: #EEEEF3;
    --roxo: #6542EB;
    --laranja: #db9140;
    --verde: #51df9b;
    --cinza: #353535;
    --preto: #161616;
    --preto2x: #101010;
    --cinza-claro: #979797;
    --vermelho: #c73e3e;
    --roxo-escuro: #26203E;
    --cinza-placeholder: #6f6f6f;
    --cinza-2d2d2d: #2d2d2d;
}

*{
    font-family: 'Vietnam';
    color: var(--branco);
    margin: 0;
    padding: 0
}

a{
    text-decoration: none;
}

body{
    margin: 0;
    padding: 0;
    overflow: auto !important;
    background-color: var(--preto2x) !important;
}

#sucessoBar{
	justify-content: center; 
	display: flex!important; 
	position: fixed; 
	top: 20px; 
	left: calc(100% - 420px); 
	width: 350px; 
	border-radius: 5px; 
	display: inline-block; 
	text-align: left; 
	padding: 20px; 
	background: var(--roxo); 
	font-size: 16px; 
	color: var(--branco); 
	z-index: 9999999; 
	transition: all 1s ease; 
	font-weight: 200; 
	margin-left: 430px;
}
#erroBar{
	justify-content: center; 
	display: flex!important; 
	position: fixed; 
	top: 20px; 
	left: calc(100% - 420px); 
	width: 350px; 
	border-radius: 5px; 
	display: inline-block; 
	text-align: left; 
	padding: 20px; 
	background: var(--vermelho); 
	font-size: 16px; 
	color: var(--branco); 
	z-index: 9999999; 
	transition: all 1s ease; 
	font-weight: 200; 
	margin-left: 430px;
}
select:focus { outline: none; /* Remove a borda de foco */ }

input:focus { outline: none; /* Remove a borda de foco */ }

#cabecalhoM{
    display: none
}

.btns{     
    border-radius: 6px;
    background-color: var(--roxo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    cursor: pointer;
    color: var(--branco);
    height: 42px;
    border: none;
    color: #EEEEF3;
    font-sizE: 16px;
    font-weight: 400;
    text-align: center;
}

.inputG{
    background: var(--cinza);
    border-radius: 6px;
    border: none;
    width: 100%;
    padding: 10px;
}

.swalRespostas-tit{
    font-size: 15px;
    color: var(--branco);
    font-weight: 500;
}

.swalRespostas-subtit{
    font-size: 15px;
    color: var(--branco);
    font-weight: 300;
}


.swalTitulo{
    text-align: center;
    width: 100%;
    font-sizE: 20px;
    font-weight: 500;
    margin-bottom: 15px
}

.swalSubtitulo{
    font-size: 17px;
    text-align: left;
    margin-bottom: 15px;
}

.fundo-total{ background: var(--preto2x); }

.modal-body{
    z-index: 11
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}input[data-autocompleted] {
    background-color: transparent !important;
}


#fechar-sidebar-mobile, #abrir-sidebar-mobile{
    cursor: pointer
}

/* --------- modal professores --------- */

.fa-instagram,
.fa-linkedin,
.fa-youtube,
.fa-facebook,
.fa-globe{
    background-color: var(--roxo);
    padding: 5px 6px;
    border-radius: 6px;
    margin-right: 6px;
    font-size: 17px!important
}

#modal-imgProf{
    object-fit: contain;
    width: 100%;
    border-radius: 50%;
}



.video{ 
    width: 100%;
    padding: 30px;
}


.modal-body{
    padding: 20px!important
}

.modal-content{
    background-color: var(--cinza)!important;
    color: var(--branco)!important;
}

.modal-header{
    border-bottom: 1px solid var(--cinza)!important;
    justify-content: end!important;
}

#modal-nomeProf{
    font-size: 20px
}

#modal-materiais, #modal-bibliografia{
    background-color: var(--cinza-2d2d2d);
    border-radius: 6px;
    font-size: 15px;
    color: var(--cinza);
    padding: 15px;
    text-align: center;
    margin-top: 20px
}

.modal-tit{
    margin: -15px -15px 0;
    padding: 15px 15px 10px;
    border-bottom: 1px solid var(--roxo);
    text-align: left;
    font-weight: 500;
}

#modal-videoProf{
    width: 60%;
    background-color: var(--cinza-2d2d2d);
    border-radius: 6px;
    margin-left: 20px;
    margin-top: 20px;
    aspect-ratio: 16/9
}

#videoProfessor{
    width: 100%;
    border-radius: 6px;
}

.modal-videoProf{
    padding: 0px 30px;
    margin-top: 23px;
}

.modal-subtit{
    width: 100%;
    text-align: left;
    color: var(--cinza-claro);
    line-height: 1.3
}

#error{
    width: 100%;
    padding: 50px;
    text-align: center;
    border-radius: 6px
}

#mat_ext{
    display: flex;
    flex-flow: column;
    margin-top: 10px;
    align-items: start;
    justify-content: space-between
}

.modal-contBibliografia{
    max-height: 242px;
    overflow: auto;
    width: 100%;
    margin-top: 10px
}

.modal-contBibliografia::-webkit-scrollbar {
    width: 6px; /* Largura da barra de rolagem */
}   

.modal-contBibliografia::-webkit-scrollbar-thumb {
    background-color: #3d3074; /* Cor do polegar (parte arrastável) da barra de rolagem */
}


.modal-contBibliografia::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Cor do polegar ao passar o mouse sobre ele */
}

.modal-contBibliografia::-webkit-scrollbar-track {
    background-color: #383838; /* Cor da trilha (fundo) da barra de rolagem */
}

.plyr__control * {
    color: #000;
}

#fechar-modal{
    cursor: pointer; 
    position: absolute;
    right: 15px
}

.modal-backdrop.show{
    opacity: 0.8!important
 }

.cardsNU{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--preto);
    border-radius: 6px;
    padding: 20px;
    
} 


/* ---------- responsivo modal professores ----------------- */

@media screen and (max-width: 1199px) {
    #cabecalhoM{  
        padding: 25px 30px; 
        justify-content: space-between; 
        display: flex; 
        align-items: center; 
        flex-direction: row!important; 
        width: 100%;
        height: 87.5px;
        background-color: transparent!important
    }

    #fundoTotal-aulas{
        display: block!important
    }
}

@media screen and (max-width: 830px){
    #modal-width{
        width: calc(100% - 40px)!important
    }
}

@media screen and (max-width: 767px){
    #modal-width{
        margin: 0 20px;
    }
}

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

    #sucessoBar{ left: calc(100% - 270px); width: 250px; font-size: 12px }

    .modal-flex{
        flex-flow: column
    }

    #modal-cb-video{
        flex-flow: column-reverse
    }

    #modal-cb{
        width: 100%!important;
    }

    #modal-cb > div{
        width: 100%
    }

    #modal-videoProf{
        margin-left: unset;
        width: 100%
    }

    #modal-nd{
        text-align: center;
        margin: 10px 0 0 0!important;
    }

    #modal-descricao{
        text-align: center;
         font-size: 15px
    }

    #error{
        padding: 30px 50px
    }

    .video{
        width: 100% !important;
    }

    .card-progresso{ width: 255px!important }

}