.gvlib {
    --gvlib-body-font-family: 'Microsoft JhengHei', 微軟正黑體, 'Segoe UI', SegoeUI, Helvetica, Arial, sans-serif;
    --gvlib-body-font-size: 14px;

    --gvlib-body-bg: #F4F7FA;
    --gvlib-body-bg-rgb: 244, 247, 250;
    --gvlib-body-color: rgba(0, 0, 0, 0.85);

    --gvlib-component-bg: #fff;
    --gvlib-border-color: rgba(0,0,0,.125);

    --gvlib-form-label-color: #4c78ac;

    /* scrollbar */
    --gvlib-scrollbar-bg: #C5C8CD;
    --gvlib-scrollbar-width: 8px;
    --gvlib-scrollbar-border-radius: 10px;

    /* button */
    --gvlib-btn-border-radius: 6px;

    --gvlib-btn-primary-color: #fff;
    --gvlib-btn-primary-bg: #5474A5 ;
    --gvlib-btn-primary-hover-bg: #5683AF ;
    --gvlib-btn-primary-active-bg: #2C649B ;
    --gvlib-btn-primary-disabled-bg: #B5C2D8;
    --gvlib-btn-primary-disabled-color: #F8FAFC;

    --gvlib-btn-secondary-color: #5474A5;
    --gvlib-btn-secondary-bg: #F4F7FA;
    --gvlib-btn-secondary-border-color: #5474A5;
    --gvlib-btn-secondary-hover-bg: #E8F0F9;
    --gvlib-btn-secondary-hover-color: #5474A5;
    --gvlib-btn-secondary-active-bg: #E3EDF9;
    --gvlib-btn-secondary-disabled-bg: #EFF3F9 ;
    --gvlib-btn-secondary-disabled-color: rgba(84, 116, 165, 0.4);
    --gvlib-btn-secondary-disabled-border-color: rgba(84, 116, 165, 0.4);

    /* modal */
    --gvlib-modal-border-radius: 0.5rem;
    --gvlib-modal-bg: #F4F7FA;
    --gvlib-modal-border: 1px solid #DFE1E5;
    --gvlib-modal-close-color: #282828;
    --gvlib-modal-close-hover-color: #5683AF;
    --gvlib-modal-close-active-color: #2C649B;

    /* dropdown menu */
    --gvlib-dropdown-menu-bg: #FFF;
    --gvlib-dropdown-menu-color: rgba(0, 0, 0, 0.85);
    --gvlib-dropdown-menu-border: 1px solid #DFE1E5;
    --gvlib-dropdown-menu-border-color: #DFE1E5;
    --gvlib-dropdown-menu-border-radius: 6px;

    /* list item */
    --gvlib-list-item-border-color: #DFE1E5;
    --gvlib-list-item-color: rgba(0, 0, 0, 0.85);
    --gvlib-list-item-bg: #fff;
    --gvlib-list-item-even-bg: #fbfbfb;
    --gvlib-list-item-hover-bg: #E8F0F9;
    --gvlib-list-item-selected-color: rgba(0, 0, 0, 0.85);
    --gvlib-list-item-selected-bg: #E3EDF9;
    --gvlib-list-item-disabled-color: rgba(0,0,0,.25);

    /* dropdown menu */
    --gvlib-dropdown-menu-bg: #FFF;
    --gvlib-dropdown-menu-color: rgba(0, 0, 0, 0.85);
    --gvlib-dropdown-menu-border: 1px solid #DFE1E5;
    --gvlib-dropdown-menu-border-color: #DFE1E5;
    --gvlib-dropdown-menu-border-radius: 6px;
    --gvlib-dropdown-menu-box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    --gvlib-dropdown-menu-item-border-radius: 4px;
    --gvlib-dropdown-menu-item-hover-bg: #E8F0F9;
    --gvlib-dropdown-menu-item-hover-color: rgba(0, 0, 0, 0.85);
    --gvlib-dropdown-menu-item-selected-bg: #E3EDF9;
    --gvlib-dropdown-menu-item-selected-color: rgba(0, 0, 0, 0.85);
    --gvlib-dropdown-menu-item-disabled-color: #28282866;
    --gvlib-dropdown-menu-item-separator-color: #DFE1E5;

    /* input */
    --gvlib-input-border-radius: 6px;
    --gvlib-input-color: #282828;
    --gvlib-input-bg: #fff;
    --gvlib-input-border-color: #DFE1E5;
    --gvlib-input-hover-bg: #fff;
    --gvlib-input-hover-border-color: #5683AF;
    --gvlib-input-disabled-color: rgba(0,0,0,.25);
    --gvlib-input-disabled-bg: #e9ecef;
    --gvlib-input-placeholder-color: #bfbfbf;
}
.dark .gvlib {
    --gvlib-body-bg: #131313;
    --gvlib-body-bg-rgb: 19, 19, 19;
    --gvlib-body-color: #d9d9d9;

    --gvlib-component-bg: #232323;
    --gvlib-border-color: #404247;

    --gvlib-form-label-color: #d9d9d9;

    /* scrollbar */
    --gvlib-scrollbar-bg: #404247;

    /* button */
    --gvlib-btn-primary-color: #fff;
    --gvlib-btn-primary-bg: #4C94E9;
    --gvlib-btn-primary-hover-bg: #2C649B;
    --gvlib-btn-primary-active-bg: #468BE2;
    --gvlib-btn-primary-disabled-bg: #2D4569;
    --gvlib-btn-primary-disabled-color: #717171;

    --gvlib-btn-secondary-color: #4C94E9;
    --gvlib-btn-secondary-bg: transparent;
    --gvlib-btn-secondary-border-color: #4C94E9;
    --gvlib-btn-secondary-hover-bg: #0D1D2F;
    --gvlib-btn-secondary-hover-color: #4C94E9;
    --gvlib-btn-secondary-active-bg: #122943;
    --gvlib-btn-secondary-disabled-bg: transparent;
    --gvlib-btn-secondary-disabled-color: #2D4569;
    --gvlib-btn-secondary-disabled-border-color: #2D4569;

    /* modal */
    --gvlib-modal-bg: #131313;
    --gvlib-modal-border: 1px solid #404247;
    --gvlib-modal-close-color: #d9d9d9;
    --gvlib-modal-close-hover-color: #2C649B;
    --gvlib-modal-close-active-color: #4B97F1;

    /* dropdown menu */
    --gvlib-dropdown-menu-bg: #3B3C43;
    --gvlib-dropdown-menu-color: #d9d9d9;
    --gvlib-dropdown-menu-border: 1px solid #404247;
    --gvlib-dropdown-menu-border-color: #404247;

    /* list item */
    --gvlib-list-item-border-color: #33363f;
    --gvlib-list-item-color: #d9d9d9;
    --gvlib-list-item-bg: #232323;
    --gvlib-list-item-even-bg: #1b1b1b;
    --gvlib-list-item-hover-bg: #3F4956;
    --gvlib-list-item-selected-color: rgba(255, 255, 255, 0.85);
    --gvlib-list-item-selected-bg: #404E62;
    --gvlib-list-item-disabled-color: rgb(217, 217, 217, .2);

    /* dropdown menu */
    --gvlib-dropdown-menu-bg: #3B3C43;
    --gvlib-dropdown-menu-color: #d9d9d9;
    --gvlib-dropdown-menu-border: 1px solid #404247;
    --gvlib-dropdown-menu-border-color: #404247;
    --gvlib-dropdown-menu-item-hover-bg: rgba(63, 73, 86);
    --gvlib-dropdown-menu-item-hover-color: #fff;
    --gvlib-dropdown-menu-item-selected-bg: #404E62;
    --gvlib-dropdown-menu-item-selected-color: #fff;
    --gvlib-dropdown-menu-item-disabled-color: rgb(217, 217, 217, .4);
    --gvlib-dropdown-menu-item-separator-color: #404247;

    /* input */
    --gvlib-input-color: #d9d9d9;
    --gvlib-input-bg: #313336;
    --gvlib-input-border-color: #313336;
    --gvlib-input-hover-bg: #313336;
    --gvlib-input-hover-border-color: #468BE2;
    --gvlib-input-disabled-color: rgba(255,255,255,.25);
    --gvlib-input-disabled-bg: #232323;
    --gvlib-input-placeholder-color: #777;
}

