/*
border color can be defined as one of the following
all; top_bottom right_left; top right bottom left
*/

:root {

    --default-unknown-back-image: url('data:image/webp;base64,UklGRjQCAABXRUJQVlA4TCgCAAAvH8AHEC/jIJIkRaruPmb275T+RThsI0mRqrqP8Tn/TN9hG0mKHHT3HD3zs40kyWm45xE2FpbGJwEwgUDgA4FAYAOBQOACMwgM0D+YQSCQ4wADDLCDQKD77wf9wAECgVVGOmTIkCGjGBZO1fMuHdW0kZEOp5yq5127njTLwal0pKMcV9fvr5o26ei2MxlOpaMcN+W4ckrG9norhoWMet4Vw6JZDu16MhxX5bhySsb6fHFKhlMyynFVjiun0pGOdMhwSgag27ZtvFlxUrdJbePUtm3b7Xn/d+h37/m+6n9E/xW2bdsYSNJddR4BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACQqm9ubW2uT0UsSVR3i4iIiHTl4xGsuEdExE9050KtciDAmdo6PtmdDwgGKkKszKFde1FVfd92IPKmFTnp6RfVpwfVz1UnmbNG63VID1QPB2VT9dzB6En4qnE341qfx0TkVu8krMib9eLqNBjpRp+8ST3LiD3X+KteeghJVw0h2lXd9hDqXDXbtvCmtxMeQ5OrdtOGr/VjyYdoddVmakd134BocdVk2dC9Po4YFI0Rmqyo7n1RhDVJWyRbqstfFP5A3sZ3GSTrFxczBkSnf27VIiIiIuKdQOi5xjp8lMnZ2VHj9lqXNzfgsRypLnoI/Vnz4pVGUVXIxS3pc2A2zs7m3HR5cPHtqxsMbo2ejfBw4tVdRqoQj/ou65paWppqk//qLwA=');

    /* === page === */
    --page-text-color: #000000;
    --page-back-color: #ffffff;
    --page-back-image: none;
    --page-border-color: #cccccc;
    --page-border-width: 2px;
    --page-border-radius: 6px;
    --page-hover-text-color: #ffffff;
    --page-hover-back-color: #696969;
    --page-marked-text-color: #ffffff;
    --page-marked-back-color: #222222;
    --page-marked-border-color: #0f0f0f;
    --page-content-border-color: #222222;
    --page-focus-color: #06b5ff;

    /* === navigation === */
    --navigation-text-color: #000000;
    --navigation-back-color: #cecece;
    --navigation-back-image: none;
    --navigation-shadow-color: #000000;
    --navigation-marker-color: #000000;

    /* === modal === */
    --modal-text-color: var(--page-text-color);
    --modal-back-color: var(--page-back-color);
    --modal-back-image: none;

    --modal-close-text-color: #222222;
    --modal-close-back-color: #cd6262;
    --modal-close-back-image: none;

    --modal-close-hover-text-color: #ffffff;
    --modal-close-hover-back-color: #ab0000;
    --modal-close-hover-back-image: none;

    --modal-close-focus-color: #000000;

    --modal-border-color: var(--page-border-color);
    --modal-border-width: var(--page-border-width);

    --modal-header-text-color: var(--page-text-color);
    --modal-header-back-color: var(--page-border-color);
    --modal-header-back-image: none;

    --modal-footer-text-color: var(--modal-header-text-color);
    --modal-footer-back-color: var(--modal-header-back-color);
    --modal-footer-back-image: var(--modal-header-back-image);

    --modal-icon-default-color: #222222;
    --modal-icon-alert-color: #e98e2d;
    --modal-icon-info-color: #0000ff;
    --modal-icon-success-color: #009952;
    --modal-icon-error-color: #c50000;

    --modal-link-text-color: #004472;
    --modal-link-hover-text-color: #003597;

    /* === tabpanel === */
    --tabpanel-categories-border-width: var(--page-border-width);
    --tabpanel-categories-border-color: var(--page-content-border-color);

    /* === tooltip === */
    --tooltip-text-color: var(--page-text-color);
    --tooltip-back-color: var(--page-back-color);
    --tooltip-border-color: var(--page-border-color);

    /* === contextmenu === */
    --contextmenu-text-color: var(--page-text-color);
    --contextmenu-back-color: var(--page-back-color);
    --contextmenu-info-text-color: var(--contextmenu-text-color);
    --contextmenu-border-color: var(--page-border-color);
    --contextmenu-hover-text-color: var(--page-hover-text-color);
    --contextmenu-hover-back-color: var(--page-hover-back-color);
    --contextmenu-info-hover-text-color: var(--contextmenu-hover-text-color);
    --contextmenu-focus-color: var(--page-focus-color);

    /* === panel === */
    --panel-text-color: var(--page-text-color);
    --panel-back-color: var(--page-back-color);
    --panel-back-image: none;
    --panel-border-color: var(--page-border-color);
    --panel-border-width: var(--page-border-width);
    --panel-border-radius: var(--page-border-radius);
    --panel-header-text-color: var(--panel-text-color);
    --panel-header-back-color: var(--panel-back-color);
    --panel-header-back-image: none;
    --panel-input-text-color: var(--panel-text-color);
    --panel-input-back-color: var(--panel-back-color);
    --panel-input-back-image: none;

    /* === form === */
    --form-text-color: var(--page-text-color);
    --form-back-color: var(--page-back-color);
    --form-back-image: none;
    --form-border-color: var(--page-border-color);
    --form-border-width: var(--page-border-width);
    --form-border-radius: var(--page-border-radius);

    --form-hover-text-color: var(--page-hover-text-color);
    --form-hover-back-color: var(--page-hover-back-color);
    --form-hover-back-image: none;

    --form-invalid-text-color: #a70000;
    --form-invalid-back-color: #ffeeee;
    --form-invalid-back-image: none;

    /* === fieldset === */
    --fieldset-back-color: var(--page-back-color);
    --fieldset-back-image: none;
    --fieldset-border-color: var(--page-content-border-color);
    --fieldset-border-width: var(--form-border-width);
    --fieldset-border-radius: var(--form-border-radius);

    --fieldset-legend-text-color: var(--form-text-color);
    --fieldset-legend-back-color: var(--fieldset-back-color);
    --fieldset-legend-back-image: none;
    --fieldset-legend-border-color: var(--fieldset-border-color);
    --fieldset-legend-border-width: var(--fieldset-border-width);
    --fieldset-legend-border-radius: var(--fieldset-border-radius);

    /* === input === */
    --input-text-color: var(--page-text-color);
    --input-back-color: var(--page-back-color);
    --input-back-image: none;
    --input-border-color: var(--page-content-border-color);
    --input-border-width: var(--form-border-width);
    --input-border-radius: var(--form-border-radius);
    --input-emphasize-color: #b3e5ec;
    --input-insignify-color: #cccccc;
    --input-focus-color: var(--page-focus-color);
    --input-placeholder-text-color: #757575;

    --input-invalid-text-color: var(--page-text-color);
    --input-invalid-back-color: #ffebeb;
    --input-invalid-back-image: none;
    --input-invalid-border-color: #ff2500;
    --input-invalid-focus-color: #ff2500;
    --input-invalid-emphasize-color: #ff9987;
    --input-invalid-insignify-color: #d8b5ad;

    --input-disabled-text-color: #757575;
    --input-disabled-back-color: #999999;
    --input-disabled-back-image: none;
    --input-disabled-border-color: #6a6a6a;
    --input-disabled-emphasize-color: #3f3f3f;
    --input-disabled-insignify-color: #757575;

    /* === input-button === */
    --input-button-text-color: var(--input-text-color);
    --input-button-back-color: var(--input-back-color);
    --input-button-back-image: none;
    --input-button-border-color: var(--input-border-color);

    --input-button-hover-text-color: var(--input-text-color);
    --input-button-hover-back-color: var(--input-emphasize-color);
    --input-button-hover-back-image: none;
    --input-button-hover-border-color: var(--input-button-border-color);

    --input-button-active-text-color: var(--page-marked-text-color);
    --input-button-active-back-color: var(--page-marked-back-color);
    --input-button-active-back-image: none;
    --input-button-active-border-color: var(--input-button-border-color);

    --input-button-active-hover-text-color: var(--input-button-active-text-color);
    --input-button-active-hover-back-color: var(--input-button-active-back-color);
    --input-button-active-hover-back-image: none;
    --input-button-active-hover-border-color: var(--input-button-active-border-color);

    --input-button-disabled-text-color: var(--input-disabled-text-color);
    --input-button-disabled-back-color: var(--input-disabled-back-color);
    --input-button-disabled-back-image: none;
    --input-button-disabled-border-color: var(--input-disabled-border-color);

    --input-button-active-disabled-text-color: var(--input-disabled-text-color);
    --input-button-active-disabled-back-color: var(--input-disabled-emphasize-color);
    --input-button-active-disabled-back-image: none;
    --input-button-active-disabled-border-color: var(--input-button-disabled-border-color);

    --input-button-invalid-text-color: var(--input-invalid-text-color);
    --input-button-invalid-back-color: var(--input-invalid-back-color);
    --input-button-invalid-back-image: none;
    --input-button-invalid-border-color: var(--input-invalid-border-color);

    --input-button-invalid-hover-text-color: var(--input-button-invalid-text-color);
    --input-button-invalid-hover-back-color: var(--input-invalid-emphasize-color);
    --input-button-invalid-hover-back-image: none;
    --input-button-invalid-hover-border-color: var(--input-button-invalid-border-color);

    /* === image/icon === */
    --image-checker-back-color: #2c2c2c;

    /* === select === */
    --select-option-text-color: var(--page-text-color);
    --select-option-back-color: var(--page-back-color);
    --select-option-back-image: none;

    --select-option-divider-color: var(--page-border-color);

    --select-option-marked-text-color: var(--select-option-text-color);
    --select-option-marked-back-color: #b1f4ff;
    --select-option-marked-back-image: none;

    --select-option-selected-text-color: var(--select-option-text-color);
    --select-option-selected-back-color: #dbdbdb;
    --select-option-selected-back-image: none;

    --select-option-selected-marked-text-color: var(--select-option-text-color);
    --select-option-selected-marked-back-color: #26e0ff;
    --select-option-selected-marked-back-image: none;

    --select-option-placeholder-text-color: var(--input-placeholder-text-color);
    --select-option-placeholder-marked-text-color: var(--select-option-placeholder-text-color);
    --select-option-placeholder-selected-text-color: var(--select-option-placeholder-text-color);
    --select-option-placeholder-selected-marked-text-color: var(--select-option-placeholder-text-color);

    /* === button === */
    --button-text-color: #000000;
    --button-back-color: #cdcdcd;
    --button-back-image: none;
    --button-border-color: #222222;
    --button-border-width: var(--input-border-width);
    --button-border-radius: var(--input-border-radius);
    --button-focus-color: var(--input-focus-color);

    --button-hover-text-color: #ffffff;
    --button-hover-back-color: #444444;
    --button-hover-back-image: none;
    --button-hover-border-color: var(--button-border-color);

    --button-active-text-color: var(--button-active-text-color);
    --button-active-back-color: var(--button-active-back-color);
    --button-active-back-image: var(--button-active-back-image);
    --button-active-border-color: var(--button-active-border-color);

    --button-active-hover-text-color: var(--button-active-hover-text-color);
    --button-active-hover-back-color: var(--button-active-hover-back-color);
    --button-active-hover-back-image: var(--button-active-hover-back-image);
    --button-active-hover-border-color: var(--button-active-hover-border-color);

    --button-primary-text-color: #000000;
    --button-primary-back-color: #9ec9fb;
    --button-primary-back-image: none;
    --button-primary-border-color: #003067;

    --button-primary-hover-text-color: #ffffff;
    --button-primary-hover-back-color: #0054b5;
    --button-primary-hover-back-image: none;
    --button-primary-hover-border-color: var(--button-primary-border-color);

    --button-secondary-text-color: #000000;
    --button-secondary-back-color: #ffdb8e;
    --button-secondary-back-image: none;
    --button-secondary-border-color: #ad7600;

    --button-secondary-hover-text-color: #000000;
    --button-secondary-hover-back-color: #ffae00;
    --button-secondary-hover-back-image: none;
    --button-secondary-hover-border-color: var(--button-secondary-border-color);

    --button-disabled-text-color: var(--input-disabled-text-color);
    --button-disabled-back-color: var(--input-disabled-back-color);
    --button-disabled-back-image: none;
    --button-disabled-border-color: var(--input-disabled-border-color);

    --button-count-text-color: #ffffff;
    --button-count-back-color: #222222;
    --button-count-alert-back-color: #e98e2d;
    --button-count-info-back-color: #0000ff;
    --button-count-success-back-color: #009952;
    --button-count-error-back-color: #c50000;

    --button-hover-count-text-color: #000000;
    --button-hover-count-back-color: #ffffff;
    --button-hover-count-alert-back-color: #ffd7ac;
    --button-hover-count-info-back-color: #b9b9ff;
    --button-hover-count-success-back-color: #98ffa6;
    --button-hover-count-error-back-color: #ffb7b7;

    /* === switch === */
    --switch-unchecked-back-color: var(--page-back-color);
    --switch-unchecked-back-image: none;

    --switch-checked-back-color: var(--input-emphasize-color);
    --switch-checked-back-image: none;

    --switch-indeterminate-back-color: var(--switch-unchecked-back-color);
    --switch-indeterminate-back-image: var(--switch-unchecked-back-image);

    --switch-button-back-color: #cdcdcd;
    --switch-button-back-image: none;
    --switch-button-border-color: var(--input-border-color);

    --switch-button-hover-back-color: #444444;
    --switch-button-hover-back-image: none;

    --switch-button-disabled-back-color: #696969;
    --switch-button-disabled-back-image: none;

    /* === range === */
    --range-track-color: var(--input-insignify-color);
    --range-track-image: none;

    --range-fill-color: var(--input-emphasize-color);
    --range-fill-image: none;

    --range-invalid-track-color: var(--input-invalid-insignify-color);
    --range-invalid-track-image: none;

    --range-invalid-fill-color: var(--input-invalid-emphasize-color);
    --range-invalid-fill-image: none;

    --range-disabled-track-color: var(--input-disabled-insignify-color);
    --range-disabled-track-image: none;

    --range-disabled-fill-color: var(--input-disabled-emphasize-color);
    --range-disabled-fill-image: none;

    --range-button-back-color: var(--input-button-back-color);
    --range-button-border-color: var(--input-button-border-color);
    --range-button-hover-back-color: var(--input-button-hover-back-color);
    --range-button-hover-border-color: var(--input-button-hover-border-color);
    --range-button-disabled-back-color: var(--input-button-disabled-back-color);
    --range-button-disabled-border-color: var(--input-button-disabled-border-color);

    /* progress */
    --progress-back-color: var(--input-back-color);
    --progress-fill-color: var(--page-marked-back-color);
    --progress-border-width: var(--input-border-width);
    --progress-border-color: var(--input-border-color);
    --progress-border-radius: var(--input-border-radius);

    /* === tree === */
    --tree-text-color: var(--page-text-color);
    --tree-back-color: var(--page-back-color);
    --tree-back-image: none;

    --tree-hover-text-color: var(--page-hover-text-color);
    --tree-hover-back-color: var(--page-hover-back-color);
    --tree-hover-back-image: none;

    --tree-marked-text-color: var(--page-marked-text-color);
    --tree-marked-back-color: var(--page-marked-back-color);
    --tree-marked-back-image: none;

    /* === datagrid === */
    --datagrid-text-color: #000000;
    --datagrid-back-color: #ffffff;
    --datagrid-back-image: none;
    --datagrid-border-color: #000000;
    --datagrid-border-width: 2px;
    --datagrid-border-radius: 6px;

    --datagrid-empty-text-color: #666666;
    --datagrid-empty-back-color: #dadada;
    --datagrid-empty-back-image: none;
    --datagrid-empty-border-color: #666666;
    --datagrid-empty-border-width: 2px;
    --datagrid-empty-border-radius: 6px;

    --datagrid-column-seperator-width: 2px;
    --datagrid-column-seperator-color: #ffffff;
    --datagrid-fixed-column-seperator-width: 4px;
    --datagrid-fixed-column-seperator-color: #afafaf;

    --datagrid-disabled-text-color: #757575;
    --datagrid-disabled-back-color: #999999;
    --datagrid-disabled-back-image: none;
    --datagrid-disabled-border-color: #757575;
    --datagrid-disabled-column-seperator-color: #696969;

    --datagrid-row-seperator-width: 1px;
    --datagrid-row-seperator-color: #696969;

    --datagrid-header-text-color: #ffffff;
    --datagrid-header-back-color: #333333;
    --datagrid-header-back-image: none;
    --datagrid-header-seperator-color: #ffffff;
    --datagrid-fixed-header-seperator-color: var(--datagrid-fixed-column-seperator-color);

    --datagrid-footer-text-color: #ffffff;
    --datagrid-footer-back-color: #666666;
    --datagrid-footer-back-image: none;
    --datagrid-footer-seperator-color: #ffffff;
    --datagrid-fixed-footer-seperator-color: var(--datagrid-fixed-column-seperator-color);

    --datagrid-disabled-header-text-color: #999999;
    --datagrid-disabled-header-back-color: #4d4d4d;
    --datagrid-disabled-header-back-image: none;
    --datagrid-disabled-header-seperator-color: var(--datagrid-disabled-column-seperator-color);

    --datagrid-disabled-footer-text-color: #999999;
    --datagrid-disabled-footer-back-color: #757575;
    --datagrid-disabled-footer-back-image: none;
    --datagrid-disabled-footer-seperator-color: var(--datagrid-disabled-column-seperator-color);

    --datagrid-disabled-row-seperator-color: #757575;

    --datagrid-row-hover-text-color: #000000;
    --datagrid-row-hover-back-color: #d6f7fd;
    --datagrid-row-hover-back-image: none;

    --datagrid-select-cell-text-color: #505050;
    --datagrid-select-cell-back-color: #ffffff;
    --datagrid-select-cell-border-color: #000000;

    --datagrid-select-cell-checked-text-color: var(--datagrid-select-cell-back-color);
    --datagrid-select-cell-checked-back-color: var(--datagrid-select-cell-text-color);
    --datagrid-select-cell-checked-border-color: var(--datagrid-select-cell-border-color);

    --datagrid-select-cell-indeterminate-text-color: var(--datagrid-select-cell-text-color);
    --datagrid-select-cell-indeterminate-back-color: var(--datagrid-select-cell-back-color);
    --datagrid-select-cell-indeterminate-border-color: var(--datagrid-select-cell-border-color);

    --datagrid-disabled-select-cell-text-color: #757575;
    --datagrid-disabled-select-cell-back-color: #999999;
    --datagrid-disabled-select-cell-border-color: #6a6a6a;

    --datagrid-header-select-cell-text-color: var(--datagrid-select-cell-text-color);
    --datagrid-header-select-cell-back-color: var(--datagrid-select-cell-back-color);
    --datagrid-header-select-cell-border-color: var(--datagrid-select-cell-border-color);

    --datagrid-header-select-cell-checked-text-color: var(--datagrid-select-cell-checked-text-color);
    --datagrid-header-select-cell-checked-back-color: var(--datagrid-select-cell-checked-back-color);
    --datagrid-header-select-cell-checked-border-color: var(--datagrid-select-cell-checked-border-color);

    --datagrid-header-select-cell-indeterminate-text-color: var(--datagrid-select-cell-indeterminate-text-color);
    --datagrid-header-select-cell-indeterminate-back-color: var(--datagrid-select-cell-indeterminate-back-color);
    --datagrid-header-select-cell-indeterminate-border-color: var(--datagrid-select-cell-indeterminate-border-color);

    --datagrid-disabled-header-select-cell-text-color: var(--datagrid-disabled-select-cell-text-color);
    --datagrid-disabled-header-select-cell-back-color: var(--datagrid-disabled-select-cell-back-color);
    --datagrid-disabled-header-select-cell-border-color: var(--datagrid-disabled-select-cell-border-color);

    --datagrid-footer-select-cell-text-color: var(--datagrid-select-cell-text-color);
    --datagrid-footer-select-cell-back-color: var(--datagrid-select-cell-back-color);
    --datagrid-footer-select-cell-border-color: var(--datagrid-select-cell-border-color);

    --datagrid-footer-select-cell-checked-text-color: var(--datagrid-select-cell-checked-text-color);
    --datagrid-footer-select-cell-checked-back-color: var(--datagrid-select-cell-checked-back-color);
    --datagrid-footer-select-cell-checked-border-color: var(--datagrid-select-cell-checked-border-color);

    --datagrid-footer-select-cell-indeterminate-text-color: var(--datagrid-select-cell-indeterminate-text-color);
    --datagrid-footer-select-cell-indeterminate-back-color: var(--datagrid-select-cell-indeterminate-back-color);
    --datagrid-footer-select-cell-indeterminate-border-color: var(--datagrid-select-cell-indeterminate-border-color);

    --datagrid-disabled-footer-select-cell-text-color: var(--datagrid-disabled-select-cell-text-color);
    --datagrid-disabled-footer-select-cell-back-color: var(--datagrid-disabled-select-cell-back-color);
    --datagrid-disabled-footer-select-cell-border-color: var(--datagrid-disabled-select-cell-border-color);

    --datagrid-sort-grabber-indicator-color: #bbbbbb;
    --datagrid-row-hover-sort-grabber-indicator-color: var(--datagrid-sort-grabber-indicator-color);

    /* === datalist === */
    --datalist-back-color: #ffffff;
    --datalist-back-image: none;
    --datalist-border-color: #000000;
    --datalist-border-width: 2px;
    --datalist-border-radius: 6px;

    --datalist-empty-text-color: #666666;
    --datalist-empty-back-color: #dadada;
    --datalist-empty-back-image: none;
    --datalist-empty-border-color: #666666;
    --datalist-empty-border-width: 2px;
    --datalist-empty-border-radius: 6px;

    --datalist-entry-text-color: #000000;
    --datalist-entry-back-color: #ffffff;
    --datalist-entry-back-image: none;

    --datalist-entry-hover-text-color: #000000;
    --datalist-entry-hover-back-color: #d6f7fd;
    --datalist-entry-hover-back-image: none;

    --datalist-entry-border-color: #000000;
    --datalist-entry-border-width: 2px;
    --datalist-entry-border-radius: 4px;

    /* === pagination === */
    --pagination-border-color: #000000;
    --pagination-border-width: 2px;
    --pagination-border-radius: 6px;
    --pagination-focus-color: var(--input-focus-color);

    /* === scrollbar === */
    --scrollbar-size: 8px;

    --scrollbar-track-color: var(--page-back-color);
    --scrollbar-track-border-width: 0px;
    --scrollbar-track-border-color: var(--page-border-color);
    --scrollbar-track-border-radius: 0px;

    --scrollbar-corner-color: #00000000;
    --scrollbar-corner-border-width: 0px;
    --scrollbar-corner-border-color: #00000000;
    --scrollbar-corner-border-radius: 0px;

    --scrollbar-resizer-color: var(--page-text-color);

    --scrollbar-thumb-color: var(--page-border-color);
    --scrollbar-thumb-border-color: #00000000;
    --scrollbar-thumb-border-width: 2px;
    --scrollbar-thumb-border-radius: 0px;

    --scrollbar-thumb-hover-color: var(--page-hover-back-color);
    --scrollbar-thumb-hover-border-color: var(--scrollbar-thumb-border-color);

    --scrollbar-thumb-active-color: var(--page-marked-border-color);
    --scrollbar-thumb-active-border-color: var(--scrollbar-thumb-hover-border-color);

    --scrollbar-disabled-track-color: var(--input-disabled-back-color);
    --scrollbar-disabled-track-border-color: var(--input-disabled-text-color);
    --scrollbar-disabled-corner-color: #00000000;
    --scrollbar-disabled-corner-border-color: #00000000;
    --scrollbar-disabled-resizer-color: var(--input-disabled-emphasize-color);
    --scrollbar-disabled-thumb-color: var(--input-disabled-emphasize-color);
    --scrollbar-disabled-thumb-border-color: var(--input-disabled-insignify-color);

    /* === z-index (max = 2147483647) === */
    --z-index-busy-indicator: 1000000000;
    --z-index-input-expanded: 100000000;
    --z-index-tooltop: 900800;
    --z-index-contextmenu: 900700;
    --z-index-modal: 900600;
    --z-index-navbar: 900500;
    --z-index-element-popups: 1000;
}

