/* h6{
    font-weight: bold; 
}

.stepper {
    .line {
        width: 2px;
        background-color: lightgrey;
    }
}

.password-strength-bar {
    width: 100%;
    height: 8px;
    background-color: #ddd;
    border-radius: 4px;
    box-shadow: inset 0 .07rem 3px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.strength-indicator {
    height: 100%;
    width: 0;
    background-color: #e70b0b;
    transition: width 0.5s ease, background-color 0.5s ease;
}

#indicador-texto-senha {
    color: #666;
    font-size: 0.9rem;
}

#tip {
    font-style: italic;
    color: #666;
    font-size: 0.7rem;
    max-width: 90%;
    margin: 0 auto 0.7rem;
} */
body:not(.login){
	min-height: 100dvh;
	min-height: 100svh;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
	background-color: white;
}

body.login .top-bar, body.login footer{
	display: none;
}

.top-bar {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar img {
    height: 50px;
}

.layout-guest main{
	flex-grow: 1;
	height: calc(100dvh - 151px);
	display: flex;
	justify-content: center;
}

footer {
    text-align: center;
    width: 100%;
    font-size: 0.85rem;
    color: #adb5bd;
    padding: 1rem 0;
}

/*--------------------------------- Login ---------------------------------*/
.fs-7{	
	margin-top: .7rem;
    font-size: 0.75rem;
}

/* Seleciona o radio button e aplica a borda vermelha */
input[type="radio"].is-invalid {
    border: 0.14rem solid red; /* Adiciona a borda vermelha */
    outline: none; /* Remove o contorno padrão do navegador */
}

.logo-container{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	img{
		width: 18.2rem;
	}
	.tab-title{
		font-weight: 600;
		color: var(--gray1);
	}
	p{
		color: var(--gray2);
		font-size: 1.2rem;
	}
}

.infos{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4.2rem 2.1rem;
	object-fit: cover;
	object-position: left;
	background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url('../img/background-img.jpg') center/cover no-repeat;
	gap: 1.05rem;
	.col2{
		display: grid;
		gap: 2.8rem;
		grid-template-columns: 1fr 1fr;
	}
	.col1{
		align-items: center;
	}
}
.content{
	display: flex;
	flex-direction: column;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 1.4rem;
	padding: 2.1rem;
	height: 100%;
	gap: 0.7rem;
	width: 28rem;
	header{
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.7rem;
		.icon{
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 3.85rem;
			min-width: 3.85rem;
			background-color: var(--secondary-color);
			border-radius: 1.05rem;
			i{
				font-size: 2.35rem;
			}
		}
		h1{
			color: var(--gray2);
			font-size: 1.7rem;
			font-weight: 600;
		}
	}
	span{
		font-size: 1.15rem;
		color: var(--gray2);
	}
}

.login-container{
	display: grid;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	grid-template-columns: 2fr 1fr;
	form{
		padding: 0 3.5rem
	}
	.form-floating{
		height: 5.25rem;
		label{
			color: var(--gray4);
			font-weight: 600;
		}
		input{
			height: 100%;
			border-radius: 1.05rem;
			padding: 0.6rem 1rem;
			color: var(--gray5);
		}
	}
}

.form-floating>input, .form-floating>input:focus{
	border: solid .07rem var(--gray4);
	color: var(--gray4) !important;
	font-size: 1rem;
}

.form-floating>label{
	padding: 1.8rem .75rem !important;
	font-size: 0.85rem;
	color: var(--gray3);
	font-weight: 600;
}

.form-floating>.form-control:focus~label{
	font-size: 0.85rem;
	color: var(--gray3) !important;
	font-weight: 600;
}

/* .container-buttons{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: .7rem
} */

#content{
	gap: 0.7rem;
	padding: 0 2.1rem
}

.button, .secondary-button{
	font-size: 1.12rem;
	font-weight: bold;
	border-radius: 1.05rem;
	padding: 0.9rem 0;
}

.forgot-password{
	font-size: 1rem;
	color: var(--gray3)
}

.forgot-password:hover{
	color: var(--gray3);
	text-decoration: underline;
}

.register{
	margin-top: .5rem;
	font-size: 1.07rem;
	a{		
		color: var(--secondary-color);
		text-decoration: underline;
		font-size: 1rem;
	}
	a:hover{
		color: var(--secondary-color);
		text-decoration: underline;
	}
}

.form-control{
	border-radius: 1.05rem;
	height: 5.25rem !important;
}

.form-control:-webkit-autofill{
    -webkit-box-shadow: 0 0 0 2.8rem white inset !important;
	-webkit-text-fill-color: var(--gray3) !important;
	transition: background-color 5000s ease-in-out 0s;
}

.form-control:focus {
    outline: none !important;
	box-shadow: none !important;
	-webkit-box-shadow: 0 0 0 2.8rem white inset !important;
	-webkit-text-fill-color: var(--gray3) !important
}

input:-webkit-autofill {
    animation: autofill-fix 1s both;
}