.gvlib {
    color: var(--gvlib-body-color);
    font-family: var(--gvlib-body-font-family);
    font-size: var(--gvlib-body-font-size);
}

.gvlib *, .gvlib :after, :before {
    box-sizing: border-box;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

/* antd */
.gvlib {
    .ant-btn {
        color: var(--gvlib-btn-primary-color);
    }

    .ant-btn:not(.ant-btn-circle) {
        border-radius: var(--gvlib-btn-border-radius);
    }
    .ant-btn:not(:disabled):focus-visible {
        outline: none;
    }
    .ant-btn.ant-btn-primary:not(.ant-btn-dangerous) {
        color: var(--gvlib-btn-primary-color);
        background-color: var(--gvlib-btn-primary-bg);
        border-color: var(--gvlib-btn-primary-bg);
    }

    .ant-btn.ant-btn-default {
        color: var(--gvlib-btn-secondary-color);
        background-color: var(--gvlib-btn-secondary-bg);
        border-color: var(--gvlib-btn-secondary-border-color);
    }
    .ant-btn.ant-btn-default:not(:disabled):hover {
        color: var(--gvlib-btn-secondary-hover-color);
        background-color: var(--gvlib-btn-secondary-hover-bg);
        border-color: var(--gvlib-btn-secondary-border-color);
    }
    .ant-btn.ant-btn-default:not(:disabled):active {
        color: var(--gvlib-btn-secondary-hover-color);
        background-color: var(--gvlib-btn-secondary-active-bg);
        border-color: var(--gvlib-btn-secondary-border-color);
    }
    .ant-btn-default:disabled, .ant-btn-default:disabled:hover, .ant-btn-default:disabled:active, .ant-btn-default:disabled:focus {
        color: var(--gvlib-btn-secondary-disabled-color);
        background-color: var(--gvlib-btn-secondary-disabled-bg);
        border-color: var(--gvlib-btn-secondary-disabled-border-color);
    }
    
    .ant-btn.ant-btn-primary:not(:disabled):not(.ant-btn-dangerous):hover {
        color: var(--gvlib-btn-primary-color);
        background-color: var(--gvlib-btn-primary-hover-bg);
        border-color: var(--gvlib-btn-primary-hover-bg);
    }
    .ant-btn.ant-btn-primary:not(:disabled):not(.ant-btn-dangerous):active {
        color: var(--gvlib-btn-primary-color);
        background-color: var(--gvlib-btn-primary-active-bg);
        border-color: var(--gvlib-btn-primary-active-bg);
    }
    .ant-btn-primary:disabled:not(.ant-btn-dangerous), .ant-btn-primary:disabled:not(.ant-btn-dangerous):hover, .ant-btn-primary:disabled:not(.ant-btn-dangerous):active, .ant-btn-primary:disabled:not(.ant-btn-dangerous):focus {
        color: var(--gvlib-btn-primary-disabled-color);
        background-color: var(--gvlib-btn-primary-disabled-bg);
        border-color: var(--gvlib-btn-primary-disabled-bg);
    }
    .ant-btn.ant-btn-primary:not(.orig-color) svg > * {
        fill: currentColor;
    }

    .ant-modal {
        border: var(--gvlib-modal-border);
        border-radius: var(--gvlib-modal-border-radius);
    }
    .ant-modal:not(.ant-modal-confirm-confirm) .ant-modal-body {
        padding: 1rem;
    }
    .ant-modal .ant-modal-content {
        border-radius: var(--gvlib-modal-border-radius);
    }
    .ant-modal .ant-modal-content,
    .ant-modal .ant-modal-header,
    .ant-modal .ant-modal-title {
        color: var(--gvlib-body-color);
        background-color: var(--gvlib-modal-bg);
    }
    .ant-modal-header {
        border-bottom: none;
        border-radius: var(--gvlib-modal-border-radius) var(--gvlib-modal-border-radius) 0 0;
    }
    .ant-modal-footer {
        border-top: none;
        border-radius: 0 0 var(--gvlib-modal-border-radius) var(--gvlib-modal-border-radius);
        display: flex;
        justify-content: flex-end;
        grid-gap: 0.5em;
    }
    .ant-modal-footer > .space {
        flex: 1 1 auto;
    }
    .ant-modal-close {
        color: var(--gvlib-modal-close-color);
    }
    .ant-modal-close:hover {
        color: var(--gvlib-modal-close-hover-color);
    }
    .ant-modal-close:active {
        color: var(--gvlib-modal-close-active-color);
    }

    .ant-modal-confirm .ant-modal-confirm-title,
    .ant-modal-confirm .ant-modal-confirm-content {
        color: var(--gvlib-body-color);
    }


    .ant-popover {
        color: var(--gvlib-dropdown-menu-color);
    }
    .ant-popover-inner {
        border: var(--gvlib-dropdown-menu-border);
        border-radius: var(--gvlib-dropdown-menu-border-radius);
        background-color: var(--gvlib-dropdown-menu-bg);
    }
    .ant-popover-title {
        color: var(--gvlib-dropdown-menu-color);
        border-color: var(--gvlib-dropdown-menu-border-color);
    }
    .ant-popover-inner-content {
        color: var(--gvlib-dropdown-menu-color);
    }
    .ant-popover-placement-bottom .ant-popover-arrow {
        box-shadow: 0 1px var(--gvlib-dropdown-menu-bg);
    }
    .ant-popover .ant-popover-arrow:before {
        background-color: var(--gvlib-dropdown-menu-bg);
    }


    .ant-select {
        text-align: left;
        color: var(--gvlib-input-color);
    }
    .ant-select:not(.ant-select-customize-input) .ant-select-selector {
        border-radius: var(--gvlib-input-border-radius);
        border-color: var(--gvlib-input-border-color);
        color: var(--gvlib-input-color);
        background-color: var(--gvlib-input-bg);
    }
    .ant-select.ant-select:not(.ant-select-disabled):hover .ant-select-selector {
        background-color: var(--gvlib-input-hover-bg);
        border-color: var(--gvlib-input-hover-border-color);
    }
    .ant-select .ant-select-arrow {
        color: var(--gvlib-input-color);
    }

    .ant-select-dropdown {
        border-radius: var(--gvlib-input-border-radius);
        color: var(--gvlib-dropdown-menu-color);
        background-color: var(--gvlib-dropdown-menu-bg);
    }
    .ant-select-dropdown .ant-select-item {
        text-align: left;
        color: var(--gvlib-list-item-color);
        background-color: var(--gvlib-dropdown-menu-bg);
    }
    .ant-select-dropdown .ant-select-item.ant-select-item-option-active {
        background-color: var(--gvlib-list-item-hover-bg);
    }
    .ant-select-dropdown .ant-select-item.ant-select-item-option-selected {
        color: var(--gvlib-list-item-selected-color);
        background-color: var(--gvlib-list-item-selected-bg);
    }

    .ant-form-item-label > label {
        color: var(--gvlib-form-label-color);
        font-weight: 700;
    }
    .ant-form-item {
        color: var(--gvlib-body-color);
        margin-bottom: 20px;
    }
    .ant-form-item-explain-error {
        font-size: 12px;
        text-align: left;
    }

    .ant-input {
        border-radius: var(--gvlib-input-border-radius);
        background-color: var(--gvlib-input-bg);
        color: var(--gvlib-body-color);
        border-color: var(--gvlib-input-border-color);
    }
    .ant-input:hover:not(.ant-input-disabled) {
        background-color: var(--gvlib-input-hover-bg);
        border-color: var(--gvlib-input-hover-border-color);
    }
    .ant-input-focused, .ant-input:focus {
        border-color: var(--gvlib-input-hover-border-color);
        box-shadow: none;
    }
    .ant-input[disabled] {
        color: var(--gvlib-input-disabled-color);
        background-color: var(--gvlib-input-disabled-bg);
        border-color: var(--gvlib-input-border-color);
    }
    .ant-input[disabled]:hover {
        border-color: var(--gvlib-input-border-color); 
    }
    .ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input,
    .ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover{
        background-color: var(--gvlib-input-hover-bg);
    }
    
}


.gvlib-scroll-box {
    overflow: auto;
}
.gvlib-scroll-box::-webkit-scrollbar {
    width: var(--gvlib-scrollbar-width);
    height: var(--gvlib-scrollbar-border-radius);
}
.gvlib-scroll-box::-webkit-scrollbar-thumb  {
    -webkit-border-radius: var(--gvlib-scrollbar-border-radius);
    border-radius: var(--gvlib-scrollbar-border-radius);
    background-color: transparent;
}
.gvlib-scroll-box:hover::-webkit-scrollbar-thumb  {
    background-color: var(--gvlib-scrollbar-bg);
}

/* Icon Button */
.gvlib-icon-btn, .gvlib-icon-check-btn {
    color: var(--gvlib-btn-primary-bg);
    cursor: pointer;
    width: 24px;
    height: 24px;
    opacity: 1;
}
.gvlib-icon-btn > path, .gvlib-icon-check-btn > path {
    fill: currentColor;
}
.gvlib-icon-btn:hover, .gvlib-icon-check-btn:hover {
    opacity: 0.7;
}
.gvlib-icon-btn:active, .gvlib-icon-check-btn:active {
    opacity: 0.9;
}
.gvlib-icon-check-btn {
    opacity: 0.6;
}
.gvlib-icon-check-btn.checked {
    border-radius: 3px;
    opacity: 1;
}
.gvlib-icon-btn.disabled, .gvlib-icon-btn:disabled, .gvlib-icon-check-btn.disabled, .gvlib-icon-check-btn:disabled {
    pointer-events: none;
    opacity: 0.2;
}

.delete-circle {
    color: #EF3C3C;
}
.delete-circle:hover {
    color: #FF3D3D;
}
.delete-circle path {
    fill: currentColor;
}

.gvlib-time-range-picker {
    --timerange-panel-height: 140px;
    --timerange-cell-height: 28px;
    --timerange-cell-border-radius: 14px;

    --timerange-selected-bg: #E3EDF9;
    --timerange-selected-color: rgba(0, 0, 0, 0.85);
    --timerange-picker-color: rgba(0, 0, 0, 0.85);
    --timerange-picker-hover-bg: #E8F0F9;
    --timerange-picker-selected-color: rgba(0, 0, 0, 0.85);
    --timerange-picker-disabled-color: rgba(0,0,0,.25);

    display: flex;
    align-items: center;
    height: var(--timerange-panel-height);
    width: 160px;
    overflow: hidden;
    grid-gap: 0.2em;
    position: relative;
    z-index: 0;
}
.dark .gvlib-time-range-picker {
    --timerange-selected-bg: #404E62;
    --timerange-selected-color: rgba(255, 255, 255, 0.85);
    --timerange-picker-color: #d9d9d9;
    --timerange-picker-hover-bg: #3F4956;
    --timerange-picker-selected-color: rgba(255, 255, 255, 0.85);
    --timerange-picker-disabled-color: rgb(217, 217, 217, .2);
}

.gvlib-time-range-picker::after {
    content: '';
    width: 100%;
    height: var(--timerange-cell-height);
    position: absolute;
    background-color: var(--timerange-selected-bg);
    border-radius: var(--timerange-cell-border-radius);
    z-index: -1;
}

.gvlib-time-range-picker span {
    color: var(--timerange-selected-color);
}

.gvlib-time-range-picker-column {
    box-sizing: border-box;
    height: 100%;
    text-align: center;
    width: calc(100% / 4 + 0.2em);
    padding: calc((var(--timerange-panel-height) - var(--timerange-cell-height)) / 2) 0;
    overflow: hidden;
}
.gvlib-time-range-picker-column::before, .gvlib-time-range-picker-column::after {
    content: '';
    /* display: inline-block; */
    width: 100%;
    height: calc((var(--timerange-panel-height) - var(--timerange-cell-height)) / 2);
}
.gvlib-time-range-picker-column::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}
.gvlib-time-range-picker-column > * {
    cursor: pointer;
    line-height: var(--timerange-cell-height);
    border-radius: var(--timerange-cell-border-radius);
    color: var(--timerange-picker-color);
}
.gvlib-time-range-picker-column > *:hover {
    background-color: var(--timerange-picker-hover-bg);
}
.gvlib-time-range-picker-column  > *.selected {
    pointer-events: none;
    background-color: transparent;
    color: var(--timerange-picker-selected-color);
}
.gvlib-time-range-picker-column  > *.disabled {
    pointer-events: none;
    color: var(--timerange-picker-disabled-color);
}
.gvlib-timezone-body {
    overflow-x: hidden;

    --timezone-body-bg: var(--gvlib-component-bg);

    --timezone-item-bg: #e9ecef;
    --timezone-item-border-color: #DFE1E5;
}
.dark .gvlib-timezone-body {
    --timezone-item-bg: #313336;
    --timezone-item-border-color: #313336;
}
.gvlib-timezone-table {
    width: 100%;
    display: table;
    vertical-align: middle;
}

