.calendar {
    position: absolute;
    z-index: 999999;
}

.calendar-body {
    padding: 14px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0px 10px 4px rgb(30, 32, 37, .16);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.calendar-content {
    width: 100%;
    color: var(--text-cl);
    flex-grow: 1;
}

.calendar-footer {
    text-align: end;
    padding-bottom: 8px;
}

    .calendar-footer span {
        padding: 8px 12px;
        background: #eee;
        border-radius: var(--inp-radius);
    }

.calendar-content .calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.calendar-content .day,
.calendar-content a,
.calendar-content span {
}

.calendar-content .day,
.calendar-content a,
.calendar-content span {
    cursor: pointer;
    max-width: 100%;
    height: 43px;
    display: flex;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    user-select: none;
    margin: auto;
    line-height: 1;
    transition: background .1s ease, color .1s ease;
}

.calendar-content .row-cols-7 .day:not(.disabled):hover,
.calendar-content .navi-l a:hover,
.calendar-content .navi-r a:hover {
    background: #f1f1f1;
    color: #333;
}

    .calendar-content .row-cols-7 .day:not(.disabled):hover .lunar {
        color: #333;
    }

.calendar-content .disabled {
    opacity: .4
}

    .calendar-content .disabled:hover {
        cursor: no-drop
    }

.calendar-content .row-cols-7 {
    position: relative;
    display: flex;
    flex-wrap: wrap
}

    .calendar-content .navi-l, .calendar-content .navi-r, .calendar-content .row-cols-7 > div {
        flex: 0 0 auto;
        width: calc(100% / 7);
        max-width: 100%;
        text-align: center;
        /*padding: 2px;*/
    }

    .calendar-content .row-cols-7 .day.today {
        background: var(--sec-cl);
    }

    .calendar-content .row-cols-7 .day.active {
        color: #fff;
        background: var(--pri-cl) !important
    }

        .calendar-content .row-cols-7 .day.active div:first-child, .calendar-content .row-cols-7 .day.active .lunar {
            color: #fff !important;
        }

    .calendar-content .row-cols-7 .lunar {
        font-size: 60%;
        margin-top: 3px;
        color: var(--dark-cl);
    }

    .calendar-content .row-cols-7 .tet {
        background-color: #f83c3c;
        color: #fff;
    }

        .calendar-content .row-cols-7 .tet .lunar {
            color: #fff;
        }

    .calendar-content .row-cols-7 .cn, .calendar-content .row-cols-7 .lunar-2 {
        color: #e95432 !important
    }

    .calendar-content .row-cols-7 .t7 {
        /*color: #36b37e*/
    }

    .calendar-content .row-cols-7 > .day-of-week {
        text-align: center;
        margin-top: 5px;
        margin-bottom: 5px;
        font-weight: bold
    }

.calendar-content .calendar-title {
    font-weight: 500;
    font-size: 136%;
    text-align: center
}

    .calendar-content .calendar-title a {
        padding: 0 10px
    }

.calendar-content .navi-l, .calendar-content .navi-r {
    padding: 0;
    display: flex;
    width: auto;
}

    .calendar-content .navi-l a, .calendar-content .navi-l span, .calendar-content .navi-r a, .calendar-content .navi-r span, .calendar-content .row-cols-7 .day {
        width: 43px;
    }

        .calendar-content .navi-l a:before, .calendar-content .navi-l span:before, .calendar-content .navi-r a:before, .calendar-content .navi-r span:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 20px;
            height: 20px;
            background-repeat: no-repeat;
            background-position: center
        }

        .calendar-content .navi-l a:before, .calendar-content .navi-l span:before {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-caret-left-fill" viewBox="0 0 16 16"><path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/></svg>')
        }

        .calendar-content .navi-r a:before, .calendar-content .navi-r span:before {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16"><path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/></svg>')
        }

.calendar-content.range .row-cols-5 > div a, .calendar-content.range .row-cols-5 > div span, .calendar-content.year .row-cols-4 > div a, .calendar-content.year .row-cols-4 > div span {
    display: flex;
    font-weight: 500;
}

.calendar-content.range .row-cols-5 > div {
    padding: 0 5px
}

.calendar-center .calendar {
    left: 50%;
    transform: translateX(-50%)
}

.calendar-end .calendar {
    right: 0;
    transform: translateX(-50%)
}

.calendar-start .calendar {
    left: 30%;
    transform: translateX(-50%)
}

div > .dtc-datepicker {
    position: relative
}

.calendar .row-cols-4, .calendar .row-cols-5 {
    display: flex;
    flex-wrap: wrap
}

    .calendar .row-cols-4 > div {
        flex: 0 0 auto;
        width: 25%
    }

    .calendar .row-cols-5 > div {
        flex: 0 0 auto;
        width: 20%
    }

/*Dark mode*/
.calendar.dtc-dark-mode .calendar-body {
    border: 1px solid #3C52D9;
    background: linear-gradient(97.53deg, #243474 8.51%, #162561 44.16%);
}

.calendar.dtc-dark-mode .calendar-content {
    color: var(--neu1-cl);
}

    .calendar.dtc-dark-mode .calendar-content .row-cols-7 .lunar {
        color: var(--neu1-cl);
    }

    .calendar.dtc-dark-mode .calendar-content .row-cols-7 .day.today {
        background: #FFFCF933;
    }
    .calendar.dtc-dark-mode .calendar-content .navi-l a:before,
    .calendar.dtc-dark-mode .calendar-content .navi-l span:before,
    .calendar.dtc-dark-mode .calendar-content .navi-r a:before,
    .calendar.dtc-dark-mode .calendar-content .navi-r span:before {
        filter: invert(1);
    }

/*End dark mode*/