/*
	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%;
}

.sombra{
    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.24),0 5px 5px 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: 1fr 1fr 1fr;
	width: 100%;
	height: 60px;
	background-color: #ffffff;
}

.imagem-cliente-pequena{
	padding: 0px;
	width: 60px;
	height: 60px;
}

.imagem-cliente-media{
	padding: 0px;
	width: 100px;
	height: 100px;
}

.nome-usuario{
	margin-top: 0px;
	text-align: right;
	justify-items: center;
	color: #e6e6e6;
}

.imagem-foto{
	width: 40px;
	height: 40px;
	margin: 10px;
	/*border-radius: 50%;*/
	border: 1px solid #fff;
}

@media screen and (max-width: 650px) {
	.faixa-padrao{
		display: grid;
		grid-template-columns: 1fr;
		gap: 5px;
		width: 100%;
		height: 360px;
		background-color: #ffffff;
	}

	.imagem-cliente{
		padding: 10px;
		width: 111px;
		height: 45px;
	}
	
	.imagem-foto{
		width: 40px;
		height: 40px;
		margin: 10px;
		border-radius: 50%;
		border: 1px solid #fff;
	}
}

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

/* ------------------------------------------ */
/*             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: 18px;
	height: 18px;
}

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

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

a:hover {
	color: #363636;
}

.adiciona-atividade{
	border: 1px solid #e1e2f0; /* azul suave */
}

.ajusta-dropdown{
	padding-left: 5x;
	margin: 5px;
	border-radius: 5px;
	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-form{
	font-size: 16px;
	background: #fff;
	max-width: 85vw;
	margin: 0 auto;
	padding: 5px 20px 5px 5px;
	}
	@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;
}

.canto-arredondado-10{
	border-radius: 10px;
}
.cinza{  /* cor de fundo usada nos checkbox de parâmetros */
	background-color: #e6e6e6; /* cinza suave */
}

.enviar input{
	background-color: #6b7d77; /* cinza tonalizado */
	height: 50px;
	width: 250px;
	font-weight: bold;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border: 1px solid #fff;
	cursor: pointer;
}

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

.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-form{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 30px;
}

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

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

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

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

input{
	width: 95%;
	max-width: 85vw;
	padding: 15px;
	margin: 5px;
	border: 1px solid #b9b9b9; /* 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: 84%;
}

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

.layout-geral{
	display: grid;
	grid-template-columns: 150px 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="tipo-contrato"],
select[id="uf"],
select[id="pais"],
select[id="estado-civil"]{
	height: 30px;
}

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

.tamanho-input{
	width: 20px;
}

.height-input{
	margin: 0px;
	padding: 0px;
	height: 30px;
}

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-atividade"],
textarea[name="comentarios"]{
	height: 70px;
	resize: none;
	width: 84%;
}

textarea[name="obs-cliente"]{
	height: 30px;
	resize: none;
	width: 84%;
}


/*	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-branco{
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	color: rgb(236, 213, 213);
}

.ocultar-div{
	display: none;
}

.mostrar-div{
	display: block;
}

.fonte-10{
	font-size: 10px;
}

.fonte-12{
	font-size: 12px;
}

#ajusta-preco{
	margin: 5px;
}

#ajusta-preco:hover{
	background-color: #bebebe;
}

#vlr-parcelas{
	padding: 5px;
	height: 18px;
}