:root {
  /* osnovne boje */
  --color-available: #cfc;
  --color-occupied: #fcc;
  --color-occupied-text: #c00;
  --color-active: #5c5;
  --color-active-text: #000;
  --color-disabled: #eee;
  --color-border: #595;
  --color-header-bg: #0ca5b1;
  --color-header-text: #fff;
  
  /* gradijenti za booking */
  --grad-start: rgba(153, 153, 153, 0);
  --grad-mid: rgba(214, 214, 214, 0);
  --grad-booking: rgba(255, 204, 204, 1);
  --grad-first-last: rgba(85, 204, 85, 1);
}

/* Booking start / end */
.datepicker .day.booking-start,
.datepicker .day.booking-start:hover {
  background-color: var(--color-available); /* fallback */
  background: linear-gradient(
    135deg,
    var(--grad-start) 0%,
    var(--grad-mid) 50%,
    var(--grad-booking) 51%,
    var(--grad-booking) 100%
  );
}

.datepicker .day.booking-end,
.datepicker .day.booking-end:hover {
  background-color: var(--color-available); /* fallback */
  background: linear-gradient(
    135deg,
    var(--grad-booking) 0%,
    var(--grad-booking) 49%,
    var(--grad-mid) 50%,
    var(--grad-start) 100%
  );
}

/* Valid arrival / departure */
.datepicker .valid-arrival-day,
.datepicker .valid-departure-day {
  border-bottom: 2px solid var(--color-border);
}

/* Disabled day */
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background-color: var(--color-disabled);
}

/* Available / day */
.datepicker table tr td.day,
.datepicker table tr td.day:hover,
.datepicker table tr td.day.available,
.datepicker table tr td.day.available:hover {
  background-color: var(--color-available);
  border-radius: 0;
}

/* Occupied */
.datepicker table tr td.occupied,
.datepicker table tr td.occupied:hover {
  background-color: var(--color-occupied);
  color: var(--color-occupied-text);
}

/* Active */
.datepicker table tr td.active,
.datepicker table tr td.active:hover {
  background-color: var(--color-active) !important;
  color: var(--color-active-text);
}

/* Old / New days */
.datepicker table tr td.old,
.datepicker table tr td.old:hover,
.datepicker table tr td.new,
.datepicker table tr td.new:hover {
  background: #fff !important;
  color: #ccc;
  border: none;
}

/* Etv-datepicker wrapper */
.etv-datepicker.date-picker-wrapper {
  border: none;
  background-color: #fff;
  padding: 0;
  box-sizing: initial;
  width: 600px;
  max-width: 100%;
}

.etv-datepicker.single-month {
  width: 300px;
}

.etv-datepicker.inline-wrapper {
  width: 100%;
  max-width: none;
}

.etv-datepicker.date-picker-wrapper .month-wrapper {
  border: none;
  border-radius: 0;
  background-color: #fff;
  padding: 0;
  cursor: default;
  position: relative;
  width: 100% !important;
}

/* Table width */
.etv-datepicker.date-picker-wrapper .month-wrapper table,
.etv-datepicker.date-picker-wrapper .month-wrapper table.month2 {
  width: 49%;
  float: left;
  margin: 0;
}

.etv-datepicker.single-month .month-wrapper table {
  width: 100%;
}

.etv-datepicker.date-picker-wrapper .month-wrapper table td,
.etv-datepicker.date-picker-wrapper .month-wrapper table th {
  width: 14.285%;
  padding: 1px;
}

/* Table header */
.etv-datepicker.date-picker-wrapper .month-wrapper table th {
  background: var(--color-header-bg);
  color: var(--color-header-text);
}

.etv-datepicker.date-picker-wrapper .gap {
  width: 2%;
  margin: 0 0 -10px;
}

/* Responsive */
@media (max-width: 480px) {
  .etv-datepicker.date-picker-wrapper .gap {
    display: none;
  }
  .etv-datepicker.date-picker-wrapper .month-wrapper table,
  .etv-datepicker.date-picker-wrapper .month-wrapper table.month2 {
    width: 100%;
    float: none;
    margin-bottom: 15px;
  }
}

