/*Defino las variables de color*/
:root {
    --primary-color: #437eeb;
    --secondary-color: #313e5b;
    --white-color: #fff;
    --white-light-color: #eff1fe;
    --warning-color: red;
    --success-color: #398f14;
    --title-color: #313e5b;
    --sub-title-color: #437eeb;
    --body-text: #525f81;
    --transparent: transparent; 
}

/*Header*/
.navbar{
  background: var(--secondary-color);
}


#mapa_localizacion {
  height: calc(100vh - 60px) !important;
  
}

button{
  padding:8px !important;
  background: var(--transparent) !important;
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;

}

/*Modifico los botones de sumar y disminuir*/
#add_btn, #rm_btn{
  color:white !important;
  border-radius:100%;
  padding: 10px !important;
  border:none; 
  width:30px;
  position:relative;
  height:30px;

}

#add_btn{
  background:#87c287 !important;
}

#rm_btn{
  background:#ca6d6d !important;
}
  

.fa{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
 } 

.izquierda, .derecha{
    display:inline-block;
    width:80%
}
.derecha{
    float: right;
    width:20%;
}

/*Inputs de paradas*/
 .paradas label{
   display:none !important;
 } 
 
 
 /*Navbar*/
 .navbar{
   margin-bottom: 0px !important;
 }
 
 .container-fluid{
   padding:0px !important;
 }
 
 /*Controles*/
 div#controls {
    padding-bottom:40px;
    padding:20px;
    
    background: #ffffffc7 !important;
    overflow: scroll;
    max-height: 80%;
    
}


/*Scrollbar*/
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1 !important;
  border-radius: 20px !important;
  border: 6px solid transparent !important;
  background-clip: content-box !important;
}

/*Main Layout
html, body, .container-fluid{
  height: 100vh;
}    
*/

#controls .form-group{
    width:100%;
}

/*Botón de pruebas*/
/*Defino las variables de color*/
:root {
    --primary-color: #437eeb;
    --secondary-color: #313e5b;
    --white-color: #fff;
    --white-light-color: #eff1fe;
    --warning-color: red;
    --success-color: #398f14;
    --title-color: #313e5b;
    --sub-title-color: #437eeb;
    --body-text: #525f81;
    --transparent: transparent; 
}

/*Header*/
.navbar{
  background: var(--secondary-color);
}


#mapa_localizacion {
  height: calc(100vh - 60px) !important;
  
}

button{
  padding:8px !important;
  background: var(--transparent) !important;
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;

}

/*Modifico los botones de sumar y disminuir*/
#add_btn, #rm_btn{
  color:white !important;
  border-radius:100%;
  padding: 10px !important;
  border:none; 
  width:30px;
  position:relative;
  height:30px;

}

#add_btn{
  background:#87c287 !important;
}

#rm_btn{
  background:#ca6d6d !important;
}
  

.fa{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
 } 

.izquierda, .derecha{
    display:inline-block;
    width:80%
}
.derecha{
    float: right;
    width:20%;
}

/*Inputs de paradas*/
 .paradas label{
   display:none !important;
 } 
 
 
 /*Navbar*/
 .navbar{
   margin-bottom: 0px !important;
 }
 
 .container-fluid{
   padding:0px !important;
 }
 
 /*Controles*/
 div#controls {
    padding:20px;
    background: #ffffffc7 !important;
    overflow: scroll;
    max-height: 80%;
    
}


/*Scrollbar*/
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1 !important;
  border-radius: 20px !important;
  border: 6px solid transparent !important;
  background-clip: content-box !important;
}

/*Main Layout
html, body, .container-fluid{
  height: 100vh;
}    
*/

#controls .form-group{
    width:100%;
}

.ruta_ejemplo{
  position:relative;
  width:100%;
  margin-top:30px;
}
button#btn_ruta_ejemplo {
    margin-top: 30px;
    border: none;
    color: var(--title-color) !important;
    bottom: 0;
    right: 0;
    float: right;
    
}

.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: none !important;
  
}

/*Loader*/
.loader{
    position:absolute;
    top: 50%;
    left: 50%;
    /* width: auto; */
    /* height: calc(100vh - 60px) !important; */
}
.lds-facebook {
    z-index:9999999999999;
    background: transparent;
    position: relative;
    /* width: 100vh; */
    /* top: 50%; */
    /* left: 50%; */
    /* height: 100vh; */
}
.lds-facebook div {
  position: absolute;
  margin:auto;
  width: 16px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  background: var(--secondary-color);
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-facebook div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.lds-facebook div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.lds-facebook div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}
@keyframes lds-facebook {
  0% {
    top: 8px;
    height: 64px;
  }
  50%, 100% {
    top: 24px;
    height: 32px;
  }
}

#loader_background {
    background: #fbfbfb7a;
    width:100%;
    height: calc(100vh - 60px);
    z-index:9999999999;
    position: absolute;
}

/*Contenido tabla de tiempos*/
.tabla_tiempos {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 40px;
}