form{
		max-width: 700px;
		margin: auto auto;
		padding:unset;
		padding:4vh 4vw; 
	}

	#dvMenu button{
		margin:10px;
	}
	.space-10{
		height:10vh;
	}
	#pageLogado h1{
		margin:0px;
	}
	
	h1{font-size: xxx-large !important;}
	label{font-weight: 400 !important;}
	
	.boxCheckRadio input {
		min-width: 20px;
	}
	
	@media(max-width:1025px){
		#anuncio{
			height: unset; /*80vh*/
		}
		.dynamic-align {
			margin-bottom: unset !important; /*30vh*/
		}
		div.flex{
			flex-direction: column !important;
		}
		div.full.check{
			height:unset !important;
			margin: 10px 0px;
		}		
	}
	
	@media(min-width:1025px){
		form{
			max-height: 90vh; /*82vh*/
			overflow-y: auto;
		}
		.dynamic-align button {
			max-width: 90%;
		}		
	}
	
	button.text{
			color:#ffffff !important;
	}
		


		/*********************dynamic-align**********************/
		.dynamic-align {
		  display: flex;
		  justify-content: space-between;
		  flex-wrap: wrap;
		}
	
		.dynamic-align > div {flex: 1;}
		/*.dynamic-align .outline, .dynamic-align button {padding: 10px 0;}*/
		
		@media only screen and (max-width: 768px) {
			.dynamic-align .outline, .dynamic-align button {width: 100%;}
		}
		.dynamic-align div:nth-child(2) > button{float:right;margin-right:0px;}
		
		.dynamic-align button{display: flex;justify-content: center;align-items: center;}
		.dynamic-align button[hidden]{display: none;}
		
		@media (max-width: 768px){.dynamic-align {flex-direction: column;align-items: flex-start;}
		  .dynamic-align > div:first-child {order: 2;}
		  .dynamic-align > div {width: 100%;}
		  .dynamic-align{margin-bottom: 30vh;}
		}
		/*********************dynamic-align¬**********************/

 /*********************** CURSO ¬ ***************/
	#anuncio p{color:#ffffff !important;}
	#logoCurso{
		filter: invert(1) contrast(1) grayscale(1);
		max-width:400px;
		margin:30px auto;
	} 
	@media(max-width:1024px){
		#logoCurso{max-width:77%;}
	}
/*********************** CURSO ***************/

div.full {
    width: 100%;
    display: table;
	margin-bottom: 0px;
}
div.flex {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0px 20px;
}
div.radio {
    display: flex;
    gap: 0px 20px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.column-checkbox div, .full.check div{
	height: 50px;
}

.full.check div {
    height: unset;
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}
.full.check div input{
    margin-top: 8px;	
}


.true{
	margin: 0px;
	margin-top: 20px;
    background-color: #7fff8212;
    padding: 20px;
    border-radius: 10px;
}
.true::before {
    content: "\e4fd";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
    display: inline-block;
}
	
	
input::placeholder,textarea::placeholder{
	color: #999;
	opacity: 0.7;
	font-size: 14px;
	font-style: italic;
}

input:focus-within, select:focus-within, textarea:focus-within, input:focus-visible, select:focus-visible, textarea:focus-visible {
    box-shadow: rgb(0 0 0 / 57%) 0px 0px 20px 0px inset;
    outline: rgb(0 0 0 / 10%) solid 8px !important;
}


#habilitacao{
    display: none;
    max-height: 100vh;
    overflow: auto;
}	
#habilitacao .titulo{
	display: flex;
    align-items: center;
    flex-direction: row;
    gap: 20px;
    margin: 0px;	
}
#habilitacao .titulo h2{
	margin: 0px;
	background-color: #1b1918;
	color:#f8c141;
    padding: 15px;
    border-radius: 100%;	
	font-weight: 900;
	width: 50px;
    height: 50px;
    font-size: 38px;
    text-align: center;
}
#habilitacao .titulo h3{
	font-size: 24px;
    font-weight: 600;
	margin: 0px;
}
#habilitacao .etapa p{
	color: #ffffffba;
}
#habilitacao .etapa button{
	margin-top:10px;
	margin-right:10px;
}
#habilitacao .etapa{
	padding: 40px;
    background-color: #0000003b;
    max-width: 85%;
    border-radius: 10px;
    margin-top: 40px;
}
#habilitacao .etapa.off p.true{
	display:none;
}
#habilitacao .etapa.off {
    filter: opacity(0.5);
	padding: 20px 40px;
}
#habilitacao .etapa.ok {
	padding: 20px 40px;
	background-color: #020c0059 !important;
}

#habilitacao .etapa.off button, #habilitacao .etapa.off img{
	display:none;
}
#habilitacao .titulo h3 i{
	margin-right:10px;
	font-size:36px;
}
#habilitacao .etapa.ok .titulo h3, #habilitacao .etapa.ok .titulo h2{
	color:#42f841;
}
#habilitacao .etapa.ok .titulo h3::after {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 8px;
    display: inline-block;
    margin-left: 26px;
    font-size: 36px;
	color: #5ff54a;
}
#habilitacao .etapa.quatro.off .titulo h3 i{
	display:none;
}
#habilitacao .etapa.tres.ok .titulo h3::after {
    content: "\f560";
}
#habilitacao .etapa.ok p {
    display: none;
}

#habilitacao .etapa.ok button, #habilitacao .etapa.ok img {
    display: none;
}
.etapa.no{
    background-color: #2300003b !important;
}
.etapa.no .true{
	background-color: #ff7f7f12;
}
.etapa.no h2 {
    color: #f84141 !important;
}
#habilitacao .etapa.cinco.ok p {
	display:block;
}
	
