/*==========================================================================
  ADD BY MANU CONFIGURACION DE COLORES DE UTILS
  ==========================================================================*/
:root{
	/*LOADING*/
	--loading_overlay_background:rgba(55, 58, 71, 0.9); /*rgba(255,255,255,0.65);*/
	--loading_background_color: #6297d1; /*azul*//*#6CC24A;verde*/ /*#e51f2d;rojo*/ 
	
	/*MODAL*/
	--modal_overlay_background:rgba(55, 58, 71, 0.9); /*rgba(255,255,255,0.65);*/

	--modal_btn_close_color: #6297d1; /*#b58e33;*/
	--modal_btn_close_hover_color: #6297d1;; /*#b58e33;*/
		
	--modal_content_font_family:'CenturyGothic',Arial, sans-serif;
	--modal_content_color:#6297d1;
	--modal_content_background:#fff;
	--modal_content_border:#6297d1;
	--modal_content_border_radius: 1em;/*1.875 = 30px*/
	
	--modal_button_font_family:'CenturyGothic',Arial, sans-serif;
	--modal_button_color: #fff;
	--modal_button_background_color: #6297d1;
	--modal_button_border_color: #6297d1;
	--modal_button_border_radius: 0.6em;/*1em = 16px*/
	
	--modal_button_hover_color: #fff;
	--modal_button_hover_background_color: #6297d1;
	--modal_button_hover_border_color: #6297d1;
	
	/*COLORES DE LOS CAMPOS INVALIDOS DE UN FORMULARIO*/
	--form_invalid_field_background_color: #FFD9D9;
	--form_invalid_field_border_color: #909;
	
	/*COLORES DE LOS CAMPOS VALIDOS DE UN FORMULARIO*/
	--form_valid_field_background_color: #D9FFD9;
	--form_valid_field_border_color: #660;
	
	/*COOKIES*/
	--cookies_modal_font_family:'CenturyGothic',Arial, sans-serif;
	
	--cookies_modal_button_color: white;
	--cookies_modal_button_background_color: #6297d1;
	--cookies_modal_button_border_color: #6297d1;
	
	--cookies_modal_button_hover_color:#6297d1;
	--cookies_modal_button_hover_background_color:white;

	/*BTN IR ARRIBA*/
	--btn_gottop_color:#fff;
	--btn_gottop_background: #6297d1;
	--btn_gottop_hover_color:#fff;  	
	--btn_gottop_hover_background: #6297d1;	
	
	/*CHECKBOX / RADIO*/
	--input_checkbox_background_color: #fff; /*#eee*/	
	--input_checkbox_border_color: 1px solid #e5e5e5; /*#000;*/	 		
}

