:root {
    --neutral-50: 180, 2%, 91%;
    --neutral-100: 200, 4%, 85%;
    --neutral-200: 197, 6%, 76%;
    --neutral-300: 196, 6%, 63%;
    --neutral-400: 196, 6%, 51%;
    --neutral-500: 194, 13%, 32%;
    --neutral-600: 194, 13%, 26%;
    --neutral-700: 195, 12%, 19%;
    --neutral-800: 193, 14%, 13%;
    --neutral-900: 190, 13%, 9%;
    --primary-50: 192, 11%, 91%;
    --primary-100: 198, 17%, 85%;
    --primary-200: 198, 21%, 75%;
    --primary-300: 198, 23%, 62%;
    --primary-400: 197, 25%, 49%;
    --primary-500: 197, 58%, 30%;
    --primary-600: 197, 57%, 24%;
    --primary-700: 197, 58%, 18%;
    --primary-800: 197, 57%, 12%;
    --primary-900: 198, 57%, 9%;
    --secondary-500: 39, 96%, 55%;
    --warning-50: 38, 27%, 92%;
    --warning-100: 39, 52%, 87%;
    --warning-200: 40, 65%, 80%;
    --warning-300: 39, 74%, 70%;
    --warning-400: 39, 78%, 60%;
    --warning-500: 40, 100%, 37%;
    --warning-600: 39, 100%, 36%;
    --warning-700: 39, 100%, 27%;
    --warning-800: 39, 100%, 18%;
    --warning-900: 39, 100%, 13%;
    --error-50: 0, 19%, 92%;
    --error-100: 0, 34%, 87%;
    --error-200: 0, 45%, 79%;
    --error-300: 0, 51%, 69%;
    --error-400: 0, 53%, 59%;
    --error-500: 0, 60%, 41%;
    --error-600: 0, 72%, 35%;
    --error-700: 0, 71%, 26%;
    --error-800: 0, 73%, 17%;
    --error-900: 0, 73%, 13%;
    --white: 0, 0%, 100%;
    --bg-body: 180, 1%, 99%;
    --bg-panels: 180, 1%, 95%;
    --cui-neutral-50: hsl(var(--neutral-50));
    --cui-neutral-100: hsl(var(--neutral-100));
    --cui-neutral-200: hsl(var(--neutral-200));
    --cui-neutral-300: hsl(var(--neutral-300));
    --cui-neutral-400: hsl(var(--neutral-400));
    --cui-neutral-500: hsl(var(--neutral-500));
    --cui-neutral-600: hsl(var(--neutral-600));
    --cui-neutral-700: hsl(var(--neutral-700));
    --cui-neutral-800: hsl(var(--neutral-800));
    --cui-neutral-900: hsl(var(--neutral-900));
    --cui-primary-50: hsl(var(--primary-50));
    --cui-primary-100: hsl(var(--primary-100));
    --cui-primary-200: hsl(var(--primary-200));
    --cui-primary-300: hsl(var(--primary-300));
    --cui-primary-400: hsl(var(--primary-400));
    --cui-primary-500: hsl(var(--primary-500));
    --cui-primary-600: hsl(var(--primary-600));
    --cui-primary-700: hsl(var(--primary-700));
    --cui-primary-800: hsl(var(--primary-800));
    --cui-primary-900: hsl(var(--primary-900));
    --cui-secondary-500: hsl(var(--secondary-500));
    --cui-warning-50: hsl(var(--warning-50));
    --cui-warning-100: hsl(var(--warning-100));
    --cui-warning-200: hsl(var(--warning-200));
    --cui-warning-300: hsl(var(--warning-300));
    --cui-warning-400: hsl(var(--warning-400));
    --cui-warning-500: hsl(var(--warning-500));
    --cui-warning-600: hsl(var(--warning-600));
    --cui-warning-700: hsl(var(--warning-700));
    --cui-warning-800: hsl(var(--warning-800));
    --cui-warning-900: hsl(var(--warning-900));
    --cui-error-50: hsl(var(--error-50));
    --cui-error-100: hsl(var(--error-100));
    --cui-error-200: hsl(var(--error-200));
    --cui-error-300: hsl(var(--error-300));
    --cui-error-400: hsl(var(--error-400));
    --cui-error-500: hsl(var(--error-500));
    --cui-error-600: hsl(var(--error-600));
    --cui-error-700: hsl(var(--error-700));
    --cui-error-800: hsl(var(--error-800));
    --cui-error-900: hsl(var(--error-900));
    --cui-white: hsl(var(--white));
    --cui-bg-body: hsl(var(--bg-body));
    --cui-bg-panels: hsl(var(--bg-panels));
    --cui-text-family: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --cui-text-color: var(--cui-neutral-700);
    --cui-text-size: 12px;
    --cui-text-size-sm: 10px;
    --cui-text-size-lg: 14px;
    --cui-text-h1-size: 20px;
    --cui-text-h2-size: 18px;
    --cui-text-h3-size: 16px;
    --cui-text-h4-size: 14px;
    --cui-overlay: hsla(0, 0%, 0%, 0.15);
    --cui-overlay-background: hsla(var(--bg-panels), 0.38);
    --cui-shadow-dialog: 1px 1px 5px 1px hsla(0, 0%, 0%, 0.1);
    --cui-shadow-menu: 1px 1px 4px 0 hsla(0, 0%, 0%, 0.1);
    --cui-shadow-border: 0 0 3px 0 hsla(0, 0%, 0%, 0.2);
    --cui-binding-default: var(--cui-neutral-50);
    --cui-binding-error: #ff4105;
    --cui-binding-modified: #73ff05;
    --cui-binding-bind: #ffe605;
    --cui-icon-size: 20px;
    --cui-icon-size-lg: 24px;
    --cui-icon-size-sm: 16px;
    --cui-block-size: 40px;
    --cui-block-size-sm: 30px;
    --cui-block-size-lg: 50px;
    --cui-block-size-xl: 60px;
    --cui-padding-xl: 20px;
    --cui-padding: 15px;
    --cui-padding-sm: 10px;
    --cui-padding-xs: 5px;
    --cui-border-width: 1px;
    --cui-border-width-focused: 2px;
    --cui-border-radius: 4px;
    --cui-rounded-radius: calc(var(--cui-block-size) * 0.5);
    --cui-rounded-radius-sm: calc(var(--cui-block-size-sm) * 0.5);
    --cui-rounded-radius-lg: calc(var(--cui-block-size-lg) * 0.5);
    --cui-rounded-radius-xl: calc(var(--cui-block-size-xl) * 0.5);
    --cui-trn-length-sm: 0.2s;
    --cui-trn-length: 0.4s;
    --cui-trn-func: ease-in-out;
    --cui-z-toolbar: 10;
    --cui-z-overlay: 1010;
    --cui-z-modal: 1020;
    --cui-z-dropdown: 1030;
    --cui-z-tooltip: 1040;
    --cui-z-notifications: 1090;
    --cui-accent: var(--cui-primary-500);
    --cui-accent-hover: var(--cui-primary-700);
    --cui-accent-semi-10: hsla(var(--primary-500), 0.1);
    --cui-accent-semi-20: hsla(var(--primary-500), 0.2);
    --cui-accent-semi-40: hsla(var(--primary-500), 0.38);
    --cui-accent-semi-60: hsla(var(--primary-500), 0.62);
    --cui-accent-text: var(--cui-primary-700);
    --cui-accent-text-hover: var(--cui-primary-800);
    --cui-accent-text-semi-10: hsla(var(--primary-700), 0.1);
    --cui-accent-text-semi-20: hsla(var(--primary-700), 0.2);
    --cui-accent-text-semi-40: hsla(var(--primary-700), 0.38);
    --cui-accent-text-semi-60: hsla(var(--primary-700), 0.62);
    --cui-accent-icon: var(--cui-primary-500);
    --cui-accent-icon-hover: var(--cui-primary-700);
    --cui-accent-secondary: var(--cui-secondary-500);
    --cui-accent-warning: var(--cui-warning-500);
    --cui-accent-warning-hover: var(--cui-warning-700);
    --cui-accent-warning-semi-10: hsla(var(--warning-500), 0.1);
    --cui-accent-warning-semi-40: hsla(var(--warning-500), 0.38);
    --cui-accent-warning-semi-60: hsla(var(--warning-500), 0.62);
    --cui-accent-warning-text: var(--cui-warning-700);
    --cui-accent-warning-text-hover: var(--cui-warning-800);
    --cui-accent-warning-text-semi-10: hsla(var(--warning-700), 0.1);
    --cui-accent-warning-text-semi-40: hsla(var(--warning-700), 0.38);
    --cui-accent-warning-text-semi-60: hsla(var(--warning-700), 0.62);
    --cui-accent-error: var(--cui-error-500);
    --cui-accent-error-hover: var(--cui-error-700);
    --cui-accent-error-semi-10: hsla(var(--error-500), 0.1);
    --cui-accent-error-semi-40: hsla(var(--error-500), 0.38);
    --cui-accent-error-semi-60: hsla(var(--error-500), 0.62);
    --cui-accent-error-text: var(--cui-error-700);
    --cui-accent-error-text-hover: var(--cui-error-800);
    --cui-accent-error-text-semi-10: hsla(var(--error-700), 0.1);
    --cui-accent-error-text-semi-40: hsla(var(--error-700), 0.38);
    --cui-accent-error-text-semi-60: hsla(var(--error-700), 0.62);
    --cui-contrast: var(--cui-white);
    --cui-contrast-semi-10: hsla(var(--white), 0.1);
    --cui-contrast-semi-40: hsla(var(--white), 0.38);
    --cui-contrast-semi-60: hsla(var(--white), 0.62);
    --cui-contrast-text: var(--cui-white);
    --cui-contrast-text-semi-40: hsla(var(--white), 0.38);
    --cui-bg-body-overlay: hsla(var(--bg-body), 0.38);
    --cui-bg-panels-section: var(--cui-neutral-50);
    --cui-bg-panels-border: var(--cui-neutral-100);
    --cui-bg-panels-overlay: var(--cui-overlay-background);
    --cui-shadow: var(--cui-shadow-menu);
    --cui-outline-offset: -2px;
    --cui-outline: 2px solid var(--cui-primary-500);
    --cui-outline-contrast: 2px solid var(--cui-white);
    --cui-outline-warning: 2px solid var(--cui-accent-warning);
    --cui-outline-error: 2px solid var(--cui-accent-error);
    --cui-text: var(--cui-text-color);
    --cui-text-semi-10: rgba(51, 51, 51, 0.1);
    --cui-text-semi-40: rgba(51, 51, 51, 0.38);
    --cui-text-semi-60: rgba(51, 51, 51, 0.62);
    --cui-text-size-xl: 18px;
    --cui-btn-bg: var(--cui-neutral-50);
    --cui-btn-bg-hover: var(--cui-neutral-100);
    --cui-btn-transparent-warning: rgba(194, 130, 12, 0.1);
    --cui-btn-transparent-warning-hover: rgba(194, 130, 12, 0.2);
    --cui-btn-transparent-error: rgba(147, 15, 15, 0.1);
    --cui-btn-transparent-error-hover: rgba(147, 15, 15, 0.15);
    --cui-btn-group-header-bg: var(--cui-neutral-100);
    --cui-btn-group-header-bg-hover: var(--cui-neutral-200);
    --cui-item-bg: rgba(0, 0, 0, 0.075);
    --cui-item-bg-hover: rgba(0, 0, 0, 0.12);
    --cui-input-bg: var(--cui-neutral-50);
    --cui-input-bg-hover: rgba(0, 0, 0, 0.12);
    --cui-input-bg-focus: var(--cui-input-bg-hover);
    --cui-input-text: var(--cui-text-color);
    --cui-input-text-disabled: var(--cui-text-semi-40);
    --cui-input-text-placeholder: var(--cui-text-semi-40);
    --cui-dd-background: var(--cui-bg-body);
    --cui-dd-background-hover: var(--cui-neutral-100);
    --cui-dd-divider: var(--cui-neutral-50);
    --cui-binding-default-shadow: var(--cui-text-semi-40);
    --cui-binding-modified-shadow: rgba(77, 202, 125, 0.62);
    --cui-binding-bind-shadow: rgba(225, 212, 18, 0.62);
    --cui-binding-error-shadow: var(--cui-accent-error-semi-60);
    --cui-menu-splitter: rgba(255, 255, 255, 0.15);
    --cui-prop-editors-drag-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.38);
    --cui-wizard-bg: var(--cui-accent-semi-60);
    --cui-wizard-dark-bg-main: rgba(0, 0, 0, 0.62);
    --cui-wizard-dark-bg-secondary: rgba(0, 0, 0, 0.2);
    --cui-wizard-dark-hover: rgba(0, 0, 0, 0.62);
    --cui-wizard-light-bg-main: rgba(255, 255, 255, 0.62);
    --cui-wizard-light-bg-secondary: rgba(255, 255, 255, 0.2);
    --cui-wizard-light-hover: rgba(255, 255, 255, 0.62);
    --cui-progressbar-bg: var(--cui-bg-panels);
    --cui-progressbar-bg-semi: var(--cui-neutral-100);
    --cui-progress-fill-color: var(--cui-text-color);
    --cui-progress-value-color: var(--cui-contrast-text);
    --cui-scrollbar-color: hsla(var(--primary-900), 0.2);
    --cui-scrollbar-color-contrast: hsla(var(--primary-50), 0.2);
    --cui-treeview-outline-color: var(--cui-bg-panels-border);
    --cui-calendar-range-fill-color: var(--cui-accent-text-semi-40);
    --cui-notification-btn-accent-bg: var(--cui-primary-500);
    --cui-notification-btn-warning-bg: var(--cui-accent-warning);
    --cui-notification-btn-error-bg: var(--cui-accent-error);
    --cui-notification-btn-bg: rgba(0, 0, 0, 0.15);
    --cui-notification-btn-bg-hover: rgba(0, 0, 0, 0.25)
}

.gc-disable-selection * {
    -webkit-user-select: none;
    user-select: none
}

.gc-disable-transition {
    transition: none !important
}

.gc-no-focus-effect .gc-btn:focus, .gc-no-focus-effect .gc-input:focus, .gc-no-focus-effect .gc-textarea:focus {
    outline: none !important;
    box-shadow: none !important
}

.gc-no-focus-effect .gc-check__input:focus + .gc-check__mark {
    outline: none !important;
    box-shadow: none !important
}

.gc-no-focus-effect .gc-radio__input:focus + .gc-radio__mark {
    outline: none !important;
    box-shadow: none !important
}

.gc-no-focus-effect .gc-toggle__input:focus + .gc-toggle__mark {
    outline: none !important;
    box-shadow: none !important
}

.gc-layout-app {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 100%;
    flex-flow: column
}

.gc-layout-app-container {
    display: flex;
    overflow: hidden;
    flex: 1 1 auto;
    height: 0
}

    .gc-layout-app-container > .gc-menu {
        flex: 0 0 auto;
        height: 100%
    }

.gc-layout-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%
}

.gc-layout-appbar {
    flex: 0 0 auto;
    height: calc(var(--cui-block-size-sm) + 1px);
    border-bottom: 1px solid var(--cui-bg-panels-border);
    background-color: var(--cui-bg-panels)
}

.gc-layout-legacy-appbar {
    flex: 0 0 auto;
    height: var(--cui-block-size-lg);
    background-color: var(--cui-primary-500)
}

.gc-layout-toolbar {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    height: calc(var(--cui-block-size-lg) + 1px);
    border-bottom: 1px solid var(--cui-bg-panels-border);
    background-color: var(--cui-bg-panels)
}

    .gc-layout-toolbar > .gc-toolbar {
        flex: 1 1 auto;
        margin: 5px
    }

.gc-layout-with-sidebar {
    display: flex;
    flex: 1 1 auto;
    height: 0
}

    .gc-layout-with-sidebar > .gc-sidebar {
        flex: 0 0 auto
    }

.gc-layout-design-surface {
    overflow: auto;
    flex: 1 1 auto;
    width: 0;
    min-width: 0
}

.gc-layout-statusbar {
    flex: 0 0 auto;
    height: calc(var(--cui-block-size-sm) + 1px);
    border-top: 1px solid var(--cui-bg-panels-border);
    background-color: var(--cui-bg-panels)
}

.gc-icon > svg {
    display: block;
    flex: 0 0 auto
}

.gc-icon--r90 > svg {
    transform: rotate(90deg)
}

.gc-icon--r180 > svg {
    transform: rotate(180deg)
}

.gc-icon--r270 > svg {
    transform: rotate(270deg)
}

.gc-ci-a-text {
    fill: currentColor
}

.gc-ci-a-accent {
    fill: var(--cui-primary-500)
}

.gc-ci-c-accent {
    fill: var(--cui-primary-500)
}

.gc-ci-c-accent-sec {
    fill: var(--cui-secondary-500)
}

.gc-ci-c-accent-err {
    fill: var(--cui-error-500)
}

.gc-btn__text {
    position: relative;
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
    height: var(--cui-block-size);
    padding: 0 var(--cui-padding);
    cursor: default;
    transition: color .2s ease-in-out;
    text-align: inherit;
    vertical-align: top;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    line-height: var(--cui-block-size)
}

.gc-btn__text--empty {
    padding: 0
}

.gc-btn__icon {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: var(--cui-block-size);
    height: var(--cui-block-size);
    transition: color .2s ease-in-out;
    text-align: center;
    color: inherit;
    font-size: var(--cui-icon-size);
    line-height: var(--cui-block-size);
    justify-content: center;
    align-items: center
}

.gc-btn {
    position: relative;
    display: inline-block;
    overflow: visible;
    box-sizing: border-box;
    width: auto;
    height: var(--cui-block-size);
    padding: 0;
    user-select: none;
    transition: background-color .2s ease-in-out,opacity .2s ease-in-out;
    text-align: left;
    vertical-align: top;
    color: inherit;
    border: none;
    border-radius: var(--cui-border-radius);
    outline-offset: var(--cui-outline-offset);
    background-color: var(--cui-btn-bg);
    font-family: var(--cui-text-family);
    font-size: var(--cui-text-size);
    line-height: var(--cui-block-size)
}

    .gc-btn > .gc-btn__icon-badge.gc-badge--bottom-right, .gc-btn > .gc-btn__icon-badge.gc-badge--top-right {
        right: calc(100% - var(--cui-block-size))
    }

    .gc-btn:focus {
        outline: var(--cui-outline);
        box-shadow: none
    }

    .gc-btn.gc-btn--level-warning:focus {
        outline: var(--cui-outline-warning)
    }

    .gc-btn.gc-btn--level-error:focus {
        outline: var(--cui-outline-error)
    }

    .gc-btn.gc-btn--disabled, .gc-btn[disabled] {
        opacity: .38;
        pointer-events: none
    }

        .gc-btn.gc-btn--disabled:focus, .gc-btn[disabled]:focus {
            outline: none;
            box-shadow: none
        }

    .gc-btn::-moz-focus-inner {
        border: 0
    }

    .gc-btn:not([disabled]):not(.gc-btn--disabled):hover {
        background-color: var(--cui-btn-bg-hover)
    }

.gc-btn--block {
    display: block
}

.gc-btn--text-align-center {
    text-align: center
}

.gc-btn--text-align-right {
    text-align: right
}

.gc-btn--with-icon .gc-btn__text {
    padding: 0 0 0 var(--cui-block-size)
}

    .gc-btn--with-icon .gc-btn__text:not(.gc-btn__text--empty) {
        padding-right: var(--cui-padding)
    }

.gc-btn--with-badge .gc-badge {
    margin-right: var(--cui-padding)
}

.gc-btn--with-badge .gc-btn__text:not(.gc-btn__text--empty) {
    padding-right: var(--cui-padding-xs)
}

.gc-btn--with-badge .gc-btn__text.gc-btn__text--empty + .gc-badge {
    margin-left: 0
}

.gc-btn--accent {
    color: var(--cui-contrast-text);
    background-color: var(--cui-primary-500)
}

    .gc-btn--accent:not([disabled]):not(.gc-btn--disabled):hover {
        background-color: var(--cui-primary-700)
    }

    .gc-btn--accent:not([disabled]):not(.gc-btn--disabled):focus {
        outline: var(--cui-outline-contrast)
    }

.gc-btn--transparent {
    background-color: rgba(0,0,0,0)
}

    .gc-btn--transparent:not([disabled]):not(.gc-btn--disabled):hover {
        background-color: var(--cui-btn-bg-hover)
    }

.gc-btn--custom {
    padding: 0
}

.gc-btn--level-warning {
    background-color: var(--cui-btn-transparent-warning)
}

    .gc-btn--level-warning:not([disabled]):not(.gc-btn--disabled):hover {
        background-color: var(--cui-btn-transparent-warning-hover)
    }

    .gc-btn--level-warning.gc-btn--accent:not(.gc-btn--transparent) {
        background-color: var(--cui-warning-500)
    }

        .gc-btn--level-warning.gc-btn--accent:not(.gc-btn--transparent):not([disabled]):not(.gc-btn--disabled):hover {
            background-color: var(--cui-accent-warning-hover)
        }

        .gc-btn--level-warning.gc-btn--accent:not(.gc-btn--transparent):not([disabled]):not(.gc-btn--disabled):focus {
            outline: var(--cui-outline-contrast)
        }

    .gc-btn--level-warning .gc-accent-color {
        color: var(--cui-accent-warning-text)
    }

    .gc-btn--level-warning.gc-btn--transparent {
        background-color: rgba(0,0,0,0)
    }

        .gc-btn--level-warning.gc-btn--transparent:not([disabled]):not(.gc-btn--disabled):hover {
            background-color: var(--cui-btn-transparent-warning-hover)
        }

        .gc-btn--level-warning.gc-btn--transparent.gc-btn--accent {
            color: var(--cui-contrast-text)
        }

            .gc-btn--level-warning.gc-btn--transparent.gc-btn--accent:not([disabled]):not(.gc-btn--disabled):hover {
                color: var(--cui-contrast-text)
            }

.gc-btn--level-error {
    background-color: var(--cui-btn-transparent-error)
}

    .gc-btn--level-error:not([disabled]):not(.gc-btn--disabled):hover {
        background-color: var(--cui-btn-transparent-error-hover)
    }

    .gc-btn--level-error.gc-btn--accent:not(.gc-btn--transparent) {
        background-color: var(--cui-error-500)
    }

        .gc-btn--level-error.gc-btn--accent:not(.gc-btn--transparent):not([disabled]):not(.gc-btn--disabled):hover {
            background-color: var(--cui-accent-error-hover)
        }

        .gc-btn--level-error.gc-btn--accent:not(.gc-btn--transparent):not([disabled]):not(.gc-btn--disabled):focus {
            outline: var(--cui-outline-contrast)
        }

    .gc-btn--level-error .gc-accent-color {
        color: var(--cui-accent-error-text)
    }

    .gc-btn--level-error.gc-btn--transparent {
        background-color: rgba(0,0,0,0)
    }

        .gc-btn--level-error.gc-btn--transparent:not([disabled]):not(.gc-btn--disabled):hover {
            background-color: var(--cui-btn-transparent-error-hover)
        }

        .gc-btn--level-error.gc-btn--transparent.gc-btn--accent {
            color: var(--cui-contrast-text)
        }

            .gc-btn--level-error.gc-btn--transparent.gc-btn--accent:hover {
                color: var(--cui-contrast-text);
                background-color: var(--cui-btn-transparent-error-hover)
            }

.gc-btn--vertical {
    min-width: var(--cui-block-size);
    height: auto !important;
    text-align: center
}

    .gc-btn--vertical > .gc-btn__icon {
        position: relative;
        top: 8px;
        width: 100% !important
    }

    .gc-btn--vertical > .gc-btn__text {
        padding: 0 var(--cui-padding) !important
    }

        .gc-btn--vertical > .gc-btn__text.gc-btn__text--empty {
            display: none
        }

    .gc-btn--vertical > .gc-btn__icon-badge.gc-badge.gc-badge--inset.gc-badge--bottom-right, .gc-btn--vertical > .gc-btn__icon-badge.gc-badge.gc-badge--inset.gc-badge--top-right {
        right: 0
    }

    .gc-btn--vertical > .gc-btn__icon-badge.gc-badge.gc-badge--inset.gc-badge--bottom-left, .gc-btn--vertical > .gc-btn__icon-badge.gc-badge.gc-badge--inset.gc-badge--bottom-right {
        bottom: calc(100% - var(--cui-block-size))
    }

    .gc-btn--vertical.gc-btn--with-badge > .gc-badge.gc-badge--inline {
        margin-right: var(--cui-padding);
        margin-left: 0
    }

    .gc-btn--vertical.gc-btn--with-badge > .gc-btn__text--empty + .gc-badge.gc-badge--inline {
        margin-right: 0
    }

    .gc-btn--vertical.gc-size-sm {
        min-width: var(--cui-block-size-sm)
    }

        .gc-btn--vertical.gc-size-sm > .gc-btn__text {
            padding: 0 var(--cui-padding-sm) !important
        }

        .gc-btn--vertical.gc-size-sm > .gc-btn__icon {
            top: 4px
        }

        .gc-btn--vertical.gc-size-sm > .gc-btn__icon-badge.gc-badge--bottom-left, .gc-btn--vertical.gc-size-sm > .gc-btn__icon-badge.gc-badge--bottom-right {
            bottom: calc(100% - var(--cui-block-size-sm))
        }

        .gc-btn--vertical.gc-size-sm.gc-btn--with-badge > .gc-btn__text:not(.gc-btn__text--empty) + .gc-badge {
            margin-right: var(--cui-padding-sm)
        }

    .gc-btn--vertical.gc-size-lg {
        min-width: var(--cui-block-size-lg)
    }

        .gc-btn--vertical.gc-size-lg > .gc-btn__icon-badge.gc-badge--bottom-left, .gc-btn--vertical.gc-size-lg > .gc-btn__icon-badge.gc-badge--bottom-right {
            bottom: calc(100% - var(--cui-block-size-lg))
        }

.gc-btn.gc-size-sm.gc-btn--with-icon > .gc-btn__text {
    padding-left: var(--cui-block-size-sm)
}

    .gc-btn.gc-size-sm.gc-btn--with-icon > .gc-btn__text:not(.gc-btn__text--empty) {
        padding-right: var(--cui-padding-sm)
    }

.gc-btn.gc-size-sm .gc-btn__icon {
    width: var(--cui-block-size-sm);
    height: var(--cui-block-size-sm);
    font-size: var(--cui-icon-size-sm);
    line-height: var(--cui-block-size-sm)
}

.gc-btn.gc-size-sm .gc-btn__icon-badge.gc-badge--bottom-right, .gc-btn.gc-size-sm .gc-btn__icon-badge.gc-badge--top-right {
    right: calc(100% - var(--cui-block-size-sm))
}

.gc-btn.gc-size-sm .gc-btn__text {
    height: var(--cui-block-size-sm);
    line-height: var(--cui-block-size-sm)
}

.gc-btn.gc-size-lg.gc-btn--with-icon > .gc-btn__text {
    padding-left: var(--cui-block-size-lg)
}

.gc-btn.gc-size-lg .gc-btn__icon {
    width: var(--cui-block-size-lg);
    height: var(--cui-block-size-lg);
    font-size: var(--cui-icon-size-lg);
    line-height: var(--cui-block-size-lg)
}

.gc-btn.gc-size-lg .gc-btn__icon-badge.gc-badge--bottom-right, .gc-btn.gc-size-lg .gc-btn__icon-badge.gc-badge--top-right {
    right: calc(100% - var(--cui-block-size-lg))
}

.gc-btn.gc-size-lg .gc-btn__text {
    height: var(--cui-block-size-lg);
    line-height: var(--cui-block-size-lg)
}

.gc-btn[disabled] {
    opacity: .38
}

@media(any-hover: none) {
    .gc-btn:not([disabled]):not(.gc-btn--disabled):hover {
        background-color: var(--cui-btn-bg)
    }

    .gc-btn--accent:not([disabled]):not(.gc-btn--disabled):hover {
        background-color: var(--cui-primary-500)
    }

    .gc-btn--transparent:not([disabled]):not(.gc-btn--disabled):hover {
        background-color: rgba(0,0,0,0)
    }

    .gc-btn--level-warning.gc-btn--accent:not(.gc-btn--transparent):not([disabled]):not(.gc-btn--disabled):hover {
        background-color: var(--cui-warning-500)
    }

    .gc-btn--level-warning.gc-btn--transparent.gc-btn--accent:hover {
        color: var(--cui-warning-500);
        background-color: rgba(0,0,0,0)
    }

    .gc-btn--level-error.gc-btn--accent:not(.gc-btn--transparent):not([disabled]):not(.gc-btn--disabled):hover {
        background-color: var(--cui-error-500)
    }

    .gc-btn--level-error.gc-btn--transparent.gc-btn--accent:hover {
        color: var(--cui-error-500);
        background-color: rgba(0,0,0,0)
    }
}

.gc-btn-group {
    position: relative;
    display: inline-flex;
    border-radius: var(--cui-border-radius)
}

    .gc-btn-group > *:not(:only-child):not(:first-child):not(:last-child) {
        border-radius: 0 !important
    }

        .gc-btn-group > *:not(:only-child):not(:first-child):not(:last-child) > .gc-btn, .gc-btn-group > *:not(:only-child):not(:first-child):not(:last-child) .gc-input {
            border-radius: 0 !important
        }

    .gc-btn-group > *:not(:only-child):first-child {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important
    }

        .gc-btn-group > *:not(:only-child):first-child > .gc-btn, .gc-btn-group > *:not(:only-child):first-child .gc-input {
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important
        }

    .gc-btn-group > *:not(:only-child):last-child {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important
    }

        .gc-btn-group > *:not(:only-child):last-child > .gc-btn, .gc-btn-group > *:not(:only-child):last-child .gc-input {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important
        }

    .gc-btn-group > *:not(:only-child).gc-dd--chevron > .gc-btn {
        min-width: auto
    }

.gc-btn-group--align-center {
    justify-content: center
}

.gc-btn-group--align-right {
    justify-content: flex-end
}

.gc-btn-group--align-justify > *:not(.gc-btn-group__splitter) {
    flex: 1
}

.gc-btn-group--block {
    display: flex
}

.gc-btn-group--disabled:after, .gc-btn-group--disabled .gc-btn-group__splitter {
    opacity: .38
}

