.show-on-scroll {
  position: fixed;
  top: -60px; /* ajusta el valor según el tamaño de tu navegador */
  transition: top 0.3s ease-in-out;
  z-index: 10;
}

.show-on-scroll.show {
  top: 0;
}

/* para el nav bottom */
.nav-bottom-onScroll{
  background: #fbfbfb;
  position: fixed;
  bottom: -50px; /* ajusta el valor según el tamaño de tu navegador */
  transition: bottom 0.3s ease-in-out;
  z-index: 1;
}


.nav-bottom-onScroll.show-nav-bottom{
  bottom: 0px;
}

.nav-bottom-onScroll:hover{
  bottom: 0px;
}
/* para el nav bottom */

.totales{
  height: 90px;
  background: #fbfbfb;
  position: fixed;
  bottom: 60px; /* ajusta el valor según el tamaño de tu navegador */
  transition: bottom 0.3s ease-in-out;
  z-index: 1;
}


.totales.show{
  bottom: 0px;
}

.deuda{
  color: #cd5d5b;
font-size: 26px;
font-weight: bold;
}
.total{
  color: grey;
font-size: 26px;
font-weight: bold;
}
.pagado{
  color: #9bcd31;
font-size: 26px;
font-weight: bold;
}

@media (min-width: 500px) {
    .total,
    .deuda,
    .pagado {
        font-size: 20px;
    }


}


/* para el sub-nav superior */

.fijo-arriba{
position: fixed;
top: 0px;
transition: top 0.3s ease-in-out;
z-index: 9;
}
.fijo-abajo{
position: fixed;
top: 60px;
transition: top 0.3s ease-in-out;
z-index: 9;
}
/* para el sub-nav superior */





a{
  text-decoration: none;
  color: #808080;
}
.content-wrapper{
  margin-top: 150px;
  margin-bottom: 80px;

}
.content-wrapper .body{

justify-content: space-around;

}

.bg-primary{
  background: #323232 !important;
  box-shadow: 0px 4px 20px 5px rgb(0 0 0 / 19%);
}

.logo{
  box-shadow: 0px 4px 20px 5px rgb(0 0 0 / 19%);
  border-radius: 50%;
}

.servicioType{
  cursor: pointer;
}
/* .bg-primary i, p{
color: white;
} */

.red{
  background: indianred;
  /* color: white; */
  padding: 2px;
  border-radius: 15px;
}
.yellow{
  background: #ffc006;
  /* color: white; */
  padding: 2px;
  border-radius: 15px;
}
.green{
  background: yellowgreen;
  /* color: white; */
  padding: 2px;
  border-radius: 15px;
}
.blue{
  background: #0799d0;
  /* color: white; */
  padding: 2px;
  border-radius: 15px;
}

.boton-navegador-footer{
  padding-top: 4px;
  padding-bottom: 4px;
}


.fas{
  font-size: 20px;
  color: grey;
}

.imgChange{
  cursor: pointer;
  font-size: 23px !important;
  color: #888888 !important;
  margin: 6px !important;
}
.imgView{
    cursor: pointer;
}
.tablaServicios .fas{
  font-size: 17px;
  color: white;
}
.tablaClientes .fas{
  font-size: 17px;
  color: white;
}

.tablaClientes .fa-check{
  font-size: 17px;
  color: green;
}

.contactosBtn .fas {
  font-size: 26px;
  color: white;
}
.roundBtn .fas {
  color: white;
}

.contactosBtn{
  color: aliceblue;
      font-size: 33px;
      display: block;
      height: 60px;
      width: 60px;
      background: linear-gradient(310deg,#7928ca,#5174de);
      border-radius: 50px;
      padding: 6px 12px;
      box-shadow: 0px 0px 20px 4px rgb(0 0 0 / 15%);
      margin-top: -18px;


}
.contactosBtn:hover{
    color: aliceblue;
}
.contactosBtn:active{
    transform: scale(0.9);
}


.roundBtn{
  height: 40px;
    width: 40px;
    background: linear-gradient(310deg,#7928ca,#5174de);
    border-radius: 50px;
    border: none;
    padding: 8px 12px;
    box-shadow: 0px 0px 20px 4px rgb(0 0 0 / 15%);

}
.roundBtnNoColor{
      margin: 3px;
  height: 30px;
    width: 30px;
    border-radius: 50px;
        border: none;
    /* padding: 8px 12px; */
    box-shadow: 0px 0px 20px 4px rgb(0 0 0 / 15%);

}

.roundBtnEmpresa{
margin: 3px;
padding: 4px;
height: 30px;
color: #6f6f6f;
width: 30px;
border-radius: 50px;
border: none;
}

.miniTxt{
  font-size: 8px;
margin: 0;
}


/* .active {
  color: #5c65da !important;
} */
.active .fas{
  color: #5c65da !important;
}
.active .fab{
  color: #5c65da !important;
}


.card{
  border-radius: 20px;
  border: none;
    box-shadow: 5px 5px 7px 4px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);

}


.muestroDeuda {
  height: 5em;
  overflow-x: hidden;
  width: 100%;
}


.fa-whatsapp{
  font-size: 25px;
  color: grey;
}


.new-contact h5 {
  font-weight: 600;
}
.new-contact p {
  font-weight: 600;
}
.old-contact h5 {
  font-weight: 300;
}
.old-contact p {
  font-weight: 300;
}

.nav-contactos{

background: #ffffffbf;
}

.nav-contactos .fas{
font-size: 15px;
}
.nav-contactos .fab{
font-size: 18px;
}




/* contador de notificaciones */

#outer-notify-web,
#outer-notify-metricas,
#outer-notify-chat,
#outer-notify-bell,
#outer-notify-more {
   position: relative;
}


