form{
		max-width: 600px;
		margin: auto auto;
		padding:unset;
		padding:8vh 8vw;
	}
	
	h1{font-size: xxx-large !important;}
	
	@media(max-width:1025px){
		#anuncio{height: 80vh;}
	}
	@media(min-width:1025px){
		form{
			max-height: 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:58px auto;
	} 
	@media(max-width:1024px){
		#logoCurso{max-width:77%;}
	}
/*********************** CURSO ***************/


 
	div.radio{
		display: flex;
		gap: 40px;
		margin-top:10px;
	}
	button{
		margin-top:30px;
	}
	input.error,select.error{
		box-shadow: 0px 0px 8px 8px #ca474770;
	}
 
	legend{
		font-size: x-large;
	}
 



	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;
		    background-image: url(/images/bgRegister.webp);
			background-size: cover;
			background-blend-mode: soft-light;
			background-position: top center;
			filter: sepia(0.2) brightness(1.00) contrast(1.0) saturate(0.9);
	}
	#anuncio p{
		color:var(--cadastroP);
	    max-width: 70%;
		margin: auto;
		text-align: center;
		margin-top: 80%;
	}
	#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;
	}


	@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 */
}