.gc-btn-group[class*="--header"] {
    overflow: hidden
}

    .gc-btn-group[class*="--header"]:after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        content: "";
        transition: background-color .2s ease-in-out
    }

.gc-btn-group--header-default > *:first-child.gc-btn, .gc-btn-group--header-default > *:first-child.gc-input {
    background-color: var(--cui-neutral-100)
}

    .gc-btn-group--header-default > *:first-child.gc-btn:hover:not([disabled]), .gc-btn-group--header-default > *:first-child.gc-input:hover:not([disabled]) {
        background-color: var(--cui-neutral-200)
    }

.gc-btn-group--header-default > *:first-child.gc-dd > .gc-btn, .gc-btn-group--header-default > *:first-child.gc-combo > .gc-input {
    background-color: var(--cui-neutral-100)
}

    .gc-btn-group--header-default > *:first-child.gc-dd > .gc-btn:hover:not([disabled]), .gc-btn-group--header-default > *:first-child.gc-combo > .gc-input:hover:not([disabled]) {
        background-color: var(--cui-neutral-200)
    }

.gc-btn-group--header-default:after {
    background-color: var(--cui-neutral-100)
}

.gc-btn-group--header-info:after {
    background-color: var(--cui-primary-500)
}

.gc-btn-group--header-warning:after {
    background-color: var(--cui-warning-500)
}

.gc-btn-group--header-error:after {
    background-color: var(--cui-error-500)
}

.gc-btn-group__splitter {
    display: flex;
    width: 1px;
    background-color: var(--cui-btn-bg);
    align-items: center
}

    .gc-btn-group__splitter:after {
        width: 1px;
        height: 50%;
        content: "";
        background-color: var(--cui-btn-bg-hover)
    }

.gc-btn-group__splitter--accent-full:after {
    background-color: var(--cui-contrast-text-semi-40)
}

.gc-btn-group__splitter--accent-info:after {
    background-color: var(--cui-accent-semi-60)
}

.gc-btn-group__splitter--accent-warning:after {
    background-color: var(--cui-accent-warning-semi-40)
}

.gc-btn-group__splitter--accent-error:after {
    background-color: var(--cui-accent-error-semi-40)
}

.gc-btn-group__splitter--background-transparent {
    background-color: rgba(0,0,0,0)
}

@media(any-hover: none) {
    .gc-btn-group--header-default > *:first-child.gc-btn:hover:not([disabled]), .gc-btn-group--header-default > *:first-child.gc-input:hover:not([disabled]) {
        background-color: var(--cui-neutral-100)
    }

    .gc-btn-group--header-default > *:first-child.gc-dd > .gc-btn:hover:not([disabled]), .gc-btn-group--header-default > *:first-child.gc-combo > .gc-input:hover:not([disabled]) {
        background-color: var(--cui-neutral-100)
    }
}

.gc-dd__chevron {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    width: 30px;
    height: var(--cui-block-size);
    transition: transform .2s ease-in-out;
    text-align: center;
    pointer-events: none;
    font-size: var(--cui-icon-size);
    line-height: var(--cui-block-size)
}

.gc-dd__chevron--accent-full {
    color: var(--cui-contrast-text)
}

.gc-dd__chevron.gc-size-sm {
    width: var(--cui-block-size-sm);
    font-size: var(--cui-icon-size-sm)
}

.gc-dd__chevron.gc-size-lg {
    width: 35px;
    font-size: var(--cui-icon-size-lg)
}

.gc-btn--level-warning + .gc-dd__chevron.gc-accent-color {
    color: var(--cui-warning-500)
}

.gc-btn--level-error + .gc-dd__chevron.gc-accent-color {
    color: var(--cui-error-500)
}

.gc-btn--accent.gc-btn--transparent.gc-btn--level-warning:not(:hover) + .gc-dd__chevron {
    color: var(--cui-warning-500)
}

.gc-btn--accent.gc-btn--transparent.gc-btn--level-error:not(:hover) + .gc-dd__chevron {
    color: var(--cui-error-500)
}

.gc-dd {
    position: relative;
    display: inline-block;
    width: auto;
    height: var(--cui-block-size);
    vertical-align: top;
    color: var(--cui-text-color);
    border-radius: var(--cui-border-radius);
    font-size: var(--cui-text-size)
}

    .gc-dd *, .gc-dd *:before, .gc-dd *:after {
        box-sizing: border-box
    }

    .gc-dd:after {
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        content: "";
        transition: opacity .2s ease-in-out;
        pointer-events: none;
        opacity: 0;
        border: var(--cui-border-width) solid var(--cui-error-500);
        border-radius: inherit
    }

    .gc-dd > .gc-btn {
        width: 100%
    }

.gc-dd--block {
    display: block
}

.gc-dd--disabled .gc-dd__preview, .gc-dd--disabled .gc-dd__chevron {
    opacity: .38
}

.gc-dd--invalid:after {
    opacity: 1
}

.gc-dd--invalid > .gc-btn:focus {
    outline: var(--cui-outline-error)
}

.gc-dd--with-preview > .gc-btn > .gc-btn__text {
    padding-left: 0
}

.gc-dd--with-preview:not([class^=gc-size]) > .gc-btn {
    padding-left: var(--cui-block-size)
}

.gc-dd--with-preview.gc-size-sm > .gc-btn {
    padding-left: var(--cui-block-size-sm)
}

.gc-dd--with-preview.gc-size-sm > .gc-dd__preview {
    width: var(--cui-block-size-sm)
}

.gc-dd--with-preview.gc-size-lg > .gc-btn {
    padding-left: var(--cui-block-size-lg)
}

.gc-dd--with-preview.gc-size-lg > .gc-dd__preview {
    width: var(--cui-block-size-lg)
}

.gc-dd--chevron > .gc-dd__chevron {
    display: flex;
    justify-content: center;
    align-items: center
}

.gc-dd--chevron > .gc-btn {
    min-width: calc(var(--cui-block-size) + 30px)
}

.gc-dd--chevron > .gc-btn--custom {
    width: 100%;
    padding-right: 30px;
    padding-left: 15px
}

.gc-dd--chevron > .gc-btn .gc-btn__text {
    padding-right: 30px
}

.gc-dd--chevron.gc-size-sm > .gc-btn {
    min-width: calc(var(--cui-block-size-sm) + var(--cui-block-size-sm))
}

.gc-dd--chevron.gc-size-sm > .gc-btn--custom {
    padding-right: var(--cui-block-size-sm)
}

.gc-dd--chevron.gc-size-sm > .gc-btn .gc-btn__text {
    padding-right: var(--cui-block-size-sm) !important
}

.gc-dd--chevron.gc-size-lg > .gc-btn {
    min-width: calc(var(--cui-block-size-lg) + 35px)
}

.gc-dd--chevron.gc-size-lg > .gc-btn--custom {
    padding-right: 35px
}

.gc-dd--chevron.gc-size-lg > .gc-btn .gc-btn__text {
    padding-right: 35px
}

.gc-dd--menu-open > .gc-dd__chevron:not(.gc-dd__chevron--custom) {
    transform: rotate(180deg)
}

.gc-dd--placeholder-text:not(.gc-dd--disabled) > .gc-btn .gc-btn__text {
    opacity: .38
}

.gc-dd__toggle-content {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.gc-dd__preview {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: var(--cui-block-size);
    height: 100%;
    padding: var(--cui-padding-xs);
    pointer-events: none;
    justify-content: center;
    align-items: center
}

@media(any-hover: none) {
    .gc-btn--accent.gc-btn--transparent.gc-btn--level-warning + .gc-dd__chevron {
        color: var(--cui-warning-500)
    }

    .gc-btn--accent.gc-btn--transparent.gc-btn--level-error + .gc-dd__chevron {
        color: var(--cui-error-500)
    }
}

@keyframes gc-menu-show {
    0% {
        transform: scale(0.25);
        opacity: 0
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.gc-portal-root--dropdown .gc-positioner {
    z-index: var(--cui-z-dropdown)
}

.gc-dd-menu {
    transform-origin: right top;
    animation: gc-menu-show .2s 1 ease-in-out;
    border-radius: var(--cui-border-radius);
    background-color: var(--cui-bg-body);
    box-shadow: var(--cui-shadow-menu);
    outline: 1px solid var(--cui-neutral-50);
    font-family: var(--cui-text-family)
}

    .gc-dd-menu *, .gc-dd-menu *:before, .gc-dd-menu *:after {
        box-sizing: border-box
    }

.gc-dd-menu--dropup {
    transform-origin: right bottom
}

.gc-dd-menu--multiselect .gc-dd-menu__item {
    padding-left: 0
}

    .gc-dd-menu--multiselect .gc-dd-menu__item.gc-size-sm {
        padding-left: var(--cui-padding-xs)
    }

.gc-dd-menu--align-center {
    transform-origin: left top;
    animation: gc-menu-show .2s 1 ease-in-out both
}

    .gc-dd-menu--align-center.gc-dd-menu--dropup {
        transform-origin: left bottom
    }

.gc-dd-menu--align-left {
    transform-origin: left top
}

    .gc-dd-menu--align-left.gc-dd-menu--dropup {
        transform-origin: left bottom
    }

.gc-dd-menu__scroll > .gc-scrollbars__view {
    padding: calc(var(--cui-padding)*.5) 0
}

.gc-dd-menu__resizer {
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-bottom: 2px dotted #acacac;
    margin: 3px
}

    .gc-dd-menu__resizer::after {
        content: "";
        display: block;
        position: absolute;
        left: -6px;
        top: -6px;
        width: 24px;
        height: 24px
    }

.gc-dd-menu:not(.gc-dd-menu--multiselect) .gc-dd-menu__item--selected {
    color: var(--cui-contrast-text);
    background-color: var(--cui-primary-500)
}

    .gc-dd-menu:not(.gc-dd-menu--multiselect) .gc-dd-menu__item--selected > i {
        color: var(--cui-contrast-text)
    }

    .gc-dd-menu:not(.gc-dd-menu--multiselect) .gc-dd-menu__item--selected:not([disabled]):not(.disabled):hover {
        background-color: var(--cui-primary-700)
    }

    .gc-dd-menu:not(.gc-dd-menu--multiselect) .gc-dd-menu__item--selected:not([disabled]):not(.disabled):active {
        background-color: var(--cui-primary-700)
    }

    .gc-dd-menu:not(.gc-dd-menu--multiselect) .gc-dd-menu__item--selected.gc-dd-menu__item--focused {
        outline: var(--cui-outline-contrast)
    }

.gc-dd-menu--custom .gc-dd-menu__scroll > .gc-scrollbars__view {
    padding: 0
}

.gc-dd-menu__header.gc-heading {
    padding: 0 var(--cui-padding);
    color: var(--cui-text-semi-60)
}

    .gc-dd-menu__header.gc-heading .gc-heading__divider {
        border-bottom: var(--cui-border-width) solid var(--cui-neutral-50)
    }

.gc-dd-menu__divider {
    display: block;
    width: calc(100% - var(--cui-padding)*2);
    height: 1px;
    margin: 7px var(--cui-padding);
    background-color: var(--cui-neutral-50)
}

.gc-dd-menu__group-dd {
    display: block;
    opacity: 1
}

.gc-dd-menu__group-dd--transition {
    transition: opacity .2s ease-in-out;
    opacity: 0
}

.gc-dd-menu__group-dd--hidden {
    display: none
}

.gc-dd-menu__group-dd:hover {
    display: block;
    opacity: 1
}

.gc-dd-menu__item {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: var(--cui-block-size);
    margin: 0;
    padding: 0 var(--cui-padding);
    cursor: default;
    user-select: none;
    text-align: left;
    text-overflow: ellipsis;
    color: var(--cui-text-color);
    border: 0;
    border-radius: 0;
    outline-offset: var(--cui-outline-offset);
    background-color: rgba(0,0,0,0);
    font-family: var(--cui-text-family);
    font-size: var(--cui-text-size);
    line-height: var(--cui-block-size);
    align-items: center
}

.gc-dd-menu__item--with-preview {
    padding-left: var(--cui-padding-xs)
}

    .gc-dd-menu__item--with-preview.gc-size-sm {
        padding-left: var(--cui-padding-sm)
    }

    .gc-dd-menu__item--with-preview.gc-size-lg {
        padding-left: 0
    }

.gc-dd-menu__item > .gc-dd-menu__item-preview {
    display: flex;
    width: var(--cui-block-size);
    height: var(--cui-block-size);
    pointer-events: none;
    justify-content: center;
    align-items: center;
    flex-shrink: 0
}

.gc-dd-menu__item > span {
    overflow: hidden;
    flex: 1 1 auto;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis
}

.gc-dd-menu__item > .gc-icon {
    display: flex;
    width: var(--cui-icon-size);
    height: var(--cui-block-size);
    margin-right: var(--cui-padding);
    text-align: center;
    font-size: var(--cui-icon-size);
    line-height: var(--cui-block-size);
    justify-content: center;
    align-items: center
}

.gc-dd-menu__item:focus {
    outline: none;
    box-shadow: none
}

.gc-dd-menu__item::-moz-focus-inner {
    border: 0
}

.gc-dd-menu__item:not([disabled]):not(.disabled):hover {
    background-color: var(--cui-neutral-100)
}

.gc-dd-menu__item:not([disabled]):not(.disabled):active {
    background-color: var(--cui-neutral-100)
}

.gc-dd-menu__item--focused {
    outline: var(--cui-outline)
}

.gc-dd-menu__item--disabled {
    opacity: .62
}

.gc-dd-menu__item.gc-size-sm > .gc-dd-menu__item-preview {
    width: var(--cui-block-size-sm);
    height: var(--cui-block-size-sm);
    margin-right: var(--cui-padding-xs)
}

.gc-dd-menu__item.gc-size-sm > .gc-icon {
    width: var(--cui-icon-size-sm);
    height: var(--cui-block-size-sm);
    margin-right: var(--cui-padding-sm);
    font-size: var(--cui-icon-size-sm);
    line-height: var(--cui-block-size-sm)
}

.gc-dd-menu__item.gc-size-lg > .gc-dd-menu__item-preview {
    width: var(--cui-block-size-lg);
    height: var(--cui-block-size-lg)
}

.gc-dd-menu__item.gc-size-lg > .gc-icon {
    width: var(--cui-icon-size-lg);
    height: var(--cui-block-size-lg);
    margin-right: var(--cui-padding);
    font-size: var(--cui-icon-size-lg);
    line-height: var(--cui-block-size-lg)
}

.gc-dd-menu__item.gc-dd-menu__group {
    padding: 0 5px 0 15px
}

    .gc-dd-menu__item.gc-dd-menu__group .gc-dd-menu__group-icon {
        margin-right: 0;
        opacity: .5
    }

@media(any-hover: none) {
    .gc-dd-menu:not(.gc-dd-menu--multiselect) .gc-dd-menu__item--selected:not([disabled]):not(.disabled):hover {
        background-color: var(--cui-primary-500)
    }

    .gc-dd-menu:not(.gc-dd-menu--multiselect) .gc-dd-menu__item--selected.gc-dd-menu__item--focused:hover {
        background-color: var(--cui-primary-700) !important
    }

    .gc-dd-menu__item:not([disabled]):not(.disabled):hover {
        background-color: var(--cui-bg-body)
    }
}

.gc-check__mark {
    position: absolute;
    top: var(--cui-padding-sm);
    left: var(--cui-padding-sm);
    display: block;
    width: calc(var(--cui-block-size) - var(--cui-padding-sm)*2);
    height: calc(var(--cui-block-size) - var(--cui-padding-sm)*2);
    transition: background-color .2s ease-in-out,border-color .2s ease-in-out;
    border: 2px solid rgba(0,0,0,0);
    border-radius: var(--cui-border-radius);
    outline-offset: 2px;
    background-color: var(--cui-neutral-50)
}

    .gc-check__mark::before, .gc-check__mark::after {
        position: absolute;
        top: 50%;
        left: 50%;
        content: "";
        opacity: 0
    }

    .gc-check__mark::before {
        width: 42.5%;
        height: 72.5%;
        transform: rotate(45deg) scale(0) translate(-50%, -50%);
        transform-origin: 30% 0;
        border: 2px solid var(--cui-white);
        border-top: 0;
        border-left: 0
    }

    .gc-check__mark::after {
        width: 50%;
        height: 50%;
        transform: scale(0) translate(-50%, -50%);
        transform-origin: 0 0;
        border-radius: var(--cui-border-radius);
        background-color: var(--cui-white)
    }

.gc-check__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0
}

    .gc-check__input:focus + .gc-check__mark {
        outline: var(--cui-outline);
        box-shadow: none
    }

    .gc-check__input:checked:not(.gc-check__input--indeterminate) + .gc-check__mark {
        background-color: var(--cui-primary-500)
    }

        .gc-check__input:checked:not(.gc-check__input--indeterminate) + .gc-check__mark::before {
            transition: opacity .2s ease-in-out,transform .2s ease-in-out;
            transform: rotate(45deg) scale(1) translate(-50%, -50%);
            opacity: 1
        }

.gc-check__input--indeterminate + .gc-check__mark {
    border-color: var(--cui-primary-500);
    background-color: var(--cui-primary-500)
}

    .gc-check__input--indeterminate + .gc-check__mark::after {
        transition: opacity .2s ease-in-out,transform .2s ease-in-out;
        transform: scale(1) translate(-50%, -50%);
        opacity: 1
    }

.gc-check {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: var(--cui-block-size);
    padding: 0 0 0 var(--cui-block-size);
    -webkit-user-select: none;
    user-select: none;
    vertical-align: top;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--cui-text-size);
    font-weight: normal;
    line-height: var(--cui-block-size)
}

    .gc-check *, .gc-check *:before, .gc-check *:after {
        box-sizing: border-box
    }

    .gc-check:hover .gc-check__mark {
        border-color: var(--cui-neutral-100)
    }

.gc-check--block {
    display: block
}

.gc-check--disabled {
    pointer-events: none;
    opacity: .38
}

.gc-check--invalid .gc-check__mark {
    border-color: var(--cui-error-500) !important
}

.gc-check--invalid .gc-check__input:focus + .gc-check__mark {
    outline: var(--cui-outline-error)
}

.gc-check--invalid .gc-check__input:checked + .gc-check__mark {
    background-color: var(--cui-error-500)
}

.gc-check--invalid .gc-check__input--indeterminate + .gc-check__mark {
    background-color: var(--cui-error-500)
}

.gc-check--align-left {
    padding: 0 var(--cui-block-size) 0 0;
    text-align: right
}

    .gc-check--align-left .gc-check__mark {
        right: var(--cui-padding-sm);
        left: auto
    }

.gc-check.gc-size-sm {
    padding: 0 0 0 var(--cui-block-size-sm);
    line-height: var(--cui-block-size-sm)
}

    .gc-check.gc-size-sm .gc-check__mark {
        top: var(--cui-padding-xs);
        left: var(--cui-padding-xs)
    }

    .gc-check.gc-size-sm.gc-check--align-left {
        padding: 0 var(--cui-block-size-sm) 0 0
    }

        .gc-check.gc-size-sm.gc-check--align-left .gc-check__mark {
            right: var(--cui-padding-xs);
            left: auto
        }

.gc-check.gc-size-lg {
    padding: 0 0 0 var(--cui-block-size-lg);
    line-height: var(--cui-block-size-lg)
}

    .gc-check.gc-size-lg .gc-check__mark {
        top: var(--cui-padding);
        left: var(--cui-padding)
    }

    .gc-check.gc-size-lg.gc-check--align-left {
        padding: 0 var(--cui-block-size-lg) 0 0
    }

        .gc-check.gc-size-lg.gc-check--align-left .gc-check__mark {
            right: var(--cui-padding);
            left: auto
        }

@media(any-hover: none) {
    .gc-check:hover .gc-check__mark {
        border-color: var(--cui-neutral-50)
    }
}

.gc-radio__mark {
    position: absolute;
    top: var(--cui-padding-sm);
    left: var(--cui-padding-sm);
    display: block;
    width: calc(var(--cui-block-size) - var(--cui-padding-sm)*2);
    height: calc(var(--cui-block-size) - var(--cui-padding-sm)*2);
    transition: background-color .2s ease-in-out,border-color .2s ease-in-out;
    border: 2px solid rgba(0,0,0,0);
    border-radius: 50%;
    outline-offset: 2px;
    background-color: var(--cui-neutral-50)
}

    .gc-radio__mark::before {
        position: absolute;
        top: -2px;
        left: -2px;
        display: block;
        width: calc(var(--cui-block-size) - var(--cui-padding-sm)*2);
        height: calc(var(--cui-block-size) - var(--cui-padding-sm)*2);
        content: "";
        transition: transform .2s ease-in-out,opacity .2s ease-in-out;
        transform: scale(0);
        opacity: 0;
        background-image: radial-gradient(var(--cui-white), var(--cui-white) 28%, transparent 32%)
    }

.gc-radio__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0
}

    .gc-radio__input:focus + .gc-radio__mark {
        outline: var(--cui-outline);
        box-shadow: none
    }

    .gc-radio__input:checked + .gc-radio__mark {
        border-color: var(--cui-primary-500);
        background-color: var(--cui-primary-500)
    }

        .gc-radio__input:checked + .gc-radio__mark::before {
            transform: scale(1);
            opacity: 1
        }

.gc-radio {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: var(--cui-block-size);
    padding: 0 0 0 var(--cui-block-size);
    -webkit-user-select: none;
    user-select: none;
    vertical-align: top;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--cui-text-size);
    font-weight: normal;
    line-height: var(--cui-block-size)
}

    .gc-radio *, .gc-radio *:before, .gc-radio *:after {
        box-sizing: border-box
    }

    .gc-radio:hover .gc-radio__mark {
        border-color: var(--cui-neutral-100)
    }

.gc-radio--block {
    display: block
}

.gc-radio--disabled {
    pointer-events: none;
    opacity: .38
}

.gc-radio--invalid .gc-radio__mark {
    border-color: var(--cui-error-500) !important
}

.gc-radio--invalid .gc-radio__input:focus + .gc-radio__mark {
    outline: var(--cui-outline-error)
}

.gc-radio--invalid .gc-radio__input:checked + .gc-radio__mark {
    background-color: var(--cui-error-500)
}

.gc-radio--align-left {
    padding: 0 var(--cui-block-size) 0 0;
    text-align: right
}

    .gc-radio--align-left > .gc-radio__mark {
        right: var(--cui-padding-sm);
        left: auto
    }

.gc-radio.gc-size-sm {
    padding: 0 0 0 var(--cui-block-size-sm);
    line-height: var(--cui-block-size-sm)
}

    .gc-radio.gc-size-sm .gc-radio__mark {
        top: var(--cui-padding-xs);
        left: var(--cui-padding-xs)
    }

    .gc-radio.gc-size-sm.gc-radio--align-left {
        padding: 0 var(--cui-block-size-sm) 0 0
    }

        .gc-radio.gc-size-sm.gc-radio--align-left .gc-radio__mark {
            right: var(--cui-padding-xs);
            left: auto
        }

.gc-radio.gc-size-lg {
    padding: 0 0 0 var(--cui-block-size-lg);
    line-height: var(--cui-block-size-lg)
}

    .gc-radio.gc-size-lg .gc-radio__mark {
        top: var(--cui-padding);
        left: var(--cui-padding)
    }

    .gc-radio.gc-size-lg.gc-radio--align-left {
        padding: 0 var(--cui-block-size-lg) 0 0
    }

        .gc-radio.gc-size-lg.gc-radio--align-left .gc-radio__mark {
            right: var(--cui-padding);
            left: auto
        }

@media(any-hover: none) {
    .gc-radio:hover .gc-radio__mark {
        border-color: var(--cui-neutral-50)
    }
}

.gc-toggle__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0
}

    .gc-toggle__input:focus + .gc-toggle__mark {
        outline: var(--cui-outline);
        box-shadow: none
    }

    .gc-toggle__input:checked:not(.gc-toggle__input--indeterminate) + .gc-toggle__mark {
        background-color: var(--cui-primary-500)
    }

        .gc-toggle__input:checked:not(.gc-toggle__input--indeterminate) + .gc-toggle__mark:after {
            transform: translateX(calc(var(--cui-block-size) - var(--cui-padding-sm) * 2));
            background-color: var(--cui-white)
        }

.gc-toggle__input--indeterminate + .gc-toggle__mark:after {
    left: 50%;
    transition: border-color .2s ease-in-out;
    transform: translateX(-50%);
    border: 2px solid var(--cui-text-color);
    background-color: rgba(0,0,0,0)
}

.gc-toggle__mark {
    position: relative;
    flex: 0 0 auto;
    width: calc((var(--cui-block-size) - var(--cui-padding-sm)*2)*2);
    height: calc(var(--cui-block-size) - var(--cui-padding-sm)*2);
    margin: var(--cui-padding-sm) var(--cui-padding) var(--cui-padding-sm) 0;
    transition: background-color .2s ease-in-out,border-color .2s ease-in-out;
    border: 2px solid rgba(0,0,0,0);
    border-radius: calc((var(--cui-block-size) - var(--cui-padding-sm)*2)*.5);
    outline-offset: 2px;
    background-color: var(--cui-btn-bg)
}

    .gc-toggle__mark:after {
        position: absolute;
        top: 3px;
        left: 3px;
        width: calc(var(--cui-block-size) - var(--cui-padding-sm)*2 - 10px);
        height: calc(var(--cui-block-size) - var(--cui-padding-sm)*2 - 10px);
        content: "";
        transition: background-color .2s ease-in-out,transform .2s ease-in-out;
        border-radius: 50%;
        background-color: var(--cui-text-color)
    }

.gc-toggle {
    position: relative;
    display: inline-flex;
    height: var(--cui-block-size);
    padding: 0;
    -webkit-user-select: none;
    user-select: none;
    text-align: left;
    vertical-align: top;
    color: var(--cui-text-color);
    border: none;
    background-color: rgba(0,0,0,0);
    font-size: var(--cui-text-size);
    font-weight: normal;
    line-height: var(--cui-block-size)
}

    .gc-toggle > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline
    }

    .gc-toggle *, .gc-toggle *:before, .gc-toggle *:after {
        box-sizing: border-box
    }

    .gc-toggle:hover > .gc-toggle__mark {
        border-color: var(--cui-btn-bg-hover)
    }

.gc-toggle--block {
    display: flex
}

    .gc-toggle--block.gc-toggle--align-left {
        justify-content: flex-end
    }

.gc-toggle--align-left .gc-toggle__mark {
    margin-right: 0;
    margin-left: var(--cui-padding);
    order: 2
}

.gc-toggle--disabled {
    pointer-events: none;
    opacity: .38
}

.gc-toggle--invalid:hover > .gc-toggle__mark {
    border-color: var(--cui-error-500)
}

.gc-toggle--invalid > .gc-toggle__input:not(:checked):not(.gc-toggle__input--indeterminate) + .gc-toggle__mark:after {
    background-color: var(--cui-error-500)
}

.gc-toggle--invalid > .gc-toggle__input:focus + .gc-toggle__mark {
    outline: var(--cui-outline-error)
}

.gc-toggle--invalid > .gc-toggle__input:checked + .gc-toggle__mark {
    background-color: var(--cui-error-500)
}

.gc-toggle--invalid > .gc-toggle__input--indeterminate + .gc-toggle__mark:after {
    border-color: var(--cui-error-500)
}

.gc-toggle.gc-size-sm .gc-toggle__mark {
    margin-top: var(--cui-padding-xs);
    margin-bottom: var(--cui-padding-xs)
}

.gc-toggle.gc-size-lg .gc-toggle__mark {
    margin-top: var(--cui-padding);
    margin-bottom: var(--cui-padding)
}

@media(any-hover: none) {
    .gc-toggle:hover > .gc-toggle__mark {
        border-color: rgba(0,0,0,0)
    }

    .gc-toggle--invalid:hover > .gc-toggle__mark {
        border-color: rgba(0,0,0,0)
    }
}

.gc-toolbar {
    position: relative;
    display: inline-flex
}

    .gc-toolbar *, .gc-toolbar *:before, .gc-toolbar *:after {
        box-sizing: border-box
    }

.gc-toolbar--block {
    display: flex;
    height: var(--cui-block-size)
}

    .gc-toolbar--block .gc-toolbar__content-container {
        overflow: hidden
    }

    .gc-toolbar--block .gc-toolbar__content {
        position: absolute
    }

.gc-toolbar--with-toggle > .gc-btn {
    position: absolute;
    top: 0;
    right: 0
}

.gc-toolbar--with-toggle .gc-toolbar__content {
    padding-right: var(--cui-block-size)
}

    .gc-toolbar--with-toggle .gc-toolbar__content:before {
        position: absolute;
        top: calc(0px - var(--cui-padding-xs));
        right: calc(0px - var(--cui-padding-xs));
        width: calc(100% + var(--cui-padding-xs)*2);
        height: calc(100% + var(--cui-padding-xs)*2);
        content: "";
        opacity: 0;
        border-radius: var(--cui-border-radius);
        background-color: var(--cui-bg-body);
        box-shadow: var(--cui-shadow-border)
    }

.gc-toolbar--with-toggle.gc-size-lg .gc-toolbar__content {
    padding-right: var(--cui-block-size-lg)
}

.gc-toolbar--with-toggle.gc-size-sm .gc-toolbar__content {
    padding-right: var(--cui-block-size-sm)
}

.gc-toolbar--expanded {
    z-index: var(--cui-z-toolbar)
}

    .gc-toolbar--expanded .gc-toolbar__content-container {
        overflow: visible
    }

    .gc-toolbar--expanded .gc-toolbar__content:before {
        opacity: 1
    }

.gc-toolbar--no-wrap .gc-toolbar__content {
    position: relative;
    flex-wrap: nowrap
}

.gc-toolbar--rounded .gc-toolbar__content:before {
    border-radius: var(--cui-rounded-radius)
}

.gc-toolbar--rounded.gc-size-lg .gc-toolbar__content:before {
    border-radius: var(--cui-rounded-radius-lg)
}

.gc-toolbar--rounded.gc-size-sm .gc-toolbar__content:before {
    border-radius: var(--cui-rounded-radius-sm)
}

.gc-toolbar--dropup .gc-toolbar__content {
    top: auto;
    bottom: 0;
    flex-wrap: wrap-reverse
}

    .gc-toolbar--dropup .gc-toolbar__content:before {
        top: auto !important;
        bottom: calc(0px - var(--cui-padding-xs));
        box-shadow: var(--cui-shadow-border)
    }

