/*
	Exemplos de resoluções (parâmetros para responsividade)

@media screen and (max-width: 320px)  {  /* smartphones, portrait iPhone, portrait 480x320 phones (Android)
@media screen and (max-width: 480px)  {  /* smartphones, Android phones, landscape iPhone
@media screen and (max-width: 600px)  {  /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android)
@media screen and (max-width: 801px)  {  /* tablet, landscape iPad, lo-res laptops ands desktops
@media screen and (max-width: 1025px) {  /* big landscape tablets, laptops, and desktops
@media screen and (max-width: 1281px) {  /* hi-res laptops and desktops
*/

/* ------------------------------------------ */
/*   Geral (configuração inicial da página)   */
/* ------------------------------------------ */
/*	Classes estão em ordem alfabética dentro desta seção   */

body{
	background: #fff; /*padrão*/
	width: 100%;
	height: 100%;
}

.ocultar-textarea{
	display:none;
}

.sombra{
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.sombra-estreita{
    box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24),0 8px 25px 0 rgba(0,0,0,0.19);
}

.tela-trabalho{
	background:#fff;
}

/* ------------------------------------------ */
/*              Faixa superior                */
/* ------------------------------------------ */
/* 	Classes estão na ordem em que aparecem na faixa, 
	da esquerda para a direita, dentro desta seção	*/
	
.faixa-padrao{
	display: grid;
	grid-template-columns: minmax(250px, 1fr) 1fr minmax(200px, 1fr) 88px 50px;
	gap: 5px;
	width: 100%;
	height: 70px;
	/*background-color: #bdcec8; azul suave */
}

.imagem-ecastle{
	position: absolute;
	width: auto;
	height: 55px;
	top: 0;
	padding: 0px;
	margin: 5px;
}

.nome-usuario{
	margin: 25px 0px 0px 10px;
	text-align: right;
}

.imagem-foto{
	width: 55px;
	height: 55px;
	margin: 7px 20px 7px 7px;
	border-radius: 50%;
	border: 1px solid #fff;
}

@media screen and (max-width: 650px) {
	.faixa-padrao{
		display: grid;
		position: relative;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1vw;
		gap: 5px;
		width: 100%;
		height: 70px;
	}

	.imagem-ecastle{
		position: relative;
		grid-column: 1;
		left: 2px;
		margin-left: -15px;
		width: 90px;
		height: 90px;
		margin-top: -20px;
	}
	
	.nome-usuario{
		grid-column: 4;
		grid-row: 1;
		position: relative;
		right: 55px;
		top: 20px;
	}

	.imagem-foto{
		grid-column: 4;
		position: relative;
		right: 46px;
		bottom: 10px;
		width: 45px;
		height: 45px;
		margin: 5px 10px 10px 10px;
		border-radius: 50%;
		border: 1px solid #fff;
	}

	.menu-principal ul {
		height: 150%;
	}
}

.imagem-saida{
	margin-top: 25px;
	margin-right: 1px;
	width: 30px;
}

/* ------------------------------------------ */
/*             Faixa de navegação             */
/* ------------------------------------------ */
/* 	Classes estão na ordem em que aparecem na faixa, 
	da esquerda para a direita, dentro desta seção	*/
	
.faixa-navegar{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	left: 0px;
	width: 100%;
	height: 40px;
	background-color: none;
}

.seta-esquerda{
	margin-top: 18px;
	width: 30px;
}

.icone-home{
	margin-top: 18px;
	width: 30px;
}

.icone-topo{
	margin-top: 18px;
	width: 30px;
	height: 30px;
}

@media screen and (max-width: 650px) {
	.faixa-navegar{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 50px;
		left: 0px;
		width: 100%;
		height: 40px;
		background-color: none;
	}

	.imagem-saida{
		margin-top: 45px;
		margin-right: 28px;
		width: 20px;
		height: 20px;
	}

	.seta-esquerda{
		margin-top: 18px;
		width: 18px;
		height: 18px;
	}

	.icone-home{
		margin-top: 18px;
		width: 16px;
		height: 16px;
	}	
}

/* ------------------------------------------ */
/*               Corpo da página              */
/* ------------------------------------------ */
/*	Classes estão em ordem alfabética dentro desta seção   */

a{
	text-decoration: none;
	color: #fff;
}

