/* Estilos para Create Form */

:root{
	--accent-color: var(--colorCabecera1);

	/* Default classes for nav-tabs */
	--default-line-height-base: 1.5;
	--default-border-radius-base: 4px;
	--default-border-color: #ddd;
	--default-nav-tabs-color: #000;
	--default-nav-tabs-link-hover-border-color: #eee;
	--default-nav-tabs-active-link-hover-color:#444;
	--default-nav-tabs-active-link-hover-bgc:#fff;
	--default-nav-tabs-active-link-hover-border-color:#ddd;

	--info-line-height-base: 1.5;
	--info-border-radius-base: 4px;
	--info-border-color: #0083a3;/*TWO BACK MAIN COLOR Bottom border <ul>*/
	--info-nav-tabs-color: #000;
	--info-nav-tabs-link-hover-border-color: #0098bd;/* ONE BACK MAIN COLOR Border color when hover tab */
	--info-nav-tabs-link-hover-bgc-rgba:rgba(0,172,214,0.1);/* MAIN color with alpha :: Background color tab when hover*/
	--info-nav-tabs-link-hover-color:#006f8a;/* THREE BACK MAIN COLOR Font color tab when hover*/
	--info-nav-tabs-active-link-hover-color:#f2f2f2;/* Font color when tab is active*/
	--info-nav-tabs-active-link-hover-bgc:#00acd6;/* MAIN color :: Background color when tab is active*/
	--info-nav-tabs-active-link-hover-bgc-rgba:rgba(0,172,214,0.7);/* MAIN color with alpha :: Background color when tab is active rgba*/
	--info-nav-tabs-active-link-hover-border-color:#0083a3;/* TWO BACK MAIN COLOR Border color when tab is active*/

	--success-line-height-base: 1.5;
	--success-border-radius-base: 4px;
	--success-border-color: #00733e;/*TWO BACK MAIN COLOR Bottom border <ul>*/
	--success-nav-tabs-color: #000;
	--success-nav-tabs-link-hover-border-color: #008d4c;/* ONE BACK MAIN COLOR Border color when hover tab */
	--success-nav-tabs-link-hover-bgc-rgba:rgba(0,166,90,0.1);/* MAIN color with alpha :: Background color tab when hover*/
	--success-nav-tabs-link-hover-color:#005a31;/* Font color tab when hover #3cbcab*/
	--success-nav-tabs-active-link-hover-color:#f2f2f2;/* Font color when tab is active*/
	--success-nav-tabs-active-link-hover-bgc:#00a65a;/* MAIN color :: Background color when tab is active*/
	--success-nav-tabs-active-link-hover-bgc-rgba:rgba(0,166,90,0.7);/* MAIN color with alpha :: Background color when tab is active rgba*/
	--success-nav-tabs-active-link-hover-border-color:#00733e;/* TWO BACK MAIN COLOR Border color when tab is active*/

	--warning-line-height-base: 1.5;
	--warning-border-radius-base: 4px;
	--warning-border-color: #c87f0a;/*TWO BACK MAIN COLOR Bottom border <ul>*/
	--warning-nav-tabs-color: #000;
	--warning-nav-tabs-link-hover-border-color: #e08e0b;/* ONE BACK MAIN COLOR Border color when hover tab */
	--warning-nav-tabs-link-hover-bgc-rgba:rgba(243,156,18,0.25);/* MAIN color with alpha :: Background color tab when hover*/
	--warning-nav-tabs-link-hover-color:#b06f09;/* THREE BACK MAIN COLOR Font color tab when hover*/ 
	--warning-nav-tabs-active-link-hover-color:#FFF;/* Font color when tab is active*/
	--warning-nav-tabs-active-link-hover-bgc:#f39c12;/* MAIN color :: Background color when tab is active*/
	--warning-nav-tabs-active-link-hover-bgc-rgba:rgba(243,156,18,0.7);/* MAIN color with alpha :: Background color when tab is active rgba*/
	--warning-nav-tabs-active-link-hover-border-color:#c87f0a;/* TWO BACK MAIN COLOR Border color when tab is active*/

	--danger-line-height-base: 1.5;
	--danger-border-radius-base: 4px;
	--danger-border-color: #9f2623;/*TWO BACK MAIN COLOR Bottom border <ul>*/
	--danger-nav-tabs-color: #000;
	--danger-nav-tabs-link-hover-border-color: #b42b27;/* ONE BACK MAIN COLOR Border color when hover tab */
	--danger-nav-tabs-link-hover-bgc-rgba:rgba(201,48,44,0.1);/* MAIN color with alpha :: Background color tab when hover*/
	--danger-nav-tabs-link-hover-color:#8a211e;/*THREE BACK MAIN COLOR Font color tab when hover*/
	--danger-nav-tabs-active-link-hover-color:#f2f2f2;/* Font color when tab is active*/
	--danger-nav-tabs-active-link-hover-bgc:#c9302c;/* MAIN color :: Background color when tab is active*/
	--danger-nav-tabs-active-link-hover-bgc-rgba:rgba(201,48,44,0.7);/* MAIN color with alpha :: Background color when tab is active rgba*/
	--danger-nav-tabs-active-link-hover-border-color:#9f2623;/* TWO BACK MAIN COLOR Border color when tab is active*/

	--accent-line-height-base: 1.5;
	--accent-border-radius-base: 4px;
	--accent-border-color: var(--colorHSLPlus2);/*TWO BACK MAIN COLOR Bottom border <ul>*/
	--accent-nav-tabs-color: #000;
	--accent-nav-tabs-link-hover-border-color: var(--colorHSLPlus1);;/* ONE BACK MAIN COLOR Border color when hover tab */
	--accent-nav-tabs-link-hover-bgc-rgba:var(--colorCabecera1RGBA1);/* MAIN color with alpha :: Background color tab when hover*/
	--accent-nav-tabs-link-hover-color:var(--colorHSLPlus3);/*THREE BACK MAIN COLOR Font color tab when hover*/
	--accent-nav-tabs-active-link-hover-color:var(--colorLetraCabecera);/* Font color when tab is active*/
	--accent-nav-tabs-active-link-hover-bgc:var(--colorCabecera1);/* MAIN color :: Background color when tab is active*/
	--accent-nav-tabs-active-link-hover-bgc-rgba:var(--colorCabecera1RGBA7);/* MAIN color with alpha :: Background color when tab is active rgba*/
	--accent-nav-tabs-active-link-hover-border-color:var(--colorHSLPlus2);/* TWO BACK MAIN COLOR Border color when tab is active*/
}

