@charset "UTF-8";

html {
	height: 100%;
}

body {
	background: linear-gradient(to top, #300A69, #6b17e9);
	font-weight: lighter;
	height: 100%;
	margin: 0;
	overflow-y: hidden;
}
	.panel_bloqueo {
		background: url('../img/pattern.jpg');
		height: 100% !important;
		left: 0 !important;
		position: absolute;
		animation-name: equipo;
		animation-duration: 100s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}
		.panel_bloqueo .mensaje-wrapper {
			background: rgba(255,255,255,0.5);
			box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
			border-radius: 10px;
			padding: 20px;
		}
			.logo_bloqueo {
				width: 200px;
			}
	.panel_izq {
		background: url('../img/login.jpg');
		background-size: cover;
		/* background-position: center; */
		/* filter: grayscale(0.5); */
		height: 100% !important;
		left: 0 !important;
		position: absolute;
		/*animation-name: equipo;
		animation-duration: 50s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;*/
	}
		@keyframes equipo {
			0% {
				background-position: top;
			}
			50% {
				background-position: bottom;
			}
		}
	.panel_der {
		background: linear-gradient(to top, #300A69, #6b17e9) /*url('../img/pattern.jpg')*/;
		box-shadow: -15px 0px 20px rgba(0,0,0,0.5);
		height: 100% !important;
		position: absolute;
		right: 0 !important;
	}
		.logo_login {
			background: white !important;
			border-radius: 20px;
			margin: auto;
			margin-bottom: 40px;
			padding-bottom: 10px;
			padding-top: 10px;
			width: 350px !important;
		}
			.logo_login img {
				width: 300px;
			}
		.panel_der .prefix {
			color: #FFF !important;
		}
		.panel_der input {
			color: #FFF;
		}
			.panel_der input:focus {
				border-bottom: 1px solid #FFF !important;
				box-shadow: 0 1px 0 0 #FFF !important;
			}
		.panel_der label {
			color: #FFF !important;
		}
		.panel_der .helper-text {
			color: #FFF !important;
			text-align: right;
			text-decoration: underline;
		}
		.iniciar_sesion {
			background: #4caf50 !important;
			border: 2px solid #4caf50;
			color: white;
			font-weight: bold;
			animation-name: llamar_boton;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}
			@keyframes llamar_boton {
				0% {
					box-shadow: 0px 0px 0px #4caf50;
				}
				50% {
					box-shadow: 0px 0px 20px #4caf50;
				}
			}
			.iniciar_sesion:hover {
				box-shadow: 0px 0px 0px #4caf50 !important;
			}
			.iniciar_sesion:focus {
				border: 2px dashed #333;
			}
	.sidenav {
		background: rgba(0,0,0,0);
		/* background: linear-gradient(to top, #0D6335, #1AC96C); */
		box-shadow: 0px 0px 0px black;
		padding-left: 15px !important;
		padding-right: 15px !important;
		padding-top: 20px;
	}
		.sidenav .item_menu_wrapper {
			max-height: 300px;
			overflow-y: auto;
		}
			.item_menu_wrapper::-webkit-scrollbar {
			  width: 5px;
			}
			.item_menu_wrapper::-webkit-scrollbar-track {
			  background: #0D6335;
			  border-radius: 10px;
			}
			.item_menu_wrapper::-webkit-scrollbar-thumb {
			  background: white;
			  border-radius: 10px;
			}
		.sidenav li a {
			color: white;
			font-weight: normal;
		}
			.sidenav .logo {
				background: white !important;
				border-radius: 20px;
				padding-bottom: 148px;
				padding-top: 10px;
			}
				.sidenav .logo img {
					height: 140px;
					margin-top: 0px;
					max-width: 100%;
				}
		.sidenav li .divider {
			background: rgba(255,255,255,0.5);
			margin: auto;
			margin-bottom: 10px;
			margin-top: 10px;
			width: 80%;
		}
		.sidenav li .item_menu {
			border-radius: 20px;
			width: 100%;
		}
			.sidenav li .item_menu:hover {
				background: white;
				color: black;
			}
			.sidenav li .item_menu:hover i {
				color: #6b17e9 !important;
				transform: rotate(360deg);
			}
			.sidenav li .item_menu i {
				color: white !important;
				transition: all 0.5s;
			}
	.panel {
		background: white;
		border-radius: 20px;
		font-weight: normal;
		height: calc(100% - 40px);
		margin-left: 300px;
		margin-top: 20px;
		padding-bottom: 20px;
		padding-left: 40px;
		padding-right: 40px;
		position: absolute;
		overflow-y: auto;
		overflow-x: hidden !important;
		width: calc(100% - 320px);
	}
		.panel::-webkit-scrollbar {
			left: -100px !important;
			width: 15px;
		}
		.panel::-webkit-scrollbar-track {
		  background: #CCC;
		  border-radius: 0px 10px 10px 0px;
		}
		.panel::-webkit-scrollbar-thumb {
		  background: #333;
		  border-radius: 0px 10px 10px 0px;
		}
		.instruccion {
			margin-bottom: 40px;
		}
			.instruccion i {
				transform: translateY(7px);
			}
		.items-bienvenida-wrapper div:nth-child(1) .item-wrapper {
			background: rgba(12,50,235,0.8);
			border-radius: 10px;
			color: white;
			font-weight: bold;
			padding-bottom: 20px !important;
			padding-top: 20px !important;
			transition: all 0.2s;
		}
			.items-bienvenida-wrapper div:nth-child(1) .item-wrapper:hover {
				background: rgba(12,50,235,1);
			}
		.items-bienvenida-wrapper div:nth-child(2) .item-wrapper {
			background: rgba(227,23,56,0.8);
			border-radius: 10px;
			color: white;
			font-weight: bold;
			padding-bottom: 20px !important;
			padding-top: 20px !important;
			transition: all 0.2s;
		}
			.items-bienvenida-wrapper div:nth-child(2) .item-wrapper:hover {
				background: rgba(227,23,56,1);
			}
		.items-bienvenida-wrapper div:nth-child(3) .item-wrapper {
			background: rgba(145,139,7,0.8);
			border-radius: 10px;
			color: white;
			font-weight: bold;
			padding-bottom: 23px !important;
			padding-top: 23px !important;
			transition: all 0.2s;
		}
			.items-bienvenida-wrapper div:nth-child(3) .item-wrapper:hover {
				background: rgba(145,139,7,1);
			}
		.items-bienvenida-wrapper div .item-wrapper div:nth-child(2) {
			text-transform: uppercase;
		}
		.subnav-wrapper {
			background: white;
			padding-top: 20px !important;
			position: sticky;
			top: 0;
			z-index: 2;
		}
			.subnav {
				border-bottom: 2px solid rgba(0,0,0,0.08);
				font-size: 0;
				margin-bottom: 40px;
				margin-top: 0;
				position: sticky;
			}
				.subnav li {
					border-bottom: 2px solid rgba(0,0,0,0);
					border-radius: 10px 10px 0px 0px;
					display: inline-block;
					font-size: 14px;
					font-weight: bold;
					padding: 15px;
					transform: translateY(2px);
					transition: all 0.5s;
				}
					.subnav li:hover {
						border-bottom: 2px solid #0CECF5;
					}
					.subnav li div {
						color: rgba(0,0,0,0.5);
						transition: all 0.2s;
					}
						.subnav li:hover div {
							color: black;
							transform: scale(1.2);
						}
					.subnav li i {
						font-size: 1em;
						transform: scale(1.7);
					}
					.subnav .active {
						background: #009bde;
						border-bottom: 2px solid #000;
					}
						.subnav .active i {
							color: white;
						}
			.titulo {
				margin-bottom: 60px;
			}
			.subtitulo {
				color: rgba(0,0,0,0.5);
				font-size: 0.8em;
				font-weight: bold;
			}
			.subtitulo-v2-wrapper {
				border-bottom: 2px solid #6b17e9;
				margin-bottom: 20px;
			}
			.search-icon {
				cursor: pointer;
			}
			.search-wrapper {
				margin-top: -38px;
				padding: 0 !important;
				right: 200% !important;
				position: absolute !important;
				transition: all 0.5s;
			}
				#search {
					background: #CCC;
					border: 0;
					border-radius: 10px 0px 0px 10px;
					color: #333;
					padding-left: 20px;
					padding-right: 40px;
				}
					#search:focus {
						border: 0;
						box-shadow: 0px 0px 0px #555;
					}
					#search::placeholder {
						color: #555;
					}
				.close-search-icon {
					color: #333;
					cursor: pointer;
					position: absolute;
					right: 11px;
					top: 11px;
				}
			.icono-ver {
				color: rgba(145,139,7,1);
			}
			.icono-actualizar {
				color: #09AFB5;
			}
			.icono-eliminar {
				color: #d50000;
			}
			.icono-ver:hover, .icono-actualizar:hover, .icono-eliminar:hover {
				transform: scale(1.1) rotate(360deg);
			}
			.ayuda {
				background: #ec982f;
				border-radius: 50%;
				color: white;
				font-weight: bold;
			    padding: 2px;
			    padding-left: 8px !important;
			    padding-right: 8px !important;
			}
				.tooltip_justificado {
					text-align: justify;
				}
			.progress {
				background: #009bde;
			}
				.determinate {
					background: #333 !important;
				}
			.btn-aprobar {
				background: #009bde !important;
				color: white;
				margin-bottom: 40px;
				margin-top: 40px;
				transition: all 0.2s;
			}
				.btn-aprobar:hover {
					transform: scale(1.1) !important;
				}
					.btn-aprobar:hover i {
						transform: rotate(360deg);
					}
				.btn-aprobar:focus {
					border: 2px dashed #333;
					transform: scale(1.1) !important;
				}
				.btn-aprobar:active {
					transform: scale(1) !important;
				}
				.btn-aprobar i {
					transition: all 0.5s;
				}
			.btn-subir-archivo {
				margin-bottom: 0px;
				margin-top: 0px;
			}
			.modal-content {
				padding: 0 !important;
			}
			.modal.archivos {
				height: 100%;
				max-height: 100%;
				top: 0 !important;
				width: 100%;
			}
				.header_modal {
					background: #009bde;
					border-radius: 0px 0px 10px 10px;
					color: white;
					font-weight: bold;
					margin: 0;
					padding-bottom: 10px;
					padding-top: 10px;
					text-align: center;
				}
				.titulo_modal {
					margin-bottom: 20px;
				}
				.subtitulo_modal {
					color: rgba(0,0,0,0.5);
					font-size: 0.8em;
					font-weight: bold;
					margin-bottom: 20px;
				}
				.iframe-wrapper {
					margin-top: 15px;
				}
				.iframe_modal {
					height: 85%;
					resize: vertical;
					position: absolute;
					width: 98%;
				}
				.iframe_options_remover {
					background: #fafafa;
					height: 26px !important;
					transform: translateY(-31px);
				}
			.btn-aprobar-modal {
				background: #09AFB5 !important;
				border: 2px solid #09AFB5;
				color: white;
			}
				.btn-aprobar-modal:hover {
					background: #067275 !important;
				}
					.btn-aprobar-modal:hover i {
						transform: rotate(360deg);
					}
				.btn-aprobar-modal:focus {
					background: #067275 !important;
					border: 2px dashed #333;
				}
				.btn-aprobar-modal:active {
					transform: scale(0.9) !important;
				}
				.btn-aprobar-modal i {
					transition: all 0.5s;
				}
			.btn-cerrar-modal {
				background: #eb4435 !important;
				border: 2px solid #eb4435;
				color: white;
			}
				.btn-cerrar-modal:hover {
					background: #AB3227 !important;
				}
					.btn-cerrar-modal:hover i {
						transform: rotate(360deg);
					}
				.btn-cerrar-modal:focus {
					background: #AB3227 !important;
					border: 2px dashed #333;
				}
				.btn-cerrar-modal:active {
					transform: scale(0.9) !important;
				}
				.btn-cerrar-modal i {
					transition: all 0.5s;
				}
			.asterisco {
				color: red;
				font-weight: bold;
			}