/* ------------- Configuración de la página --------------- */

/* Variables */

/* Convertir del rgb al hex */

:root {
	--color-primary: #2d3985;
	--color-primary-hex: 45, 57, 133;
	
	--color-secondary: #263171;
	--color-secondary-hex: 38, 49, 113;
	
	--opacity-hover-buttons: 0.8;
	--box-shadow-input-blur: 0.2;
	--opacity-active-nav: 0.07;

}

/* --------- Elements colors ----------- */

/* Colores para botones de bootstrap */

.btn-primary, 
.btn-primary:focus, 
.btn-primary:active{
	background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
}

.btn-primary:hover{
	background-color: rgba(var(--color-primary-hex), var(--opacity-hover-buttons)) !important;
	border-color: rgba(var(--color-primary-hex), var(--opacity-hover-buttons)) !important;
}

.btn-outline-primary, 
.btn-outline-primary:focus, 
.btn-outline-primary:active{
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
	background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.show>.btn-outline-primary.dropdown-toggle {
	background-color: rgba(var(--color-primary-hex), var(--opacity-hover-buttons)) !important;
	color: #fff !important;
}

.dropdown-item.active, .dropdown-item:active{
	background-color: rgba(var(--color-primary-hex), var(--opacity-hover-buttons)) !important;
}

/* Colores para el focus de los inputs */

.form-control:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 0.1rem rgba(var(--color-secondary-hex), var(--box-shadow-input-blur));
}

/* Colores para la barra de idioma: desktop y responsive*/

.container-seleccion_idioma a,
#nav_idioma,
.seleccion_idioma:before, 
#nav_idioma:before,
#dropdown_nav_idioma button:active,
#dropdown_nav_idioma button:focus,
#dropdown_nav_idioma button:hover:before,
#dropdown_nav_idioma button:hover
{
	background-color: var(--color-secondary) !important;
}

/* Colores del active en el menu izquierdo */

#pills-tab a.active{
	background-color: rgba(var(--color-secondary-hex), var(--opacity-active-nav)) !important;
	color: var(--color-secondary) !important;
	border-right: 4px solid var(--color-secondary);
}

@media (max-width: 1200px){
	
	#pills-tab a.active{
		border: 1px solid var(--color-secondary);
	}
}

@media (max-width: 1200px){
	#pills-tab{
        border-bottom: 1px solid var(--color-secondary);
    }
}

/* Colores del loader */

#container-loading{
	background: #ffffffa1;
}

#container-loading .spinner-grow{
    color: var(--color-secondary);
}

/* Colores del header sin login */

#HeaderStartWithoutLogin{
	background-color: var(--color-secondary);
}

/* ------------ Configuracion tamaño del logo ------------ */

/* ---------- Logo sin login ----------- */

#logo-main-votacion{
	height: 75px;
	display: block;
}

@media (max-width: 769px){
	#logo-main-votacion{
		display: none;
	}
}

/* Responsive */

#logo-main-votacion-movil{
	display: none;
}

@media (max-width: 769px){
	#logo-main-votacion-movil{
		height: 50px;
		display: block;
	}
}

/* ---------- Logo con login ----------- */

#HeaderStartWithLogin #logo-main-votacion{
	height: 40px;
}

@media (max-width: 1200px){
	#HeaderStartWithLogin #logo-main-votacion{
		height: 35px;
	}
}

/* Responsive */

#HeaderStartWithLogin #logo-main-votacion-movil{
	display: none;
	height: 35px;
}

@media (max-width: 769px){
	#HeaderStartWithLogin #logo-main-votacion-movil{
		height: 35px;
		display: block;
		margin-left: .5rem;
	}
}