/*!
 =========================================================
 * Inventario Ganado - Finca La Loma - v2.7
 =========================================================
 * Copyright 2019 Fermin Osorio (www.Hnos-Osorio.com)
 =========================================================
 *	Este obra está bajo una licencia de Creative Commons 
 *	Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional.
 * 	https://creativecommons.org/licenses/by-nc-nd/4.0/
 */
 body{
	font-family: 'Open Sans', sans-serif;
	background-color:#140F31;
	background-attachment: fixed;
	background-size: cover;
}

@font-face {
	font-family: 'Open Sans', sans-serif;
	font-style: normal;
}

.rbt-300{
	font-weight: 300;
	background-image: ;
}
.rbt-400{
	font-weight: 400;
}
.rbt-600{
	font-weight: 600;
}
.text-bold{
	font-weight: bold;
}
.text-gris{
	color:#5e5e5e;
}
.text-blanco{
	color:#fff;
}
.text-estadistica{
	color:#7a7a7a;
	font-size:14px;
}
.text-estadistica-tab{
	color:#f1f1f1;
	font-size:14px;
	margin-bottom:10px;
}
.text-cantidad{
	color: #0f60a1;
	font-size:22px;
}
.text-titulo-cantidad{
	color: #5b666f;
	font-size:15px;
	font-weight: 600;
}
.stretch {
	display:inline-block;
	-webkit-transform:scale(3,1); /* Safari and Chrome */
	-moz-transform:scale(3,1); /* Firefox */
	-ms-transform:scale(3,1); /* IE 9 */
	-o-transform:scale(3,1); /* Opera */
	transform:scale(3,1); /* W3C */
}
@keyframes pulse-loading{
	0%{
		background-color: rgba(165, 165,165,.1);
	}50%{
		background-color: rgba(165,165,165,.3);
	}100%{
		background-color: rgba(165,165,165,.1);
	}
}
@-webkit-keyframes pulse-loading{
	0%{
		background-color: rgba(165, 165,165,.1);
	}50%{
		background-color: rgba(165,165,165,.3);
	}100%{
		background-color: rgba(165,165,165,.1);
	}
}
.skeleton-estadistica{
	background-color: rgb(236, 236, 236);
	width:140px;
	height:15px;
	animation: pulse-loading 1.5s infinite ease-in-out;
	-webkit-animation: pulse-loading 1.5s infinite ease-in-out;
}
#estadistica-loading{
	display: none;
}
#footer-info{
	color: #dadada;
	font-size:15px; 
}
#footer-sub-info{
	color: #e9e9e9;
	font-size:12px; 
}
.skeleton-estadistica2{
	background-color: rgb(236, 236, 236);
	width:50px;
	height:15px;
	animation: pulse-loading 1.5s infinite ease-in-out;
	-webkit-animation: pulse-loading 1.5s infinite ease-in-out;
	margin-top:15px;
}
.skeleton-estadistica3{
	background-color: rgb(236, 236, 236);
	width:200px;
	animation: pulse-loading 1.5s infinite ease-in-out;
	-webkit-animation: pulse-loading 1.5s infinite ease-in-out;
	height:15px;
}
.skeleton-icon{
	background-color: rgb(236, 236, 236);
	animation: pulse-loading 1.5s infinite ease-in-out;
	-webkit-animation: pulse-loading 1.5s infinite ease-in-out;
}
#web{
	display:hidden;
	overflow-x:hidden;
}
#loginBtn{
	width: 100%;
}

