ul,
ol {
    padding: 0;
}

.dy-date-selector-wraper {
    display: inline-block;
}

.dy-date-picker {
    box-sizing: border-box;
    width: 323px;
    padding: 15px;
    user-select: none;

    .top {
        display: flex;
        justify-content: space-between;
        padding: 0 13px;
        color: #c0c4cc;
        cursor: pointer;

        .left,
        .right {
            span {
                &:nth-child(1) {
                    margin-right: 30px;
                }

                &:hover {
                    color: $themeColor;
                }
            }
        }

        span[class^='dy-icon-'] {
            font-size: 10px;
        }

        .center {
            color: #303133;
        }
    }

    ul {
        display: flex;
        flex-wrap: wrap;

        li {
            cursor: pointer;
        }
    }

    .week {
        padding: 15px 0;
        border-bottom: 1px solid #e4e7ed;

        li {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            color: #606266;
        }
    }

    .calendar {
        padding: 15px 0 0;

        li {
            display: flex;
            justify-content: center;
            width: 30px;
            height: 30px;
            margin: 0 13px 5px 0;
            color: #909399;
            cursor: not-allowed;

            &:nth-child(7n) {
                margin-right: 0;
            }
        }

        .month {
            color: #303133;
            cursor: pointer;
        }

        .disabled {
            color: #909399;
            cursor: not-allowed;
        }

        .today {
            color: $themeColor;
        }

        .active {
            border-radius: 50%;
            color: white;
            background: $themeColor;
            box-shadow: 0 2px 4px 0 rgba(2, 123, 248, .15), 0 -2px 4px 0 rgba(57, 122, 242, .15);
        }
    }
}

.dy-date-range-selecter-wrapper {
    .separator {
        margin: 0 10px;
    }
}