@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Varela+Round&display=swap');
@charset "UTF-8";

* {border: 0;margin: 0;padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, main, time, mark, audio, video {margin: 0;padding: 0;outline: 0;border: 0;background: transparent;vertical-align: baseline;word-wrap: break-word;font-size: 100%;}
html,
body {background-color: #f8f8f8;font-family: 'Varela Round', sans-serif;font-weight: 400;font-style: normal;min-width: 320px;}
html {font-size: 16px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
body {position: relative;overscroll-behavior: none;}
a {color: #333;}
a,
a:link,
a:hover {text-decoration: none;outline: none;}
a:hover {color: #faa920;}
a.link {text-decoration: underline;}
a.link:hover {color: #1577d2;}
.link {cursor: pointer;text-decoration: underline;}
.link:hover {color: #f9b238;}
div {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
img {border: 0px;display: block;width: 100%;}
video {
	-o-object-fit: contain;
	object-fit: contain;
}
p {font-size: 14px;margin-bottom: 17px;}
h1, h2, h3, h4, h5, h6 {font-size: 100.01%;font-weight: 900;}
ul, ol, li {list-style-image: none;list-style-type: none;}
svg.left {margin-right: 5px;}
svg.right {margin-left: 5px;}
input, select, select option, textarea {background-color: #fff;color: #333;font-family: 'Varela Round',sans-serif;font-weight: 400;font-style: normal;font-size: 1.125rem;padding: 13px 20px;width: 100%;
    outline: none;
    box-sizing: border-box;
    border-radius: 3px;
}
.full_height {height: 100vh;}
.clear, .Clear {clear: both;}
.clear_hard::after {content: '';clear: both;display: block;}
.display {display: block !important;}
.fleft {float: left;}
.fright {float: right;}
.bold {font-weight: bold;}
.italic {font-style: italic;}
.underline {border-bottom: 1px solid;}
.highlight {color: #FFF;background-color: #333;}
.p20 {padding: 20px;}
.pt5 {padding-top: 5px;}
.pt10 {padding-top: 10px;}
.pt20 {padding-top: 20px;}
.pr5 {padding-right: 5px;}
.pr10 {padding-right: 10px;}
.pr20 {padding-right: 20px;}
.pl5 {padding-left: 5px;}
.pl10 {padding-left: 10px;}
.pl10 {padding-left: 10px;}
.mb0 {margin-bottom: 0!important;}
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mt5 {margin-top: 5px;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mr10 {margin-right: 10px;}
.mr10 {margin-right: 10px;}
.mr20 {margin-right: 20px;}
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.ml10 {margin-left: 10px;}
.ml20 {margin-left: 20px;}
.w50 {width: 50%;}
.mw50 {width: 50%;}
.w100 {width: 100%;}
.obligatory {color: #d80015;}
.parent {position: relative;}
.mobile {display: block !important;}
.laptop {display: none !important;}
.tCenter {text-align: center !important;}
.tRight {text-align: right;}

.ko{background-color:red;}
.ok{background-color:green;}


/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

GENERAL

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*----------------------------------------------------------------------------------- 
BUTTONS
-----------------------------------------------------------------------------------*/
.btn {cursor: pointer;font-family: 'Varela Round', sans-serif;font-weight: 700;position: relative;
	border-radius: 5px;
	display: -webkit-box;
    display: -ms-flexbox;
	display: inline-flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}
.btn.disabled {background-color: #e9e9e9!important;pointer-events: none;}
.btn::after {content: '';display: block;clear: both;}
.btn svg {vertical-align: top;}
.btn.graphic_simple svg {margin: 0;}
.btn.graphic svg {margin: 0 10px 0 0;}
.btn.graphic_right svg {margin: 0 0 0 10px;left: inherit;right: 16px;}
.btn:hover {background-color: #06c18a;color: #fff;}
.btn.white:hover {background-color: #06c18a;color: #fff;}
.btn.white:hover svg {fill: #fff;}
.btn.grey:hover {background-color: #06c18a;color: #fff;}
.btn.grey:hover svg {fill: #fff;}
.btn.soft_grey:hover {background-color: #06c18a;color: #fff;}
.btn.soft_grey:hover svg {fill: #fff;}
.btn.black:hover {background-color: #06c18a;color: #fff;}
.btn.black:hover svg {fill: #fff;}
.btn.blue:hover {background-color: #06c18a;color: #fff;}
.btn.blue:hover svg {fill: #fff;}
.btn.red:hover {background-color: #06c18a;color: #fff;}
.btn.red:hover svg {fill: #fff;}
.btn.orange:hover {background-color: #06c18a;color: #fff;}
.btn.orange:hover svg {fill: #fff;}
.btn:hover svg {fill: #fff;}
.btn.wide {width: 100%;}
.btn.center {text-align: center;}
.btn.small {font-size: 12px;line-height: 10px;padding: 12px 12px;}
.btn.med {font-size: 16px;line-height: 14px;padding: 16px 16px;}
.btn.big {font-size: 18px;line-height: 16px;padding: 16px 20px;}
.btn.xbig {font-size: 22px;line-height: 20px;padding: 15px 20px;}
.btn.small.graphic_simple {padding: 10px;}
.btn.med.graphic_simple {padding: 12px;}
.btn.big.graphic_simple {padding: 15px;}
.btn.graphic_simple.small svg, .btn.graphic.small svg, .btn.graphic_right.small svg {width: 12px;height: 12px;}
.btn.graphic_simple.med svg, .btn.graphic.med svg,  .btn.graphic_right.med svg {width: 14px;height: 14px;}
.btn.graphic_simple.big svg, .btn.graphic.big svg, .btn.graphic_right.big svg {width: 20px;height: 20px;}
.btn.white {background-color: #fff;color: #333;}
.btn.white svg {fill: #333;}
.btn.grey {background-color: #747474;color: rgb(255, 255, 255);}
.btn.grey svg {fill: #fff;}
.btn.soft_grey {background-color: #d8d8d8;color: #272727;}
.btn.soft_grey svg {fill: #272727;}
.btn.black {background-color: #333;color: #fff;}
.btn.black svg {fill: #fff;}
.btn.blue {background-color: #1577d2;color: #fff;}
.btn.blue svg {fill: #fff;}
.btn.red {background-color: #e4251c;color: #fff;}
.btn.red svg {fill: #fff;}
.btn.orange {background-color: #faa920;color: #fff;}
.btn.orange svg {fill: #fff;}
.btn.green {background-color: #06c18a;color: #fff;}
.btn.green svg {fill: #fff;}
.btn.transparent {border: 2px solid #fff;background-color: transparent;color: #fff;}
.btn.transparent svg {fill: #fff;}
.btn.transparent:hover {background-color: #06c18a;border-color: #06c18a;color: #fff;}
.btn.transparent:hover svg {fill: #fff;}
.btn.local_color {background-color: #e60f45;color: #fff;}
.btn.local_color svg {fill: #fff;}
.btn.btn_toggle_on {background-color: #06c18a;color: #fff;}
.btn.btn_toggle_on svg {fill: #fff;}
.btn.btn_toggle_on:hover {background-color: #e60f45;color: #fff;}
.btn.btn_toggle_on:hover svg {fill: #fff;}
.btn_wrapper {
	display: flex;
	gap: 20px;
}
.btn_block {width: 100%;
	display: flex;
	align-items: center;
}
.btn_wrapper.btn_nav_wrapper .btn_block:last-child {
	justify-content: flex-end;
}

/*----------------------------------------------------------------------------------- 
FORM
-----------------------------------------------------------------------------------*/
form {position: relative;}
select {background: url('@/assets/images/iconmonstr-arrow-65.svg') no-repeat 98% center;background-size: 14px;background-color: #fff;border: solid 2px #dfdfdf;font-family: 'Varela round', sans-serif;font-size: 14px;line-height: 14px;padding: 15px 20px;width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
select.units {border: solid 2px #dfdfdf;font-size: 14px;padding: 10px 12px;}
input[type="number"] {outline: none;}
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}
.form {position: relative;}
.form .input_block {margin-bottom: 15px;}
.form .input_block:last-child {margin-bottom: 0;}
input[type='text'], input[type='password'], input[type='email'], select, textarea {border: solid 2px #cdcdcd;font-family: 'Varela round', sans-serif;padding: 10px 12px;width: 100%;outline: none;
  border-radius: 7px;
  box-shadow: inset 5px 5px 0 rgba(0,0,0,.07);
}
input[type='password'] {padding: 10px 40px 10px 12px;position: relative;}
label.checkbox_text {font-size: 13px;line-height: 13px;
	display: flex;
    align-content: center;
    align-items: center;
}
label.checkbox_text input {vertical-align: middle;}
textarea {padding: 10px 12px;resize: vertical;}
select {border: solid 3px #b4b4b4;}
input, textarea {border: solid 2px #9b9b9b;background-color: #fff;outline: none;}
.form input[type='checkbox'], .form input[type='radio'] {height: auto;margin: 0 5px 0 0;width: auto;
	-webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.form input[type='submit'] {
	-webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
input[type='file'] {background-color: #f0f0f0;border: none;padding: 0;width: 100%;
	border-radius: 5px;
	-webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.form input.ok, .form input.ok:focus, .form textarea.ok, .form textarea.ok:focus {border: solid 1px #9BEA9B;background-color: #F4FFF6;}
.form input.ko, .form input.ko:focus, .form textarea.ko, .form textarea.ko:focus {border: solid 1px #FFA2A2;background-color: #FBEEEE;}
.form button, .form input[type='submit'] {border: none;cursor: pointer;background-color: #777;color: #fff;font-family: 'Varela round', sans-serif;font-size: 16px;padding: 12px 15px;width: 100%;outline: none;
	border-radius: 7px;
}
.form button.active, .form input[type='submit'].active {background-color: #777;background-size: 20px;}
.form button:hover, .form input[type='submit']:hover, .form button:focus, .form input[type='submit']:focus {background-color: #06c18a;color: #fff;}
.form input:focus, textarea:focus, input[type='password']:focus, input[type='text']:focus {border-color: #999;}
.form .baloon {display: inline-block;position: absolute;left: 0px;text-align: center;top: -36px;z-index: 10;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}


/*----------------------------------------------------------------------------------- 
MESSAGE
-----------------------------------------------------------------------------------*/
.message {font-weight: 700;padding: 20px 25px;border-radius: 7px;
	display: flex;
    align-items: center;
    gap: 10px;
}
.message.message_big {padding: 20px 30px;
	gap: 20px;
	flex-direction: column;
}
.message p {font-size: 1.125rem;margin: 0;text-align: left;}
.message h2 {font-size: 2.5rem;margin-bottom: 0;}
.message p b {display: block;font-weight: 900;}
.message svg {width: 28px;height: 28px;}
.message.ok {background: #cdf5c8;}
.message.ok p {color: #06c18a;}
.message.ok svg {fill: #06c18a;}
.message.ko {background: #fdd;}
.message.ko p {color: #f00;}
.message.ko svg {fill: #f00;}
.message.info {background: #d3efff;}
.message.info p {color: #074e78;}
.message.info svg {fill: #074e78;}
.message_small p {font-size: 16px;}
.message_small svg {width: 18px;height: 18px;}
.message_med p {font-size: 18px;}
.message_big p {font-size: 24px;}
.message_big svg {width: 72px;height: 72px;}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ESTRUCTURA
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.wrapper {background-color: #f8f8f8;position: relative;width: 100vw;height: auto;
	display: flex;
	align-items: flex-start;
    justify-content: center;
}
.inner, .half_inner {margin: 0 20px;}
.content_block {position: relative;}
.box {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	align-items: center;
}
.box .box_block {width: 100%;}
.validator_text h2 {font-size: 1.75rem;margin-bottom: 20px;}
.validator_text h3 {font-size: 1.5rem;margin-bottom: 20px;}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
HEADER
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
header {margin-bottom: 20px;margin-top: 30px;}
header .logo {max-width: 290px;}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CONTENT
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.content_block {background-color: #fff;padding: 30px;
	border-radius: 10px;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.2)
}
.content_block h1 {font-size: 2rem;margin-bottom: 20px;}



/*----- DNI form -----*/
.dni_template {margin-bottom: 20px;margin: 0 auto 30px auto;max-width: 500px;}
.dni_template img {display: block;min-width: 100%;width: 100%;
    border-radius: 20px;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.4);
}
.dni_form {position: relative;z-index: 1;overflow: hidden;position: relative;max-width: 450px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.dni_form .input_block {margin-bottom: 3px;position: relative;}
.dni_form .input_block:first-child {width: 364px;}
.dni_form .input_block:nth-child(2) {width: 280px;}
.dni_form .input_block:nth-child(3) {width: 61px;}
.dni_form .input_block:nth-child(4) {width: 100%;}
.dni_form input {border: solid 3px #1B1CBB;background: #fff;font-family: 'IBM Plex Mono', monospace;font-size: 1.375em!important;font-weight: 500;height: 32px;padding: 0 2px 0 35px;position: relative;z-index: 1;
    -webkit-transition: all 0.5s cubic-bezier(.86,0,.07,1);
    -moz-transition: all 0.5s cubic-bezier(.86,0,.07,1);
    -o-transition: all 0.5s cubic-bezier(.86,0,.07,1);
    transition: all 0.5s cubic-bezier(.86,0,.07,1);
}
.dni_form input[type="text"] {text-transform: uppercase;
    border-radius: 0;
}
.dni_form .dni_input {position: relative;width: 100%;}
.dni_form .dni_input label {background-color: #1B1CBB;color: #fff;font-size: 1.125em;font-weight: 700;height: 31px;width: 36px;text-align: center;padding-top: 6px;position: absolute;left: 0;top: 0;z-index: 2;
    -moz-transition: all 0.5s cubic-bezier(.86,0,.07,1);
    -webkit-transition: all 0.5s cubic-bezier(.86,0,.07,1);
    -o-transition: all 0.5s cubic-bezier(.86,0,.07,1);
    transition: all 0.5s cubic-bezier(.86,0,.07,1);
}
.dni_form .form_text {border-bottom: solid 4px #e2af20;padding: 30px;}
.dni_form .form_text p:last-child {margin-bottom: 0;}
.dni_input input[type="text"]:disabled {background-color: transparent;border-color: #424242;}
.dni_input input[type="text"]:disabled::-o-input-placeholder {color: #424242;}
.dni_input input[type="text"]:disabled::-ms-input-placeholder {color: #424242;}
.dni_input input[type="text"]:disabled::-moz-placeholder {color: #424242;}
.dni_input input[type="text"]:disabled::-webkit-input-placeholder {color: #424242;}
.dni_input input[type="text"]:disabled + label {background-color: #424242;color: #5f5f5f;}
.dni_input input[type="text"].dni_ok {background-color: #d1ffcd;border-color: #4cd640;}
.dni_input input[type="text"].dni_ok + label {background-color: #4cd640;border-color: #4cd640;color: #fff;}
.dni_input input[type="text"].dni_ko {background-color: #fddddd;border-color: #d64040;}
.dni_input input[type="text"].dni_ko + label {background-color: #d64040;border-color: #d64040;color: #fff;}

.dni_input.second_line_first_group {float: left;width: 100%;margin-bottom: 15px;padding-right: 0;}
.dni_input.second_line_last_character {position: relative;float: left;right: 0;top: 0;}
.dni_input.second_line_last_character .pad {position: relative;}

/*----- placeholder -----*/
.form input::-o-input-placeholder {color: #cecece;}
.form input::-ms-input-placeholder {color: #cecece;}
.form input::-moz-placeholder {color: #cecece;}
.form input::-webkit-input-placeholder {color: #cecece;}
.form input:focus::-o-input-placeholder {color: transparent;}
.form input:focus::-ms-input-placeholder {color: transparent;}
.form input:focus::-moz-placeholder {color: transparent;}
.form input:focus::-webkit-input-placeholder {color: transparent;}
.form input:disabled::-o-input-placeholder {color: #000;}
.form input:disabled::-ms-input-placeholder {color: #000;}
.form input:disabled::-moz-placeholder {color: #000;}
.form input:disabled::-webkit-input-placeholder {color: #000;}

.dni_form input::-o-input-placeholder {color: #333;}
.dni_form input::-ms-input-placeholder {color: #333;}
.dni_form input::-moz-placeholder {color: #333;}
.dni_form input::-webkit-input-placeholder {color: #333;}
.dni_form input:focus::-o-input-placeholder {color: transparent;}
.dni_form input:focus::-ms-input-placeholder {color: transparent;}
.dni_form input:focus::-moz-placeholder {color: transparent;}
.dni_form input:focus::-webkit-input-placeholder {color: transparent;}
.dni_form input:disabled::-o-input-placeholder {color: #000;}
.dni_form input:disabled::-ms-input-placeholder {color: #000;}
.dni_form input:disabled::-moz-placeholder {color: #000;}
.dni_form input:disabled::-webkit-input-placeholder {color: #000;}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FOOTER
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

footer {margin-top: 20px;margin-bottom: 50px;padding: 0 10px;position: relative;
	display: flex;
	gap: 20px;
	flex-wrap: nowrap;
}
footer .footer_block {width: 50%;}
footer .footer_block.right_block {text-align: right;}
footer .footer_block p.legal {font-size: 0.625rem;}
footer .legal_logo {font-size: 0.625rem;text-align: right;width: 160px;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 10px;
    flex-direction: row;
}
footer .legal_logo:hover {color: #000;}


/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

RESPONSIVE

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media (min-width: 420px) {
	.half_inner {max-width: 480px;}
}

@media (min-width: 540px) {
    .dni_input.second_line_first_group {width: 100%;margin-bottom: 0;}
}

@media (min-width: 765px) {
	header .logo {
		max-width: 340px;
	}
}

@media (min-width: 960px) {
	.wrapper {
		height: 100vh;
		align-items: center;
		justify-content: center;
	}
	.inner {max-width: 960px;}
	.box {
		display: flex;
		gap: 20px;
		flex-wrap: nowrap;
		align-items: center;
	}
	.box .box_block {width: 50%;}
	.box .box_block h2 {font-size: 2.5rem;}
	.box .box_block h3 {font-size: 2rem;}
}