body {
    color: var(--page-text-color);
    background-color: var(--page-back-color);
}

form {
    color: var(--form-text-color);
    background-color: var(--form-back-color);
    border-style: solid;
    border-width: var(--form-border-width);
    border-color: var(--form-border-color);
    border-radius: var(--form-border-radius);
}

::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track-color);
    border-style: solid;
    border-width: var(--scrollbar-track-border-width);
    border-color: var(--scrollbar-track-border-color);
    border-radius: var(--scrollbar-track-border-radius);
}

::-webkit-scrollbar-corner {
    background-color: var(--scrollbar-corner-color);
    border-style: solid;
    border-width: var(--scrollbar-corner-border-width);
    border-color: var(--scrollbar-corner-border-color);
    border-radius: var(--scrollbar-corner-border-radius);
}

::-webkit-resizer {
    background: radial-gradient(var(--scrollbar-resizer-color) calc(var(--scrollbar-size) / 2 - 2px), transparent calc(var(--scrollbar-size) / 2 - 1px));
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-style: solid;
    border-width: var(--scrollbar-thumb-border-width);
    border-color: var(--scrollbar-thumb-border-color);
    border-radius: var(--scrollbar-thumb-border-radius);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover-color);
    border-color: var(--scrollbar-thumb-hover-border-color);
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-thumb-active-color);
    border-color: var(--scrollbar-thumb-active-border-color);
}

:host([disabled]:not([disabled="false"])) ::-webkit-scrollbar-track {
    background-color: var(--scrollbar-disabled-track-color);
    border-color: var(--scrollbar-disabled-track-border-color);
}

:host([disabled]:not([disabled="false"])) ::-webkit-scrollbar-corner {
    background-color: var(--scrollbar-disabled-corner-color);
    border-color: var(--scrollbar-disabled-corner-border-color);
}

:host([disabled]:not([disabled="false"])) ::-webkit-resizer {
    background: radial-gradient(var(--scrollbar-disabled-resizer-color) calc(var(--scrollbar-size) / 2 - 2px), transparent calc(var(--scrollbar-size) / 2 - 1px));
}

:host([disabled]:not([disabled="false"])) ::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-disabled-thumb-color);
    border-color: var(--scrollbar-disabled-thumb-border-color);
}
