@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

.titleCertificate {
	font-weight: 700;
	font-size: 16px;
	padding-bottom: 19px;
	color: #008296;
}

.containerButtons {
	margin-left: auto;
	display: flex;
	gap: 16px;
	width: 276px;
	height: 41px;
}

.containerButtonsDos {
	margin-left: auto;
	display: flex;
	gap: 16px;
	width: 130px;
	height: 41px;
}

.formsCertificate {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 25px;
	padding: 16px;
	gap: 10px;
	background: #FFFFFF;
	box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.05);
	border-radius: 8px;
}

.formsLanguageCoverageCertificate {
	display: none;
}

.containerButtons .buttonClear {
	padding: 8px 12px;
	width: 130px;
	height: 41px;
	background: #FFFFFF;
	border: 1px solid #FEC82F;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	color: #25282D;
}

.containerButtons .buttonSearch,
.containerButtonsDos .buttonGenerate {
	padding: 8px 12px;
	width: 130px;
	height: 41px;
	background: #FEC82F;
	border: 0px solid #D1D3D8;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	color: #25282D;
}

.containerButtons .buttonSearchDisabled {
	padding: 8px 12px;
	width: 130px;
	height: 41px;
	background: #E9EAEC;
	border: 0px solid #D1D3D8;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	color: #6B7280;
}

.frameLanguageCertificate,
.frameCoverageCertificate {
	padding: 16px;
	width: 452.5px;
	height: 116px;
	background: #FFFFFF;
	box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.05);
	border-radius: 8px;
}

.labelLanguage,
.labelCoverage {
	height: 24px;
	font-weight: 700;
	font-size: 16px;
	line-height: 120%;
	color: #008296;
}



.groupRadios input[type=radio] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.checkmark {
	height: 18px;
	width: 18px;
	border: 1px solid #25282D;
	background-color: white;
	border-radius: 50%;
}


/* When the radio button is checked, add a blue background */

.groupRadios input:checked~.checkmark {
	border: none;
	background-color: #0097AE;
}


/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}


/* Show the indicator (dot/circle) when checked */

.groupRadios input:checked~.checkmark:after {
	display: block;
}


/* Style the indicator (dot/circle) */

.groupRadios .checkmark:after {
	margin-top: 4px;
	margin-left: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: white;
}

.frameLanguageCertificate .labelText {
	font-weight: 400;
	font-size: 14px;
	color: #6B7280;
}

.frameCoverageCertificate [type='radio'] {
	height: 20px;
	width: 16px;
	margin-top: auto;
}

.frameCoverageCertificate .labelText {
	font-weight: 400;
	font-size: 14px;
	color: #6B7280;
}

.svgLanguage {
	margin: 0 0 3px 1px;
}

.formsLanguageCoverageCertificate,
.containerButtonsDos {
	display: none;
}

/* Estilos para los mensajes de error */
.error-message {
	color: #C81E1D;
	font-size: 1rem;
	display: none;
	margin-top: -16px;
}

.show-error {
	display: block;
}

.certificateCaptcha .error-message {
	margin-top: -1px;
}

.frameCertificate .labelDocCertificate,
.labelNumDocCertificate {
	font-weight: 700;
	font-size: 12px;
	line-height: 120%;
	color: #40444D;
}

.error-input {
	background: #ffe7e7 !important;
	border-color: #ef7979 !important;
}

