.vm-range-picker {
    --color: #222;
    --border: 1px solid #dadadaff;
    --hover-color: #40a9ff;

    &.dark {
        --color: #a9d5d3ff;
        --border: 1px solid #3c7073ff;
        --bg-color: #0d1a1b;
        --hover-color: white;
        .ant-picker-active-bar {
            background: #59ffe2;
        }
    }
    &.blue {
        --color: #ffffff;
        --border: 1px solid #1464a6 !important;
        --bg-color: rgba(0, 139, 237, 0.1) !important;
        --hover-color: white;
        .ant-picker-active-bar {
            background: #018aff;
        }
        .ant-picker-separator,
        .ant-picker-focused .ant-picker-separator {
            color: #fff !important;
        }
    }
    background-color: var(--bg-color) !important;
    border: var(--border) !important;

    .ant-picker-suffix {
        color: var(--color);
    }

    &:hover {
        border-color: var(--hover-color);
    }

    .ant-picker-input {
        input {
            color: var(--color);
        }
    }

    .ant-picker-separator {
        color: var(--color);
    }

    .ant-picker-clear {
        color: var(--color);
        background: transparent;
    }
}
.vm-select {
    &.dark {
        .ant-select-selector {
            background-color: #0d1a1b !important;
            border: 1px solid #3c7073 !important;
            .ant-select-selection-item {
                color: #a9d5d3;
            }
        }
        &:hover {
            .ant-select-selector {
                border: 1px solid #6cc9ce !important;
            }
        }
    }
    &.blue {
        .ant-select-selector {
            background: rgba(0, 139, 237, 0.1) !important;
            border: 1px solid #1464a6 !important;
            .ant-select-selection-item {
                color: white;
            }
        }
        &:hover {
            .ant-select-selector {
                border: 1px solid #018aff !important;
            }
        }
        .ant-select-arrow {
            color: white;
        }
    }
}

.vm-select-dropdown {
    &.dark {
        background: #0d1a1b;
        .ant-select-item {
            color: white;
        }
        .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
            background-color: #2d575a;
        }
        .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
            background-color: #1c3436;
        }
    }
    &.blue {
        background-color: #1a3e69;

        .ant-select-item {
            color: white;
        }
        .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
            background-color: RGBA(30, 92, 147, 0.5);
        }
        .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
            background: RGBA(30, 92, 147, 1);
        }
        .ant-empty-description,
        .ant-select-dropdown-empty {
            color: #74bbf4;
        }
    }
}
.vm-range-picker-dropdown {
    &.dark {
        .ant-picker-range-arrow {
            background: none;
            &::before {
                background: #0d1a1be6;
            }
        }
        .ant-picker-panel-container {
            background: #0d1a1be6;
            box-shadow: 0 3px 6px -4px #ffffff1f, 0 6px 16px #ffffff14, 0 9px 28px 8px #5454540d;
            .ant-picker-header {
                button {
                    color: white;
                    &:hover {
                        color: #95fff9;
                    }
                }
            }
            .ant-picker-content {
                th {
                    color: white;
                }
                .ant-picker-cell-inner {
                    color: white;
                }
                .ant-picker-cell-in-view.ant-picker-cell-in-range::before {
                    background: #6cff2340;
                }
                .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before,
                .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before {
                    background: #6cff2340;
                }
                .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner,
                .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
                .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
                    background: #52c41a;
                }
                .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
                .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end)
                    .ant-picker-cell-inner {
                    background: #f5f5f55e;
                }
                .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
                    border: 1px solid #52c41a;
                }

                .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before,
                .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before,
                .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before,
                .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before,
                .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before,
                .ant-picker-panel
                    > :not(.ant-picker-date-panel)
                    .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before,
                .ant-picker-panel
                    > :not(.ant-picker-date-panel)
                    .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before {
                    background: #52c41abb;
                }

                .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start
                    .ant-picker-cell-inner::after,
                .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end
                    .ant-picker-cell-inner::after {
                    background: #52c41abb !important;
                }
            }
        }
    }
    &.blue {
        .ant-picker-range-arrow {
            background: none;
            &::before {
                background: rgb(23 62 110);
            }
        }
        .ant-picker-panel {
            border-bottom: 1px solid #95fff933 !important;
        }

        .ant-picker-footer {
            border-top: 1px solid #95fff933 !important;
        }
        .ant-picker-panel-container {
            background: rgb(51 95 135);
            box-shadow: 0 3px 6px -4px #ffffff1f, 0 6px 16px #ffffff14, 0 9px 28px 8px #5454540d;
            .ant-picker-header {
                border-bottom: 1px solid #95fff933;
                button {
                    color: white;
                    &:hover {
                        color: #95fff9;
                    }
                }
            }
            .ant-picker-footer {
                border-top: 1px solid #95fff933 !important;
            }
            .ant-picker-content {
                th {
                    color: white;
                }
                .ant-picker-cell-inner {
                    color: white;
                }
                .ant-picker-cell-in-view.ant-picker-cell-in-range::before {
                    background: rgba(40, 114, 175, 1);
                }
                .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before,
                .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before {
                    background: rgba(40, 114, 175, 0.6);
                }
                .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner,
                .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
                .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
                    background: rgba(40, 114, 175, 0.6);
                }
                .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
                .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end)
                    .ant-picker-cell-inner {
                    background: rgba(40, 114, 175, 0.6);
                }
                .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
                    background: rgba(40, 114, 175, 0.6);
                }

                .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before,
                .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before,
                .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before,
                .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before,
                .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before,
                .ant-picker-panel
                    > :not(.ant-picker-date-panel)
                    .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before,
                .ant-picker-panel
                    > :not(.ant-picker-date-panel)
                    .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before {
                    background: #07749fbb;
                    border-bottom: 1px solid #95fff933;
                }

                .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start
                    .ant-picker-cell-inner::after,
                .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end
                    .ant-picker-cell-inner::after {
                    background: #07749fbb !important;
                }
            }
        }
    }
}

.vm-radioTime {
    display: flex;
    align-items: center;
}
.vm-radio {
    flex-shrink: 0;
}

.vm-filter {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    margin-left: 10px;
}

.vm-filter-label {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    color: var(--label-color);
    margin-right: 5px;
}