#vacasVendidas{
	display:none;
}
#disminuyo-total{
	display: none;
}
#aumento-total{
	display: none;
}
#aumento-macho{
	display: none;
}
#disminuyo-macho{
	display: none;
}
#aumento-hembra{
	display: none;
}
#disminuyo-hembra{
	display: none;
}
/* Gradientes y fondos*/
.gradient-orange{
	background: #f46b45;
	background: -webkit-linear-gradient(to left, #f46b45, #eea849);
	background: linear-gradient(to left, #f46b45,#eea849);
}
.gradient-yellow{
	background: #FF512F;
	background: -webkit-linear-gradient(to right, #fec42c, #ffad3e);
	background: linear-gradient(to right, #fec42c, #ffad3e);
}
.gradient-green{
	background: #2dce89;
	background: -webkit-linear-gradient(to left, #2dce89, #2dcecc);
	background: linear-gradient(to left, #2dce89, #2dcecc);
}
.gradient-blue{
	background: #005c97; 
	background: -webkit-linear-gradient(to right, #005c97, #363795);
	background: linear-gradient(to right, #005c97, #363795);
}
.gradient-pink{
	background: #db3fac;
	background: -webkit-linear-gradient(to left, #db3fac, #b91d73);
	background: linear-gradient(to left, #db3fac, #b91d73);
}
.gradient-gris{
	background: #ededfe;
	background: -webkit-linear-gradient(to left, #ededfe, #e0dded);
	background: linear-gradient(to left, #ededfe, #e0dded);
}
.gradient-rojo{
	background: #cb2d3e;
    background: -webkit-linear-gradient(to bottom, #ef473a, #cb2d3e);
    background: linear-gradient(to bottom, #ef473a, #cb2d3e);
}
.gradient-rojo-dos{
	background: #DA4453;
    background: -webkit-linear-gradient(to right, #89216B, #DA4453);
    background: linear-gradient(to right, #89216B, #DA4453);
}
.gradient-verde-dos{
	background: #159957;
    background: -webkit-linear-gradient(to right, #155799, #159957);
    background: linear-gradient(to right, #155799, #159957);
}
.gradient-tabla{
   background: #E44D26;
   background: -webkit-linear-gradient(to bottom, #F16529, #E44D26);
   background: linear-gradient(to bottom, #F16529, #E44D26);
}

.bg-primario{
    background-color: #140F31;
}
.bg-login{
	background: rgba(11,76,127,0.6);
   
}
.bg-gris{
	background-color:#f6f6f6;
}


/* Sombras */
.shadow-inset{
	-webkit-box-shadow: inset 0px 12px 11px 0px rgba(50, 50, 50, 0.12);
	-moz-box-shadow: inset 0px 12px 11px 0px rgba(50, 50, 50, 0.12);
	box-shadow: inset 0px 4px 50px 0px rgba(50, 50, 50, 0.12)
}
.shadow-box{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}
.shadow-orange{
	box-shadow: 0 4px 8px 0 rgba(255, 116, 3, 0.23), 0 6px 20px 0 rgba(255, 116, 3, 0.23);
}
.shadow-blue{
	box-shadow: 0 4px 8px 0 rgba(3, 71, 148, 0.23), 0 6px 20px 0 rgba(3, 71, 148, 0.23);
}
.shadow-pink{
	box-shadow: 0 4px 8px 0 rgba(216, 59, 214, 0.23), 0 6px 20px 0 rgba(216, 59, 214, 0.23);
}
.shadow-green{
	box-shadow: 0 4px 8px 0 rgba(50, 191, 7, 0.23), 0 6px 20px 0 rgba(50, 191, 7, 0.23);
}
.shadow-red{
	box-shadow: 0 4px 8px 0 rgba(200, 12, 47, 0.23), 0 6px 20px 0 rgba(200, 12, 47, 0.23);
}
.shadow-yellow{
	box-shadow: 0 4px 8px 0 rgba(255, 183, 9, 0.23), 0 6px 20px 0 rgba(255, 183, 9, 0.23);
}

/* Boxes */

#estadisticasBtn{
	cursor: pointer;
}
#finanzasBtn{
	cursor: pointer;
}
.barraSecciones{
	height:5px;
	width:100%;
}
.datos-usuario{
	margin-left:20px;
	margin-right:20px;
	padding-top:40px;
	padding-bottom:20px;
	color:#0c60a1;
	border-bottom: 1px solid #dddddd;
}
.navbar-side {
  height: 100%;
  width: 22%;
  position: fixed;
  top: 0;
  right: 0;
  padding: 0;
  list-style: none;
  background-color: #f9f9f9;
  overflow-y: scroll;
  z-index: 1000;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: 300ms ease;
  transition: 300ms ease;
}
@media (max-width: 736px) {
  .navbar-side {
    width:70%;
  }
}
 .navbar-side-item {
	margin-left:20px;
	padding:11px;
	color: #3a3b45;
}
#navbarSideButton{
	float:left;
	position:absolute;
	z-index:50;
	right: 0;
	margin:30px;
}
#usuario{
	display: none;
	float:left;
	position:absolute;
	z-index:50;
	right: 0;
	margin-top:-1%;
	margin-right:10px;
}
#menu-movil{
	position:fixed;
	bottom:0;
	z-index:100;
	background-color: #f9f9f9;
	padding:8px;
	padding-bottom:2rem;
	display:none;
	border-top: 0.5px solid #f1f1f1;
}
@supports (backdrop-filter: none) or (-webkit-backdrop-filter: none) {
	#menu-movil {
			background:  rgba(255, 255, 255, 0.9);
			-webkit-backdrop-filter: blur(10px) saturate(3);
			backdrop-filter: blur(10px) saturate(3)
	}
}

.boton-menu{
	cursor:pointer;
	color:#a1a1a1;
	text-decoration: none;
	font-size:24px;
	transition:0.5s;
}
.boton-menu:hover{
	color:#140f31;
	transition:0.5s;
}
.activo{
	color:#140f31;
}

.text-icono{
	color: #d1d3e2;
	font-weight: 600;
}
.nav-link-side{
	color: #5b666f;
	transition:0.5s;
	text-decoration: none;
	font-weight: 400;
	font-size:15px;
}
.nav-link-side:hover{
	color:#5b666f;
	text-decoration:none;
}
.text-titulos{
	color: #0c60a1;
}
.text-subtitulos{
	color: #999999;
	font-size:15px;
}
.overlay {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background-color: rgba(0,0,0,0.4);
  z-index: 990;
}
.box-info{
	cursor:pointer;
	-webkit-transition: 0.5s ease-in-out;
	border-style:solid;
	border-width:1px;
	border-color:#d7d7d7;
	background-color: white;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03), 0 3px 10px 0 rgba(0, 0, 0, 0.03);
	border-radius: 8px;
}
.layer{
	background-image: url(../img/layer.png);
	color:white;
}
.box-icono{
	border-radius: 8px;
	cursor:pointer;
	-webkit-transition: 0.5s ease-in-out;
	margin-top: -55px;
	padding-top:30px;
	padding-left:45px;
	padding-right:45px;
	padding-bottom:30px;
}
.highlight {
 background-color: red;
 color: white;
}
.input-group {
    flex-wrap: wrap!important;
}

.input-group .invalid-feedback {
    flex-basis: 100%!important;
}
.box-title{
	border-radius:8px;
	text-align:center;
}
.box-title-inner{
	border-radius:8px;
	padding:25px;
}
.box-salir{
	cursor:pointer;
}
.box-data{
	border-radius: 15px;
	-webkit-transition: 0.5s ease-in-out;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.13), 0 5px 10px 0 rgba(0, 0, 0, 0.13);
}
.text-box{
	font-size:20px;
	overflow-wrap: break-word;
	color:white;
	text-align: center;
}
.loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    background-color: #140F31;
    display:none;
}
.spinner {
  margin: 300px auto 0;
  width: 70px;
  text-align: center;
}
.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

.text-box-register{
	font-size:20px;
	overflow-wrap: break-word;
	color:white;
	text-align: center;
}
.number-box{
	font-size:30px;
	overflow-wrap: break-word;
	color:white;
	text-align: center;
}

td:first-child{
	transition:0.4s;
}
td:first-child:hover{
	color:#737373;
	cursor:pointer;
}

/*the container must be positioned relative:*/
.autocomplete {
    position: relative;
    display: inline-block;
  }
.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 1000;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
  }
  
  .autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff; 
    border-bottom: 1px solid #d4d4d4; 
  }
  
  /*when hovering an item:*/
  .autocomplete-items div:hover {
    background-color: #e9e9e9; 
  }
  
  /*when navigating through the items using the arrow keys:*/
  .autocomplete-active {
    background-color: DodgerBlue !important; 
    color: #ffffff; 
  }