.spinner-border{	
    border: var(--bs-spinner-border-width) solid transparent;
    border-right-color: var(--secondary-color);
	--bs-spinner-width: 4rem;
    --bs-spinner-height: 4rem;
    --bs-spinner-border-width: 0.4em;
}

@keyframes autofill-fix {
    0% {
        -webkit-box-shadow: 0 0 0 2.8rem white inset;
    }
    100% {
        -webkit-box-shadow: 0 0 0 2.8rem white inset;
    }
}
/*--------------------------------- Login ---------------------------------*/

/*--------------------------- Esqueceu a Senha ----------------------------*/
.password-grid{
	display: grid;
	grid-template-columns: 1fr 2fr;
	.edit-container{
		grid-template-columns: 3fr 4fr;
	}
}

.background{
	background: linear-gradient(
								to bottom,
								rgba(224, 227, 249, 0.18) 0%,
								rgba(224, 227, 249, 0.58) 35%,
								rgba(224, 227, 249, 1) 73%
								);
}

.edit-container{
	/* display: grid; */
	/* grid-template-columns: 2fr 4fr; */
	align-items: center;
	justify-content: center;
	.guide, .form{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 80%;
	}
	.stepper{
		display: flex;
		flex-direction: column;
	}
}

.step-vertical{
	display: flex;
}

.container-step-vertical-icon{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.step-vertical-icon{	
	transition: all 1s ease-in-out;
}

.bi-record-circle, .bi-circle, .bi-check-circle-fill{
	color: var(--gray2);
	line-height: 0;
	transition: all .2s ease-in-out;
}

.line{
	width: .035rem;
	background-color: var(--gray3);
	height: 100%;
}

.step-vertical-content{
	padding-right: 1rem;
	padding-left: 1rem;
	min-height: 6.3rem; 
	max-height: 12.6rem;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: start;
	.title{
		color: var(--gray1);
		font-size: 1.1rem;
		font-weight: 600;
		margin: 0;
	}
	.subtitle{
		color: var(--gray3);
		font-size: .9rem;
		font-weight: 500;
		padding-bottom: 1.5rem;
	}
}

.type-service-container{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .7rem;
}

#divDadosCadastraisServicosProdutos{
	display: flex;
	flex-direction: column;
	gap: .7rem
}

.guide{
	border-right: .07rem solid var(--gray4)
}

/* .form{
	padding: 0 2.8rem;
	border-left: .07rem solid var(--gray4)
} */

/* #divSenha .container-input{
	width: 100%;
} */

.container-input{
	display: flex;
	flex-direction: row;
	button{
		color: var(--gray2);
		background-color: white;
		border: none;
		border-radius: 0 1.05rem 1.05rem 0;
		border-top: .07rem solid var(--gray4);
		border-right: .07rem solid var(--gray4);
		border-bottom: .07rem solid var(--gray4);
		i{
			font-size: 1.5rem;			
		}
	}
	button:hover, button:active{
		background-color: white !important;
		border-top: .07rem solid var(--gray4) !important;
		border-right: .07rem solid var(--gray4) !important;
		border-bottom: .07rem solid var(--gray4) !important;
		color: inherit !important;
	}
}

.form-floating.action {
	width: 100%;
	.form-control{
		border-right: none;
		border-top-right-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}
}
/*--------------------------- Esqueceu a Senha ----------------------------*/

/*------------------------------ Cadastrar -------------------------------*/
.container-term{
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 100vh;
	form{
		padding: 4.2rem 10.5rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		color: var(--gray2);
		h5{
			font-size: 1.6rem;
		}
		p{
			font-size: 1rem;
		}
	}
}

#divTermo{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center
}

.terms-link{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	a{
		font-size: 1.15rem;
		color: var(--gray1);
		font-weight: 600;
	}
}

.term{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.info-message {
	display: none; /* Inicialmente oculta */
	background-color: var(--white);
	padding: 1.05rem 1.75rem;
	border-radius: 1.05rem;
	margin-top: .35rem;
	font-size: 1em;
	color: var(--black2);
}

.step-content.grid, #divPessoaFisica, #divPessoaJuridica{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.4rem 0.7rem;
}

#divDadosCadastraisTipoPessoa{
	gap: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: start;
    min-height: 21rem;
}