#notify-count-web,
#notify-count-metricas,
#notify-count-bell,
#notify-count-more {
  position: absolute;
  font-size: 14px;
  background: #ff007f;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  top: -22px;
  left: 9px;
 }

#notify-count-chat{
  position: absolute;
  font-size: 14px;
  background: #ff007f;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  top: -22px;
  left: 22px;
}

 .redondearInputs {
    border-radius: 50px !important;
}


.disable{
  opacity: 40%;
}

.landingContacto{
  top: 4px;
  /* position: absolute; */
  font-size: 10px;
  font-style: italic;
  /* padding-right: 13%; */
}

.rowServ{
  background:#b2b2b22b;
}
.rowServ p{
  font-style: italic;
  font-size: 13px;
}


.activo{
  font-style: italic;
  color: #08c36a;
}

.suspendido{
  font-style: italic;
  color: #e43c01;
}

.none{
  display: none;
}

.fa-calendar-alt{
  font-size: 21px;
color: grey;
}
.gris{
 color: grey;
}

.wrapperMenu {
    display: flex;
    overflow-x: auto;
    margin-bottom: 20px;
}

.wrapperMenu .item {
    min-width: 130px;
    padding: 7px;
    text-align: center;
    border-color: #ddd;
    margin-right: 8px;
    color: black;
}

.border-none{
  border: none;
}


.porVencer{

    height: 25px;
    width: 25px;
    background: #0699cf;
    border-radius: 50px;
    color: transparent;
    cursor: pointer;
}
.activo{

    height: 25px;
    width: 25px;
    background: yellowgreen;
    border-radius: 50px;
    color: transparent;
    cursor: pointer;
}
.suspendido{

    height: 25px;
    width: 25px;
    background: indianred;
    border-radius: 50px;
    color: transparent;
    cursor: pointer;
}
.pendiente{

    height: 25px;
    width: 25px;
    background: #ffc006;
    border-radius: 50px;
     color: transparent;
    cursor: pointer;
}


.completar{
  border: red solid;
}

.paginate_button {
  padding-left: 2%;
padding-right: 2%;
}

.spinner {

  animation: spin 1s cubic-bezier(0.22, 0.21, 0.55, 0.53) infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


.navbar-nav .dropdown-menu {
    position: absolute;
}



.bootstrap-select>.dropdown-toggle {
  border-radius: 50px !important;
}




.controlSelect {
    background: aliceblue;
    /* padding: 12px; */
    margin-bottom: 17px;
}

.readonly{
  background: aliceblue;
}

.eliminoImg{
  color: red !important;
  cursor: pointer;
  margin-left: 25px;
}
.fa-retweet{
  color: green !important;
  cursor: pointer;
  font-size: 25px;
}

[role="calendar"] {
            /* width: 500px !important; */
        }
.datepicker table [role="week-days"] {
            /* display: none !important; */
        }

.datepicker table tbody{
            /* display: none !important; */
        }
.simbolo{
  cursor: pointer;
}


.gj-textbox-md{
      border: 1px solid rgba(0,0,0,.18) !important;
}
.gj-icon{
  padding: 7px;
}


.dlsRefe{
  cursor: pointer;
  color: red;
  color: #cd5d5b;
  font-style: italic;
}


.ancho-100w.swal2-popup.swal2-modal {
  width:100% !important;
  height: 100%!important;
}
.ancho-100w.swal2-popup.swal2-modal .swal2-html-container {

  margin: 0!important;
}


.newGrafic{
  cursor: pointer;
}