/* --------------------------------------------------------------------------------- */
/* CSS LOADING */

.fancy-spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 8rem;
	height: 8rem;
}

.fancy-spinner div {
	position: absolute;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
}
.fancy-spinner div.ring {
	border-width: 0.5rem;
	border-style: solid;
	border-color: transparent;
	-webkit-animation: 2s fancy infinite alternate;
			animation: 2s fancy infinite alternate;
}
.fancy-spinner div.ring:nth-child(1) {
	border-left-color: #003153;
	border-right-color: #003153;
}
.fancy-spinner div.ring:nth-child(2) {
	border-top-color: #003153;
	border-bottom-color: #003153;
	-webkit-animation-delay: 1s;
			animation-delay: 1s;
}
.fancy-spinner div.dot {
	width: 1.7rem;
	height: 1.7rem;
	background: #003153;
}

@-webkit-keyframes fancy {
	to {
		transform: rotate(360deg) scale(0.5);
	}
}

@keyframes fancy {
	to {
		transform: rotate(360deg) scale(0.5);
	}
}

/*
.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	pointer-events: none;
}	

.hide_loading{
	display: none !important;
}

.rotating-image {
    width: 150px;
    height: 150px;
    background-image: url('/app/static/assets/img/pua_transparente.png');
    background-size: cover;
    animation: rotate3d 2s linear infinite;
}

@keyframes rotate3d {
    0% {
        transform: rotate3d(0, 1, 0, 0deg);
    }
    25% {
        transform: rotate3d(0, 1, 0, 90deg);
    }
    50% {
        transform: rotate3d(0, 1, 0, 0deg);
    }
    75% {
        transform: rotate3d(0, 1, 0, -90deg);
    }
    100% {
        transform: rotate3d(0, 1, 0, 0deg);
    }
} */

.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	pointer-events: none;
}	

.hide_loading{
	display: none !important;
}

@keyframes ripple {
	from {
	  transform: scale(0);
	  opacity: 1;
	}
	to {
	  transform: scale(1);
	  opacity: 0;
	}
}

.multi-ripple{	 
	position:absolute;
	left: calc(50% - 75px);
	top: calc(50% - 75px)
}


.multi-ripple div {
	position: absolute;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	border: 10px solid #003153;
	-webkit-animation: 1.5s ripple infinite;
			animation: 1.5s ripple infinite;
}

.multi-ripple div:nth-child(2) {
	-webkit-animation-delay: 0.5s;
			animation-delay: 0.5s;
}

.multi-ripple p{
	position: absolute;
	top:150px;
	left:-75px;
	width: 300px;
	font-weight: bold;
	animation: desvanecer 1.5s infinite;
}

@keyframes desvanecer {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}


/* FINAL CSS LOADING */
/* --------------------------------------------------------------------------------- */



.title-page{
	margin:0px !important
}


/* CSS Notificaciones */

.icon-alerts{
	font-size: 20px;
	cursor: pointer;
}

#content_alert_master{
	position:relative
}

.beep{
	width: 1rem !important;
	height: 1rem !important;
	position: absolute;
	top:-5px !important;
	right: -10px !important;
}

/* Final CSS Notificaciones */

/* Clases de validación */

.error-class{
	border-color: rgb(255, 20, 20) !important;
}
/*  */


.img-table{
	width: 35px;
	height: 35px;
}

.dataTables_filter {
	display: none;
}

/* BOTONES */

.btn-morado {
	color: #fff;
	background-color: rgb(103,119,239);
	border-color: rgb(103,119,239);
	box-shadow: 0 0.125rem 0.25rem 0 rgba(133, 146, 163, 0.4);
}
.btn-morado:hover {
	color: #fff;
	background-color: rgb(103,119,239);
	border-color: rgb(103,119,239);
	transform: translateY(-1px);
}

.btn-pistache {
	color: #fff;
	background-color: rgb(2,105,130);
	border-color: rgb(2,105,130);
	box-shadow: 0 0.125rem 0.25rem 0 rgba(133, 146, 163, 0.4);
}
.btn-pistache:hover {
	color: #fff;
	background-color: rgb(2,105,130);
	border-color: rgb(2,105,130);
	transform: translateY(-1px);
}

.btn-azul-claro {
	color: #fff;
	background-color: rgb(0,117,188);
	border-color: rgb(0,117,188);
	box-shadow: 0 0.125rem 0.25rem 0 rgba(133, 146, 163, 0.4);
}
.btn-azul-claro:hover {
	color: #fff;
	background-color: rgb(0,117,188);
	border-color: rgb(0,117,188);
	transform: translateY(-1px);
}

.btn-blanco {
	color: black;
	background-color: white;
	border-color: black;
	box-shadow: 0 0.125rem 0.25rem 0 rgba(133, 146, 163, 0.4);
}
.btn-blanco:hover {
	color: black;
	background-color: white;
	border-color: black;
	transform: translateY(-1px);
}

