/*================================================================================
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */


:root {
	--color1: #192a56; /*2C303B:  background menu 1er nivel*/
	--color2: #d5290a; /*16181e*/
	--color3: rgb(0 0 0 / 26%); /*23262f: color active link url al pasar hacer clic*/
	--color4: #fff; /*c3c3c3: color hover de texto de enlace*/
	--color5: #f4f4f4; /*dcdcdc: titulos de menu*/
	--color6: #1E9FF2; /*1E9FF2: color link*/
	--color7: #7ccdff; /*color border-right*/
	--color8: rgb(0 0 0 / 26%); /*color active link url al cargar*/
	--color9: rgb(0 0 0 / 36%); /*color hover link*/	
}


footer.footer-dark {
	background: var(--color1);
	color: #fff; 
}



.main-menu.menu-light .navigation > li.open > a {
	border-right: 4px solid var(--color7); 
}


.main-menu.menu-dark {
    color: var(--color5);
    background: var(--color1); 
}


.main-menu.menu-dark .main-menu-header .menu-search {
	background: var(--color2);
	color: var(--color4); 
}


.main-menu.menu-dark .navigation {
	background: var(--color1); 
}


.main-menu.menu-dark .navigation .navigation-header {
	color: var(--color5);
}
.main-menu.menu-dark .navigation li a {
	color: var(--color5);
}


.main-menu.menu-dark .navigation > li.open > a {
	color: var(--color4);
	background: var(--color3);
	border-right: 4px solid var(--color7); 
}


.main-menu.menu-dark .navigation > li.hover > a, .main-menu.menu-dark .navigation > li:hover > a, .main-menu.menu-dark .navigation > li.active > a {
	color: var(--color4); 
}


.main-menu.menu-dark .navigation > li.active > a {
	color: var(--color5);
}


.main-menu.menu-dark .navigation > li .active .hover > a {
	background: var(--color3); 
}


.main-menu.menu-dark .navigation > li ul li {
	color: var(--color5);
	background: var(--color8); 
}



.main-menu.menu-dark .navigation > li ul .open > a {
	color: var(--color5); 
}


.main-menu.menu-dark .navigation > li > ul {
	background: var(--color1); 
}


.main-menu.menu-dark ul.menu-popout {
	background: var(--color1); 
}


.main-menu.menu-dark ul.menu-popout .open > a {
	color: var(--color5); 
}


.main-menu.menu-dark ul.menu-popout li a {
	color: var(--color5); 
}


.main-menu a:hover, .main-menu a:focus {
	background: var(--color9);
}


.main-menu-footer {
	background-color: var(--color2); 
}

.navbar-light .search-input .input, .navbar-semi-dark .search-input .input {
	color: var(--color1); 
}
.navbar-light .search-input .input::placeholder, .navbar-semi-dark .search-input .input::placeholder {
	color: var(--color1); 
}  
.navbar-light .search-input.open .input, .navbar-semi-dark .search-input.open .input {
	color: var(--color1);
	border-bottom: 1px solid var(--color1); 
}




.main-menu li.active>a {
	background: var(--color8) !important;
}
  
.main-menu li.active a:hover {
	background: var(--color9) !important;
}

.navbar-semi-dark .navbar-header {
  	background: var(--color1);
}

.main-menu.menu-dark .navigation > li .active > a {
    color: #ffc126 !important; /*color submenu enlace activo*/
    font-weight: 700;
    /* background: var(--color9) !important; */
    margin: 0;
    border-radius: 0;
    padding-left: 53px;
}

.main-menu.menu-dark .navigation > li.active > a {
    margin: 0;
    
}
.main-menu.menu-dark.expanded .navigation > li.active > a {
    margin: 0;
}

.main-menu.menu-dark .navigation > li.open > ul > li:hover.active > a {
    padding: 12px 18px 12px 59px;
}

h3, h3.text-uppercase {
    font-weight: bold;
}

hr {
    margin-top: 30px;
}


/*personalizanado scroll link
==============================================*/
html{
	scroll-behavior:smooth;
}

.card-body{
	scroll-margin-top: 70px;
}
/*fin personalizanado scroll link*/

/*personalizando submenu*/
.main-menu.menu-dark .navigation > li ul > ul li.active > a, 
.main-menu.menu-dark .navigation > li ul .open > ul li.active > a {
    padding-left: 70px;
}



@media (max-width: 991.98px) {
	#navbar-mobile .search-input.open .input {
		border-bottom: 1px solid var(--color1);
	}

	.main-menu.menu-dark .navigation > li .active > a {
		padding-left: 67px;
	} 

	.main-menu.menu-dark.expanded .navigation > li.active > a {
		padding-left: 30px;
	}
}



/*codigo personalizado
==============================================*/
/* form input {
  text-transform: uppercase;
} */

.blanco {
    color: #fff;
}
.rojo {
    color: #e74c3c;
}
.verde {
    color: #1abc9c;
}

.azul {
    color: #2980b9;
}

.naranja {
    color: orange;
}

.morado{
    color: #8e44ad;
}

.amarillo{
    color: #f1c40f;
}

.gris{
    color:#bdc3c7;
}

.negro{
    color:#34495e;
}

.celeste{
    color: #5bc0de;
}

.bg-rojo {
    background: #e74c3c;
}
.bg-verde {
    background: #1abc9c;
}

.bg-azul {
    background: #2980b9;
}

.bg-naranja {
    background: orange;
}

.bg-morado{
    background: #8e44ad;
}

.bg-amarillo{
    background: #f1c40f;
}

.bg-gris{
    background:#bdc3c7;
}

.cursor-pointer:hover{
	cursor: pointer;
}

.la-spinner, .fa-spinner {
	animation: mi-spinner 1.2s linear infinite;
}

@keyframes mi-spinner {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}



#menulogo {
	position: relative;
	top: -16px;
	height: 66px;
	width: auto;
}

.tagify {
	background: #fff;
	width: 100%;
}

hr.divider{
	margin-top:5px;
	margin-bottom:20px;
	height:1px;
	width:100%;
	border-top:1px solid #cccccc;
}

.tabla_contenedor{
	overflow: auto;
}