.line_wr{overflow: hidden;margin-bottom: 10px;}
.line_wr .line_icon{float: left;margin-right: 10px;}
.line_wr .line_name_and_company_name{float: left;width: 275px;overflow: hidden;}
.line_wr .line_name_and_company_name .company_name{font-size: 12px;font-style: italic;}

.form_direction_mobile{margin-bottom: 7px;display: none;}

.edit_routes{margin-top: 5px;margin-bottom: 10px;}

#map_wr{position: relative;height: 500px;width: 100%;border: 2px solid #ddd;margin-bottom: 10px;}
#map_wr .custom_btn{font-size: 10px;padding: 2px 5px;}
#map_wr .toggle_my_menu_btn{position: absolute;right: 2px;top: 2px;z-index: 1000;}
#map_wr .my_menu .form_direction{margin-bottom: 6px;width: 100%;}
#map_wr .my_menu .form_direction .btn-outline-secondary{background-color: white;}
#map_wr .my_menu .form_direction .btn-outline-secondary:hover{color: #6c757d;}


#map_wr .my_menu .form_my_position{margin-bottom: 6px;}
#map_wr .my_menu .form_my_position .btn{width: 100%;}

#map_wr .form_real_time_buses_positions .btn-outline-secondary{background-color: white;}
#map_wr .form_real_time_buses_positions .btn-outline-secondary:hover{color: #6c757d;}

#map_wr .my_menu_btn{font-size: 10px;padding: 2px 5px;position: absolute;top: 38px;right: 3px;z-index: 1000;}

#map_wr .my_menu{position: absolute;top: 27px;right: 3px;z-index: 1000;font-size: 10px;max-width: 180px;padding: 5px;background-color: rgba(255,255,255,0.8);border: 1px solid #ddd;overflow-y: auto;max-height: 462px;}
#map_wr .my_menu .form_route_all{color: blue;}
#map_wr .my_menu .form_route:not(:last-child){border-bottom: 1px solid #ddd;padding-bottom: 3px;margin-bottom: 3px;}
#map_wr .my_menu label{cursor: pointer;}
#map_wr .my_menu .form_real_time_buses_positions{margin-bottom: 6px;}
#map_wr .my_menu .form_real_time_buses_positions .btn-outline-secondary{background-color: white;}
#map_wr .my_menu .form_real_time_buses_positions .btn-outline-secondary:hover{color: #6c757d;}

#map_wr .time_reload{position: absolute;left: 1px;bottom: 1px;font-size: 9px;z-index: 2000;font-weight: bold;background-color: white;padding: 1px 5px;border-radius: 2px;}

#map_wr #map { height: 100%;width: 100%;}

.disclaimer{margin-top: 20px;font-size: 11px;}
.routes_btns{margin-top: 10px;}

.routes_list{font-size: 12px;}


.line_list{max-height: 250px;overflow: auto;margin-bottom: 10px;display: none;}
.line_list .line_list_item{width: 90px;float: left;margin-bottom: 15px;cursor: pointer;}
.line_list .line_list_item .line_name{font-weight: bold;}

#lineNameInput .line_icon_wr{cursor: pointer;}
#lineNameInput .line_name{font-weight: bold;}


.custom-card-sm{max-width: 1000px;}

.bus-marker {
  width: 30px;
  height: 30px;
  background-color: #007bff; /* Color de fondo del círculo */
  border-radius: 50%; /* Hace que el div sea circular */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white; /* Color del ícono */
  font-size: 20px; /* Tamaño del ícono */
}

.user-marker {
  width: 30px;
  height: 30px;
  border-radius: 50%; /* Hace que el div sea circular */
  display: flex;
  align-items: center;
  justify-content: center;
  color: black; /* Color del ícono */
  font-size: 30px; /* Tamaño del ícono */
}

.animated-marker {
  border-radius: 50%; /* Hace que el div sea circular */
  position: relative;
  display: flex;
  transform-origin: center;
  font-size: 20px;
}

.arrow {
  position: absolute;
  content: '';
  height: 26px;
  width: 16px;
  top: 14px;
  left: 6px;
  transform-origin: top;
  background-image: url('/images/arrow.png');
  background-size: 14px 10px;
  background-repeat: no-repeat;
  background-position: bottom center;
}


.bus-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(0, 123, 255, 0.8);
  border: 2px solid white;
  color: white;
  font-size: 14px;
  font-weight: bold;
  position: relative;
}

/* Ícono del clúster */
.bus-cluster i {
  font-size: 18px;
}

/* Contador del clúster */
.cluster-count {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: black;
}


.rectangle-marker {
    display: inline-block;
    padding: 2px 5px; /* Ajusta el espacio alrededor del texto */
    background-color: rgba(0, 123, 255, 0.6); /* Color del rectángulo */
    border: 2px solid #007bff; /* Borde del rectángulo */
    border-radius: 4px;
    color: white;
    font-size: 10px;
    font-weight: bold;
    
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    box-sizing: content-box; /* Ajusta el tamaño del cuadro */
  }






@media only screen and (max-width:780px){
    .form_direction{display: none;}
    .form_direction_mobile{display: inline-flex;}
    .form_direction_mobile .btn-group{margin-right: 5px;}
}