/**********************************/
/*          L O G I N             */
/**********************************/
.login-page,
.register-page {
	height: 40vh;
}

.register-logo {
	font-size: 3rem;
}

.login-page {
	background: #ffffff;
	/* background: #ffffff url('https://oscarperez.es/proyectos/ictan/dist/img/logotipo-ictan-contorno-gris.png') no-repeat center bottom; */
}

.login-logo {
	width: 100%;
}

.login-logo img {
	max-width: 600px;
	margin-bottom: 2.9rem;
}

.card .card-buttom,
.text-end {
	text-align: right;
}

.card .login-card-body {
	background-color: rgba(0, 0, 0, .1);
	border-radius: 8px;
	box-shadow: 0 1px 15px rgba(0, 0, 0, 1);
	padding: 26px 24px;
}

@media (min-width: 1200px) {
	.login-logo {
		margin-top: 9rem;
	}
}

@media (max-width: 576px) {
	.login-logo img {
		width: 85%;
		margin-bottom: 0;
	}
}


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


/* Clases generales */

.table-link,
.removeRows {
	cursor: pointer;
}

.is-hidden {
	display: none;
}


/* C U A D R A D O S */
.cuadrado {
	position: absolute;
	width: 20px;
	height: 20px;
	display: inline-block;
	margin: 0 0 0 10px;
}

/*  B A C K G R O U N D  */
.bg-isIp {
	background-color: #d6e9c6 !important
}

.rojo {
	background: #d9534f !important;
	color: #fff !important;
}

.verde {
	background: #348f50 !important;
}

.azul {
	background: #337ab7 !important;
}

.amarillo {
	background: #f4c000 !important;
}

.naranja {
	background: #f78e37 !important;
}

.blanco_sucio {
	background-color: #f1f1f1 !important;
}

.verde_success {
	background: #d6e9c6 !important;
}

.danger {
	background-color: #c67070 !important;
}

.no-color {
	background-color: white !important;
	color: #333333;
}


/* C O L O R E S   D E   T E X T O */
.texto_blanco {
	color: white;
}

.texto_rojo {
	color: #af071f;
}

.texto_verde {
	color: #92d050;
}

.texto_azul {
	color: #337ab7;
}

.texto_amarillo {
	color: #f4c000;
}

.texto_naranja {
	color: #f78e37;
}

.texto_bold {
	font-weight: bold;
}

/* FONT SIZE */
.font-size-70pc {
	font-size: 70%
}

.font-size-80pc {
	font-size: 80%
}

.font-size-90pc {
	font-size: 90%
}

/* NavBar */
nav .nav-item img {
	width: 40px
}

nav .nav-item .custom-logo {
	height: 60px;
	width: auto;
	margin: 0 0 0 .5em;
}

.dropdown-menu-lg {
	min-width: inherit;
}

.navbar-project.nav-tabs .nav-item .infoNavsLink {
	color: #348f50 !important;
}


/* Al eliminar el sidebar, tenemos que aumentar el tamaño del wrapper a pantalla completa */
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer,
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header {
	transition: margin-left .3s ease-in-out;
	margin-left: 0px !important;
}


#loader {
	position: absolute;
	z-index: 10000;
	top: 30%;
	right: 40%;
}

/* Footer */
.main-footer {
	text-align: center;
	font-size: 10px;
}


/* Dashboard */
.small-box {
	position: relative;
	/* Necesario para posicionar correctamente el pseudo-elemento */
	overflow: hidden;
	/* Evita que el pseudo-elemento salga del contenedor */
	border-radius: 15px;
	/* Esquinas redondeadas */
	transition: box-shadow 0.3s ease, transform 0.2s ease;
	/* Efecto de sombra y transformación */
}

.shadow-effect {
	box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
	/* Sombra predeterminada */
}

.shadow-effect:active {
	transform: scale(0.95);
	/* Simula hundimiento al hacer clic */
}

.shadow-effect::after {
	content: "";
	/* Pseudo-elemento para el efecto de expansión diagonal */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 400px;
	background: none;
	/* Inicialmente sin color */
	border-radius: 100px;
	/* Forma circular */
	transform: translate(-50%, -50%) scale(0);
	/* Pequeño y centrado */
	transform-origin: center;
	transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
	/* Transiciones suaves */
	z-index: 1;
	/* Asegura que el pseudo-elemento esté por debajo del contenido */
}

.shadow-effect:hover::after {
	transform: translate(-50%, -50%) scale(1);
	/* Expande el círculo para cubrir el área */
}

/* Color personalizado para añadir a cada small-box, cuando se le hace Hover */
.small-box-info::after {
	background: #337ab7;
	/*contratos*/
}

.small-box-success::after {
	background: #348f50;
	/*proyectos*/
}