.notification-container{
	position: fixed;
	right: 2.8rem;
	z-index: 50;
	bottom: 10%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.error-toast{
	width: 24.5rem;
	border-left: .35rem solid var(--error-color);
	display: flex;
	flex-direction: row;
	gap: 2.1rem;
	border-radius: 1.05rem;
	background-color: rgba(255, 255, 255, .95);
	padding: 0.7rem;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	i{
		color: var(--error-color);
        font-size: 2.8rem;
		line-height: 1;
		vertical-align: middle;
	}
	h3{
        font-weight: 600;
        text-transform: uppercase;
        font-size: 1.2rem;
        margin: 0 !important;
	}
}

.error-input>input{
	border: solid .07rem var(--error-color) !important;
}

.action.error-input>input{
	border-right: none !important;
}

.action.error-input + button{
	border-top: solid .07rem var(--error-color) !important;
	border-right: solid .07rem var(--error-color) !important;
	border-bottom: solid .07rem var(--error-color) !important;
}

.required{
	color: var(--error-color);
}

.type-account, .type-service{
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: .7rem;
	input[type='radio']{
		transform: scale(1.5);
    	accent-color: var(--gray4) !important;
	}
	label{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: start;
		gap: .7rem;
		.title{			
			font-weight: 600;
			color: var(--gray4);
		}
		small{
			color: var(--gray5);
		}
	}
	.form-card-content{
		display: flex;
		flex-direction: column;
	}
}

#divOpcoesEnvio{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: 34.3rem;
    gap: 4.2rem;
	.validate-row{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 1.4rem;
	}
	i{
		color: var(--purple2);
		font-size: 3.5rem;
	}
	span{
		color: var(--black2);
		font-weight: 600;
		font-size: 1.1rem;
	}
	.container-check{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: start;
		color: var(--black2);
		gap: 0.7rem;
		margin-left: 1.4rem;
		min-height: 2.6rem;
		flex-wrap: wrap;
	}
	#token{
		width: 28rem;
	}
	a{
		color: var(--purple5);
		font-size: 1.1rem;
		font-weight: 600;
		text-decoration: underline;
		margin-bottom: .35rem;
		width: 100%;
		text-align: end;
		display: block;
	}
	#status{
		color: var(--purple5);
		i{
			font-size: 1.1rem;
			line-height: 1;
			vertical-align: middle;
		}
	}
	input[type='radio']{
		accent-color: var(--secondary-color);
		height: 1.2rem;
        width: 1.2rem;
	}
	a.disabled, .disabled #status{
		color: var(--gray4);
		pointer-events: none;
	}

	.send-token{
		font-size: .9rem;
		padding: .7rem;
		width: 8.5rem;
		i{
			font-size: 1rem;
			line-height: 1;
			vertical-align: middle;
		}
	}
	#status .spinner-border{
		--bs-spinner-width: 1.1rem;
		--bs-spinner-height: 1.1rem;
		--bs-spinner-border-width: 0.1em;
	}
	button .spinner-border{
		--bs-spinner-width: 1rem;
		--bs-spinner-height: 1rem;
		--bs-spinner-border-width: 0.1em;
	}

}
.form-floating.disabled>input{
	cursor: not-allowed;
}

#divSenha{
	gap: .35rem;
	.progress{
		margin-top: 1.4rem;
	}
}


#tip {
	display: flex;
	flex-direction: column;
	span{
		color: var(--gray2);
		font-weight: 600;
	}
	.checked{
		color: var(--success-color);
	}
}
#divResultado{
	.success, .error{
		display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        justify-content: space-between;
        align-items: center;
		i{
			font-size: 5rem;
		}
	}
	.success i{
		color: var(--success-color);
	}
	.error i{
		color: var(--error-color);
	}

}

.container-buttons button.disabled-force{
	background-color: var(--gray4) !important;
    color: var(--gray3) !important;
    border-color: var(--gray4) !important;
    cursor: not-allowed;
	pointer-events: none;
}

.invalid-feedback a{
	font-size: .875em;
    color: var(--bs-form-invalid-color);
	text-decoration: underline;
}

.modal.show{
	display: flex !important;
	justify-content: center;
}
/*------------------------------ Cadastrar -------------------------------*/

@media (max-width: 1500px) {
	.background{
		display: none;
	}
	.password-grid, .grid-register{
		grid-template-columns: 1fr;
	}
	.container-term{
		form{
			padding: 4.2rem 4rem;
		}
	}
	.grid-register .infos{
		display: none;	
	}
}

@media (max-width: 1400px) {
	.login-container{
		grid-template-columns: 1fr 1fr;
	}
	.content{
		width: 100%;
	}
}

@media (max-width: 1024px) {
	.login-container, .container-term{
		grid-template-columns: 1fr;
	}
	.infos{
		display: none;
	}
	.guide{
		padding: 0 2rem;
	}
}

@media (max-width: 800px) {
	.edit-container{
		.form{
			padding: 0 .8rem;
		}
	}
}

@media (max-width: 768px) {
	.edit-container{
		grid-template-columns: 1fr 1fr;
	}
	.step-content.grid, #divPessoaFisica, #divPessoaJuridica{
		display: flex;
		flex-direction: column;
		gap: .7rem;
	}
	#divOpcoesEnvio{
		width: 100%;
		i{
			display: none;
		}
		#token{
			width: inherit;
		}
	}
}

@media (max-width: 600px) {
	.edit-container{
		display: flex;
		flex-direction: column;
		.guide, .form{
			border: none;
			width: 100%;
		}
	}
	.grid-register	.edit-container{
		grid-template-columns: 1fr;
		.guide{
			display: none;
		}
	} 
}