@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

html {
  height: 100%;
  width: 100%;
}

body {
  font-family: "Open Sans", sans-serif !important;
}

.main {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  ;
}

.main-title {
  text-align: center;
}

.main-title h2 {
  font-size: 24px;
  color: #666;
  font-weight: 500;
}

.main-date {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.date,
inputs {
  display: flex;
  flex-direction: column;
}

.date label {
  color: #000000;
  font-size: 19.2px;
}

.date span {
  font-size: 14.4px;
  color: #666;

}

.date input,
textarea,select {
  padding: 11.52px 14.4px 10.4px;
  color: #777;
  background-color: #fafafa;
  outline: none;
  font-size: inherit;
  border: 1px solid #d6d8d9;

}


.gaps {
  gap: 5px;
}

.input-sec-title {
  text-align: center;
}

.input-sec-title h2 {
  font-size: 19.5px;
  color: #666;
}

.all-input {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.massage-input {
  grid-column: 1 / -1;
}

.phone-number {
  position: relative;
}

.phone-number input {
  padding-right: 40px !important;
}

.icons {
  position: absolute;
  bottom: 12px;
  right: 10px;
}

.send-massage-input {
  grid-column: 1 / -1;
}

.massage-input-field {
  /* padding: 11.52px 100px 10.4px 14.4px !important; */
}

.send-massage-input input {
  /* padding: 5px; */
  height: 50px;
}

/* Submit button */
.submit-sec {
  margin: 30px 0 0 0;
}

.submit-sec input {
  width: 100%;
  padding: 10px 18px;
  background-color: #000;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
  border: none;
}

@media only screen and (max-width: 640px) {
  .form{
      width: 100%;
  }
  .all-input, .main-date{
      display:flex;
      flex-direction: column;
      
  }
}

.select-in {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    border: 1px solid #d6d8d9;
}

.select-in select{
    border: none;
}

.main-range{
    margin: 20px 0;
}
.range-slider{
    width:100%;
}
#range{
    width: 100%;
}

#tooltip{
    width:100%;
    display:flex;
    align-items:center;
  justify-content: space-between;
}