.small-box-warning::after {
	background: #f4c000;
	/*RRHH*/
}

.small-box-danger::after {
	background: #d9534f;
	/*laboratorio*/
}

.small-box-black-light::after {
	background: rgba(0, 0, 0, 0.3);
}

/* Estilo del contenido dentro del small-box */
.shadow-effect .inner {
	position: relative;
	/* Asegura que el contenido esté sobre el pseudo-elemento */
	z-index: 2;
	/* Prioridad sobre el pseudo-elemento */
	color: white;
	/* Ajusta el color del texto si es necesario */
}

.custom-size {
	height: 200px;
	/* Ajusta el tamaño del small-box */
	width: 200px;
	/* Ajusta el tamaño del small-box */
	display: flex;
	/* Opcional: Centra el contenido */
	align-items: center;
	/* Opcional: Centra verticalmente */
	justify-content: center;
	/* Opcional: Centra horizontalmente */
	text-align: center;
	/* Textos de dos lineas situarlo en el centro */
}

.custom-size h4 {
	font-size: 1.5rem;
	/* Ajusta el tamaño del texto */
}

/* End Dashboard */
#toast-container>div {
	opacity: 1 !important;
}

.toast-top-full-width {
	top: 2% !important;
	right: 1%;
	width: 98%;
}



/* Breadcrumb */
.breadcrumb-item a {
	color: #999;
	font-size: 80%
}

/* Tamanios */
.width-50pc {
	width: 50%
}

/* Margenes */
.m-1 {
	margin: 0.25rem !important;
}

.mt-1,
.my-1 {
	margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
	margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
	margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
	margin-left: 0.25rem !important;
}

.m-2 {
	margin: 0.5rem !important;
}

.mt-2,
.my-2 {
	margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
	margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
	margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
	margin-left: 0.5rem !important;
}

.m-3 {
	margin: 1rem !important;
}

.mt-3,
.my-3 {
	margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
	margin-right: 1rem !important;
}

.mb-3,
.my-3 {
	margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
	margin-left: 1rem !important;
}

.m-4 {
	margin: 1.5rem !important;
}

.mt-4,
.my-4 {
	margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
	margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
	margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
	margin-left: 1.5rem !important;
}

.m-5 {
	margin: 3rem !important;
}

.mt-5,
.my-5 {
	margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
	margin-right: 3rem !important;
}

.mb-5,
.my-5 {
	margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
	margin-left: 3rem !important;
}

/* Padding */
.pdl-mobile {
	padding-left: -1.5em !important;
}

.pd-1 {
	padding: 0.25rem !important;
}

.pdt-1,
.pdy-1 {
	padding-top: 0.25rem !important;
}

.pdr-1,
.pdx-1 {
	padding-right: 0.25rem !important;
}

.pdb-1,
.pdy-1 {
	padding-bottom: 0.25rem !important;
}

.pdl-1,
.pdx-1 {
	padding-left: 0.25rem !important;
}

.pd-2 {
	padding: 0.5rem !important;
}

.pdt-2,
.pdy-2 {
	padding-top: 0.5rem !important;
}

.pdr-2,
.pdx-2 {
	padding-right: 0.5rem !important;
}

.pdb-2,
.pdy-2 {
	padding-bottom: 0.5rem !important;
}

.pdl-2,
.pdx-2 {
	padding-left: 0.5rem !important;
}

.pd-3 {
	padding: 1rem !important;
}

.pd-3,
.pdy-3 {
	padding-top: 1rem !important;
}

.pd-3,
.pdx-3 {
	padding-right: 1rem !important;
}

.pd-3,
.pdy-3 {
	padding-bottom: 1rem !important;
}

.pd-3,
.pdx-3 {
	padding-left: 1rem !important;
}

.pd-4 {
	padding: 1.5rem !important;
}

.pdt-4,
.pdy-4 {
	padding-top: 1.5rem !important;
}

.pdr-4,
.pdx-4 {
	padding-right: 1.5rem !important;
}

.pdb-4,
.pdy-4 {
	padding-bottom: 1.5rem !important;
}

.pdl-4,
.pdx-4 {
	padding-left: 1.5rem !important;
}

.pd-5 {
	padding: 3rem !important;
}

.pdt-5,
.pdy-5 {
	padding-top: 3rem !important;
}

.pdr-5,
.pdx-5 {
	padding-right: 3rem !important;
}

.pdb-5,
.pdy-5 {
	padding-bottom: 3rem !important;
}

.pdl-5,
.pdx-5 {
	padding-left: 3rem !important;
}


/*  drapdrop  */
.drapdrop_image {
	height: 10em;
	background-color: #FAFAFAFA;
}