.gvlib-timezone-table-row {
    display: table-row;
    position: relative;
    background-color: var(--timezone-body-bg);
}
.gvlib-timezone-table-row:first-child {
    position: sticky;
    top: 0;
    z-index: 1;
}

.gvlib-timezone-table-cell {
    display: table-cell;
    vertical-align: middle;
    padding: 4px 5px;
    border-bottom: 1px solid var(--gvlib-border-color);
    text-align: center;
}
.gvlib-timezone-table-cell:first-child, .gvlib-timezone-table-cell:last-child {
    white-space: nowrap;
    max-width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.gvlib-timezone-table.dragging .gvlib-timezone-table-cell:first-child {
    min-width: var(--timezone-header-width);
    max-width: var(--timezone-header-width);
}
.gvlib-timezone-table-cell:first-child {
    width: 130px;
}
.gvlib-timezone-table-cell:last-child {
    width: 42px;
}
.gvlib-timezone-table-cell.colspan {
    /* display: table-caption; */
    border-bottom: none;
    padding: 15px 0 2px 0;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    overflow: visible;
    max-width: 100%;
}
.gvlib-timezone-table-cell.colspan .ant-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gvlib-timezone-table-cell.deletable {
    position: relative;
    padding: 0 20px;
}
.gvlib-timezone-table-cell.deletable .delete {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity .3s;
}
.gvlib-timezone-table:not(.dragging) .gvlib-timezone-table-row:hover .gvlib-timezone-table-cell.deletable .delete {
    opacity: 1;
}
.gvlib-timezone-table-cell .drag-icon {
    position: absolute;
    left: -5px;
    opacity: 0;
    transition: opacity .3s;
}
.gvlib-timezone-table-cell .drag-icon.disabled {
    visibility: hidden;
}
.gvlib-timezone-table-cell .drag-icon .icon-btn {
    cursor: move;
}
.gvlib-timezone-table:not(.dragging) .gvlib-timezone-table-row:hover .gvlib-timezone-table-cell .drag-icon {
    opacity: 1;
}

.gvlib-timezone-table-cell.assist:not(.copyed) > .gvlib-icon-check-btn {
    opacity: 0;
    transition: opacity .3s;
}
.gvlib-timezone-table:not(.dragging) .gvlib-timezone-table-row:hover .gvlib-timezone-table-cell.assist > .gvlib-icon-check-btn {
    opacity: 1;
}

.gvlib-timezone-table-cell .preview {
    position: absolute;
    left: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s;
}
.gvlib-timezone-table-row:hover .gvlib-timezone-table-cell .preview {
    opacity: 1;
}
.gvlib-timezone-table-cell .preview path {
    fill: var(--gvlib-btn-primary-bg);
}


.gvlib-timezone-header {
    font-size: 12px;
    color: #777;
}
.dark .gvlib-timezone-header {
    color: #aaa;
}
.gvlib-timezone-header-label {
    display: inline-block;
    width: 104.16666666%;
    position: relative;
    left: -2.083333333%;
}
.gvlib-timezone-header-label > div {
    width: 4%;
    display: inline-block;
    text-align: center;
}


.gvlib-timezone-header-scale > div {
    border-right: 1px solid gray;
    display: inline-block;
    width: 4.166666%;
    height: 10px;
}
.gvlib-timezone-header-scale > div:first-child {
    border-left: 1px solid gray;
}




.gvlib-timezone-frame {
    position: relative;
}
.gvlib-timezone-table.dragging .gvlib-timezone-frame {
    min-width: var(--timezone-scale-width);
}
.gvlib-timezone-background {
    background-color: var(--timezone-item-bg) !important;
    border: 1px solid var(--timezone-item-border-color);
    border-radius: 6px;
    width: 100%;
    height: 36px;
    color: #888;
    line-height: 34px;
    position: relative;
    cursor: crosshair;
}
.gvlib-timezone-background.selected  {
    border: 1px solid #006400;
}
.dark .gvlib-timezone-background.selected {
    border-color: #80C9C1;
}

.gvlib-timezone-tooltip {
    position: absolute;
    top: 100%;
    z-index: 990;

    margin: 0;
    padding: 0;
    color: var(--gvlib-dropdown-menu-color);
    font-size: 14px;
    line-height: 1.5714285714285714;
    list-style: none;
    display: block;
    width: max-content;
    max-width: 250px;
    visibility: visible;
    /* transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%); */
    --antd-arrow-background-color: rgba(0, 0, 0, 0.85);
}
.gvlib-timezone-tooltip.hidden {
    display: none;
}
.gvlib-timezone-tooltip > .tooltip-arrow {
    transform: translate(16px, -10px);

    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
    width: 16px;
    height: 16px;
    overflow: hidden;
}
.gvlib-timezone-tooltip > .tooltip-arrow::before {
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 16px;
    height: 8px;
    background: var(--antd-arrow-background-color);
    clip-path: polygon(1.6568542494923806px 100%, 50% 1.6568542494923806px, 14.34314575050762px 100%, 1.6568542494923806px 100%);
    clip-path: path('M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z');
    content: "";
}
.gvlib-timezone-tooltip > .tooltip-arrow::after {
    content: "";
    position: absolute;
    width: 8.970562748477143px;
    height: 8.970562748477143px;
    bottom: 0;
    inset-inline: 0;
    margin: auto;
    border-radius: 0 0 2px 0;
    transform: translateY(50%) rotate(-135deg);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
    z-index: 0;
    background: transparent;
}
.gvlib-timezone-tooltip.period > .tooltip-arrow {
    transform: translate(39.4px, -10px);
}
.gvlib-timezone-tooltip > .tooltip-content {
    min-width: 1em;
    min-height: 32px;
    margin-top: 6px;
    padding: 6px 8px;
    color: #fff;
    text-align: start;
    text-decoration: none;
    word-wrap: break-word;
    background-color: rgba(0, 0, 0, 0.85);
    border-radius: 6px;
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    white-space: nowrap;
}

.gvlib-timezone-interval, .gvlib-timezone-temp-interval  {
    height: 100%;
    position: absolute;
    border-radius: 6px;
    background-color: #59a9ef;
}

.gvlib-timezone-interval.dragging {
    opacity: 0.4;
    z-index: 1;
}
.gvlib-timezone-temp-interval {
    background-color: #66E8F0;
    opacity: 0.6;
    pointer-events: none;
}
.gvlib-timezone-interval-type-0 {
    background-color: red;
}

.gvlib-timezone-timepicker-pos {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% - 24px);
    width: 0.1px;
}
.gvlib-timezone-timepicker-popover {
    z-index: 980;
}
.gvlib-timezone-timepicker-popover .ant-popover-inner-content {
    /* padding: 0.5rem; */
    display: flex;
    align-items: center;
    grid-gap: 0.5rem;
}
.gvlib-timezone-timepicker-popover.ant-popover-placement-bottomRight .ant-popover-arrow, .timezone-timepicker-popover.ant-popover-placement-topRight .ant-popover-arrow {
    right: 10px;
}

