/* Body */
.color-fondo-app {
  background: #121E2D;
}

/* Forms */
.form-control {
  border-radius: 0px;
  background-color: #121E2D !important;
}

input.form-control {
  text-align: center;
}


/* Labels */
.control-label::after{
  background-color: rgba(0, 0, 0, 0) !important;
}

/* Inputs */
.bordes {
  border-radius: 5px;
}

/* Card */
.card {
  margin-top: 25px;
  margin-bottom: 25px;
  border: none;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.card-header {
  text-align: center;
  background: #000000 !important;
  color: #E9D1AE !important;
}

.card-body {
  background-color: #E9D1AE!important;

}
.alturaMax {
  max-height: 340px; 
  overflow-y: auto; 
  overflow-y: scroll;
}

.cardFondoBolsillo {
  background-color:#121E2D !important;
  background-image: url('Imagen1.png')!important;
  background-repeat: repeat !important;
  background-size: 1cm 0.5cm !important;
}

.cardHeaderFondoBolsillo {
  background-color:#889B9C !important;
  color:rgb(255, 255, 255) !important;
  width: 90%; 
  margin-top: -20px;
}

.botonCardBolsilloEdit {
  background-color:#55995C !important;
  color:rgb(255, 255, 255) !important;
}

.botonCardBolsilloEdit:active {
  background-color:#389940 !important;
  border-color: #389940;
  color:rgb(255, 255, 255) !important;
}

.botonCardBolsilloEdit:hover {
  background-color:#91ff9a !important;
  border-color: #91ff9a;
  color:rgb(0, 0, 0) !important;
}

.cardFooterFondoBolsillo {
  background-color:#889B9C !important;
  color:rgb(255, 255, 255) !important;
  width: 100%;
  text-align: center; 
}

/* FORMATO PARA EL PRESUPUESTO EN CARD */
.formatoMoneda{
  text-align: center; 
  height: 40%; 
  font-size: calc(20px + (40 - 20) * ((100vw - 320px) / (1200 - 320)));
  white-space: nowrap;
}

/* ANCHO CARD LOGIN Y REGISTER */
.anchoMaximoCardLogin{
  max-width: 400px;
  margin: 0 auto;
}

.textoListaBolsillos{
  padding-left: 10px !important;
  padding-right: 5px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 40px;
}

/* INFO SELECCIÓN BOLSILLO */
.infoSelecBolsillo{
  background-color: #818A7A;
  color:#fff
}

/* MODAL CARGANDO */
 #loading-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.bg-loading-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.mc-loading-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #00000000;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

/* TABLAS */

.colorHeadTable{
  padding: 10px;
  background: #E9D1AE !important;
  color: #000000 !important;
  text-align: center;
}

.colorHeadTable2{
  padding: 10px;
  background-color: #121E2D !important;
  color: #E9D1AE !important;
  text-align: center;
}

td {
  vertical-align: middle;
}

/* BOTONES TABLAS */
.controlTdBotones {
  overflow-x: auto;
  min-width: 85px;
}
td button {
  display: inline-block;
  width: 40%;
}

/* ALINEACIÓN A LA IZQUIERDA */
.controlAlineacionValorGasto{
  text-align: right;
  /* font-family: Arial, sans-serif; */
}

/* INTERLINEADO CELDA DESCRIPCION GASTO */
.controlInterlineadoGasto{
  line-height: 1.1;
}

/* SELECT */
.list-group-item.active {
  background-color: #0dcaf0 !important;
  border-color: #121E2D !important;
  color: #121E2D !important;
  font-weight: bold !important;
}

.form-check-input:checked {
  background-color: #0d4ba6 !important;
  /* border-color: rgb(255, 72, 0) !important; */
}

/* bloque informativo */
.informacion{
  padding: 10px;
  font-size: small;
  text-align: justify;
  color: #ffffff;
  background-color: #889B9C;
  border-left: 10px solid black;
  border-left-color: #647475;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* DIV SITIO MERCADO */
.divSitioMercado{
  background-color: #889B9C !important; 
  margin-bottom: 10px !important;
}

/* SITIO Y TOTAL MERCADO */
.sitioMercado{
  text-align: center !important; 
  background-color: #889B9C !important; 
  color: #fff !important; 
  font-weight: bold !important; 
  font-size: medium !important;
}

/* LABEL SITIO MERCADO */
.labelSitioMercado{
  color:#fff !important;
}

.labelDivPrincipal{
  color:#6A6777 !important;
}
/* INPUT MERCADO */
.inputMercado{
  text-align: center !important; 
  background-color: #121E2D !important;
  border-color: #889B9C !important;
  color: #889B9C !important; 
  font-weight: bold !important; 
  font-size: small !important; 
  padding-top:20px !important; 
  height:40px !important; 
  margin:0% !important;
}

/* LABEL MERCADO */
.labelMercado {
  padding:5% !important;
}

.opcionActivadaDivPrincipal {
  background-color: #E9D1AE !important;
}

.opcionActivadaInputs {
  background-color: #889B9C !important;
  color: #fff !important; 
  /* border-color: #6A6777 !important; */
}

.opcionActivadaLabelPrincipal {
  color: #121E2D !important; 
}

.opcionActivadaLabels {
  color: #fff !important; 
}

/* DIV ELEMENTOS */
.divPrincipal{
  margin-bottom: 10px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ITEM NUEVO */
.nuevoElemento {
  box-shadow: 0 0 10px 2px rgba(14, 232, 240, 0.785);
  animation: fadeIn 1.5s;
  animation-fill-mode: forwards;
}

.contenedor {
  position: relative;
  min-height: 100px;
}

.buttonEliminarElemento{
  position: absolute;
  right: 5px;
  top: 20px;
  height: 50px;
    z-index: 1;
}

.contenido {
  position: absolute;
  z-index: 2;
}

.boton-icono {
  position: absolute;
  top: 3px;
  right: 3px;
  background: none;
  border: none;
  cursor: pointer;
  color: #889B9C;
}

.boton-icono i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.boton-icono.clic i {
  transform: rotate(180deg);
}

/* PAGINA PRINCIPAL HOME */
.principal{
  padding-top: 7rem;
  padding-bottom: 7rem;
  max-width: 100%;
}

.principal .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}

.principal .col-lg-4 p {
  margin-right: .100rem;
  margin-left: .100rem;
} 

.bodyPrincipal{
  padding-top: 7%;
  padding-bottom: 10%;
  background-size:cover;
  background-position:top;
  background-repeat: no-repeat;
  position:relative;
  /* background-image: linear-gradient(to top, rgba(18, 30, 45, 0.8), transparent), url('ImagenOroFondo.jpg'); */
  background-image: url('ImagenOroFondo.jpg');
}

.footer {
  margin-top: 20px;
  margin-bottom: 20px;
}

.label-text-center{
  text-align: center !important;
}