.gc-toolbar.gc-size-lg {
    height: var(--cui-block-size-lg)
}

.gc-toolbar.gc-size-sm {
    height: var(--cui-block-size-sm)
}

.gc-toolbar__content {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    flex-wrap: wrap
}

.gc-toolbar__content-container {
    position: relative;
    width: 100%
}

.gc-toolbar__item-container {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: top
}

.gc-toolbar__item-container--padding {
    padding: 0 var(--cui-padding-xs) 0 0
}

    .gc-toolbar__item-container--padding:last-of-type {
        padding: 0
    }

.gc-toolbar__splitter {
    position: relative;
    display: block;
    overflow: hidden;
    width: 1px;
    height: var(--cui-block-size)
}

    .gc-toolbar__splitter::after {
        display: block;
        width: 1px;
        height: calc(var(--cui-block-size)*.5);
        margin: calc(var(--cui-block-size)*.25) 0;
        content: " ";
        background-color: var(--cui-bg-panels-border)
    }

.gc-size-sm .gc-toolbar__splitter {
    height: var(--cui-block-size-sm)
}

    .gc-size-sm .gc-toolbar__splitter::after {
        height: calc(var(--cui-block-size-sm)*.5);
        margin: calc(var(--cui-block-size-sm)*.25) 0
    }

.gc-size-lg .gc-toolbar__splitter {
    height: var(--cui-block-size-lg)
}

    .gc-size-lg .gc-toolbar__splitter::after {
        height: calc(var(--cui-block-size-lg)*.5);
        margin: calc(var(--cui-block-size-lg)*.25) 0
    }

.gc-tabs {
    display: inline-block
}

.gc-tabs--block {
    display: block
}

.gc-tabs--simplified .gc-btn:after, .gc-tabs--transparent .gc-btn:after {
    position: absolute;
    z-index: var(--cui-z-tooltip);
    bottom: 0;
    left: 50%;
    display: block;
    width: 0;
    height: 1px;
    content: "";
    transition: width .2s ease-in-out;
    transform: translateX(-50%);
    border-radius: var(--cui-border-radius)
}

.gc-tabs--simplified .gc-btn.selected:after, .gc-tabs--transparent .gc-btn.selected:after {
    width: calc(100% - var(--cui-padding));
    height: 2px
}

.gc-tabs--simplified .gc-btn:not([disabled]):not(.disabled):hover:after, .gc-tabs--transparent .gc-btn:not([disabled]):not(.disabled):hover:after {
    width: 100%
}

.gc-tabs--simplified .gc-btn:after {
    background-color: var(--cui-primary-700)
}

.gc-tabs--simplified .gc-btn:not([disabled]):not(.disabled):hover {
    color: var(--cui-primary-800);
    background-color: rgba(0,0,0,0)
}

    .gc-tabs--simplified .gc-btn:not([disabled]):not(.disabled):hover:after {
        background-color: var(--cui-primary-800)
    }

.gc-tabs--transparent .gc-btn {
    color: var(--cui-contrast-text-semi-40)
}

    .gc-tabs--transparent .gc-btn:after {
        background-color: var(--cui-contrast-text)
    }

    .gc-tabs--transparent .gc-btn:not([disabled]):not(.disabled):hover {
        color: var(--cui-contrast-text);
        background-color: rgba(0,0,0,0)
    }

    .gc-tabs--transparent .gc-btn.selected {
        color: var(--cui-contrast-text);
        background-color: rgba(0,0,0,0)
    }

@media(any-hover: none) {
    .gc-tabs--simplified .gc-btn:not([disabled]):not(.disabled):hover:after, .gc-tabs--transparent .gc-btn:not([disabled]):not(.disabled):hover:after {
        width: 0
    }

    .gc-tabs--simplified .gc-btn:not([disabled]):not(.disabled):hover {
        color: var(--cui-primary-700)
    }

        .gc-tabs--simplified .gc-btn:not([disabled]):not(.disabled):hover:after {
            background-color: var(--cui-primary-700)
        }

    .gc-tabs--transparent .gc-btn:not([disabled]):not(.disabled):hover {
        color: var(--cui-contrast-text-semi-40)
    }
}

.gc-input, input[type=text].gc-input, input[type=password].gc-input, input[type=email].gc-input, input[type=url].gc-input {
    box-sizing: border-box;
    height: var(--cui-block-size);
    padding: 0 var(--cui-padding-sm);
    transition: color .2s ease-in-out,background-color .2s ease-in-out,opacity .2s ease-in-out,border-color .2s ease-in-out;
    vertical-align: top;
    color: var(--cui-text-color);
    border: var(--cui-border-width) solid rgba(0,0,0,0);
    border-radius: var(--cui-border-radius);
    outline-offset: var(--cui-outline-offset);
    background-color: var(--cui-neutral-50);
    box-shadow: none;
    font-family: var(--cui-text-family);
    font-size: var(--cui-text-size);
    line-height: calc(var(--cui-block-size) - var(--cui-border-width)*2)
}

    .gc-input:not([disabled]):hover, input[type=text].gc-input:not([disabled]):hover, input[type=password].gc-input:not([disabled]):hover, input[type=email].gc-input:not([disabled]):hover, input[type=url].gc-input:not([disabled]):hover {
        background-color: var(--cui-neutral-100)
    }

    .gc-input:not([disabled]):focus, input[type=text].gc-input:not([disabled]):focus, input[type=password].gc-input:not([disabled]):focus, input[type=email].gc-input:not([disabled]):focus, input[type=url].gc-input:not([disabled]):focus {
        outline: var(--cui-outline);
        background-color: var(--cui-neutral-100);
        box-shadow: none
    }

    .gc-input::placeholder, input[type=text].gc-input::placeholder, input[type=password].gc-input::placeholder, input[type=email].gc-input::placeholder, input[type=url].gc-input::placeholder {
        color: var(--cui-neutral-400);
        font-weight: normal
    }

.gc-input--block, input[type=text].gc-input--block, input[type=password].gc-input--block, input[type=email].gc-input--block, input[type=url].gc-input--block {
    display: block
}

.gc-input--invalid, input[type=text].gc-input--invalid, input[type=password].gc-input--invalid, input[type=email].gc-input--invalid, input[type=url].gc-input--invalid {
    border-color: var(--cui-error-500)
}

    .gc-input--invalid:not([disabled]):focus, input[type=text].gc-input--invalid:not([disabled]):focus, input[type=password].gc-input--invalid:not([disabled]):focus, input[type=email].gc-input--invalid:not([disabled]):focus, input[type=url].gc-input--invalid:not([disabled]):focus {
        border-color: var(--cui-error-500);
        outline: var(--cui-outline-error)
    }

    .gc-input--invalid:not([disabled]):hover, input[type=text].gc-input--invalid:not([disabled]):hover, input[type=password].gc-input--invalid:not([disabled]):hover, input[type=email].gc-input--invalid:not([disabled]):hover, input[type=url].gc-input--invalid:not([disabled]):hover {
        border-color: var(--cui-error-500)
    }

.gc-input--text-align-center, input[type=text].gc-input--text-align-center, input[type=password].gc-input--text-align-center, input[type=email].gc-input--text-align-center, input[type=url].gc-input--text-align-center {
    text-align: center
}

.gc-input--text-align-right, input[type=text].gc-input--text-align-right, input[type=password].gc-input--text-align-right, input[type=email].gc-input--text-align-right, input[type=url].gc-input--text-align-right {
    text-align: right
}

.gc-input[disabled], input[type=text].gc-input[disabled], input[type=password].gc-input[disabled], input[type=email].gc-input[disabled], input[type=url].gc-input[disabled] {
    cursor: default;
    color: var(--cui-neutral-300)
}

    .gc-input[disabled]::placeholder, input[type=text].gc-input[disabled]::placeholder, input[type=password].gc-input[disabled]::placeholder, input[type=email].gc-input[disabled]::placeholder, input[type=url].gc-input[disabled]::placeholder {
        color: var(--cui-neutral-400)
    }

.gc-input.gc-size-sm, input[type=text].gc-input.gc-size-sm, input[type=password].gc-input.gc-size-sm, input[type=email].gc-input.gc-size-sm, input[type=url].gc-input.gc-size-sm {
    height: var(--cui-block-size-sm);
    line-height: var(--cui-block-size-sm)
}

.gc-input.gc-size-lg, input[type=text].gc-input.gc-size-lg, input[type=password].gc-input.gc-size-lg, input[type=email].gc-input.gc-size-lg, input[type=url].gc-input.gc-size-lg {
    height: var(--cui-block-size-lg);
    line-height: var(--cui-block-size-lg)
}

.gc-input.gc-size-xl, input[type=text].gc-input.gc-size-xl, input[type=password].gc-input.gc-size-xl, input[type=email].gc-input.gc-size-xl, input[type=url].gc-input.gc-size-xl {
    height: var(--cui-block-size-xl);
    line-height: var(--cui-block-size-xl)
}

textarea.gc-input {
    height: initial
}

@media(any-hover: none) {
    .gc-input:not([disabled]):hover, input[type=text].gc-input:not([disabled]):hover, input[type=password].gc-input:not([disabled]):hover, input[type=email].gc-input:not([disabled]):hover, input[type=url].gc-input:not([disabled]):hover {
        background-color: var(--cui-neutral-50)
    }
}

.gc-textarea, textarea.gc-textarea {
    box-sizing: border-box;
    margin: 0;
    padding: calc((var(--cui-block-size) - var(--cui-border-width)*2 - 25px)*.5) var(--cui-padding);
    resize: none;
    transition: color .2s ease-in-out,background-color .2s ease-in-out,opacity .2s ease-in-out,border-color .2s ease-in-out;
    vertical-align: top;
    color: var(--cui-text-color);
    border: var(--cui-border-width) solid rgba(0,0,0,0);
    border-radius: var(--cui-border-radius);
    outline-offset: var(--cui-outline-offset);
    background-color: var(--cui-neutral-50);
    box-shadow: none;
    font-family: var(--cui-text-family);
    font-size: var(--cui-text-size);
    line-height: 25px
}

    .gc-textarea:not([rows]), textarea.gc-textarea:not([rows]) {
        height: var(--cui-block-size)
    }

    .gc-textarea:not([disabled]):hover, textarea.gc-textarea:not([disabled]):hover {
        background-color: var(--cui-neutral-100)
    }

    .gc-textarea:not([disabled]):focus, textarea.gc-textarea:not([disabled]):focus {
        outline: var(--cui-outline);
        background-color: var(--cui-neutral-100);
        box-shadow: none
    }

    .gc-textarea::placeholder, textarea.gc-textarea::placeholder {
        color: var(--cui-neutral-400);
        font-weight: normal
    }

.gc-textarea--block, textarea.gc-textarea--block {
    display: block
}

.gc-textarea--resize-vertical, textarea.gc-textarea--resize-vertical {
    resize: vertical
}

.gc-textarea--resize-both, textarea.gc-textarea--resize-both {
    resize: both
}

.gc-textarea--invalid, textarea.gc-textarea--invalid {
    border-color: var(--cui-error-500)
}

    .gc-textarea--invalid:not([disabled]):focus, textarea.gc-textarea--invalid:not([disabled]):focus {
        border-color: var(--cui-error-500);
        outline: var(--cui-outline-error)
    }

    .gc-textarea--invalid:not([disabled]):hover, textarea.gc-textarea--invalid:not([disabled]):hover {
        border-color: var(--cui-error-500)
    }

.gc-textarea--text-align-center, textarea.gc-textarea--text-align-center {
    text-align: center
}

.gc-textarea--text-align-right, textarea.gc-textarea--text-align-right {
    text-align: right
}

.gc-textarea[disabled], textarea.gc-textarea[disabled] {
    cursor: default;
    color: var(--cui-neutral-300)
}

    .gc-textarea[disabled]::placeholder, textarea.gc-textarea[disabled]::placeholder {
        color: var(--cui-neutral-300)
    }

.gc-textarea--size-sm, textarea.gc-textarea--size-sm {
    padding: calc((var(--cui-block-size-sm) - var(--cui-border-width)*2 - 20px)*.5) var(--cui-padding);
    line-height: 20px
}

    .gc-textarea--size-sm:not([rows]), textarea.gc-textarea--size-sm:not([rows]) {
        height: var(--cui-block-size-sm)
    }

.gc-textarea--size-lg, textarea.gc-textarea--size-lg {
    padding: calc((var(--cui-block-size-lg) - var(--cui-border-width)*2 - 30px)*.5) var(--cui-padding);
    line-height: 30px
}

    .gc-textarea--size-lg:not([rows]), textarea.gc-textarea--size-lg:not([rows]) {
        height: var(--cui-block-size-lg)
    }

@media(any-hover: none) {
    .gc-textarea:not([disabled]):hover, textarea.gc-textarea:not([disabled]):hover {
        background-color: var(--cui-neutral-50)
    }
}

.gc-label {
    display: -ms-inline-grid;
    display: inline-grid;
    vertical-align: top;
    -ms-grid-columns: minmax(0, 1fr);
    -ms-grid-rows: minmax(0, auto) minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, auto) minmax(0, 1fr);
    grid-template-areas: "label" "content"
}

    .gc-label *, .gc-label *:before, .gc-label *:after {
        box-sizing: border-box
    }

    .gc-label .gc-label__label {
        width: 100%;
        grid-area: label;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1
    }

    .gc-label .gc-label__content {
        grid-area: content;
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1
    }

.gc-label--block {
    display: -ms-grid;
    display: grid
}

.gc-label--position-left, .gc-label--position-right {
    -ms-grid-columns: 33% 67%;
    -ms-grid-rows: minmax(0, 1fr);
    grid-template-columns: 33% 67%;
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "label content"
}

    .gc-label--position-left .gc-label__label, .gc-label--position-right .gc-label__label {
        grid-area: label;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1
    }

    .gc-label--position-left .gc-label__content, .gc-label--position-right .gc-label__content {
        width: 100%;
        grid-area: content;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1
    }

        .gc-label--position-left .gc-label__content > *, .gc-label--position-right .gc-label__content > * {
            width: 100%
        }

    .gc-label--position-left.gc-label--width-auto, .gc-label--position-right.gc-label--width-auto {
        -ms-grid-columns: minmax(33%, auto) minmax(50%, 1fr);
        grid-template-columns: minmax(33%, auto) minmax(50%, 1fr)
    }

        .gc-label--position-left.gc-label--width-auto .gc-label__label, .gc-label--position-right.gc-label--width-auto .gc-label__label {
            width: auto
        }

        .gc-label--position-left.gc-label--width-auto .gc-label__content, .gc-label--position-right.gc-label--width-auto .gc-label__content {
            width: auto
        }

    .gc-label--position-left .gc-label__label {
        padding-right: var(--cui-padding)
    }

.gc-label--position-right {
    -ms-grid-columns: 67% 33%;
    -ms-grid-rows: minmax(0, 1fr);
    grid-template-columns: 67% 33%;
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "content label"
}

    .gc-label--position-right .gc-label__label {
        padding-left: var(--cui-padding);
        text-align: right;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1
    }

    .gc-label--position-right .gc-label__content {
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1
    }

    .gc-label--position-right.gc-label--width-auto {
        -ms-grid-columns: minmax(50%, 1fr) minmax(33%, auto);
        grid-template-columns: minmax(50%, 1fr) minmax(33%, auto)
    }

.gc-label--position-bottom {
    -ms-grid-rows: minmax(0, 1fr) minmax(0, auto);
    grid-template-rows: minmax(0, 1fr) minmax(0, auto);
    grid-template-areas: "content" "label"
}

    .gc-label--position-bottom .gc-label__label {
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1
    }

    .gc-label--position-bottom .gc-label__content {
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1
    }

.gc-label--alignment-left .gc-label__label {
    text-align: left
}

.gc-label--alignment-right .gc-label__label {
    text-align: right
}

.gc-label--alignment-center .gc-label__label {
    text-align: center
}

.gc-label--with-tooltip .gc-label__label {
    padding-right: var(--cui-icon-size)
}

.gc-label--with-icon .gc-label__label {
    padding: 0
}

.gc-label--disabled .gc-label__label {
    opacity: .38
}

.gc-label--with-tooltip.gc-label--position-right .gc-label__label {
    padding-right: 0;
    padding-left: var(--cui-icon-size)
}

    .gc-label--with-tooltip.gc-label--position-right .gc-label__label > .gc-label__tooltip {
        right: initial;
        left: 0
    }

.gc-label__label {
    position: relative;
    display: flex;
    flex-direction: column;
    height: var(--cui-block-size);
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    user-select: none;
    flex-wrap: nowrap;
    justify-content: center
}

    .gc-label__label > span {
        display: -webkit-box;
        overflow: hidden;
        flex: 0 0 auto;
        max-height: 30px;
        vertical-align: middle;
        text-overflow: ellipsis;
        font-size: var(--cui-text-size);
        line-height: 15px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }

        .gc-label__label > span > b {
            color: var(--cui-primary-500)
        }

.gc-label--size-small .gc-label__label {
    height: var(--cui-block-size-sm)
}

.gc-label--size-small .gc-label__icon {
    width: var(--cui-block-size-sm);
    height: var(--cui-block-size-sm)
}

.gc-label--size-large .gc-label__label {
    height: var(--cui-block-size-lg)
}

.gc-label--size-large .gc-label__icon {
    width: var(--cui-block-size-lg);
    height: var(--cui-block-size-lg)
}

.gc-label__tooltip {
    position: absolute;
    top: 50%;
    right: 0;
    width: var(--cui-icon-size);
    height: var(--cui-icon-size);
    transform: translateY(-50%)
}

    .gc-label__tooltip .gc-icon {
        display: flex;
        width: var(--cui-icon-size);
        height: var(--cui-icon-size);
        justify-content: center;
        align-items: center
    }

.gc-label__icon {
    display: flex;
    width: var(--cui-block-size);
    height: var(--cui-block-size);
    justify-content: center;
    align-items: center
}

.gc-appbar {
    display: flex;
    height: var(--cui-block-size)
}

.gc-appbar--legacy .gc-appbar__title {
    color: var(--cui-contrast-text)
}

.gc-appbar--legacy .gc-appbar__subtitle {
    color: var(--cui-contrast-text-semi-40)
}

.gc-appbar--legacy .gc-appbar__badge--accent {
    background-color: var(--cui-primary-700)
}

.gc-appbar--legacy .gc-menu__logo {
    height: var(--cui-block-size-lg)
}

.gc-appbar__logo-container {
    position: relative;
    flex: 0 0 auto;
    height: 100%
}

.gc-appbar__main-section {
    flex: 0 0 auto;
    height: 100%
}

.gc-appbar__title-section {
    display: flex;
    overflow: hidden;
    flex: 1 1 auto;
    width: 0;
    height: 100%;
    justify-content: center;
    align-items: center
}

.gc-appbar__control-section {
    flex: 0 0 auto;
    height: 100%
}

.gc-appbar__badge {
    display: block;
    flex: 0 0 auto;
    height: 20px;
    margin-left: var(--cui-padding);
    padding: 0 var(--cui-padding);
    color: var(--cui-text-color);
    border-radius: 10px;
    background-color: var(--cui-bg-panels-border);
    font-size: var(--cui-text-size);
    line-height: 20px
}

.gc-appbar__badge--error {
    color: var(--cui-contrast-text);
    background-color: var(--cui-error-500)
}

.gc-appbar__badge--warning {
    color: var(--cui-contrast-text);
    background-color: var(--cui-warning-500)
}

.gc-appbar__badge--accent {
    color: var(--cui-contrast-text);
    background-color: var(--cui-primary-500)
}

.gc-appbar__badge--clickable {
    cursor: default
}

.gc-appbar__title {
    display: block;
    flex: 0 0 auto;
    color: var(--cui-text-color);
    font-size: var(--cui-text-size)
}

.gc-appbar__subtitle {
    display: block;
    flex: 0 0 auto;
    padding-left: var(--cui-padding);
    color: var(--cui-text-semi-60);
    font-size: var(--cui-text-size);
    font-style: italic
}

.gc-menu__splitter {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 1px
}

    .gc-menu__splitter::after {
        display: block;
        width: calc(100% - var(--cui-padding-sm)*2);
        height: 1px;
        margin-left: var(--cui-padding-sm);
        content: " ";
        background-color: var(--cui-menu-splitter)
    }

.gc-menu__logo {
    width: var(--cui-block-size);
    height: calc(var(--cui-block-size) + 1px);
    transition: width .2s ease-in-out,background-color .2s ease-in-out;
    background-color: var(--cui-primary-500)
}

.gc-menu__logo--menu-size-small {
    width: var(--cui-block-size-sm)
}

.gc-menu__logo--menu-size-large {
    width: var(--cui-block-size-lg)
}

.gc-menu__logo--size-small {
    height: calc(var(--cui-block-size-sm) + 1px)
}

.gc-menu__logo--size-large {
    height: calc(var(--cui-block-size-lg) + 1px)
}

.gc-menu__logo--drawer {
    position: absolute;
    z-index: calc(var(--cui-z-overlay) + 1);
    top: 0;
    left: 0
}

.gc-menu__logo--expanded {
    width: 180px
}

.gc-menu__logo-placeholder {
    width: var(--cui-block-size)
}

.gc-menu__logo-placeholder--size-small {
    width: var(--cui-block-size-sm)
}

.gc-menu__logo-placeholder--size-large {
    width: var(--cui-block-size-lg)
}

.gc-menu__btn-container {
    position: relative;
    z-index: 1;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    width: var(--cui-block-size);
    height: 100%;
    transition: width .2s ease-in-out,background-color .2s ease-in-out;
    background-color: var(--cui-primary-500)
}

.gc-menu__scrollable-buttons {
    position: relative;
    flex: 1 1 auto
}

.gc-menu__panel-toggle {
    position: relative
}

    .gc-menu__panel-toggle .gc-btn__icon {
        transition: transform .2s ease-in-out
    }

.gc-menu__panel-toggle-chevron {
    position: absolute;
    top: 50%;
    left: calc(var(--cui-block-size)*.5);
    transition: transform .2s ease-in-out,opacity .2s ease-in-out;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    color: var(--cui-contrast-text-semi-40)
}

.gc-menu__panel-toggle-chevron--accent {
    color: var(--cui-accent-semi-60)
}

.gc-menu__panel-toggle:hover:not(.gc-menu__panel-toggle--no-chevron):not(.gc-menu__panel-toggle--disabled) .gc-btn__icon, .gc-menu__panel-toggle--active:not(.gc-menu__panel-toggle--no-chevron) .gc-btn__icon {
    transform: translateX(-5px)
}

.gc-menu__panel-toggle:hover:not(.gc-menu__panel-toggle--no-chevron):not(.gc-menu__panel-toggle--disabled) .gc-menu__panel-toggle-chevron, .gc-menu__panel-toggle--active:not(.gc-menu__panel-toggle--no-chevron) .gc-menu__panel-toggle-chevron {
    transform: translate(-50%, -50%) translateX(12px);
    opacity: 1
}

.gc-menu__panel-toggle:hover:not(.gc-menu__panel-toggle--no-chevron):not(.gc-menu__panel-toggle--disabled).gc-menu__panel-toggle--size-small .gc-btn__icon, .gc-menu__panel-toggle--active:not(.gc-menu__panel-toggle--no-chevron).gc-menu__panel-toggle--size-small .gc-btn__icon {
    transform: translateX(-3px)
}

.gc-menu__panel-toggle:hover:not(.gc-menu__panel-toggle--no-chevron):not(.gc-menu__panel-toggle--disabled).gc-menu__panel-toggle--size-small .gc-menu__panel-toggle-chevron, .gc-menu__panel-toggle--active:not(.gc-menu__panel-toggle--no-chevron).gc-menu__panel-toggle--size-small .gc-menu__panel-toggle-chevron {
    transform: translate(-50%, -50%) translateX(9px);
    opacity: 1
}

.gc-menu__panel-toggle--size-small .gc-menu__panel-toggle-chevron {
    left: calc(var(--cui-block-size-sm)*.5)
}

.gc-menu__panel-toggle--size-large .gc-menu__panel-toggle-chevron {
    left: calc(var(--cui-block-size-lg)*.5)
}

.gc-menu-panel {
    overflow-x: hidden
}

.gc-menu-panel--fill-container {
    overflow: hidden;
    height: 100%
}

.gc-menu-panel--notifications > .gc-notification-details {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%
}

    .gc-menu-panel--notifications > .gc-notification-details .gc-notification-details__content {
        flex: 1 0 auto;
        padding-bottom: 0;
        order: 2
    }

    .gc-menu-panel--notifications > .gc-notification-details .gc-notification-details__action {
        padding-bottom: var(--cui-padding-sm);
        order: 1
    }

.gc-menu-panel__placeholder {
    padding: var(--cui-padding);
    text-align: center;
    color: var(--cui-text-semi-60);
    font-size: var(--cui-text-size);
    line-height: var(--cui-block-size-sm)
}

.gc-menu__panel-container {
    width: 230px;
    height: 100%;
    margin-left: -230px;
    transition: margin .2s ease-in-out;
    background-color: var(--cui-bg-panels);
    will-change: margin
}

.gc-menu__panel-container--visible {
    margin-left: 0 !important
}

@keyframes gc-pin-appear-animation {
    0% {
        transform: scale(0, 0);
        opacity: 0
    }

    50% {
        transform: scale(0, 0);
        opacity: 0
    }

    100% {
        transform: scale(1, 1);
        opacity: 1
    }
}

@keyframes gc-pin-feedback {
    50% {
        transform: scale(0.7)
    }
}

.gc-menu__panel-header {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: var(--cui-block-size);
    margin: 0;
    padding: 0 var(--cui-block-size) 0 var(--cui-padding);
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--cui-primary-700);
    box-shadow: 0 -1px 0 0 var(--cui-neutral-100) inset;
    font-size: var(--cui-text-size);
    font-weight: bold;
    line-height: var(--cui-block-size)
}

    .gc-menu__panel-header > .gc-btn-pin {
        position: absolute;
        right: var(--cui-padding-xs);
        bottom: var(--cui-padding-xs);
        animation-name: gc-pin-appear-animation;
        animation-duration: var(--cui-trn-length);
        animation-timing-function: ease-in-out
    }

        .gc-menu__panel-header > .gc-btn-pin .gc-btn__icon {
            transition: transform .2s ease-in-out
        }

    .gc-menu__panel-header > .gc-btn-pin--pinned .gc-btn__icon {
        animation: gc-pin-feedback .2s ease-out
    }

.gc-menu__panel-content {
    height: calc(100% - var(--cui-block-size));
    box-shadow: -1px 0 0 0 var(--cui-neutral-100) inset
}

.gc-menu {
    position: relative;
    z-index: var(--cui-z-overlay);
    display: flex;
    height: 100%
}

    .gc-menu *, .gc-menu *:before, .gc-menu *:after {
        box-sizing: border-box
    }

.gc-menu--drawer {
    width: var(--cui-block-size)
}

    .gc-menu--drawer .gc-menu__btn-container {
        position: absolute;
        top: 0;
        left: 0
    }

    .gc-menu--drawer .gc-menu__panel-container {
        position: absolute;
        top: 0;
        left: var(--cui-block-size)
    }

    .gc-menu--drawer.gc-menu--size-small {
        width: var(--cui-block-size-sm)
    }

        .gc-menu--drawer.gc-menu--size-small .gc-menu__panel-container {
            left: var(--cui-block-size-sm)
        }

    .gc-menu--drawer.gc-menu--size-large {
        width: var(--cui-block-size-lg)
    }

        .gc-menu--drawer.gc-menu--size-large .gc-menu__panel-container {
            left: var(--cui-block-size-lg)
        }

.gc-menu--size-small .gc-menu__btn-container {
    width: var(--cui-block-size-sm)
}

.gc-menu--size-small .gc-menu__panel-header {
    height: var(--cui-block-size-sm);
    padding: 0 var(--cui-block-size-sm) 0 var(--cui-padding);
    line-height: var(--cui-block-size-sm)
}

    .gc-menu--size-small .gc-menu__panel-header > .gc-btn-pin {
        right: 0;
        bottom: 0
    }

.gc-menu--size-small .gc-menu__panel-content {
    height: calc(100% - var(--cui-block-size-sm))
}

.gc-menu--size-large .gc-menu__btn-container {
    width: var(--cui-block-size-lg)
}

.gc-menu--size-large .gc-menu__panel-header {
    height: var(--cui-block-size-lg);
    padding: 0 var(--cui-block-size-lg) 0 var(--cui-padding);
    line-height: var(--cui-block-size-lg)
}

.gc-menu--size-large .gc-menu__panel-content {
    height: calc(100% - var(--cui-block-size-lg))
}

.gc-menu--expanded .gc-menu__btn-container {
    width: 180px
}

.gc-menu--legacy .gc-menu__btn-container {
    background-color: var(--cui-bg-panels)
}

.gc-menu--legacy .gc-menu__splitter:after {
    background-color: var(--cui-bg-panels-border)
}

@media(any-hover: none) {
    .gc-menu__panel-toggle:hover:not(.gc-menu__panel-toggle--no-chevron):not(.gc-menu__panel-toggle--disabled) .gc-btn__icon, .gc-menu__panel-toggle--active:not(.gc-menu__panel-toggle--no-chevron) .gc-btn__icon {
        transform: none
    }

    .gc-menu__panel-toggle:hover:not(.gc-menu__panel-toggle--no-chevron):not(.gc-menu__panel-toggle--disabled) .gc-menu__panel-toggle-chevron, .gc-menu__panel-toggle--active:not(.gc-menu__panel-toggle--no-chevron) .gc-menu__panel-toggle-chevron {
        transform: translate(-50%, -50%);
        opacity: 0
    }

    .gc-menu__panel-toggle:hover:not(.gc-menu__panel-toggle--no-chevron):not(.gc-menu__panel-toggle--disabled).gc-menu__panel-toggle--size-small .gc-btn__icon, .gc-menu__panel-toggle--active:not(.gc-menu__panel-toggle--no-chevron).gc-menu__panel-toggle--size-small .gc-btn__icon {
        transform: none
    }

    .gc-menu__panel-toggle:hover:not(.gc-menu__panel-toggle--no-chevron):not(.gc-menu__panel-toggle--disabled).gc-menu__panel-toggle--size-small .gc-menu__panel-toggle-chevron, .gc-menu__panel-toggle--active:not(.gc-menu__panel-toggle--no-chevron).gc-menu__panel-toggle--size-small .gc-menu__panel-toggle-chevron {
        transform: translate(-50%, -50%);
        opacity: 0
    }
}

