* {padding:0; border:0; margin:0; box-sizing:border-box;}

body {
  color: #eee;
  font-size: 16px;
  background: #333;
  height: 100vh;
}

a { text-decoration:none; }

.form-container {
  padding-top: 5rem;
  margin: 0 auto;
  display: grid;
  width: 700px;
  text-align: center;
}

.form-group {
  position: relative;
  display: grid;
}

.input-wrap {
  position: relative;
  display: flex;
  gap: 1rem;
  width: fit-content;
  align-items: center;
  justify-self: center;
}

.datepicker-input {
  width: 300px;
  height: 45px;
  padding:10px;
  background: #ddd;
  color: #111;
  border-radius: 5px;
  box-shadow: 3px 3px 18px 5px #1f1f1f;
}

.datepicker-input:hover {
  cursor: pointer;
  background: #eee;
}

.datepicker-input:focus  {
  outline: none;
}

.input-wrap svg {
  pointer-events: none;
  position: absolute;
  right: 5px;
  fill: #111;
}

.datepicker-form {
  display:grid;
  padding: 30px;
}

.datepicker-form label{
  pointer-events: none;
  padding: 5px 0;
  text-align:center;
}

/* Datepicker popup form styles */

.datepicker-container {
  display:none;
  position:absolute;
  color: #111;
  top: 50px;
  right: 50%;
  translate: 50%;
  width:fit-content;
  text-align:center;
  box-shadow: 3px 3px 15px #161616;
}

.datepicker-dates {
  height:70px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.datepicker-header {
  background:linear-gradient(white, #cbcbcb);
}

.datepicker-dates .pick-year-select, .pick-month-select {
  padding:5px 20px;
}

.datepicker-days-row {
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  border-bottom: 1px solid #222;
  background:white;
}

.datepicker-days-row .day { padding:10px 2px; }

.datepicker-body { cursor: pointer; }

.datepicker-body option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
}

.datepicker-body option:hover {
  background:#74b5e3;
  color:black;
}

.date-range{
  display:grid;
  margin:20px 0;
}

.monthWrap {
  display:grid;
  grid-template-columns:repeat(7, auto);
  background:#333;
  color:white;  
}

.hide { display: none; }

.show { display: grid; }

.not-current-month { color:#999; }

.highlight-from, .highlight-to {
  position: relative;
  background:#74b5e3; 
  color:black;
}

.highlight-from::after {
  content:'';
  display: block;
  position: absolute;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #74b5e3;
  top: 14px; left: 100%;
}

.highlight-to::after {
  content:'';
  display: block;
  position: absolute;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #74b5e3;
  top: 13px; left: -8px;
}

.highlight-range { background:#eee; color:black; }
.today { border: 1px solid #999; }

@media screen and (max-width: 600px) {

  .form-container {
    width: 350px;
    padding-top: 20px;
  }

  .datepicker-form {
    padding: 1rem;
  }

  .input-wrap {
    display: grid;
  }

  .input-wrap svg {
    bottom: 10px;
  }

  .datepicker-container {
    top: 100px;
  }

}