.Map-nav{
	padding-left: 5vw;
	margin-bottom: 25px;

}

.Map-nav-title{
	font-size: 1.8em;
    padding-bottom: .2em;
}

.Map-nav-container {
      display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-direction: row;
}

.Map-nav-input {
  font-size: 2em;
   width: 6em;
  border: none;
  outline: none;
  color: #4d4d4d;

  transition: width 0.7s ease;
 
}

.Map-nav-line {
  width: 100%;
  height: 2px;
  background-color: #4d4d4d;
}


.Map-nav-log{
  align-content: center;
    text-align: left;
    height: 2.3em;
    font-size: 1em;
    display: none;
    color: #e96557;
}

.Map-nav-input.initial {
  color: #C2C2C2;
  pointer-events: all;
}

.Map-nav-input.fail {
  color: #e96557;
  pointer-events: all;
}
.Map-nav-line.fail {
  background-color: #e96557;
}

.Map-nav-line.initial, .Map-nav-line.normal {
  background-color: #4d4d4d;
}

.Map-nav-input.normal {
  color: #575754;
  pointer-events: all;
}

.Map-nav-input.inactive,
.Map-nav-input.using {
  color: #C2C2C2;
  pointer-events: none;
}

.Map-nav-line.inactive, .Map-nav-line.using {
  background-color: #4d4d4d;
}

.Map-nav-input.loaded {
  color: #61A60E;
  pointer-events: all;
}

.Map-nav-line.loaded {
  background-color: #61A60E;
}


.Map-nav-input.done {
  color: #61A60E;
  pointer-events: none;
}

.Map-nav-line.done {
  background-color: #61A60E;
}




  .Map-nav-button.initial, .Map-nav-button.normal {
    background-color: #4d4d4d;
    cursor: pointer;
    opacity: 1;
    pointer-events: all;
  }

  .Map-nav-button.fail{
    background-color: #DADADA;
    opacity: 1;
    pointer-events: all;
  }

  .Map-nav-button.loaded{
    background-color: #DADADA;
    cursor: pointer;
    opacity: 1;
    pointer-events: all;
  }

   .Map-nav-button.done, .Map-nav-button.inactive, .Map-nav-button.using {
     opacity: 0;
     pointer-events: none;
  }




  .Map-nav-button {
    background-color: #4d4d4d;
    cursor: default;
  }



  .Map-nav-button {
    padding: 8px 30px;
      font-size: .9em;
      color: white;
      background-color: #4d4d4d;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      opacity: 1;
     
  }

  .Map-nav-input.active {
    color: #ff0000; /* Cambiar este color según se necesite */
  }



.Map-nav-in{

}


@media (orientation: portrait) {

  .Map-nav-title {
    font-size: 1.2em;
    padding-bottom: .5em;
  }

    .Map-nav-button {
    margin-top: 10px;
  }

  .Map-nav-container {
      display: flex;
      align-items: flex-start;
      gap: 5px;
      flex-direction: column;
      align-content: flex-start;
  }

}