.gc-sidebar {
    position: relative;
    flex: 1 0 auto;
    height: 100%;
    transition: width .2s ease-in-out
}

    .gc-sidebar > .gc-sidebar__menu {
        position: absolute;
        top: 0;
        right: 0
    }

    .gc-sidebar[class*="--size"] > .gc-sidebar__menu > .gc-tabs {
        max-width: calc(100% - var(--cui-block-size-sm))
    }

.gc-sidebar--collapsed {
    width: 0 !important
}

    .gc-sidebar--collapsed .gc-sidebar__container {
        overflow: visible
    }

    .gc-sidebar--collapsed .gc-sidebar__toggle-area {
        left: -19px;
        width: 19px;
        pointer-events: none
    }

    .gc-sidebar--collapsed .gc-sidebar__toggle-area-button {
        top: calc(50% - 50px/2);
        height: 50px;
        pointer-events: all
    }

        .gc-sidebar--collapsed .gc-sidebar__toggle-area-button:before {
            top: 18px;
            left: 35%
        }

        .gc-sidebar--collapsed .gc-sidebar__toggle-area-button:after {
            top: 24px;
            left: 35%
        }

        .gc-sidebar--collapsed .gc-sidebar__toggle-area-button:hover:before {
            transform: rotate(40deg)
        }

        .gc-sidebar--collapsed .gc-sidebar__toggle-area-button:hover:after {
            transform: rotate(-40deg)
        }

    .gc-sidebar--collapsed .gc-sidebar__toggle-area-bar {
        top: calc(50% - 50px/2);
        right: 0;
        left: auto;
        height: 50px;
        margin: 0
    }

.gc-sidebar--size-sm > .gc-sidebar__menu + .gc-sidebar__container {
    padding-top: var(--cui-block-size-sm)
}

    .gc-sidebar--size-sm > .gc-sidebar__menu + .gc-sidebar__container .gc-sidebar__toggle-area {
        height: calc(100% - var(--cui-block-size-sm))
    }

.gc-sidebar--size-md > .gc-sidebar__menu + .gc-sidebar__container {
    padding-top: var(--cui-block-size)
}

    .gc-sidebar--size-md > .gc-sidebar__menu + .gc-sidebar__container .gc-sidebar__toggle-area {
        height: calc(100% - var(--cui-block-size))
    }

.gc-sidebar__menu {
    display: flex;
    box-sizing: border-box;
    padding-right: var(--cui-padding-xs);
    transition: width .2s ease-in-out;
    justify-content: space-between;
    align-items: center
}

    .gc-sidebar__menu + .gc-sidebar__container {
        padding-top: var(--cui-block-size-lg)
    }

        .gc-sidebar__menu + .gc-sidebar__container .gc-sidebar__toggle-area {
            height: calc(100% - var(--cui-block-size-lg))
        }

    .gc-sidebar__menu > .gc-tabs {
        overflow: hidden;
        max-width: calc(100% - var(--cui-block-size))
    }

.gc-sidebar__menu--hidden-toggles {
    justify-content: flex-end
}

.gc-sidebar__menu .ci-sidebar-toggle__arrow {
    transition: transform .2s ease-in-out;
    transform-origin: center center
}

.gc-sidebar__menu--collapsed .ci-sidebar-toggle__arrow {
    transform: scale(-1) translateX(4px)
}

.gc-sidebar__container {
    height: 100%;
    background-color: var(--cui-bg-panels);
    box-shadow: 1px 0 0 0 var(--cui-neutral-100) inset
}

.gc-sidebar-panel {
    overflow-x: hidden
}

.gc-sidebar-panel--fill-container {
    overflow: hidden;
    height: 100%
}

.gc-sidebar-panel--notifications > .gc-notification-details {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%
}

    .gc-sidebar-panel--notifications > .gc-notification-details .gc-notification-details__content {
        flex: 1 0 auto;
        padding-bottom: 0;
        order: 2
    }

    .gc-sidebar-panel--notifications > .gc-notification-details .gc-notification-details__action {
        padding-bottom: var(--cui-padding-sm);
        order: 1
    }

.gc-sidebar-panel__placeholder {
    padding: var(--cui-padding);
    text-align: center;
    color: var(--cui-text-semi-60);
    font-size: var(--cui-text-size);
    line-height: var(--cui-block-size-sm)
}

.gc-sidebar__toggle-area {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: var(--cui-padding);
    height: 100%
}

    .gc-sidebar__toggle-area:hover .gc-sidebar__toggle-area-button {
        opacity: 1
    }

.gc-sidebar__toggle-area-button {
    position: absolute;
    top: calc(50% - 36px/2);
    left: 0;
    width: 100%;
    height: 36px;
    cursor: pointer;
    transition: opacity .2s ease-in-out;
    opacity: 0;
    border: none;
    outline: none;
    background: none
}

    .gc-sidebar__toggle-area-button:before, .gc-sidebar__toggle-area-button:after {
        position: absolute;
        left: 50%;
        width: 2px;
        height: 8px;
        content: "";
        transition: transform .2s ease-in-out,opacity .3s ease-in-out;
        transform: rotate(0deg);
        background-color: var(--cui-primary-500)
    }

    .gc-sidebar__toggle-area-button:before {
        top: 10px;
        transform-origin: 1px 7px
    }

    .gc-sidebar__toggle-area-button:after {
        top: 16px;
        transform-origin: 1px 1px
    }

    .gc-sidebar__toggle-area-button:hover:before {
        transform: rotate(-40deg)
    }

    .gc-sidebar__toggle-area-button:hover:after {
        transform: rotate(40deg)
    }

    .gc-sidebar__toggle-area-button:hover + .gc-sidebar__toggle-area-bar {
        transform: scaleY(1)
    }

.gc-sidebar__toggle-area-bar {
    position: absolute;
    top: 0;
    left: -2px;
    width: 2px;
    height: calc(100% - var(--cui-padding));
    margin: calc(var(--cui-padding)*.5) 0;
    transition: transform .2s ease-in-out;
    transform: scaleY(0);
    transform-origin: center;
    pointer-events: none;
    background-color: var(--cui-primary-500)
}

@media(any-hover: none) {
    .gc-sidebar--collapsed .gc-sidebar__toggle-area-button:hover:before {
        transform: none
    }

    .gc-sidebar--collapsed .gc-sidebar__toggle-area-button:hover:after {
        transform: none
    }

    .gc-sidebar__toggle-area:hover .gc-sidebar__toggle-area-button {
        opacity: 0
    }

    .gc-sidebar__toggle-area-button:hover:before {
        transform: none
    }

    .gc-sidebar__toggle-area-button:hover:after {
        transform: none
    }

    .gc-sidebar__toggle-area-button:hover + .gc-sidebar__toggle-area-bar {
        transform: none
    }
}

.gc-combo {
    position: relative;
    display: inline-block;
    width: auto;
    height: 40px;
    vertical-align: top;
    color: #333;
    font-size: 12px
}

    .gc-combo *, .gc-combo *:before, .gc-combo *:after {
        box-sizing: border-box
    }

    .gc-combo > .gc-input {
        width: 100%;
        text-overflow: ellipsis
    }

    .gc-combo:not([class^=gc-size]) > .gc-input {
        padding-right: 40px
    }

.gc-combo--block {
    display: block
}

.gc-combo--with-preview:not([class^=gc-size]) > .gc-input {
    padding-left: var(--cui-block-size)
}

.gc-combo--with-preview.gc-size-sm > .gc-input {
    padding-left: var(--cui-block-size-sm)
}

.gc-combo--with-preview.gc-size-sm > .gc-combo__preview {
    width: var(--cui-block-size-sm)
}

.gc-combo--with-preview.gc-size-lg > .gc-input {
    padding-left: var(--cui-block-size-lg)
}

.gc-combo--with-preview.gc-size-lg > .gc-combo__preview {
    width: var(--cui-block-size-lg)
}

.gc-combo--disabled .gc-combo__preview {
    opacity: .38
}

.gc-combo--value-placeholder:not(.gc-combo--focused-input) > .gc-input::placeholder {
    color: var(--cui-text-color) !important
}

.gc-combo__preview {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: var(--cui-block-size);
    height: 100%;
    padding: var(--cui-padding-xs);
    pointer-events: none;
    justify-content: center;
    align-items: center
}

.gc-combo .gc-dd {
    position: absolute;
    top: 0;
    right: 0
}

    .gc-combo .gc-dd > .gc-btn {
        width: 40px;
        min-width: auto;
        background: rgba(0,0,0,0)
    }

    .gc-combo .gc-dd > .gc-dd__chevron {
        width: 40px
    }

.gc-combo.gc-size-sm > .gc-input {
    padding-right: 30px
}

.gc-combo.gc-size-sm .gc-dd > .gc-btn {
    width: 30px
}

.gc-combo.gc-size-sm .gc-dd > .gc-dd__chevron {
    width: 30px
}

.gc-combo.gc-size-lg > .gc-input {
    padding-right: 50px
}

.gc-combo.gc-size-lg .gc-dd > .gc-btn {
    width: 50px
}

.gc-combo.gc-size-lg .gc-dd > .gc-dd__chevron {
    width: 50px
}

.gc-modal {
    --cui-modal-width: 600px;
    --cui-modal-icon-offset: calc((var(--cui-block-size) - var(--cui-icon-size)) * 0.5);
    --cui-block-size-padding: calc(var(--cui-block-size) + var(--cui-padding-sm) * 2);
    padding: 0;
    border: none;
    margin: 0;
    overflow: visible;
    display: block;
    max-width: unset;
    max-height: unset;
    color: var(--cui-text-color)
}

    .gc-modal::backdrop {
        background-color: var(--cui-overlay)
    }

.gc-modal--ff-esr::backdrop {
    background-color: rgba(0,0,0,.15)
}

.gc-modal--default {
    position: absolute;
    height: fit-content;
    max-height: max-content;
    width: var(--cui-modal-width);
    border-radius: var(--cui-border-radius);
    outline: none;
    background-color: var(--cui-bg-panels);
    box-shadow: var(--cui-shadow-menu)
}

.gc-modal.gc-rounded {
    border-radius: var(--cui-rounded-radius)
}

    .gc-modal.gc-rounded .gc-modal__header {
        border-radius: var(--cui-rounded-radius) var(--cui-rounded-radius) 0 0
    }

    .gc-modal.gc-rounded .gc-modal__footer {
        border-radius: 0 0 var(--cui-rounded-radius) var(--cui-rounded-radius)
    }

    .gc-modal.gc-rounded .gc-modal__resize-handle-wrapper {
        padding-right: var(--cui-padding-xs);
        padding-bottom: var(--cui-padding-xs)
    }

    .gc-modal.gc-rounded .gc-modal__resize-handle {
        width: 12px;
        height: 12px;
        border-radius: 0 0 17px 0
    }

.gc-modal--level-warning .gc-modal__header {
    background-color: var(--cui-warning-500)
}

.gc-modal--level-warning .gc-modal__close-btn:not([disabled]):not(.gc-btn--disabled):hover {
    background-color: var(--cui-warning-700)
}

.gc-modal--level-error .gc-modal__header {
    background-color: var(--cui-error-500)
}

.gc-modal--level-error .gc-modal__close-btn:not([disabled]):not(.gc-btn--disabled):hover {
    background-color: var(--cui-error-700)
}

.gc-modal--with-icon .gc-modal__header:not(.gc-modal__header--centered-title) {
    padding-left: calc(var(--cui-padding-sm) + var(--cui-modal-icon-offset) + var(--cui-icon-size) + var(--cui-padding))
}

.gc-modal__parent-container {
    display: grid;
    grid-template-rows: min-content 1fr min-content;
    overflow: auto;
    width: 100%;
    min-height: 100%
}

.gc-modal__header {
    display: grid;
    min-height: var(--cui-block-size-padding);
    padding: var(--cui-padding-sm) var(--cui-padding-sm) var(--cui-padding-sm) var(--cui-padding);
    color: var(--cui-contrast-text);
    border-radius: var(--cui-border-radius) var(--cui-border-radius) 0 0;
    background-color: var(--cui-primary-500);
    align-items: center;
    grid-template-areas: "title title btn";
    grid-template-columns: var(--cui-block-size-padding) auto var(--cui-block-size-padding)
}

.gc-modal__header--centered-title {
    position: relative;
    min-height: var(--cui-block-size-padding);
    padding-right: var(--cui-padding-sm);
    grid-template-areas: ". title btn";
    grid-auto-columns: auto var(--cui-block-size)
}

    .gc-modal__header--centered-title > .gc-modal__title-box {
        text-align: center
    }

.gc-modal__icon {
    position: absolute;
    top: var(--cui-padding-sm);
    left: calc(var(--cui-padding-sm) + var(--cui-modal-icon-offset));
    display: flex;
    height: var(--cui-block-size);
    align-items: center
}

.gc-modal__title-box {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    grid-area: title
}

.gc-modal__title {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    font-weight: normal;
    line-height: 20px
}

.gc-modal__subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--cui-contrast-text-semi-40);
    font-size: var(--cui-text-size-lg);
    font-style: italic
}

.gc-modal__close-btn {
    margin: 0 0 auto auto;
    grid-area: btn
}

    .gc-modal__close-btn:not([disabled]):not(.gc-btn--disabled):hover {
        background-color: var(--cui-primary-700)
    }

.gc-modal__message {
    padding: var(--cui-padding) var(--cui-padding) var(--cui-padding-sm);
    overflow-wrap: anywhere;
    font-size: var(--cui-text-size-lg)
}

.gc-modal__content {
    display: flex;
    flex-direction: column
}

.gc-modal__footer {
    position: relative;
    display: flex;
    padding: var(--cui-padding-sm);
    border-radius: 0 0 var(--cui-border-radius) var(--cui-border-radius);
    background-color: var(--cui-bg-body);
    align-items: center;
    justify-content: flex-end
}

    .gc-modal__footer > .gc-btn, .gc-modal__footer .gc-btn-group {
        min-width: 100px
    }

        .gc-modal__footer > .gc-btn + .gc-btn, .gc-modal__footer > .gc-btn .gc-btn-group, .gc-modal__footer .gc-btn-group + .gc-btn, .gc-modal__footer .gc-btn-group .gc-btn-group {
            margin-left: 15px
        }

    .gc-modal__footer > .gc-btn {
        text-align: center
    }

    .gc-modal__footer > .gc-btn-group .gc-btn {
        width: 100%;
        text-align: center
    }

.gc-modal__footer--align-left {
    justify-content: flex-start
}

.gc-modal__footer--align-center {
    justify-content: center
}

.gc-modal__footer--align-spread {
    justify-content: space-between
}

.gc-modal__right-control {
    margin-left: auto !important
}

.gc-modal__resize-handle-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 3px
}

.gc-modal__resize-handle {
    width: 9px;
    height: 9px;
    transition: border-color 200ms;
    border-right: 2px dotted #acacac;
    border-bottom: 2px dotted #acacac
}

.gc-modal__resize-handle-wrapper:hover .gc-modal__resize-handle {
    border-right: 2px solid var(--cui-primary-500);
    border-bottom: 2px solid var(--cui-primary-500)
}

.gc-message-box.gc-modal--with-icon .gc-modal__header:not(.gc-modal__header--centered-title) {
    padding-left: calc(var(--cui-icon-size)*.5 + var(--cui-icon-size) + var(--cui-padding))
}

.gc-message-box .gc-modal__header {
    position: relative;
    min-height: auto;
    padding: 0
}

.gc-message-box .gc-modal__header--centered-title {
    min-height: auto
}

.gc-message-box .gc-modal__header > .gc-modal__icon {
    top: 0;
    left: calc(var(--cui-icon-size)*.5)
}

.gc-message-box .gc-modal__header > .gc-modal__title-box {
    padding: var(--cui-padding-sm)
}

.gc-message-box .gc-modal__footer {
    background-color: rgba(0,0,0,0)
}

.gc-accent-color {
    color: var(--cui-primary-700)
}

.gc-accent-background {
    background-color: var(--cui-primary-500)
}

.gc-accent-fill {
    fill: var(--cui-primary-500)
}

.gc-secondary-accent-fill {
    fill: var(--cui-secondary-500)
}

.gc-contrast-fill {
    fill: var(--cui-white)
}

.gc-rounded, input[type=text].gc-rounded, input[type=password].gc-rounded, input[type=email].gc-rounded, input[type=url].gc-rounded, textarea.gc-rounded {
    border-radius: var(--cui-rounded-radius)
}

    .gc-rounded.gc-size-sm, input[type=text].gc-rounded.gc-size-sm, input[type=password].gc-rounded.gc-size-sm, input[type=email].gc-rounded.gc-size-sm, input[type=url].gc-rounded.gc-size-sm, textarea.gc-rounded.gc-size-sm {
        border-radius: var(--cui-rounded-radius-sm)
    }

    .gc-rounded.gc-size-lg, input[type=text].gc-rounded.gc-size-lg, input[type=password].gc-rounded.gc-size-lg, input[type=email].gc-rounded.gc-size-lg, input[type=url].gc-rounded.gc-size-lg, textarea.gc-rounded.gc-size-lg {
        border-radius: var(--cui-rounded-radius-lg)
    }

    .gc-rounded.gc-size-xl, input[type=text].gc-rounded.gc-size-xl, input[type=password].gc-rounded.gc-size-xl, input[type=email].gc-rounded.gc-size-xl, input[type=url].gc-rounded.gc-size-xl, textarea.gc-rounded.gc-size-xl {
        border-radius: var(--cui-rounded-radius-xl)
    }

.gc-size-sm {
    height: var(--cui-block-size-sm);
    line-height: var(--cui-block-size-sm)
}

.gc-size-lg {
    height: var(--cui-block-size-lg);
    line-height: var(--cui-block-size-lg)
}

.gc-size-xl {
    height: var(--cui-block-size-xl);
    line-height: var(--cui-block-size-xl)
}

.gc-dd-adjustment {
    transition-timing-function: ease-out;
    transition-duration: .15s;
    transition-property: left,right,top
}

.gc-property-grid {
    width: 100%;
    height: 100%;
    padding-top: var(--cui-padding)
}

    .gc-property-grid .gc-property-grid__header {
        position: relative;
        display: flex;
        margin: 0 var(--cui-padding) calc(var(--cui-padding-xs)*2);
        border-radius: var(--cui-border-radius);
        background-color: var(--cui-primary-500)
    }

        .gc-property-grid .gc-property-grid__header .gc-btn.gc-property-grid__button {
            width: 100%;
            padding: 0
        }

            .gc-property-grid .gc-property-grid__header .gc-btn.gc-property-grid__button > .gc-btn__text {
                width: 100%;
                padding: 0;
                transition: opacity .2s ease-in-out;
                text-align: center
            }

            .gc-property-grid .gc-property-grid__header .gc-btn.gc-property-grid__button > .gc-btn__icon {
                right: 0;
                left: auto
            }

        .gc-property-grid .gc-property-grid__header .gc-btn.gc-property-grid__button--search-mode {
            position: static;
            width: auto;
            min-width: var(--cui-block-size-xl);
            padding: 0 var(--cui-padding-sm);
            border-radius: var(--cui-border-radius) 0 0 var(--cui-border-radius)
        }

            .gc-property-grid .gc-property-grid__header .gc-btn.gc-property-grid__button--search-mode > .gc-btn__text {
                position: static;
                opacity: .5;
                color: var(--cui-contrast-text);
                font-size: var(--cui-text-size-sm)
            }

        .gc-property-grid .gc-property-grid__header > .gc-property-grid__button-back {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0
        }

        .gc-property-grid .gc-property-grid__header > .gc-dd {
            position: absolute;
            z-index: 1;
            top: 0;
            right: 0
        }

            .gc-property-grid .gc-property-grid__header > .gc-dd + .gc-btn {
                padding: 0 calc(var(--cui-block-size-sm)*2)
            }

                .gc-property-grid .gc-property-grid__header > .gc-dd + .gc-btn .gc-btn__icon {
                    right: var(--cui-block-size-sm)
                }

        .gc-property-grid .gc-property-grid__header .gc-btn > .gc-btn__icon {
            transition: color .2s ease-in-out,opacity .2s ease-in-out
        }

        .gc-property-grid .gc-property-grid__header .gc-btn:not(:hover) > .gc-btn__icon {
            opacity: .5;
            color: var(--cui-contrast-text)
        }

        .gc-property-grid .gc-property-grid__header > .gc-input {
            flex: 1 0 auto;
            padding-right: var(--cui-block-size-sm);
            text-overflow: ellipsis;
            color: var(--cui-contrast-text);
            border-radius: 0 var(--cui-border-radius) var(--cui-border-radius) 0;
            background-color: var(--cui-primary-500)
        }

            .gc-property-grid .gc-property-grid__header > .gc-input::placeholder {
                color: var(--cui-contrast-text-semi-40)
            }

            .gc-property-grid .gc-property-grid__header > .gc-input:focus, .gc-property-grid .gc-property-grid__header > .gc-input:hover {
                border-color: rgba(0,0,0,0) !important;
                background-color: var(--cui-primary-700) !important
            }

    .gc-property-grid .gc-property-grid__header--with-tabs:not([class*=search-view]) > .gc-tabs {
        display: flex;
        width: 0;
        padding-left: var(--cui-block-size-sm);
        order: 1;
        flex-grow: 1
    }

        .gc-property-grid .gc-property-grid__header--with-tabs:not([class*=search-view]) > .gc-tabs .gc-btn-group {
            flex: 1 1 auto;
            width: 0
        }

        .gc-property-grid .gc-property-grid__header--with-tabs:not([class*=search-view]) > .gc-tabs .gc-btn {
            flex: 1 1 auto;
            width: 50%
        }

            .gc-property-grid .gc-property-grid__header--with-tabs:not([class*=search-view]) > .gc-tabs .gc-btn:after {
                content: none
            }

    .gc-property-grid .gc-property-grid__header--with-tabs:not([class*=search-view]) > .gc-property-grid__button {
        width: auto;
        padding: 0 !important;
        order: 2
    }

        .gc-property-grid .gc-property-grid__header--with-tabs:not([class*=search-view]) > .gc-property-grid__button > .gc-btn__text {
            padding-left: var(--cui-block-size-sm)
        }

        .gc-property-grid .gc-property-grid__header--with-tabs:not([class*=search-view]) > .gc-property-grid__button > .gc-btn__icon {
            right: 0
        }

    .gc-property-grid .gc-property-grid__header--with-tabs:not([class*=search-view]) > .gc-dd {
        position: relative;
        order: 3
    }

    .gc-property-grid .gc-property-grid__container {
        height: calc(100% - (var(--cui-block-size-sm) + var(--cui-padding-xs)*2))
    }

    .gc-property-grid .gc-property-category {
        padding: 0 var(--cui-padding)
    }

.gc-property-list__placeholder {
    padding: var(--cui-padding);
    text-align: center;
    color: var(--cui-text-semi-60);
    font-size: var(--cui-text-size);
    line-height: var(--cui-block-size-sm)
}

.gc-property-grid .gc-property-list__placeholder {
    padding: 0 var(--cui-padding)
}

.gc-property-grid__container {
    overflow-x: hidden;
    height: 100%
}

.gc-property-category {
    display: block;
    margin: 0;
    padding: 0;
    border: none
}

    .gc-property-category .gc-label__content {
        overflow: hidden
    }

.gc-property-category__flex-container {
    display: flex;
    flex-direction: column;
    width: 100%
}

.gc-property-category__content:empty + .gc-property-category__title {
    display: none
}

.gc-property-category__title {
    order: 1
}

.gc-property-category__content {
    margin-bottom: var(--cui-padding-xs);
    order: 2
}

    .gc-property-category__content:empty {
        margin-bottom: 0
    }

    .gc-property-category__content > * {
        margin-bottom: var(--cui-padding-xs)
    }

.gc-property-category__content--collapsed {
    display: none
}

.gc-unknown-editor {
    height: var(--cui-block-size-sm);
    margin-bottom: var(--cui-padding-xs);
    color: var(--cui-text-semi-60);
    font-size: var(--cui-text-size);
    line-height: var(--cui-block-size-sm)
}

@media(any-hover: none) {
    .gc-property-grid .gc-property-grid__header .gc-btn:hover > .gc-btn__icon {
        opacity: .5;
        color: var(--cui-contrast-text)
    }

    .gc-property-grid .gc-property-grid__header > .gc-input:hover:not(:focus) {
        border-color: rgba(0,0,0,0) !important;
        background-color: var(--cui-primary-500) !important
    }
}

.gc-collection-editor {
    position: relative
}

.gc-collection-editor--dragging * {
    user-select: none
}

.gc-collection-editor--expanded {
    margin: var(--cui-border-width) calc(0px - var(--cui-padding)) var(--cui-padding);
    padding: 0 var(--cui-padding) var(--cui-padding) var(--cui-padding);
    outline: var(--cui-border-width) solid var(--cui-neutral-100)
}

    .gc-collection-editor--expanded::before {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: var(--cui-block-size-sm);
        content: "";
        background-color: var(--cui-neutral-50)
    }

.gc-collection-editor--disabled .gc-collection-editor__main > .gc-collection-editor__counter {
    color: var(--cui-neutral-300)
}

.gc-collection-editor--transparent {
    background-color: rgba(0,0,0,0)
}

    .gc-collection-editor--transparent:before {
        content: none
    }

.gc-collection-editor__item {
    display: flex
}

    .gc-collection-editor__item > *:not(.gc-collection-editor__item-actions) {
        width: 0;
        flex-grow: 1
    }

.gc-collection-editor__item-actions {
    display: flex;
    margin-right: var(--cui-padding-xs);
    flex-shrink: 0
}

    .gc-collection-editor__item-actions > .gc-btn + .gc-btn {
        margin-left: var(--cui-padding-xs)
    }

.gc-collection-editor__item + .gc-collection-editor__item {
    padding-top: var(--cui-padding-xs)
}

.gc-collection-editor__main {
    display: flex;
    justify-content: flex-end
}

    .gc-collection-editor__main > .gc-btn {
        flex-shrink: 0
    }

    .gc-collection-editor__main > * + * {
        margin-left: var(--cui-padding-xs)
    }

    .gc-collection-editor__main .gc-collection-editor__counter {
        display: block;
        overflow: hidden;
        flex: 1 1 auto;
        width: 0;
        height: var(--cui-block-size-sm);
        padding: 0 var(--cui-padding-sm);
        cursor: default;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--cui-text-semi-60);
        border-radius: var(--cui-border-radius);
        background-color: var(--cui-neutral-50);
        font-size: var(--cui-text-size);
        line-height: var(--cui-block-size-sm)
    }

.gc-collection-editor__arrows {
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--cui-block-size-sm);
    justify-content: center
}

    .gc-collection-editor__arrows > .gc-btn {
        position: absolute;
        width: 100%;
        height: calc(var(--cui-block-size-sm)*.5)
    }

        .gc-collection-editor__arrows > .gc-btn .gc-btn__text {
            height: 100%;
            padding: 0 !important
        }

        .gc-collection-editor__arrows > .gc-btn .gc-btn__icon {
            position: static;
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center
        }

    .gc-collection-editor__arrows .gc-collection-editor__arrow-up {
        top: 0;
        left: 0
    }

    .gc-collection-editor__arrows .gc-collection-editor__arrow-down {
        bottom: 0;
        left: 0
    }

    .gc-collection-editor__arrows + .gc-btn {
        margin-left: var(--cui-padding-xs)
    }

.gc-collection-editor__items {
    position: relative
}

    .gc-collection-editor__items:only-child {
        padding-top: var(--cui-padding)
    }

.gc-collection-editor__item--dragged {
    pointer-events: none;
    opacity: 0
}

.gc-collection-editor__clone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    box-shadow: var(--cui-prop-editors-drag-shadow)
}

    .gc-collection-editor__clone .gc-collection-editor__item {
        opacity: .8
    }

.gc-collection-editor__empty {
    display: flex;
    height: var(--cui-block-size-sm);
    margin-top: var(--cui-padding);
    color: var(--cui-text-semi-60);
    background-color: var(--cui-neutral-50);
    font-size: var(--cui-text-size);
    justify-content: center;
    align-items: center
}

.gc-collection-editor__header {
    overflow: hidden;
    margin: var(--cui-padding-xs) 0;
    text-overflow: ellipsis;
    font-size: var(--cui-text-size)
}

.gc-collection-editor__header--offset-1 {
    padding-left: calc(var(--cui-block-size-sm) + var(--cui-padding-xs))
}

.gc-collection-editor__header--offset-2 {
    padding-left: calc(var(--cui-block-size-sm)*2 + var(--cui-padding-xs)*2)
}

.gc-side-editor .gc-expand-editor__content {
    flex-direction: row;
    flex-wrap: wrap
}

.gc-side-editor--stretched .gc-side-editor__side:not([class*="--default"]) {
    width: calc(50% + var(--cui-padding))
}

.gc-side-editor--stretched .gc-side-editor__side--left, .gc-side-editor--stretched .gc-side-editor__side--right {
    margin-left: calc(0px - var(--cui-padding))
}

.gc-side-editor--stretched .gc-side-editor__side--top, .gc-side-editor--stretched .gc-side-editor__side--bottom {
    margin-right: calc(0px - var(--cui-padding))
}

.gc-side-editor__side {
    width: 50%
}

.gc-side-editor__side--default {
    width: 100%;
    order: 1
}

.gc-side-editor__side--left {
    order: 2
}

.gc-side-editor__side--top {
    order: 3
}

.gc-side-editor__side--right {
    order: 4
}

.gc-side-editor__side--bottom {
    order: 5
}

.gc-side-editor__side:not(.gc-side-editor__side--default) .gc-label {
    -ms-grid-columns: var(--cui-block-size-sm) minmax(0, 1fr);
    grid-template-columns: var(--cui-block-size-sm) minmax(0, 1fr)
}

.gc-binding-wrapper__content {
    flex: 1 1 auto;
    width: calc(100% - var(--cui-block-size-sm));
    max-width: calc(100% - var(--cui-block-size-sm))
}

