body {
	background: #f2f2f2 !important;
/*	background: #fafafa !important;*/
/*	background: #fdfdfd !important;*/
}

:root {
/*	--firts-color: #A52A2A;*/
/*	--firts-color: rgb(0, 53, 149);*/ /* AZUL OSCURO CLARO */
	--firts-color: rgb(1, 21, 137); /* AZUL OSCURO DROTACA */
/*	--firts-color: #141414;*/ /* NEGRO */
/*	--firts-color: #03071e; /* NEGRO mas claro */
/*	--firts-color: #11151c;*/
/*	--firts-color: #8a1111; /* ROJO QUE NO ES CHAVISTA */

	--bg-drotaca-azul: rgb(0, 53, 149);
}

/***********************************************************
 * LOGIN
 * * */
	.login {
	/*body {*/
		width: 100%;
		height: 100vh;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;

		background-color: #013299;
		/*background-image: url('../img/lazo_drotafarma.jpg');*/
		/*background-repeat: no-repeat;*/
		/*background-size: contain;*/
	}

	.img-lazo {
		z-index: 1;
		position: absolute;
		display: flex;
		width: 25%;
		bottom: 0;
		left: 0;
	}

	.img-logo-top {
		z-index: 2;
		position: absolute;
		display: flex;
		width: 350px;
		top: 0;
		right: 0;
		padding: 1rem;
	}

	.login form {
		z-index: 5;
	/*	background: #f0f0f0;*/
/*		background: #f0f0f094;*/
		/*background: #d6facf94;*/
		background: #f3facf94;
		padding: 60px;
/*		border-radius: 150px;*/
	}

	.text-login {
		/*&::before {
	        content: attr(content);
	        position: absolute;
	        inset: 0;
	        transform: rotatex(180deg) translatey(15px);
	        transform-origin: 50% 100%;
	        white-space: nowrap;
	    }*/
		mask: repeating-linear-gradient(
			transparent,
			transparent 1px,
			white 2px,
			white 4px
		);
		transition-duration: 2s;
		transition-property: mask; 
	}

	.block-cube {
	  	position: relative;
	  	.bg-top {
	    	position: absolute;
	    	height: 10px;
	    	background: rgb(217,217,217);
	/*    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(52,9,121,1) 37%,94%);*/
	    	bottom: 100%;
	    	left: -5px;
	    	right: 5px;
	    	transform: skew(45deg, 0);
	    	margin: 0;
	    	.bg-inner{
	      		bottom: 0;
	    	}
	  	}
	  	.bg-left {
	    	position: absolute;
	    	background: rgb(217,217,217);
	/*    background: rgb(2,0,36);*/
	/*    background: rgba(0,212,255,1);*/
	    	top: -5px;
	    	z-index: 0;
	    	bottom: 5px;
	    	width: 10px;
	/*    	left: 100%;*/
			right: 100%;
	    	transform: skew(0, 45deg);
	    	.bg-inner {
	      		right: 0;
	/*      	left: 0;*/
	    	}
	  	}
	  	.bg-inner {
	    	background: #fff;
	    	position: absolute;
	    	left: 2px;
	    	top: 2px;
	    	right: 2px;
	   		bottom: 2px;
	  	}
	  	// State hover, focus
	  	&.block-cube-hover:focus,
	  	&.block-cube-hover:hover {
	    /*.bg {
	      .bg-inner {
	        top: 100%;
	      }
	    }*/
	  	}
	  	.form-control:focus {
	/*  		box-shadow: none !important;*/
	  	}
	  	.bg-top:hover, .bg-left:hover {
	    	background: #86b7fe;
	  	}
	}

	.flipy {
		-webkit-perspective: 800;
	   	width: 100%;
	   	height: 50px;
	    position: relative;
	/*    border: 1px solid #ccc;*/
	}
	.flipy .card_:hover {
	/*.flipy .card_:hover {*/
		-webkit-transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
	}
	.flipy .card_ {
	  	width: 100%;
	  	height: 100%;
	  	-webkit-transform-style: preserve-3d;
	  	-webkit-transition: 0.5s;
	}
	.flipy .card_ .face {
	  	width: 100%;
	  	height: 100%;
	  	position: absolute;
	  	overflow: hidden;
	  	-webkit-backface-visibility: hidden ;
	  	z-index: 2;
	}
	.flipy .card_ .front {
		position: absolute;
		z-index: 1;
	    background: transparent;
	    color: white;
	    cursor: pointer;
	}
	.flipy .card_ .back {
		-webkit-transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
		background: blue;
		background: transparent;
		color: black;
		cursor: pointer;
	}

	#btn_ i {
		display: none;
	}
	#btn_:hover {
		display: flex;
		i {
			padding: 0 5px 0 5px;
			display: block;
			transition: .5s;
		}
	}
	.bg-drotaca {
		background-color: var(--bg-drotaca-azul) !important;
	/*	background: #86b7fe !important;*/
		color: #ffffff !important;
	}
	.btn-outline-first {
		color: var(--bg-drotaca-azul) !important;
		border-color: var(--bg-drotaca-azul) !important;
	}
	.btn-outline-first:active {
		color: #fff !important;
		background-color: var(--bg-drotaca-azul);
		border-color: var(--bg-drotaca-azul);
	}


