html, body{margin: 0px; font-family: 'Ubuntu', sans-serif; background: #F5F5F5; color: #333333}
a, a:visited, a:hover, a:link{text-decoration: none; color: inherit}
.fullLink{position: absolute; width: 100%; height: 100%; top: 0; left: 0}
h1{text-align: center}

/*TIRAR FORMATAÇÃO IPHONE*/
select, option{-webkit-appearance: none;}


.contain{min-width: 1000px; margin: 0px auto; font-size: 15px; text-align: justify;}
.containPainel{margin-left: 205px; width: calc(100% - 225px); padding: 10px;}

.flex{display: flex; justify-content: left; flex-wrap: wrap; gap: 20px}
.jcleft{justify-content: left !important}
.jcbetween{justify-content: space-between !important}
.jcleft > div{margin-right: 15px}
.txtCenter{text-align: center}

.logo{padding: 15px; text-align: center;}
.logo img{max-width: 100%;}

.logoLogin{fill: #FFFFFF; padding: 20px;}

.header{text-align: center; background: #007ab1; padding: 20px 15px;}
.header img{height: 70px}
#boxTemp{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.75); display: flex; justify-content: center; align-items: center; z-index: 100000;}

.alertaMsg{border-radius: 4px; background: #fff; color: #000 !important; position: relative; overflow: hidden; min-width: 250px; margin: 15px}
.alertaCab{background: #F5F5F5; padding: 10px 15px; vertical-align: middle; font-size: 14px; text-align: center;}
.alertaCab img{width: 25px; height: auto; margin-right: 10px; vertical-align: middle}
.alertaText{padding: 15px; font-size: 15px; text-align: center;}

.sideMenu{width: 205px; position: fixed; top: 0; left: 0; height: 100%; font-size: 14px; transition: 0.6s; z-index: 1001}
.bgMenu{background: #FFFFFF; color: #333333}
.menuTopMobile{display: none}

.contraMenu{display: none; position: fixed; top: 0px; right: 0px; height: 100%; width: calc(100% - 205px); cursor: pointer; z-index: 1000;}
.menuOpen{left: 0px !important}/*Mostra Menu do lado esquerdo*/

.perguntaBox{margin: 10px 9px; width: calc(50% - 20px);     border: 1px solid #CCC; background: #fff; border-radius: 5px; overflow: hidden;}
.perguntaTitulo{font-size: 17px; font-weight: bold; text-align: center; padding: 15px; background: #202830; color: #FFFFFF}
.perguntaAlternativas{font-size: 14px; padding: 5px 10px}

/*INPUT RADIO ALTERNATIVAS*/
/* The container */
.alternativa{display: block; position: relative; padding-left: 30px; margin: 10px 0px; cursor: pointer; font-size: 15px; color: #444; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 20px;}
.alternativaFlex img{width: 250px}
/* Hide the browser's default checkbox */
.alternativa input{position: absolute; opacity: 0; cursor: pointer;}

/* Create a custom checkbox */
.checkmark {position: absolute; top: 0; left: 0; height: 20px; width: 20px; border: 1px solid #CCCCCC; border-radius: 50%; background: #FFF;}
.checkmark2 {position: absolute; top: 0; left: 0; height: 20px; width: 20px; border: 1px solid #CCCCCC; border-radius: 3px; background: #FFF;}
	
/* On mouse-over, add a grey background color */
.alternativa:hover input ~ .checkmark {background-color: #CCC;}
.alternativa:hover input ~ .checkmark2 {background-color: #CCC;}

/* When the checkbox is checked, add a blue background */
.alternativa input:checked ~ .checkmark {background-color: #26c6da; border: 1px solid #0097a7;}
.alternativa input:checked ~ .checkmark2 {background-color: #26c6da; border: 1px solid #0097a7;}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after{content: ""; position: absolute; display: none;}
.checkmark2:after{content: ""; position: absolute; display: none;}

/* Show the checkmark when checked */
.alternativa input:checked ~ .checkmark:after {display: block;}
.alternativa input:checked ~ .checkmark2:after {display: block;}

/* Style the checkmark/indicator */
.alternativa .checkmark:after {left: 6px; top: 3px; width: 4px; height: 8px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.alternativa .checkmark2:after {left: 6px; top: 3px; width: 4px; height: 8px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.alternativa .btDefault{background: #FF9800 !important}			

/*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: cover; 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{height: 60px;margin-bottom: 20px;}

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

/*CADASTRO*/
.cadastroBg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: URL("/img/background-bio.jpg"); background-position: center; background-size: cover; background-attachment: fixed}
.cadastroDiv{max-width: 500px; padding: 15px; margin: 0 auto;}
.cadastroHeader{text-align: center; font-weight: bold; color: #FFFFFF; font-size: 20px; margin-bottom: 10px}
.cadastroDescricao{text-align: center; color: #FFFFFF; margin-bottom: 20px}

#flexMsg, #flexBox { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10000; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.85);}
.boxMsg {padding: 15px; background: #FFFFFF; color: #000; text-align: center; margin-top: 55px; position: relative;}
.close {position: absolute; top: 7px; right: 7px; width: 15px; height: 15px; background: URL('/img/close.png'); cursor: pointer; background-size: 15px;}

.itemMenu{position: relative; color: #333333; display: flex; align-items: center; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px 20px; transition: 0.3s}
.itemMenu:hover{background: #F5F5F5}
.itemMenu img{margin-right: 10px; max-width: 20px; max-height: 30px;}

.creater{position: absolute; bottom: 10px; color: #555555; font-size: 13px; width: 100%; text-align: center;}
.creater a{text-decoration: none; color: #555555}

.boxItem{background: #fff; border-radius: 4px; width: 485px; position: relative; border: 1px solid #DDD}
.boxItem .flex{align-items: center; justify-content: initial}
.editar{position: relative; background: URL('/img/icon-editar.svg'); background-size: 100%; width: 20px; height: 20px; margin: 0px 10px}
.excluir{position: relative; background: URL('/img/icon-excluir.svg'); background-size: 100%; width: 20px; height: 20px; margin: 0px 10px}

.boxTitulo{padding: 10px; background: #E5E5E5; text-align: center}
.boxDescricao{padding: 10px; background: #F1F1F1; height: 38px; overflow: hidden;}
.boxModulo{padding: 10px; font-weight: bold; margin-top: 10px}
.boxModulo .boxItem{width: calc(100% - 20px); font-weight: normal; margin-bottom: 10px; border: none; background: #ffcb9e; padding: 10px}
.boxCampos{padding: 10px;}

.aulaDescricao{width: 250px; overflow: hidden; text-overflow: ellipsis; /* white-space: nowrap; */}
.boxAcoes{display: flex; justify-content: left; flex-wrap: wrap; gap: 10px; padding: 10px}
.boxAcoes div{    width: 27%; padding: 10px;}

.input{border: #CCC; font-family: 'Ubuntu', sans-serif; font-size: 15px; padding: 5px 7px; margin: 0px 0px 10px 0px; width: 600px; outline: none; border-radius: 3px; border: 1px solid #BBB;}
.input:disabled {background: #DDD; color: #000;}
.textarea{font-family: 'Ubuntu', sans-serif; font-size: 15px; padding: 5px 7px; margin: 0px 0px 10px 0px; width: 600px; height: 100px; outline: none; border-radius: 3px; border: 1px solid #BBB;}

.bt{background: #ef7000; color: #FFF; font-size: 13px; border: none; border-radius: 5px; padding: 10px 15px; cursor: pointer; transition: 0.5s; outline: none; text-align: center; width: 100%; margin: 0 auto;-webkit-appearance: none; }
.bt:hover{background: #ff8e2b;}

.btCinza{background: #7f888d; color: #FFF; font-size: 13px; border: none; border-radius: 5px; padding: 10px 15px; cursor: pointer; transition: 0.5s; outline: none; text-align: center; width: 100%; margin: 0 auto; -webkit-appearance: none;}
.btCinza:hover{background: #5c666c;}

.btAzul{background: #1976d2; color: #FFF; font-size: 13px; border: none; border-radius: 5px; padding: 10px 15px; cursor: pointer; transition: 0.5s; outline: none; text-align: center; width: 100%; margin: 0 auto; -webkit-appearance: none;}
.btAzul:hover{background: #348fe9;}

.btVermelho{background: #eb2c2c; color: #FFF; font-size: 13px; border: none; border-radius: 5px; padding: 10px 15px; cursor: pointer; transition: 0.5s; outline: none; text-align: center; width: 100%; margin: 0 auto; -webkit-appearance: none;}
.btVermelho:hover{background: #f33b3b;}

.widthInitial{width: initial}

.setor, .unidade{border: 1px solid #CCC; background: #FFF; margin-top: 20px; padding: 20px}
.btAction{width: 30px; margin-right: 10px; cursor: pointer}
 
.setorLine, .unidadeLine{padding: 5px 5px 1px 5px; line-height: 30px; display: flex;}
.btAction{width: 25px; margin-right: 10px;}
.setorDescricao, .unidadeDescricao{width: 300px}

.footer {font-size: 14px; line-height: 25px;}

.media img {width: 20px; margin-right: 5px; vertical-align: middle;}

.div300{margin: 0 auto; width: max-content;}
.div300 img{height: calc(100% - 40px); max-width: 100%; max-height: calc(100vw - 50px);}

/**** CURRICULO ****/
	.containCurriculo{width: 700px; margin: 20px auto; padding: 15px; border-radius: 5px}
	.curriculoExistente{margin-bottom: 10px; background: #b5f7eb; padding: 7px; border-radius: 3px; text-align: center; position: relative}
	.headerForm{margin: 30px 0px 10px 0px; font-size: 13px; color: #777; border-bottom: 1px solid #DDD; padding-bottom: 5px;}
	
	.p100{width: 100%}
	.p85{width: calc(85% - 10px);}
	.p70{width: calc(70% - 10px);}
	.p66{width: calc(66.66% - 10px);}
	.p50{width: calc(50% - 10px);}
	.p33{width: calc(33.33% - 10px);}
	.p15{width: calc(15% - 10px);}
	.p100 .input,.p85 .input,.p70 .input,.p66 .input,.p50 .input, .p33 .input, .p15 .input{width: 100% !important}
	#divInteresse .alternativa,#divDisponibilidadeHorarios .alternativa,#divObjetivos .alternativa{width: calc(33.33% - 40px); margin: 10px 0px}

/**** SWITCH CHECK SLIDER ****/
	/* The switch - the box around the slider */
	.switch {position: relative; display: inline-block; width: 60px; height: 25px; margin: 10px 0px}

	/* Hide default HTML checkbox */
	.switch input{opacity: 0; width: 0; height: 0;}

	/* The slider */
	.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #BBB; -webkit-transition: .4s; transition: .4s;}

	.slider:before {position: absolute; content: ""; height: 17px; width: 17px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;}
	input:checked + .slider {background-color: #0fbba0;}
	input:focus + .slider {box-shadow: 0 0 1px #0fbba0;}
	input:checked + .slider:before {-webkit-transform: translateX(34px); -ms-transform: translateX(34px); transform: translateX(34px);}

	/* Rounded sliders */
	.slider.round {border-radius: 25px;}
	.slider.round:before {border-radius: 50%;}
/*****************************/

.curriculoList{display: flex; margin: 5px 0px; padding: 5px; background: #FFF; border-radius: 3px; border: 1px solid #CCC; position: relative}
.ativo{width: 5px; height: 18px; background: #02c18c; margin-right: 5px; border-radius: 5px}
.inativo{width: 5px; height: 18px; background: #e53935; margin-right: 5px; border-radius: 5px}

.statusRed{width: 5px; height: 20px; margin: 3px 5px 0px 5px; border-radius: 5px;background: #fd6054}
.statusYellow{width: 5px; height: 20px; margin: 3px 5px 0px 5px; border-radius: 5px;background: #ffc107}
.statusGreen{width: 5px; height: 20px; margin: 3px 5px 0px 5px; border-radius: 5px;background: #00cf6f}

.box{border: 1px solid #BBB; border-radius: 3px; width: max-content; background: #FFFFFF; margin-top: 50px; overflow: hidden; position: relative; max-height: calc(100% - 100px); overflow-y: inherit;}
.boxHeader{height: 18px; padding: 15px; background: #EEEEEE; font-weight: bold}
.boxHeader img{width: 20px; margin-right: 10px; vertical-align: middle;}
.boxClose{position: absolute; top: 0; right: 0; width: 24px; height: 24px; padding: 12px; cursor: pointer; transition: 0.3s;}
.boxClose:hover{background: #DDDDDD;}
.boxClose img{width: 24px;}

.boxContain{padding: 15px;}

.cursoThumb{position: relative; max-width: 350px; transition: 0.3s; border-radius: 5px; overflow: hidden; box-shadow: 5px 5px 15px -6px #333;}
.cursoThumb img{width: 100%;}
.cursoThumb:hover{transform: scale(1.05)}

.alunoLista{padding: 7px; margin-bottom: 10px; border: 1px solid #BBB; border-radius: 3px; background: #F5F5F5;}

#loadingPage{display:none; width: 100%; height:100%; position: fixed; top: 0; left: 0; z-index: 100000; background: rgba(0,0,0,0.7); justify-content: center; align-items: center;}
#loadingPage img{
	animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin { 
	0% { 
		transform: rotate(0deg) scale(1.4); 
	}
	50% { 
		transform: rotate(180deg) scale(1.0); 
	}
	100% { 
		transform: rotate(360deg) scale(1.4); 
	}
}