.gc-binding-wrapper__toggle {
    width: var(--toggleSize);
    height: var(--toggleSize);
    margin: calc((var(--cui-block-size-sm) - var(--toggleSize))/2) auto;
    transition: background-color .2s ease-in-out,outline-color .2s ease-in-out;
    border-radius: var(--cui-border-radius);
    background-color: var(--cui-neutral-300);
    outline-offset: 2px;
    outline-width: 2px;
    outline-style: solid;
    outline-color: rgba(0,0,0,0)
}

.gc-binding-wrapper {
    display: flex;
    --toggleSize: 12px
}

    .gc-binding-wrapper > .gc-dd {
        flex: 0 0 auto;
        width: var(--cui-block-size-sm);
        min-width: var(--cui-block-size-sm)
    }

        .gc-binding-wrapper > .gc-dd > .gc-btn:hover:not(:disabled) {
            background-color: rgba(0,0,0,0)
        }

            .gc-binding-wrapper > .gc-dd > .gc-btn:hover:not(:disabled) .gc-binding-wrapper__toggle {
                outline-color: var(--cui-neutral-300)
            }

.gc-binding-wrapper--modified .gc-binding-wrapper__toggle {
    background-color: var(--cui-binding-modified)
}

.gc-binding-wrapper--modified > .gc-dd > .gc-btn:hover:not(:disabled) .gc-binding-wrapper__toggle {
    outline-color: var(--cui-binding-modified)
}

.gc-binding-wrapper--bind .gc-binding-wrapper__toggle {
    background-color: var(--cui-binding-bind)
}

.gc-binding-wrapper--bind > .gc-dd > .gc-btn:hover:not(:disabled) .gc-binding-wrapper__toggle {
    outline-color: var(--cui-binding-bind)
}

@media(any-hover: none) {
    .gc-binding-wrapper > .gc-dd > .gc-btn:hover .gc-binding-wrapper__toggle {
        outline-color: rgba(0,0,0,0)
    }

    .gc-binding-wrapper--modified > .gc-dd > .gc-btn:hover .gc-binding-wrapper__toggle, .gc-binding-wrapper--bind > .gc-dd > .gc-btn:hover .gc-binding-wrapper__toggle {
        outline-color: rgba(0,0,0,0)
    }
}

.gc-bool-editor {
    margin: 0 0 0 auto
}

.gc-label:not([class*="--position"]) .gc-bool-editor {
    margin: 0
}

.gc-number-editor {
    display: flex
}

    .gc-number-editor > .gc-btn {
        flex: 0 0 auto
    }

        .gc-number-editor > .gc-btn:first-of-type {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0
        }

        .gc-number-editor > .gc-btn:last-of-type {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0
        }

    .gc-number-editor > .gc-input {
        flex: 1 1 auto;
        border-radius: 0
    }

.gc-enum-editor .gc-btn__text {
    padding: 0 10px
}

.gc-enum-editor--empty .gc-btn__text {
    opacity: .38
}

.gc-color-palette {
    width: 100%
}

    .gc-color-palette *, .gc-color-palette *:before, .gc-color-palette *:after {
        box-sizing: border-box
    }

.gc-color-palette__colors {
    display: flex;
    width: 100%;
    padding: 0 calc(var(--cui-padding) - 5px);
    flex-wrap: wrap
}

.gc-color-palette__heading.gc-heading {
    padding: 0 var(--cui-padding);
    color: var(--cui-text-semi-60)
}

    .gc-color-palette__heading.gc-heading .gc-heading__divider {
        border-bottom: var(--cui-border-width) solid var(--cui-neutral-50)
    }

.gc-color {
    display: flex;
    flex: 0 0 auto;
    width: 50%;
    min-width: 50%;
    max-width: 50%;
    height: 20px;
    padding: 0 5px
}

.gc-color__main {
    position: relative;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: var(--cui-border-radius)
}

    .gc-color__main::after {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        content: "";
        transition: border-color .2s ease-in-out;
        border: var(--cui-border-width) solid var(--cui-overlay);
        border-radius: var(--cui-border-radius)
    }

    .gc-color__main:hover::after {
        border: var(--cui-border-width) solid rgba(0,0,0,.4)
    }

.gc-color__shades {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    height: 15px;
    border-radius: var(--cui-border-radius)
}

    .gc-color__shades::after {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        content: "";
        transition: border-color .2s ease-in-out;
        pointer-events: none;
        border: var(--cui-border-width) solid var(--cui-overlay);
        border-radius: var(--cui-border-radius)
    }

    .gc-color__shades > div {
        position: relative;
        flex: 1 1 auto;
        height: 100%
    }

        .gc-color__shades > div::after {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            content: "";
            transition: border-color .2s ease-in-out;
            border: var(--cui-border-width) solid rgba(0,0,0,0)
        }

        .gc-color__shades > div:first-of-type::after {
            border-top-left-radius: var(--cui-border-radius);
            border-bottom-left-radius: var(--cui-border-radius)
        }

        .gc-color__shades > div:last-of-type::after {
            border-top-right-radius: var(--cui-border-radius);
            border-bottom-right-radius: var(--cui-border-radius)
        }

        .gc-color__shades > div:hover::after {
            border: var(--cui-border-width) solid rgba(0,0,0,.4)
        }

.gc-color-picker {
    display: flex;
    flex-wrap: wrap
}

    .gc-color-picker *, .gc-color-picker *:before, .gc-color-picker *:after {
        box-sizing: border-box
    }

.gc-color-picker__preview {
    flex: 0 0 auto;
    width: calc(var(--cui-block-size-sm)*3);
    height: calc(var(--cui-block-size-sm)*3);
    margin-right: var(--cui-padding);
    border: 1px solid var(--cui-overlay);
    border-radius: var(--cui-border-radius)
}

    .gc-color-picker__preview:hover {
        border: 4px solid var(--cui-overlay)
    }

.gc-color-picker__settings {
    flex: 1 1 auto
}

    .gc-color-picker__settings > span {
        display: block;
        height: 15px;
        -webkit-user-select: none;
        user-select: none;
        font-size: var(--cui-text-size-sm);
        line-height: 15px
    }

.gc-color-picker__inputs {
    display: flex;
    width: 100%
}

.gc-color-picker__hex .gc-label, .gc-color-picker__rgb .gc-label {
    width: 100%
}

    .gc-color-picker__hex .gc-label .gc-label__label, .gc-color-picker__rgb .gc-label .gc-label__label {
        align-items: center
    }

.gc-color-picker__hex .gc-input, .gc-color-picker__rgb .gc-input {
    display: block;
    width: 100%
}

.gc-color-picker__hex {
    flex: 0 0 auto;
    width: calc(var(--cui-block-size-sm)*3);
    margin-right: var(--cui-padding)
}

.gc-color-picker__rgb {
    display: flex;
    flex: 1 1 auto;
    justify-content: space-between
}

    .gc-color-picker__rgb .gc-label {
        flex: 0 0 auto;
        width: calc(33.3% - 4px)
    }

.gc-color-picker__slider {
    border: 1px solid var(--cui-dd-divider)
}

.gc-color-dropdown {
    width: 300px;
    padding-bottom: var(--cui-padding)
}

    .gc-color-dropdown *, .gc-color-dropdown *:before, .gc-color-dropdown *:after {
        box-sizing: border-box
    }

    .gc-color-dropdown > .gc-btn-group {
        margin: var(--cui-padding);
        margin-bottom: calc(var(--cui-padding)/3)
    }

    .gc-color-dropdown > .gc-color-dropdown__web-colors {
        margin: var(--cui-padding);
        margin-bottom: 0
    }

        .gc-color-dropdown > .gc-color-dropdown__web-colors .gc-dd-menu__item--with-preview.gc-size-sm {
            padding: 0
        }

    .gc-color-dropdown > .gc-color-picker {
        margin: var(--cui-padding);
        margin-bottom: 0
    }

    .gc-color-dropdown > .gc-slider {
        margin: 0 var(--cui-padding)
    }

.gc-color-dropdown__web-color {
    width: 15px;
    height: 15px;
    border-radius: var(--cui-border-radius)
}

@media(any-hover: none) {
    .gc-color__main:hover::after {
        border: var(--cui-border-width) solid var(--cui-overlay)
    }

    .gc-color__shades > div:hover::after {
        border: var(--cui-border-width) solid rgba(0,0,0,0)
    }

    .gc-color-picker__preview:hover {
        border: 1px solid var(--cui-overlay)
    }
}

@keyframes cui_a_step_dot_appear {
    0% {
        opacity: 0;
        transform: scale(1) rotateY(-180deg)
    }

    50% {
        opacity: 1
    }

    62% {
        opacity: 1;
        transform: scale(1) rotateY(35deg)
    }

    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg)
    }
}

@keyframes cui_a_step_dot_disappear {
    0% {
        opacity: 1;
        transform: scale(1) rotateY(0deg)
    }

    50% {
        opacity: 0
    }

    62% {
        opacity: 0;
        transform: scale(1) rotateY(-215deg)
    }

    100% {
        opacity: 0;
        transform: scale(1) rotateY(-180deg)
    }
}

.cui-step {
    align-self: stretch;
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    font-size: var(--cui-text-size);
    border-radius: var(--cui-border-radius);
    user-select: none;
    z-index: 2
}

.cui-step--left {
    flex-direction: row-reverse;
    justify-content: flex-end
}

.cui-step--top, .cui-step--bottom {
    flex-direction: column;
    align-items: stretch
}

    .cui-step--top > .cui-step__decor, .cui-step--bottom > .cui-step__decor {
        margin: 0 auto
    }

.cui-step--top {
    flex-direction: column-reverse;
    justify-content: flex-end
}

.cui-step--neutral:is(.cui-step--inverted) {
    --cui-steps-background: var(--cui-neutral-500);
    --cui-step-background: var(--cui-neutral-inverted-400);
    --cui-step-background-semi: var(--cui-neutral-inverted-300);
    --cui-step-background-solid: var(--cui-neutral-inverted-200);
    --cui-step-outline: var(--cui-neutral-inverted-300);
    --cui-step-fill: var(--cui-white);
    --cui-step-color: var(--cui-white);
    --cui-step-color-details: var(--cui-neutral-inverted-300);
    --cui-step-dot-color: var(--cui-white);
    --cui-step-dot-color-complete: var(--cui-neutral-500)
}

.cui-step--primary:not(.cui-step--inverted) {
    --cui-step-background: var(--cui-primary-50);
    --cui-step-background-semi: var(--cui-primary-100);
    --cui-step-background-solid: var(--cui-primary-200);
    --cui-step-outline: var(--cui-primary-300);
    --cui-step-fill: var(--cui-primary-500);
    --cui-step-color: var(--cui-primary-700);
    --cui-step-color-details: var(--cui-primary-400);
    --cui-step-dot-color: var(--cui-primary-700);
    --cui-step-dot-color-complete: var(--cui-white)
}

.cui-step--primary:is(.cui-step--inverted) {
    --cui-steps-background: var(--cui-primary-500);
    --cui-step-background: var(--cui-primary-inverted-400);
    --cui-step-background-semi: var(--cui-primary-inverted-300);
    --cui-step-background-solid: var(--cui-primary-inverted-200);
    --cui-step-outline: var(--cui-primary-inverted-300);
    --cui-step-fill: var(--cui-white);
    --cui-step-color: var(--cui-white);
    --cui-step-color-details: var(--cui-primary-inverted-300);
    --cui-step-dot-color: var(--cui-white);
    --cui-step-dot-color-complete: var(--cui-primary-500)
}

.cui-step--warning:not(.cui-step--inverted) {
    --cui-step-background: var(--cui-warning-50);
    --cui-step-background-semi: var(--cui-warning-100);
    --cui-step-background-solid: var(--cui-warning-200);
    --cui-step-outline: var(--cui-warning-300);
    --cui-step-fill: var(--cui-warning-500);
    --cui-step-color: var(--cui-warning-700);
    --cui-step-color-details: var(--cui-warning-400);
    --cui-step-dot-color: var(--cui-warning-700);
    --cui-step-dot-color-complete: var(--cui-white)
}

.cui-step--warning:is(.cui-step--inverted) {
    --cui-steps-background: var(--cui-warning-500);
    --cui-step-background: var(--cui-warning-inverted-400);
    --cui-step-background-semi: var(--cui-warning-inverted-300);
    --cui-step-background-solid: var(--cui-warning-inverted-200);
    --cui-step-outline: var(--cui-warning-inverted-300);
    --cui-step-fill: var(--cui-white);
    --cui-step-color: var(--cui-white);
    --cui-step-color-details: var(--cui-warning-inverted-300);
    --cui-step-dot-color: var(--cui-white);
    --cui-step-dot-color-complete: var(--cui-warning-500)
}

.cui-step--error:not(.cui-step--inverted) {
    --cui-step-background: var(--cui-error-50);
    --cui-step-background-semi: var(--cui-error-100);
    --cui-step-background-solid: var(--cui-error-200);
    --cui-step-outline: var(--cui-error-300);
    --cui-step-fill: var(--cui-error-500);
    --cui-step-color: var(--cui-error-700);
    --cui-step-color-details: var(--cui-error-400);
    --cui-step-dot-color: var(--cui-error-700);
    --cui-step-dot-color-complete: var(--cui-white)
}

.cui-step--error:is(.cui-step--inverted) {
    --cui-steps-background: var(--cui-error-500);
    --cui-step-background: var(--cui-error-inverted-400);
    --cui-step-background-semi: var(--cui-error-inverted-300);
    --cui-step-background-solid: var(--cui-error-inverted-200);
    --cui-step-outline: var(--cui-error-inverted-300);
    --cui-step-fill: var(--cui-white);
    --cui-step-color: var(--cui-white);
    --cui-step-color-details: var(--cui-error-inverted-300);
    --cui-step-dot-color: var(--cui-white);
    --cui-step-dot-color-complete: var(--cui-error-500)
}

button.cui-step {
    margin: 0;
    padding: 0;
    text-align: left;
    background: none;
    border: none
}

    button.cui-step:hover, button.cui-step:focus-visible {
        outline: none
    }

        button.cui-step:hover .cui-step__decor > div, button.cui-step:focus-visible .cui-step__decor > div {
            box-shadow: 0 0 0 2px var(--cui-steps-background),0 0 0 4px var(--cui-step-fill)
        }

.cui-step__decor {
    flex: 0 0 var(--cui-block-size-lg);
    width: var(--cui-block-size-lg);
    height: var(--cui-block-size-lg);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center center
}

    .cui-step__decor > div {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--cui-block-size-sm);
        height: var(--cui-block-size-sm);
        border-radius: 50%;
        line-height: .9;
        background-color: var(--cui-step-background);
        color: var(--cui-step-dot-color);
        outline: 1px solid var(--cui-step-background);
        outline-offset: -1px;
        transition: outline .2s ease-in-out,background-color .4s ease-in-out,color .4s ease-in-out,box-shadow .2s ease-in-out
    }

    .cui-step__decor > [data-complete] {
        color: var(--cui-step-dot-color-complete);
        background-color: var(--cui-step-fill);
        outline-color: var(--cui-step-fill)
    }

.cui-step__decor--current > [data-default] {
    outline-color: var(--cui-step-fill);
    outline-width: 2px;
    outline-offset: -2px
}

.cui-step__decor--default > [data-default], .cui-step__decor--current > [data-default] {
    opacity: 1
}

.cui-step__decor--default > [data-complete], .cui-step__decor--current > [data-complete] {
    opacity: 0
}

.cui-step__decor--complete > [data-default] {
    opacity: 0
}

.cui-step__decor--complete > [data-complete] {
    opacity: 1
}

.cui-step__decor--to-default > [data-default] {
    animation: cui_a_step_dot_appear .4s ease-in-out
}

.cui-step__decor--to-default > [data-complete] {
    animation: cui_a_step_dot_disappear .4s ease-in-out
}

.cui-step__decor--to-complete > [data-default] {
    animation: cui_a_step_dot_disappear .4s ease-in-out
}

.cui-step__decor--to-complete > [data-complete] {
    animation: cui_a_step_dot_appear .4s ease-in-out
}

.cui-step__text {
    display: flex;
    background-color: var(--cui-steps-background);
    flex: 1 1 minmax(auto, 100%);
    flex-direction: column;
    overflow: hidden;
    padding: 0 var(--cui-padding-sm);
    border-radius: var(--cui-border-radius);
    justify-content: center;
    align-items: flex-start;
    color: var(--cui-step-color)
}

.cui-step__text--reverse {
    flex-direction: column-reverse
}

.cui-step__text > span {
    flex: 0 0 auto;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.cui-step__text > [data-details] {
    color: var(--cui-step-color-details)
}

.cui-step__text--left {
    text-align: right
}

.cui-step__text--top, .cui-step__text--bottom {
    text-align: center
}

.cui-steps {
    display: grid;
    --cui-steps-background: var(--cui-bg-panels);
    --cui-step-background: var(--cui-neutral-50);
    --cui-step-background-semi: var(--cui-neutral-100);
    --cui-step-background-solid: var(--cui-neutral-200);
    --cui-step-outline: var(--cui-neutral-300);
    --cui-step-fill: var(--cui-neutral-500);
    --cui-step-color: var(--cui-neutral-700);
    --cui-step-color-details: var(--cui-neutral-400);
    --cui-step-dot-color: var(--cui-neutral-700);
    --cui-step-dot-color-complete: var(--cui-white)
}

    .cui-steps .indicator_dummy, .cui-steps .indicator {
        border-radius: var(--cui-border-radius);
        align-self: center;
        justify-self: stretch
    }

    .cui-steps .indicator_dummy {
        background-color: var(--cui-step-background);
        outline: 1px solid var(--cui-step-background)
    }

    .cui-steps .indicator {
        background-color: var(--cui-step-fill);
        transition: all .4s ease-in-out
    }

.cui-steps--vertical .indicator_dummy, .cui-steps--vertical .indicator {
    align-self: stretch;
    justify-self: center
}

.cui-steps--outlined .indicator_dummy {
    background-color: var(--cui-step-background);
    outline: 1px solid var(--cui-step-outline)
}

.cui-steps--outlined .cui-step__decor > div {
    outline-color: var(--cui-step-outline);
    background-color: var(--cui-step-background)
}

.cui-steps--outlined .cui-step__decor--current > [data-default] {
    outline-color: var(--cui-step-fill)
}

.cui-steps--outlined .cui-step__decor > [data-complete] {
    background-color: var(--cui-step-fill);
    outline-color: var(--cui-step-fill)
}

.cui-steps--semi .indicator_dummy {
    background-color: var(--cui-step-background-semi);
    outline: 1px solid var(--cui-step-background-semi)
}

.cui-steps--semi .cui-step__decor > div {
    background-color: var(--cui-step-background-semi);
    outline-color: var(--cui-step-background-semi)
}

.cui-steps--semi .cui-step__decor--current > [data-default] {
    outline-color: var(--cui-step-fill)
}

.cui-steps--semi .cui-step__decor > [data-complete] {
    background-color: var(--cui-step-fill);
    outline-color: var(--cui-step-fill)
}

.cui-steps--solid .indicator_dummy {
    background-color: var(--cui-step-background-solid);
    outline: 1px solid var(--cui-step-background-solid)
}

.cui-steps--solid .cui-step__decor > div {
    background-color: var(--cui-step-background-solid);
    outline-color: var(--cui-step-background-solid)
}

.cui-steps--solid .cui-step__decor--current > [data-default] {
    outline-color: var(--cui-step-fill)
}

.cui-steps--solid .cui-step__decor > [data-complete] {
    background-color: var(--cui-step-fill);
    outline-color: var(--cui-step-fill)
}

.cui-steps--neutral:is(.cui-steps--inverted) {
    --cui-steps-background: var(--cui-neutral-500);
    --cui-step-background: var(--cui-neutral-inverted-400);
    --cui-step-background-semi: var(--cui-neutral-inverted-300);
    --cui-step-background-solid: var(--cui-neutral-inverted-200);
    --cui-step-outline: var(--cui-neutral-inverted-300);
    --cui-step-fill: var(--cui-white);
    --cui-step-color: var(--cui-white);
    --cui-step-color-details: var(--cui-neutral-inverted-300);
    --cui-step-dot-color: var(--cui-white);
    --cui-step-dot-color-complete: var(--cui-neutral-500)
}

.cui-steps--primary:not(.cui-steps--inverted) {
    --cui-step-background: var(--cui-primary-50);
    --cui-step-background-semi: var(--cui-primary-100);
    --cui-step-background-solid: var(--cui-primary-200);
    --cui-step-outline: var(--cui-primary-300);
    --cui-step-fill: var(--cui-primary-500);
    --cui-step-color: var(--cui-primary-700);
    --cui-step-color-details: var(--cui-primary-400);
    --cui-step-dot-color: var(--cui-primary-700);
    --cui-step-dot-color-complete: var(--cui-white)
}

.cui-steps--primary:is(.cui-steps--inverted) {
    --cui-steps-background: var(--cui-primary-500);
    --cui-step-background: var(--cui-primary-inverted-400);
    --cui-step-background-semi: var(--cui-primary-inverted-300);
    --cui-step-background-solid: var(--cui-primary-inverted-200);
    --cui-step-outline: var(--cui-primary-inverted-300);
    --cui-step-fill: var(--cui-white);
    --cui-step-color: var(--cui-white);
    --cui-step-color-details: var(--cui-primary-inverted-300);
    --cui-step-dot-color: var(--cui-white);
    --cui-step-dot-color-complete: var(--cui-primary-500)
}

.cui-steps--warning:not(.cui-steps--inverted) {
    --cui-step-background: var(--cui-warning-50);
    --cui-step-background-semi: var(--cui-warning-100);
    --cui-step-background-solid: var(--cui-warning-200);
    --cui-step-outline: var(--cui-warning-300);
    --cui-step-fill: var(--cui-warning-500);
    --cui-step-color: var(--cui-warning-700);
    --cui-step-color-details: var(--cui-warning-400);
    --cui-step-dot-color: var(--cui-warning-700);
    --cui-step-dot-color-complete: var(--cui-white)
}

.cui-steps--warning:is(.cui-steps--inverted) {
    --cui-steps-background: var(--cui-warning-500);
    --cui-step-background: var(--cui-warning-inverted-400);
    --cui-step-background-semi: var(--cui-warning-inverted-300);
    --cui-step-background-solid: var(--cui-warning-inverted-200);
    --cui-step-outline: var(--cui-warning-inverted-300);
    --cui-step-fill: var(--cui-white);
    --cui-step-color: var(--cui-white);
    --cui-step-color-details: var(--cui-warning-inverted-300);
    --cui-step-dot-color: var(--cui-white);
    --cui-step-dot-color-complete: var(--cui-warning-500)
}

.cui-steps--error:not(.cui-steps--inverted) {
    --cui-step-background: var(--cui-error-50);
    --cui-step-background-semi: var(--cui-error-100);
    --cui-step-background-solid: var(--cui-error-200);
    --cui-step-outline: var(--cui-error-300);
    --cui-step-fill: var(--cui-error-500);
    --cui-step-color: var(--cui-error-700);
    --cui-step-color-details: var(--cui-error-400);
    --cui-step-dot-color: var(--cui-error-700);
    --cui-step-dot-color-complete: var(--cui-white)
}

.cui-steps--error:is(.cui-steps--inverted) {
    --cui-steps-background: var(--cui-error-500);
    --cui-step-background: var(--cui-error-inverted-400);
    --cui-step-background-semi: var(--cui-error-inverted-300);
    --cui-step-background-solid: var(--cui-error-inverted-200);
    --cui-step-outline: var(--cui-error-inverted-300);
    --cui-step-fill: var(--cui-white);
    --cui-step-color: var(--cui-white);
    --cui-step-color-details: var(--cui-error-inverted-300);
    --cui-step-dot-color: var(--cui-white);
    --cui-step-dot-color-complete: var(--cui-error-500)
}

@keyframes gc-progress-animation {
    0% {
        left: -40px;
        width: 40px
    }

    50% {
        width: 300px
    }

    100% {
        left: 100%;
        width: 40px
    }
}

.gc-progress {
    display: block;
    overflow: hidden;
    height: 20px;
    border-radius: var(--cui-border-radius);
    background-color: var(--cui-progressbar-bg);
    line-height: 20px
}

.gc-progress--inline {
    display: inline-block
}

.gc-progress--semi-transparent {
    background-color: var(--cui-progressbar-bg-semi)
}

.gc-progress--transparent {
    background-color: rgba(0,0,0,0)
}

.gc-progress--accent > .gc-progress__fill {
    background-color: var(--cui-primary-500)
}

.gc-progress--accent > .gc-progress__value {
    color: var(--cui-contrast-text)
}

.gc-progress--pause-error > .gc-progress__fill {
    background-color: var(--cui-error-500)
}

.gc-progress--pause-error > .gc-progress__value {
    color: var(--cui-contrast-text)
}

.gc-progress--pause-warning > .gc-progress__fill {
    background-color: var(--cui-warning-500)
}

.gc-progress--pause-warning > .gc-progress__value {
    color: var(--cui-contrast-text)
}

.gc-progress--indeterminate {
    position: relative
}

    .gc-progress--indeterminate > .gc-progress__fill {
        position: absolute;
        top: 0;
        animation-name: gc-progress-animation;
        animation-duration: 1.6s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite
    }

    .gc-progress--indeterminate.gc-progress--pause-error > .gc-progress__fill {
        animation-play-state: paused
    }

    .gc-progress--indeterminate.gc-progress--pause-warning > .gc-progress__fill {
        animation-play-state: paused
    }

.gc-progress.gc-size-sm {
    height: 2px
}

.gc-progress.gc-size-lg {
    height: 40px;
    line-height: 40px
}

.gc-progress__fill {
    overflow: visible;
    height: 100%;
    transition: width .2s ease-in-out;
    text-align: center;
    background-color: var(--cui-progress-fill-color)
}

.gc-progress__value {
    display: block;
    height: 100%;
    color: var(--cui-progress-value-color);
    font-size: var(--cui-text-size-sm)
}

.gc-slider {
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    display: block;
    transition: opacity .2s ease-in-out
}

    .gc-slider *, .gc-slider *:before, .gc-slider *:after {
        box-sizing: border-box
    }

.gc-slider--mode-X {
    width: auto;
    height: calc(var(--cui-block-size-sm)*.5)
}

    .gc-slider--mode-X .gc-slider__background {
        top: 4px;
        height: calc(100% - 8px)
    }

.gc-slider--mode-Y {
    width: calc(var(--cui-block-size-sm)*.5);
    height: calc(var(--cui-block-size-sm)*5)
}

    .gc-slider--mode-Y .gc-slider__background {
        left: 4px;
        width: calc(100% - 8px)
    }

.gc-slider--mode-XY {
    width: calc(var(--cui-block-size-sm)*5);
    height: calc(var(--cui-block-size-sm)*5)
}

.gc-slider:hover .gc-slider__toggle:after {
    opacity: 1
}

.gc-slider--disabled {
    pointer-events: none;
    opacity: .62
}

    .gc-slider--disabled .gc-slider__fill {
        opacity: 0 !important
    }

.gc-slider--invalid .gc-slider__toggle {
    background-color: var(--cui-error-500)
}

.gc-slider--invalid .gc-slider__background {
    background-color: var(--cui-accent-error-semi-40)
}

.gc-slider--invalid .gc-slider__fill {
    opacity: 0 !important
}

.gc-slider__area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.gc-slider__fill {
    position: absolute;
    transition: opacity .2s ease-in-out;
    background-color: var(--cui-primary-500)
}

.gc-slider__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: background-color .2s ease-in-out;
    border-radius: var(--cui-border-radius);
    background-color: var(--cui-neutral-50)
}

.gc-slider__toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--cui-block-size-sm)*.5);
    height: calc(var(--cui-block-size-sm)*.5);
    transition: background-color .2s ease-in-out;
    transform: translateX(-50%) translateY(-50%);
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: var(--cui-primary-500);
    box-shadow: var(--cui-shadow-border)
}

    .gc-slider__toggle[class*="--tooltip"]:after {
        position: absolute;
        padding: 5px;
        content: attr(data-value);
        transition: opacity .2s ease-in-out;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        color: var(--cui-text-color);
        border-radius: var(--cui-border-radius);
        background-color: var(--cui-white);
        box-shadow: 0 0 5px -1px rgba(0,0,0,.1);
        font-family: var(--cui-text-family);
        font-size: var(--cui-text-size);
        line-height: 1
    }

.gc-slider__toggle--tooltip-top:after {
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -8px)
}

.gc-slider__toggle--tooltip-bottom:after {
    top: 100%;
    left: 50%;
    transform: translate(-50%, 8px)
}

.gc-slider__toggle--tooltip-right:after {
    top: 50%;
    left: 100%;
    transform: translate(8px, -50%)
}

.gc-slider__toggle--tooltip-left:after {
    top: 50%;
    right: 100%;
    transform: translate(-8px, -50%)
}

.gc-slider__toggle:active {
    z-index: 1
}

    .gc-slider__toggle:active:after {
        opacity: 1
    }

@media(any-hover: none) {
    .gc-slider:hover .gc-slider__toggle:after {
        opacity: 0
    }
}

.gc-text-editor {
    position: relative
}

.gc-text-editor__preview {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: var(--cui-block-size-sm);
    height: 100%;
    padding: var(--cui-padding-xs);
    pointer-events: none;
    justify-content: center;
    align-items: center
}

    .gc-text-editor__preview + .gc-input {
        padding-left: var(--cui-block-size-sm) !important
    }

.gc-expand-editor--expanded {
    position: relative;
    margin: var(--cui-border-width) calc(0px - var(--cui-padding)) var(--cui-padding);
    padding: 0 var(--cui-padding);
    outline: var(--cui-border-width) solid var(--cui-neutral-100)
}

    .gc-expand-editor--expanded > .gc-expand-editor__main {
        margin-bottom: var(--cui-padding-xs)
    }

    .gc-expand-editor--expanded:before {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: var(--cui-block-size-sm);
        content: "";
        background-color: var(--cui-neutral-50)
    }

.gc-expand-editor--transparent {
    background-color: rgba(0,0,0,0)
}

    .gc-expand-editor--transparent:before {
        content: none
    }

.gc-expand-editor__main {
    position: relative
}

    .gc-expand-editor__main > .gc-label > .gc-label__content {
        padding-right: var(--cui-block-size-sm)
    }

        .gc-expand-editor__main > .gc-label > .gc-label__content > *:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0
        }

