@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900');

body{
	font-family: 'Lato', sans-serif !important;
	font-size: 75% !important; color: #272727 !important;}
body > li >a{font-size: 12px !important;}

.no-print{display: none !important; }
/* Hr division */
hr{border-top: 1px solid #8a0013 !important;}


.navbar-static-top{-moz-box-shadow: -1px 0px 11px #f0f0f0 !important; -webkit-box-shadow: -1px 0px 11px #f0f0f0 !important; box-shadow: -1px 0px 11px #f0f0f0 !important; height: auto !important;}

/* Fondos */
#content{background-size: cover; min-height: 100vh !important;}
/*.outer{background: rgba(239, 239, 239, 0.30) !important; min-height: 83vh;}*/
.outer{
	background: none !important;
	min-height: 83vh;
	padding-top: 70px;
}


.head{
	background: #8a0013;
	color: #FFF;
	min-height: 50px;
	border: 0px;
	font-size: 1.2em;
  display: block;
  position: fixed;
  z-index: 888;
  width: 100%;
  top: 7%;
  }

footer{background: rgba(239, 239, 239, 0.84) !important;}
.bg-light{background: none !important;}

/* Menu left */
#left{box-shadow: none !important; border-right: 2px solid #FFF !important;}
#menu > li > a, .sub-menu >li > a{ font-size: 90% !important; font-weight: 600; color: #030380;}
#menu > li > a > i, .sub-menu >li > a > i{ font-size: 1.2em !important;} /* Iconos del menu */
#menu li:not(.active) a:hover {border-left: 4px solid #DCDCDC !important; background-color: #030380 !important; color: #FFF;}
#menu > li.active {background-color: #030380 !important;}
#menu li.active ul li.active > a { background-color: #4242A0 !important; }

/* Menu para la vista de empresas */
#menu_emp{list-style: none; float: left;}
#menu_emp > li{display: inline-block;}
#menu_emp > li > a{padding: 11px; color: #030380; font-weight: bold;}
#menu_emp > li > a > i{margin-bottom: 10px; display: block;}

.navbar-fixed{
	display: block;
	position: fixed;
}
/* Hover enlaces */
/*#menu_emp > li > a:hover{color: #8a0013;}*/


/* Tarjetas */
.card:hover{box-shadow: none !important;}
.card{border-radius: 0px !important; border: 2px solid #e2edeb;}
.card-header > h1,
.card-header > h2,
.card-header > h3,
.card-header > h4,
.card-header > h5,
.card-header > h6,
.card-header > div > div >h1,
.card-header > div > div >h2,
.card-header > div > div >h3,
.card-header > div > div >h4,
.card-header > div > div >h5,
.card-header > div > div >h6,
.card-header > div > div > a > i
{color: #8a0013 !important;}

/* Dropdown menu top */
/*.dropdown-menu{width: auto !important; left: 30% !important; top: 33px; background: #FFF !important; border-radius: 0px !important; border-top: 2px solid #e2edeb !important; border-bottom: 2px solid #e2edeb !important; border-left: 2px solid #e2edeb !important; border-right: 2px solid #e2edeb !important; }*/
.dropdown-menu::before {top: -12px !important; border-bottom-color: #8a0013 !important;}
/* Btn deactivacion para el menu izquierdo */
/*#btn-menu-left{padding: 15px;}
#btn-menu-left:hover{background: #ebebeb; cursor: pointer; -webkit-transition: background 0.5s Ease-in-out; -moz-transition background 0.5s Ease-in-out; -o-transition: background 0.5s Ease-in-out; -ms-transition background 0.5s Ease-in-out; transition: background 0.5s Ease-in-out;}
*/


/* Btn default */
.btn-success{background: #408630 !important; border: none !important; }
.btn-success:hover{background: #3f6c47 !important; border: none !important;}


.logo_login{height: 200px; width: auto; }
.logo-nav-top{height: 30px; width: auto; }
.login_section_black input:focus, .login_section_black input:active, .login_section_black input {color: #000; }
.background{ display: block; position: absolute; width: 100%; height: 100vh; /*height: auto;*/ }
.login_section_black input:focus, .login_section_black input:active, .login_section_black input { color: #000; }
.img-responsive{width: 100%; height: auto; }




/* Tablas */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.22);
  color: #000;
}
.table-striped tbody tr a {
  color: #000;
}
table > thead{
	background: rgba(37, 56, 88, 0.80);
	color: #FFF;
}

table > thead > tr > th {
	text-align: center;
}

/* Alineaciones, y estilos para el texto */
.justify{text-align: justify; }
.text-center{text-align: center;}
.uppercase{text-transform: uppercase; }



/* Margin's y Padding's*/
.p-t-30{padding-top: 30px;}
.p-t-35{padding-top: 35px;}
.p-t-40{padding-top: 40px;}
.p-t-45{padding-top: 45px;}
.p-t-50{padding-top: 50px;}
.p-t-55{padding-top: 55px;}
.p-t-60{padding-top: 60px;}
.p-l-10{padding-left: 10px}
.p-b-50{padding-bottom: 50px;}

.m-t-10{margin-top: 10px;}
.m-t-20{margin-top: 20px;}
.m-t-30{margin-top: 30px;}
.m-t-40{margin-top: 40px;}
.m-t-50{margin-top: 50px;}
.m-b-50{margin-bottom: 50px;}
.m-t-60{margin-top: 60px;}
.m-t-70{margin-top: 70px;}
.m-t-80{margin-top: 80px;}
.m-t-90{margin-top: 90px;}
.m-t-100{margin-top: 100px;}

.m-l-10-lg{margin-right: 10px}
.m-l-20-lg{margin-right: 20px}
.m-r-10-lg{margin-right: 10px}
.m-r-20-lg{margin-right: 20px}


.m-b-10{margin-bottom: 10px;}
.m-b-20{margin-bottom: 20px;}
.m-b-30{margin-bottom: 30px;}
.m-b-40{margin-bottom: 40px;}
.m-b-50{margin-bottom: 50px;}
.m-b-60{margin-bottom: 60px;}
.m-b-70{margin-bottom: 70px;}
.m-b-80{margin-bottom: 80px;}
.m-b-90{margin-bottom: 90px;}
.m-b-100{margin-bottom: 100px;}


/* Colores de texto */
.grey-text{color: grey; }
.text-blue{color: #030380;}



/* Colores de fondo */
.green{
	background-color:#63CD00;
  color:white;
  padding: 5px;
  border-radius: 5px;
  text-align: center;
  --moz-box-shadow: 3px 1px 16px rgba(184,184,184,0.50);
  -webkit-box-shadow: 3px 1px 16px rgba(184,184,184,0.50);
  box-shadow: 3px 1px 16px rgba(184,184,184,0.50);
}
.red{
	background-color:#F22B2B;
	color:white;
	padding: 5px;
  border-radius: 5px;
  text-align: center;
  --moz-box-shadow: 3px 1px 16px rgba(184,184,184,0.50);
  -webkit-box-shadow: 3px 1px 16px rgba(184,184,184,0.50);
  box-shadow: 3px 1px 16px rgba(184,184,184,0.50);
}
.bg-blue{
	background: rgba(37, 56, 88, 0.80);
  color: #FFF !important;
}



/* Estilo de status */
.activo{
  background-color:#63CD00;
  color:white;

	padding: 5px;
  border-radius: 5px;
  text-align: center;
  --moz-box-shadow: 3px 1px 16px rgba(184,184,184,0.50);
  -webkit-box-shadow: 3px 1px 16px rgba(184,184,184,0.50);
  box-shadow: 3px 1px 16px rgba(184,184,184,0.50);
}

.vencida{
	background-color:#F22B2B;
	color:white;

	padding: 5px;
  border-radius: 5px;
  text-align: center;
  --moz-box-shadow: 3px 1px 16px rgba(184,184,184,0.50);
  -webkit-box-shadow: 3px 1px 16px rgba(184,184,184,0.50);
  box-shadow: 3px 1px 16px rgba(184,184,184,0.50);
}

.por_vencer {
    background-color: #42C1F2;
    color: white;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    --moz-box-shadow: 3px 1px 16px rgba(184,184,184,0.50);
    -webkit-box-shadow: 3px 1px 16px rgba(184,184,184,0.50);
    box-shadow: 3px 1px 16px rgba(184,184,184,0.50);
}


/* Validacion de campos */
.required > label{color: #4C4C4C !important; font-weight: 800;}


/* Tamaños de textos */
.fs-5{font-size: .5em;}
.fs-6{font-size: .6em;}
.fs-7{font-size: .7em;}
.fs-8{font-size: .8em;}
.fs-9{font-size: .9em;}
.fs-10{font-size: 1em;}
.fs-11{font-size: 1.1em;}
.fs-20{font-size: 1.2em;}
.fs-30{font-size: 1.3em;}
.fs-40{font-size: 1.4em;}
.fs-50{font-size: 1.5em;}
.fs-60{font-size: 1.6em;}
.fs-70{font-size: 1.7em;}
.fs-200{font-size: 2em;}
.fs-210{font-size: 2.1em;}
.fs-220{font-size: 2.2em;}

.fw-800{font-weight: 800 !important;}
.fw-700{font-weight: 700;}
.fw-600{font-weight: 600;}
.fw-500{font-weight: 500;}


/* Estilos para cursores */
.cursor-pointer{cursor: pointer;}


/* Estilo flex */
.float-right{float: right;}
.float-right-lg{float: right;}
.flex-center{display: flex ; flex-direction: row ; flex-wrap: wrap ; justify-content: center ; align-items: center ; align-content: center ;}
.flex-center-left{display: flex ; flex-direction: row ; flex-wrap: wrap ; justify-content: flex-start ; align-items: center ; align-content: center ;}
.flex-center-rigth{display: flex ;
flex-direction: row ;
flex-wrap: wrap ;
justify-content: flex-end ;
align-items: center ;
align-content: flex-start ;}

/* Estilo para los botones */
button{
  position: relative;
  overflow: hidden;
}
button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, .5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  20% {
    transform: scale(25, 25);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}

button:focus:not(:active)::after {
  animation: ripple 1s ease-out;
}


/* Media Querys para dispositivo menor a los 414px */
@media only screen and (max-width: 716px) {
	.flex-center-sm{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center;}



	.d-b-sm{display: block; width: 100%;}
	.hidden-sm{display: none !important;}


	/* Margin Top para dispositivos mobiles */
	.m-t-10-sm{margin-top: 10px;}
	.m-b-10-sm{margin-bottom: 10px;}
	.m-t-20-sm{margin-top: 20px;}
	.m-b-20-sm{margin-bottom: 20px;}
	.m-t-30-sm{margin-top: 30px;}
	.m-b-30-sm{margin-bottom: 30px;}
	.m-t-40-sm{margin-top: 40px;}
	.m-b-40-sm{margin-bottom: 40px;}
	.m-t-50-sm{margin-top: 50px;}
	.m-b-50-sm{margin-bottom: 50px;}

	.m-l-10-sm{padding-right: 10px}
	.m-l-20-sm{padding-right: 20px}
	.m-r-10-sm{padding-right: 10px}
	.m-r-20-sm{padding-right: 20px}


	/* Reset de clases */
	.m-l-10-lg{margin-right: 0px}
	.m-l-20-lg{margin-right: 0px}
	.m-r-10-lg{margin-right: 0px}
	.m-r-20-lg{margin-right: 0px}

	/* Pading Top para dispositivos moviles */
	.p-t-10-sm{padding-top: 10px;}
	.p-b-10-sm{padding-bottom: 10px;}
	.p-t-20-sm{padding-top: 20px;}
	.p-b-20-sm{padding-bottom: 20px;}
	.p-t-30-sm{padding-top: 30px;}
	.p-b-30-sm{padding-bottom: 30px;}
	.p-t-40-sm{padding-top: 40px;}
	.p-b-40-sm{padding-bottom: 40px;}
	.p-t-50-sm{padding-top: 50px;}
	.p-b-50-sm{padding-bottom: 50px;}

	.p-l-10-sm{padding-left: 10px}
	.p-l-20-sm{padding-left: 20px}

	/* Alineacion de textos */
	.text-center-sm{text-align: center !important;}
	.text-sm-right{text-align: right;}
	.text-sm-left{text-align: left;}

	/* Ancho para menu top */
	#top{height: auto !important;}


	/* Estilo flotante para elementos */
	.float-right-lg{float: left;}

}