/**********************************************************
 * DATA-LIST 
 * */
	ul[data-list="true"] {
	/*	position: fixed;*/
		position: absolute;
		background: #fff;
		height: 150px;
		overflow-y: scroll;
		scroll-behavior: smooth;
		border: 1px solid;
	}

	ul[data-list="true"] li {
		color: #000;
	}

	ul[data-list="true"] li:hover {
	/*	color: #fff;*/
		color: blue;
	}

	ul[data-list="false"] {
	/*	position: fixed;*/
		position: absolute;
		background: #fff;
	}

	ul[data-list="false"] li {
		color: #000;
	}

	ul[data-list="false"] li:hover {
		color: blue;
	}

	.leaflet-container {
		height: 400px;
		width: 600px;
		max-width: 100%;
		max-height: 100%;
	}

	.bg-first {
		background-color: var(--firts-color) !important;
		color: #ffffff !important;
	}
	.bg-drotaca-azul {
		background-color: var(--bg-drotaca-azul) !important;
	/*	background: #86b7fe !important;*/
		color: #ffffff !important;
	}

	.btn-drotaca-azul {
		background-color: var(--bg-drotaca-azul) !important; 
	}

	.drop-zone {
		border: 1px solid #8b8b8b;
		border-style: dashed;
		padding: 5px;
	/*	height: 100px;*/
	/*	display: flex;*/
	/*	justify-content: center;*/
	/*	align-items: center;*/
	}

	button[aria-selected="false"] {
		border: 1px solid #00000029 !important;
	}

/**********************************************************
* 
*/
	.table-style-1 {
		border-collapse: separate; 
		border-spacing: 0px 10px !important;
		font-size: 1.1rem;

		.th1 {
			border-width: 1px;
			border-radius: 15px 0 0 15px;
			border-color: black;
		}
		.th2 {
			border-width: 1px;
			border-radius: 0 15px 15px 0;
			border-color: black;
			align-content: center;
		}

		.bg-th-red {
			background-color: #ffbaba;
			border-color: #5c0000;
		}
		.bg-th-green {
			background-color: #b2ffa8;
			border-color: #0c7200;
		}
		.bg-th-blue {
			background-color: #d2d7f4;
			border-color: #011589;
		}
		.bg-th-black {
			background-color: #818181;
			border-color: #000000;
			color: #ffffff;
		}
	}

	.table-style-2 {
		.bi-arrow-up:before {
			color: #15b500;
		}
		.bi-arrow-down:before {
			color: #ff0000;
		}
	}

	#tab_imp td:nth-child(5) {
		white-space: nowrap;
		text-align: left;
	}

/**********************************************************
* 
*/
	.border_ {
		border: solid 1px black !important;
	}

	.border_left {
		border: 0 !important;
		border-left: .25rem solid !important;
		border-radius: 0 !important;
	}

	.card-edit {
		border: 0 !important;
		border-left: .25rem solid !important;
		-webkit-box-shadow: 5px 1px 8px 2px rgba(5,5,5,0.58);
		-moz-box-shadow: 5px 1px 8px 2px rgba(5,5,5,0.58);
		box-shadow: 5px 1px 8px 2px rgba(5,5,5,0.58);
		/*border-color: #013299 !important;*/
	}

	.navbar-edit {
		border: solid 1px;
		border-radius: 5px;
		background-color: #fff;
		box-shadow: 5px 1px 8px 2px rgba(5,5,5,0.58);

		.nav_link i {
			font-size: 1.5rem;
		}
	}

	.border-drotaca {
		border-color: #013299 !important;
	}

	.nav_link {
	    display: block;
	    padding: .1rem 1rem;
	    color: #0d6efd;
	    text-decoration: none;
	    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
	}

	#sidebar {
		width: 200px;
		min-height: 100vh;
		margin: 0;
		padding: 0;
/*		background-color: #00000040;*/
		transition:width .3s linear;
		-webkit-transition:width .3s linear;
		-webkit-transform:translateZ(0) scale(1,1);
	}

	#content {
		width: 80%;
/*		height: 100%;*/
		min-height: 100vh;
		margin: 0;
		padding: 0;
	}

	#menu_left {
		border-right: solid .25rem;
		background-color: #fafafa;
		box-shadow: 20px 0rem 1rem rgba(0, 0, 0, .15) !important;
	}

	.hr {
		height: 2px !important;
		opacity: 1;
	}
	.nav-left-btn {
		text-decoration: none;
		color: var(--bs-secondary);
		font-size: 1.5rem;
	}

	.body-log {
/*		background-color: #dcdcff;*/
/*		background-image:  linear-gradient(30deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(150deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(30deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(150deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(60deg, #444cf777 25%, transparent 25.5%, transparent 75%, #444cf777 75%, #444cf777), linear-gradient(60deg, #444cf777 25%, transparent 25.5%, transparent 75%, #444cf777 75%, #444cf777);*/
/*		background-size: 80px 140px;*/
/*		background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;*/
		
		/*background-image: url('../img/bg.jpg');*/
		background-repeat: no-repeat;
		background-size: cover;
	}

/**********************************************************
* animations
* */

	.a-border-bottom {
		width: 100%;
		border-bottom: solid 1px;
		animation-duration: 3s;
 		animation-name: lineBottom;
	}

	@keyframes lineBottom {
		from {
			border-bottom: solid 1px;
			width: 0%;
		}
		to {
			border-bottom: solid 1px;
			width: 100%;
		}
	}


/**********************************************************
* @media 
* */

	@media (max-width: 720px) {
		.navbar-m-left {
			margin-left: 154px !important;
		}
		#sidebar {
			position: fixed;
			z-index: 2;
			height: 100%;
			width: 156px;
			overflow:visible;
			display: none;
		}
		#content {
			width: 100%;
		}
		#tab_btn {
			display: none !important;
		}
	}
	@media (min-width: 1020px) {
		#content {
			width: 90%;
		}
	}
	@media (max-width: 340px) {
		.img-logo-top {
			width: 100%;
			right: 0;
			left: 0;
		}
		#nav_name {
			display: none;
		}
	}
	@media (max-width: 450px) {
		.toast {
			width: 200px !important;
		}
	}