.gc-expand-editor__toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--cui-block-size-sm);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.gc-expand-editor__content {
    display: flex;
    flex-direction: column
}

    .gc-expand-editor__content > * {
        margin-bottom: var(--cui-padding-xs)
    }

@keyframes gc-badge-show {
    0% {
        transform: scale(1) rotateX(90deg)
    }

    60% {
        transform: scale(1) rotateX(0)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes gc-badge-show-top-left {
    0% {
        transform: scale(1) rotateX(90deg) translate(-25%, -25%)
    }

    60% {
        transform: scale(1) rotateX(0) translate(-25%, -25%)
    }

    100% {
        transform: scale(1) translate(-25%, -25%)
    }
}

@keyframes gc-badge-show-top-right {
    0% {
        transform: scale(1) rotateX(90deg) translate(25%, -25%)
    }

    60% {
        transform: scale(1) rotateX(0) translate(25%, -25%)
    }

    100% {
        transform: scale(1) translate(25%, -25%)
    }
}

@keyframes gc-badge-show-bottom-left {
    0% {
        transform: scale(1) rotateX(90deg) translate(-25%, 25%)
    }

    60% {
        transform: scale(1) rotateX(0) translate(-25%, 25%)
    }

    100% {
        transform: scale(1) translate(-25%, 25%)
    }
}

@keyframes gc-badge-show-bottom-right {
    0% {
        transform: scale(1) rotateX(90deg) translate(25%, 25%)
    }

    60% {
        transform: scale(1) rotateX(0) translate(25%, 25%)
    }

    100% {
        transform: scale(1) translate(25%, 25%)
    }
}

.gc-badge {
    position: absolute;
    z-index: 1;
    display: flex;
    box-sizing: border-box;
    min-width: 20px;
    height: 20px;
    padding: var(--cui-padding-xs);
    cursor: default;
    animation: gc-badge-show .4s 1 ease-in-out;
    white-space: nowrap;
    color: var(--cui-contrast-text);
    border-radius: var(--cui-border-radius);
    background-color: var(--cui-primary-500);
    box-shadow: var(--cui-shadow-border);
    font-size: var(--cui-text-size);
    line-height: 1;
    justify-content: center;
    align-items: center
}

.gc-badge--size-sm {
    min-width: 15px;
    height: 15px;
    font-size: var(--cui-text-size-sm)
}

.gc-badge--size-lg {
    min-width: 25px;
    height: 25px;
    font-size: var(--cui-text-size-lg)
}

.gc-badge--top-left {
    top: 0;
    left: 0
}

    .gc-badge--top-left:not(.gc-badge--inset) {
        animation: gc-badge-show-top-left .4s 1 ease-in-out forwards
    }

.gc-badge--top-right {
    top: 0;
    right: 0
}

    .gc-badge--top-right:not(.gc-badge--inset) {
        animation: gc-badge-show-top-right .4s 1 ease-in-out forwards
    }

.gc-badge--bottom-left {
    bottom: 0;
    left: 0
}

    .gc-badge--bottom-left:not(.gc-badge--inset) {
        animation: gc-badge-show-bottom-left .4s 1 ease-in-out forwards
    }

.gc-badge--bottom-right {
    right: 0;
    bottom: 0
}

    .gc-badge--bottom-right:not(.gc-badge--inset) {
        animation: gc-badge-show-bottom-right .4s 1 ease-in-out forwards
    }

.gc-badge--rounded {
    border-radius: 10px
}

    .gc-badge--rounded.gc-badge--size-sm {
        border-radius: 7.5px
    }

    .gc-badge--rounded.gc-badge--size-lg {
        border-radius: 12.5px
    }

.gc-badge--inline {
    position: relative;
    display: inline-flex
}

    .gc-badge--inline:last-child:not(:only-child) {
        margin-left: var(--cui-padding-xs)
    }

    .gc-badge--inline:first-child:not(:only-child) {
        margin-right: var(--cui-padding-xs)
    }

.gc-badge--custom {
    padding: 0;
    color: inherit;
    background: rgba(0,0,0,0);
    box-shadow: none
}

    .gc-badge--custom.gc-badge--inline {
        height: 100%
    }

.gc-badge--level-warning {
    background-color: var(--cui-warning-500);
    pointer-events: auto
}

    .gc-badge--level-warning.gc-badge--inverted {
        color: var(--cui-warning-500)
    }

.gc-badge--level-error {
    background-color: var(--cui-error-500);
    pointer-events: auto
}

    .gc-badge--level-error.gc-badge--inverted {
        color: var(--cui-error-500)
    }

.gc-badge--inverted {
    color: var(--cui-primary-500);
    background-color: var(--cui-white);
    font-weight: 700
}

.gc-badge--dot {
    width: 6px;
    min-width: auto;
    height: 6px;
    padding: 0;
    border-radius: 50%
}

@keyframes gc-item-animation {
    0% {
        width: 0;
        height: 0
    }

    33% {
        width: 60px;
        height: 60px
    }

    66% {
        width: 60px;
        height: 60px
    }

    100% {
        width: 100%;
        height: 60px
    }
}

@keyframes gc-item-mini-animation {
    0% {
        width: 0;
        height: 0
    }

    33% {
        width: var(--cui-block-size-sm);
        height: var(--cui-block-size-sm)
    }

    66% {
        width: var(--cui-block-size-sm);
        height: var(--cui-block-size-sm)
    }

    100% {
        width: 100%;
        height: var(--cui-block-size-sm)
    }
}

@keyframes gc-item-icon-animation {
    0% {
        transform: scale(0)
    }

    33% {
        transform: scale(1)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes gc-expand-animation {
    0% {
        transform: scale(0) translate(-50%, -50%)
    }

    100% {
        transform: scale(1) translate(-50%, -50%)
    }
}

@keyframes gc-task-loader-animation {
    0% {
        transform: scale(0);
        transform: scale(0)
    }

    90% {
        transform: scale(0.7);
        transform: scale(0.7)
    }

    100% {
        transform: scale(1);
        transform: scale(1)
    }
}

@keyframes gc-timeout-bar-animation {
    0% {
        width: 100%
    }

    100% {
        width: 0
    }
}

@keyframes gc-appear-animation {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.gc-portal-root--notifications > .gc-positioner {
    z-index: var(--cui-z-notifications)
}

.gc-notifications-container {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    width: 330px;
    max-width: 95vw;
    align-items: center
}

    .gc-notifications-container *, .gc-notifications-container *:before, .gc-notifications-container *:after {
        box-sizing: border-box
    }

.gc-notifications-container--position-bottom-center {
    margin: 0 0 var(--cui-block-size-sm) 0
}

.gc-notifications-container--position-bottom-left {
    margin: 0 0 var(--cui-block-size-sm) calc(var(--cui-block-size-sm)*.5)
}

.gc-notifications-container--position-bottom-right {
    margin: 0 calc(var(--cui-block-size-sm)*.5) var(--cui-block-size-sm) 0
}

.gc-notifications-container--position-top-center {
    flex-direction: column-reverse;
    margin: var(--cui-block-size-sm) 0 0 0
}

.gc-notifications-container--position-top-left {
    flex-direction: column-reverse;
    margin: var(--cui-block-size-sm) 0 0 calc(var(--cui-block-size-sm)*.5)
}

.gc-notifications-container--position-top-right {
    flex-direction: column-reverse;
    margin: var(--cui-block-size-sm) calc(var(--cui-block-size-sm)*.5) 0 0
}

.gc-notification {
    position: relative;
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    animation: gc-item-animation .8s 1;
    color: var(--cui-white);
    border-radius: var(--cui-border-radius);
    background-color: var(--cui-notification-btn-accent-bg);
    flex-shrink: 0
}

.gc-notification__tag {
    display: flex;
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    -webkit-user-select: none;
    user-select: none;
    transform-origin: top left;
    animation: gc-item-icon-animation .8s 1;
    text-align: center;
    border-radius: inherit;
    font-size: var(--cui-icon-size);
    line-height: 60px;
    justify-content: center;
    align-items: center
}

.gc-notification__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 0;
    padding: 7px 15px 7px 0;
    user-select: none;
    justify-content: center
}

.gc-notification__caption, .gc-notification__status {
    overflow: hidden;
    height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--cui-text-size);
    line-height: 20px
}

.gc-notification__status {
    opacity: .7;
    font-style: italic
}

.gc-notification__actions {
    display: flex;
    flex: 1 1 auto;
    max-height: 50%;
    margin-left: -2px;
    align-items: center
}

    .gc-notification__actions > .gc-btn.gc-notification__button {
        overflow: hidden;
        height: 20px;
        margin-right: 5px;
        padding: 0 5px;
        border-radius: var(--cui-border-radius);
        background-color: var(--cui-notification-btn-bg);
        font-size: var(--cui-text-size-sm);
        line-height: 20px
    }

        .gc-notification__actions > .gc-btn.gc-notification__button.gc-rounded {
            border-radius: 10px
        }

        .gc-notification__actions > .gc-btn.gc-notification__button:hover {
            background-color: var(--cui-notification-btn-bg-hover)
        }

.gc-notification__loader::before, .gc-notification__loader::after {
    position: absolute;
    top: calc(50% - 5.5px);
    display: block;
    width: 11px;
    height: 11px;
    content: "";
    border-radius: 50%;
    background-color: currentColor
}

.gc-notification__loader::before {
    left: calc(50% - 11px - 1px);
    animation: gc-loader-btn .4s ease-in-out infinite alternate
}

.gc-notification__loader::after {
    left: calc(50% + 1px);
    animation: gc-loader-btn .4s ease-in-out infinite alternate-reverse
}

.gc-notification__timeout-bar.gc-progress {
    position: absolute;
    top: 2px;
    left: 2px;
    overflow: hidden;
    width: calc(100% - 4px);
    height: 2px;
    animation: .8s gc-appear-animation ease-in forwards;
    opacity: 0;
    border-radius: 2px;
    background-color: var(--cui-contrast-semi-40)
}

    .gc-notification__timeout-bar.gc-progress > .gc-progress__fill {
        width: 100%;
        animation: .8s gc-timeout-bar-animation .8s linear forwards;
        background-color: var(--cui-contrast-semi-40)
    }

.gc-notification--rounded {
    border-radius: 30px
}

.gc-notification .gc-notification__button.gc-btn, .gc-notification .gc-notification__button-mini.gc-btn {
    background-color: var(--cui-primary-500)
}

    .gc-notification .gc-notification__button.gc-btn:not(:disabled):hover, .gc-notification .gc-notification__button-mini.gc-btn:not(:disabled):hover {
        background-color: var(--cui-primary-700)
    }

.gc-notification--info {
    background-color: var(--cui-primary-500)
}

    .gc-notification--info .gc-notification__button.gc-btn, .gc-notification--info .gc-notification__button-mini.gc-btn {
        background-color: var(--cui-primary-500)
    }

        .gc-notification--info .gc-notification__button.gc-btn:not(:disabled):hover, .gc-notification--info .gc-notification__button-mini.gc-btn:not(:disabled):hover {
            background-color: var(--cui-primary-700)
        }

.gc-notification--warning {
    background-color: var(--cui-warning-500)
}

    .gc-notification--warning .gc-notification__button.gc-btn, .gc-notification--warning .gc-notification__button-mini.gc-btn {
        background-color: var(--cui-warning-500)
    }

        .gc-notification--warning .gc-notification__button.gc-btn:not(:disabled):hover, .gc-notification--warning .gc-notification__button-mini.gc-btn:not(:disabled):hover {
            background-color: var(--cui-warning-700)
        }

.gc-notification--error {
    background-color: var(--cui-error-500)
}

    .gc-notification--error .gc-notification__button.gc-btn, .gc-notification--error .gc-notification__button-mini.gc-btn {
        background-color: var(--cui-error-500)
    }

        .gc-notification--error .gc-notification__button.gc-btn:not(:disabled):hover, .gc-notification--error .gc-notification__button-mini.gc-btn:not(:disabled):hover {
            background-color: var(--cui-error-700)
        }

.gc-notification--task:hover .gc-notification__tag > .gc-btn {
    display: block;
    opacity: 1
}

.gc-notification--task:hover .gc-notification__loader {
    display: none;
    opacity: 0
}

.gc-notification--task .gc-notification__tag {
    position: relative
}

    .gc-notification--task .gc-notification__tag > .gc-btn {
        display: none;
        transition: opacity 0s;
        opacity: 0
    }

.gc-notification--task .gc-progress {
    margin: 3px 0 0 0;
    background-color: var(--cui-contrast-semi-10)
}

    .gc-notification--task .gc-progress > .gc-progress__fill {
        background-color: var(--cui-white)
    }

.gc-notification--batch .gc-notification__tag {
    background-color: var(--cui-primary-500);
    font-size: 16px
}

.gc-notification--batch .gc-notification__actions {
    max-height: none
}

    .gc-notification--batch .gc-notification__actions > .gc-notification__button {
        width: 50%;
        height: 30px;
        margin-right: 10px;
        text-align: center;
        border-radius: var(--cui-border-radius);
        font-size: var(--cui-text-size);
        line-height: 30px
    }

        .gc-notification--batch .gc-notification__actions > .gc-notification__button.gc-rounded {
            border-radius: 15px
        }

.gc-notification--batch.gc-notification--size-small .gc-notification__tag {
    font-size: var(--cui-text-size)
}

.gc-notification--batch.gc-notification--size-small .gc-notification__actions {
    margin-left: auto
}

    .gc-notification--batch.gc-notification--size-small .gc-notification__actions .gc-notification__button {
        padding: 0 var(--cui-padding-sm)
    }

.gc-notification--size-small {
    height: var(--cui-block-size-sm);
    animation: gc-item-mini-animation .8s 1
}

    .gc-notification--size-small .gc-notification__tag {
        width: var(--cui-block-size-sm);
        height: var(--cui-block-size-sm);
        font-size: var(--cui-icon-size-sm);
        line-height: var(--cui-block-size-sm)
    }

    .gc-notification--size-small .gc-notification__content {
        flex-direction: row;
        padding: 0;
        justify-content: space-between;
        align-items: center
    }

    .gc-notification--size-small .gc-notification__caption {
        height: var(--cui-block-size-sm);
        padding: 0 10px 0 0;
        line-height: var(--cui-block-size-sm)
    }

    .gc-notification--size-small .gc-notification__actions {
        flex: 0 0 auto;
        max-height: none
    }

    .gc-notification--size-small .gc-notification__timeout-bar.gc-progress {
        height: 2px
    }

    .gc-notification--size-small.gc-notification--task {
        position: relative
    }

        .gc-notification--size-small.gc-notification--task .gc-notification__tag {
            z-index: 1;
            background-color: rgba(0,0,0,0)
        }

            .gc-notification--size-small.gc-notification--task .gc-notification__tag > .gc-notification__loader::before, .gc-notification--size-small.gc-notification--task .gc-notification__tag > .gc-notification__loader::after {
                position: absolute;
                top: calc(50% - 3.5px);
                display: block;
                width: 7px;
                height: 7px;
                content: "";
                border-radius: 50%;
                background-color: currentColor
            }

            .gc-notification--size-small.gc-notification--task .gc-notification__tag > .gc-notification__loader::before {
                left: calc(50% - 7px - 1px);
                animation: gc-loader-btn .4s ease-in-out infinite alternate
            }

            .gc-notification--size-small.gc-notification--task .gc-notification__tag > .gc-notification__loader::after {
                left: calc(50% + 1px);
                animation: gc-loader-btn .4s ease-in-out infinite alternate-reverse
            }

            .gc-notification--size-small.gc-notification--task .gc-notification__tag > .gc-notification__button-mini {
                position: absolute;
                top: 0;
                left: 0
            }

        .gc-notification--size-small.gc-notification--task .gc-notification__content {
            border-radius: inherit
        }

            .gc-notification--size-small.gc-notification--task .gc-notification__content > .gc-notification__caption {
                z-index: 1
            }

            .gc-notification--size-small.gc-notification--task .gc-notification__content > .gc-progress.gc-size-sm {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                margin: 0;
                border-radius: inherit;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                background-color: rgba(0,0,0,0)
            }

                .gc-notification--size-small.gc-notification--task .gc-notification__content > .gc-progress.gc-size-sm > .gc-progress__fill {
                    border-radius: inherit;
                    background-color: var(--cui-primary-700)
                }

.gc-notifications-modal {
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    animation: gc-expand-animation .2s 1 ease-in-out forwards;
    border-radius: var(--cui-border-radius);
    background-color: var(--cui-bg-body);
    box-shadow: var(--cui-shadow-border)
}

.gc-notification-details {
    width: 330px;
    padding: var(--cui-padding) 0
}

    .gc-notification-details *, .gc-notification-details *:before, .gc-notification-details *:after {
        box-sizing: border-box
    }

.gc-notification-details__content {
    overflow: auto;
    height: 400px;
    padding-bottom: var(--cui-padding);
    font-size: var(--cui-text-size)
}

.gc-notification-details__category {
    padding: 0 var(--cui-padding)
}

    .gc-notification-details__category + .gc-notification-details__category {
        margin-top: 5px
    }

.gc-notification-details__category--info {
    color: var(--cui-primary-700)
}

    .gc-notification-details__category--info .gc-notification-details-item__main {
        background-color: var(--cui-accent-text-semi-10)
    }

.gc-notification-details__category--warning {
    color: var(--cui-accent-warning-text)
}

    .gc-notification-details__category--warning .gc-notification-details-item__main {
        background-color: var(--cui-accent-warning-text-semi-10)
    }

.gc-notification-details__category--error {
    color: var(--cui-accent-error-text)
}

    .gc-notification-details__category--error .gc-notification-details-item__main {
        background-color: var(--cui-accent-error-text-semi-10)
    }

.gc-notification-details__action {
    padding: 0 var(--cui-padding)
}

.gc-notification-details-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--cui-border-radius)
}

    .gc-notification-details-item:before {
        position: absolute;
        top: 5px;
        left: 5px;
        width: 2px;
        height: calc(100% - 10px);
        content: "";
        background-color: currentColor
    }

    .gc-notification-details-item + .gc-notification-details-item {
        margin-top: 5px
    }

.gc-notification-details-item__main {
    display: flex;
    padding-left: var(--cui-padding);
    align-items: center;
    justify-content: space-between
}

    .gc-notification-details-item__main > .gc-btn-group {
        flex: 0 0 auto;
        align-self: flex-start
    }

.gc-notification-details-item__caption {
    display: flex;
    flex: 1 0 auto;
    width: 0;
    padding: 5px 0
}

    .gc-notification-details-item__caption > span {
        display: inline-block;
        overflow: hidden;
        max-height: 30px;
        vertical-align: middle;
        text-overflow: ellipsis;
        font-size: var(--cui-text-size);
        line-height: 15px
    }

.gc-notification-details-item__content {
    padding: 5px 5px 5px var(--cui-padding);
    white-space: pre-line;
    word-wrap: break-word;
    color: var(--cui-text-color);
    background-color: var(--cui-bg-panels)
}

@media(any-hover: none) {
    .gc-notification .gc-notification__button.gc-btn:hover, .gc-notification .gc-notification__button-mini.gc-btn:hover {
        background-color: var(--cui-notification-btn-bg)
    }

    .gc-notification--warning .gc-btn.gc-notification__button:hover, .gc-notification--warning .gc-btn.gc-notification__button-mini:hover {
        background-color: var(--cui-notification-btn-bg)
    }

    .gc-notification--error .gc-btn.gc-notification__button:hover, .gc-notification--error .gc-btn.gc-notification__button-mini:hover {
        background-color: var(--cui-notification-btn-bg)
    }
}

.gc-status-bar {
    display: flex;
    height: var(--cui-block-size-sm);
    background-color: inherit
}

.gc-status-bar__items {
    background-color: inherit;
    flex-grow: 1
}

    .gc-status-bar__items .gc-toolbar, .gc-status-bar__items .gc-toolbar__content, .gc-status-bar__items .gc-toolbar__content:before {
        background-color: inherit
    }

    .gc-status-bar__items .gc-toolbar__content {
        right: 0;
        left: auto;
        flex-direction: row-reverse;
        width: auto
    }

.gc-status-bar .gc-notifications-counter {
    display: flex
}

.gc-status-bar .gc-notifications-counter__toggle.gc-dd--menu-open {
    background-color: var(--cui-bg-body)
}

.gc-notifications-counter__menu {
    box-shadow: 5px -5px 5px -5px rgba(0,0,0,.1)
}

.gc-heading {
    display: flex;
    align-items: center
}

.gc-heading__container {
    display: flex;
    overflow: hidden;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--cui-padding-sm)
}

.gc-heading__text {
    overflow: hidden;
    min-width: 0;
    height: var(--cui-block-size-sm);
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
    text-transform: uppercase;
    text-overflow: ellipsis;
    color: inherit;
    font-size: var(--cui-text-size);
    font-weight: normal;
    line-height: var(--cui-block-size-sm)
}

.gc-heading__divider {
    flex: 10 10 auto;
    min-width: 16px;
    border-bottom: var(--cui-border-width) solid
}

.gc-heading__actions {
    flex: 0 0 auto
}

.gc-heading--level-info .gc-heading__container {
    color: var(--cui-primary-700)
}

.gc-heading--level-warning .gc-heading__container {
    color: var(--cui-warning-500)
}

.gc-heading--level-error .gc-heading__container {
    color: var(--cui-error-500)
}

.gc-heading--size-md .gc-heading__text {
    height: var(--cui-block-size);
    line-height: var(--cui-block-size)
}

.gc-heading--size-lg .gc-heading__text {
    height: var(--cui-block-size-lg);
    line-height: var(--cui-block-size-lg)
}

.gc-heading--text-size-small .gc-heading__text {
    font-size: var(--cui-text-size-sm)
}

.gc-heading--text-size-large .gc-heading__text {
    font-size: var(--cui-text-size-lg)
}

.gc-heading--case-default .gc-heading__text {
    text-transform: none
}

.gc-heading--align-center .gc-heading__container {
    justify-content: center
}

.gc-heading--align-right .gc-heading__container {
    flex-direction: row-reverse
}

.gc-heading--no-strike .gc-heading__divider {
    display: none
}

.gc-heading--weight-light .gc-heading__text {
    font-weight: 300
}

.gc-heading--weight-bold .gc-heading__text {
    font-weight: bold
}

.gc-scrollbars:hover .gc-scrollbars__thumb, .gc-scrollbars--no-hide .gc-scrollbars__thumb {
    opacity: 1
}

.gc-scrollbars--contrast .gc-scrollbars__thumb:after {
    background-color: hsla(var(--primary-50), 0.2)
}

.gc-scrollbars--no-grow .gc-scrollbars__track--vertical {
    width: 4px
}

.gc-scrollbars--no-grow .gc-scrollbars__track--horizontal {
    height: 4px
}

.gc-scrollbars--no-grow.gc-scrollbars--size-sm .gc-scrollbars__track--vertical {
    width: 2px
}

.gc-scrollbars--no-grow.gc-scrollbars--size-sm .gc-scrollbars__track--horizontal {
    height: 2px
}

.gc-scrollbars--size-sm .gc-scrollbars__thumb--vertical:after {
    max-width: 2px
}

.gc-scrollbars--size-sm .gc-scrollbars__thumb--horizontal:after {
    max-height: 2px
}

.gc-scrollbars__view {
    z-index: 0;
    overflow: scroll
}

.gc-scrollbars__view--vertical {
    overflow-x: hidden;
    margin-bottom: 0 !important
}

.gc-scrollbars__view--horizontal {
    overflow-y: hidden;
    margin-right: 0 !important
}

.gc-scrollbars__track {
    display: flex;
    pointer-events: none
}

.gc-scrollbars__track--vertical {
    top: 2px;
    right: 0;
    bottom: 2px;
    width: 10px;
    justify-content: flex-end
}

.gc-scrollbars__track--horizontal {
    right: 2px;
    bottom: 0;
    left: 2px;
    height: 10px;
    align-content: flex-end
}

.gc-scrollbars__thumb {
    pointer-events: all;
    opacity: 0
}

    .gc-scrollbars__thumb.is-dragged {
        opacity: 1
    }

    .gc-scrollbars__thumb:after {
        position: absolute;
        width: 100%;
        height: 100%;
        content: "";
        transition: max-width .2s ease-in-out,max-height .2s ease-in-out;
        border-radius: 4px;
        background-color: hsla(var(--primary-900), 0.2)
    }

.gc-scrollbars__thumb--vertical {
    transition: opacity .2s ease-in-out
}

    .gc-scrollbars__thumb--vertical:hover:after, .gc-scrollbars__thumb--vertical.is-dragged:after {
        max-width: 8px
    }

    .gc-scrollbars__thumb--vertical:after {
        top: 0;
        right: 2px;
        max-width: 4px
    }

.gc-scrollbars__thumb--horizontal {
    transition: opacity .2s ease-in-out
}

    .gc-scrollbars__thumb--horizontal:hover:after, .gc-scrollbars__thumb--horizontal.is-dragged:after {
        max-height: 8px
    }

    .gc-scrollbars__thumb--horizontal:after {
        bottom: 2px;
        left: 0;
        max-height: 4px
    }

@media(any-hover: none) {
    .gc-scrollbars__thumb--vertical:hover:after, .gc-scrollbars__thumb--vertical.is-dragged:after {
        max-width: 4px
    }

    .gc-scrollbars__thumb--horizontal:hover:after, .gc-scrollbars__thumb--horizontal.is-dragged:after {
        max-height: 4px
    }
}

.gc-treenode {
    position: relative
}

.gc-treenode__subtree {
    padding-left: 20px
}

.gc-treenode__subtree--outline > .gc-treenode:before {
    position: absolute;
    top: calc(var(--cui-block-size-sm)*.5);
    left: -5px;
    width: 3px;
    height: 1px;
    content: "";
    border-top: 1px solid var(--cui-treeview-outline-color)
}

.gc-treenode__subtree--outline > .gc-treenode:after {
    position: absolute;
    top: 0;
    left: -6px;
    width: 1px;
    height: 100%;
    content: "";
    border-left: 1px solid var(--cui-treeview-outline-color)
}

.gc-treenode__subtree--outline > .gc-treenode:last-of-type:before {
    display: none
}

.gc-treenode__subtree--outline > .gc-treenode:last-of-type:after {
    position: absolute;
    top: 0;
    left: -6px;
    width: 4px;
    height: calc(var(--cui-block-size-sm)*.5);
    content: "";
    border-width: 1px;
    border-style: none none solid solid;
    border-color: var(--cui-treeview-outline-color)
}

.gc-treeitem__icon {
    position: absolute;
    top: 0;
    left: 0;
    opacity: .5;
    background-color: rgba(0,0,0,0) !important
}

    .gc-treeitem__icon:hover {
        opacity: 1
    }

.gc-treeitem__text {
    width: 100%
}

    .gc-treeitem__text > .gc-btn__text {
        padding: 0 10px
    }

    .gc-treeitem__text:not(:only-child) > .gc-btn__text {
        padding-left: var(--cui-block-size-sm)
    }

@media(any-hover: none) {
    .gc-treeitem__icon {
        opacity: 1
    }
}

.gc-checklist {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap
}

    .gc-checklist *, .gc-checklist *:before, .gc-checklist *:after {
        box-sizing: border-box
    }

.gc-checklist--horizontal {
    flex-direction: row
}

    .gc-checklist--horizontal > .gc-check, .gc-checklist--horizontal > .gc-radio {
        flex: 1 0 100%;
        max-width: 100%
    }

    .gc-checklist--horizontal.gc-col-1.gc-checklist--with-offset > .gc-check, .gc-checklist--horizontal.gc-col-1.gc-checklist--with-offset > .gc-radio {
        max-width: calc(100% - 5px)
    }

    .gc-checklist--horizontal.gc-col-2 > .gc-check, .gc-checklist--horizontal.gc-col-2 > .gc-radio {
        max-width: 50%
    }

    .gc-checklist--horizontal.gc-col-2.gc-checklist--with-offset > .gc-check, .gc-checklist--horizontal.gc-col-2.gc-checklist--with-offset > .gc-radio {
        max-width: calc(50% - 5px)
    }

    .gc-checklist--horizontal.gc-col-3 > .gc-check, .gc-checklist--horizontal.gc-col-3 > .gc-radio {
        max-width: 33.3333333333%
    }

    .gc-checklist--horizontal.gc-col-3.gc-checklist--with-offset > .gc-check, .gc-checklist--horizontal.gc-col-3.gc-checklist--with-offset > .gc-radio {
        max-width: calc(33.3333333333% - 5px)
    }

    .gc-checklist--horizontal.gc-col-4 > .gc-check, .gc-checklist--horizontal.gc-col-4 > .gc-radio {
        max-width: 25%
    }

    .gc-checklist--horizontal.gc-col-4.gc-checklist--with-offset > .gc-check, .gc-checklist--horizontal.gc-col-4.gc-checklist--with-offset > .gc-radio {
        max-width: calc(25% - 5px)
    }

    .gc-checklist--horizontal.gc-col-5 > .gc-check, .gc-checklist--horizontal.gc-col-5 > .gc-radio {
        max-width: 20%
    }

    .gc-checklist--horizontal.gc-col-5.gc-checklist--with-offset > .gc-check, .gc-checklist--horizontal.gc-col-5.gc-checklist--with-offset > .gc-radio {
        max-width: calc(20% - 5px)
    }

.gc-checklist--align-center {
    align-items: center
}

.gc-checklist--align-right {
    align-items: flex-end
}

.gc-checklist--with-offset:not(.gc-checklist--horizontal) .gc-check + .gc-check, .gc-checklist--with-offset:not(.gc-checklist--horizontal) .gc-radio + .gc-radio {
    margin-top: 5px
}

.gc-checklist--with-offset.gc-checklist--horizontal {
    margin: -5px 0 0 -5px
}

    .gc-checklist--with-offset.gc-checklist--horizontal .gc-check, .gc-checklist--with-offset.gc-checklist--horizontal .gc-radio {
        margin: 5px 0 0 5px
    }

.gc-datetime {
    --calendar-width: 261px;
    --header-height: calc(var(--cui-block-size) + var(--cui-padding) * 2);
    --footer-height: calc(var(--cui-block-size) + var(--cui-padding) * 2);
    --calendar-height: 285px;
    display: flex;
    flex-direction: column;
    width: var(--calendar-width);
    height: calc(var(--header-height) + var(--calendar-height))
}

.gc-datetime__header {
    height: var(--header-height)
}