#habilitacao div#apps {
    display: flex !important;
    flex-direction: row !important;
    align-content: center;
    align-items: center;
    gap: 20px;
    margin: 20px 0px;
}
#habilitacao div#apps img {
    max-height: 50px;
    width: 100%;
}


@media(max-width: 480px){
	#habilitacao .titulo h3 {
		font-size: medium;
	}
	#habilitacao .etapa.ok .titulo h3::after {
		margin-left: 10px;
		font-size: medium;
	}	
	#habilitacao .etapa, #habilitacao .etapa.ok, #habilitacao .etapa.off{
		padding: 20px 20px;
	}
	button.go{
		margin-top:40px !important;
	}
	button {
		width: 100%;
		text-align: center;
		padding: 20px;
	}	
	textarea{
		min-height:100px;
	}
	input, select{
		padding: 20px !important;
	}
	#habilitacao {
		max-height: max-content;
		overflow:unset;
	}
	#habilitacao div#apps {
		flex-direction: column !important;
	}
	#habilitacao div#apps img{
		max-height: 80px;
	}
}



	button i{
		margin-left:10px !important;
		font-size: small;
	}
	button{
		margin-top:30px;
	}
	input.error,select.error,textarea.error{
		box-shadow: 0px 0px 8px 8px #ca474770;
	}
 
	legend{
		font-size: x-large;
		color: #f8c141;
	}
 



	progress {
		/* Estilos gerais */
		-webkit-appearance: none; /* Importante para WebKit/Blink */
		appearance: none;
		width: 100%;
		height: 20px; /* ou qualquer altura desejada */
	}

	/* Chrome, Safari, etc. */ 
	progress::-webkit-progress-bar {
		background-color: #00000026; /* cor de fundo */
	}

	progress::-webkit-progress-value {
		background-color: #00000050; /* cor de preenchimento */
	}

	/* Firefox */
	progress::-moz-progress-bar {
		background-color: #00000050; /* cor de preenchimento */
	}

	/* IE10+ */
	progress {
		color: #00000050; /* cor de preenchimento no IE10+ */
	}


	body{
		padding:0px; margin:0px;
	}
	
	.cls.page{
		height:100vh;
	}
	

	#anuncio{
		position: relative;
		background-color:var(--cadastroBG);
		padding: 0px 0px;
		box-shadow: 5px 1px 20px 11px #00000075;
		    background-image: url("/skins/128/x-bd-cadastro.webp");
			background-size: cover;
			background-blend-mode: soft-light;
			background-position: center center;
	}
	
 
	
	#anuncio p{
		color:var(--cadastroP);
	    max-width: 70%;
		margin: auto;
		text-align: center;
	}
	#anuncio h1{color:var(--cadastroH);}
	#logo{
	    margin: auto auto;
		width: 400px;
		display:block;
	}
	@media(min-width:1025px){
		#logo{margin-top: 10vh;}
	}
	
	#preload{
	    filter: opacity(0.5);
	}
	/*
	:root{
		--scroolFundo:#fafafa;
		--scroolBar:#efefef;
		--scroolBarHover:#cccccc;
	}
	*/


select option {
    font-family: var(--fontText);
    background: #1f1c1b;
    color: var(--colorTEXTform);
    box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.15);
    font-size: 18px;
}


	@media(min-width:1025px){
		.politica{
			width: 93%;
			bottom: 0px;
			position: absolute;
			height: 60px;
			padding: 0px 30px;
		}
	}
	@media(max-width:1024px){
		form{
			padding:unset;
		}
		.pages {
			max-width: 100vw !important;
			height: 100vh;
			padding: 20px;
			margin-bottom: 100px;
		}
		.politica button{padding:20px 0px;}
		.politica {
			width: 100%;
			bottom: 0px;
			position: relative;
			padding: 20px 0px;
			border: 0px;
		}
		div.radio {
			display: grid;
			gap: 0px;
		}
	}
	
	.politica button{
		color:#fff; 
		cursor:pointer;
		margin-top: -15px;
	}
	.politica button:hover{
		color:#fff;
		text-decorate:underline;
	}
 
	

	.centerLize{
	    display: flex;
		margin: auto auto;
		position: relative;
		width: fit-content;
		gap: 2vw;
	}
	
	.politica.centerLize{
		display: flex;
		position: absolute;
		right: 0px;
	}

	
#pagePolitica iframe {
    width: 96%;
    height: 88%;
    border: 0px;
}

#imgUser{
	margin: 30px 0px;
	border-radius:var(--borderRadius);
	box-shadow: 0 10px 10px 6px #0000000f;
	max-width: 200px;
}

input.readonly{
    color: #ccc !important;
    box-shadow: inset 0px 2px 11px 2px rgb(0 0 0 / 7%) !important;
}


#keyTime,#keyTime span{font-weight:700;}





#suggestImages {
  display: grid;
  /* Cria um grid com colunas que têm no mínimo 150px e no máximo 1fr de largura. 
     auto-fit ajusta o número de colunas ao espaço disponível, 
     permitindo que elas ocupem todo o espaço do contêiner. */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; /* Define o espaçamento entre as colunas e linhas. */
}

@media(max-width:768px){
	#suggestImages {
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	}
}

#suggestImages img {
  width: 100%; /* Faz com que as imagens ocupem toda a largura da célula do grid. */
  height: auto; /* Mantém a proporção das imagens ajustando a altura automaticamente. */
  
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza a transição do efeito */
  border-radius: 4px; /* Adiciona bordas arredondadas (opcional) */
  cursor:pointer;
}
/* Efeito de hover */
#suggestImages img:hover {
  transform: scale(1.05); /* Aumenta ligeiramente o tamanho da imagem */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra sutil para dar profundidade */
}

#dvGravida{display:none;}