.adiciona-atividade{
	width: 98%;
	padding-bottom: 10px;
	border-top: 1px solid #e1e2f0; /* azul suave */
	border-bottom: 1px solid #e1e2f0; /* azul suave */
}

.ajusta-dropdown{
	padding-left: 5x;
	margin: 5px;
	border-radius: 5px;
/*	width: 402px; */
	width: 60%;
	height: 45px;
	border: 1px solid #e1e2f0; /* azul suave */
	}
	@media screen and (max-width: 650px) {
		.ajusta-dropdown{
			border-radius: 5px;
			padding-left: 5px;
			margin-top: 5px;
			margin-bottom: 5px;
			width: 94%;
			height: 45px;
			border: 1px solid #e1e2f0; /* azul suave */
		}
}

.ajusta-dropdown-md{
	padding-left: 5x;
	padding-top: 0;
	padding-bottom: 0;
	border-radius: 5px;
	width: 60%;
	height: 45px;
	border: 1px solid #e1e2f0; /* azul suave */
	}

.ajusta-form{
	font-size: 16px;
	background: #fff;
	max-width: 85vw;
	margin: 0 auto;
	/*padding: 5px 20px 5px 20px;*/
	}
	@media screen and (max-width: 650px) {
		.ajusta-form{
			font-size: 16px;
			background: #fff;
			max-width: 100%;
			margin: 10px;
			padding: 0;
		}
}

.ajusta-label{
	font-family: 'helvetica', 'arial';
	font-size: 2vh;
	color: #6b7d77;
	padding-left: 5px;
	text-align: left;
}

.atividade{
	text-align: center;
}

.cinza{  /* cor de fundo usada nos checkbox de parâmetros */
	background-color: #e6e6e6; /* cinza suave */
}

.enviar input{
	margin-top: 30px;
	height: 50px;
	width: 250px;
	font-weight: bold;
	border: 1px solid #fff;
	cursor: pointer;
}

.enviar input:hover{
	background: #44504c; /* azul suave */
	border: 1px solid #6b7d77;
}

/*

.fechar {
  position: absolute;
  width: 30px;
  right: -15px;
  top: -20px;
  text-align: center;
  line-height: 30px;
  margin-top: 5px;
  background: #ff4545;
  border-radius: 50%;
  font-size: 16px;
  color: #8d0000;
}
esta linha vai no html...
<!-- <a href="#fechar" title="Fechar" class="fechar">x</a> -->
*/

.fonte-checkbox{
	font-size: 13px;
	color: #737373;  /* cinza */
}

.fonte-radiobox{
	font-size: 10px;
	color: #737373;  /* cinza */
}

.fundo-permissao{
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border: 1px solid #ff7f2a; /* laranja suave */
}

.grade-2x1{
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 40px;
	margin-bottom: 40px;
	gap: 50px;
	width: 100%;
}

.grade-2x1-form{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 40px;
	width: 95%;
}

.grade-3x1{
	display: grid;
	grid-column-start: 1;
	grid-column-end: 4;
	grid-template-columns: 1fr 1fr 1fr;
	margin-top: 20px;
	margin-bottom: 20px;
	gap: 20px;
	width: 100%;
}

.grade-3x1-conteudo{
	display: grid;
	grid-column-start: 1;
	grid-column-end: 4;
	grid-template-columns: 30% 40% 30%;
	margin-top: 20px;
	margin-bottom: 20px;
	gap: 20px;
	width: 100%;
}

.grade-3x1-form{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 30px;
}

.grade-4x1-form{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-column-gap: 30px;
}

.grade-5x1{
	display: grid;
	grid-column-start: 1;
	grid-column-end: 6;
	grid-template-columns: 200px 1fr 1fr 1fr 1fr;
	margin-top: 20px;
	margin-bottom: 20px;
	gap: 20px;
	width: 100%;
}

.grade-3x1-ckeditor{
	display: grid;
	grid-template-columns: 5% 90% 5%;
}

.grade-3x2{
	display: grid;
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 3;
	grid-template-columns: 1fr 100px 100px 100px 100px 100px 1fr;
	margin-top: 60px;
	margin-bottom: 60px;
	gap: 60px;
	width: 100%;
	align-items: center;
}

.imagem-conteudos-retrato{
	padding: 10px;
	width: 80px;
}

.imagem-conteudos-paisagem{
	padding: 10px;
	width:80px;
	
}

.inativar_usuario{
	cursor: pointer;
}