.gc-datetime__body {
    position: relative;
    flex: 1 1 auto;
    height: 0;
    padding: 0 var(--cui-padding) var(--cui-padding)
}

.gc-datetime__footer {
    display: flex;
    height: var(--footer-height);
    margin: 0 var(--cui-padding);
    box-shadow: inset 0 1px 0 0 var(--cui-neutral-50);
    align-items: center
}

.gc-datetime--barrel .gc-datetime__body {
    padding: 0 5px var(--cui-padding)
}

.gc-datetime--extended-1 {
    height: calc(var(--header-height) + var(--calendar-height) + var(--footer-height))
}

.gc-datetime--extended-2 {
    height: calc(var(--header-height) + var(--calendar-height) + var(--footer-height)*2)
}

@media screen and (max-width: 600px) {
    .gc-datetime {
        width: 100vw
    }
}

.gc-datetime-header {
    display: grid;
    height: 100%;
    margin: 0 var(--cui-padding-sm);
    grid-auto-flow: column
}

    .gc-datetime-header > .gc-btn {
        align-self: center
    }

        .gc-datetime-header > .gc-btn:last-child {
            justify-self: flex-end
        }

        .gc-datetime-header > .gc-btn:first-child {
            justify-self: left
        }

.gc-datetime-header__buttons {
    display: grid;
    grid-auto-flow: column;
    justify-self: center
}

.gc-datetime-header__title {
    -webkit-user-select: none;
    user-select: none;
    text-align: center;
    color: var(--cui-primary-700);
    font-size: var(--cui-text-size-lg);
    font-weight: bold;
    align-self: center
}

.gc-datetime-header--contrast .gc-datetime-header__title {
    color: var(--cui-contrast-text)
}

.gc-datetime-footer-time {
    font-size: var(--cui-text-size-lg);
    font-weight: bold
}

.gc-datetime-footer-control {
    width: calc(50% - var(--cui-padding-sm)*.5)
}

    .gc-datetime-footer-control:first-child {
        margin-right: var(--cui-padding-sm)
    }

.gc-datetime-date {
    width: var(--cui-block-size-sm);
    height: var(--cui-block-size-sm);
    -webkit-user-select: none;
    user-select: none
}

.gc-datetime-date--neighbor {
    color: var(--cui-text-semi-40)
}

.gc-datetime-date--today {
    color: var(--cui-primary-700);
    font-weight: bold
}

    .gc-datetime-date--today:before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--cui-block-size-sm);
        height: var(--cui-block-size-sm);
        content: "";
        transition: opacity .2s ease-in-out;
        transform: translate(-50%, -50%);
        border: 2px solid var(--cui-primary-500);
        border-radius: 50%
    }

.gc-datetime-date--selected {
    color: var(--cui-white);
    font-weight: bold
}

    .gc-datetime-date--selected:before {
        opacity: 0
    }

.gc-datetime-date--disabled {
    pointer-events: none;
    opacity: .38
}

.gc-datetime-timer {
    position: absolute;
    top: 40%;
    left: 50%;
    display: flex;
    transform: translate(-50%, -50%)
}

.gc-datetime-timer__seconds {
    transform: translate(-55%, -50%)
}

.gc-datetime-timer__delimiter {
    display: flex;
    width: var(--cui-padding);
    font-size: var(--cui-text-size-xl);
    justify-content: center;
    align-items: center
}

.gc-datetime-timer .gc-clock__value, .gc-datetime-timer .gc-clock .gc-size-lg {
    width: var(--cui-block-size-lg);
    font-size: var(--cui-text-size-xl)
}

.gc-datetime-timer__daypart {
    position: absolute;
    top: 50%;
    right: calc(0px - var(--cui-block-size));
    width: var(--cui-block-size);
    transform: translateY(-50%)
}

.gc-datetime-timer__daypart-title {
    text-align: center;
    color: var(--cui-primary-700);
    line-height: calc(var(--cui-block-size-lg)*.5)
}

.gc-datetime-timer__daypart-title--selected {
    font-weight: bold
}

.gc-datetime-barrel {
    display: flex;
    width: 100%;
    height: 100%
}

.gc-datetime-barrel--swapped {
    flex-direction: row-reverse
}

    .gc-datetime-barrel--swapped .gc-datetime-barrel__column:first-child {
        box-shadow: inset 1px 0 0 0 var(--cui-neutral-50)
    }

    .gc-datetime-barrel--swapped .gc-datetime-barrel__column:last-child {
        box-shadow: none
    }

.gc-datetime-barrel__column {
    width: 50%
}

    .gc-datetime-barrel__column:nth-child(2) {
        box-shadow: inset 1px 0 0 0 var(--cui-neutral-50)
    }

    .gc-datetime-barrel__column:only-child {
        width: 100%
    }

.gc-datetime-barrel__scroll {
    height: 100%;
    padding: 0 var(--cui-padding-sm)
}

.gc-datetime-barrel__item {
    width: 100%
}

.gc-datetime-barrel__item--selected .gc-btn__text {
    font-weight: bold
}

.gc-datetime-barrel__years-container {
    position: relative
}

.gc-datetime-barrel__year-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.gc-datetime-days {
    display: flex;
    flex-direction: column;
    height: 100%
}

.gc-datetime-days__header {
    display: flex;
    flex: 0 0 auto;
    height: var(--cui-block-size-sm);
    font-size: var(--cui-text-size);
    font-weight: bold;
    line-height: var(--cui-block-size-sm);
    justify-content: space-around
}

.gc-datetime-days__content {
    display: flex;
    flex: 1 0 auto;
    box-shadow: inset 0 1px 0 0 var(--cui-neutral-50);
    flex-wrap: wrap
}

.gc-datetime-date {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    height: calc(var(--cui-block-size-sm) + 4px);
    margin-top: auto;
    flex-grow: 1;
    flex-basis: 14.2857142857%;
    align-items: center;
    justify-content: center
}

    .gc-datetime-date:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: "";
        opacity: 0;
        background-color: var(--cui-calendar-range-fill-color)
    }

.gc-datetime-date--large {
    height: 60px;
    flex-basis: 25%
}

    .gc-datetime-date--large .gc-datetime-date__button {
        width: 56px;
        height: 56px;
        border-radius: 50%
    }

    .gc-datetime-date--large.gc-datetime-date--range-start:before {
        transform: translateX(-30px);
        border-radius: 60px
    }

    .gc-datetime-date--large.gc-datetime-date--range-end:before {
        transform: translateX(30px);
        border-radius: 60px
    }

    .gc-datetime-date--large.gc-datetime-date--range-both:before {
        width: 60px
    }

.gc-datetime-date--range-start:before {
    left: 50%;
    width: 200%;
    transition: opacity .2s ease-in-out;
    transform: translateX(calc(0px - var(--cui-block-size-sm) * 0.5 - 2px));
    opacity: 1;
    border-radius: calc(var(--cui-block-size-sm) + 4px)
}

.gc-datetime-date--range-end:before {
    right: 50%;
    left: auto;
    width: 200%;
    transition: opacity .2s ease-in-out;
    transform: translateX(calc(var(--cui-block-size-sm) * 0.5 + 2px));
    opacity: 1;
    border-radius: calc(var(--cui-block-size-sm) + 4px)
}

.gc-datetime-date--range-both:before {
    left: 50%;
    width: calc(var(--cui-block-size-sm) + 4px);
    transition: opacity .2s ease-in-out;
    transform: translateX(-50%);
    opacity: 1;
    border-radius: 50%
}

.gc-datetime-date--in-range:before {
    transition: opacity .2s ease-in-out;
    opacity: 1
}

.gc-datetime-date__button {
    width: var(--cui-block-size-sm);
    height: var(--cui-block-size-sm);
    -webkit-user-select: none;
    user-select: none
}

.gc-datetime-date__button--neighbor {
    color: var(--cui-text-semi-40)
}

.gc-datetime-date__button--today {
    color: var(--cui-primary-700);
    font-weight: bold
}

    .gc-datetime-date__button--today:before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        content: "";
        transition: opacity .2s ease-in-out;
        transform: translate(-50%, -50%);
        border: 2px solid var(--cui-primary-500);
        border-radius: 50%
    }

.gc-datetime-date__button--selected {
    color: var(--cui-white);
    font-weight: bold
}

    .gc-datetime-date__button--selected:before {
        opacity: 0
    }

.gc-datetime-date__button .gc-btn__text {
    padding: 0
}

@keyframes gc-loader-btn {
    0% {
        transform: scale(0.8);
        opacity: .62
    }

    to {
        transform: scale(1.2);
        opacity: 1
    }
}

.gc-loader-button::before, .gc-loader-button::after {
    position: absolute;
    top: calc(50% - 4.5px);
    display: block;
    width: 9px;
    height: 9px;
    content: "";
    border-radius: 50%;
    background-color: currentColor
}

.gc-loader-button::before {
    left: calc(50% - 9px - 1px);
    animation: gc-loader-btn .4s ease-in-out infinite alternate
}

.gc-loader-button::after {
    left: calc(50% + 1px);
    animation: gc-loader-btn .4s ease-in-out infinite alternate-reverse
}

.gc-size-sm .gc-loader-button::before, .gc-size-sm .gc-loader-button::after {
    top: calc(50% - 3.5px);
    width: 7px;
    height: 7px
}

.gc-size-sm .gc-loader-button::before {
    left: calc(50% - 7px - 1px)
}

.gc-size-lg .gc-loader-button::before, .gc-size-lg .gc-loader-button::after {
    top: calc(50% - 5.5px);
    width: 11px;
    height: 11px
}

.gc-size-lg .gc-loader-button::before {
    left: calc(50% - 11px - 1px)
}

@keyframes gc-loader {
    50% {
        transform: scale(0.7);
        opacity: .62
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.gc-loader {
    display: inline-flex;
    background-color: var(--cui-overlay);
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap
}

    .gc-loader > div {
        flex: 0 0 auto;
        width: 10px;
        height: 10px;
        margin: 1px;
        animation: gc-loader .8s 0s infinite linear;
        border-radius: 50%;
        background-color: currentColor
    }

        .gc-loader > div:nth-child(2n-1) {
            animation-delay: -0.4s !important
        }

.gc-loader--block {
    display: flex
}

.gc-loader--transparent {
    background-color: rgba(0,0,0,0)
}

.gc-loader--info > div {
    background-color: var(--cui-primary-500)
}

.gc-loader--warning > div {
    background-color: var(--cui-warning-500)
}

.gc-loader--error > div {
    background-color: var(--cui-error-500)
}

.gc-alert {
    --cui-alert-info-bg: var(--cui-accent-text-semi-10);
    --cui-alert-info-border: var(--cui-accent-text-semi-10);
    --cui-alert-warning-bg: var(--cui-accent-warning-text-semi-10);
    --cui-alert-warning-border: var(--cui-accent-warning-text-semi-10);
    --cui-alert-error-bg: var(--cui-accent-error-text-semi-10);
    --cui-alert-error-border: var(--cui-accent-error-text-semi-10)
}

.gc-alert {
    overflow: hidden;
    padding: var(--cui-padding-sm);
    border: var(--cui-border-width) solid var(--cui-alert-info-border);
    border-radius: var(--cui-border-radius);
    background-color: var(--cui-alert-info-bg)
}

.gc-alert__main {
    display: flex;
    min-height: var(--cui-block-size-sm);
    align-items: center
}

.gc-alert__icon {
    display: flex;
    width: var(--cui-block-size-sm);
    height: var(--cui-block-size-sm);
    color: var(--cui-accent-text);
    align-items: center;
    justify-content: center
}

.gc-alert__title {
    overflow: hidden;
    flex: 1 1 auto;
    width: 0;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--cui-accent-text);
    font-size: var(--cui-text-size-lg);
    font-weight: normal;
    line-height: var(--cui-block-size-sm)
}

.gc-alert--one-row {
    overflow: hidden;
    white-space: nowrap
}

.gc-alert--multi-row {
    overflow: visible;
    white-space: normal
}

.gc-alert__actions {
    margin-left: var(--cui-padding)
}

.gc-alert__details {
    overflow-wrap: anywhere;
    padding: 4px 0 4px 6px;
    font-size: var(--cui-text-size)
}

.gc-alert--level-warning {
    border: var(--cui-border-width) solid var(--cui-alert-warning-border);
    background-color: var(--cui-alert-warning-bg)
}

    .gc-alert--level-warning > .gc-alert__main > .gc-alert__icon, .gc-alert--level-warning > .gc-alert__main > .gc-alert__title {
        color: var(--cui-accent-warning-text)
    }

.gc-alert--level-error {
    border: var(--cui-border-width) solid var(--cui-alert-error-border);
    background-color: var(--cui-alert-error-bg)
}

    .gc-alert--level-error > .gc-alert__main > .gc-alert__icon, .gc-alert--level-error > .gc-alert__main > .gc-alert__title {
        color: var(--cui-accent-error-text)
    }

.gc-alert--size-small {
    padding: 0;
    border: none
}

    .gc-alert--size-small .gc-alert__details {
        padding: 0 10px 10px 10px
    }

    .gc-alert--size-small .gc-alert__title {
        font-size: var(--cui-text-size)
    }

        .gc-alert--size-small .gc-alert__title:first-child {
            margin-left: var(--cui-padding-sm)
        }

    .gc-alert--size-small .gc-alert__icon {
        margin-right: 0
    }

.gc-positioner {
    position: absolute;
    top: 0;
    left: 0
}

.gc-positioner--calculating {
    visibility: hidden
}

.gc-positioner--fill-container {
    width: 100%;
    height: 100%
}

a.gc-link {
    color: var(--cui-primary-700)
}

    a.gc-link:active, a.gc-link:focus, a.gc-link:visited {
        color: var(--cui-primary-700)
    }

    a.gc-link:hover {
        color: var(--cui-primary-800)
    }

a.gc-link--no-underline {
    text-decoration: none
}

@media(any-hover: none) {
    a.gc-link:hover {
        color: var(--cui-primary-700)
    }
}

.gc-grid-item--appbar {
    background-color: var(--cui-bg-panels);
    box-shadow: inset 0 -1px 0 0 var(--cui-bg-panels-border);
    grid-area: appbar
}

.gc-grid-item--legacy-appbar {
    background-color: var(--cui-primary-500);
    grid-area: appbar
}

.gc-grid-item--menu {
    grid-area: menu
}

.gc-grid-item--toolbar {
    display: flex;
    justify-content: flex-end;
    background-color: var(--cui-bg-panels);
    box-shadow: inset 0 -1px 0 0 var(--cui-bg-panels-border);
    grid-area: toolbar
}

    .gc-grid-item--toolbar > .gc-toolbar {
        flex: 1 1 auto;
        margin: 5px
    }

.gc-grid-item--surface {
    grid-area: surface
}

.gc-grid-item--sidebar {
    grid-area: sidebar
}

.gc-grid-item--statusbar {
    border-top: 1px solid var(--cui-bg-panels-border);
    background-color: var(--cui-bg-panels);
    grid-area: statusbar
}

.gc-grid {
    position: relative;
    z-index: 0;
    display: grid;
    display: -ms-grid;
    width: 100%;
    height: 100%
}

    .gc-grid *, .gc-grid *:before, .gc-grid *:after {
        box-sizing: border-box
    }

.gc-grid--designer {
    -ms-grid-rows: auto auto minmax(0, 1fr) auto;
    -ms-grid-columns: auto minmax(0, 1fr) auto;
    grid-template: "appbar appbar appbar" auto "menu toolbar toolbar" auto "menu surface sidebar" minmax(0, 1fr) "menu statusbar statusbar" auto/auto minmax(0, 1fr) auto
}

    .gc-grid--designer > .gc-grid-item--appbar {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3
    }

    .gc-grid--designer > .gc-grid-item--legacy-appbar {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3
    }

    .gc-grid--designer > .gc-grid-item--menu {
        -ms-grid-row: 2;
        -ms-grid-row-span: 3;
        -ms-grid-column: 1
    }

    .gc-grid--designer > .gc-grid-item--toolbar {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
        -ms-grid-column-span: 2
    }

    .gc-grid--designer > .gc-grid-item--surface {
        -ms-grid-row: 3;
        -ms-grid-column: 2
    }

    .gc-grid--designer > .gc-grid-item--sidebar {
        -ms-grid-row: 3;
        -ms-grid-column: 3
    }

    .gc-grid--designer > .gc-grid-item--statusbar {
        -ms-grid-row: 4;
        -ms-grid-column: 2;
        -ms-grid-column-span: 2
    }

.gc-app {
    position: relative;
    z-index: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: var(--cui-text-color);
    background-color: var(--cui-bg-body);
    font-family: var(--cui-text-family)
}

.gc-resizable {
    position: relative
}

.gc-resizable--disabled .gc-resizable__handler {
    display: none
}

.gc-resizable--horizontal {
    height: 100%;
    will-change: width
}

    .gc-resizable--horizontal .gc-resizable__handler {
        top: 0;
        width: 10px;
        height: 100%;
        cursor: ew-resize
    }

.gc-resizable--vertical {
    width: 100%;
    will-change: height
}

    .gc-resizable--vertical .gc-resizable__handler {
        left: 0;
        width: 100%;
        height: 10px;
        cursor: ns-resize
    }

.gc-resizable__handler {
    position: absolute
}

.gc-resizable__handler--side-left {
    left: -5px
}

.gc-resizable__handler--side-right {
    right: -5px
}

.gc-resizable__handler--side-top {
    top: -5px
}

.gc-resizable__handler--side-bottom {
    bottom: -5px
}

.gc-date-range {
    display: flex
}

.gc-date-range__main {
    display: flex
}

    .gc-date-range__main .gc-datetime:first-child:not(:only-child) .gc-datetime__body {
        padding-right: var(--cui-padding-sm)
    }

    .gc-date-range__main .gc-datetime:nth-child(2) .gc-datetime__body {
        padding-left: var(--cui-padding-sm)
    }

    .gc-date-range__main .gc-datetime--months .gc-datetime__body, .gc-date-range__main .gc-datetime--years .gc-datetime__body {
        display: flex;
        flex-wrap: wrap;
        align-content: space-around
    }

.gc-date-range__aside {
    background-color: var(--cui-primary-500)
}

@media screen and (max-width: 812px) {
    .gc-date-range {
        flex-direction: column
    }

    .gc-date-range__aside {
        border-radius: 0 0 var(--cui-border-radius) var(--cui-border-radius)
    }
}

.gc-date-range-aside {
    display: flex;
    flex-direction: column;
    width: 190px;
    height: 100%
}

.gc-date-range-aside--simple .gc-date-range-shortcuts__list {
    padding: var(--cui-padding) 0
}

.gc-date-range-aside__header {
    height: calc(var(--cui-block-size) + var(--cui-padding)*2)
}

.gc-date-range-aside__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 0;
    padding: 0 calc(var(--cui-padding) - var(--cui-padding-sm))
}

.gc-date-range-aside__title {
    flex: 0 0 auto;
    height: var(--cui-block-size-sm);
    margin: 0 var(--cui-padding-sm);
    text-align: center;
    color: var(--cui-contrast-text);
    box-shadow: inset 0 -1px 0 0 var(--cui-menu-splitter);
    font-size: var(--cui-text-size);
    font-weight: bold;
    line-height: var(--cui-block-size-sm)
}

.gc-date-range-aside__list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--cui-padding-sm) 0
}

.gc-date-range-aside__item {
    width: 100%
}

.gc-date-range-aside__scroll {
    height: 100%;
    padding: 0 var(--cui-padding-sm)
}

@media screen and (max-width: 812px) {
    .gc-date-range-aside {
        width: 100%
    }

    .gc-date-range-aside__body {
        height: 100%
    }

    .gc-date-range-aside__list {
        max-height: 200px
    }
}

.cui-item {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    min-height: var(--cui-block-size-sm);
    border-radius: var(--cui-border-radius);
    outline-offset: -1px;
    align-items: flex-start;
    justify-content: stretch
}

.cui-item--neutral:not(.cui-item--inverted) {
    --cui-item-bg-selected: var(--cui-neutral-50);
    --cui-item-bg-selected-hover: var(--cui-neutral-100);
    --cui-item-bg-semi: var(--cui-neutral-50);
    --cui-item-bg-semi-selected: var(--cui-neutral-100);
    --cui-item-bg-semi-selected-hover: var(--cui-neutral-200);
    --cui-item-bg-solid: var(--cui-neutral-inverted-500);
    --cui-item-bg-solid-selected: var(--cui-neutral-inverted-700);
    --cui-item-bg-solid-selected-hover: var(--cui-neutral-inverted-800);
    --cui-item-outline: var(--cui-neutral-300);
    --cui-item-outline-disabled: var(--cui-neutral-100);
    --cui-item-color: var(--cui-neutral-700);
    --cui-item-color-disabled: var(--cui-neutral-300);
    --cui-item-color-subtitle: var(--cui-neutral-400);
    --cui-item-color-subtitle-variant: var(--cui-neutral-500);
    --cui-item-color-subtitle-disabled: var(--cui-neutral-200);
    --cui-item-color-solid: var(--cui-white);
    --cui-item-color-solid-disabled: var(--cui-neutral-inverted-300);
    --cui-item-color-solid-subtitle: var(--cui-neutral-inverted-300);
    --cui-item-color-solid-subtitle-disabled: var(--cui-neutral-inverted-400)
}

.cui-item--neutral:is(.cui-item--inverted) {
    --cui-item-bg-selected: var(--cui-neutral-inverted-600);
    --cui-item-bg-selected-hover: var(--cui-neutral-inverted-700);
    --cui-item-bg-semi: var(--cui-neutral-inverted-600);
    --cui-item-bg-semi-selected: var(--cui-neutral-inverted-700);
    --cui-item-bg-semi-selected-hover: var(--cui-neutral-inverted-800);
    --cui-item-bg-solid: var(--cui-neutral-inverted-50);
    --cui-item-bg-solid-selected: var(--cui-white);
    --cui-item-bg-solid-selected-hover: var(--cui-neutral-inverted-50);
    --cui-item-outline: var(--cui-white);
    --cui-item-outline-disabled: var(--cui-neutral-inverted-400);
    --cui-item-color: var(--cui-white);
    --cui-item-color-disabled: var(--cui-neutral-inverted-300);
    --cui-item-color-subtitle: var(--cui-neutral-inverted-300);
    --cui-item-color-subtitle-variant: var(--cui-neutral-inverted-100);
    --cui-item-color-subtitle-disabled: var(--cui-neutral-inverted-400);
    --cui-item-color-solid: var(--cui-neutral-inverted-500);
    --cui-item-color-solid-disabled: var(--cui-neutral-inverted-300);
    --cui-item-color-solid-subtitle: var(--cui-neutral-inverted-400);
    --cui-item-color-solid-subtitle-disabled: var(--cui-neutral-inverted-400)
}

.cui-item--primary:not(.cui-item--inverted) {
    --cui-item-bg-selected: var(--cui-primary-50);
    --cui-item-bg-selected-hover: var(--cui-primary-100);
    --cui-item-bg-semi: var(--cui-primary-50);
    --cui-item-bg-semi-selected: var(--cui-primary-100);
    --cui-item-bg-semi-selected-hover: var(--cui-primary-200);
    --cui-item-bg-solid: var(--cui-primary-inverted-500);
    --cui-item-bg-solid-selected: var(--cui-primary-inverted-700);
    --cui-item-bg-solid-selected-hover: var(--cui-primary-inverted-800);
    --cui-item-outline: var(--cui-primary-300);
    --cui-item-outline-disabled: var(--cui-primary-100);
    --cui-item-color: var(--cui-primary-700);
    --cui-item-color-disabled: var(--cui-primary-300);
    --cui-item-color-subtitle: var(--cui-primary-400);
    --cui-item-color-subtitle-variant: var(--cui-primary-500);
    --cui-item-color-subtitle-disabled: var(--cui-primary-200);
    --cui-item-color-solid: var(--cui-white);
    --cui-item-color-solid-disabled: var(--cui-primary-inverted-300);
    --cui-item-color-solid-subtitle: var(--cui-primary-inverted-300);
    --cui-item-color-solid-subtitle-disabled: var(--cui-primary-inverted-400)
}

.cui-item--primary:is(.cui-item--inverted) {
    --cui-item-bg-selected: var(--cui-primary-inverted-600);
    --cui-item-bg-selected-hover: var(--cui-primary-inverted-700);
    --cui-item-bg-semi: var(--cui-primary-inverted-600);
    --cui-item-bg-semi-selected: var(--cui-primary-inverted-700);
    --cui-item-bg-semi-selected-hover: var(--cui-primary-inverted-800);
    --cui-item-bg-solid: var(--cui-primary-inverted-50);
    --cui-item-bg-solid-selected: var(--cui-white);
    --cui-item-bg-solid-selected-hover: var(--cui-primary-inverted-50);
    --cui-item-outline: var(--cui-white);
    --cui-item-outline-disabled: var(--cui-primary-inverted-400);
    --cui-item-color: var(--cui-white);
    --cui-item-color-disabled: var(--cui-primary-inverted-300);
    --cui-item-color-subtitle: var(--cui-primary-inverted-300);
    --cui-item-color-subtitle-variant: var(--cui-primary-inverted-100);
    --cui-item-color-subtitle-disabled: var(--cui-primary-inverted-400);
    --cui-item-color-solid: var(--cui-primary-inverted-500);
    --cui-item-color-solid-disabled: var(--cui-primary-inverted-300);
    --cui-item-color-solid-subtitle: var(--cui-primary-inverted-400);
    --cui-item-color-solid-subtitle-disabled: var(--cui-primary-inverted-400)
}

.cui-item--warning:not(.cui-item--inverted) {
    --cui-item-bg-selected: var(--cui-warning-50);
    --cui-item-bg-selected-hover: var(--cui-warning-100);
    --cui-item-bg-semi: var(--cui-warning-50);
    --cui-item-bg-semi-selected: var(--cui-warning-100);
    --cui-item-bg-semi-selected-hover: var(--cui-warning-200);
    --cui-item-bg-solid: var(--cui-warning-inverted-500);
    --cui-item-bg-solid-selected: var(--cui-warning-inverted-700);
    --cui-item-bg-solid-selected-hover: var(--cui-warning-inverted-800);
    --cui-item-outline: var(--cui-warning-300);
    --cui-item-outline-disabled: var(--cui-warning-100);
    --cui-item-color: var(--cui-warning-700);
    --cui-item-color-disabled: var(--cui-warning-300);
    --cui-item-color-subtitle: var(--cui-warning-400);
    --cui-item-color-subtitle-variant: var(--cui-warning-500);
    --cui-item-color-subtitle-disabled: var(--cui-warning-200);
    --cui-item-color-solid: var(--cui-white);
    --cui-item-color-solid-disabled: var(--cui-warning-inverted-300);
    --cui-item-color-solid-subtitle: var(--cui-warning-inverted-300);
    --cui-item-color-solid-subtitle-disabled: var(--cui-warning-inverted-400)
}

.cui-item--warning:is(.cui-item--inverted) {
    --cui-item-bg-selected: var(--cui-warning-inverted-600);
    --cui-item-bg-selected-hover: var(--cui-warning-inverted-700);
    --cui-item-bg-semi: var(--cui-warning-inverted-600);
    --cui-item-bg-semi-selected: var(--cui-warning-inverted-700);
    --cui-item-bg-semi-selected-hover: var(--cui-warning-inverted-800);
    --cui-item-bg-solid: var(--cui-warning-inverted-50);
    --cui-item-bg-solid-selected: var(--cui-white);
    --cui-item-bg-solid-selected-hover: var(--cui-warning-inverted-50);
    --cui-item-outline: var(--cui-white);
    --cui-item-outline-disabled: var(--cui-warning-inverted-400);
    --cui-item-color: var(--cui-white);
    --cui-item-color-disabled: var(--cui-warning-inverted-300);
    --cui-item-color-subtitle: var(--cui-warning-inverted-300);
    --cui-item-color-subtitle-variant: var(--cui-warning-inverted-100);
    --cui-item-color-subtitle-disabled: var(--cui-warning-inverted-400);
    --cui-item-color-solid: var(--cui-warning-inverted-500);
    --cui-item-color-solid-disabled: var(--cui-warning-inverted-300);
    --cui-item-color-solid-subtitle: var(--cui-warning-inverted-400);
    --cui-item-color-solid-subtitle-disabled: var(--cui-warning-inverted-400)
}

.cui-item--error:not(.cui-item--inverted) {
    --cui-item-bg-selected: var(--cui-error-50);
    --cui-item-bg-selected-hover: var(--cui-error-100);
    --cui-item-bg-semi: var(--cui-error-50);
    --cui-item-bg-semi-selected: var(--cui-error-100);
    --cui-item-bg-semi-selected-hover: var(--cui-error-200);
    --cui-item-bg-solid: var(--cui-error-inverted-500);
    --cui-item-bg-solid-selected: var(--cui-error-inverted-700);
    --cui-item-bg-solid-selected-hover: var(--cui-error-inverted-800);
    --cui-item-outline: var(--cui-error-300);
    --cui-item-outline-disabled: var(--cui-error-100);
    --cui-item-color: var(--cui-error-700);
    --cui-item-color-disabled: var(--cui-error-300);
    --cui-item-color-subtitle: var(--cui-error-400);
    --cui-item-color-subtitle-variant: var(--cui-error-500);
    --cui-item-color-subtitle-disabled: var(--cui-error-200);
    --cui-item-color-solid: var(--cui-white);
    --cui-item-color-solid-disabled: var(--cui-error-inverted-300);
    --cui-item-color-solid-subtitle: var(--cui-error-inverted-300);
    --cui-item-color-solid-subtitle-disabled: var(--cui-error-inverted-400)
}

.cui-item--error:is(.cui-item--inverted) {
    --cui-item-bg-selected: var(--cui-error-inverted-600);
    --cui-item-bg-selected-hover: var(--cui-error-inverted-700);
    --cui-item-bg-semi: var(--cui-error-inverted-600);
    --cui-item-bg-semi-selected: var(--cui-error-inverted-700);
    --cui-item-bg-semi-selected-hover: var(--cui-error-inverted-800);
    --cui-item-bg-solid: var(--cui-error-inverted-50);
    --cui-item-bg-solid-selected: var(--cui-white);
    --cui-item-bg-solid-selected-hover: var(--cui-error-inverted-50);
    --cui-item-outline: var(--cui-white);
    --cui-item-outline-disabled: var(--cui-error-inverted-400);
    --cui-item-color: var(--cui-white);
    --cui-item-color-disabled: var(--cui-error-inverted-300);
    --cui-item-color-subtitle: var(--cui-error-inverted-300);
    --cui-item-color-subtitle-variant: var(--cui-error-inverted-100);
    --cui-item-color-subtitle-disabled: var(--cui-error-inverted-400);
    --cui-item-color-solid: var(--cui-error-inverted-500);
    --cui-item-color-solid-disabled: var(--cui-error-inverted-300);
    --cui-item-color-solid-subtitle: var(--cui-error-inverted-400);
    --cui-item-color-solid-subtitle-disabled: var(--cui-error-inverted-400)
}

