
:root{
	--color-primario:#f57e22;
	--color-secundario:#5b5c60;
	--color-primario-oscuro:#cf6819;
	--color-secundario-oscuro:#444446;
	--color-success:#f57e22;
}
html,body{
	font-family:"open-sans",sans-serif ;
	font-weight: normal;
	font-size: 1rem;
}
table, table button.btn-sm{
	font-size: 0.75rem;

}
.encabezado-tabla-color {
	background-color: var(--color-secundario);
	color: white;
	text-align: center;
}
.btn-primario{
	background-color: var(--color-primario);
	color: white;
}
.btn-primario:hover,.btn-primario:active,.btn-primario:focus{
	background-color: var(--color-primario-oscuro);
	color: white;
}
.btn-secundario{
	background-color: var(--color-secundario);
	color: white;
}

.btn-secundario:hover,.btn-secundario:active,.btn-secundario:focus{
	background-color: var(--color-secundario-oscuro);
	color: white;
}
.btn-outline-primario{
	background-color: white;
	border:0.0625rem solid var(--color-primario);
	color: var(--color-secundario);
}
.btn-outline-primario:hover,.btn-outline-primario:active{
	background-color:var(--color-primario);
	border:0.0625rem solid ;
	color: white;
}
.btn-outline-secundario{
	background-color: white;
	border:0.0625rem solid var(--color-secundario);
	color: var(--color-primario);
}
.btn-outline-secundario:hover,.btn-outline-secundario:active{
	background-color:var(--color-secundario);
	border:0.0625rem solid ;
	color: white;
}

.activo,.activo:active{
	background-color: var(--color-primario) !important;
	color: white !important;
	transition: background-color 0.2s;
}
.activo:hover{
	background-color: var(--color-primario-oscuro) !important;
	color: white !important;
}

.border-start-secundario{
	border-left: 0.4rem solid transparent !important;
	transition: border 0.2s;
	background-color: white;;
}
.border-start-secundario.activo,.border-start-secundario.activo:active,.border-start-secundario.activo:focus{
	border-left:0.4rem solid var(--color-secundario) !important;
	background-color:white !important;
	color:var(--color-secundario-oscuro) !important;
}
.border-start-secundario.activo:hover{
	border-left:0.4rem solid var(--color-secundario-oscuro) !important;
}

.bg-primario{
	background-color: var(--color-primario);
	color: white;
	font-weight: bold;
}
.bg-success{
	background-color: var(--color-success);
	color: white;
	font-weight: bold;
}
.vh-85{
	height: 85vh;
}
.vh-75{
	height: 75vh;
}
.vh-70{
	height: 70vh;
}
.mvh-30{
	max-height: 30vh;
}
.mvh-70{
	max-height: 70vh;
}
.mvh-80{
	max-height: 80vh;
}
.mvh-60{
	max-height: 60vh;
}
*::-webkit-scrollbar {
	width: 0.3rem;               /* width of the entire scrollbar */
	height: 0.3rem;
}
  
  *::-webkit-scrollbar-track {
	background: white;        /* color of the tracking area */
  }
  
  *::-webkit-scrollbar-thumb {
	background-color: var(--color-primario);    /* color of the scroll thumb */
	border-radius: 0.7rem;       /* roundness of the scroll thumb */
	border: 0.12rem solid var(--color-primario);  /* creates padding around scroll thumb */
  }
@media screen and (max-width:992px){
	*::-webkit-scrollbar {
		width: 0.1rem;               /* width of the entire scrollbar */
		height: 0.1rem;
	}
	  
	  *::-webkit-scrollbar-track {
		background: white;        /* color of the tracking area */
	  }
	  
	  *::-webkit-scrollbar-thumb {
		background-color: var(--color-primario);    /* color of the scroll thumb */
		border-radius: 0.7rem;       /* roundness of the scroll thumb */
		border: 0.12rem solid var(--color-primario);  /* creates padding around scroll thumb */
	  }

	  body *::-webkit-scrollbar-track {
		background-color: white;        /* color of the tracking area */
	  }
	  
	  body *::-webkit-scrollbar-thumb {
		background-color:white;    /* color of the scroll thumb */
		border-color: silver;  /* creates padding around scroll thumb */
	  }
}

/*a partir de medium*/
@media screen and (min-width:768px){
	.w-md-25{
		width: 25% !important;
	}
	.w-md-75{
		width: 75% !important;
	}
	.w-md-50{
		width: 50% !important;
	}
	.mvh-md-40{
		max-height: 40vh;
	}
}
@media screen and (min-width:992px){
	.mvh-lg-70{
		max-height: 70vh;
	}
}