.btn-gris {
	color: #fff;
	background-color: rgb(227, 234, 239);
	border-color: rgb(227, 234, 239);
	box-shadow: 0 0.125rem 0.25rem 0 rgba(133, 146, 163, 0.4);
}
.btn-gris:hover {
	color: #fff;
	background-color: rgb(227, 234, 239);
	border-color: rgb(227, 234, 239);
	transform: translateY(-1px);
}

.btn-naranja {
	color: #fff;
	background-color: rgb(255,164,38);
	border-color: rgb(255,164,38);
	box-shadow: 0 0.125rem 0.25rem 0 rgba(133, 146, 163, 0.4);
}
.btn-naranja:hover {
	color: #fff;
	background-color: rgb(255,164,38);
	border-color: rgb(255,164,38);
	transform: translateY(-1px);
}

/* BOTONES */

/* COLORES */
.color-dark{
	color:#233443	
}

.color-blue{
	color:#03C3EC	
}

.color-yellow{
	color:#FFAB00	
}

.color-red{
	color:#FF3E1D	
}

.color-green{
	color:#71DD37	
}

.color-gray{
	color:#8592A3	
}

.color-primary{
	color:#003153	
}

.color-morado{
	color:#6777ef	
}

.w-5{
	width: 5% !important;
}
.w-10{
	width: 10% !important;
}
.w-15{
	width: 15% !important;
}
.w-20{
	width: 20% !important;
}
.w-25{
	width: 25% !important;
}
.w-30{
	width: 30% !important;
}
.w-35{
	width: 35% !important;
}
.w-40{
	width: 40% !important;
}
.w-45{
	width: 45% !important;
}
.w-50{
	width: 50% !important;
}
.w-55{
	width: 55% !important;
}
.w-60{
	width: 60% !important;
}
.w-65{
	width: 65% !important;
}
.w-70{
	width: 70% !important;
}
.w-75{
	width: 75% !important;
}
.w-80{
	width: 80% !important;
}
.w-85{
	width: 85% !important;
}
.w-90{
	width: 90% !important;
}
.w-95{
	width: 95% !important;
}
.w-100{
	width: 100% !important;
}


:root {
	--color-primario: #003153; /* Define la variable con el nombre --mi-color y asigna el color rojo */
	--color-gradiente: rgba(0, 49, 83, 0.4); /* Define la variable con el nombre --mi-color y asigna el color rojo */
	--color-secundario: #023e69; /* Define la variable con el nombre --mi-color y asigna el color rojo */
	--color-morado: #6777ef; /* Define la variable con el nombre --mi-color y asigna el color rojo */
	--color-rojo: #FF3E1D; /* Define la variable con el nombre --mi-color y asigna el color rojo */
	--color-amarillo: #FFAB00; /* Define la variable con el nombre --mi-color y asigna el color rojo */
	--color-verde: #71DD37; /* Define la variable con el nombre --mi-color y asigna el color rojo */
}


/* FINAL COLORES */

.unselect{
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

/* Popover */
	
.popover  {
	background: var(--color-primario) !important;
}

.bs-popover-top > .popover-arrow::after {
	bottom: 1px;
	border-width: 0.5rem 0.5rem 0;
	border-top-color: var(--color-primario);
	border-bottom-color: var(--color-primario);
}

.layout-navbar{
	/* background: linear-gradient(to right, rgb(0, 49, 83, 1), white) !important; */
	/* border-bottom: solid 3px rgb(0, 49, 83) !important; */
	box-shadow: 0 5px 5px rgba(0, 49, 83, 0.5);
	/* & .title-page{
		color: white !important;
	} */
	 position:sticky;
	 top:0px;
}

.card.card-primary{
	border-top: solid 3px rgb(0, 49, 83) !important;
}

.card{
	border-top: solid 2px var(--color-primario);
}


/* CSS del select */	
.selectize-input{
	width: 100%;
	padding: 0.4375rem 0.875rem !important;
	font-size: 0.9375rem !important;
	font-weight: 400 !important;
	line-height: 1.53 !important;
	background-color: #fff !important;
	background-clip: padding-box !important;
	border: 1px solid #d9dee3 !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	border-radius: 0.375rem !important;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.selectize-focused {
	border: 1px solid #003153 !important;
	box-shadow: none !important;
}

.selectize-input::after{
	border:none !important
}

.selectize-dropdown{
	z-index: 1 !important;
}

.selectize-dropdown-content {
	background: white;
}

.selectize-control .single {
	height: fit-content !important;
	z-index: 2 !important;
}
/* CSS del select */

.item-back{
	font-size: 13px;
	&:hover{
		text-decoration: underline;
	}		
}

.form-label-sub{
	text-transform: uppercase;
	margin-bottom: 0.1rem;
	font-size: 0.7rem;
	font-weight: 500;
	color: #566a7f;
}