/* Add your custom CSS styles here */

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.container {
    position: absolute;
    top: 20px;
    left: 20px;
    width:auto;
    height:auto;
    display: flex;
    flex-direction: column;
    /* background-color: #101010; */
    padding: 20px;
    z-index: 1000; /* Ensure it's above the map */
}

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

/* Leaflet container styles */
.leaflet-container {
    height: 100%;
    width: 100%;
}

.btn {
  align-items: center;
  color: #ffffff;
  width:100%;
  font-size: 16px;
  background: #58cc02;
  border: none !important;
  padding: 5px 19px;
  box-shadow: 0 4px 0 #58a700;
  border-radius: 12px;
  cursor: pointer;
  font-family: Arial, sans-serif;
}

.btn:active {
  box-shadow: none;
  transform: translate(0, 4px);
}


.spinner {
  width: 70.4px;
  height: 70.4px;
  --clr: rgb(247, 197, 159);
  --clr-alpha: rgb(247, 197, 159,.1);
  animation: spinner 1.6s infinite ease;
  transform-style: preserve-3d;
}

.spinner > div {
  background-color: var(--clr-alpha);
  height: 100%;
  position: absolute;
  width: 100%;
  border: 3.5px solid var(--clr);
}

.spinner div:nth-of-type(1) {
  transform: translateZ(-35.2px) rotateY(180deg);
}

.spinner div:nth-of-type(2) {
  transform: rotateY(-270deg) translateX(50%);
  transform-origin: top right;
}

.spinner div:nth-of-type(3) {
  transform: rotateY(270deg) translateX(-50%);
  transform-origin: center left;
}

.spinner div:nth-of-type(4) {
  transform: rotateX(90deg) translateY(-50%);
  transform-origin: top center;
}

.spinner div:nth-of-type(5) {
  transform: rotateX(-90deg) translateY(50%);
  transform-origin: bottom center;
}

.spinner div:nth-of-type(6) {
  transform: translateZ(35.2px);
}

@keyframes spinner {
  0% {
    transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
  }

  50% {
    transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
  }

  100% {
    transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
  }
}


path.leaflet-interactive.routeline {
  stroke-dasharray: 1920;
  stroke-dashoffset: 1920;
  animation: dash 20s linear 3s forwards, blipMove 20s linear 3s forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}




/* Estilos personalizados */
form {
  width: 100%;
  max-width: 800px;
}
form > div {
  margin: .7em 0;
  text-align: left;
}
input, textarea {
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 1em;
  color: white;
}


/* text, password, textarea y number */
.writing {
  display: flex;
  flex-direction: column;
  position: relative
}
.writing :is(input , textarea) {
  padding: 10px 0;
  margin-top: .2em;
}
.writing :is(input , textarea) ~ label {
  position: absolute;
  top: calc(10px + 0.8em);
  left: 0px;
  pointer-events: none;
  transition: all .2s ease;
  color: #ababab;
}
.writing :is(input , textarea):focus ~ label,
.writing :is(input , textarea).has-text ~ label{
  top: 0px;
  font-size: .9em;
}
.writing :is(input , textarea) ~ span {
  content: "";
  height: 1px;
  width: 100%;
  background: #80808080;
  display: flex;
  justify-content: center;
}
.writing :is(input , textarea):invalid ~ span {
  background: #ff0000;
}
.writing :is(input , textarea) ~ span:before {
  content: "";
  display: block;
  height: 2px;
  width: 0%;
  background: #03A9F4;
  transition: width .5s ease;
}
.writing :is(input , textarea):focus ~ span:before {width: 100%;}
/* text y password */
.writing:is(.text , .password) :is(input , input ~ span) {width: 100%}
/* textarea */
.textarea textarea {
  overflow: auto;
  min-height: calc(1em + 20px);
  height: 1.2em;
  overflow: hidden;
  resize: none;
}