.gvlib-timezone-interval-actions {
    flex: 1 1 auto;
    position: relative;
    height: 140px;
    display: flex;
    align-items: center;
}
.gvlib-timezone-interval-actions .btn-primary.action {
    padding: 4px;
    border-radius: 6px;
}
.gvlib-timezone-interval-actions .delete {
    position: absolute;
    right: 0;
    bottom: 0;
}
.gvlib-timezone-interval-actions .close {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}


.gvlib-specialday-list {
    max-height: calc(100vh - 240px);
    min-height: 120px;
}
.gvlib-specialday-list-item {
    cursor: pointer;
    padding: 0.5rem;
    color: var(--gvlib-list-item-color);
}
.gvlib-specialday-list-item:not(:last-child) {
    border-bottom: 1px solid var(--gvlib-list-item-border-color);
}
.gvlib-specialday-list-item.selected {
    color: var(--gvlib-list-item-selected-color);
    background-color: var(--gvlib-list-item-selected-bg);
}
.gvlib-specialday-list-item.disabled {
    color: var(--gvlib-list-item-disabled-color);
    cursor: not-allowed;
}
.gvlib-specialday-list-item:hover:not(.disabled) {
    background-color: var(--gvlib-list-item-hover-bg);
}
.gvlib-specialday-main {
    display: flex;
    overflow: auto;
    width: 100%;
    height: 100%;

    --sday-color-preview: #41B5C3;
    --sday-color-date-add: #FD5255;
    --sday-color-date-sub: #777777;
    --sday-color-year: #FDA429;
    --sday-color-month-week: #7514F5;
    --sday-color-month: #08A400;
    --sday-color-week: #6797EA;
    --sday-color-drag: #ff0000;
    --sday-color-national: #ff0000;
    --sday-hint-cell-border-radius: 15px;

    --gvlib-specialday-rule-bg: #E2E6ED;
}
.dark .gvlib-specialday-main {
    --gvlib-specialday-rule-bg: #313336;
}
.gvlib-specialday-main.disabled {
    cursor: not-allowed;
}