.auto-complete-list {
	border: 1px solid rgb(98, 98, 109) !important;
	box-shadow: 5px 5px 10px -1px rgb(98 98 109) !important;
	position: absolute;
	width: 90%;
	z-index: 999;
	background: #FFF;
	list-style-type: none;
}

.auto-complete-list li:hover {
	cursor: pointer;
	background-color: rgb(166, 166, 166) !important;
}

.required-span {
	color: red;
}

.h1-principal-header {
	margin: 0px !important;
	font-size: 24px !important;
}

.label-text-success {
	color: rgb(10, 131, 20);
}

.label-text-danger {
	color: rgb(129, 7, 7);
}
.label-text-warning {
	color: rgb(194, 194, 11);
}
.label-text-active{
	color: rgb(0, 0, 0);
}
.label-text-principal-color{
	color: var(--colorCabecera1);
}
.fieldset-border-custom{
	border: 1px solid #e5e5e5;
}
.legend-custom{
	width:auto!important;
	border-bottom: 0px !important;
	padding-top: 0px;
}
.panel-no-border {
	border: 0px !important;
}
.panel-no-background {
	background-color: transparent !important;
}
.accent-principal-color {
	accent-color: var(--colorCabecera1);
}

.no-margin-top-and-bottom{
	margin-top: 0px !important;
	margin-bottom: 0px !important;
}

.fsize-18rem{
	font-size: 1.8rem;
}

.full-width{
	width: 100%;
}

.link-button{
	cursor: pointer;
	color: #367fa9;
	text-decoration: underline;
	background-color: transparent;
	border: none !important;
	padding: 0 !important;
	font-family: inherit;
	font-size: inherit;	
}
.no-br{
	position: absolute;
	top: -25px;
}

/* autosize textarea to content [only works for textarea] */
.txa-autosize{
	field-sizing: content;
}

/* Clases para transformar texto */
.text-to-upper-case{
	text-transform: uppercase;
}
.text-to-lower-case{
	text-transform: lowercase;
}
.text-to-capitalize-case{
	text-transform: capitalize;
}

.show-as-plain-text {
	border: solid transparent !important;
	border-width: 1px 0 !important;	
	background-color: transparent !important;
}

.text-to-left {
	text-align: left !important;
}

.text-to-right {
	text-align: right !important;
}