/* Day height */
@media (min-width: 992px) {
  .etv-datepicker .month-wrapper table .day {
    height: 28px;
    font-size: 14px;
    line-height: 18px;
  }
}

@media (min-width: 1200px) {
  .etv-datepicker .month-wrapper table .day {
    height: 34px;
    font-size: 14px;
    line-height: 24px;
  }
}

/* Booking specific rules */
.etv-datepicker-booking .month-wrapper table .day.valid.valid-arrival-day {
  border-bottom: 2px solid var(--color-border);
}

.etv-datepicker-booking.first-date-selected
  .month-wrapper
  table
  .day.valid.valid-arrival-day {
  border-bottom: none;
}

.etv-datepicker-booking.first-date-selected
  .month-wrapper
  table
  .day.valid.valid-departure-day {
  border-bottom: 2px solid var(--color-border);
}

.etv-datepicker-booking tbody td {
  border-color: var(--color-disabled);
}

.etv-datepicker-booking .month-wrapper table .day.invalid {
  background-color: var(--color-disabled);
  color: #777;
}

.etv-datepicker-booking .month-wrapper table .day.valid {
  background-color: var(--color-available);
}

.etv-datepicker-booking .month-wrapper table .day.occupied {
  background-color: var(--color-occupied);
  color: var(--color-occupied-text);
}

.etv-datepicker-booking .month-wrapper table .day.valid.hovering,
.etv-datepicker-booking .month-wrapper table .day.checked {
  background-color: var(--color-active) !important;
  color: var(--color-active-text) !important;
}

.etv-datepicker-booking .month-wrapper table .day.valid.booking-start,
.etv-datepicker-booking .month-wrapper table .day.valid.booking-end,
.etv-datepicker-booking .month-wrapper table .day.valid.last-date-selected,
.etv-datepicker-booking .month-wrapper table .day.valid.first-date-selected {
  background-color: var(--color-available) !important;
}

.etv-datepicker-booking .month-wrapper table .day.invalid.booking-start,
.etv-datepicker-booking .month-wrapper table .day.invalid.booking-end {
  background-color: var(--color-disabled) !important;
}

.etv-datepicker-booking
  .month-wrapper
  table
  .day.valid.last-date-selected.booking-start,
.etv-datepicker-booking
  .month-wrapper
  table
  .day.valid.first-date-selected.booking-end {
  background-color: var(--color-occupied) !important;
}

.etv-datepicker-booking .month-wrapper table .day.booking-start.hovering {
  background-color: var(--color-active) !important;
}

/* Gradients */
.etv-datepicker-booking .month-wrapper table .day.booking-start {
  background-color: var(--color-available); /* fallback */
  background: linear-gradient(
    145deg,
    var(--grad-start) 0%,
    var(--grad-mid) 50%,
    var(--grad-booking) 51%,
    var(--grad-booking) 100%
  );
}

.etv-datepicker-booking .month-wrapper table .day.booking-end {
  background-color: var(--color-available); /* fallback */
  background: linear-gradient(
    145deg,
    var(--grad-booking) 0%,
    var(--grad-booking) 49%,
    var(--grad-mid) 50%,
    var(--grad-start) 100%
  );
}

.etv-datepicker-booking .month-wrapper table .day.last-date-selected {
  background-color: var(--color-active); /* fallback */
  background: linear-gradient(
    145deg,
    var(--grad-first-last) 0%,
    var(--grad-first-last) 49%,
    var(--grad-mid) 50%,
    var(--grad-start) 100%
  );
}

.etv-datepicker-booking .month-wrapper table .day.first-date-selected {
  background-color: var(--color-active); /* fallback */
  background: linear-gradient(
    145deg,
    var(--grad-start) 0%,
    var(--grad-mid) 50%,
    var(--grad-first-last) 51%,
    var(--grad-first-last) 100%
  );
}