/* Datepicker border styling */
.datepicker {
    background-color: white;
    border: 1px solid #CCCCCC;
    border-radius: 5px 5px 5px 5px;
    padding: 5px;
}

#search_form .datepicker {
    /* force datepicker size/position on search results page */
    position: relative !important;
    width: 210px !important;
    height: 139px !important;
}

.campsiteAvailabilityForm .datepicker {
    /* force datepicker size/position on availability checkers */
    position: relative !important;
    background-color: #f0f0f0;
}

.campsiteAvailabilityForm .datepickerDays a {
    width: 20px;
}


/* Tighten up the spacing between multiple calendars */
.datepickerSpace div {
    width: 6px;
}

/* Grey background behind Month Name row, and blue text */
/*
div.datepicker th {background-color:#DDDDDD;}
*/
div.datepicker th a.datepickerMonth {
    color: #444444;
    font-weight: normal;
}

/* month in header isn't a link in our range calendars */
a.datepickerMonth {
    text-decoration: none;
    pointer-events: none;
}

/* style the day of week header cells */
div.datepicker th {
    color: black;
    font-weight: bold;
}

/* grey underline beneath day of week row */
div.datepicker table thead tr.datepickerDoW th {
    border-bottom: 1px solid #CCCCCC;
}

/* Black text, white background, and grey borders around day cells */
div.datepicker a,
div.datepicker a:hover {
    color: black;
    cursor: pointer;
}

div.datepicker table.datepickerViewDays,
div.datepicker table.datepickerViewMonths,
div.datepicker table.datepickerViewYears {
    background-color: white;
}

div.datepicker table tbody.datepickerDays td {
    border: 1px solid #F7F7F7;
}

/* blue cell color for selected days */
tbody.datepickerDays td.datepickerSelected {
    background-color: #0077CC;
}

/* Grey out dates in the future */
div.datepicker td.datepickerDisabled a,
div.datepicker td.datepickerDisabled.datepickerNotInMonth a {
    color: #ddd;
}

div.datepicker td.datepickerNotInMonth a {
    color: #888;
}

/* cell background on hover */
div.datepicker tbody.datepickerDays td:hover {
    background-color: #39B54A;
}

div.datepicker td.closed:hover a {
    color: white;
}

/* don't display prev arrow for the past */
div.datepicker .datepickerFirstViewPast th a.datepickerGoPrev {
    display: none;
}

/* Compensate for the space lost by not having a previous arrow */
div.datepicker .datepickerFirstViewPast th a.datepickerMonth {
    margin-left: 15%;
}

#datepicker-calendar-inline div.datepicker .datepickerLastView th a.datepickerMonth {
    margin-left: 15%;
}

/* customise calendar size */
.datepickerDays a {
    width: 28px;
}

.datepickerYears a, .datepickerMonths a {
    width: 42px;
}

.datepickerMonths td:first-child a,
.datepickerYears td:first-child a {
    width: 39px;
}

div.datepicker th a.datepickerGoNext, div.datepicker th a.datepickerGoPrev {
    width: 15%
}

div.datepicker th a.datepickerMonth {
    width: 70%
}

/* style holidays */
div.datepicker td.datepickerHoliday a {
    color: cornflowerblue;
}

div.datepicker td.datepickerSelected.datepickerHoliday a {
    color: #b9e5fb;
}

div.datepicker td.datepickerHoliday a:hover {
    color: white;
}

/* style friday */
td.datepickerFriday {
    background-color: #f0f0f0;
}

/* style saturday */
td.datepickerSaturday {
    background-color: #f0f0f0;
}

/* Bold today's date */
div.datepicker td.datepickerToday a {
    font-weight: bold;
}

div.datepicker td.closed a {
    color: #ddd;
}

.campsiteAvailabilityForm td.datepickerArrive:not(.datepickerDisabled) a,
.campsiteAvailabilityForm td.datepickerDepart:not(.datepickerDisabled) a {
    box-shadow: 0 0 0 1px #2b8938 inset;
    border-collapse: separate;
    color: black;
}

.campsiteAvailabilityForm div.datepicker a,
.campsiteAvailabilityForm td.datepickerNoArrive a,
.campsiteAvailabilityForm td.datepickerNoDepart a,
.campsiteAvailabilityForm td.datepickerNoAllocation a {
    color: #999;
}

.campsiteAvailabilityForm td.datepickerFuture:hover a,
.campsiteAvailabilityForm td.datepickerNoArrive:hover a,
.campsiteAvailabilityForm td.datepickerNoDepart:hover a,
.campsiteAvailabilityForm td.datepickerNoAllocation:hover a {
    color: black;
}

/* style holidays */
.campsiteAvailabilityForm div.datepicker td.datepickerHoliday:not(.datepickerArrive):not(.datepickerDepart) a {
    color: #999;
}

.campsiteAvailabilityForm div.datepicker td.datepickerSelected.datepickerHoliday a {
    color: inherit;
}

.campsiteAvailabilityForm div.datepicker td.datepickerHoliday a:hover {
    color: inherit;
}

/* style friday */
.campsiteAvailabilityForm td.datepickerFriday {
    background-color: inherit;
}

/* style saturday */
.campsiteAvailabilityForm td.datepickerSaturday {
    background-color: inherit;
}

/* Bold today's date */
.campsiteAvailabilityForm div.datepicker td.datepickerToday a {
    font-weight: normal;
}

.datepicker-key {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 5px 0 0 0;
    font-size: smaller;
}

.datepicker-key .key {
    border: 1px solid #2b8938;
    display: inline-flex;
    width: 22px;
    height: 20px;
    margin-right: 6px;
    background-color: white;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.campsiteAvailabilityForm .datepicker-instructions {
    color: inherit;
}

.datepicker-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width:480px;
}

div.datepicker td.datepickerSelected a {
    color: white !important;
}