/* number */
.number {margin-top: 1em;}
.number .titulo {font-size: .9em; color: #ababab;}
.number .numero {
  margin-top: .5em;
  user-select: none;
  display: flex;
}
.number .numero > * {padding: 10px;}
.number .numero input {
  text-align: center;
  background: #1c1c1c;
  min-width: 150px;
}
.number .numero input::-webkit-inner-spin-button {appearance: none;}
.number .numero label {
  cursor: pointer;
  width: calc(1em + 20px);
  text-align: center;
  background: #2e2e2e;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.number .numero label:hover {background: #03A9F4;}
.number .numero label:active {background: #225588;}
.number .numero label svg {width: 75%;}
.number .numero .decrement {border-radius: 10px 0 0 10px;}
.number .numero .increment {border-radius: 0 10px 10px 0;}


/* date y time */
.date, .time {
  display: flex;
  flex-direction: column;
  position: relative;  
  margin-top: 1em;
}
.date .titulo {font-size: .9em; color: #ababab;}
.date .fecha, .time .tiempo {width: min-content;}
:is(.date , .time) input {
  padding: 10px 0;
  margin-top: 1em;
}
:is(.date , .time) input::-webkit-calendar-picker-indicator {filter: invert(1);}
.date label, .time .titulo {
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: .9em;
  pointer-events: none;
  transition: all .2s ease;
  color: #ababab;
}
:is(.date , .time) input ~ span {
  content: "";
  height: 1px;
  width: 100%;
  background: #80808080;
  display: flex;
  justify-content: center;
}
:is(.date , .time) input:invalid ~ span {
  background: #ff0000;
}
:is(.date , .time) input ~ span:before {
  content: "";
  display: block;
  height: 2px;
  width: 0%;
  background: #03A9F4;
  transition: width .5s ease;
}
:is(.date , .time) input:focus ~ span:before {width: 100%;}


/* switch */
.switch {display: flex; align-items: center;}
.switch input {display: none;}
.switch .view {
  position: relative;
  display: block;
  margin: 25px;
  margin-left: 10px;
  max-width: 50px;
  width: 50vw;
  min-width: 30px;
  aspect-ratio: 35/15;
  background-color: #ffffff4d;
  border-radius: 100vw;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.switch .checkstyle:checked ~ .view {
  background-color: #225588;
}
/* Deslizable */
.switch .view > span {
  height: 100%;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(5px, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.switch .checkstyle:checked ~ .view > span {
  left: 100%;
  transform: translate(-5px, -50%);
}
/* Selector */
.switch .view > span > span {
  content: "";
  height: 135%;
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #FFF;
  border-radius: 100%;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.switch .checkstyle:checked ~ .view > span > span {
  background-color: #3399FF;
}
/* Hover */
.switch .view:hover > span:before {
  content: "";
  height: 265%;
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background-color: #ffffff14;
  border-radius: 100%;
  opacity: 0;
}
.switch .view:hover > span:before {opacity: 1;}
.switch .checkstyle:checked ~ .view > span:before {
  background-color: #3399ff14;
}
/* Active */
.switch .view > span:after {
  content: "";
  height: 0px;
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background-color: #ffffff26;
  border-radius: 100%;
  opacity: 0;
  transition: height 0s ease .5s, opacity .5s ease 0s;
}
.switch .view:hover:active > span:after {
  height: 265%;
  opacity: 1;
  transition: height .5s ease, opacity 0s ease;
}
.switch .checkstyle:checked ~ .view:hover:active > span:after {
  background-color: #3399ff26;
}


/* checkbox */
.checkbox {
  display: flex;
  flex-direction: column;
  gap: .5em;
}
.checkbox label {
  display: flex; align-items: center;
  gap: .5em;
  width: max-content;
  cursor: pointer;
}
.checkbox input {display: none;}
.checkbox .view {
  width: 1em;
  height: 1em;
  margin: 0.5em;
  background: white;
  border-radius: 5px;
  position: relative;
  padding: 0.05em;
}
.checkbox input:checked ~ .view {background: #3399ff;}
.checkbox .view:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  height: 2.25em;
  width: 2.25em;
  border-radius: 50%;
  background-color: #3399ff26;
  z-index: -1;
  transition: transform .3s ease .5s;
}
.checkbox label:hover:active .view:before {
  transform: translate(-50%, -50%) scale(1);
  transition: transform .1s ease;
}
.checkbox .view span {
  height: 100%;
  width: 0%;
  display: block;
  overflow: hidden;
  transition: width .1s ease .1s;
}
.checkbox input:checked ~ .view span {width: 100%;}
.checkbox .view svg {
  fill: white;
  height: 100%;
  aspect-ratio: 1/1;
}


/* select */
.select {
  display: flex;
  flex-direction: column;
  position: relative;
  /* margin-top: 1em; */
}
.select .titulo {font-size: .9em; color: #ababab;}
.select .view {
  position: relative;
  width: fit-content;
  margin-top: 0.5em;
}
.select .view select {
  appearance: none;
  width: max-content;
  padding: 0.5em 0.75em;
  padding-right: 2em;
  background: #2e2e2e;
  border-radius: 5px;
  color: white;
  font-size: 1em;
  border: 0;
  outline: 0;
  cursor: pointer;
}
.select .view select option {
  background: #1c1c1c;
}
.select .view select option:checked {
  background: #225588;
}
.select .view svg {
  fill: white;
  width: 1em;
  height: 1em;
  position: absolute;
  right: .5em;
  top: 50%;
  transform: translate(0%, -50%) rotate(0deg);
  pointer-events: none;
  transition: all .5s ease;
}
.select .view select.select-open ~ svg {
  transform: translate(0%, -50%) rotate(180deg);
}









/* submit */
.submit input {
  padding: .5em 1em;
  background: #3399ff;
  border-radius: 5px;
  cursor: pointer;
}
.submit input:active {
  background: #225588;
}

.datetime {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.date,
.time {
  flex: 1;
  margin-right: 20px; 
}
.selectsubmit {
  display: flex;
  flex-direction: row;
  align-items: center;

}

.select,
.submit {
  flex: 1;
  /* margin-right:20px; Adjust the spacing between date and time as needed */
}


.buttoncurrent {
  width: auto;
  text-decoration: none;
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  text-align: center;
  transition-duration: 0.3s;
  transition-property: all;
  transition-timing-function: ease;
  margin: 0.75rem 0;
}
.buttoncurrent.ghost {
  border: 1px solid transparent;
  /* color: #e1e7ef; */
}

.buttoncurrent.ghost:hover {
  border: 1px solid #121a26;
  background: #1d283a;
  color: #fff;
}




/* Auto complete  */

:root {
  --close-button: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.984 6.422 13.406 12l5.578 5.578-1.406 1.406L12 13.406l-5.578 5.578-1.406-1.406L10.594 12 5.016 6.422l1.406-1.406L12 10.594l5.578-5.578z'/%3E%3C/svg%3E");
  --loupe-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23929292' d='M16.041 15.856a.995.995 0 0 0-.186.186A6.97 6.97 0 0 1 11 18c-1.933 0-3.682-.782-4.95-2.05S4 12.933 4 11s.782-3.682 2.05-4.95S9.067 4 11 4s3.682.782 4.95 2.05S18 9.067 18 11a6.971 6.971 0 0 1-1.959 4.856zm5.666 4.437-3.675-3.675A8.967 8.967 0 0 0 20 11c0-2.485-1.008-4.736-2.636-6.364S13.485 2 11 2 6.264 3.008 4.636 4.636 2 8.515 2 11s1.008 4.736 2.636 6.364S8.515 20 11 20a8.967 8.967 0 0 0 5.618-1.968l3.675 3.675a.999.999 0 1 0 1.414-1.414z'/%3E%3C/svg%3E")
}

.auto-search-wrapper {
  display: block;
  position: relative;
  width: 100%
}

.auto-search-wrapper input {
  /* border: 1px solid #d7d7d7; */
  box-shadow: none;
  box-sizing: border-box;
  font-size: 16px;
  padding: 12px 45px 12px 10px;
  width: 100%
}

.auto-search-wrapper input:focus {
  /* border: 1px solid #858585; */
  outline: none
}

.auto-search-wrapper input::-ms-clear {
  display: none
}

.auto-search-wrapper ul {
  list-style: none;
  margin: 0;
  overflow: auto;
  padding: 0
}

.auto-search-wrapper ul li {
  cursor: pointer;
  margin: 0;
  overflow: hidden;
  padding: 10px;
  position: relative
}

.auto-search-wrapper ul li:not(:last-child) {
  border-top: none
}

.auto-search-wrapper ul li[disabled] {
  background: #ececec;
  opacity: .5;
  pointer-events: none
}

.auto-search-wrapper .auto-expanded {
  border: 1px solid #858585;
  outline: none
}

.auto-search-wrapper.loupe:before {
  filter: invert(60%)
}

.auto-is-loading:after {
  animation: auto-spinner .6s linear infinite;
  border-color: #d9d9d9 grey grey #d9d9d9;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  bottom: 0;
  box-sizing: border-box;
  content: "";
  height: 20px;
  margin: auto;
  position: absolute;
  right: 10px;
  top: 0;
  width: 20px
}

.auto-is-loading .auto-clear {
  display: none
}

@keyframes auto-spinner {
  to {
      transform: rotate(1turn)
  }
}

li.loupe:before {
  bottom: auto;
  top: 15px
}

.loupe input {
  padding: 12px 45px 12px 35px
}

.loupe:before {
  background-image: var(--loupe-icon);
  bottom: 0;
  content: "";
  height: 17px;
  left: 10px;
  margin: auto;
  position: absolute;
  top: 0;
  width: 17px
}

.auto-selected:before {
  opacity: 1
}

.auto-clear {
  align-items: center;
  background-color: transparent;
  border: none;
  bottom: 0;
  cursor: pointer;
  display: flex;
  height: auto;
  justify-content: center;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px
}

.auto-clear:before {
  content: var(--close-button);
  height: 24px;
  line-height: 100%;
  width: 24px
}

.auto-clear span {
  display: none
}

.auto-results-wrapper {
  background-color: #fff;
  border: 1px solid #858585;
  border-top: none;
  box-sizing: border-box;
  display: none;
  overflow: hidden
}

.auto-results-wrapper ul>.loupe {
  padding-left: 40px
}

.auto-results-wrapper.auto-is-active {
  display: block;
  margin-top: -1px;
  position: absolute;
  width: 100%;
  z-index: 99999
}

.auto-selected {
  background-color: #e6e6e6
}

.auto-selected+li:before {
  border-top: none
}

.auto-error {
  border: 1px solid #ff3838
}

.auto-error::placeholder {
  color: #f66;
  opacity: 1
}

.hidden {
  display: none
}


/* duration input  */
.duration-input {
  display: flex;
  border: none;
  width: max-content;
  border-radius: 3px;
  
  >div {
    margin-left: 5px;
    
    input {
      border: none;
      text-align: right;
      font-size: 0.9rem;
    }
    label {
      margin-left: -3px;
    }
  }
}

/* To hide the checkbox */
#checkboxInput {
  display: none;
}

.toggleSwitch {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 50px;
  height: 17px;
  background-color: rgb(82, 82, 82);
  border-radius: 20px;
  cursor: pointer;
  transition-duration: .2s;
}

.toggleSwitch::after {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 0px;
  background-color: rgb(41, 41, 41);
  border-radius: 50%;
  transition-duration: .2s;
  border: 2px solid rgb(82, 82, 82);
}

#checkboxInput:checked+.toggleSwitch::after {
  transform: translateX(100%);
  transition-duration: .2s;
  border: 2px solid rgb(165, 255, 105);
}
/* Switch background change */
#checkboxInput:checked+.toggleSwitch {
  background-color: rgb(165, 255, 105);
  transition-duration: .2s;
}



/* install button */



.installbtn{
  position: fixed;
  bottom: 0px;
  left: 3%;
  width: auto;
  text-align: left;
  margin: 0;
  z-index:1000;
  font-size:1.1em; 
	cursor: pointer;
	margin-left: auto;
  margin-right: auto;
	border: 2px solid #319197;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px 5px 0px 0px;
	padding: 5px 20px 5px 20px;
	background-color: #319197;
	color: #fff;
	display: inline-block;
	text-decoration: none;
  -webkit-box-shadow: 4px 0px 5px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 4px 0px 5px 0px rgba(0,0,0,0.3);
  box-shadow: 4px 0px 5px 0px rgba(0,0,0,0.3);

}