nav{display:none!important;}
body { font-family: Arial, sans-serif; margin: 0; padding: 0;background-color: #000000; color: #fff; }
.dash { display: flex; flex-wrap: wrap;  }
.stat { margin: 10px 0; position:relative; padding:0 20px; font-size:3em; font-weight: bold; display: inline-block; text-align: center;}
.label { position:absolute;
  bottom: 15px;
  font-size: 0.3em;
  font-weight:  lighter;
  left:0;
  right:0;
  margin:auto;
  opacity:0.7;
}
.unit {margin-left:5px; font-size:0.5em;}

.stat{width: 50%;
  border: 1px solid #dedede; 
  margin:0 0 0 0; 
  padding:0 0 20px 0
}

.stat.speed{
  width: 100%;
  font-size:  1em;
  /* min-height:150px; */
  text-align: center;}

  
.stat.time .value{font-size: .8em;}
.stat.elapsed .value{font-size: 0.8em;}



.stat.distance{width: 50%;}
.stat.bpm{width: 33.33%;}
.stat.elevation{width: 33.33%;}
.stat.cadence{width: 33.34%;}
.buttons{text-align: center;}

.border{border: 1px solid #ccc;}

#map { 
    height: calc(100vh - 60px - env(safe-area-inset-bottom));
    width: 100%; 
}

/* Custom styles for the category selection dialog */
.marker-category-dialog {
  position: absolute;
  top: 10px;
  left: 10px;
  background: white;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  z-index: 1000;
  display: none;
}

.marker-category-dialog button {
  margin-right: 5px;
  padding: 5px 10px;
  cursor: pointer;
}

.marker-category-dialog {color:black;}

.indicators{  
  position: absolute;
  top: 45px;
  left: 5px;
  z-index:10;
}

.step.active{
    color: aquamarine!important;
}

.gauge {
  display:inline-block;
  position: relative;
  width: 100%; /* Take up full width of the container */
  aspect-ratio: 19 / 9;
  /* height: 100%;  */
  max-width: calc(100% - 120px); /* Prevent it from growing too large */
  max-height: 20vh; /* Prevent it from growing too large */
  border-radius: 150px 150px 0 0;
  overflow: hidden;
/*   background: #fff;  */
  transform-origin: center center; /* Set transform origin to the center */
  transition: transform 0.5s ease-in-out;
  transform: scale(1);
}

.gauge svg {
  position: absolute;
  top: 3px;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(0deg); /* Rotate the SVG to make it appear as a half-circle */
}

.gauge .progress {
  fill: none;
  stroke-width: 20; /* Reduced stroke width */
  stroke-linecap: round;
  stroke: #000;
  stroke-dasharray: 160; /* Full circle for 80 speed */
  stroke-dashoffset: 20; /* Start the stroke offset at full */
  transform-origin:0;
  transition: stroke-dashoffset 0.5s ease-in-out;
}

.gauge .status{
    position: absolute;
    z-index: 2;
    bottom: 5px;
    right: 25%;
    cursor: pointer;
}


.back{
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    cursor: pointer;
}

.gauge .background {
  fill: none;
  stroke-width: 22;
  stroke: #ccc;
}

/* Centered speed value */
.gauge .value {
  position: absolute;
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4em;
  color: #000;
  font-weight: bold;
}

/* Speed value under the arch */
.gauge .value-label {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  color: #333;
  font-weight: bold;
}


html[data-theme="dark"] {
  .stat{  
    border: 1px solid #111; 
  }

/*   .gauge {
    background: transparent; 
  } */
  

  .gauge .progress {
    stroke: #fff;
  }

  .gauge .background {
    stroke: #333;
  }

  .gauge .value {
    color: #fff;
  }

  .gauge .value-label {
    color: #ccc;
  }

}


.heading{
  position:absolute; top:3px;right:5px;
  font-size:2.2em;
  z-index:10;
}

.text-overflow-hide{
    white-space: nowrap;      /* Prevent text from wrapping */
overflow: hidden;         /* Hide overflowing content */
text-overflow: ellipsis;  /* Display ellipsis (...) for overflow */
}

.button{
    cursor: pointer;
}

.instruction .button{
    position:absolute;        
    top:10px;
    right: 20px;
}

.instruction{display:none;position:relative;min-height: 50px;}
.instruction.active{display:block;}

.instruction.current .body{
    padding: 5px;
text-align: center;
vertical-align: middle;
min-height: 50px;
font-size: x-large;
}

.instruction .distance.value{font-weight: bold;}
.instruction .flex{
    display: flex;
}
/* .instruction .icon{
    width:50px;
} */


.button-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.button-group button {
  display: flex;
  background-color: #f9f9f9;
  cursor: pointer;
}
.button-group button i {
  margin-right: 8px;
}
.button-group button.active {
  background-color: #007bff;
  color: white;
}
.button-group button:hover {
  background-color: #e0e0e0;
}

.maplibregl-ctrl-attrib-inner, .mapboxgl-ctrl-attrib-inner, .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button, .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner, 
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button, .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{
  display:none!important;
}

@media (max-width: 380px) {
  .stat.time .value{font-size: .7em;}
  .stat.elapsed .value{font-size: 0.7em;}
  .heading{
    font-size:2em;
  }
  }
  

  
.signage{
  position:relative;
  padding:3px;
  background:darkgreen;
border-radius: 10px;
color:white;
margin-top: 5px;
}
.signage .inner{
border:2px solid white;
padding:10px 10px 10px 5px;
border-radius: 8px;
}
.signage .ui.header{
  color:white;
  }

  
  .signage .num{
    color:darkgreen;
    background-color:#ffffff99;
    border-radius: 50%;
    display:inline-block;
    height:1.3em;
    width:1.3em;
    font-size: 1em;
    position: absolute;
    bottom:10px;
    right:10px;
    font-family: sans-serif;
    font-weight: bold;
    display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
    }
    
.directions .divider {display:none;}

.signage .icon-container svg {
  fill: #ffffff; 
}

.roundabout, .uturn {
  transform: scaleX(-1);
}
.turn.type {
  position: absolute;
  top:60px;
  left:15px;
  opacity: .1;
  z-index:10;
}

.dib{
  display:inline-block
}

.instruction .signage{
  display:none;
  max-width: 460px;
}

.signage.current{
  position: fixed;
  bottom: 50px;
  left: 5px;
  z-index: 90;
  transition: all 2s ease;  
  display:block;
}

.text-danger{opacity: 0.6;}
.tiny{font-size:.35em}
.ble.connected .fa-stack{color:#0d6efd}
.ble.connected .fa-ban{display:none}
.ble{cursor: pointer;}
.ble:hover{background-color: #88888822;}

.gauge .fa:hover{
  color:#0d6efd;
}

.mapboxgl-ctrl-attrib.mapboxgl-compact, .maplibregl-ctrl-attrib.maplibregl-compact, .mapboxgl-ctrl-attrib.mapboxgl-compact-show, .maplibregl-ctrl-attrib.maplibregl-compact-show,
.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button, .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner,
 .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button, 
 .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{display:none!important}