body{

    margin: 0;

    height: 100vh;

    position: relative;

    display: block;

    overflow: hidden;

}



#header{

    display: flex;

    position: relative;

    position: sticky;

    /* background: grey; */

    top:0;

    left: 0;

    /* height: 100px; */

    width: 100%;

    justify-content: center;

    align-items: center;

    z-index: 1;

    box-shadow: 0px 3px 3px 0px #bbb; 

}



#footer{

    display: flex;

    /* position: relative; */

    position: sticky;

    /* background: grey; */

    bottom:0;

    left: 0;

    height: 100px;

    width: 100%;

    justify-content: center;

    align-items: center;

    z-index: 1041;

    box-shadow: 0px 3px 8px 2px #bbb;

    background: #fff;

}



#content{

    height: calc(100vh - 180px - 100px);

    width: 100%;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    overflow: hidden;

}



#beach-map{

    position: relative;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    height: 100%;

    max-width: 100%;

    max-height: 100%;

}



#beach-container{

    max-height: 100%;

    max-width: 100%;

    position: relative;

    width: auto;

    object-fit: contain;

}





.container-md {

    max-width: 700px;

    margin-left: auto;

    margin-right: auto;

}



.btn-beach {

    border: solid 1px #0C85C9;

    border-radius: 5px;

    height: 40px;

    padding: 0;

}



.dates-box {

    border-radius: 10px;

    padding-left: 16px;

    display: flex;

    align-content: center;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    padding-right: 16px;

}



.header-step {

    box-shadow: 0px 3px 3px 0px #bbb;

    height: 100px;

}



@media (max-width: 576px) {



    .btn-beach {

        font-size: 0.9em;

    }

}



.position-name {

    top: 1px;

    left: 0;

    right: 0;

    background: #00852D;

    width: 14px;

    margin: auto;

    border-radius: 10px;

    font-size: 5px;

    line-height: 1;

    text-align: center;

}



.reservation-info {

    background: #494949;

    margin: auto;

    right: 0;

    left: 0;

    padding: 4px;

    border-radius: 10px; 

    font-size: 8px;

}



.stationimg-container.selected {

    /* box-shadow: 0px 0px 2px 1px #999; */

    /* border-radius: 10px; */

    filter: brightness(0.75);

}



.daterangepicker {

    position: relative;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    margin: auto;

    border: none;

    width: 100% !important;

    font-size: 15px;

}



.daterangepicker .calendar-table th,

.daterangepicker .calendar-table td {

    font-size: 15px;

    height: calc(4.4vh);

}



.daterangepicker .calendar {

    width: 100% !important;

    max-width: 100%;

}



.daterangepicker.opensright:before {

    left: 9px;

    display: none;

}



.daterangepicker.opensright:after {

    left: 10px;

    display: none;

}



.btn-beach.active,

.btn-beach-full {

    background: #0C85C9;

    color: #fff !important;

}



.btn-beach.active i,

.btn-beach-full i {

    color: #fff !important;

}



.daterangepicker td.in-range {

    background-color: #ffc0ac;

    border-color: transparent;

    color: #fff;

    border-radius: 0;

}



.daterangepicker td.active,

.daterangepicker td.active:hover {

    background-color: #F56D42;

    border-color: transparent;

    color: #fff;

}



.daterangepicker td.start-date {

    border-radius: 50% 0 0 50%;

}

.daterangepicker td.end-date {

    border-radius: 0 50% 50% 0;

}

.daterangepicker td.start-date.end-date {

    border-radius: 50%;

}



#beach-container {

    /* overflow-y: visible !important;

    overflow-x: clip; */

}



.stationimg-container {

    width: auto;

    /* height: 46px; */

    margin: auto;

    top: 0;

    bottom: 0;

    display: flex;

    align-content: center;

    justify-content: space-around;

    flex-wrap: wrap;

}



.form-beach label {

    font-size: 14px;

}



.form-beach input {

    border-radius: 5px;

}



.btn.cancelBtn {

    padding: 10px 16px !important;

    border-radius: 10px;

    background: #999999;

}



.btn.applyBtn {

    padding: 10px 16px !important;

    border-radius: 10px;

    background: #F56D42;

}



@media (min-width: 576px) {



    #content{

        height: calc(100vh - 180px - 100px);

    }

}



.station-image {

    width: 80%;

}



.daterangepicker span.drp-selected {

    padding-right: 0;

}

th.prev.available,

th.next.available {

    background: #F56D42;

}

th.prev.available {

    border-radius: 16px 3px 3px 16px;

}

th.next.available {

    border-radius: 3px 16px 16px 3px;

}

.daterangepicker .calendar-table .next span,

.daterangepicker .calendar-table .prev span {

  /* color: #fff; */

  border: solid #fff;

  border-width: 0 3px 3px 0;

  border-radius: 0;

  padding: 3px;

  margin-left: 6px;

}

.daterangepicker .calendar-table .prev span {

  margin-left: 4px;

}

.daterangepicker .calendar-table .next span {

  margin-right: 10px;

}