body{margin: 0px; font-size: 14px; background: #E6E6E6; font-family: 'Nunito', sans-serif;}
a, a:visited, a:link, a:active, a:hover{text-decoration: none; color: #000}
.fullLink{width: 100%; height: 100%; color: inherit; position: absolute; top: 0; left: 0}

.topBar{box-shadow: 0px 0px 2px #AAA; height: 50px; position: sticky; top: 0; left: 0; background: #FFF; z-index: 1000; min-width: initial; width: 100%}
.logo{background-image: URL('img/logo-sel.png'); background-size: 40px 30px; width: 40px; height: 30px; float: left; margin: 10px}
.menu div{color: #555555; height: 40px; line-height: 40px; font-size: 14px;}
.menuIcon{display: block; height: 50px; width: 50px; background-position: center; float: left; background-repeat: no-repeat; cursor: pointer}
.menuIcon img {width: 30px;    height: 30px; padding: 10px;}
.contraMenu{display: none; position: fixed; top: 0px; right: 0px; height: 100%; width: calc(100% - 245px); cursor: pointer; z-index: 1000;}
.nomeUsuario{float: right; line-height: 50px; right: 10px; position: absolute;}
.flex{display: flex; flex-wrap: wrap}

/*MENU*/
.menu{position: fixed; top: 0px; height: 100%; left: -265px; width: 260px; background: #FFF; box-shadow: 1px 1px 5px #555; padding-top: 10px; z-index: 10000; transition: 0.6s}
.menuOpen{left: 0px !important}/*Mostra Menu do lado esquerdo*/
.menuItem{width: calc(100% - 20px); padding: 0px 10px; display: flex; transition-duration: 0.4s;}
.menuItem:hover{background: #DDD; transition-duration: 0.4s;}
.menuItem [class^='icon-']{height: 40px; width: 40px; background-size: 25px; margin-right: 5px;}
.textMenu{height: 40px; line-height: 40px; font-size: 16px;}

.icon-videos{background: URL('img/icons/icon-videos.png'); background-repeat: no-repeat; background-position:7px 7px;}
.icon-turmas{background: URL('img/icons/icon-turmas.png'); background-repeat: no-repeat; background-position:7px 7px;}
.icon-desempenho{background: URL('img/icons/icon-desempenho.png'); background-repeat: no-repeat; background-position:7px 7px;}
.icon-cadastro{background: URL('img/icons/icon-cadastro.png'); background-repeat: no-repeat; background-position:7px 7px;}
.icon-financas{background: URL('img/icons/icon-financas.png'); background-repeat: no-repeat; background-position:7px 7px;}
.icon-docs{background: URL('img/icons/icon-docs.png'); background-repeat: no-repeat; background-position:7px 7px;}
.icon-alunos{background: URL('img/icons/icon-alunos.png'); background-repeat: no-repeat; background-position:7px 7px;}
.icon-config{background: URL('img/icons/icon-config.png'); background-repeat: no-repeat; background-position:7px 7px;}
.icon-sair{background: URL('img/icons/icon-sair.png'); background-repeat: no-repeat; background-position:7px 7px;}
.icon-termos{background: URL('img/icons/icon-termos.png'); background-repeat: no-repeat; background-position:7px 7px;}
.icon-pergFreq{background: URL('img/icons/icon-pergFreq.png'); background-repeat: no-repeat; background-position:7px 7px;}
.icon-premium{background: URL('img/icons/icon-premium.png'); background-repeat: no-repeat; background-position:7px 7px;}
.icon-podcast{background: URL('img/icons/icon-podcast.png'); background-repeat: no-repeat; background-position:7px 7px;}

/*CONTAIN*/
.contain{margin: 0px auto 0px auto; padding: 0px; min-width: 1081px}
.boxPadding{padding: 10px 15px}
.categoria, .tituloPage{height: 40px; line-height: 40px; font-size: 20px; color: #B00909; font-weight: bold; clear: both }
.addIcon{position: relative; cursor: pointer; margin: 5px; color: #FFFFFF; background: #2196F3; padding: 10px;    border-radius: 3px; text-transform: uppercase; font-weight: bold; transition: 0.3s;}
.addIcon:hover{background: #1565c0}
.thumbVideo{position: relative; cursor: pointer; width: calc(20% - 8px); overflow: hidden; background-color: #FFF; margin: 7px 3px; border: 1px solid #DDDDDD; transition: 0.3s}
.thumbVideo:hover{border: 1px solid #999999}

.thumbVideoCat{position: relative; width: calc(20% - 8px); overflow: hidden; background-color: #FFF; margin: 7px 3px; border: 1px solid #CCC; float: left}
.thumbTituloCat{color: #111; margin-bottom: 5px; font-size: 15px; height: 40px;}
.thumbDetailCat{padding: 5px 10px 10px 10px;}
.thumbDescCat{font-size: 14px; overflow:hidden; margin-bottom: 5px; height: 20px; color: #777;}
.btComprar{height: 35px; line-height: 35px; text-align: center; border: none; background: #B00909; color: #FFF; border-radius: 2px; cursor: pointer; transition: 0.3s; width: 100%; font-family: 'Signika', sans-serif;}
.btComprar:hover{background: #D21919; transition: 0.3s}
.btAcessar{height: 35px; line-height: 35px; text-align: center; border: none; background: #007799; color: #FFF; border-radius: 2px; cursor: pointer; transition: 0.3s; width: 100%; font-family: 'Signika', sans-serif;}
.btAcessar:hover{background: #0990b7; transition: 0.3s}

.thumbImg{width: 100%}
.thumbDetail{padding: 5px 5px 25px 5px;}
.thumbTitulo{color: #333333; font-size: 15px; font-weight: bold;}
.thumbQtde{position: absolute; bottom: 5px; color: #555555}
.pontuacao{position: absolute; bottom: 5px; width: 100%; color: #555}
.pontuacaoOK{position: absolute; bottom: 5px; width: 100%; color: #0e30e7;}
h1{font-size: 20px; font-weight: bold; color: #222222; text-align: center; padding: 15px; margin: 0px;}
.titulo{font-size: 19px; font-weight: bold; color: #1976d2; margin: 15px 0; width: 100%}
.containErro{text-align: center; font-size: 20px; color: #A00;}
.videoAula{width: 740px; height: 412px; /*padding-top: 56.25%; 56.25% = Ratio 16:9*/ position: relative;}
iframe{position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;}
.oculto{background: #EEE}

.aulaDescricao{font-size: 14px; color: #000; max-width: 735px; margin: 15px 0px;}
.avaliacaoPergunta{font-size: 15px; font-weight: bold; margin: 10px 0; min-height:24px; clear:both}
.avaliacaoOpcoes{font-size: 13px; line-height: 30px; display: flex}
.avaliacaoRadio{float: left; line-height: 30px; min-height:30px; width: 25px}
.avaliacaoItem{float: left; line-height: 30px; min-height:30px; width: calc(100% - 25px)}
.textResposta{height: 20px; line-height: 20px; float: left;}
.nulo,.certo,.errado{height: 20px; line-height: 20px; width: 20px; margin: 3px 10px 0px 0px}
.certo{background: URL('img/icons/certo.png')}
.errado{background: URL('img/icons/errado.png')}
.notaAvaliacao{font-size: 35px; font-weight: bold; margin: 10px 0; height:40px; clear: both}
.dataAvaliacao{font-size: 16px; margin: 10px 0; height:20px;}

.addTurma{cursor: pointer; border: 1px solid #AAA; margin: 5px; padding: 10px; width: calc(33% - 32px); background: #FFF; text-align: center; font-weight: bold; border-radius: 2px}
.turmaDiv{clear: both; overflow: hidden}
.turma, .turmaNew{cursor: pointer; border: 1px solid #AAA; margin: 5px; padding: 10px; width: calc(33% - 32px); background: #FFF; float: left; border-radius: 2px}
.turmaIndex{cursor: pointer; border: 1px solid #AAA; margin: 5px; padding: 10px; width: calc(33% - 32px); background: #FFF; float: left; height: 90px; border-radius: 2px}
.turma:hover, .addTurma:hover, .turmaIndex:hover{box-shadow: 0px 0px 5px #333; transition-duration: 0.5s;}
.itemTurma{line-height: 20px; float: left; white-space: nowrap; font-weight: bold; width: 65px}
.descItemTurma{line-height: 20px; float: left; white-space: nowrap; width: calc(100% - 65px)}
.encerrada{background: #EEE}
.construcao{background: #FFA}

/*AULA*/
.linha{clear: both; padding: 5px 0px; overflow: hidden;}
.label {height: 30px; line-height: 30px; width: 115px; float: left;}
.campo{float: left}
.campo2{height: 30px; line-height: 30px; float: left;}

.alterar, .excluir{height: 40px; width: 40px; margin: 0px; float: right; cursor: pointer;}
.alterar{background: URL('img/alterar.png') 4px no-repeat}
.alterar:hover{background: URL('img/alterar-active.png') 4px no-repeat}
.excluir{background: URL('img/excluir.png') 4px no-repeat}
.excluir:hover{background: URL('img/excluir-active.png') 4px no-repeat}

.listaAulasMob{display: none}
.listaAulas{background: #FFFFFF; margin-right: 10px; border-right: 1px solid #EEEEEE; width: 250px; overflow-y: auto;}
.listaAulas div{position: relative; padding: 11px 10px; margin: 1px; border-bottom: 1px solid #DDD; background: #FFFFFF;}
.listaAulas .atual{color: #000; background: #d3e9ff;}

/*CONFIGURAÇÕES*/
.categoriaItem{float: left; border: 1px solid #AAA; margin: 5px; width: 321px}
.catTituloContain{float: left}
#catTitulo, [id^="catTituloAlterar-"]{height: 40px; padding: 10px; outline: none; border: none; width: 230px;}
#catCriar{height: 30px; line-height: 30px; padding: 0px 10px; width: 60px; float: left; text-align: center; cursor: pointer; margin: 5px; background: #CCC; color: #000;}
#catCriar:hover{background: #0088BB; color: #FFF;}
[id^='catTitulo-']{height: 40px; line-height: 40px; padding-left: 10px; width: 229px; float: left; white-space: nowrap;}
[id^='catAlterar-'], [id^='catExcluir-']{height: 40px; width: 40px; margin: 0px; float: left; cursor: pointer;}
[id^='catAlterar-']{background: URL('img/alterar.png') 4px no-repeat}
[id^='catAlterar-']:hover{background: URL('img/alterar-active.png') 4px no-repeat}
[id^='catExcluir-']{background: URL('img/excluir.png') 4px no-repeat}
[id^='catExcluir-']:hover{background: URL('img/excluir-active.png') 4px no-repeat}
#catItens{clear: both; width: 100%}
[id^="catAlterarSalvar-"]{cursor: pointer; float: right; text-align: center; height: 32px; line-height: 32px; width: 73px; background: #007799; padding: 0px 0px;  color: #FFF; margin: 4px;}
[id^="catAlterarSalvar-"]:hover{background: #2299BB; box-shadow: 0px 0px 5px #AAA}
	
/* DADOS CADASTRAIS */
#dadosCadastrais, #alterarSenha{overflow: hidden}
/* OUTROS */
#boxMsg{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.7);z-index: 1000;}
.pageBlack{width: 100%; height: 100%; background: #000; opacity: 0.7; position: fixed;}
.msgObrigatorio{padding: 30px; background: #FFF; color: #A00; font-size: 18px; position: relative; margin: 100px auto; width: 200px; text-align: center;}
.alerta{padding: 10px 30px; background: #FFF; font-size: 18px; position: relative; margin: 40px auto; width: 330px; text-align: center; overflow: hidden}
.msgAlerta{margin: 10px 0px; color: #A00}
.cancelar, .confirmar{cursor: pointer; padding: 10px; color: #FFF; font-size: 18px; margin: 10px 22px; width: 100px; text-align: center; float: left; border-radius: 3px}
.cancelar{background: #A00;}
.cancelar:hover{background: #D00; box-shadow: 0px 0px 3px #AAA}
.confirmar{background: #5588BB;}
.confirmar:hover{background: #0088BB; box-shadow: 0px 0px 3px #AAA}
.both{ clear: both; overflow: hidden}
form{margin: 0px}
.destacar{border: 1px solid #A00}

/*TURMAS*/
.aulaAdd{border: 1px solid #CCC; padding: 10px; margin: 10px 0px; background: #FFF; clear: both}
.checkbox{float: left}
.tituloAula{line-height: 35px; padding: 0px 5px; font-weight: bold;}
.categoriaAula{line-height: 25px; color: #B00909}
.descricaoAula{margin-top: 5px; padding-left: 20px;}
.btRed, .btBlue, .btGray{cursor: pointer; padding: 15px 15px; font-size: 18px; margin: 15px 0px; color: #FFF; border-radius: 3px; text-align: center; border: none; min-width: 230px; font-family: 'Signika', sans-serif; height: initial; line-height: initial; width: fit-content}
.btRed{background: #C00}
.btRed:hover{background: #E00; box-shadow: 0px 0px 5px #AAA}
.btBlue{background: #007799}
.btBlue:hover{background: #2299BB; box-shadow: 0px 0px 5px #AAA}
.btGray{background: #777}
.btGray:hover{background: #888; box-shadow: 0px 0px 5px #AAA}
.btNovo{cursor: pointer; padding: 10px; font-size: 15px; color: #FFF; border-radius: 3px; text-align: center; border: none; position: absolute; bottom: 5px; background: #007799; width: calc(100% - 30px); transition: 0.3s}
.btNovo:hover{background: #2299BB; }

.botaoMais{cursor: pointer; color: #007799; background: URL('img/botaoMais.png') 4px 4px; background-repeat: no-repeat; padding-left: 40px; height: 40px; line-height: 40px; width: 300px}
.botaoMais:hover{color: #2299BB; background: URL('img/botaoMaisHover.png') 4px 4px; background-repeat: no-repeat; }
.btAprovTurma {float: left; margin: 0px 5px; background: #0AAA00; padding: 0px 20px; border-radius: 3px; color: #FFF; border: none; cursor: pointer}
.btRecusarTurma {float: left; margin: 0px 5px; background: #A00; padding: 0px 20px; border-radius: 3px; color: #FFF; border: none; cursor: pointer}
.alunoTurma {margin: 0px 5px; padding: 5px; float: left; }
.divAlunoTurma{height: 30px; padding: 5px 0px;}
.btRelatorio{width: calc(33% - 31px); float: left; margin-right: 5px}
.tituloRelatorio{text-align: center; margin: 10px 0px; font-size: 30px; color: #A00; font-weight: bold;}
.divBtRelatorio{overflow: hidden}
#msg{padding: 10px; clear: both}


/*LOGIN*/
.loginHeader{position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.loginHeaderBack{position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: brightness(0.4); background: URL("img/background-login.jpg"); background-position: center; background-size: 100%; background-attachment: fixed}
.loginBox{position: relative; width: 300px; text-align: center; text-align: center; background: rgba(0,0,0, 0.7); border-radius: 5px; padding: 15px;}
.loginBox img{width: 280px;margin-bottom: 20px;}
.bt{display: block; margin-bottom: 10px; width: 100%; padding: 10px; text-transform: uppercase; background: #117a8b; border: 0px; border-radius: 2px; color: #FFF; font-size: 17px; outline: none; transition: 0.5s; -webkit-appearance: none; text-align: center; text-decoration: none}
.bt:hover{background: #17a2b8;}

.boxMsg {padding: 10px; background: #FFFFFF; position: relative;}
#flexBox, #flexMsg{margin: 0 auto; position: absolute; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center;}
.close{position: absolute; top: 7px; right: 7px; width: 15px; height: 15px; cursor: pointer; background-size: 15px;}
.close img {width: 15px;}
.forgot{background: no-repeat; color: #FFFF; border: none;}
.loginInput {padding: 7px; width: 100%; outline: none; border: #CCC; margin-bottom: 10px; font-size: 17px; font-family: 'Nunito Sans', sans-serif; border-bottom: 1px solid #CCC;}
.input {padding: 8px; margin-bottom: 10px; font-size: 15px; font-family: 'Nunito Sans', sans-serif; width: 400px; border: 1px solid #CCC; border-radius: 3px; outline: none;}
.input:disabled {background: #DDD; color: #000;}


/* DADOS CADASTRAIS */
#codArea{width: 35px}
#fone{width: 125px}
#num{width: 65px}

/* FOOTER */
.footLogin{position: relative; min-height: 100px; width: 100%; background: #111; /*box-shadow: 1px 1px 5px #000;*/ overflow: hidden}
.footItem{position: relative; color: #FFF; float: left; min-width: 320px ;width: calc(100/2 - 20px); margin: 10px 10px 0 10px; line-height: 30px; font-size: 15px; font-family: 'Signika', sans-serif;}
.footer{background: #FFF; padding: 15px; box-shadow: 0px 0px 5px #AAA; text-align: center}