#loading {
width: 4rem;
height: 4rem;
border: 5px solid #00d69f;
border-top: 6px solid #ff2233;
border-radius: 100%;
margin: auto;
visibility: hidden;
animation: spin 1s infinite linear;
}

#loading.display {
visibility: visible;
}

.overlay {
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
top: 0%;
opacity: 0.7;
filter: alpha(opacity=80);
background-color:#f0f0f0;
}

.spinner{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}

.btn-horas{
background-color: #ffffff;
border-color: #20b2aa;
color: #20b2aa;
padding: 4px;
font-size: 1.2em;
width: 60px;
}

.btn-horas:hover{
background-color: #20b2aa;
border-color: #ffffff;
color: #ffffff;
padding: 4px;
font-size: 1.2em;
width: 60px;
}

.btn-horas:focus{
background-color: #20b2aa;
border-color: #ffffff;
color: #ffffff;
padding: 4px;
font-size: 1.2em;
width: 60px;
}

.btn-horas-focus{
background-color: #20b2aa;
border-color: #ffffff;
color: #ffffff;
padding: 4px;
font-size: 1.2em;
width: 60px;
}

.btn-add-servicio{
background-color: #20c997;
border-color: #20b2aa;
color: #ffffff;
}

.color-simple{
    color: #20b2aa;
}

.separador{
padding-left: 4px;
}
.separador2{
padding-top: 4px;
}

.btn-verde{
background-color: #20b2aa;
color: #ffffff;
}

.fondo-verde-semi{
    background-color: rgba(32, 178, 170, 0.1);
}

.nav-link2 {
    color: #20b2aa!important;
}
  
.nav-link2:focus, 
.nav-link2:hover {
    color: #000000!important;
    font-weight: bold;
  }

 .nav-link2.active {
    color: #000000!important;
    font-weight: bold;
  }


.btn-eliminar{
    background-color: #ffffff;
    border-color: #ff2233;
    color: #ff2233;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 1.2em;
}

.btn-eliminar:hover{
    background-color: rgba(32, 178, 170, 0.1);
    border-color: #bb2122;
    color: #ff2233;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 1.2em;
}


.scroll-horas{
    overflow-y:auto;
    height: 200px;
}