.gvlib-specialday-sider {
    width: 330px;
    min-width: 330px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    overflow: auto;
    text-align: left;
}

.gvlib-specialday-actions {
    flex-grow: 1;
    padding: 0 2px;
    overflow: scroll;
}
.gvlib-specialday-actions::-webkit-scrollbar-corner  {
    background-color: transparent;
}


.gvlib-specialday-action-header {
    padding: 0 15px;
    min-height: 30px;
    border-radius: var(--gvlib-btn-border-radius);
    background-color: #e5e5e5;
    box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    -moz-transition: background-color 0.3s ease-in-out;
    -webkit-transition: background-color 0.3s ease-in-out;
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dark .gvlib-specialday-action-header {
    background-color: var(--gvlib-specialday-rule-bg);
    /* box-shadow: 0 1px 2px 0 rgb(190 194 197 / 70%), 0 1px 3px 1px rgb(190 194 197 / 15%); */
}
/* .gvlib-specialday-action-header.disabled {
    pointer-events: none;
} */
.gvlib-specialday-action-header > div {
    display: flex;
    align-items: center;
    grid-gap: 0.5em;
}


.gvlib-specialday-action-header.preview {
    --gvlib-specialday-action-color: var(--sday-color-preview);
}
.gvlib-specialday-action-header.ymda {
    --gvlib-specialday-action-color: var(--sday-color-date-add);
}
.gvlib-specialday-action-header.ymds {
    --gvlib-specialday-action-color: var(--sday-color-date-sub);
}
.gvlib-specialday-action-header.md {
    --gvlib-specialday-action-color: var(--sday-color-year);
}
.gvlib-specialday-action-header.mwd {
    --gvlib-specialday-action-color: var(--sday-color-month-week);
}
.gvlib-specialday-action-header.d {
    --gvlib-specialday-action-color: var(--sday-color-month);
}
.gvlib-specialday-action-header.w {
    --gvlib-specialday-action-color: var(--sday-color-week);
}

.gvlib-specialday-action-header.preview {
    margin: 15px 8px 10px 2px;
}
.gvlib-specialday-action-header:hover {
    color: #fff;
    background-color: var(--gvlib-specialday-action-color);
}
.gvlib-specialday-action-header > div > svg {
    width: 20px;
    height: 20px;
}
.gvlib-specialday-action-header > div > svg > path {
    fill: var(--gvlib-specialday-action-color);
}
.gvlib-specialday-action-header .gvlib-specialday-fill-circle  {
    width: 14px;
    height: 14px;
    background-color: var(--gvlib-specialday-action-color);
    border-radius: 50%;
}
.gvlib-specialday-action-header.selected {
    color: white;
    background-color: var(--gvlib-specialday-action-color);
    box-shadow: 0 1px 3px 0 rgb(60 64 67 / 30%), 0 4px 8px 3px rgb(60 64 67 / 15%);
    pointer-events: none;
}

.gvlib-specialday-setting-action-delete {
    /* width: 20px;
    height: 20px; */
    cursor: pointer;
}
.gvlib-specialday-action-header:not(.disabled) .gvlib-specialday-setting-action-delete {
    pointer-events: initial;
}
.gvlib-specialday-setting-action-delete > path {
    fill: transparent !important;
}
.gvlib-specialday-action-header.selected > .gvlib-specialday-setting-action-delete > path,
.gvlib-specialday-action-header:hover > .gvlib-specialday-setting-action-delete > path {
    fill: #fff !important;
}


.gvlib-specialday-rule-list {
    padding: 10px 0 15px 20px;
}
.gvlib-specialday-rule-empty {
    color: #aaa;
}
.gvlib-specialday-rule {
    position: relative;
    padding: 4px 10px;
    color: var(--gvlib-body-color);
    background-color: var(--gvlib-specialday-rule-bg);
    border-radius: var(--gvlib-btn-border-radius);
    margin-right: 5px;
    margin-bottom: 5px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.gvlib-specialday-rule-delete {
    position: absolute;
    width: 16px;
    height: 16px;
    right: -6px;
    top: -6px;
    cursor: pointer;
    opacity: 0;
    transition: all .3s;
}
.gvlib-specialday-rule:hover {
    background-color: var(--gvlib-btn-primary-bg);
    color: var(--gvlib-btn-primary-color);
}
.gvlib-specialday-rule:hover > .gvlib-specialday-rule-delete {
    opacity: 1;
}
.gvlib-specialday-week-dropdown {
    min-width: unset !important;
    color: var(--gvlib-dropdown-menu-color);
}
.gvlib-specialday-week-dropdown .ant-dropdown-arrow:before {
    background-color: var(--gvlib-dropdown-menu-bg);
}
.gvlib-specialday-week-dropdown .ant-dropdown-menu {
    background-color: var(--gvlib-dropdown-menu-bg);
}
.gvlib-specialday-week-dropdown .ant-dropdown-menu .ant-dropdown-menu-item {
    color: var(--gvlib-dropdown-menu-color);
}
.gvlib-specialday-week-dropdown .ant-dropdown-menu .ant-dropdown-menu-item:hover {
    color: var(--gvlib-dropdown-menu-item-hover-color);
    background-color: var(--gvlib-dropdown-menu-item-hover-bg);
}
.gvlib-specialday-week-dropdown .ant-dropdown-menu .ant-dropdown-menu-item:active {
    color: var(--gvlib-dropdown-menu-item-selected-color);
    background-color: var(--gvlib-dropdown-menu-item-selected-bg);
}

.gvlib-almanac {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.gvlib-almanac-header {
    min-height: 48px;
    padding: 10px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 1em;
    position: relative;
}
.gvlib-almanac-header > span {
    font-weight: 900;
    font-size: 20px;
}

.gvlib-almanac-main {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.gvlib-almanac-main.disabled {
    pointer-events: none;
}

.gvlib-calendar-month {
    font-size: 12px;
    width: 20em;
    width: 25%;
    min-width: 250px;
    max-width: 300px;
    padding: 0px 20px;
}
.gvlib-calendar-month-label {
    text-align: center;
    font-size: 16px;
    font-weight: 900;
}
.gvlib-calendar-weeks {
    display: flex;
    padding: 0;
}
.gvlib-calendar-weeks > span {
    font-size: 9px;
    font-weight: 400;
    line-height: 2.667em;
    color: rgb(132, 144, 149);
    flex-basis: calc(100% / 7);
    box-sizing: inherit;
    text-align: center;
}
.gvlib-calendar-days {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.gvlib-calendar-days > button {
    color: var(--gvlib-body-color);
    background: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 0;
    padding: 0;
    height: 26px;
    text-align: center;
    box-sizing: inherit;
    width: calc(100% / 7);
    position: relative;
    font: inherit;
    cursor: pointer;
    margin: 1px 0;
}
.gvlib-calendar-days > button.hint {
    font-weight: 900;
}
.gvlib-calendar-days > button:disabled, .gvlib-calendar-days > button.preview, .gvlib-calendar-days.read-only > button {
    pointer-events: none;
}
.gvlibcalendar-days > button > span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sday {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0.25;
}
.dark .sday {
    opacity: 0.5;
}
.sday.begin {
    border-start-start-radius: var(--sday-hint-cell-border-radius);
    border-end-start-radius: var(--sday-hint-cell-border-radius);
}
.sday.end {
    border-start-end-radius: var(--sday-hint-cell-border-radius);
    border-end-end-radius: var(--sday-hint-cell-border-radius);
}
.sday-bg-ymda {
    background-color: var(--sday-color-date-add);
}
.sday-bg-ymds {
    background-color: var(--sday-color-date-sub);
}
.sday-bg-md {
    background-color: var(--sday-color-year);
}
.sday-bg-mwd {
    background-color: var(--sday-color-month-week);
}
.sday-bg-d {
    background-color: var(--sday-color-month);
}
.sday-bg-w {
    background-color: var(--sday-color-week);
}
.sday-bg-national {
    background-color: var(--sday-color-national);
    opacity: 0.5;
}
.sday-drag {
    background-color: var(--sday-color-drag);
}


.sday-color-ymda {
    color: var(--sday-color-date-add);
}
.sday-color-ymds {
    color: var(--sday-color-date-sub);
}
.sday-color-md {
    color: var(--sday-color-year);
}
.sday-color-mwd {
    color: var(--sday-color-month-week);
}
.sday-color-d {
    color: var(--sday-color-month);
}
.sday-color-w {
    color: var(--sday-color-week);
}