/* jQuery Controls */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: var(--border-radius);
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: var(--border-radius);
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: var(--border-radius);
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: var(--border-radius);
}

.ui-widget {
    --ui-widget-padding-x: 12px;
    font-family: var(--regular-font);
    font-size: var(--font-size-regular);
    line-height: 1.4em;
    padding: calc(0.5 * var(--input-height-regular) - 0.5 * 2px - 0.5 * 1.4em) var(--ui-widget-padding-x);
    border-color: var(--palette-secondary-main);
    background-color: var(--palette-background-input);
}
    .ui-widget.error {
        color: var(--palette-error-text);
        border-color: var(--palette-error-text);
    }

    small .ui-widget,
    small .ui-widget:hover {
        --ui-widget-padding-x: 6px;
        font-size: var(--font-size-small);
        min-height: 0;
        padding: 4px var(--ui-widget-padding-x);
    }

    .ui-widget h3 {
        font-family: inherit;
        font-weight: bold;
    }
    .ui-widget *:focus {
        outline: none;
    }

.ui-widget-content {
    padding: 0;
    background-color: var(--palette-background-input);
    border: 1px solid var(--palette-secondary-main);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
    .ui-widget-content .ui-state-active {
        background-color: var(--palette-primary-main);
        border-color: var(--palette-primary-dim);
        color: var(--palette-primary-text);
    }

    .ui-widget-content h2:first-of-type {
        margin-top: 0;
    }

.ui-widget-header {
    margin: 0px;
    margin-bottom: var(--spacing);
    background-color: var(--palette-primary-main);
    border-color: var(--palette-primary-main);
    color: var(--palette-primary-text);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
    .ui-widget-header .ui-state-active {
        background-color: var(--palette-background-input);
        border-color: var(--palette-primary-main);
        color: var(--palette-background-text);
    }
        .ui-widget-header .ui-state-active a {
            color: inherit;
        }

    .ui-widget-header input,
    .ui-widget-header select {
        min-height: initial;
        padding: 4px 6px;
    }

.ui-state-default {
    background-color: var(--palette-primary-dim);
    border-color: var(--palette-primary-dim);
    color: var(--palette-background-input);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.ui-state-hover {
    border-color: transparent;
}
.ui-state-focus {
    border-color: var(--palette-action-selected);
}
.ui-state-active {
    background-color: var(--palette-primary-main);
}

.ui-state-highlight {
    background-color: var(--palette-primary-main);
}

ul.ui-widget,
.ui-widget ul {
    padding: 0;
    margin: 0 0;
    list-style: none;
}
    ul.ui-widget li,
    .ui-widget ul li {
        position: relative;
        margin: 0;
        padding: 0;
        text-align: left;
    }
        ul.ui-widget li::before,
        .ui-widget ul li::before {
            display: none;
        }

    .ui-widget .ui-dialog-content ul li {
        padding-left: var(--list-indent);
    }
        .ui-widget .ui-dialog-content ul li::before {
            position: absolute;
            content: '';
            display: inline-block;
            width: var(--font-size-large);
            height: var(--font-size-large);
            left: 0em;
            background-image: url('../gfx-2020/style/list-item-bullet.svg');
            background-repeat: no-repeat;
            background-size: 8px auto;
            background-position: center center;
        }


/* jQuery Icons */
.ui-icon.ui-icon-triangle-1-s {
    background-image: url(../gfx-2020/icons/triangle-s.ffffff.svg);
    background-position: center center;
    background-size: 12px 9px;
}
    .ui-icon.ui-icon-triangle-1-s.secondary {
        background-image: url(../gfx-2020/icons/triangle-s.888888.svg);
    }
    .error .ui-icon.ui-icon-triangle-1-s {
        background-image: url(../gfx-2020/icons/triangle-s.d12f19.svg);
    }
.ui-icon.ui-icon-triangle-1-e {
    background-image: url(../gfx-2020/icons/triangle-e.ffffff.svg);
    background-position: center center;
    background-size: 9px 12px;
}
.ui-icon.ui-icon-triangle-1-n {
    background-image: url(../gfx-2020/icons/triangle-n.ffffff.svg);
    background-position: center center;
    background-size: 12px 9px;
}
    .ui-icon.ui-icon-triangle-1-n.color-secondary {
        background-image: url(../gfx-2020/icons/triangle-n.888888.svg);
    }
.ui-icon.ui-icon-close {
    background-image: url(../gfx-2020/icons/close.ffffff.svg);
    background-position: center center;
    background-size: 16px 16px;
}
    .ui-icon.ui-icon-close.text {
        background-image: url(../gfx-2020/icons/close.000000.svg);
    }

/* Accordion */
.ui-accordion.ui-widget {
    padding: 0;
    background-color: var(--palette-background-paper);
}
    .ui-accordion .ui-accordion-content {
        --accordion-content-padding: 30px;
        padding: calc(0.6 * var(--accordion-content-padding)) var(--accordion-content-padding);
    }
    .ui-accordion .ui-widget-content {
        background-color: var(--palette-background-paper);
    }
    @media screen and (max-width: 700px) {
        .ui-accordion .ui-accordion-content {
            --accordion-content-padding: 20px;
        }
    }
    @media screen and (max-width: 400px) {
        .ui-accordion .ui-accordion-content {
            --accordion-content-padding: 10px;
        }
    }

/* Select */
.ui-selectmenu-button.ui-button {
    width: auto;
    box-sizing: border-box;
}
    .input .ui-selectmenu-button.ui-button {
        width: 100%;
    }
    .ui-selectmenu-button:active {
        background-color: var(--palette-background-input);
    }
    .ui-selectmenu-button .ui-selectmenu-icon.ui-icon {
        --this-height: 16px;
        position: absolute;
        height: var(--this-height);
        top: calc(50% - 0.5 * var(--this-height));
        right: var(--ui-widget-padding-x);
        float: none;
        margin-top: 1px;
    }
.ui-selectmenu-menu .ui-widget-content {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

/* Multiselect */
.ui-multiselect-header .ui-multiselect-filter input {
    padding: var(--spacing);
    border-color: var(--palette-secondary-main);
}
.ui-multiselect-checkboxes label {
    border-radius: 0;
    margin: 0;
}
    .ui-multiselect-checkboxes label.ui-state-hover,
    .ui-multiselect-checkboxes label.ui-state-hover.ui-state-active {
        background-color: var(--palette-primary-main);
        border-color: var(--palette-primary-main);
        color: var(--palette-primary-text);
    }
    .ui-multiselect-checkboxes label.ui-state-active {
        background-color: var(--palette-action-selected);
        border-color: var(--palette-action-selected);
        color: var(--palette-background);
    }
    .ui-multiselect-checkboxes label > input[type=radio] + span,
    .ui-multiselect-checkboxes label > input[type=checkbox] + span {
        text-indent: 0;
        margin: 0;
        color: inherit;
    }
    .ui-multiselect-checkboxes label > input[type=radio] + span {
        min-height: 0;
        padding: 0;
        font-weight: normal;
    }
        .ui-multiselect-checkboxes label > input[type=radio] + span::before,
        .ui-multiselect-checkboxes label > input[type=radio] + span::after {
            display: none;
        }

/* Datepicker */
.ui-datepicker .ui-widget-header .ui-state-hover {
    background-color: var(--palette-primary-dim);
    border-color: var(--palette-primary-dim);
}
table.ui-datepicker-calendar {
    width: calc(100% - 2 * var(--spacing));
    margin: var(--spacing);
    margin-top: 0;
}
    table.ui-datepicker-calendar th {
        padding-top: var(--spacing);
        padding-bottom: var(--spacing);
    }

.ui-datepicker .ui-icon-circle-triangle-w {
    background-image: url(../gfx-2020/icons/triangle-w.ffffff.svg);
    background-position: center center;
    background-size: 9px 12px;
}
.ui-datepicker .ui-icon-circle-triangle-e {
    background-image: url(../gfx-2020/icons/triangle-e.ffffff.svg);
    background-position: center center;
    background-size: 9px 12px;
}

/* Tabs */
.ui-tabs .ui-tabs-nav {
    border: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
}
    .ui-tabs .ui-tabs-nav li {
        margin-top: calc(0.5 * var(--spacing));
        margin-bottom: calc(0.5 * var(--spacing));
        margin-left: calc(0.5 * var(--spacing));
        margin-right: calc(0.5 * var(--spacing));
        padding-bottom: 0;
        border-width: 2px;
        border-bottom: none;
        background-color: var(--palette-background-dim-2);
        border-color: var(--palette-background-dim-2);
    }
        .ui-tabs .ui-tabs-nav li.ui-tabs-active {
            margin-bottom: 0;
            padding-bottom: var(--spacing);
            background-color: var(--palette-background-paper);
            border-color: var(--palette-background-paper);
        }
        .ui-tabs .ui-tabs-nav .ui-state-hover:not(.ui-tabs-active) {
            background-color: var(--palette-background-dim-1);
            border-color: var(--palette-background-dim-1);
        }
        .ui-tabs .ui-tabs-nav li.ui-state-focus {
            border-color: var(--palette-action-selected);
        }

    .ui-tabs .ui-tabs-panel {
        --tabs-content-padding: 30px;
        --tabs-content-padding-x: var(--tabs-content-padding);
        --tabs-content-padding-y: var(--tabs-content-padding);
        padding: calc(0.6 * var(--tabs-content-padding-x)) var(--tabs-content-padding-y);
    }
    @media screen and (max-width: 700px) {
        .ui-tabs .ui-tabs-panel {
            --tabs-content-padding: 20px;
        }
    }
    @media screen and (max-width: 400px) {
        .ui-tabs .ui-tabs-panel {
            --tabs-content-padding: 10px;
        }
    }
    .ui-tabs .ui-widget-content {
        background-color: var(--palette-background-paper);
    }