body {
  margin: 0;
}

.sb-title {
  position: relative;
  top: -12px;
  font-family: Roboto, sans-serif;
  font-weight: 500;
}

.sb-title-icon {
  position: relative;
  top: -5px;
}

.card-container {
  display: flex;
  height: 500px;
  width: 300px;
}

.panel {
  background: white;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.half-input-container {
  display: flex;
  justify-content: space-between;
}

.half-input {
  max-width: 120px;
}

h2 {
  margin: 0;

}

input {
  height: 30px;
}

input {
  border: 0;
  border-bottom: 1px solid black;
  font-size: 14px;

  font-style: normal;
  font-weight: normal;
}

input:focus::placeholder {
  color: white;
}

#map {
  width: 100%;
  height: 28vh;
  pointer-events: none;
}


.quoteMapCalc {
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */

  width: 60vw;
  /* margin-left: 44pt; */
  /* margin-right: 44pt; */
  box-sizing: border-box;

  margin-bottom: 44pt;

  gap: 16pt;
  max-width: 1000px;

}

.quoteMapWrapper {
  display: flex;
  flex-direction: row;
  width: 100vw;
  margin-top: 44pt;

}

.quoteHeaderText {
  margin-top: 18pt;
  margin-left: 44pt;
  margin-right: 44pt;
}

.quoteHeaderText1st {
  margin-top: 18pt;

}



.inputs {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */

  width: 50vw;
  margin-left: 44pt;
  margin-right: 44pt;
  box-sizing: border-box;

  gap: 16pt;
  max-width: 1000px;
  min-width: 270px;
}



.pac-target-input {
  border-radius: 50px;
}


#error,
#errorAlt {
  color: rgb(160, 9, 9);
  text-wrap: pretty;
}

#responses {
  width: 40vw;
  /* display: none; */
  margin-right: 44pt;
  display: flex;
  flex-direction: column;
  gap: 4pt;
  margin-top: -8pt;
}

#calcAlt {
  display: none;
}

.dropdown-item {
  color: black;
  margin: 12pt;

  padding: 8pt;
  border-radius: 20px;
  cursor: pointer;
}

#resultsOrgin,
#resultsDestination {
  visibility: hidden;
  border: solid;
  border-width: 1.5px;
  border-color: black;
  background-color: white;
  border-radius: 36px;
  position: absolute;
  margin-top: 50pt;
  z-index: 20;
}

.dropdown-item:hover {
  background-color: black;
  color: white;
}

#topTextInputAndList,
#bottomTextInputAndList {
  display: flex;
  flex-direction: column;
}

#distanceSidebyside,
#timeSidebyside,
#costSidebyside {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
}

#distanceSidebyside p,
#timeSidebyside p,
#costSidebyside p {
  padding: 0;
  margin: 0;
}


#distance,
#time,
#cost {

  font-weight: bold;
}

@media (max-width: 1110px) {
  .quoteMapCalc {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-items: center;
  }

  .inputs {
    width: calc(100vw - 88pt);
  }

  .quoteMapWrapper {
    flex-direction: column;
  }

  #responses {
    width: calc(100vw - 88pt);
    margin-left: 44pt;
    margin-right: 44pt;

  }

  #distanceSidebyside h2,
  #timeSidebyside h2,
  #costSidebyside h2 {
    font-size: 1.5em !important;
    flex-direction: column;
    text-align: left;
    justify-content: start;
    /* align-items: start; */
  }

  #actualCostVary {
    font-size: 1em;
  }

}

@media (max-width: 600px) {
  .inputs {
    width: calc(100vw - 44pt);
    margin-left: 22pt;
    margin-right: 22pt;
  }

  .quoteHeaderText {
    margin-left: 22pt;
  }

  #resultsOrgin,
  #resultsDestination {
    width: calc(100vw - 44pt);
    margin-top: 46px;
  }

  #dropdownFieldset {
    border-radius: 24px;
  }

  #responses {
    width: calc(100vw - 44pt);
    margin-left: 22pt;
    margin-right: 22pt;
  }


}