.ui.main.menu{
  margin: 0;
}
.page-header{
  background: #ccc;
  background-image:url('/public/imgs/resorts_o/royal_solaris_online_reservations.jpg');
  color: #fff;
  min-height: 50vh;
  display: grid;
  justify-content: center;
  align-content: center;
  background-position: center;
  background-size: 100%;
  grid-gap: 5em;
}
.ui.salmon.button{
  border-radius: 0;
}

.swiper {
  width: 100%;
}
.swiper .swiper-slide{
  max-width: 40vw;
}
.ui.card{
  border: none;
  box-shadow: none;
}
.ui.card .content, .ui.card .extra{
  border: none !important;
}


.plain_text {
  border: 0;
  box-shadow: 0;
  color: #00b2ac
}

.ui.plain.dropdown{
  border:none;
  
}
.ui.plain.dropdown .text{
  color: #00b2ac !important;
  font-size: 1.2rem;  
}

.ui.plain.dropdown.selection{
  padding: 0 !important;
  background: none;
}


.destination,
.dates,
.rooms{
  min-height: 2.5rem;
}
#paxForm{
  border-radius: 1em;
  color: #000;
  padding: 1em;  
  width: 250px;
  min-width: 250px; 
}
#paxForm .field{
  display: grid;
  grid-template-columns: auto 90px;
  margin-bottom: 0.5em;
}
.paxSelector{
  display: grid;
  grid-template-columns: auto 30px auto;
}

.paxSelector input{
  width: 100%;
  padding-top: 0.25em;
  height: 30px;
  text-align: center;
  border: none ;
  font-size: 1.6em;
  color: #00b2ac;
  
  pointer-events: none;
}
.paxSelector>div{
  text-align: center
}
.paxSelector .icon{
  margin-top: 0.5em;
  color: #475151
}

form.reservation{
  padding:0.5rem;
  
}
form.reservation .destination,
form.reservation .dates,
form.reservation .rooms{
  background-color:#fff;
  
  
}
form.reservation .destination{
  border-top-left-radius:0.56rem;
  border-bottom-left-radius:0.56rem;
  padding-left:2em;
}
form.reservation .rooms{
  border-top-right-radius:0.56rem;
  border-bottom-right-radius:0.56rem;
  margin-right:1em;
  padding-right:2em;
}

.ui.resort.plain.fluid.dropdown.selection.active.visible .menu{
  min-height: 175px;
}

.lightpick__month{
  margin: auto;
  width: 100% !important;
}
@media only screen and (max-width: 820px){
  .page-header{
    align-content: end;
    background-size: auto 100%;
    
    padding-top: 5em;
  }
  form.reservation{
    width: 100vw;
    background: #fff;
    padding: 1em !important;
  }
  form.reservation .destination,
  form.reservation .dates,
  form.reservation .rooms{
    padding: 1em;
  }
}
@media only screen and (min-width: 820px){
  form.reservation{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    max-width: 90vw;
    margin: auto
  }
  form.reservation hr{
    display: none !important;
  }
  form.reservation>*{
    padding: 1em;
    grid-row: 1;
  }
  form.reservation .ui.button{
    margin: auto;
    border-radius: 0.59em
  }
}