@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");
*, *::before, *::after {
  box-sizing: border-box;
  outline: none;
}

body {
  margin: 0;
  background: #ffffff;
  font-family: "Roboto", sans-serif;
}

.Calendar {
  box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
  z-index: 99999;
}
.Calendar button {
  background: #ffffff;
  margin: unset;
  border: unset;
  padding: unset;
  font-size: 14px;
  color: #3c4043;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.Container {
  width: fit-content;
  max-width: 100%;
  position: relative;
  z-index: 99999;
}

.Selector {
  width: fit-content;
  max-width: 100%;
  height: 55px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  padding: 0 12px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: #3c4043;
  position: relative;
}
.Selector__Icon {
  fill: #5f6368;
  flex-shrink: 0;
}
.Selector__Divisor {
  width: 1px;
  height: calc(100% - 24px);
  background: #dadce0;
}
.Selector__Item {
  width: fit-content;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.Selector__Item-Data, .Selector__Item-Data--Focus {
  width: 130px;
  height: 100%;
  padding-left: 8px;
  font-size: 16px;
  text-align: left;
  position: relative;
}
.Selector__Item-Data:hover, .Selector__Item-Data--Focus:hover {
  color: #5f6368;
}
.Selector__Item-Data::after, .Selector__Item-Data--Focus::after {
  content: "";
  width: 100%;
  height: 2px;
  border-radius: 5px;
  background: #1a73e8;
  position: absolute;
  bottom: 10px;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: #1a73e8;
}
.Selector__Item-Data--Focus {
  color: #1a73e8;
}
.Selector__Item-Data--Focus::after {
  opacity: 1;
}
.Selector__Item-Buttons {
  height: 100%;
  display: flex;
  align-items: center;
}
.Selector__Item-Button, .Selector__Item-Button--Disabled {
  width: fit-content;
  height: 100%;
  padding: 0 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3c4043;
}
.Selector__Item-Button:hover, .Selector__Item-Button--Disabled:hover {
  background: #ffffff;
}
.Selector__Item-Button .Selector__Item-Icon, .Selector__Item-Button--Disabled .Selector__Item-Icon {
  fill: currentColor;
}
.Selector__Item-Button--Disabled {
  color: rgba(232, 234, 237, 0.3803921569);
}

.Calendar {
  width: 736px;
  border-radius: 4px;
  background: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  flex-direction: column;
}
.Calendar__Header {
  border-bottom: 1px solid #dadce0;
  padding: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.Calendar__Header-Mobile {
  width: 100%;
  height: 88px;
  border-bottom: 1px solid #dadce0;
  padding: 16px;
  align-items: center;
  gap: 8px;
  display: none;
}
.Calendar__Header-Mobile__Close {
  width: 46px;
  height: 46px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.Calendar__Header-Mobile__Close:hover {
  background: #ffffff;
}
.Calendar__Header-Mobile__Close-Icon {
  fill: #5f6368;
}
.Calendar__Header-Mobile__Content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.Calendar__Header-Mobile__Buttons {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.Calendar__Selector-Container {
  position: relative;
}
.Calendar__Selector {
  width: fit-content;
  min-width: 120px;
  max-width: 100%;
  height: 46px;
  border-radius: 4px;
  padding: 0 12px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  color: #3c4043;
}
.Calendar__Selector:hover {
  background: #ffffff;
}
.Calendar__Selector-Icon {
  fill: #5f6368;
  flex-shrink: 0;
}
.Calendar__Selector-Options, .Calendar__Selector-Options-Active {
  width: max-content;
  height: fit-content;
  border-radius: 4px;
  padding: 8px 0;
  background: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  display: none;
  overflow: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
}
.Calendar__Selector-Options-Active {
  display: block;
}
.Calendar__Selector-Option {
  width: 100%;
  height: 46px;
  padding: 0 24px 0 56px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  color: #3c4043;
}
.Calendar__Selector-Option:hover {
  background: #ffffff;
}
.Calendar__Selector-Option-Icon {
  position: absolute;
  left: 16px;
  fill: #3c4043;
}
.Calendar__Selector-Option-Icon-Two {
  display: none;
}
.Calendar__Buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.Calendar__Restart-Button {
  height: 46px;
  border-radius: 4px;
  padding: 0 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3c4043;
  font-weight: 500;
}
.Calendar__Restart-Button:hover {
  background: #ffffff;
}
.Calendar__Months-Container {
  height: 400px;
  position: relative;
}
.Calendar__Month-Button, .Calendar__Month-Button--Next, .Calendar__Month-Button--Prev {
  width: 40px;
  height: 40px;
  border: 1px solid #5f6368;
  border-radius: 50%;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3c4043;
  position: absolute;
  top: calc(50% - 20px);
  background: #ffffff;
  z-index: 5;
}
.Calendar__Month-Button:hover, .Calendar__Month-Button--Next:hover, .Calendar__Month-Button--Prev:hover {
  background: #ffffff;
}
.Calendar__Month-Button-Icon {
  fill: #3c4043;
}
.Calendar__Month-Button--Prev {
  left: -20px;
}
.Calendar__Month-Button--Next {
  background: #ffffff;
  right: -20px;
}
.Calendar__Footer {
  height: 64px;
  border-top: 1px solid #dadce0;
  padding: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.Calendar__Footer #restart-button {
  display: none;
}
.Calendar__Submit, .Calendar__Submit--Active {
  width: fit-content;
  height: 32px;
  padding: 0px 20px !important;
  border-radius: 16px;
  font-size: 14px !important;
  padding: 0 24px;
  color: #3c4043;
  background: #ffffff;
  opacity: 0.5;
  font-weight: 500;
  cursor: not-allowed;
}
.Calendar__Submit--Active {
  background: #1a73e8 !important;
  color: #FFFFFF !important;
  cursor: pointer;
  opacity: 1;
}
.Calendar__Submit--Active:hover {
  opacity: 0.8;
}

.Months__Container {
  width: 100%;
  height: 100%;
  padding: 16px 0;
  display: flex;
  overflow: hidden;
}

.Month {
  width: 50%;
  height: 100%;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 0;
  flex-shrink: 0;
  text-align: center;
  color: #3c4043;
  font-size: 14px;
}
.Month__Header {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 20px;
  color: #3c4043;
}
.Month__Name {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  text-transform: capitalize;
}
.Month__Weekdays {
  width: 100%;
  height: 20px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  justify-items: center;
}
.Month__Weekday {
  width: 100%;
  max-width: 40px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
}
.Month__Days {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  justify-items: center;
}
.Month__Day, .Month__Day--Range, .Month__Day--Other-Selected, .Month__Day--Return-Other-Selected, .Month__Day--Departure-Other-Selected, .Month__Day--Current-Selected, .Month__Day--Return-Current-Selected, .Month__Day--Departure-Current-Selected, .Month__Day--Current-Selected-NoRange, .Month__Day--Disabled, .Month__Day--Blank {
  width: 100%;
  max-width: 52px;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.Month__Day::after, .Month__Day--Range::after, .Month__Day--Other-Selected::after, .Month__Day--Return-Other-Selected::after, .Month__Day--Departure-Other-Selected::after, .Month__Day--Current-Selected::after, .Month__Day--Return-Current-Selected::after, .Month__Day--Departure-Current-Selected::after, .Month__Day--Current-Selected-NoRange::after, .Month__Day--Disabled::after, .Month__Day--Blank::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 100%;
  border: 1px solid #1a73e8;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  opacity: 0;
}
.Month__Day:hover::after, .Month__Day--Range:hover::after, .Month__Day--Other-Selected:hover::after, .Month__Day--Return-Other-Selected:hover::after, .Month__Day--Departure-Other-Selected:hover::after, .Month__Day--Current-Selected:hover::after, .Month__Day--Return-Current-Selected:hover::after, .Month__Day--Departure-Current-Selected:hover::after, .Month__Day--Current-Selected-NoRange:hover::after, .Month__Day--Disabled:hover::after, .Month__Day--Blank:hover::after {
  opacity: 1;
}
.Month__Day--Blank {
  content: "";
  cursor: default;
}
.Month__Day--Blank::after {
  content: none;
}
.Month__Day--Disabled {
  color: #9aa0a6cd;
  cursor: default;
}
.Month__Day--Disabled::after {
  content: none;
}
.Month__Day--Current-Selected, .Month__Day--Return-Current-Selected, .Month__Day--Departure-Current-Selected, .Month__Day--Current-Selected-NoRange {
  color: #FFFFFF;
}
.Month__Day--Current-Selected::after, .Month__Day--Return-Current-Selected::after, .Month__Day--Departure-Current-Selected::after, .Month__Day--Current-Selected-NoRange::after {
  content: attr(data-number);
  background: #1a73e8;
  opacity: 1;
}
.Month__Day--Current-Selected::before, .Month__Day--Return-Current-Selected::before, .Month__Day--Departure-Current-Selected::before, .Month__Day--Current-Selected-NoRange::before {
  content: attr(data-range);
  width: 50%;
  height: 100%;
  border: unset;
  border-radius: unset;
  background: #e8f0fe;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  opacity: 1;
  z-index: 1;
}
.Month__Day--Current-Selected-NoRange::before {
  content: none !important;
}
.Month__Day--Departure-Current-Selected::before {
  left: 50%;
}
.Month__Day--Return-Current-Selected::before {
  right: 50%;
}
.Month__Day--Other-Selected::after, .Month__Day--Return-Other-Selected::after, .Month__Day--Departure-Other-Selected::after {
  content: attr(data-number);
  border: 1px solid #5f6368;
  background: #ffffff;
  opacity: 1;
}
.Month__Day--Other-Selected::before, .Month__Day--Return-Other-Selected::before, .Month__Day--Departure-Other-Selected::before {
  content: "";
  width: 50%;
  height: 100%;
  border: unset;
  border-radius: unset;
  background: #e8f0fe;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 50%;
  opacity: 1;
  z-index: 1;
}
.Month__Day--Departure-Other-Selected::before {
  left: 50%;
}
.Month__Day--Return-Other-Selected::before {
  right: 50%;
}
.Month__Day--Range::before {
  content: attr(data-number);
  width: 100%;
  height: 100%;
  border: unset;
  border-radius: unset;
  background: #e8f0fe;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  z-index: 1;
}
.Month__Day--Range::after {
  content: unset;
}

@media (max-width: 768px) {
  .Container {
    position: static;
  }
  .Selector {
    width: 100%;
    background: #ffffff;
  }
  .Selector__Item {
    width: 100%;
    justify-content: center;
  }
  .Selector__Item-Data, .Selector__Item-Data--Focus {
    width: 120px;
    padding: 0;
    text-align: center;
  }
  .Selector__Item-Data::after, .Selector__Item-Data--Focus::after {
    width: 90%;
    left: 5%;
  }
  .Selector__Item-Button, .Selector__Item-Button--Disabled {
    display: none;
  }
  .Calendar {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
    background: #ffffff;
    position: fixed;
    top: 0;
  }
  .Calendar__Header {
    display: none;
  }
  .Calendar__Header-Mobile {
    display: flex;
  }
  .Calendar__Selector {
    background: #ffffff;
  }
  .Calendar__Months-Container {
    height: 100%;
    position: relative;
    overflow: hidden scroll;
  }
  .Calendar__Months-Container::-webkit-scrollbar {
    width: 14px;
  }
  .Calendar__Months-Container::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 10px;
    background-clip: content-box;
    background-color: #ffffff;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }
  .Calendar__Months-Container::-webkit-scrollbar-thumb:hover {
    background-color: #5f6368;
    cursor: pointer;
  }
  .Calendar__Months-Container::-webkit-scrollbar-track {
    background-color: #ffffff;
    border-left: 1px solid #ffffff;
  }
  .Calendar__Month-Button, .Calendar__Month-Button--Prev, .Calendar__Month-Button--Next {
    display: none;
  }
  .Calendar .Selector {
    width: 100%;
    background: #ffffff;
  }
  .Calendar .Selector__Icon {
    display: none;
  }
  .Calendar .Selector__Item {
    width: 100%;
  }
  .Calendar .Selector__Item-Data, .Calendar .Selector__Item-Data--Focus {
    width: 100%;
    text-align: center;
  }
  .Calendar .Selector__Item-Button, .Calendar .Selector__Item-Button--Disabled {
    display: none;
  }
  .Calendar__Footer {
    gap: 12px;
  }
  .Calendar__Footer #restart-button {
    height: 32px;
    border-radius: 16px;
    padding: 0 24px;
    display: flex;
  }
  .Months__Container {
    height: fit-content;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .Month {
    width: 100%;
    height: fit-content;
  }
  .Month__Days {
    row-gap: 6px;
  }
  .Month__Day, .Month__Day--Blank, .Month__Day--Disabled, .Month__Day--Current-Selected, .Month__Day--Current-Selected-NoRange, .Month__Day--Departure-Current-Selected, .Month__Day--Return-Current-Selected, .Month__Day--Other-Selected, .Month__Day--Departure-Other-Selected, .Month__Day--Return-Other-Selected, .Month__Day--Range {
    max-width: none;
  }
  .Month__Day::after, .Month__Day--Blank::after, .Month__Day--Disabled::after, .Month__Day--Current-Selected::after, .Month__Day--Current-Selected-NoRange::after, .Month__Day--Departure-Current-Selected::after, .Month__Day--Return-Current-Selected::after, .Month__Day--Other-Selected::after, .Month__Day--Departure-Other-Selected::after, .Month__Day--Return-Other-Selected::after, .Month__Day--Range::after {
    left: calc(50% - 26px);
  }
}
@media (max-width: 375px) {
  .Selector__Icon {
    display: none;
  }
}

/*# sourceMappingURL=index.css.map */