.cui-item--button, .cui-item--li {
    margin: 0;
    padding: 0
}

.cui-item--button {
    border: none;
    background: none;
    text-align: inherit;
    font-style: inherit;
    font-family: inherit
}

.cui-item--li {
    list-style: none
}

.cui-item:not(:has(.cui-item__decoration-left)) {
    padding-left: var(--cui-padding-sm)
}

.cui-item:not(:has(.cui-item__controls)) {
    padding-right: var(--cui-padding-sm)
}

.cui-item--disabled {
    pointer-events: none
}

.cui-item--large {
    min-height: var(--cui-block-size-lg)
}

    .cui-item--large .cui-item__decoration-left {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--cui-block-size-lg);
        height: var(--cui-block-size-lg)
    }

.cui-item--large__controls {
    height: var(--cui-block-size-lg)
}

.cui-item--large .cui-item__title {
    font-size: var(--cui-text-size-lg);
    line-height: normal
}

.cui-item--large .cui-item__text {
    padding: 5px 0
}

.cui-item--small {
    min-height: var(--cui-block-size-sm)
}

    .cui-item--small .cui-item__decoration-left {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--cui-block-size-sm);
        height: var(--cui-block-size-sm)
    }

.cui-item--small__controls {
    height: var(--cui-block-size-sm)
}

.cui-item--default {
    min-height: var(--cui-block-size)
}

    .cui-item--default .cui-item__decoration-left {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--cui-block-size);
        height: var(--cui-block-size)
    }

.cui-item--default__controls {
    height: var(--cui-block-size)
}

.cui-item--semi {
    background-color: var(--cui-item-bg-semi)
}

    .cui-item--semi .cui-item__title {
        color: var(--cui-item-color)
    }

    .cui-item--semi .cui-item__subtitle {
        color: var(--cui-item-color-subtitle-variant)
    }

    .cui-item--semi .cui-item__decoration-left .gc-icon, .cui-item--semi .cui-item__decoration-left .gc-item--core, .cui-item--semi .cui-item__decoration-left button > .gc-icon, .cui-item--semi .cui-item__decoration-left button > .gc-icon--core, .cui-item--semi .cui-item__decoration-right .gc-icon, .cui-item--semi .cui-item__decoration-right .gc-item--core, .cui-item--semi .cui-item__decoration-right button > .gc-icon, .cui-item--semi .cui-item__decoration-right button > .gc-icon--core, .cui-item--semi .cui-item__controls .gc-icon, .cui-item--semi .cui-item__controls .gc-item--core, .cui-item--semi .cui-item__controls button > .gc-icon, .cui-item--semi .cui-item__controls button > .gc-icon--core {
        color: var(--cui-item-color)
    }

        .cui-item--semi .cui-item__decoration-left .gc-icon svg, .cui-item--semi .cui-item__decoration-left .gc-icon svg path, .cui-item--semi .cui-item__decoration-left .gc-item--core svg, .cui-item--semi .cui-item__decoration-left .gc-item--core svg path, .cui-item--semi .cui-item__decoration-left button > .gc-icon svg, .cui-item--semi .cui-item__decoration-left button > .gc-icon svg path, .cui-item--semi .cui-item__decoration-left button > .gc-icon--core svg, .cui-item--semi .cui-item__decoration-left button > .gc-icon--core svg path, .cui-item--semi .cui-item__decoration-right .gc-icon svg, .cui-item--semi .cui-item__decoration-right .gc-icon svg path, .cui-item--semi .cui-item__decoration-right .gc-item--core svg, .cui-item--semi .cui-item__decoration-right .gc-item--core svg path, .cui-item--semi .cui-item__decoration-right button > .gc-icon svg, .cui-item--semi .cui-item__decoration-right button > .gc-icon svg path, .cui-item--semi .cui-item__decoration-right button > .gc-icon--core svg, .cui-item--semi .cui-item__decoration-right button > .gc-icon--core svg path, .cui-item--semi .cui-item__controls .gc-icon svg, .cui-item--semi .cui-item__controls .gc-icon svg path, .cui-item--semi .cui-item__controls .gc-item--core svg, .cui-item--semi .cui-item__controls .gc-item--core svg path, .cui-item--semi .cui-item__controls button > .gc-icon svg, .cui-item--semi .cui-item__controls button > .gc-icon svg path, .cui-item--semi .cui-item__controls button > .gc-icon--core svg, .cui-item--semi .cui-item__controls button > .gc-icon--core svg path {
            color: var(--cui-item-color);
            fill: var(--cui-item-color) !important
        }

    .cui-item--semi:hover, .cui-item--semi:is(.cui-item--selected) {
        background-color: var(--cui-item-bg-semi-selected)
    }

        .cui-item--semi:hover .cui-item__subtitle, .cui-item--semi:is(.cui-item--selected) .cui-item__subtitle {
            color: var(--cui-item-color-subtitle-variant)
        }

        .cui-item--semi:is(.cui-item--selected):hover {
            background-color: var(--cui-item-bg-semi-selected-hover)
        }

    .cui-item--semi:is(.cui-item--disabled) {
        background-color: var(--cui-item-bg-semi)
    }

        .cui-item--semi:is(.cui-item--disabled) .cui-item__title {
            color: var(--cui-item-color-disabled)
        }

        .cui-item--semi:is(.cui-item--disabled) .cui-item__subtitle {
            color: var(--cui-item-color-subtitle-disabled)
        }

        .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-left .gc-icon, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-left .gc-item--core, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon--core, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-right .gc-icon, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-right .gc-item--core, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon--core, .cui-item--semi:is(.cui-item--disabled) .cui-item__controls .gc-icon, .cui-item--semi:is(.cui-item--disabled) .cui-item__controls .gc-item--core, .cui-item--semi:is(.cui-item--disabled) .cui-item__controls button > .gc-icon, .cui-item--semi:is(.cui-item--disabled) .cui-item__controls button > .gc-icon--core {
            color: var(--cui-item-color-disabled)
        }

            .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-left .gc-icon svg, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-left .gc-icon svg path, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-left .gc-item--core svg, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-left .gc-item--core svg path, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon svg, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon svg path, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon--core svg, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon--core svg path, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-right .gc-icon svg, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-right .gc-icon svg path, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-right .gc-item--core svg, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-right .gc-item--core svg path, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon svg, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon svg path, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon--core svg, .cui-item--semi:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon--core svg path, .cui-item--semi:is(.cui-item--disabled) .cui-item__controls .gc-icon svg, .cui-item--semi:is(.cui-item--disabled) .cui-item__controls .gc-icon svg path, .cui-item--semi:is(.cui-item--disabled) .cui-item__controls .gc-item--core svg, .cui-item--semi:is(.cui-item--disabled) .cui-item__controls .gc-item--core svg path, .cui-item--semi:is(.cui-item--disabled) .cui-item__controls button > .gc-icon svg, .cui-item--semi:is(.cui-item--disabled) .cui-item__controls button > .gc-icon svg path, .cui-item--semi:is(.cui-item--disabled) .cui-item__controls button > .gc-icon--core svg, .cui-item--semi:is(.cui-item--disabled) .cui-item__controls button > .gc-icon--core svg path {
                color: var(--cui-item-color-disabled);
                fill: var(--cui-item-color-disabled) !important
            }

.cui-item--transparent {
    background-color: rgba(0,0,0,0)
}

    .cui-item--transparent .cui-item__title {
        color: var(--cui-item-color)
    }

    .cui-item--transparent .cui-item__subtitle {
        color: var(--cui-item-color-subtitle)
    }

    .cui-item--transparent .cui-item__decoration-left .gc-icon, .cui-item--transparent .cui-item__decoration-left .gc-item--core, .cui-item--transparent .cui-item__decoration-left button > .gc-icon, .cui-item--transparent .cui-item__decoration-left button > .gc-icon--core, .cui-item--transparent .cui-item__decoration-right .gc-icon, .cui-item--transparent .cui-item__decoration-right .gc-item--core, .cui-item--transparent .cui-item__decoration-right button > .gc-icon, .cui-item--transparent .cui-item__decoration-right button > .gc-icon--core, .cui-item--transparent .cui-item__controls .gc-icon, .cui-item--transparent .cui-item__controls .gc-item--core, .cui-item--transparent .cui-item__controls button > .gc-icon, .cui-item--transparent .cui-item__controls button > .gc-icon--core {
        color: var(--cui-item-color)
    }

        .cui-item--transparent .cui-item__decoration-left .gc-icon svg, .cui-item--transparent .cui-item__decoration-left .gc-icon svg path, .cui-item--transparent .cui-item__decoration-left .gc-item--core svg, .cui-item--transparent .cui-item__decoration-left .gc-item--core svg path, .cui-item--transparent .cui-item__decoration-left button > .gc-icon svg, .cui-item--transparent .cui-item__decoration-left button > .gc-icon svg path, .cui-item--transparent .cui-item__decoration-left button > .gc-icon--core svg, .cui-item--transparent .cui-item__decoration-left button > .gc-icon--core svg path, .cui-item--transparent .cui-item__decoration-right .gc-icon svg, .cui-item--transparent .cui-item__decoration-right .gc-icon svg path, .cui-item--transparent .cui-item__decoration-right .gc-item--core svg, .cui-item--transparent .cui-item__decoration-right .gc-item--core svg path, .cui-item--transparent .cui-item__decoration-right button > .gc-icon svg, .cui-item--transparent .cui-item__decoration-right button > .gc-icon svg path, .cui-item--transparent .cui-item__decoration-right button > .gc-icon--core svg, .cui-item--transparent .cui-item__decoration-right button > .gc-icon--core svg path, .cui-item--transparent .cui-item__controls .gc-icon svg, .cui-item--transparent .cui-item__controls .gc-icon svg path, .cui-item--transparent .cui-item__controls .gc-item--core svg, .cui-item--transparent .cui-item__controls .gc-item--core svg path, .cui-item--transparent .cui-item__controls button > .gc-icon svg, .cui-item--transparent .cui-item__controls button > .gc-icon svg path, .cui-item--transparent .cui-item__controls button > .gc-icon--core svg, .cui-item--transparent .cui-item__controls button > .gc-icon--core svg path {
            color: var(--cui-item-color);
            fill: var(--cui-item-color) !important
        }

    .cui-item--transparent:hover, .cui-item--transparent:is(.cui-item--selected) {
        background-color: var(--cui-item-bg-selected)
    }

        .cui-item--transparent:is(.cui-item--selected):hover {
            background-color: var(--cui-item-bg-selected-hover)
        }

            .cui-item--transparent:is(.cui-item--selected):hover .cui-item__subtitle {
                color: var(--cui-item-color-subtitle-variant)
            }

    .cui-item--transparent:is(.cui-item--disabled) {
        background-color: rgba(0,0,0,0)
    }

        .cui-item--transparent:is(.cui-item--disabled) .cui-item__title {
            color: var(--cui-item-color-disabled)
        }

        .cui-item--transparent:is(.cui-item--disabled) .cui-item__subtitle {
            color: var(--cui-item-color-subtitle-disabled)
        }

        .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-left .gc-icon, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-left .gc-item--core, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon--core, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-right .gc-icon, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-right .gc-item--core, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon--core, .cui-item--transparent:is(.cui-item--disabled) .cui-item__controls .gc-icon, .cui-item--transparent:is(.cui-item--disabled) .cui-item__controls .gc-item--core, .cui-item--transparent:is(.cui-item--disabled) .cui-item__controls button > .gc-icon, .cui-item--transparent:is(.cui-item--disabled) .cui-item__controls button > .gc-icon--core {
            color: var(--cui-item-color-disabled)
        }

            .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-left .gc-icon svg, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-left .gc-icon svg path, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-left .gc-item--core svg, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-left .gc-item--core svg path, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon svg, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon svg path, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon--core svg, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon--core svg path, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-right .gc-icon svg, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-right .gc-icon svg path, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-right .gc-item--core svg, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-right .gc-item--core svg path, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon svg, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon svg path, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon--core svg, .cui-item--transparent:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon--core svg path, .cui-item--transparent:is(.cui-item--disabled) .cui-item__controls .gc-icon svg, .cui-item--transparent:is(.cui-item--disabled) .cui-item__controls .gc-icon svg path, .cui-item--transparent:is(.cui-item--disabled) .cui-item__controls .gc-item--core svg, .cui-item--transparent:is(.cui-item--disabled) .cui-item__controls .gc-item--core svg path, .cui-item--transparent:is(.cui-item--disabled) .cui-item__controls button > .gc-icon svg, .cui-item--transparent:is(.cui-item--disabled) .cui-item__controls button > .gc-icon svg path, .cui-item--transparent:is(.cui-item--disabled) .cui-item__controls button > .gc-icon--core svg, .cui-item--transparent:is(.cui-item--disabled) .cui-item__controls button > .gc-icon--core svg path {
                color: var(--cui-item-color-disabled);
                fill: var(--cui-item-color-disabled) !important
            }

.cui-item--outlined {
    background-color: rgba(0,0,0,0);
    outline: 1px solid var(--cui-item-outline)
}

    .cui-item--outlined .cui-item__title {
        color: var(--cui-item-color)
    }

    .cui-item--outlined .cui-item__subtitle {
        color: var(--cui-item-color-subtitle)
    }

    .cui-item--outlined .cui-item__decoration-left .gc-icon, .cui-item--outlined .cui-item__decoration-left .gc-item--core, .cui-item--outlined .cui-item__decoration-left button > .gc-icon, .cui-item--outlined .cui-item__decoration-left button > .gc-icon--core, .cui-item--outlined .cui-item__decoration-right .gc-icon, .cui-item--outlined .cui-item__decoration-right .gc-item--core, .cui-item--outlined .cui-item__decoration-right button > .gc-icon, .cui-item--outlined .cui-item__decoration-right button > .gc-icon--core, .cui-item--outlined .cui-item__controls .gc-icon, .cui-item--outlined .cui-item__controls .gc-item--core, .cui-item--outlined .cui-item__controls button > .gc-icon, .cui-item--outlined .cui-item__controls button > .gc-icon--core {
        color: var(--cui-item-color)
    }

        .cui-item--outlined .cui-item__decoration-left .gc-icon svg, .cui-item--outlined .cui-item__decoration-left .gc-icon svg path, .cui-item--outlined .cui-item__decoration-left .gc-item--core svg, .cui-item--outlined .cui-item__decoration-left .gc-item--core svg path, .cui-item--outlined .cui-item__decoration-left button > .gc-icon svg, .cui-item--outlined .cui-item__decoration-left button > .gc-icon svg path, .cui-item--outlined .cui-item__decoration-left button > .gc-icon--core svg, .cui-item--outlined .cui-item__decoration-left button > .gc-icon--core svg path, .cui-item--outlined .cui-item__decoration-right .gc-icon svg, .cui-item--outlined .cui-item__decoration-right .gc-icon svg path, .cui-item--outlined .cui-item__decoration-right .gc-item--core svg, .cui-item--outlined .cui-item__decoration-right .gc-item--core svg path, .cui-item--outlined .cui-item__decoration-right button > .gc-icon svg, .cui-item--outlined .cui-item__decoration-right button > .gc-icon svg path, .cui-item--outlined .cui-item__decoration-right button > .gc-icon--core svg, .cui-item--outlined .cui-item__decoration-right button > .gc-icon--core svg path, .cui-item--outlined .cui-item__controls .gc-icon svg, .cui-item--outlined .cui-item__controls .gc-icon svg path, .cui-item--outlined .cui-item__controls .gc-item--core svg, .cui-item--outlined .cui-item__controls .gc-item--core svg path, .cui-item--outlined .cui-item__controls button > .gc-icon svg, .cui-item--outlined .cui-item__controls button > .gc-icon svg path, .cui-item--outlined .cui-item__controls button > .gc-icon--core svg, .cui-item--outlined .cui-item__controls button > .gc-icon--core svg path {
            color: var(--cui-item-color);
            fill: var(--cui-item-color) !important
        }

    .cui-item--outlined:hover, .cui-item--outlined:is(.cui-item--selected) {
        background-color: var(--cui-item-bg-selected)
    }

        .cui-item--outlined:is(.cui-item--selected):hover {
            background-color: var(--cui-item-bg-selected-hover);
            outline-color: var(--cui-item-outline)
        }

            .cui-item--outlined:is(.cui-item--selected):hover .cui-item__subtitle {
                color: var(--cui-item-color-subtitle-variant)
            }

    .cui-item--outlined:is(.cui-item--disabled) {
        background-color: rgba(0,0,0,0);
        outline-color: var(--cui-item-outline-disabled)
    }

        .cui-item--outlined:is(.cui-item--disabled) .cui-item__title {
            color: var(--cui-item-color-disabled)
        }

        .cui-item--outlined:is(.cui-item--disabled) .cui-item__subtitle {
            color: var(--cui-item-color-subtitle-disabled)
        }

        .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-left .gc-icon, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-left .gc-item--core, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon--core, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-right .gc-icon, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-right .gc-item--core, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon--core, .cui-item--outlined:is(.cui-item--disabled) .cui-item__controls .gc-icon, .cui-item--outlined:is(.cui-item--disabled) .cui-item__controls .gc-item--core, .cui-item--outlined:is(.cui-item--disabled) .cui-item__controls button > .gc-icon, .cui-item--outlined:is(.cui-item--disabled) .cui-item__controls button > .gc-icon--core {
            color: var(--cui-item-color-disabled)
        }

            .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-left .gc-icon svg, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-left .gc-icon svg path, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-left .gc-item--core svg, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-left .gc-item--core svg path, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon svg, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon svg path, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon--core svg, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon--core svg path, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-right .gc-icon svg, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-right .gc-icon svg path, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-right .gc-item--core svg, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-right .gc-item--core svg path, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon svg, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon svg path, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon--core svg, .cui-item--outlined:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon--core svg path, .cui-item--outlined:is(.cui-item--disabled) .cui-item__controls .gc-icon svg, .cui-item--outlined:is(.cui-item--disabled) .cui-item__controls .gc-icon svg path, .cui-item--outlined:is(.cui-item--disabled) .cui-item__controls .gc-item--core svg, .cui-item--outlined:is(.cui-item--disabled) .cui-item__controls .gc-item--core svg path, .cui-item--outlined:is(.cui-item--disabled) .cui-item__controls button > .gc-icon svg, .cui-item--outlined:is(.cui-item--disabled) .cui-item__controls button > .gc-icon svg path, .cui-item--outlined:is(.cui-item--disabled) .cui-item__controls button > .gc-icon--core svg, .cui-item--outlined:is(.cui-item--disabled) .cui-item__controls button > .gc-icon--core svg path {
                color: var(--cui-item-color-disabled);
                fill: var(--cui-item-color-disabled) !important
            }

.cui-item--solid {
    background-color: var(--cui-item-bg-solid)
}

    .cui-item--solid .cui-item__title {
        color: var(--cui-item-color-solid)
    }

    .cui-item--solid .cui-item__subtitle {
        color: var(--cui-item-color-solid-subtitle)
    }

    .cui-item--solid .cui-item__decoration-left .gc-icon, .cui-item--solid .cui-item__decoration-left .gc-item--core, .cui-item--solid .cui-item__decoration-left button > .gc-icon, .cui-item--solid .cui-item__decoration-left button > .gc-icon--core, .cui-item--solid .cui-item__decoration-right .gc-icon, .cui-item--solid .cui-item__decoration-right .gc-item--core, .cui-item--solid .cui-item__decoration-right button > .gc-icon, .cui-item--solid .cui-item__decoration-right button > .gc-icon--core, .cui-item--solid .cui-item__controls .gc-icon, .cui-item--solid .cui-item__controls .gc-item--core, .cui-item--solid .cui-item__controls button > .gc-icon, .cui-item--solid .cui-item__controls button > .gc-icon--core {
        color: var(--cui-item-color-solid)
    }

        .cui-item--solid .cui-item__decoration-left .gc-icon svg, .cui-item--solid .cui-item__decoration-left .gc-icon svg path, .cui-item--solid .cui-item__decoration-left .gc-item--core svg, .cui-item--solid .cui-item__decoration-left .gc-item--core svg path, .cui-item--solid .cui-item__decoration-left button > .gc-icon svg, .cui-item--solid .cui-item__decoration-left button > .gc-icon svg path, .cui-item--solid .cui-item__decoration-left button > .gc-icon--core svg, .cui-item--solid .cui-item__decoration-left button > .gc-icon--core svg path, .cui-item--solid .cui-item__decoration-right .gc-icon svg, .cui-item--solid .cui-item__decoration-right .gc-icon svg path, .cui-item--solid .cui-item__decoration-right .gc-item--core svg, .cui-item--solid .cui-item__decoration-right .gc-item--core svg path, .cui-item--solid .cui-item__decoration-right button > .gc-icon svg, .cui-item--solid .cui-item__decoration-right button > .gc-icon svg path, .cui-item--solid .cui-item__decoration-right button > .gc-icon--core svg, .cui-item--solid .cui-item__decoration-right button > .gc-icon--core svg path, .cui-item--solid .cui-item__controls .gc-icon svg, .cui-item--solid .cui-item__controls .gc-icon svg path, .cui-item--solid .cui-item__controls .gc-item--core svg, .cui-item--solid .cui-item__controls .gc-item--core svg path, .cui-item--solid .cui-item__controls button > .gc-icon svg, .cui-item--solid .cui-item__controls button > .gc-icon svg path, .cui-item--solid .cui-item__controls button > .gc-icon--core svg, .cui-item--solid .cui-item__controls button > .gc-icon--core svg path {
            color: var(--cui-item-color-solid);
            fill: var(--cui-item-color-solid) !important
        }

    .cui-item--solid:hover, .cui-item--solid:is(.cui-item--selected) {
        background-color: var(--cui-item-bg-solid-selected)
    }

        .cui-item--solid:is(.cui-item--selected):hover {
            background-color: var(--cui-item-bg-solid-selected-hover)
        }

    .cui-item--solid:is(.cui-item--disabled) {
        background-color: var(--cui-item-bg-solid)
    }

        .cui-item--solid:is(.cui-item--disabled) .cui-item__title {
            color: var(--cui-item-color-solid-disabled)
        }

        .cui-item--solid:is(.cui-item--disabled) .cui-item__subtitle {
            color: var(--cui-item-color-solid-subtitle-disabled)
        }

        .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-left .gc-icon, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-left .gc-item--core, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon--core, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-right .gc-icon, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-right .gc-item--core, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon--core, .cui-item--solid:is(.cui-item--disabled) .cui-item__controls .gc-icon, .cui-item--solid:is(.cui-item--disabled) .cui-item__controls .gc-item--core, .cui-item--solid:is(.cui-item--disabled) .cui-item__controls button > .gc-icon, .cui-item--solid:is(.cui-item--disabled) .cui-item__controls button > .gc-icon--core {
            color: var(--cui-item-color-solid-disabled)
        }

            .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-left .gc-icon svg, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-left .gc-icon svg path, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-left .gc-item--core svg, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-left .gc-item--core svg path, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon svg, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon svg path, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon--core svg, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-left button > .gc-icon--core svg path, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-right .gc-icon svg, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-right .gc-icon svg path, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-right .gc-item--core svg, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-right .gc-item--core svg path, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon svg, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon svg path, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon--core svg, .cui-item--solid:is(.cui-item--disabled) .cui-item__decoration-right button > .gc-icon--core svg path, .cui-item--solid:is(.cui-item--disabled) .cui-item__controls .gc-icon svg, .cui-item--solid:is(.cui-item--disabled) .cui-item__controls .gc-icon svg path, .cui-item--solid:is(.cui-item--disabled) .cui-item__controls .gc-item--core svg, .cui-item--solid:is(.cui-item--disabled) .cui-item__controls .gc-item--core svg path, .cui-item--solid:is(.cui-item--disabled) .cui-item__controls button > .gc-icon svg, .cui-item--solid:is(.cui-item--disabled) .cui-item__controls button > .gc-icon svg path, .cui-item--solid:is(.cui-item--disabled) .cui-item__controls button > .gc-icon--core svg, .cui-item--solid:is(.cui-item--disabled) .cui-item__controls button > .gc-icon--core svg path {
                color: var(--cui-item-color-solid-disabled);
                fill: var(--cui-item-color-solid-disabled) !important
            }

.cui-item > span, .cui-item__title, .cui-item__subtitle {
    display: block;
    overflow: hidden;
    user-select: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--cui-item-color);
    font-size: var(--cui-text-size);
    line-height: var(--cui-block-size)
}

.cui-item__title {
    line-height: normal
}

.cui-item__subtitle {
    color: var(--cui-item-color-subtitle);
    line-height: 15px
}

.cui-item__text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 4px 0;
    align-self: center;
    overflow: hidden
}

.cui-item__controls {
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: flex-end;
    padding-right: var(--cui-padding-xs);
    flex-grow: 0;
    flex-shrink: 0
}

.cui-list {
    display: flex;
    margin: 0;
    padding: 0
}

.cui-list--row {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start
}

.cui-list--column {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start
}

.cui-list--wrap {
    flex-wrap: wrap
}

.cui-list--gap-small {
    gap: var(--cui-padding-xs)
}

.cui-list--gap-medium {
    gap: var(--cui-padding-sm)
}

.cui-list--gap-large {
    gap: var(--cui-padding)
}

.cui-list--padding-small {
    padding: var(--cui-padding-xs)
}

.cui-list--padding-medium {
    padding: var(--cui-padding-sm)
}

.cui-list--padding-large {
    padding: var(--cui-padding)
}

@keyframes cui_a_loader_circle {
    0% {
        transform: rotate(0deg);
        stroke-dashoffset: 50%
    }

    50% {
        transform: rotate(180deg);
        stroke-dashoffset: 150%
    }

    100% {
        transform: rotate(360deg);
        stroke-dashoffset: 50%
    }
}

.cui-loader-circle {
    --fill-bg: var(--cui-neutral-50);
    --fill-bg-inverted: var(--cui-neutral-inverted-600);
    --fill-bg-semi: var(--cui-neutral-100);
    --fill-bg-semi-inverted: var(--cui-neutral-inverted-400);
    --fill-bg-solid: var(--cui-neutral-300);
    --fill-bg-solid-inverted: var(--cui-neutral-inverted-300);
    --fill-fg: var(--cui-neutral-500);
    --fill-fg-inverted: var(--cui-white);
    --loader-fill-bg: var(--fill-bg);
    --loader-fill-fg: var(--fill-fg);
    --size: 16px;
    width: var(--size);
    height: var(--size);
    transform: rotate(-90deg)
}

    .cui-loader-circle circle {
        fill: rgba(0,0,0,0);
        cx: calc(var(--size)/2);
        cy: calc(var(--size)/2)
    }

.cui-loader-circle__background {
    r: calc(var(--size)/2 - 1px);
    stroke-width: 1px;
    stroke: var(--loader-fill-bg);
    transition: stroke .2s ease-in-out
}

.cui-loader-circle__progress {
    r: calc(var(--size)/2 - 1px);
    stroke-linecap: round;
    stroke-dasharray: calc((var(--size) - 2px)*3.1415926536);
    stroke-width: 2px;
    stroke: var(--loader-fill-fg);
    transition: stroke-dashoffset .6s ease-in-out,stroke .2s ease-in-out
}

.cui-loader-circle--indeterminate .cui-loader-circle__progress {
    transform-origin: center center;
    animation: cui_a_loader_circle 1.2s linear infinite
}

.cui-loader-circle--block {
    display: block
}

.cui-loader-circle--small {
    --size: 14px
}

.cui-loader-circle--large {
    --size: 20px
}

    .cui-loader-circle--large .cui-loader-circle__background {
        r: calc(var(--size)/2 - 1px);
        stroke-width: 2px
    }

.cui-loader-circle--primary {
    --fill-bg: var(--cui-primary-50);
    --fill-bg-inverted: var(--cui-primary-inverted-600);
    --fill-bg-semi: var(--cui-primary-100);
    --fill-bg-semi-inverted: var(--cui-primary-inverted-400);
    --fill-bg-solid: var(--cui-primary-300);
    --fill-bg-solid-inverted: var(--cui-primary-inverted-300);
    --fill-fg: var(--cui-primary-500)
}

.cui-loader-circle--warning {
    --fill-bg: var(--cui-warning-50);
    --fill-bg-inverted: var(--cui-warning-inverted-600);
    --fill-bg-semi: var(--cui-warning-100);
    --fill-bg-semi-inverted: var(--cui-warning-inverted-400);
    --fill-bg-solid: var(--cui-warning-300);
    --fill-bg-solid-inverted: var(--cui-warning-inverted-300);
    --fill-fg: var(--cui-warning-500)
}

.cui-loader-circle--error {
    --fill-bg: var(--cui-error-50);
    --fill-bg-inverted: var(--cui-error-inverted-600);
    --fill-bg-semi: var(--cui-error-100);
    --fill-bg-semi-inverted: var(--cui-error-inverted-400);
    --fill-bg-solid: var(--cui-error-300);
    --fill-bg-solid-inverted: var(--cui-error-inverted-300);
    --fill-fg: var(--cui-error-500)
}

.cui-loader-circle--inverted {
    --loader-fill-bg: var(--fill-bg-inverted);
    --loader-fill-fg: var(--fill-fg-inverted)
}

.cui-loader-circle--semi {
    --loader-fill-bg: var(--fill-bg-semi)
}

    .cui-loader-circle--semi:is(.cui-loader-circle--inverted) {
        --loader-fill-bg: var(--fill-bg-semi-inverted)
    }

.cui-loader-circle--solid {
    --loader-fill-bg: var(--fill-bg-solid)
}

    .cui-loader-circle--solid:is(.cui-loader-circle--inverted) {
        --loader-fill-bg: var(--fill-bg-solid-inverted)
    }