/* For accordion type  */
.panel-heading .accordion-toggle:after {
	/* symbol for "opening" panels */
	font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
	content: "\e114"; /* adjust as needed, taken from bootstrap.css */
	float: right; /* adjust as needed */
	color: grey; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
	/* symbol for "collapsed" panels */
	content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}
/* For accordion type  */
/* Clases para mostrar info correcta y errores en multi_tags */
.has-success .multi-tags {
	border-color: #3c763d;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.has-error .multi-tags {
	border-color: #a94442;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
/* Clases para mostrar info correcta y errores en multi_tags */

/* Clases para tabs */
.nav-tabs-has-success{
	border-bottom: 1px solid var(--success-border-color) !important;
}
.nav-tabs-has-danger{
	border-bottom: 1px solid var(--danger-border-color) !important;
}
.nav-tabs > li.active > .a-li-active-has-success{
	/* color: #3c763d !important; */
	cursor: default;
	background-color: #fff;
	border: 1px solid #3c763d !important;
	border-bottom-color: transparent !important;
}
.nav-tabs > li.active > .a-li-active-has-danger{
	/* color: #a94442 !important; */
	cursor: default;
	background-color: #fff;
	border: 1px solid #a94442 !important;
	border-bottom-color: transparent !important; 
}
/* Classes for show success and error styles in tabs */
.nav-tabs-has-danger {
	border-bottom: 1px solid var(--danger-border-color) !important;
	> li {
		& a.text-success{
			color: var(--success-nav-tabs-link-hover-color) !important;
			&:hover {
				color:var(--success-nav-tabs-link-hover-color);
				border-color: var(--success-nav-tabs-link-hover-border-color) var(--success-nav-tabs-link-hover-border-color) var(--success-border-color);
				background-color: var(--success-nav-tabs-link-hover-bgc-rgba);
			}
		}
		& a.text-danger{
			color: var(--danger-nav-tabs-link-hover-color) !important;
			&:hover {
				color:var(--danger-nav-tabs-link-hover-color);
				border-color: var(--danger-nav-tabs-link-hover-border-color) var(--danger-nav-tabs-link-hover-border-color) var(--danger-border-color);
				background-color: var(--danger-nav-tabs-link-hover-bgc-rgba);
			}
		}
		&.active > a {
			&,
			&:hover,
			&:focus {
				color: var(--danger-nav-tabs-active-link-hover-color) !important;
				background-color: var(--danger-nav-tabs-active-link-hover-bgc) !important;
				border: 1px solid var(--danger-nav-tabs-active-link-hover-border-color) !important;
			}
		}
	}
}

.nav-tabs-has-success {
	border-bottom: 1px solid var(--success-border-color) !important;
	> li {
		& a.text-success{
			color: var(--success-nav-tabs-link-hover-color) !important;
			&:hover {
				color:var(--success-nav-tabs-link-hover-color);
				border-color: var(--success-nav-tabs-link-hover-border-color) var(--success-nav-tabs-link-hover-border-color) var(--success-border-color);
				background-color: var(--success-nav-tabs-link-hover-bgc-rgba);
			}
		}
		& a.text-danger{
			color: var(--danger-nav-tabs-link-hover-color) !important;
			&:hover {
				color:var(--danger-nav-tabs-link-hover-color);
				border-color: var(--danger-nav-tabs-link-hover-border-color) var(--danger-nav-tabs-link-hover-border-color) var(--danger-border-color);
				background-color: var(--danger-nav-tabs-link-hover-bgc-rgba);
			}
		}
		&.active > a {
			&,
			&:hover,
			&:focus {
				color: var(--success-nav-tabs-active-link-hover-color) !important;
				background-color: var(--success-nav-tabs-active-link-hover-bgc) !important;
				border: 1px solid var(--success-nav-tabs-active-link-hover-border-color) !important;
			}
		}
	}
}
/* END Classes for show success and error styles in tabs */

/* For browsers not support use default style */
@supports not (x: attr(x type(*))){
	.nav-tabs-dynamic {
		border-bottom: 1px solid var(--default-border-color);
		> li {
			float: left;
			margin-bottom: -1px;
			> a {
				color: var(--default-nav-tabs-color);
				margin-right: 2px;
				line-height: var(--default-line-height-base);
				border: 1px solid transparent;
				border-radius: var(--default-border-radius-base) var(--default-border-radius-base) 0 0;
				&:hover {
					border-color: var(--default-nav-tabs-link-hover-border-color) var(--default-nav-tabs-link-hover-border-color) var(--default-border-color);
				}
			}
			&.active > a {
				&,
				&:hover,
				&:focus {
					color: var(--default-nav-tabs-active-link-hover-color);
					cursor: default;
					background-color: var(--default-nav-tabs-active-link-hover-bgc);
					border: 1px solid var(--default-nav-tabs-active-link-hover-border-color);
					border-bottom-color: transparent;
				}
			}
		}
	}
}


/* For browsers support use dynamic style */
@supports (x: attr(x type(*))){
	.nav-tabs-dynamic {
		--tab-type: attr(data-tabtype type(<custom-ident>));
		--dynamic-nav-tabs-color:if(
			style(--tab-type: accent)	:	var(--accent-nav-tabs-color);
			style(--tab-type: info)		:	var(--info-nav-tabs-color);
			style(--tab-type: success)	:	var(--success-nav-tabs-color);
			style(--tab-type: warning)	:	var(--warning-nav-tabs-color);
			style(--tab-type: danger)	:	var(--danger-nav-tabs-color);
			else						:	var(--default-nav-tabs-color);
		);
		--dynamic-border-color:if(
			style(--tab-type: accent)	:	var(--accent-border-color);
			style(--tab-type: info)		:	var(--info-border-color);
			style(--tab-type: success)	:	var(--success-border-color);
			style(--tab-type: warning)	:	var(--warning-border-color);
			style(--tab-type: danger)	:	var(--danger-border-color);
			else						:	var(--default-border-color);
		);
		--dynamic-line-height-base:if(
			style(--tab-type : accent) : var(--accent-line-height-base);
			style(--tab-type : info) 	: var(--info-line-height-base);
			style(--tab-type : success) : var(--success-line-height-base);
			style(--tab-type : warning) : var(--warning-line-height-base);
			style(--tab-type : danger)  : var(--danger-line-height-base);
			else						: var(--default-line-height-base);
		);
		--dynamic-border-radius-base:if(
			style(--tab-type : accent) : var(--accent-border-radius-base);
			style(--tab-type : info) 	: var(--info-border-radius-base);
			style(--tab-type : success) : var(--success-border-radius-base);
			style(--tab-type : warning) : var(--warning-border-radius-base);
			style(--tab-type : danger)  : var(--danger-border-radius-base);
			else						: var(--default-border-radius-base);
		);
		--dynamic-nav-tabs-link-hover-color:if(
			style(--tab-type : accent) : var(--accent-nav-tabs-link-hover-color);
			style(--tab-type : info) 	: var(--info-nav-tabs-link-hover-color);
			style(--tab-type : success) : var(--success-nav-tabs-link-hover-color);
			style(--tab-type : warning) : var(--warning-nav-tabs-link-hover-color);
			style(--tab-type : danger)  : var(--danger-nav-tabs-link-hover-color);
			else						: var(--default-nav-tabs-link-hover-color);
		);
		--dynamic-nav-tabs-link-hover-border-color:if(
			style(--tab-type : accent) : var(--accent-nav-tabs-link-hover-border-color);
			style(--tab-type : info) 	: var(--info-nav-tabs-link-hover-border-color);
			style(--tab-type : success) : var(--success-nav-tabs-link-hover-border-color);
			style(--tab-type : warning) : var(--warning-nav-tabs-link-hover-border-color);
			style(--tab-type : danger)  : var(--danger-nav-tabs-link-hover-border-color);
			else						: var(--default-nav-tabs-link-hover-border-color);
		);
		--dynamic-nav-tabs-link-hover-bgc-rgba:if(
			style(--tab-type : accent) : var(--accent-nav-tabs-link-hover-bgc-rgba);
			style(--tab-type : info) 	: var(--info-nav-tabs-link-hover-bgc-rgba);
			style(--tab-type : success) : var(--success-nav-tabs-link-hover-bgc-rgba);
			style(--tab-type : warning) : var(--warning-nav-tabs-link-hover-bgc-rgba);
			style(--tab-type : danger)  : var(--danger-nav-tabs-link-hover-bgc-rgba);
			else						: var(--default-nav-tabs-link-hover-bgc-rgba);
		);
		--dynamic-nav-tabs-active-link-hover-color:if(
			style(--tab-type : accent) : var(--accent-nav-tabs-active-link-hover-color);
			style(--tab-type : info) 	: var(--info-nav-tabs-active-link-hover-color);
			style(--tab-type : success) : var(--success-nav-tabs-active-link-hover-color);
			style(--tab-type : warning) : var(--warning-nav-tabs-active-link-hover-color);
			style(--tab-type : danger)  : var(--danger-nav-tabs-active-link-hover-color);
			else						: var(--default-nav-tabs-active-link-hover-color);
		);
		--dynamic-nav-tabs-active-link-hover-bgc-rgba:if(
			style(--tab-type : accent) : var(--accent-nav-tabs-active-link-hover-bgc-rgba);
			style(--tab-type : info) 	: var(--info-nav-tabs-active-link-hover-bgc-rgba);
			style(--tab-type : success) : var(--success-nav-tabs-active-link-hover-bgc-rgba);
			style(--tab-type : warning) : var(--warning-nav-tabs-active-link-hover-bgc-rgba);
			style(--tab-type : danger)  : var(--danger-nav-tabs-active-link-hover-bgc-rgba);
			else						: var(--default-nav-tabs-active-link-hover-bgc-rgba);
		);
		--dynamic-nav-tabs-active-link-hover-border-color:if(
			style(--tab-type : accent) : var(--accent-nav-tabs-active-link-hover-border-color);
			style(--tab-type : info) 	: var(--info-nav-tabs-active-link-hover-border-color);
			style(--tab-type : success) : var(--success-nav-tabs-active-link-hover-border-color);
			style(--tab-type : warning) : var(--warning-nav-tabs-active-link-hover-border-color);
			style(--tab-type : danger)  : var(--danger-nav-tabs-active-link-hover-border-color);
			else						: var(--default-nav-tabs-active-link-hover-border-color);
		);

		border-bottom: 1px solid var(--dynamic-border-color);
		> li {
			float: left;
			margin-bottom: -1px;
			> a {
				color: var(--dynamic-nav-tabs-color);
				margin-right: 2px;
				line-height: var(--dynamic-line-height-base);
				border: 1px solid transparent;
				border-radius: var(--dynamic-border-radius-base) var(--dynamic-border-radius-base) 0 0;
				&:hover {
					color:var(--dynamic-nav-tabs-link-hover-color);
					border-color: var(--dynamic-nav-tabs-link-hover-border-color) var(--dynamic-nav-tabs-link-hover-border-color) var(--dynamic-border-color);
					background-color: var(--dynamic-nav-tabs-link-hover-bgc-rgba);
				}
			}
			&.active > a {
				&,
				&:hover,
				&:focus {
					color: var(--dynamic-nav-tabs-active-link-hover-color);
					cursor: default;
					background-color: var(--dynamic-nav-tabs-active-link-hover-bgc-rgba);
					border: 1px solid var(--dynamic-nav-tabs-active-link-hover-border-color);
					border-bottom-color: transparent;
				}
			}
		}
	}
}

/* active tab with bootstrap classes */

/* End tab clases  */


/*Loader*/
.bottom-message-loader{
	position: relative;
    top: 60% !important;
}

.top-message-loader{
	position: relative;
    top: 40% !important;
}

.loader-with-accent {
	color: var(--accent-color);
	font-size: 18px;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	position: absolute;
	text-indent: -9999em;
	animation: mulShdSpin 1.1s infinite linear;
	transform: translateZ(0);
	z-index: 99999999;
	top: 50%;
	left: 50%;

}
.container-loader-messages{
	display: flex;
	font-size: 2rem;
	flex-direction: column;
	/*justify-content: center;*/
	align-items: center;
	flex-wrap: wrap;
	height: 100%
}

.loader-with-accent-backdrop {
	background: rgba(245, 246, 243, 0.5);
	padding: 0;
	margin: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 9999999;
	overflow-y: hidden;
}

@keyframes mulShdSpin {

	0%,
	100% {
		box-shadow: 0 -3em 0 0.2em,
			2em -2em 0 0em, 3em 0 0 -1em,
			2em 2em 0 -1em, 0 3em 0 -1em,
			-2em 2em 0 -1em, -3em 0 0 -1em,
			-2em -2em 0 0;
	}

	12.5% {
		box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
			3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
			-2em 2em 0 -1em, -3em 0 0 -1em,
			-2em -2em 0 -1em;
	}

	25% {
		box-shadow: 0 -3em 0 -0.5em,
			2em -2em 0 0, 3em 0 0 0.2em,
			2em 2em 0 0, 0 3em 0 -1em,
			-2em 2em 0 -1em, -3em 0 0 -1em,
			-2em -2em 0 -1em;
	}

	37.5% {
		box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
			3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
			-2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
	}

	50% {
		box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
			3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
			-2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
	}

	62.5% {
		box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
			3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
			-2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
	}

	75% {
		box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
			3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
			-2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
	}

	87.5% {
		box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
			3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
			-2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
	}
}
/* Loader */