@media (min-width: 1140px) {
	.containerCertificate {
		width: 929px;
		height: 550px;
		margin: auto;
	}

	.formsCertificate {
		width: 929px;
		height: 220px;
	}

	.frameCertificate {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		width: 896px;
		height: 68px;
	}


	.frameCertificate .certificateSelect {
		width: 443px;
		height: 68px;
	}

	.certificateSelect .form-control:not([type='range']) {
		font-weight: 400;
		font-size: 16px;
		line-height: 120%;
		color: #6B7280;
	}

	.frameCertificate .form-control:not([type='range']) {
		padding: 12px 16px;
		width: 443px;
		height: 46px;
		border: 1px solid #E9EAEC;
		border-radius: 8px;
	}

	.certificateSelect select.form-control {
		background: no-repeat;
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.7656 8.7426C7.91558 8.89262 7.99983 9.09607 7.99983 9.3082C7.99983 9.52033 7.91558 9.72378 7.7656 9.8738L4.5656 13.0738C4.41558 13.2238 4.21214 13.308 4 13.308C3.78787 13.308 3.58443 13.2238 3.4344 13.0738L0.234404 9.8738C0.157996 9.8 0.09705 9.71173 0.0551228 9.61412C0.0131956 9.51652 -0.0088734 9.41154 -0.00979645 9.30532C-0.0107195 9.1991 0.00952169 9.09375 0.0497464 8.99544C0.0899711 8.89712 0.149374 8.8078 0.224488 8.73269C0.299602 8.65757 0.388924 8.59817 0.487241 8.55794C0.585558 8.51772 0.690902 8.49748 0.797125 8.4984C0.903348 8.49932 1.00832 8.52139 1.10593 8.56332C1.20353 8.60525 1.29181 8.66619 1.3656 8.7426L3.2 10.577V1.3082C3.2 1.09603 3.28429 0.892545 3.43432 0.742516C3.58435 0.592487 3.78783 0.508202 4 0.508202C4.21218 0.508202 4.41566 0.592487 4.56569 0.742516C4.71572 0.892545 4.8 1.09603 4.8 1.3082V10.577L6.6344 8.7426C6.78443 8.59262 6.98787 8.50837 7.2 8.50837C7.41214 8.50837 7.61558 8.59262 7.7656 8.7426Z" fill="%236B7280"/></svg>');
		background-position: right 20px center;
	}

	.frameCertificate .certificateDni {
		width: 443px;
		height: 68px;
	}

	.frameCertificateCaptcha {
		margin-top: 20px;
	}

	.formsLanguageCoverageCertificate {
		flex-direction: row;
		align-items: flex-start;
		margin: 25px 0 25px 0;
		gap: 24px;
		width: 929px;
		height: 116px;
	}

	.frameLanguageCertificate,
	.frameCoverageCertificate {
		width: 452.5px;
		height: 116px;
	}

	.groupRadios {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
		width: 420.5px;
		height: 49px;
	}

	.groupOne,
	.groupTwo {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		padding: 16px;
		gap: 6px;
		width: 202.25px;
		height: 49px;
		background: #F7F7F7;
		border-radius: 8px;
	}

	.frameLanguageCertificate [type='radio'] {
		height: 20px;
		width: 16px;
		margin-top: auto;
	}


}

@media (max-width: 1139px) {
	.containerCertificate {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.formsCertificate {
		align-items: center;
	}

	.frameCertificate {
		width: 80%;
	}

	.formsLanguageCoverageCertificate {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 25px 0 25px 0;
		gap: 24px;
	}
	
	.formsLanguageCoverageCertificate {
		display: none
	}

	.groupRadios {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		width: 320.5px;
		height: 49px;
	}

	.frameLanguageCertificate,
	.frameCoverageCertificate {
		height: 150px
	}

	.groupRadios {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16px;
		width: 420.5px;
		height: 60px;
	}

	.groupOne,
	.groupTwo {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 9px;
		gap: 6px;
		width: 202.25px;
		height: 70px;
		background: #F7F7F7;
		border-radius: 8px;
	}

	label {
		margin: 0px;
	}
}


@media (max-width: 767px) {

	.formsCertificate {
		align-items: center;
	}

	.frameCertificate {
		width: 95%
	}

	.frameLanguageCertificate,
	.frameCoverageCertificate {
		width: 350px;
		height: 180px;
	}

	.containerButtons,
	.containerButtonsDos {
		margin: 0px;
		width: 350px;
		justify-content: center;
	}

	.groupRadios {
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 300px;
		height: 100px;
	}

	.formsLanguageCoverageCertificate {
		display: none
	}
}

.selected {
	background-color: #E6F3F5;
}