/*Utilizamos FontAwesome para el boton de cerrar y el boton de check*/
@font-face {
  font-family: 'FontAwesome';
  src: url('utilsfonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('utilsfonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('utilsfonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('utilsfonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('utilsfonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('utilsfonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-lg {font-size: 1.33333333em;line-height: 0.75em;vertical-align: -15%;}
.fa-2x {font-size: 2em;}
.fa-3x {font-size: 3em;}
.fa-4x {font-size: 4em;}
.fa-5x {font-size: 5em;}
.fa-fw {width: 1.28571429em;text-align: center;}
.fa-close:before {content: "\f00d";}
.fa-check:before {content: "\f00c";}
.fa-arrow-up:before {content: "\f062";}
/*disabled / enabled password*/
.fa-eye:before{content:"\f06e";}
.fa-eye-slash:before{content:"\f070";}

/*==========================================================================
  ADD BY MANU LOADER
  ==========================================================================*/  
#cargador {
	/*display: none;*/
	visibility:hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999999999;
	background: var(--loading_overlay_background);
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}

/*==== loading 1 ====*/
.loader1 {
	width: 100%;
	height: 50%;
	max-width: 140px;
	max-height: 140px;
	margin: -70px 0 0 -70px;
	z-index: 20;
	background-color: var(--loading_background_color);
	border-radius: 100%;
	-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
	animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
	 0% {-webkit-transform: scale(0)}
	 100% {-webkit-transform: scale(1.0);opacity: 0;}
}
@keyframes sk-scaleout {
	 0% {-webkit-transform: scale(0);transform: scale(0);}
	100% {-webkit-transform: scale(1.0);transform: scale(1.0);opacity: 0;}
}

/*==== loading 2 ====*/
.loader2 {
	width: 100px;
	height: 100px;
	border-top: 3px solid var(--loading_background_color); /*para solo ver  un cachito de la linea*/
	border-radius: 100%; /*lo hacemos redondo ya que width=height*/
	animation: spin 1s linear infinite; /*llamamos a la animacion creada abajo*/
}
@-webkit-keyframes spin{
	0%{-webkit-transform:rotate(0deg);transform: rotate(0deg);}
	100%{-webkit-transform:rotate(360deg);transform: rotate(360deg);}
}
@keyframes spin{
	0%{-webkit-transform:rotate(0deg);transform: rotate(0deg);}
	100%{-webkit-transform:rotate(360deg);transform: rotate(360deg);}
}

/*==== loading 3 ====*/
.loader3,.loader3::before,.loader3::after{
	width: 10px;
	height: 40px;
	background-color: var(--loading_background_color);
	animation: loading3 1s ease-in-out infinite;
}
.loader3{
	animation-delay:0.16s;
	-webkit-transform:translateY(0);
	transform: translateY(0);
	color:var(--loading_background_color);
}
/*los 2 palitos de antes y despues se colocan encima del palito ppal de ahi el position:absolute; y el top:0 supongo que sera por el content*/
.loader3::before,.loader3::after{
	content: '';
	position:absolute;
	top: 0;
}
/*movemos un palito a la izquierda y otro a la derehca 15px*/
.loader3::before{left: -15px;animation-delay:0.32s;}
.loader3::after{left: 15px;}
/*la animacion jugamos con la sombra*/
@keyframes loading3{
	0%,80%,100%{
		height:40px; /*height inicial de loader*/
		box-shadow: 0 0;
	}
	/*parece que salta*/
	40%{
		height:60px;
		box-shadow: 0 -20px;
	}
}

/*==== loading 4 ====*/
/*COMUN A LOS 3 bolitas*/
.loader4,.loader4::before,.loader4::after{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	animation: loading4 1.5s ease-in-out infinite; 
}
.loader4{
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	-webkit-transform:translateX(-50%) translateY(-50%) translateZ(0);
	color:var(--loading_background_color);
	animation-delay: 0.16s;
}

/*los 2 bolitas de antes y despues se colocan encima de la bolita ppal de ahi el position:absolute; y el top:0 supongo que sera por el content*/
.loader4::before,.loader4::after{
	position:absolute;
	top: 0;	
	content: '';
}
/*movemos un bolita a la izquierda y otro a la derehca 56px*/
.loader4::before{left: -56px;animation-delay: 0.32s;}
.loader4::after{left: 56px;}
@keyframes loading4{
	0%, 80%, 100%{
		box-shadow: 0  40px  0  -20px;/*40px lo que mide el .loader*/
	}
	40%{
		box-shadow: 0  40px  0  0;
	}
}

/*==========================================================================
  ADD BY MANU DIALOG
  ==========================================================================*/
  
.dialog,
.dialog__overlay {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.dialog {
	position: fixed;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	pointer-events: none;
	z-index:2147483647;
}

.dialog__overlay {
	position: absolute;
	z-index: 1;
	background: var(--modal_overlay_background);
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-backface-visibility: hidden;
}

.dialog--open .dialog__overlay {
	opacity: 1;
	pointer-events: auto;
}

.dialog__content {
	width: 90%;
	max-width: 30rem;
	min-width: 18.125rem;
	background: var(--modal_content_background);
	padding: 3rem;
	text-align: center;
	position: relative;
	z-index: 5;
	opacity: 0;
	border: 1px solid var(--modal_content_border);
	border-radius: var(--modal_content_border_radius);
	overflow: hidden;
	box-sizing: border-box;
	font-weight: 400;
	font-size: 1.375rem ; /*por si hay font-size aplicado al body 22px;*/
	line-height:1.5rem; /*por si hay line-height aplicado al body 32px;*/
}
.dialog--open .dialog__content {
	pointer-events: auto;
}

/* Content */
/* Content TITULAR, Content MENSAJE */
.dialog h2,.dialog #titModal,.dialog #msgModal  {
	font-family: var(--modal_content_font_family);
	padding: 0 0 0.7em;
	margin: 0;
	text-align: left;
	color:var(--modal_content_color);
}

/* Content TITULAR */
.dialog #titModal{
	font-size: 1.875rem; /*30px;*/
}

.dialog__overlay {
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.dialog.dialog--open .dialog__content,
.dialog.dialog--close .dialog__content {
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.dialog.dialog--open .dialog__content {
	-webkit-animation-name: anim-open;
	animation-name: anim-open;
	-webkit-animation-timing-function: cubic-bezier(0.7,0,0.3,1);
	animation-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.dialog.dialog--close .dialog__content {
	-webkit-animation-name: anim-close;
	animation-name: anim-close;
}

.dialog.dialog--open h2,
.dialog.dialog--open button {
	-webkit-animation: anim-elem 0.4s both;
	animation: anim-elem 0.4s both;
}

.dialog.dialog--open h2 {
	-webkit-animation-delay: 0.25s;
	animation-delay: 0.25s;
}

.dialog.dialog--open button {
	-webkit-animation-delay: 0.15s;
	animation-delay: 0.15s;
}

@-webkit-keyframes anim-open {
	0% { opacity: 0; -webkit-transform: translate3d(0, -400px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}

@keyframes anim-open {
	0% { opacity: 0; -webkit-transform: translate3d(0, -400px, 0); transform: translate3d(0, -400px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes anim-close {
	0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
	100% { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); }
}

@keyframes anim-close {
	0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	100% { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); }
}

/* Inner elements animations */

@-webkit-keyframes anim-elem {
	0% { opacity: 0; -webkit-transform: translate3d(0, -100px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}

@keyframes anim-elem {
	0% { opacity: 0; -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

/* DIALOG BUTTONS */
.dialog__content .btn-top-container{
  display:flex;
  justify-content:flex-end;
}

.dialog__content .btn-top-container .btn-close{
  font-size:1.375rem;	
  color: var(--modal_btn_close_color);
  text-decoration:none;
}

.dialog__content .btn-top-container .btn-close:hover{
  color: var(--modal_btn_close_hover_color);
}

.dialog__content .btn-bottom-container{
  display:flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  
}

.dialog__content .btn-bottom-container .btn-generico {
	flex-basis:0;
  	flex-grow:1;
	margin: 0 0.25em;
    text-decoration: none;
    padding: .7em 1.7em;
	cursor: pointer;
    font-size: 1.5625rem;/*25px*/
	color: var(--modal_button_color);
	background: var(--modal_button_background_color);
	border: 1px solid var(--modal_button_border_color);
    border-radius: var(--modal_button_border_radius);
	font-family: var(--modal_button_font_family);
	box-sizing: border-box;
}
.dialog__content .btn-bottom-container .btn-generico:hover {
	color: var(--modal_button_hover_color);
    background: var(--modal_button_hover_background_color);
	border: 1px solid var(--modal_button_hover_border_color);
}

/* DIALOG LINK */
.link-generico {
    font-size: 1.42rem
}

/*DIALOG PARA MOVIL nota trabajo con rem a los font-size para que mantenga el tamaño por si establce un font-size en el body segun el viewport*/
@media screen and (max-width:768px) {
	.dialog__content{
	  box-sizing: border-box;
	  padding:1.5rem;
	  line-height:1rem;
	  font-size:0.875rem;
	}
	.dialog #titModal{
		font-weight: bold !important;
		font-size: 1.2rem !important;
	}
	
	.dialog__content .btn-bottom-container .btn-generico{
		font-size:0.875rem;
	}
}

/*==========================================================================
ADD BY MANU VALIDACION FORMULARIOS HTML5
==========================================================================*/

/* // [START invalidstyle] */
/*Si voy tabulando o pongo el foco y el campo es invalid, me lo marca*/
input:focus:invalid ,select:focus:invalid ,textarea:focus:invalid {
	border: 1px solid var(--form_invalid_field_border_color) !important;  
    background-color: var(--form_invalid_field_background_color) !important;
}
input:focus:valid ,select:focus:valid ,textarea:focus:valid {
	border: 1px solid var(--form_valid_field_border_color) !important;  
    background-color: var(--form_valid_field_background_color) !important;
}
/*Cuando hago click en el boton de submit (ya sea enlace,button o input)*/
input.dirty:not([type="submit"]):invalid ,select.dirty:invalid ,textarea.dirty:invalid { 
  border: 1px solid var(--form_invalid_field_border_color) !important;
  background-color: var(--form_invalid_field_background_color) !important;
}
input.dirty:not([type="submit"]):valid ,select.dirty:valid ,textarea.dirty:valid { 
  border:1px solid var(--form_valid_field_border_color) !important;
  background-color: var(--form_valid_field_background_color) !important;
}

/*=====================================================================*/
/*CASO CUSTOM: checkboxes / radios necesitamos "tunearlos" para poder validarlos*/
/*=====================================================================*/

/*ANTES
.checkboxs input[type="checkbox"]{
	display: none;
}

.checkboxs input[type="checkbox"] + label  span {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 10px 10px 0 0;
  vertical-align: middle;
  background-size: cover;
  cursor: pointer;
  border: 1px solid #CCCCCC;
  border-radius: 2px;
}

.checkboxs input[type="checkbox"]:checked + label  span {
  background: url(../img/utils/check.png);
  background-size: cover;
}

.checkboxs input[type="checkbox"] + label  span.dirty{
  border: 1px solid var(--form_invalid_field_border_color);
  background-color: var(--form_invalid_field_background_color);
}

.checkboxs input[type="checkbox"] + label  span.clean{
  border:1px solid var(--form_valid_field_border_color);
  background-color: var(--form_valid_field_background_color);
}

.checkboxs_label {
    width: 5% !important;
}
@media only screen and (max-width: 576px) and (min-width: 320px) {
  .checkboxs_label {
    width: 10% !important;
  }
}
*/

/*### COMUN*/
/*label contenedor del checkbox / Radio */
.checkcontainer{
	/*display: block;*/
	position: relative;
	padding-left: 35px;/*para que se ve el texto a la derecha*/
	cursor: pointer;
}

/*##### CHECKBOX */

/*ocultamos el checkbox real*/
.checkcontainer input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/*pintamos el recuadro del checkbox*/
.checkcontainer .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 18px;
	width: 18px;
	background-color: var(--input_checkbox_background_color);
	border:var(--input_checkbox_border_color);
}

/*pintamos el tick por defecto oculto, pues el checkbox NO ESTA CHEQUEADO. Si checkbox chequeado, se ve.*/
.checkcontainer .checkmark::after{
	content: "";
	position: absolute;
	display:none;
	
	left: 4px;
	/*top: 6px;*/
	width: 7px;
	height: 12px;
	border: 1px solid black;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

/*checkbox chequeado. Muestro el tick*/
.checkcontainer input[type="checkbox"]:checked ~ .checkmark::after{
	display:block;
}

/*checkbox NO chequeado que sea required: lo pongo rojo*/
.checkcontainer .checkmark.required.dirty {
	border-color: var(--form_invalid_field_border_color) !important;
	background-color: var(--form_invalid_field_background_color) !important;
}
/*checkbox chequeado que sea required: lo pongo verde*/
.checkcontainer input:checked ~ .checkmark.required {
	border-color:var(--form_valid_field_border_color) !important;
	background-color: var(--form_valid_field_background_color) !important;
}

/*##### RADIO */
/*pintamos el circulo del radio*/
.checkcontainer .radiobtn {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 50%;
	border:1px solid #000;
}

/*ocultamos el radio real*/
.checkcontainer input[type="radio"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/*pintamos el circulo por defecto oculto, pues el radio NO ESTA CHEQUEADO. Si radio chequeado, se ve.*/
.checkcontainer .radiobtn::after {
    content: "";
    position: absolute;
    display: none;
	
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: black;
	color:#000;
	
}

/*radio chequeado. Muestro el tick*/
.checkcontainer input[type="radio"]:checked ~ .radiobtn::after {
    display: block;
}

/*radio NO chequeado que sea required: lo pongo rojo*/
.checkcontainer .radiobtn.required.dirty {
	border-color: var(--form_invalid_field_border_color) !important;
	background-color: var(--form_invalid_field_background_color) !important;
}
/*radio chequeado que sea required: lo pongo verde. NOTA IMPORTANTE: aqui uso valid, pq conque este seleccionado uno los demas se deben poner en verde*/
.checkcontainer input[type="radio"]:valid ~ .radiobtn.required {
	border-color:var(--form_valid_field_border_color) !important;
	background-color: var(--form_valid_field_background_color) !important;
}

/*=====================================================================*/
/*CASO CUSTOM: input files SOLO CON EL BOTON*/
/*=====================================================================*/

.fieldInputFile label.dirty{
	color:var(--form_invalid_field_border_color); /*!important;*/
	border-color:var(--form_invalid_field_border_color) !important;
	background-color: var(--form_invalid_field_background_color) !important;
}

.fieldInputFile label.clean{
	color:var(--form_valid_field_border_color); /*!important;*/
	border-color:var(--form_valid_field_border_color) !important;
	background-color: var(--form_valid_field_background_color) !important;
}

/* // [END invalidstyle] */

/*==========================================================================
ADD BY MANU FALDON DE COOKIES
==========================================================================*/

#cookies-aviso {
  display: none;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 200;
  background: white;
  padding: 1.4880952381vw 1.4880952381vw 1.4880952381vw 1.4880952381vw;
  
  font-family: var(--cookies_modal_font_family);
  font-size: 15px;
  text-align: center;
}
#cookies-aviso .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

#cookies-aviso .content #cookies-close {
  padding: 0.8928571429vw 1.1904761905vw;
  white-space: nowrap;
  cursor: pointer;
  background: var(--cookies_modal_button_background_color);
  color: var(--cookies_modal_button_color);
  border: 1px solid var(--cookies_modal_button_border_color);
  transition: all 0.3s;
}
#cookies-aviso .content #cookies-close:hover {
  background: var(--cookies_modal_button_hover_background_color);
  color: var(--cookies_modal_button_hover_color);
}
#cookies-aviso .content p {
  padding-bottom: 30px;
}

@media only screen and (min-width: 1024px) {
  #cookies-aviso .content {
    flex-direction: row;
  }
  #cookies-aviso .content p {
    padding-bottom: 0;
    padding-right: 20px;
    text-align: left;
  }
}

/*==========================================================================
  ADD BY MANU BOTON SUBIR ARRIBA
  ==========================================================================*/

#go-top {
	position: fixed;
	bottom: 42px;
	right: 30px;
	z-index: 700;
	display: none;
}

#go-top a {
	text-decoration: none;
	border: 0 none;
	display: block;
	height: 63px;
	width: 60px;
	line-height: 63px;
	text-align: center;
	background-color: var(--btn_gottop_background); /*#000000;*/
	color: var(--btn_gottop_color);
	text-align: center;
	text-transform: uppercase;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#go-top a i {
	font-size: 21px;
	line-height: inherit;
}

#go-top a:visited {
	background: var(--btn_gottop_background); /*#000000;*/
	color: var(--btn_gottop_color);
}

#go-top a:hover,
#go-top a:focus {
	background: var(--btn_gottop_hover_background);
	color: var(--btn_gottop_hover_color);
}

@media only screen and (max-width:768px) {
	#go-top {
		bottom: 0;
		right: 0;
	}
}

/*==========================================================================
  ADD BY MANU ENABLE / DISABLE INPUT 
  https://www.javascripttutorial.net/javascript-dom/javascript-toggle-password-visibility/
  ==========================================================================*/
.togglePassword-container{
  display: flex !important;
  flex-direction:row;
  align-items: center;/*alineacion vertical*/
}
.togglePassword{
	cursor: pointer;
	margin-left: -1.6rem; /*-25px;*/
	display:inline-flex !important;
}

@media screen and (max-width:500px) {
	.togglePassword-container{
		display: block !important;
		margin:0 !important;
 		padding:0 !important;
  		width:100% !important;
	}
	.togglePassword-container input{
		float:left;
	}
	.togglePassword{
		float:right;
		position:absolute;
		margin-top: 5px;
	}
}