input{
	width: 95%;
	max-width: 85vw;
	padding: 15px;
	margin: 5px;
	border: 1px solid #e1e2f0; /* azul suave */
	border-radius: 5px;
	cursor: pointer;
	}
	@media screen and (max-width: 650px) {
		input{
			width: 95%;
			border: 1px solid #e1e2f0; /* azul suave */
			border-radius: 5px;
			cursor: pointer;
		}
}

input[class="formato-data"]{
	width: 95%;
}

input[class="nome-original"]{
	width: 93%;
}

input[class="formato-data-menor"]{
	width: 60%;
}

input[value="Enviar + Incluir Atividades"]{
	width: 300px;
}

.layout-geral{
	display: grid;
	grid-template-columns: 160px 1fr;
}

.layout-local{
	display: inline-flex;
	flex-wrap: wrap;
	gap: 20px;	
}

.margem-inferior{
	margin-bottom: 15px;
}

.margem-superior{
	margin-top: 35px;
}

.margem-superior-maior{
	margin-top: 70px;
}

.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	font-family: Arial, Helvetica, sans-serif;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 200ms ease-in;
	-moz-transition: opacity 200ms ease-in;
	transition: opacity 200ms ease-in;
	pointer-events: none;
}

.modal:target {
  opacity: 1;
  pointer-events: auto;
}

.modal > div {
  width: 80%;
  height: 90%;
  position: relative;
  margin: 1% auto;
  padding: 15px 20px;
  background: #fff;
}

.select:invalid{
	color: #737373;  /* cinza */
}

select[id="modalidade"],
select[id="tipo-curso"],
select[id="instrutor"],
select[id="escolhe-curso"]{
	margin: 5px;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #e1e2f0; /* azul suave */
	width: 93%;
	height: 50px;
}

select[id="escolhe-curso"]{
	width: 99%;
}

.tamanho-input{
	width: 20px;
}

textarea{
	width: 95%;
	height:150px;
	max-width: 85vw;
	padding: 15px;
	margin: 5px;
	border: 1px solid #e1e2f0; /* azul suave */
	border-radius: 5px;
	cursor: pointer;
	}
	@media screen and (max-width: 650px) {
		textarea{
			width: 95%;
			height:150px;
			max-width: 85vw;
			border: 1px solid #e1e2f0; /* azul suave */
			border-radius: 5px;
			cursor: pointer;
		}
}



/*	Confirações de <textarea> da página de cursos - INÍCIO */
textarea[name="cursista"], 
textarea[name="nome-curso"], 
textarea[name="carga-horaria-total"],
textarea[name="status-curso"]{
	height: 16px;
	resize: none;
}

textarea[name="dc_data-inicio"],
textarea[name="dc_data-final"],
textarea[name="dc_data-expira"],
textarea[name="dc_modalidade"],
textarea[name="dc_tipo_curso"],
textarea[name="dc_instrutor"],
textarea[name="registro"],
textarea[name="curso-atividade"]{
	height: 16px;
	resize: none;
	width: 84%;
}

textarea[name="descreve-curso"],
textarea[name="ementa"],
textarea[name="programa-curso"],
textarea[name="comentarios"],
textarea[name="pergunta"],
textarea[name="texto-padrao"],
textarea[name="link"]{
	height: 50px;
	resize: none;
	width: 95%;
}

textarea[name="descreve-atividade"]{
	height: 35px;
	resize: none;
	width: 95%;
}

.textarea_questoes{
	height: 50px;
	width: 95%;
}

.textarea_resposta{
	height: 25px;
	resize: none;
	width: 84%;
}

textarea[name="pergunta"]{
	height: 70px;
	resize: none;
	width: 35vw;
}

/*	Confirações de <textarea> da página de cursos - FINAL */

.titulo{
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #6b7d77;
}

.titulo2{
	text-align: center;
	margin-top: 15px;
	margin-bottom: 15px;
	color: #363636;	
}

.titulo-direita{
	text-align: right;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #6b7d77;
}

.titulo-esquerda{
	text-align: left;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #6b7d77;
}

.tamanho-drop{
	width: 20vw;
}

.centraliza-texto{
	text-align: center;
}

.centraliza-imagem{
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding-right: 8vw;
	justify-items: center;
	align-items: center;
	width: 100%;
}

.botao_checkbox{
	width: 20px;
	height: 15px;
}

.ocultar{
	display: none;
}