@import url('./variables.css');
/* =========================
   Bootstrap Datepicker UI
   ========================= */

.datepicker-dropdown {
    /* border: none; */
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 10px 35px rgba(0,0,0,0.10);
    min-width: 280px;
    padding: 0;
}

/* remove default arrow */
.datepicker-dropdown:before,
.datepicker-dropdown:after{
    /* display:none; */
}

.datepicker .next.disabled, .datepicker .prev.disabled {
  visibility: visible;
}

/* table */
.datepicker table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 6px;
}

.datepicker th.today {
    font-size: 12px;
}
/* =========================
   Header
   ========================= */

.datepicker .datepicker-switch {
    font-weight: 700;
    color: #111827;
    text-align: center;
    padding: 0 10px;
    cursor: pointer;
}

.datepicker .prev,
.datepicker .next {
    font-size: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    position: relative;
    transition: 0.2s ease;
    cursor: pointer;
}

.datepicker .prev:hover,
.datepicker .next:hover{
    background: #f3f4f6;
}

/* Font Awesome Icons */
.datepicker .prev::before{
    content: "\f053";
    font-family: "FontAwesome";
    font-weight: 900;
    font-size: 13px;
    color: #374151;
}

.datepicker .next::before{
    content: "\f054";
    font-family: "FontAwesome";
    font-weight: 900;
    font-size: 13px;
    color: #374151;
}

/* disable state */
.datepicker .prev.disabled,
.datepicker .next.disabled{
    opacity: 0.35;
    cursor: not-allowed;
}

/* =========================
   Week Names
   ========================= */

.datepicker .dow {
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    padding-bottom: 10px;
    text-transform: uppercase;
}

/* =========================
   Days
   ========================= */

.datepicker td,
.datepicker th {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    text-align: center;
    vertical-align: middle;
}

/* normal day */
.datepicker td.day {
    background: #edf2ee;
    color: #1f2937;
    font-size: .875rem;
    font-weight: 500;
    transition: 0.2s ease;
    cursor: pointer;
}

/* hover */
.datepicker td.day:hover {
    background: #dfe7e1;
}

/* active selected day */
.datepicker td.day.active,
.datepicker td.day.active:hover {
    background: #167c3b !important;
    color: #fff !important;
    font-weight: 700;
}

/* today */
.datepicker td.today {
    background: #d7f0dd;
    color: #166534;
    font-weight: 700;
    cursor: pointer;
}

/* old/new month dates */
.datepicker td.old,
.datepicker td.new {
    background: transparent;
    color: #c4c9d4;
    cursor: not-allowed;
}

/* disabled */
.datepicker td.disabled,
.datepicker td.disabled:hover {
    background: #f5f5f5;
    color: #c9c9c9;
    cursor: not-allowed;
    opacity: 0.7;
}

/* =========================
   Months / Years View
   ========================= */

.datepicker span.month,
.datepicker span.year,
.datepicker span.decade,
.datepicker span.century {
    border-radius: 12px;
    transition: 0.2s ease;
    font-weight: 600;
}

.datepicker span.month:hover,
.datepicker span.year:hover,
.datepicker span.decade:hover,
.datepicker span.century:hover {
    background: #edf2ee;
}

.datepicker span.month.active,
.datepicker span.year.active,
.datepicker span.decade.active,
.datepicker span.century.active {
    background: #167c3b !important;
    color: #fff !important;
}

/* =========================
   Months / Years / Decades
   ========================= */

.datepicker .months,
.datepicker .years,
.datepicker .decades,
.datepicker .centuries {
    padding: 10px;
}

.datepicker span.month,
.datepicker span.year,
.datepicker span.decade,
.datepicker span.century {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: 50px;
    margin: 1%;
    border-radius: 10px;
    background: #edf2ee;
    color: #1f2937;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Hover */
.datepicker span.month:hover,
.datepicker span.year:hover,
.datepicker span.decade:hover,
.datepicker span.century:hover {
    background: #dfe7e1;
}

/* Keyboard focus */
.datepicker span.month.focused,
.datepicker span.year.focused,
.datepicker span.decade.focused,
.datepicker span.century.focused {
    background: #d7f0dd;
    color: #166534;
}

/* Selected */
.datepicker span.month.active,
.datepicker span.month.active:hover,
.datepicker span.year.active,
.datepicker span.year.active:hover,
.datepicker span.decade.active,
.datepicker span.decade.active:hover,
.datepicker span.century.active,
.datepicker span.century.active:hover {
    background: #167c3b !important;
    color: #ffffff !important;
    font-weight: 700;
}

/* Current month/year/decade */
.datepicker span.month.today,
.datepicker span.year.today,
.datepicker span.decade.today,
.datepicker span.century.today {
    background: #d7f0dd;
    color: #166534;
    font-weight: 700;
}

/* Disabled */
.datepicker span.month.disabled,
.datepicker span.month.disabled:hover,
.datepicker span.year.disabled,
.datepicker span.year.disabled:hover,
.datepicker span.decade.disabled,
.datepicker span.decade.disabled:hover,
.datepicker span.century.disabled,
.datepicker span.century.disabled:hover {
    background: #f5f5f5;
    color: #c9c9c9;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Previous/Next decade/year values */
.datepicker span.month.old,
.datepicker span.month.new,
.datepicker span.year.old,
.datepicker span.year.new,
.datepicker span.decade.old,
.datepicker span.decade.new,
.datepicker span.century.old,
.datepicker span.century.new {
    color: #c4c9d4;
}

/* Disabled + Active */
.datepicker span.month.active.disabled,
.datepicker span.year.active.disabled,
.datepicker span.decade.active.disabled,
.datepicker span.century.active.disabled {
    opacity: 0.6;
}

/* =========================
   View Title
   ========================= */

.datepicker .datepicker-switch:hover {
    background: #f3f4f6;
    border-radius: 8px;
}

/* =========================
   Footer (Today/Clear)
   ========================= */

.datepicker tfoot tr th {
    border-radius: 8px;
    font-weight: 600;
    color: #374151;
    transition: all 0.2s ease;
}

.datepicker tfoot tr th:hover {
    background: #edf2ee;
}

/* =========================
   Range Selection Support
   ========================= */

.datepicker td.range,
.datepicker td.range:hover {
    background: #d7f0dd;
    color: #166534;
}

.datepicker td.selected,
.datepicker td.selected:hover {
    background: #167c3b;
    color: #fff;
}

.datepicker td.range-start,
.datepicker td.range-end {
    background: #167c3b;
    color: #fff;
}

/* =========================
   Better Accessibility
   ========================= */

.datepicker td.day:focus,
.datepicker span.month:focus,
.datepicker span.year:focus,
.datepicker span.decade:focus,
.datepicker span.century:focus {
    outline: none;
}