.desktop-calendar-box {
    --dc-text: #ffffff;
    --dc-muted: #868686;
    --dc-dow: #6591fa;
    --dc-day-bg: #3b5c92;
    --dc-day-color: #ffffff;
    --dc-today-bg: #062961;
    --dc-today-fg: #ffc21b;
    --dc-selected-bg: #f7f159;
    --dc-selected-fg: #000000;
    --dc-friday-border: #fd5d7f;
    --dc-holiday-border: var(--dc-friday-border);
    --dc-holiday-text: #000000;
    --dc-event-dot: #08194d;
    --dc-hover-bg: #ffffff;
    --dc-hover-fg: var(--dc-today-bg);
}

.calendar-head-wrapper {
    margin-bottom: 0.5rem;
    color: var(--dc-text);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.month-navigator {
    cursor: pointer;
}

.month-deactive {
    cursor: not-allowed;
    color: var(--dc-muted);
}

.calendar-body-wrapper {
    margin-top: 1rem;
    border-top: 1px solid var(--dc-dow);
}

.calendar-days-wrapper {
    margin: 1rem 0;
    color: var(--dc-text);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.calendar-days-wrapper>div {
    height: 20px;
    text-align: center;
    overflow-y: hidden;
    overflow-x: hidden;
}

.calendar-dates-wrapper {
    margin-top: 1rem;
    color: var(--dc-text);
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.calendar-date-box-size {
    width: 60px;
    height: 53px;
    line-height: 21px;
    font-size: 12px;
}

.calendar-date-box {
    padding: 3px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: var(--dc-day-bg);
    border-radius: 15px;
    color: var(--dc-day-color);
}

.date-number {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--dc-day-color);
}

.holiday-text-color {
    color: var(--dc-holiday-text);
}

.today-style {
    color: var(--dc-today-fg);
    background-color: var(--dc-today-bg);
}

.active-cell {
    background-color: var(--dc-selected-bg);
    color: var(--dc-selected-fg);
}

.holiday-border {
    border: 1px solid var(--dc-holiday-border);
}

.holding-cell {
    position: relative;
    padding: 3px;
    width: 5px;
    border-radius: 50%;
    top: 20px;
    right: 8px;
    background: var(--dc-event-dot);
}

.item-holding-date {
    border-radius: 25px;
    padding: 0.15em 0.7em;
}

.calendar-date-box:hover {
    background-color: var(--dc-hover-bg) !important;
    cursor: pointer;
    color: var(--dc-hover-fg);
}