/* Reset */

.w {
    font-family: var(--font-normal);
    font-weight: normal;
    font-style: normal;
    line-height: 0;
    font-size: 0;
}
.w * {
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    line-height: inherit;
    background: none;
    border: none;
    box-sizing: border-box;
    outline: none;
    cursor: inherit;
}
.w *::before, .w *::after {
    font: inherit;
    color: inherit;
    box-sizing: inherit;
}


/* Structured Values */

.w {

    --pal-black: #000000;
    --pal-dark-smoke: #555555;
    --pal-half-dark-smoke: #717171;
    --pal-smoke: #8e8e8e;
    --pal-dark-snow: #e5e5e5;
    --pal-snow: #f5f5f5;
    --pal-white: #ffffff;

    --pal-red: #f72915;
    --pal-dark-red: #aa0000;
    --pal-light-red: #ffa39a;
    --pal-pink: #ee3771;
    --pal-dark-pink: #be175e;
    --pal-light-pink: #f290b1;
    --pal-purple: #c464db;
    --pal-dark-purple: #962eaa;
    --pal-light-purple: #cd95d7;
    --pal-blue: #5dafff;
    --pal-dark-blue: #167abc;
    --pal-light-blue: #b5e5fb;
    --pal-green: #53b873;
    --pal-dark-green: #15955a;
    --pal-light-green: #9dcb6a;
    --pal-yellow: #ffcf0f;
    --pal-dark-yellow: #e2ae33;
    --pal-light-yellow: #fce196;
    --pal-orange: #fa6a01;
    --pal-dark-orange: #e64e29;
    --pal-light-orange: #ffb25d;

    --pal-black-05: hsla(0, 0%, 0%, .05);
    --pal-black-20: hsla(0, 0%, 0%, .20);
    --pal-black-40: hsla(0, 0%, 0%, .40);
    --pal-smoke-40: hsla(0, 0%, 56%, .40);
    --pal-smoke-60: hsla(0, 0%, 56%, .60);
    --pal-smoke-80: hsla(0, 0%, 56%, .80);
    --pal-dark-snow-40: hsla(0, 0%, 90%, .40);
    --pal-dark-snow-50: hsla(0, 0%, 90%, .50);
    --pal-snow-40: hsla(0, 0%, 96%, .40);
    --pal-snow-50: hsla(0, 0%, 96%, .50);
    --pal-snow-80: hsla(0, 0%, 96%, .80);

    --pal-light-blue-20: hsla(199, 90%, 85%, .20);
    --pal-light-blue-40: hsla(199, 90%, 85%, .40);

    --font-normal: "PT Sans", sans-serif;
    --font-title:  "PT Sans Caption", sans-serif;
    --font-icon:   "Material Icons", sans-serif;

    --dialog-title-height: 56px;
    --icon-bar-width: 64px;

    --field-line-height: 32px;
    --field-label-space: var(--space-small);

    --field-text-fsize: 14px;

    --list-line-height-extra-small: 24px;
    --list-line-height-small: 32px;
    --list-line-height-medium: 40px;
    --list-line-height-large: 48px;
    --list-line-height-extra-large: 64px;
    --list-line-height: var(--list-line-height-small);
    --list-scrollbar-height: 16px;
    --list-header-height: 24px;

    --list-add-height: 0px;

    --textarea-line-height: 16px;
    --static-text-line-height: var(--label-medium-lheight);

    --space-extra-small: 4px;
    --space-small: 8px;
    --space-medium: 16px;
    --space-large: 24px;
    --space-extra-large: 32px;

    --space-field-top: var(--space-medium);
    --space-field-half: 8px;
    --space-field-half-medium-compl: 8px;
    --space-field-half-large-compl: 16px;

    --space-medium-medium-compl: 0px;
    --space-medium-large-compl: 8px;

    --section-top-space: var(--space-medium-large-compl);
    --section-horizontal-space: var(--space-field-half-large-compl);
    --section-bottom-space: var(--space-large);

    --window-back-color: var(--pal-white);

    --shadow-small:  0 0 4px hsla(0, 0%, 0%, .2);
    --shadow-medium: 0 0 5px hsla(0, 0%, 0%, .4);
    --shadow-large:  0 0 6px hsla(0, 0%, 0%, .8);

    --text-color: var(--pal-black);
    --text-disabled-color: var(--pal-black-40);
    --text-fsize: 14px;

    --icon-color: var(--pal-smoke);

    --border-default: 1px solid var(--pal-dark-snow);

    --label-small-color: var(--pal-smoke);
    --label-small-fsize: 12px;
    --label-small-lheight: 16px;
    --label-medium-fsize: 14px;
    --label-medium-lheight: 18px;
    --label-large-fsize: 16px;
    --label-large-lheight: 22px;

    --label-title-color: var(--pal-dark-smoke);
    --label-title-small-fsize: 14px;
    --label-title-small-lheight: 18px;
    --label-title-medium-fsize: 16px;
    --label-title-medium-lheight: 22px;
    --label-title-large-fsize: 18px;
    --label-title-large-lheight: 24px;
    --label-title-extra-large-fsize: 24px;
    --label-title-extra-large-lheight: 30px;

    --tag-color: var(--pal-white);

    --sel-fore-color: var(--pal-black);
    --sel-back-color: var(--pal-light-blue-40);
    --sel-box-color: var(--pal-blue);
    --sel-disabled-back-color: var(--pal-light-blue-20);

    --button-text-disabled-color: var(--pal-smoke-40);
    --button-hover-back-color: var(--pal-black-05);
    --button-hover-front-color: var(--text-color);

    --list-hover-back-color: var(--pal-black-05);

    --input-invalid-color: var(--pal-red);

    --tooltip-color: var(--pal-half-dark-smoke);
    --tooltip-error-color: var(--pal-dark-red);

    --inline-display: inline-block;

}
.w * {
    --inline-display: inline-block;
}


/* Sections */

.w section {
    display: flex;
    --inline-display: inline-flex;
    padding: var(--section-top-space) var(--section-horizontal-space) var(--section-bottom-space);
    flex-direction: column;
    flex-shrink: 0;
}
.w section.w-medium-spacing {
    --section-top-space: var(--space-medium-medium-compl);     /* Alternate (medium) spacing */
    --section-horizontal-space: var(--space-field-half-medium-compl);
    --section-bottom-space: var(--space-medium);
}
.w section.w-small-spacing {
    --section-top-space: var(--space-medium-medium-compl);     /* Alternate (small) spacing */
    --section-horizontal-space: var(--space-field-half-medium-compl);
    --section-bottom-space: var(--space-small);
    --space-field-top: var(--space-small);
}

/* Main content sections directly below top navs have no top spacing */
.w wing-main-dialog > header + nav + section,
.w wing-modal-dialog > header + nav + section,
.w wing-dialog > header + nav + section {
    --section-top-space: 0;
}


/* Client Bar */

.w .w-client-bar {
    height: 64px;
    padding: 0 var(--space-field-half-large-compl);
    background: var(--pal-dark-smoke);
}


/* Topic Boxes */

.w section.w-topic {
    position: relative;
    --section-top-space: var(--space-medium-medium-compl);                  /* Alternate (medium) internal spacing for Topic and Sections inside Topics */
    --section-horizontal-space: var(--space-field-half-medium-compl);
    --section-bottom-space: var(--space-medium);
    border-style: solid;
    border-color: transparent;
    border-width: var(--space-medium) var(--space-field-half) 0;            /* External spacing */
    border-radius: 4px;
}
.w section.w-topic::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid var(--pal-dark-snow);
    border-radius: 4px;
    pointer-events: none;
}
.w section.w-topic.w-border-list::after {
    border-radius: 0;
    border-left: none;
    border-right: none;
}


/* Cards */

.w wing-card {
    display: flex;
    --inline-display: inline-flex;
    position: relative;
    padding: 0;
    border: none;
    border-radius: 4px;
    box-shadow: var(--shadow-small);
    overflow: hidden;
    flex-direction: column;
    flex-shrink: 0;
    --section-top-space: var(--space-medium-medium-compl);                  /* Alternate (medium) internal spacing for Sections inside Cards */
    --section-horizontal-space: var(--space-field-half-medium-compl);
    --section-bottom-space: var(--space-medium);
}
.w wing-card-header,
.w wing-card-header.w-small {
    display: flex;
    position: relative;
    min-height: 40px;
    padding: var(--space-small) var(--space-field-half-medium-compl);
    box-shadow: inset 0 -1px 0 var(--pal-dark-snow);
    align-items: center;
}
.w wing-card-header.w-medium {
    min-height: 48px;
}
.w wing-card-header.w-large {
    min-height: 56px;
}
.w wing-card-header.w-extra-large {
    min-height: 64px;
}
.w wing-card.w-collapsible > wing-card-header {     /* must apply only to this Card, not on child Cards */
    padding-right: 36px;
}
.w wing-card-body {
    display: flex;
    flex: 1 1 auto;
    padding: var(--space-medium-medium-compl) var(--space-field-half-medium-compl) var(--space-medium);
    flex-direction: column;
    /*overflow: hidden;*/
    overflow-y: auto;
}
.w wing-card-footer {
    display: flex;
    min-height: 40px;
    padding: var(--space-small) var(--space-field-half-medium-compl);
    margin-top: auto;
    border-top: 1px solid var(--pal-dark-snow);
    align-items: center;
    justify-content: flex-end;
}
.w wing-card button.w-card-collapse-button {
    position: absolute;
    top: 0; bottom: 0;
    right: 0;
    min-width: 28px;
    height: 32px;
    padding: 0 10px 0 0;
    margin: auto 8px auto 0;
    font-family: var(--font-icon);
    font-size: 18px;
    line-height: 32px;
    color: var(--icon-color);
    background: none;
    --button-hover-back-color: none;
    border: none;
    text-align: right;
}
.w wing-card.w-disabled button.w-card-collapse-button {
    color: var(--pal-dark-snow);
}
.w wing-card.w-card-collapsed wing-card-header,
.w wing-card.w-no-header-border wing-card-header {
    box-shadow: none;
}
.w wing-card.w-card-collapsed wing-card-body,
.w wing-card.w-card-collapsed wing-card-footer {
    display: none;
}
.w wing-card.w-item-selected {
    box-shadow: var(--shadow-large);
}
.w wing-card.w-item-selectable {
    cursor: pointer;
}
.w wing-card.w-border-list-line {
    border-radius: 0;
    box-shadow: inset 0 -1px 0 var(--pal-dark-snow);
}


/* Rows and Columns */

.w wing-row {
    display: flex  !important;
    --inline-display: inline-flex;
    flex-direction: row;
    /*flex-shrink: 0;*/
    align-items: flex-end;
    overflow-y: visible;
}
.w wing-col {
    display: flex;
    --inline-display: inline-flex;
    flex-direction: column;
    flex-shrink: 0;
}


/* Toolbars, Navs */

.w nav {
    display: flex  !important;
    --inline-display: inline-flex;
    align-items: center;
    /*flex-shrink: 0;*/
    padding: var(--space-field-top) 0 0;
}
/* Spacing for navs directly inside Dialogs */
.w wing-main-dialog > nav,
.w wing-dialog > nav,
.w wing-modal-dialog > nav {
    padding: var(--space-large) var(--space-field-half-large-compl) 0;
}
/* Spacing for navs directly inside Topics with no spacing */
.w section.w-topic.w-no-spacing > nav,
.w section.w-topic.w-no-horizontal-spacing > nav {
    padding: var(--space-medium) var(--space-field-half-medium-compl) 0;
}


/* Headers */

.w header {
    display: flex;
    align-items: center;
}
/* Spacing for headers directly inside Topics */
.w section.w-topic > header {
    min-height: 40px;
    padding: var(--space-small) var(--space-field-half-medium-compl) 0;
}
/* Spacing for headers directly inside Topics with no spacing*/
.w section.w-topic.w-no-spacing > header,
.w section.w-topic.w-no-horizontal-spacing > header {
    padding: var(--space-small) var(--space-medium) 0;
}


/* Footers */

.w footer {
    display: flex;
    margin-top: auto;
    align-items: center;
    justify-content: flex-end;
}


/* Gaps */

.w wing-gap,
.w wing-gap-small,
.w wing-gap-medium,
.w wing-gap-large,
.w wing-gap-extra-large,
.w wing-gap.w-medium,
.w .w-gap,
.w .w-gap.w-medium {
    display: block;
    height: var(--space-medium);
    width: var(--space-medium);
    flex-shrink: 0  !important;
}
.w wing-gap-small,
.w wing-gap.w-small,
.w .w-gap.w-small {
    height: var(--space-small);
    width: var(--space-small);
}
.w wing-gap-large,
.w wing-gap.w-large,
.w .w-gap.w-large {
    height: var(--space-large);
    width: var(--space-large);
}
.w wing-gap-extra-large,
.w wing-gap.w-extra-large,
.w .w-gap.w-extra-large {
    height: var(--space-extra-large);
    width: var(--space-extra-large);
}

/* Gaps inside Lists act like dividers */
.w ul wing-gap {
    width: 100%;
    height: 0;
    border-bottom: 1px solid var(--pal-dark-snow);
    margin: 6px 0;
}


/* Fields */

.w wing-field {
    display: block;
    flex-direction: column;
}


/* Labels and Titles, also for Headers */

.w label,
.w label.w-small {
    display: block;
    color: var(--label-small-color);
    font-size: var(--label-small-fsize);
    line-height: var(--label-small-lheight);
    text-align: left;
    flex-direction: column;
}
.w label.w-medium {
    font-size: var(--label-medium-fsize);
    line-height: var(--label-medium-lheight);
}
.w label.w-large {
    font-size: var(--label-large-fsize);
    line-height: var(--label-large-lheight);
}
.w label.w-title,
.w header {
    color: var(--label-title-color);
    font-family: var(--font-title);
    font-weight: bold;
}
.w label.w-title.w-dark,
.w header.w-dark {
    color: var(--text-color);
}
.w label.w-title,
.w label.w-title.w-small,
.w header,
.w header.w-small {
    font-size: var(--label-title-small-fsize);
    line-height: var(--label-title-small-lheight);
}
.w label.w-title.w-medium,
.w header.w-medium {
    font-size: var(--label-title-medium-fsize);
    line-height: var(--label-title-medium-lheight);
}
.w label.w-title.w-large,
.w header.w-large {
    font-size: var(--label-title-large-fsize);
    line-height: var(--label-title-large-lheight);
}
.w label.w-title.w-extra-large,
.w header.w-extra-large {
    font-size: var(--label-title-extra-large-fsize);
    line-height: var(--label-title-extra-large-lheight);
}

.w label > span {
    vertical-align: baseline;
}

.w label.w-horizontal {
    display: flex;
    --inline-display: inline-flex;
    flex-direction: row;
    align-items: center;
}


/* Tags */

.w .w-tag,
.w .w-tag.w-small {
    display: inline-block;
    padding: 0 8px;
    font-size: var(--label-small-fsize);
    font-weight: normal;
    line-height: 18px;
    color: var(--tag-color);
    background-color: var(--pal-smoke);
    border-radius: 3px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.w .w-tag.w-medium {
    font-size: var(--label-medium-fsize);
    line-height: 24px;
}
.w label > span.w-tag {
    position: relative;
    top: -2px;
    margin-left: 16px;
    vertical-align: middle;
}


/* Links */

.w a {
    color: var(--pal-dark-blue);
}


/* Static Texts with Label */

.w p.w-static-text,
.w p.w-static-text.w-medium {
    color: var(--text-color);
    font-family: var(--font-normal);
    font-weight: normal;
    font-size: var(--label-medium-fsize);
    line-height: var(--static-text-line-height);
    min-height: var(--static-text-line-height);
    --static-text-line-height: var(--label-medium-lheight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.w p.w-static-text.w-small {
    font-size: var(--label-small-fsize);
    --static-text-line-height: var(--label-small-lheight);
}
.w p.w-static-text.w-large {
    font-size: var(--label-large-fsize);
    --static-text-line-height: var(--label-large-lheight);
}
.w p.w-static-text.w-multiline {
    display: -webkit-box  !important;
    display: -moz-box  !important;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    white-space: pre-wrap;
}


/* Icons */

.w i,
.w i.w-small, .w i.w-icon-small,
.w .w-icon-small i {
    position: relative;
    display: inline-block;
    min-width: 18px;
    min-height: 18px;
    line-height: 18px;
    font-size: 18px;
    color: var(--icon-color);
    vertical-align: middle;
    top: -0.075em;                  /* correction for poor inline vertical alignment */
}
.w nav > i, .w header > i, .w footer > i,
.w label.w-horizontal > i, .w label.w-checkbox > i {
    top: 0;                         /* remove correction when inside flex vertical alignment */
}
.w i.w-medium, .w i.w-icon-medium,
.w .w-icon-medium i {
    min-width: 26px;
    min-height: 26px;
    line-height: 26px;
    font-size: 26px;
    top: 0;
}
.w i.w-large, .w i.w-icon-large,
.w .w-icon-large i {
    min-width: 34px;
    min-height: 34px;
    line-height: 34px;
    font-size: 34px;
    top: 0;
}
.w i.w-extra-large, .w i.w-icon-extra-large,
.w .w-icon-extra-large i {
    min-width: 50px;
    min-height: 50px;
    line-height: 50px;
    font-size: 50px;
    top: 0;
}
.w i.w-special, .w i.w-icon-special,
.w .w-icon-special i {
    min-width: 66px;
    min-height: 66px;
    line-height: 66px;
    font-size: 66px;
    top: 0;
}

.w i[s] {
    width: 1em;
    height: 1em;
    padding: 1px;
    /*color: var(--icon-color);*/
    /*fill: currentColor;*/       /* default fill, only for mono icons */
    /*--l: #d0d0d0;*/             /* magic light color */
    /*--m: #a0a0a0;*/             /* magic medium color */
    /*--d: #707070;*/             /* magic dark color */
}
.w i > svg {
    display: block;
    width: 100%;
    height: 100%;
}


/* Buttons */

.w button,
.w button.w-secondary {
    display: inline-block;
    min-width: var(--field-line-height);
    min-height: var(--field-line-height);
    font-family: var(--font-normal);
    font-size: var(--text-fsize);
    font-weight: normal;
    line-height: calc(var(--field-line-height) - 2px);      /* discount borders */
    padding: 0 var(--space-medium);
    color: var(--pal-dark-smoke);
    background: var(--pal-snow);
    --button-hover-back-color: var(--pal-dark-snow);
    border: 1px solid var(--pal-dark-snow);
    border-radius: 4px;
    box-shadow: none;
    flex-shrink: 0  !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
}

.w button.w-primary, .w button.w-input, .w button.w-success, .w button.w-warning, .w button.w-danger {
    color: var(--pal-white);
    border-color: transparent;
}
.w button.w-primary > i, .w button.w-input > i, .w button.w-success > i, .w button.w-warning > i, .w button.w-danger > i {
    color: inherit;
}
.w button.w-primary     { background: var(--pal-blue);   --button-hover-back-color: var(--pal-dark-blue);   }
.w button.w-input       { background: var(--pal-orange); --button-hover-back-color: var(--pal-dark-orange); }
.w button.w-success     { background: var(--pal-green);  --button-hover-back-color: var(--pal-dark-green);  }
.w button.w-warning     { background: var(--pal-yellow); --button-hover-back-color: var(--pal-dark-yellow); }
.w button.w-danger      { background: var(--pal-red);    --button-hover-back-color: var(--pal-dark-red);    }

.w button.w-icon-only {
    width: var(--field-line-height);
    padding: 0;
}
.w button.w-no-border {
    line-height: var(--field-line-height);
    background: none;
    --button-hover-back-color: var(--pal-black-05);
}

.w button.w-minimal {
    min-width: 20px;
    min-height: unset;
    line-height: 20px;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    --button-hover-back-color: none;
}
.w button.w-minimal + button.w-minimal {
    margin-left: 8px;
}

.w button.w-flat,
.w button.w-flat.w-medium {
    min-width: unset;
    min-height: unset;
    padding: 0;
    line-height: var(--label-medium-lheight);
    font-size: 14px;
    color: var(--pal-smoke);
    --button-hover-front-color: var(--pal-dark-smoke);
    background: none;
    --button-hover-back-color: none;
    border: none;
}
.w button.w-flat.w-small {
    font-size: var(--label-small-fsize);
    line-height: var(--label-small-lheight);
}
.w button.w-flat.w-large {
    font-size: var(--label-large-fsize);
    line-height: var(--label-large-lheight);
}
.w button.w-flat > i {
    font-size: 14px;
}
.w button.w-flat.w-small > i {
    font-size: 12px;
}
.w button.w-no-border.w-primary, .w button.w-flat.w-primary, .w button.w-minimal.w-primary   { color: var(--pal-blue);   --button-hover-front-color: var(--pal-dark-blue);   }
.w button.w-no-border.w-input,   .w button.w-flat.w-input,   .w button.w-minimal.w-input     { color: var(--pal-orange); --button-hover-front-color: var(--pal-dark-orange); }
.w button.w-no-border.w-success, .w button.w-flat.w-success, .w button.w-minimal.w-success   { color: var(--pal-green);  --button-hover-front-color: var(--pal-dark-green);  }
.w button.w-no-border.w-warning, .w button.w-flat.w-warning, .w button.w-minimal.w-warning   { color: var(--pal-yellow); --button-hover-front-color: var(--pal-dark-yellow); }
.w button.w-no-border.w-danger,  .w button.w-flat.w-danger,  .w button.w-minimal.w-danger    { color: var(--pal-red);    --button-hover-front-color: var(--pal-dark-red);    }

.w button:not(:disabled):hover,
.w button:not(:disabled):focus {
    background: var(--button-hover-back-color)  !important;
}
.w button.w-flat:not(:disabled):hover,
.w button.w-flat:not(:disabled):focus {
    color: var(--button-hover-front-color)  !important;
}

.w button:disabled {
    color: var(--button-text-disabled-color);
    background: var(--pal-snow);
    cursor: initial;
}
.w button:disabled > i {
    color: inherit;
}
.w button.w-no-border:disabled,
.w button.w-minimal:disabled,
.w button.w-flat:disabled {
    color: var(--pal-dark-snow);
    --button-hover-front-color: var(--pal-dark-snow);
    background: none;
}

.w button.w-title {
    color: var(--label-title-color);
    font-family: var(--font-title);
    font-weight: bold;
}


/* Drop Down Buttons */

.w button.w-dropdown {
    position: relative;
    padding-right: 30px;
}
.w button.w-dropdown::after {
    content: "keyboard_arrow_down";
    position: absolute;
    top: 1px;
    right: 0;
    width: 30px;
    padding: 0;
    margin: 0;
    font-family: var(--font-icon);
    font-weight: normal;
    font-size: 18px;
    line-height: inherit;
    text-align: center;
}
.w button.w-dropdown:disabled::after {
    color: unset;
}

.w button.w-icon-only.w-dropdown {
    width: 54px;
    padding: 0 20px 0 8px;
    text-align: left;
}
.w button.w-icon-only.w-dropdown::after {
    width: 28px;
}
.w button.w-icon-only.w-dropdown.w-no-border {
    width: 52px;
}


/* Button Groups */

.w wing-button-group {
    display: flex;
    --inline-display: inline-flex;
    align-items: center;
    flex-shrink: 0  !important;
}
.w wing-button-group > button {
    display: inline-block;
    flex-grow: 1;
}
.w wing-button-group > button:not(.w-no-border):not(:last-child),
.w wing-button-group > :not(:last-child) > button:not(.w-no-border) {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.w wing-button-group > button:not(.w-no-border):not(:first-child),
.w wing-button-group > :not(:first-child) > button:not(.w-no-border) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.w wing-button-group > button.w-flat + *,
.w wing-button-group > button.w-minimal + *,
.w wing-button-group > * + button.w-flat,
.w wing-button-group > * + button.w-minimal {
    margin-left: 16px;
}


/* Action Buttons */

.w .w-action-button > button,
.w .w-action-button > wing-button-group {
    position: absolute;
    display: inline-block  !important;
    margin: 0;
    bottom: 0px;
    right: 1px;
    line-height: var(--field-line-height);
    height: var(--field-line-height);
    width: auto  !important;
}
.w .w-action-button > button,
.w .w-action-button > wing-button-group > button,
.w .w-action-button > wing-button-group > wing-menu-dropdown > button {
    min-width: 34px;
    padding: 0 8px;
    background: transparent;
    --button-hover-back-color: var(--pal-black-05);
    border: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    text-align: center;
}
.w .w-action-button > button {
    min-width: 40px;
}
.w .w-action-button > wing-button-group {
    padding: 0;
}
.w .w-action-button > wing-button-group > button,
.w .w-action-button > wing-button-group > wing-menu-dropdown > button {
    padding: 0 2px;
}
.w .w-action-button > wing-button-group > button:last-child,
.w .w-action-button > wing-button-group > wing-menu-dropdown:last-child > button {
    padding-right: 4px;
    min-width: 36px;
}
.w :not(.w-no-spacing):not(.w-no-horizontal-spacing):not(.w-no-right-spacing).w-action-button > button,
.w :not(.w-no-spacing):not(.w-no-horizontal-spacing):not(.w-no-right-spacing).w-action-button > wing-button-group  {
    margin-right: var(--space-field-half);                 /* field spacing */
}

.w .w-action-button > input,
.w .w-action-button.w-count-1 > input   { padding-right: 40px; }
.w .w-action-button.w-count-2 > input   { padding-right: calc(40px + 1 * 34px); }
.w .w-action-button.w-count-3 > input   { padding-right: calc(40px + 2 * 34px); }
.w .w-action-button.w-count-4 > input   { padding-right: calc(40px + 3 * 34px); }
.w .w-action-button.w-count-5 > input   { padding-right: calc(40px + 4 * 34px); }


/* Icon Bar */

.w wing-icon-bar {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: var(--dialog-title-height);
    bottom: 0;
    width: var(--icon-bar-width);
    padding: 12px 8px;
    text-align: center;
    overflow: hidden;
    border-bottom-left-radius: 4px;
    box-shadow: inset -1px 0 0 var(--pal-dark-snow);
}
.w wing-icon-bar i {
    width: 48px;
    height: 48px;
    font-size: 32px;
    line-height: 48px;
    margin: 0 0 4px 0;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
}
.w wing-icon-bar i[s] {
    top: unset;
    font-size: 48px;
    padding: 8px;
    margin: 0 0 4px 0;
    border-radius: 3px;
    text-align: center;
}
.w wing-icon-bar i:not(.w-disabled):hover,
.w wing-icon-bar s:not(.w-disabled):hover {
    background: var(--pal-dark-snow-40);
}
.w .w-icon-bar-present > nav,
.w .w-icon-bar-present > section,
.w .w-icon-bar-present > footer {
    margin-left: var(--icon-bar-width);
}


/* Text Input Fields */

.w input,
.w textarea {
    display: block;
    padding: 0 var(--space-medium);
    color: var(--text-color);
    font-family: var(--font-normal);
    font-size: var(--field-text-fsize);
    font-weight: normal;
    line-height: calc(var(--field-line-height) - 2px);      /* discount borders */
    background: var(--pal-white);
    border: 1px solid var(--pal-dark-snow);
    border-radius: 4px;
    -webkit-appearance: none;   /* needed for iOS :-( */
}
.w input:read-only,
.w textarea:read-only {
    background: var(--pal-snow);
}
.w input:disabled,
.w textarea:disabled {
    color: var(--text-disabled-color);
    background: var(--pal-snow);
    opacity: 1;                 /* needed for iOS :-( */
}
.w input.w-focus,
.w textarea.w-focus,
.w .w-list-dropdown-combo.w-focus > input,
.w .w-list-dropdown-combo.w-dropdown-visible,
.w .w-list-dropdown-filter.w-focus > input,
.w .w-list-dropdown-filter.w-dropdown-visible > input {
    border-color: var(--pal-blue);
}

.w input[type = number] {
    -moz-appearance: textfield;     /* hide arrows */
    text-align: right;
}
.w input[type = number]::-webkit-inner-spin-button,
.w input[type = number]::-webkit-outer-spin-button {
    -webkit-appearance: none;       /* hide arrows */
    margin: 0;
}

.w textarea {
    resize: none;
    padding: var(--space-small) var(--space-medium);
    line-height: var(--textarea-line-height);
    border: 1px solid var(--pal-dark-snow);
    border-radius: 4px;
}

.w .w-all-space > textarea:last-child,
.w .w-all-vertical-space > textarea:last-child,
.w .w-fill-space > textarea:last-child,
.w .w-fill-height > textarea:last-child,
.w .w-grow-height > textarea:last-child,
.w .w-align-fill > textarea:last-child,
.w textarea.w-fill-height,
.w textarea.w-grow-height,
.w textarea.w-align-fill {
    flex: 1 1 0  !important;             /* Leave size totally free to grow or shrink */
}


/* Checkboxes */

.w input[type=checkbox] {
    display: initial;
    width: initial;
}
.w label.w-checkbox,
.w wing-field.w-checkbox {
    display: flex;
    --inline-display: inline-flex;
    flex-direction: row;
    align-items: center;
    pointer-events: none;
}
.w label.w-checkbox > *,
.w wing-field.w-checkbox > * {
    pointer-events: initial;
}
.w label.w-checkbox.w-inline:not([class*="w-width"]),
.w wing-field.w-checkbox.w-inline:not([class*="w-width"]) {      /* Automatic content size when inline with no width specified */
    width: intrinsic;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: max-content;
}
.w .w-checkbox {
    color: var(--text-color);
    font-weight: normal;
    font-size: var(--text-fsize);
    line-height: var(--field-line-height)  !important;      /* Fixed line height so label variations do not affect it */
    white-space: nowrap;
    cursor: pointer;
}
.w .w-checkbox.w-disabled {
    color: var(--text-disabled-color);
    background: transparent;
    cursor: initial;
}
.w input.w-checkbox {
    position: absolute;
    width: 16px  !important;
    bottom: 8px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    opacity: 0;
}
.w .w-checkbox.w-check-left-spacing > .w-check-element {
    margin-left: 8px;
}
.w .w-checkbox.w-check-right-spacing > .w-check-element {
    margin-right: 8px;
}
.w .w-checkbox.w-check-right > .w-check-element {
    margin-left: auto  !important;
}
.w input.w-checkbox.w-height-field-line + .w-check-element {
    margin-top: 8px;
    margin-bottom: 8px;
}

.w label.w-checkbox.w-minimal,
.w wing-field.w-checkbox.w-minimal {
    padding-top: 0;
    --field-line-height: var(--list-line-height-extra-small)  !important;       /* Fixed line height so label variations do not affect it */
}
.w .w-checkbox > span:not(.w-check-element) {
    overflow-x: hidden;
    text-overflow: ellipsis;
}

/* Check state */

.w .w-checked .w-check-element,
.w .w-checkbox:not(.w-disabled):not([readonly]):not(.w-checked):active:hover .w-check-element {
    --check-tick-content: "";
    --check-pin-offset: 1;
    --check-back: var(--check-on-back);
}
.w .w-checkbox:not(.w-disabled):not([readonly]).w-checked:active:hover .w-check-element {
    --check-tick-content: unset;
    --check-pin-offset: 0;
    --check-back: var(--check-off-back);
}


/* General Checkbox Styling element.  Goes right over original checkbox, also present in Lists */

.w .w-check-element {
    --check-tick-content: unset;
    --check-pin-offset: 0;
    --check-off-back: var(--pal-smoke-60);
    --check-back:     var(--check-off-back);
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: var(--pal-snow);
    border: 1px solid var(--pal-dark-snow);
    border-radius: 2px;
    vertical-align: baseline;
    flex-shrink: 0;
    z-index: 1;
}
.w .w-disabled .w-check-element,
.w [readonly] .w-check-element {
    background: var(--pal-snow-50);
    border-color: var(--pal-dark-snow-50);
}
.w .w-check-element::after {
    content: var(--check-tick-content);
    position: absolute;
    top: 2px;
    left: 4px;
    bottom: 4px;
    right: 5px;
    border: 2px solid var(--pal-black);
    border-left: none;
    border-top: none;
    transform: rotate(45deg);
    z-index: 1;
}
.w .w-disabled .w-check-element::after {
    border-color: var(--pal-black-20);
}

.w .w-check-style-toggle .w-check-element {
    --check-pin-opacity: 1;
    width: 32px;
    background: var(--check-back);
    border: none;
    border-radius: 32px;
    transition: background-color .1s;
}
.w .w-check-style-toggle.w-disabled .w-check-element,
.w .w-check-style-toggle .w-disabled .w-check-element,
.w .w-check-style-toggle[readonly] .w-check-element.w-check-style-toggle {
    opacity: .4;
    --check-pin-opacity: .5;
}
.w .w-check-style-toggle .w-check-element::after {
    content: ""  !important;
    top: 2px;
    left: calc(2px + 16px * var(--check-pin-offset));
    right: unset;
    height: 12px;
    width: 12px;
    border: none;
    background: var(--pal-white);
    border-radius: 100%;
    opacity: var(--check-pin-opacity);
    transition: left .1s;
}
.w .w-check-style-toggle           .w-check-element,
.w .w-check-style-toggle.w-success .w-check-element   { --check-on-back: var(--pal-green); }
.w .w-check-style-toggle.w-warning .w-check-element   { --check-on-back: var(--pal-yellow); }
.w .w-check-style-toggle.w-danger  .w-check-element   { --check-on-back: var(--pal-red); }
.w .w-check-style-toggle.w-primary .w-check-element   { --check-on-back: var(--pal-blue); }



/* Lists */

.w ul {
    list-style: none;
    min-height: calc(var(--list-add-height) + var(--list-line-height));
    color: var(--text-color);
    font-family: var(--font-normal);
    font-size: 14px;
    font-weight: normal;
    line-height: var(--list-line-height);
    box-shadow: inset 0 1px 0 var(--pal-dark-snow), inset 0 -1px 0 var(--pal-dark-snow);
    cursor: default;
    overflow: auto;
}
.w ul .w-lines-container {
    display: inline-flex;
    flex-direction: column;
    min-width: 100%;
    vertical-align: top;
    clear: both;
}
.w ul:not(.w-disabled):not([readonly]) .w-lines-container {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.w ul li,
.w ul header {
    display: flex;
    align-items: center;
    padding: 0 var(--space-medium);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.w ul li {
    box-shadow: inset 0 -1px 0 var(--pal-dark-snow);
    min-height: var(--list-line-height);
}
.w ul.w-no-last-line-border li:last-child {        /* Does not work with Flex order property used in Lists with wing-list-selection-on-top */
    box-shadow: none;
}
.w ul:not(.w-disabled):not(.w-not-selectable) li:not(.w-disabled) {
    cursor: pointer;
}
.w ul li.w-item-selected {
    background: var(--sel-back-color);
}
.w ul.w-disabled,
.w ul li.w-disabled {
    color: var(--text-disabled-color);
}
.w ul.w-disabled, .w ul li.w-disabled {
    --sel-back-color: var(--sel-disabled-back-color);
}
.w ul.w-scroll-auto,
.w ul.w-scroll-aways,
.w ul.w-scroll-x-auto,
.w ul.w-scroll-x-always {
    --list-add-height: var(--list-scrollbar-height);
}
.w ul.w-no-scroll-x header,
.w ul.w-no-scroll-x .w-lines-container {
    width: 100%;
}
.w ul.w-no-scroll-x:not(.w-list-tabular) li {
    display: block;         /* so text overflow ellipsis works */
}

.w ul:not(.w-disabled) li:not(.w-disabled):not(.w-item-selected):hover {
    background: var(--list-hover-back-color);
}

.w ul.w-not-selectable li, .w ul.w-selection-style-none li {
    --list-hover-back-color: none  !important;
}
.w ul.w-selection-style-none li {
    --sel-back-color: none  !important;
}

.w ul[wing-list-selection-on-top] li.w-item-selected-on-top {
    order: -1;              /* Bad side effect: Breaks :first-child and :last-child pseudo-classes */
}

.w .w-all-space > ul:last-child,
.w .w-all-vertical-space > ul:last-child,
.w .w-fill-space > ul:last-child,
.w .w-fill-height > ul:last-child,
.w .w-grow-height > ul:last-child,
.w .w-align-fill > ul:last-child,
.w ul.w-fill-height,
.w ul.w-grow-height,
.w ul.w-align-fill {
    flex: 1 1 0  !important;             /* Leave size free to grow or shrink */
}

.w .w-list-lines-extra-small,
.w .w-list-line.w-extra-small {
    --list-line-height: var(--list-line-height-extra-small);
}
.w .w-list-lines-small,
.w .w-list-line.w-small {
    --list-line-height: var(--list-line-height-small);
}
.w .w-list-lines-medium,
.w .w-list-line.w-medium {
    --list-line-height: var(--list-line-height-medium);
}
.w .w-list-lines-large,
.w .w-list-line.w-large {
    --list-line-height: var(--list-line-height-large);
}
.w .w-list-lines-extra-large,
.w .w-list-line.w-extra-large {
    --list-line-height: var(--list-line-height-extra-large);
}

.w ul li:not(:hover) > .w-parts-on-line-hover {
    visibility: hidden;
}
.w ul li:not(.w-item-selected) > .w-parts-on-line-selected {
    visibility: hidden;
}
.w ul.w-disabled li > .w-parts-on-list-enabled {
    visibility: hidden;
}

/* Add List-line behavior and vertical centering to elements */
.w .w-list-line {
    height: var(--list-line-height);
}
.w section.w-list-line {
    justify-content: center;
}
.w wing-row.w-list-line {
    align-items: center;
}

.w input.w-list-search-input {
    font-style: italic;
}
.w .w-list.w-focus > input.w-list-search-input {
    border-color: var(--pal-blue);
}

/* Horizontal Tabs */

.w ul.w-list-tabs {
    position: relative;
    display: flex;
    --inline-display: inline-flex;
    align-items: stretch;
    height: 40px;
    padding: 0;
    color: var(--pal-dark-smoke);
    background: var(--pal-snow);
    font-family: var(--font-title);
    font-size: 13px;
    line-height: 40px;
    overflow: hidden;
    box-shadow: none;
    flex-shrink: 0;
    --sel-back-color: var(--pal-white);
    --text-disabled-color: var(--button-text-disabled-color);
}
.w ul.w-list-tabs:not(.w-no-border)::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    border-bottom: 1px solid var(--pal-dark-snow);
    pointer-events: none;
}
.w ul.w-list-tabs > .w-list-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.w ul.w-list-tabs > .w-list-container > .w-lines-container {
    position: relative;
    flex-direction: row;
    white-space: nowrap;
}
.w ul.w-list-tabs li {
    position: relative;
    display: inline-block;
    min-width: 80px;
    max-width: 256px;
    padding: 0 var(--space-medium);
    border-right: 1px solid var(--pal-dark-snow);
    box-shadow: none;
    /* box-shadow: inset -1px 0 0 0 var(--pal-dark-snow);  tab right border alternative */
}
.w ul.w-list-tabs.w-tabs-scroll-visible li:last-child {
    border-right: none;
}
.w ul.w-list-tabs li > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.w ul.w-list-tabs > .w-list-tabs-scroll-button {
    display: none;
    width: 40px;
    flex: 0 0 auto;
    font-family: var(--font-icon);
    font-size: 18px;
    line-height: inherit;
    text-align: center;
}
.w ul.w-list-tabs.w-tabs-scroll-visible > .w-list-tabs-scroll-button,
.w ul.w-list-tabs.w-tabs-scroll-always > .w-list-tabs-scroll-button {
    display: inline-block;
}
.w ul.w-list-tabs > .w-list-tabs-scroll-button.w-disabled {
    color: var(--pal-dark-snow);
}
.w ul.w-list-tabs > .w-list-tabs-scroll-button:not(.w-disabled):hover {
    background: var(--button-hover-back-color);
    cursor: pointer;
}
.w ul.w-list-tabs > .w-list-tabs-scroll-button-left {
    border-right: 1px solid var(--pal-dark-snow);
}
.w ul.w-list-tabs > .w-list-tabs-scroll-button-right {
    margin-left: auto;
    border-left: 1px solid var(--pal-dark-snow);
}
.w ul.w-list-tabs > .w-list-tabs-scroll-button-left::before {
    content: "keyboard_arrow_left";
}
.w ul.w-list-tabs > .w-list-tabs-scroll-button-right::before {
    content: "keyboard_arrow_right";
}

.w ul.w-list-tabs li > .w-dismiss-button {
    display: none;
    position: absolute;
    top: 0; bottom: 0;
    right: 0;
    height: 24px;
    width: 24px;
    margin: auto 12px auto 0;
    color: var(--icon-color);
    font-family: var(--font-icon);
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    border-radius: 4px;
}
.w ul.w-list-tabs li > .w-dismiss-button::after {
    content: "close";
}
.w ul.w-list-tabs li:not(.w-dismissable-disabled) > .w-dismiss-button:hover {
    background: var(--button-hover-back-color);
}
.w ul.w-list-tabs li.w-dismissable {
    padding-right: 40px;
}
.w ul.w-list-tabs li.w-dismissable > .w-dismiss-button {
    display: inline-block;
}
.w ul.w-list-tabs li.w-dismissable-disabled > .w-dismiss-button {
    color: var(--pal-dark-snow);
}

.w ul.w-list-tabs.w-scroll-smooth > .w-list-container {
    scroll-behavior: smooth;
}


/* Check Lists */
.w ul.w-list-check li {
    padding-left: 0;
}
.w ul.w-list-check li .w-check-element {
    margin: 0 var(--space-medium);
}
.w ul.w-list-check li.w-item-selected .w-check-element::after {
    content: "";
}

.w ul.w-list-check.w-minimal {
    box-shadow: none;
    --list-line-height: var(--list-line-height-extra-small);
    --list-hover-back-color: none  !important;
    --sel-back-color: none  !important;
}
.w ul.w-list-check.w-minimal li {
    width: intrinsic;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: max-content;
    padding: 0;
    box-shadow: none;
}
.w ul.w-list-check.w-minimal .w-lines-container {
    padding: 0 0 4px 0;
    min-height: auto;
}
.w ul.w-list-check.w-minimal li .w-check-element {
    margin: 0 8px 4px 0;
}


/* Radio Buttons */

.w ul.w-list-radio:not(.w-list-tabular) {
    border: none;
    box-shadow: none;
    --list-line-height: var(--list-line-height-extra-small);        /* Compact form, lines have smaller height */
}
.w ul.w-list-radio:not(.w-list-tabular):not(.w-horizontal) .w-lines-container {
    padding: 0 0 4px 0;
    min-height: auto;
}
.w ul.w-list-radio:not(.w-list-tabular) li {
    position: relative;
    width: intrinsic;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: max-content;
    padding: 0 0 0 24px;
    background: initial  !important;   /* No hover effect */
    box-shadow: none;
}
.w ul.w-list-radio li::after,
.w ul.w-list-radio li::before {
    display: inline-block;
    position: absolute;
    margin: auto 0;
    border-radius: 100%;
}
.w ul.w-list-radio li::before {
    content: "";
    top: 0; bottom: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background: var(--pal-snow);
    border: 1px solid var(--pal-dark-snow)
}
.w ul.w-list-radio.w-disabled li::before,
.w ul.w-list-radio li.w-disabled::before {
    background: var(--pal-snow-50);
    border-color: var(--pal-dark-snow-50);
}
.w ul.w-list-radio li.w-item-selected::after {
    content: "";
    top: 0; bottom: 0;
    left: 4px;
    width: 8px;
    height: 8px;
    background: var(--pal-black);
}
.w ul.w-list-radio.w-disabled li.w-item-selected::after,
.w ul.w-list-radio li.w-disabled.w-item-selected::after {
    background: var(--pal-black-20);
}
.w ul.w-list-radio.w-horizontal {
    overflow: hidden;   /* remove scroll */
    --list-line-height: var(--field-line-height);
}
.w ul.w-list-radio.w-horizontal .w-lines-container {
    flex-direction: row;
}
.w ul.w-list-radio.w-horizontal li {
    /*  float: left;        !* Before flex  row: idk why, but needed to make ul the same height as li´s *!  */
    width: auto;
}
.w ul.w-list-radio.w-horizontal li:not(:last-child) {
    margin-right: var(--space-large);
}
.w ul.w-list-radio.w-horizontal.w-cols-even .w-lines-container {
    /* display: flex;           Before flex  row */
    /* flex-direction: row;     Before flex  row */
    align-items: flex-end;
}
.w ul.w-list-radio.w-horizontal.w-cols-even li {
    flex: 1 1 0;
    float: none;
    min-width: 0;
}


/* Drop Down Lists */

.w ul.w-list-dropdown {
    --list-line-height: var(--list-line-height-small);
    max-height: calc(10 * var(--list-line-height) + 2 * var(--space-small));
    padding: var(--space-extra-small) 0;
    font-size: var(--field-text-fsize);
    background: var(--window-back-color);
    border: none;
    border-radius: 4px;
    box-shadow: var(--shadow-medium);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.w ul.w-list-dropdown li {
    padding: 0 var(--space-medium);
    box-shadow: none;
}
.w .w-list-dropdown .w-list-dropdown-button {
    height: var(--field-line-height);
    font-size: var(--field-text-fsize);
    text-align: left;
    background: none;
    --button-hover-back-color: none;
}
.w .w-list-dropdown .w-list-dropdown-button:disabled {
    color: var(--text-disabled-color);
    background: var(--pal-snow);
}
.w .w-list-dropdown .w-list-dropdown-button:disabled::after {
    color: var(--pal-dark-snow);
}
.w .w-list-dropdown.w-focus .w-list-dropdown-button,
.w .w-list-dropdown.w-dropdown-visible .w-list-dropdown-button {
    border-color: var(--pal-blue);
}

.w .w-list-dropdown-spin-left > i::after {
    content: "keyboard_arrow_left";
}
.w .w-list-dropdown-spin-right > i::after {
    content: "keyboard_arrow_right";
}


/* Drop Down Combo Boxes */

.w .w-list-dropdown-combo button.w-dropdown,
.w .w-list-dropdown-filter button.w-dropdown {
    position: absolute;
    bottom: 1px;
    right: 1px;
    height: calc(var(--field-line-height) - 2px);      /* discount input field borders */
    width: 40px;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
}
.w :not(.w-no-spacing):not(.w-no-horizontal-spacing):not(.w-no-right-spacing).w-list-dropdown-combo button.w-dropdown,
.w :not(.w-no-spacing):not(.w-no-horizontal-spacing):not(.w-no-right-spacing).w-list-dropdown-filter button.w-dropdown {
    margin-right: var(--space-field-half);
}
.w .w-list-dropdown-combo input,
.w .w-list-dropdown-filter input {
    padding-right: 40px;
}


/* Trees */

.w .w-list-tree {
    overflow: auto;
}
.w .w-list-tree li {
    padding-left: 1px;
    line-height: var(--list-line-height);
    box-shadow: none;
    overflow: visible;
}
.w .w-list-tree li.w-list-tree-item-hidden {
    display: none;
}
.w .w-list-tree .w-list-tree-level-space {
    display: inline-block;
    height: var(--list-line-height);
    width: 0;
    vertical-align: top;
}
.w .w-list-tree .w-list-tree-expand-icon {
    display: none;
    width: 30px;
    margin: 0;
    font-size: 18px;
    line-height: var(--list-line-height);
    color: var(--icon-color);
    text-align: center;
    vertical-align: top;
}
.w .w-list-tree .w-list-tree-item-expandable > .w-list-tree-expand-icon {
    display: inline-block;
}
.w .w-list-tree .w-list-tree-item-expandable > .w-list-tree-expand-icon::before {
    content: "chevron_right";
}
.w .w-list-tree .w-list-tree-item-expanded > .w-list-tree-expand-icon::before {
    content: "expand_more";
}


/* Tables (List Tabular) */

.w ul.w-list-tabular.w-header-present {
    --list-add-height: var(--list-header-height);
    box-shadow: inset 0 -1px 0 var(--pal-dark-snow);        /* only bottom border */
}
.w ul.w-list-tabular.w-header-present.w-scroll-auto,
.w ul.w-list-tabular.w-header-present.w-scroll-always,
.w ul.w-list-tabular.w-header-present.w-scroll-x-auto,
.w ul.w-list-tabular.w-header-present.w-scroll-x-always {
    --list-add-height: calc(var(--list-header-height) + var(--list-scrollbar-height));
}
.w ul.w-list-tabular li,
.w ul.w-list-tabular header {
    padding: 0;
    min-width: 100%;
}
.w ul.w-list-tabular header {
    position: sticky;
    top: 0;
    height: 24px;
    min-width: 100%;
    padding: 0 0 var(--space-small);
    color: var(--label-small-color);
    font-family: var(--font-normal);
    font-weight: normal;
    font-size: var(--label-small-fsize);
    line-height: var(--label-small-lheight);
    z-index: 3;     /* above all contents */
    float: left;
}
.w ul.w-list-tabular wing-col {
    display: inline-block;
    --inline-display: inline-block;
    flex-direction: row;
    padding: 0 var(--space-medium);
    vertical-align: bottom;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.w ul.w-list-tabular li > wing-col {
    height: var(--list-line-height);
}
.w ul.w-list-tabular wing-col[wing-parts] {
    order: 999;
}
.w ul.w-list-tabular wing-col.w-icon {
    position: relative;
    top: -1px;
    font-size: 18px;
    margin: 0;
}
.w ul.w-list-tabular > .w-header-divider {
    position: sticky;
    display: none;
    left: 0;
    top: 0;
    height: var(--list-header-height);
    background: var(--pal-white);
    box-shadow: inset 0 -1px 0 var(--pal-dark-snow);
    z-index: 2;   /* above contents but bellow header */
}
.w ul.w-list-tabular.w-header-present > .w-header-divider {
    display: block;
}

.w ul.w-list-tabular.w-list-check header,
.w ul.w-list-tabular.w-list-radio header,
.w ul.w-list-tabular.w-list-check li,
.w ul.w-list-tabular.w-list-radio li {
    padding-left: calc(16px + var(--space-medium));     /* Must use padding do add space for check  */
}
.w ul.w-list-tabular.w-list-check li,
.w ul.w-list-tabular.w-list-radio li {
    position: relative;
}
.w ul.w-list-tabular.w-list-check .w-check-element {
    position: absolute;         /* And display check as absolute not to mess with % width columns */
    top: 0;
    left: 0;
    margin: calc((var(--list-line-height) - 16px) / 2) 0 0 var(--space-medium);
}
.w ul.w-list-tabular.w-list-check header .w-check-element {
    margin-top: 0;
}
.w ul.w-list-tabular.w-list-check:not(.w-disabled):not([readonly]) header .w-check-element {
    cursor: pointer;
}
.w ul.w-list-tabular.w-list-check header .w-check-element.w-checked::after {
    content: "";
}
ul.w-list-tabular.w-list-check header .w-check-element.w-checked::after,
ul.w-list-tabular.w-list-check:not(.w-disabled):not([readonly]) header .w-check-element:not(.w-checked):active:hover::after {
    content: "";
}
ul.w-list-tabular.w-list-check:not(.w-disabled):not([readonly]) header .w-check-element.w-checked:active:hover::after {
    content: unset;
}
.w ul.w-list-tabular.w-list-radio li::before {
    left: var(--space-medium);
}
.w ul.w-list-tabular.w-list-radio li::after {
    left: calc(var(--space-medium) + 4px);
}

.w ul.w-list-tabular header > .w-col-sort-asc::after,
.w ul.w-list-tabular header > .w-col-sort-desc::after {
    content: "expand_less";
    display: inline-block;
    font-family: var(--font-icon);
    min-height: 16px;
    max-height: 16px;
    line-height: 16px;
    font-size: 18px;
    margin: 0 -16px 0 8px;
    vertical-align: top;
    top: -2px;
}
.w ul.w-list-tabular header > .w-col-sort-desc::after {
    content: "expand_more";
}
.w ul.w-list-tabular.w-user-sortable header > wing-col:hover {
    background: var(--button-hover-back-color);
    box-shadow: 0 0 0 1px var(--button-hover-back-color);
}


/* Grids */

.w ul.w-grid wing-col,
.w ul.w-grid.w-contents-center wing-col     { text-align: center; }
.w ul.w-grid.w-contents-left wing-col       { text-align: left; }
.w ul.w-grid.w-contents-right wing-col      { text-align: right; }

.w ul.w-grid:not(.w-grid-style-list) {
    border: 1px solid var(--pal-dark-snow);
    border-bottom: none;
}
.w ul.w-grid:not(.w-header-present) {
    border-top: none;
}
.w ul.w-grid:not(.w-grid-style-list) header {
    font-weight: bold;
    padding: 0;
    height: var(--field-line-height);
    line-height: var(--field-line-height);
}
.w ul.w-grid:not(.w-grid-style-list) .w-header-divider {
    height: var(--field-line-height);
    background: var(--pal-snow);
}
.w ul.w-grid li {
    cursor: unset;
    background: initial  !important;
}
.w ul.w-grid:not(.w-grid-style-list) wing-col:not(:last-child) {
    box-shadow: inset -1px 0 0 var(--pal-dark-snow);
}
.w ul.w-grid:not(.w-selection-style-none):not(.w-selection-style-box) wing-col.w-item-selected {
    background: var(--sel-back-color);
}
.w ul.w-grid:not(.w-selection-style-none).w-selection-style-box wing-col.w-item-selected {
    --sel-back-color: none  !important;
    outline: 2px solid var(--sel-box-color);
    outline-offset: -2px;
}
.w ul.w-grid:not(.w-disabled):not(.w-not-selectable) li:not(.w-disabled) > wing-col:not(.w-item-selected):hover {
    background: var(--list-hover-back-color);
}


/* Date Field & Timestamp Field */

.w .w-datefield.w-dropdown-visible > button {
    background: var(--button-hover-back-color);    /* Keep hover highlight on if dropdown showing */
}


/* Drop Down Menus with Buttons */

.w .w-menu-dropdown {
    position: relative;
}
.w ul.w-menu-dropdown {
    padding: var(--space-extra-small) 0;
    font-size: var(--text-fsize);
    --list-line-height: var(--list-line-height-small);
    max-height: calc(10 * var(--list-line-height) + 2 * 4px);
}
.w ul.w-menu-dropdown li.w-disabled {
    color: var(--button-text-disabled-color);
}
.w ul.w-menu-dropdown li.w-disabled i {
    color: inherit;
}


/* General DropDowns behavior */

.w .w-dropdown-element {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease, visibility .21s;
    z-index: 99996;
}
.w .w-dropdown-element.w-dropdown-visible {
    visibility: visible;
    opacity: 1;
}


/* Section Group Navigation */

.w .w-section-group {
    padding: 0;
}
.w .w-section-group > nav {
    padding: var(--space-small) var(--space-field-half-medium-compl) var(--space-small);
    background: var(--pal-snow);
    border-bottom: 1px solid var(--pal-dark-snow);
}
.w .w-section-group > nav button {
    background: var(--pal-white);
}
.w .w-section-group > nav .w-list-dropdown .w-list-dropdown-button {
    background: var(--pal-white);
    --button-hover-back-color: var(--pal-white);
}


/* Columns and Widths, auto inline */

.w-inline, [class*="w-width"] {
    display: var(--inline-display)  !important;
}

/*  Inline children directly on Block containers align to bottom of row */
.w .w-block > .w-inline, .w .w-block > [class*="w-width"] {
    vertical-align: bottom;
}

/* Children on vertical containers don't shrink by default */
wing-main-dialog > *, wing-dialog > *, wing-modal-dialog > *, wing-main-section > *,
section > *, wing-col > *, wing-card > *, wing-card-body > * {
    max-width: 100%;
    flex-shrink: 0;
}

/* Children on horizontal containers don't exceed max width by default */
nav > *,
wing-row > *,
header > *, footer > *,
wing-card-header > *, wing-card-footer > * {
    max-width: 100%;
}

.w .w-cols-even > * {
    flex: 1 1 0;
    min-width: 0;
}

.w-cols-1 > *,
.w-cols-2 > .w-width-2,
.w-cols-3 > .w-width-3,
.w-cols-4 > .w-width-4,
.w-cols-5 > .w-width-5,
.w-cols-6 > .w-width-6,
.w-cols-7 > .w-width-7,
.w-cols-8 > .w-width-8,
.w-cols-9 > .w-width-9,
.w-cols-10 > .w-width-10,
.w-width-12,
.w-width-100pct            { width: 100%; }

.w-cols-2 > *,
.w-cols-2 > .w-width-1,
.w-cols-4 > .w-width-2,
.w-cols-6 > .w-width-3,
.w-cols-8 > .w-width-4,
.w-cols-10 > .w-width-5,
.w-width-6,
.w-width-50pct            { width: 50%; }

.w-cols-3 > *,
.w-cols-3 > .w-width-1,
.w-cols-6 > .w-width-2,
.w-cols-9 > .w-width-3,
.w-width-4                { width: 33.33%; }

.w-cols-3 > .w-width-2,
.w-cols-6 > .w-width-4,
.w-cols-9 > .w-width-6,
.w-width-8                { width: 66.66%; }

.w-cols-4 > *,
.w-cols-4 > .w-width-1,
.w-cols-8 > .w-width-2,
.w-width-3,
.w-width-25pct            { width: 25%; }

.w-cols-4 > .w-width-3,
.w-cols-8 > .w-width-6,
.w-width-9,
.w-width-75pct            { width: 75%; }

.w-cols-5 > *,
.w-cols-5 > .w-width-1,
.w-cols-10 > .w-width-2,
.w-width-20pct            { width: 20%; }

.w-cols-5 > .w-width-2,
.w-cols-10 > .w-width-4,
.w-width-40pct            { width: 40%; }

.w-cols-5 > .w-width-3,
.w-cols-10 > .w-width-6,
.w-width-60pct            { width: 60%; }

.w-cols-5 > .w-width-4,
.w-cols-10 > .w-width-8,
.w-width-80pct            { width: 80%; }

.w-cols-6 > *,
.w-cols-6 > .w-width-1,
.w-width-2                { width: 16.666%; }

.w-cols-6 > .w-width-5,
.w-width-10               { width: 83.333%; }

.w-cols-7 > *,
.w-cols-7 > .w-width-1    { width: 14.285%; }
.w-cols-7 > .w-width-2    { width: 28.671%; }
.w-cols-7 > .w-width-3    { width: 42.857%; }
.w-cols-7 > .w-width-4    { width: 57.142%; }
.w-cols-7 > .w-width-5    { width: 71.428%; }
.w-cols-7 > .w-width-6    { width: 87.714%; }

.w-cols-8 > *,
.w-cols-8 > .w-width-1    { width: 12.5%; }
.w-cols-8 > .w-width-3    { width: 37.5%; }
.w-cols-8 > .w-width-5    { width: 62.5%; }
.w-cols-8 > .w-width-7    { width: 87.5%; }

.w-cols-9 > *,
.w-cols-9 > .w-width-1    { width: 11.111%; }
.w-cols-9 > .w-width-2    { width: 22.222%; }
.w-cols-9 > .w-width-4    { width: 44.444%; }
.w-cols-9 > .w-width-5    { width: 55.555%; }
.w-cols-9 > .w-width-7    { width: 77.777%; }
.w-cols-9 > .w-width-8    { width: 88.888%; }

.w-cols-10 > *,
.w-cols-10 > .w-width-1, .w-width-10pct    { width: 10%; }
.w-cols-10 > .w-width-3, .w-width-30pct    { width: 30%; }
.w-cols-10 > .w-width-7, .w-width-70pct    { width: 70%; }
.w-cols-10 > .w-width-9, .w-width-90pct    { width: 90%; }

.w-cols-11 > *,
.w-cols-11 > .w-width-1   { width: 9.090%; }
.w-cols-11 > .w-width-2   { width: 18.181%; }
.w-cols-11 > .w-width-3   { width: 27.272%; }
.w-cols-11 > .w-width-4   { width: 36.363%; }
.w-cols-11 > .w-width-5   { width: 45.454%; }
.w-cols-11 > .w-width-6   { width: 54.545%; }
.w-cols-11 > .w-width-7   { width: 63.636%; }
.w-cols-11 > .w-width-8   { width: 72.727%; }
.w-cols-11 > .w-width-9   { width: 81.818%; }
.w-cols-11 > .w-width-10  { width: 90.909%; }

.w-cols-12 > *,
.w-width-1                { width: 8.333%; }
.w-width-5                { width: 41.666%; }
.w-width-7                { width: 58.333%; }
.w-width-11               { width: 91.666%; }

/* Experimental */
.w-cols-13 > *            { width: 7.692%; }
.w-cols-14 > *            { width: 7.143%; }
.w-cols-15 > *            { width: 6.667%; }
.w-cols-16 > *            { width: 6.250%; }
.w-cols-17 > *            { width: 5.882%; }
.w-cols-18 > *            { width: 5.556%; }
.w-cols-19 > *            { width: 5.263%; }
.w-cols-20 > *            { width: 5.000%; }

.w-width-5pct             { width: 5%; }
.w-width-15pct            { width: 15%; }
.w-width-35pct            { width: 35%; }
.w-width-45pct            { width: 45%; }
.w-width-55pct            { width: 55%; }
.w-width-65pct            { width: 65%; }
.w-width-85pct            { width: 85%; }
.w-width-95pct            { width: 95%; }

.w-width-auto             { width: auto; }


/* Heights */

.w label.w-height-field-line, .w .tag.w-height-field-line,
.w button.w-height-field-line,
.w p.w-height-field-line {
    line-height: var(--field-line-height)  !important;
}

.w wing-row.w-height-field-line,
.w wing-col.w-height-field-line {
    height: var(--field-line-height);
}

.w nav.w-height-field-line {
    height: calc(var(--field-line-height) + var(--space-field-top));
}

.w .w-single-line {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lists Heights */

ul.w-height-1-line,   ul.w-height-min-1-line     { min-height: calc(var(--list-add-height) + 1 *  var(--list-line-height)); }
ul.w-height-2-lines,  ul.w-height-min-2-lines    { min-height: calc(var(--list-add-height) + 2 *  var(--list-line-height)); }
ul.w-height-3-lines,  ul.w-height-min-3-lines    { min-height: calc(var(--list-add-height) + 3 *  var(--list-line-height)); }
ul.w-height-4-lines,  ul.w-height-min-4-lines    { min-height: calc(var(--list-add-height) + 4 *  var(--list-line-height)); }
ul.w-height-5-lines,  ul.w-height-min-5-lines    { min-height: calc(var(--list-add-height) + 5 *  var(--list-line-height)); }
ul.w-height-6-lines,  ul.w-height-min-6-lines    { min-height: calc(var(--list-add-height) + 6 *  var(--list-line-height)); }
ul.w-height-7-lines,  ul.w-height-min-7-lines    { min-height: calc(var(--list-add-height) + 7 *  var(--list-line-height)); }
ul.w-height-8-lines,  ul.w-height-min-8-lines    { min-height: calc(var(--list-add-height) + 8 *  var(--list-line-height)); }
ul.w-height-9-lines,  ul.w-height-min-9-lines    { min-height: calc(var(--list-add-height) + 9 *  var(--list-line-height)); }
ul.w-height-10-lines, ul.w-height-min-10-lines   { min-height: calc(var(--list-add-height) + 10 * var(--list-line-height)); }
ul.w-height-11-lines, ul.w-height-min-11-lines   { min-height: calc(var(--list-add-height) + 11 * var(--list-line-height)); }
ul.w-height-12-lines, ul.w-height-min-12-lines   { min-height: calc(var(--list-add-height) + 12 * var(--list-line-height)); }

ul.w-height-1-line,   ul.w-height-max-1-line     { max-height: calc(var(--list-add-height) + 1 *  var(--list-line-height)); }
ul.w-height-2-lines,  ul.w-height-max-2-lines    { max-height: calc(var(--list-add-height) + 2 *  var(--list-line-height)); }
ul.w-height-3-lines,  ul.w-height-max-3-lines    { max-height: calc(var(--list-add-height) + 3 *  var(--list-line-height)); }
ul.w-height-4-lines,  ul.w-height-max-4-lines    { max-height: calc(var(--list-add-height) + 4 *  var(--list-line-height)); }
ul.w-height-5-lines,  ul.w-height-max-5-lines    { max-height: calc(var(--list-add-height) + 5 *  var(--list-line-height)); }
ul.w-height-6-lines,  ul.w-height-max-6-lines    { max-height: calc(var(--list-add-height) + 6 *  var(--list-line-height)); }
ul.w-height-7-lines,  ul.w-height-max-7-lines    { max-height: calc(var(--list-add-height) + 7 *  var(--list-line-height)); }
ul.w-height-8-lines,  ul.w-height-max-8-lines    { max-height: calc(var(--list-add-height) + 8 *  var(--list-line-height)); }
ul.w-height-9-lines,  ul.w-height-max-9-lines    { max-height: calc(var(--list-add-height) + 9 *  var(--list-line-height)); }
ul.w-height-10-lines, ul.w-height-max-10-lines   { max-height: calc(var(--list-add-height) + 10 * var(--list-line-height)); }
ul.w-height-11-lines, ul.w-height-max-11-lines   { max-height: calc(var(--list-add-height) + 11 * var(--list-line-height)); }
ul.w-height-12-lines, ul.w-height-max-12-lines   { max-height: calc(var(--list-add-height) + 12 * var(--list-line-height)); }

/* TextArea Heights */

textarea.w-height-1-line,   textarea.w-height-min-1-line    { min-height: calc(1 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-2-lines,  textarea.w-height-min-2-lines   { min-height: calc(2 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-3-lines,  textarea.w-height-min-3-lines   { min-height: calc(3 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-4-lines,  textarea.w-height-min-4-lines   { min-height: calc(4 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-5-lines,  textarea.w-height-min-5-lines   { min-height: calc(5 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-6-lines,  textarea.w-height-min-6-lines   { min-height: calc(6 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-7-lines,  textarea.w-height-min-7-lines   { min-height: calc(7 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-8-lines,  textarea.w-height-min-8-lines   { min-height: calc(8 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-9-lines,  textarea.w-height-min-9-lines   { min-height: calc(9 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-10-lines, textarea.w-height-min-10-lines  { min-height: calc(10 * var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-11-lines, textarea.w-height-min-11-lines  { min-height: calc(11 * var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-12-lines, textarea.w-height-min-12-lines  { min-height: calc(12 * var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }

textarea.w-height-1-line,   textarea.w-height-max-1-line    { max-height: calc(1 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-2-lines,  textarea.w-height-max-2-lines   { max-height: calc(2 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-3-lines,  textarea.w-height-max-3-lines   { max-height: calc(3 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-4-lines,  textarea.w-height-max-4-lines   { max-height: calc(4 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-5-lines,  textarea.w-height-max-5-lines   { max-height: calc(5 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-6-lines,  textarea.w-height-max-6-lines   { max-height: calc(6 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-7-lines,  textarea.w-height-max-7-lines   { max-height: calc(7 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-8-lines,  textarea.w-height-max-8-lines   { max-height: calc(8 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-9-lines,  textarea.w-height-max-9-lines   { max-height: calc(9 *  var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-10-lines, textarea.w-height-max-10-lines  { max-height: calc(10 * var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-11-lines, textarea.w-height-max-11-lines  { max-height: calc(11 * var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }
textarea.w-height-12-lines, textarea.w-height-max-12-lines  { max-height: calc(12 * var(--textarea-line-height) + 2 * var(--space-small) + 2px) !important; }

/* Static Text Heights */

p.w-height-1-line,   p.w-height-min-1-line    { min-height: calc(1 *  var(--static-text-line-height)) !important; line-clamp: 1;  -webkit-line-clamp: 1;  -moz-line-clamp: 1; }
p.w-height-2-lines,  p.w-height-min-2-lines   { min-height: calc(2 *  var(--static-text-line-height)) !important; line-clamp: 2;  -webkit-line-clamp: 2;  -moz-line-clamp: 2; }
p.w-height-3-lines,  p.w-height-min-3-lines   { min-height: calc(3 *  var(--static-text-line-height)) !important; line-clamp: 3;  -webkit-line-clamp: 3;  -moz-line-clamp: 3; }
p.w-height-4-lines,  p.w-height-min-4-lines   { min-height: calc(4 *  var(--static-text-line-height)) !important; line-clamp: 4;  -webkit-line-clamp: 4;  -moz-line-clamp: 4; }
p.w-height-5-lines,  p.w-height-min-5-lines   { min-height: calc(5 *  var(--static-text-line-height)) !important; line-clamp: 5;  -webkit-line-clamp: 5;  -moz-line-clamp: 5; }
p.w-height-6-lines,  p.w-height-min-6-lines   { min-height: calc(6 *  var(--static-text-line-height)) !important; line-clamp: 6;  -webkit-line-clamp: 6;  -moz-line-clamp: 6; }
p.w-height-7-lines,  p.w-height-min-7-lines   { min-height: calc(7 *  var(--static-text-line-height)) !important; line-clamp: 7;  -webkit-line-clamp: 7;  -moz-line-clamp: 7; }
p.w-height-8-lines,  p.w-height-min-8-lines   { min-height: calc(8 *  var(--static-text-line-height)) !important; line-clamp: 8;  -webkit-line-clamp: 8;  -moz-line-clamp: 8; }
p.w-height-9-lines,  p.w-height-min-9-lines   { min-height: calc(9 *  var(--static-text-line-height)) !important; line-clamp: 9;  -webkit-line-clamp: 9;  -moz-line-clamp: 9; }
p.w-height-10-lines, p.w-height-min-10-lines  { min-height: calc(10 * var(--static-text-line-height)) !important; line-clamp: 10; -webkit-line-clamp: 10; -moz-line-clamp: 10; }
p.w-height-11-lines, p.w-height-min-11-lines  { min-height: calc(11 * var(--static-text-line-height)) !important; line-clamp: 11; -webkit-line-clamp: 11; -moz-line-clamp: 11; }
p.w-height-12-lines, p.w-height-min-12-lines  { min-height: calc(12 * var(--static-text-line-height)) !important; line-clamp: 12; -webkit-line-clamp: 12; -moz-line-clamp: 12; }

p.w-height-1-line,   p.w-height-max-1-line    { max-height: calc(1 *  var(--static-text-line-height)) !important; line-clamp: 1;  -webkit-line-clamp: 1;  -moz-line-clamp: 1; }
p.w-height-2-lines,  p.w-height-max-2-lines   { max-height: calc(2 *  var(--static-text-line-height)) !important; line-clamp: 2;  -webkit-line-clamp: 2;  -moz-line-clamp: 2; }
p.w-height-3-lines,  p.w-height-max-3-lines   { max-height: calc(3 *  var(--static-text-line-height)) !important; line-clamp: 3;  -webkit-line-clamp: 3;  -moz-line-clamp: 3; }
p.w-height-4-lines,  p.w-height-max-4-lines   { max-height: calc(4 *  var(--static-text-line-height)) !important; line-clamp: 4;  -webkit-line-clamp: 4;  -moz-line-clamp: 4; }
p.w-height-5-lines,  p.w-height-max-5-lines   { max-height: calc(5 *  var(--static-text-line-height)) !important; line-clamp: 5;  -webkit-line-clamp: 5;  -moz-line-clamp: 5; }
p.w-height-6-lines,  p.w-height-max-6-lines   { max-height: calc(6 *  var(--static-text-line-height)) !important; line-clamp: 6;  -webkit-line-clamp: 6;  -moz-line-clamp: 6; }
p.w-height-7-lines,  p.w-height-max-7-lines   { max-height: calc(7 *  var(--static-text-line-height)) !important; line-clamp: 7;  -webkit-line-clamp: 7;  -moz-line-clamp: 7; }
p.w-height-8-lines,  p.w-height-max-8-lines   { max-height: calc(8 *  var(--static-text-line-height)) !important; line-clamp: 8;  -webkit-line-clamp: 8;  -moz-line-clamp: 8; }
p.w-height-9-lines,  p.w-height-max-9-lines   { max-height: calc(9 *  var(--static-text-line-height)) !important; line-clamp: 9;  -webkit-line-clamp: 9;  -moz-line-clamp: 9; }
p.w-height-10-lines, p.w-height-max-10-lines  { max-height: calc(10 * var(--static-text-line-height)) !important; line-clamp: 10; -webkit-line-clamp: 10; -moz-line-clamp: 10; }
p.w-height-11-lines, p.w-height-max-11-lines  { max-height: calc(11 * var(--static-text-line-height)) !important; line-clamp: 11; -webkit-line-clamp: 11; -moz-line-clamp: 11; }
p.w-height-12-lines, p.w-height-max-12-lines  { max-height: calc(12 * var(--static-text-line-height)) !important; line-clamp: 12; -webkit-line-clamp: 12; -moz-line-clamp: 12; }


/* Automatic Field Placement and Spacing Between Fields */

.w label,
.w wing-button-group,
.w wing-field {
    position: relative;
    padding: var(--space-field-top) var(--space-field-half) 0;
}
/* Label line as first child of wing-fields */
.w wing-field > label:first-child {
    display: flex;
    flex-direction: row;
    padding: 0;
}

/* No top and bottom spacing for elements inside vertical-centering elements like headers, navs, footers and forced List Lines */
.w header,
.w footer,
.w wing-card-header,
.w wing-card-footer,
.w .w-list-line {
    --space-field-top: 0;
    --section-top-space: 0;
    --section-bottom-space: 0;
}
/* Nav is different as it must remove spacing only from children not from itself */
.w nav > * {
    --space-field-top: 0;
    --section-top-space: 0;
    --section-bottom-space: 0;
}

/* No spacing for fields, rows inside fields */
.w .w-no-field-spacing,
.w label > wing-row,
.w label > nav,
.w wing-field > wing-row,
.w wing-field > nav {
    --space-field-top: 0;
    --space-field-half: 0;
}
.w .w-no-field-top-spacing {
    --space-field-top: 0;
}

/* Automatic horizontal spacing for Buttons, Icons, Tags and MenuDropDowns directly inside Rows, ToolBars, Footers, Cards Headers and Footers */
.w nav > button,
.w footer > button,
.w wing-row > button,
.w wing-card-header > button,
.w wing-card-footer > button,
.w nav > i,
.w footer > i,
.w wing-row > i,
.w wing-card-header > i,
.w wing-card-footer > i,
.w nav > .w-tag,
.w footer > .w-tag,
.w wing-row > .w-tag,
.w wing-card-header > .w-tag,
.w wing-card-footer > .w-tag,
.w nav > wing-menu-dropdown,
.w footer > wing-menu-dropdown,
.w wing-row > wing-menu-dropdown,
.w wing-card-header > wing-menu-dropdown,
.w wing-card-footer > wing-menu-dropdown {
    margin: 0 var(--space-field-half) 0;
}

.w label:not(.w-horizontal) > :not(span):not(i):not(s),
.w wing-field > :not(span):not(i):not(s) {
    display: block;
    width: 100%;
}

.w label.w-horizontal > :not(span):not(i):not(s) {
    display: inline-block;
    flex: 1 1 0;
    min-width: 0;
}


/* Automatic spacing for Icons and Text */

.w i {
    margin-right: 8px;
}
.w button > i:first-child {
    margin-left: -4px;
}
.w button.w-flat > i {
    margin: 0 4px;
}
.w button.w-flat > i:first-child {
    margin-left: -1px;
}
.w .w-icon-only > i,
.w .w-icon-only > span > i,
.w button.w-icon-only > i,
.w button.w-minimal > i,
.w .w-action-button > button > i,
.w .w-action-button > wing-button-group > button > i {
    margin: 0;
}


/* Automatic Spacing from Labels */

.w label > :not(span):not(i):not(s),
.w wing-field > label:first-child + *,
.w wing-field > .w-wing-field-label:first-child + * {
    margin-top: var(--field-label-space);
}

/* Titles have more spacing */
.w label.w-title {
    --field-label-space: var(--space-medium);
}

/* Static Texts have no spacing from Labels if no other w-field-label-spacing-* classes defined */
.w label.w-static-text, .w wing-field.w-static-text {
    --field-label-space: 0;
}

.w label.w-horizontal > :not(span):not(i):not(s) {
    margin-top: 0  !important;
    margin-left: var(--space-medium);
}


/* General Modifiers and Overrides */

.w.w *.w-hidden,
.w.w *.w-hidden.w-inline,
.w.w *.w-hidden[class*="w-width"] {      /* TODO Improve. Double .w trick to increase specificity */
    display: none  !important;
}

.w *.w-icons-hidden i {
    display: none;
}

.w *.w-unavailable {
    visibility: hidden  !important;
}

.w-no-spacing,
.w-no-vertical-spacing,
.w-no-top-spacing {
    padding-top: 0  !important;
}
.w-no-spacing,
.w-no-vertical-spacing,
.w-no-bottom-spacing {
    padding-bottom: 0  !important;
}
.w-no-spacing,
.w-no-horizontal-spacing,
.w-no-left-spacing {
    padding-left: 0  !important;
}
.w-no-spacing,
.w-no-horizontal-spacing,
.w-no-right-spacing {
    padding-right: 0  !important;
}

section.w-topic.w-no-outer-spacing,
section.w-topic.w-no-outer-vertical-spacing,
section.w-topic.w-no-outer-top-spacing {
    border-top-width: 0  !important;
}
section.w-topic.w-no-outer-spacing,
section.w-topic.w-no-outer-vertical-spacing,
section.w-topic.w-no-outer-bottom-spacing {
    border-bottom-width: 0  !important;
}
section.w-topic.w-no-outer-spacing,
section.w-topic.w-no-outer-horizontal-spacing,
section.w-topic.w-no-outer-left-spacing {
    border-left-width: 0  !important;
}
section.w-topic.w-no-outer-spacing,
section.w-topic.w-no-outer-horizontal-spacing,
section.w-topic.w-no-outer-right-spacing {
    border-right-width: 0  !important;
}

.w .w-top-spacing-small         { padding-top: var(--space-small)        !important; }
.w .w-top-spacing-medium        { padding-top: var(--space-medium)       !important; }
.w .w-top-spacing-large         { padding-top: var(--space-large)        !important; }
.w .w-top-spacing-extra-large   { padding-top: var(--space-extra-large)  !important; }

.w .w-bottom-spacing-small         { padding-bottom: var(--space-small)        !important; }
.w .w-bottom-spacing-medium        { padding-bottom: var(--space-medium)       !important; }
.w .w-bottom-spacing-large         { padding-bottom: var(--space-large)        !important; }
.w .w-bottom-spacing-extra-large   { padding-bottom: var(--space-extra-large)  !important; }

.w .w-field-label-spacing-small     { --field-label-space: var(--space-small)  !important;  }
.w .w-field-label-spacing-medium,
.w .w-field-label-spacing-title     { --field-label-space: var(--space-medium)  !important; }

.w-no-border {
    border: none  !important;
    /* border-radius: 0  !important; */
    box-shadow: none  !important;
}

.w-border-top,    .w-border-all   { border-top:    1px solid var(--pal-dark-snow); }
.w-border-bottom, .w-border-all   { border-bottom: 1px solid var(--pal-dark-snow); }
.w-border-left,   .w-border-all   { border-left:   1px solid var(--pal-dark-snow); }
.w-border-right,  .w-border-all   { border-right:  1px solid var(--pal-dark-snow); }

.w-contents-left {
    text-align: left  !important;
    justify-content: flex-start  !important;
}
.w-contents-center {
    text-align: center  !important;
    justify-content: center  !important;
}
.w-contents-right {
    text-align: right  !important;
    justify-content: flex-end  !important;
}
.w-contents-top, .w-contents-start {
    justify-content: flex-start  !important;
}
.w-contents-middle {
    justify-content: center  !important;
}
.w-contents-bottom, .w-contents-end {
    justify-content: flex-end  !important;
}

.w-contents-align-top, .w-contents-align-left {
    align-items: flex-start  !important;
}
.w-contents-align-middle, .w-contents-align-center {
    align-items: center  !important;
}
.w-contents-align-bottom, .w-contents-align-right {
    align-items: flex-end  !important;;
}
.w-contents-align-fill {
    align-items: stretch  !important;
}

.w-right, .w-center {
    margin-left: auto  !important;
}
.w-left, .w-center {
    margin-right: auto  !important;
}
.w-top, .w-middle {
    margin-bottom: auto  !important;
}
.w-bottom, .w-middle {
    margin-top: auto  !important;
}

.w-align-top {
    vertical-align: top  !important;
    align-self: flex-start  !important;
}
.w-align-middle {
    vertical-align: middle  !important;
    align-self: center !important;
}
.w-align-bottom {
    vertical-align: bottom  !important;
    align-self: flex-end  !important;
}
.w-align-left {
    align-self: flex-start  !important;
}
.w-align-center {
    align-self: center  !important;
}
.w-align-right {
    align-self: flex-end  !important;
}
.w-align-fill {
    align-self: stretch  !important;
}

.w-scroll-auto,
.w-scroll-always,
.w-scroll-y-auto,
.w-scroll-y-auto-overlay,
.w-scroll-y-always {
    position: relative;
    max-height: 100%;
}
.w-scroll-auto,
.w-scroll-y-auto {
    overflow-y: auto  !important;
}
.w-scroll-y-auto-overlay {
    overflow-y: overlay  !important;
}
.w-scroll-always,
.w-scroll-y-always {
    overflow-y: scroll  !important;
}

.w-scroll-auto,
.w-scroll-always,
.w-scroll-x-auto,
.w-scroll-x-always {
    position: relative;
    max-width: 100%;
}
.w-scroll-auto,
.w-scroll-x-auto {
    overflow-x: auto  !important;
}
.w-scroll-always,
.w-scroll-x-always {
    overflow-x: scroll  !important;
}

.w-no-scroll,
.w-no-scroll-x {
    overflow-x: hidden  !important;
}
.w-no-scroll,
.w-no-scroll-y {
    overflow-y: hidden  !important;
}

.w-scroll-smooth {
    scroll-behavior: smooth;
}


/* Responsive behaviors */

.w-block {
    display: block  !important;
    --inline-display: inline-block  !important;
}

.w-all-space,
.w-all-vertical-space,
.w-all-horizontal-space,
.w-fill-space, .w-fill-height, .w-fill-width {
    flex: 1 1 auto  !important;
}
.w-grow-height, .w-grow-width {
    flex: 1 0 auto  !important;
}
.w-shrink-height, .w-shrink-width {
    flex: 0 1 auto  !important;
}
.w-all-space,
.w-all-vertical-space,
.w-fill-space, .w-fill-height,
.w-shrink-height {
    min-height: 0;
}
.w-all-space,
.w-all-horizontal-space,
.w-fill-space, .w-fill-width,
.w-shrink-width {
    min-width: 0;
}
.w-all-space,
.w-all-vertical-space {
    height: 100%;
}
.w-all-space,
.w-all-horizontal-space {
    width: 100%;
}

.w-preserve-height, .w-preserve-width {
    flex-shrink: 0  !important;
}
.w-preserve-height {
    min-height: auto;
}
.w-preserve-width {
    min-width: auto;
}

.w-fill-base-even {
    flex-basis: 0  !important;
}


/* Automatic flex display for responsive fields that are normally block */

.w label.w-fill-space, .w label.w-fill-height, .w label.w-grow-height, .w label.w-align-fill, .w label.w-all-space, .w label.w-all-vertical-space,
.w wing-field.w-fill-space, .w wing-field.w-fill-height, .w wing-field.w-grow-height, .w wing-field.w-align-fill, .w wing-field.w-all-space, .w wing-field.w-all-vertical-space {
    display: flex  !important;
    --inline-display: inline-flex  !important;
}

/* Automatic w-preserve-height for Lists and TextAreas with w-fill-height/w-fill-space */

.w label.w-list.w-fill-space, .w label.w-list.w-fill-height,
.w wing-field.w-list.w-fill-space, .w wing-field.w-list.w-fill-height,
.w label.w-textarea.w-fill-space, .w label.w-textarea.w-fill-height,
.w wing-field.w-textarea.w-fill-space, .w wing-field.w-textarea.w-fill-height {
    min-height: auto;
    flex-shrink: 0  !important;
}

.w-overflow-hidden {
    overflow: hidden  !important;
}
.w-overflow-visible {
    overflow: visible  !important;
}


/* Color and Style Modifiers. DO NOT use to force standard item colors */

.w-on-dark-back {
    --text-color: var(--pal-white)  !important;
    --label-small-color: var(--pal-white)  !important;
    --label-title-color: var(--pal-white)  !important;
    --icon-color: var(--pal-white)  !important;
    --tag-color: var(--pal-white)  !important;
}

.w-on-light-back {
    --text-color: var(--pal-black)  !important;
    --label-small-color: var(--pal-smoke)  !important;
    --label-title-color: var(--pal-dark-smoke)  !important;
    --icon-color: var(--pal-smoke)  !important;
    --tag-color: var(--text-color)  !important;
}

.w-text-bold        { font-weight: bold  !important; }
.w-text-italic      { font-style: italic  !important; }

.w-text-black,        .w-text-black > i,        .w i.w-icon-black,        .w .w-icon-black i         { color: var(--pal-black)  !important; }
.w-text-dark-smoke,   .w-text-dark-smoke > i,   .w i.w-icon-dark-smoke,   .w .w-icon-dark-smoke i    { color: var(--pal-dark-smoke)  !important; }
.w-text-smoke,        .w-text-smoke > i,        .w i.w-icon-smoke,        .w .w-icon-smoke i         { color: var(--pal-smoke)  !important; }
.w-text-dark-snow,    .w-text-dark-snow > i,    .w i.w-icon-dark-snow,    .w .w-icon-dark-snow i     { color: var(--pal-dark-snow)  !important; }
.w-text-snow,         .w-text-snow > i,         .w i.w-icon-snow,         .w .w-icon-snow i          { color: var(--pal-snow)  !important; }
.w-text-white,        .w-text-white > i,        .w i.w-icon-white,        .w .w-icon-white i         { color: var(--pal-white)  !important; }

.w-text-primary,      .w-text-primary > i,      .w i.w-icon-primary,      .w .w-icon-primary i,
.w-text-blue,         .w-text-blue > i,         .w i.w-icon-blue,         .w .w-icon-blue i          { color: var(--pal-blue)  !important;        --m: var(--pal-blue); --d: var(--pal-dark-blue); --l: var(--pal-light-blue); }
.w-text-dark-blue,    .w-text-dark-blue > i,    .w i.w-icon-dark-blue,    .w .w-icon-dark-blue i     { color: var(--pal-dark-blue)  !important;   --m: var(--pal-blue); --d: var(--pal-dark-blue); --l: var(--pal-light-blue); }
.w-text-light-blue,   .w-text-light-blue > i,   .w i.w-icon-light-blue,   .w .w-icon-light-blue i    { color: var(--pal-light-blue)  !important;  --m: var(--pal-blue); --d: var(--pal-dark-blue); --l: var(--pal-light-blue); }

.w-text-input,        .w-text-input > i,        .w i.w-icon-input,        .w .w-icon-input i,
.w-text-orange,       .w-text-orange > i,       .w i.w-icon-orange,       .w .w-icon-orange i        { color: var(--pal-orange)  !important;      --m: var(--pal-orange); --d: var(--pal-dark-orange); --l: var(--pal-light-orange); }
.w-text-dark-orange,  .w-text-dark-orange > i,  .w i.w-icon-dark-orange,  .w .w-icon-dark-orange i   { color: var(--pal-dark-orange)  !important; --m: var(--pal-orange); --d: var(--pal-dark-orange); --l: var(--pal-light-orange); }
.w-text-light-orange, .w-text-light-orange > i, .w i.w-icon-light-orange, .w .w-icon-light-orange i  { color: var(--pal-light-orange) !important; --m: var(--pal-orange); --d: var(--pal-dark-orange); --l: var(--pal-light-orange); }

.w-text-success,      .w-text-success > i,      .w i.w-icon-success ,     .w .w-icon-success i,
.w-text-green,        .w-text-green > i,        .w i.w-icon-green,        .w .w-icon-green i         { color: var(--pal-green)  !important;       --m: var(--pal-green); --d: var(--pal-dark-green); --l: var(--pal-light-green); }
.w-text-dark-green,   .w-text-dark-green > i,   .w i.w-icon-dark-green,   .w .w-icon-dark-green i    { color: var(--pal-dark-green)  !important;  --m: var(--pal-green); --d: var(--pal-dark-green); --l: var(--pal-light-green); }
.w-text-light-green,  .w-text-light-green > i,  .w i.w-icon-light-green,  .w .w-icon-light-green i   { color: var(--pal-light-green)  !important; --m: var(--pal-green); --d: var(--pal-dark-green); --l: var(--pal-light-green); }

.w-text-warning,      .w-text-warning > i,      .w i.w-icon-warning,      .w .w-icon-warning i,
.w-text-yellow,       .w-text-yellow > i,       .w i.w-icon-yellow,       .w .w-icon-yellow i        { color: var(--pal-yellow)  !important;      --m: var(--pal-yellow); --d: var(--pal-dark-yellow); --l: var(--pal-light-yellow); }
.w-text-dark-yellow,  .w-text-dark-yellow > i,  .w i.w-icon-dark-yellow,  .w .w-icon-dark-yellow i   { color: var(--pal-dark-yellow)  !important; --m: var(--pal-yellow); --d: var(--pal-dark-yellow); --l: var(--pal-light-yellow); }
.w-text-light-yellow, .w-text-light-yellow > i, .w i.w-icon-light-yellow, .w .w-icon-light-yellow i  { color: var(--pal-light-yellow) !important; --m: var(--pal-yellow); --d: var(--pal-dark-yellow); --l: var(--pal-light-yellow); }

.w-text-danger,       .w-text-danger > i,       .w i.w-icon-danger,       .w .w-icon-danger i,
.w-text-red,          .w-text-red > i,          .w i.w-icon-red,          .w .w-icon-red i           { color: var(--pal-red)  !important;         --m: var(--pal-red); --d: var(--pal-dark-red); --l: var(--pal-light-red); }
.w-text-dark-red,     .w-text-dark-red > i,     .w i.w-icon-dark-red,     .w .w-icon-dark-red i      { color: var(--pal-dark-red)  !important;    --m: var(--pal-red); --d: var(--pal-dark-red); --l: var(--pal-light-red); }
.w-text-light-red,    .w-text-light-red > i,    .w i.w-icon-light-red,    .w .w-icon-light-red i     { color: var(--pal-light-red)  !important;   --m: var(--pal-red); --d: var(--pal-dark-red); --l: var(--pal-light-red); }

.w-text-pink,         .w-text-pink > i,         .w i.w-icon-pink,         .w .w-icon-pink i          { color: var(--pal-pink)  !important;        --m: var(--pal-pink); --d: var(--pal-dark-pink); --l: var(--pal-light-pink); }
.w-text-dark-pink,    .w-text-dark-pink > i,    .w i.w-icon-dark-pink,    .w .w-icon-dark-pink i     { color: var(--pal-dark-pink)  !important;   --m: var(--pal-pink); --d: var(--pal-dark-pink); --l: var(--pal-light-pink); }
.w-text-light-pink,   .w-text-light-pink > i,   .w i.w-icon-light-pink,   .w .w-icon-light-pink i    { color: var(--pal-light-pink)  !important;  --m: var(--pal-pink); --d: var(--pal-dark-pink); --l: var(--pal-light-pink); }
.w-text-purple,       .w-text-purple > i,       .w i.w-icon-purple,       .w .w-icon-purple i        { color: var(--pal-purple)  !important;      --m: var(--pal-purple); --d: var(--pal-dark-purple); --l: var(--pal-light-purple); }
.w-text-dark-purple,  .w-text-dark-purple > i,  .w i.w-icon-dark-purple,  .w .w-icon-dark-purple i   { color: var(--pal-dark-purple)  !important; --m: var(--pal-purple); --d: var(--pal-dark-purple); --l: var(--pal-light-purple); }
.w-text-light-purple, .w-text-light-purple > i, .w i.w-icon-light-purple, .w .w-icon-light-purple i  { color: var(--pal-light-purple) !important; --m: var(--pal-purple); --d: var(--pal-dark-purple); --l: var(--pal-light-purple); }

.w-back-black           { background-color: var(--pal-black)  !important; }
.w-back-dark-smoke      { background-color: var(--pal-dark-smoke)  !important; }
.w-back-smoke           { background-color: var(--pal-smoke)  !important; }
.w-back-dark-snow       { background-color: var(--pal-dark-snow)  !important; }
.w-back-snow            { background-color: var(--pal-snow)  !important; }
.w-back-white           { background-color: var(--pal-white)  !important; }

.w-back-primary,
.w-back-blue            { background-color: var(--pal-blue)  !important; }
.w-back-dark-blue       { background-color: var(--pal-dark-blue)  !important; }
.w-back-light-blue      { background-color: var(--pal-light-blue)  !important; }
.w-back-input,
.w-back-orange          { background-color: var(--pal-orange)  !important; }
.w-back-dark-orange     { background-color: var(--pal-dark-orange)  !important; }
.w-back-light-orange    { background-color: var(--pal-light-orange)  !important; }
.w-back-success,
.w-back-green           { background-color: var(--pal-green)  !important; }
.w-back-dark-green      { background-color: var(--pal-dark-green)  !important; }
.w-back-light-green     { background-color: var(--pal-light-green)  !important; }
.w-back-warning,
.w-back-yellow          { background-color: var(--pal-yellow)  !important; }
.w-back-dark-yellow     { background-color: var(--pal-dark-yellow)  !important; }
.w-back-light-yellow    { background-color: var(--pal-light-yellow)  !important; }
.w-back-danger,
.w-back-red             { background-color: var(--pal-red)  !important; }
.w-back-dark-red        { background-color: var(--pal-dark-red)  !important; }
.w-back-light-red       { background-color: var(--pal-light-red)  !important; }
.w-back-pink            { background-color: var(--pal-pink)  !important; }
.w-back-dark-pink       { background-color: var(--pal-dark-pink)  !important; }
.w-back-light-pink      { background-color: var(--pal-light-pink)  !important; }
.w-back-purple          { background-color: var(--pal-purple)  !important; }
.w-back-dark-purple     { background-color: var(--pal-dark-purple)  !important; }
.w-back-light-purple    { background-color: var(--pal-light-purple)  !important; }

/* XWing Legacy Text Properties. DO NOT use directly */

.w-xtext-center                               { text-align: center  !important; }
.w-xtext-right                                { text-align: right  !important; }
.w-xtext-bold                                 { font-weight: bold  !important; }
.w-xtext-italic                               { font-style: italic  !important; }
.w-xtext-black, .w-xtext-black i              { color: var(--pal-black)  !important; }         /* was #000000 */
.w-xtext-white, .w-xtext-white i              { color: var(--pal-white)  !important; }         /* was #ffffff */
.w-xtext-blue, .w-xtext-blue i                { color: var(--pal-blue)  !important; }          /* was #0000ff */
.w-xtext-darkblue, .w-xtext-darkblue i        { color: var(--pal-dark-blue)  !important; }     /* was #00007f */
.w-xtext-red, .w-xtext-red i                  { color: var(--pal-red)  !important; }           /* was #ff0000 */
.w-xtext-darkred, .w-xtext-darkred i          { color: var(--pal-dark-red)  !important; }      /* was #7f0000 */
.w-xtext-pink, .w-xtext-pink i                { color: var(--pal-pink)  !important; }          /* was #ff00ff */
.w-xtext-darkpink, .w-xtext-darkpink i        { color: var(--pal-dark-pink)  !important; }     /* was #7f007f */
.w-xtext-green, .w-xtext-green i              { color: var(--pal-green)  !important; }         /* was #00ff00 */
.w-xtext-darkgreen, .w-xtext-darkgreen i      { color: var(--pal-dark-green)  !important; }    /* was #007f00 */
.w-xtext-cyan, .w-xtext-cyan i                { color: #00ffff  !important; }                  /* was #00ffff */
.w-xtext-darkcyan, .w-xtext-darkcyan i        { color: #007f7f  !important; }                  /* was #007f7f */
.w-xtext-yellow, .w-xtext-yellow i            { color: var(--pal-yellow)  !important; }        /* was #ffff00 */
.w-xtext-lightyellow, .w-xtext-lightyellow i  { color: var(--pal-light-yellow)  !important; }  /* was #ffffe0 */
.w-xtext-brown, .w-xtext-brown i              { color: #7f7f00  !important; }                  /* was #7f7f00 */
.w-xtext-lightgray, .w-xtext-lightgray i      { color: var(--pal-dark-snow)  !important; }     /* was #bfbfbf */
.w-xtext-darkgray, .w-xtext-darkgray i        { color: var(--pal-smoke)  !important; }         /* was #7f7f7f */

.w-text-color-default  { color: var(--text-color)  !important; }
.w-text-color-default > i, i.w-icon-color-default, .w-icon-color-default i { color: var(--icon-color)  !important; }

[wing-uppercase], .w-uppercase {
    text-transform: uppercase;
}


/* Validations */

.w label.w-error-tooltip,
.w label[wing-validation-fail] {
    color: var(--input-invalid-color)  !important;
}
.w input.w-error-tooltip,
.w input[wing-validation-fail],
.w .w-list-dropdown-button.w-error-tooltip,
.w .w-list-dropdown-button[wing-validation-fail] {
    border-color: var(--input-invalid-color)  !important;
}
.w ul:not(.w-list-dropdown).w-error-tooltip,
.w ul:not(.w-list-dropdown)[wing-validation-fail] {
    box-shadow: 0 0 0 1px var(--input-invalid-color)  !important;
}

.w label.w-required:not(.w-no-required-sign):not(.w-disabled)::before {
    content: "*";
    position: relative;
    display: inline-block;
    top: 5px;
    margin-right: 4px;
    font-size: 24px;
    line-height: inherit;
    vertical-align: bottom;
}


/* Tooltips both normal and validation */

.w .wing-tooltip {
    display: none;
    position: absolute;
    padding: 8px;
    --pointer-offset: 0px;
    background: var(--tooltip-color);
    border-radius: 4px;
    white-space: nowrap;
    cursor: default;
    z-index: 99999;         /* topmost Wing element */
}
.w .wing-tooltip.w-visible {
    display: inline-block;
}
.w .wing-tooltip > i {
    display: none;
    top: 0;
    min-width: 16px;
    min-height: 16px;
    font-size: 16px;
    line-height: 16px;
    color: white;
    padding: 0;
    margin-right: 10px;
    vertical-align: middle;
}
.w .wing-tooltip > span {
    display: inline-block;
    max-width: 240px;
    min-width: 16px;
    font-size: 13px;
    line-height: 16px;
    color: white;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    vertical-align: middle;
}

.w .wing-tooltip[type = "ttWarn"], .w .wing-tooltip[type = "ttError"] {
    --tooltip-color: var(--tooltip-error-color);
}
.w .wing-tooltip[type = "ttError"] {
    padding: 8px 12px 8px 10px;
}
.w .wing-tooltip[type = "ttError"] > span {
    max-width: 360px;
}
.w .wing-tooltip[type = "ttError"] > i {
    display: inline-block;
}

.w .wing-tooltip::after {
    position: absolute;
    left: calc(50% - 8px - var(--pointer-offset));
    width: 16px;
    height: 9px;
    background: none;
    border: 8px solid transparent;
    z-index: -1;
    pointer-events: none;
}
.w .wing-tooltip[pointer-pos = "top"]::after {
    content: "";
    bottom: -8px;
    border-top: 9px solid var(--tooltip-color);
    border-bottom: none;
}
.w .wing-tooltip[pointer-pos = "bottom"]::after {
    content: "";
    top: -8px;
    border-bottom: 9px solid var(--tooltip-color);
    border-top: none;
}


/* Calendar */

.w .w-calendar {
    position: relative;
    display: inline-block;
    width: 280px;
    height: 246px;
    border: 16px solid var(--window-back-color);
    font-weight: normal;
    line-height: 0;
    background: var(--window-back-color);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    transition: height .15s ease-out;
    cursor: default;
}
.w .w-drop-up .w-calendar,
.w .w-calendar.w-page-0.w-month-adt-week {
    height: 278px;
}
.w .w-drop-up .w-calendar {
    transition: none;
}

.w .w-calendar-header {
    position: relative;
    padding-bottom: 8px;
    font-family: var(--font-title);
    font-size: var(--label-title-small-fsize);
    line-height: 24px;
    color: var(--text-color);
    background: var(--window-back-color);
    z-index: 1;
}
.w .w-calendar-header > span {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    text-align: center;
    vertical-align: bottom;
}
.w .w-calendar-header > span:hover {
    background: var(--button-hover-back-color);
}
.w .w-calendar-left,
.w .w-calendar-right {
    position: relative;
    width: 24px;
    cursor: pointer;
}
.w .w-calendar-left::after, .w-calendar-right::after {
    content: "";
    position: absolute;
    display: inline-block;
    top: 9px;
    left: 10px;
    width: 6px;
    height: 6px;
    border-left: 1px solid var(--pal-dark-smoke);
    border-bottom: 1px solid var(--pal-dark-smoke);
    transform: rotate(45deg);
}
.w .w-calendar-right::after {
    left: 7px;
    transform: rotate(-135deg);
}
.w .w-calendar-page {
    width: 128px;
    white-space: pre;
    cursor: pointer;
}
.w .w-calendar-today {
    padding: 0 6px;
    font-size: 12px;
    float: right;
    color: var(--pal-blue);
    cursor: pointer;
}

.w .w-calendar-pages {
    position: relative;
    top: 0;
    transition: top .3s ease-in-out;
}
.w .w-calendar.w-page-1 > .w-calendar-pages    { top: -280px; }
.w .w-calendar.w-page-2 > .w-calendar-pages    { top: -526px; }

.w .w-calendar-month, .w-calendar-year,
.w .w-calendar-decade {
    position: absolute;
}
.w .w-calendar-year,
.w .w-calendar-decade {
    padding: 8px 1px 0;
    border-top: 1px solid var(--pal-dark-snow);
}
.w .w-calendar-year    { top: 282px; }
.w .w-calendar-decade  { top: 528px; }

.w .w-drop-up .w-calendar-year,
.w .w-drop-up .w-calendar-decade {
    padding-top: 22px;
}

.w .w-calendar-cell {
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
    font-size: 14px;
    line-height: 32px;
    margin: 0 4px 0 0;
    color: var(--text-color);
    vertical-align: bottom;
    text-align: center;
    border: none;
    border-radius: 2px;
    box-shadow: none;
    box-sizing: border-box;
    cursor: pointer;
}
.w .w-calendar-cell-dim {
    color: var(--pal-dark-snow);
}
.w .w-calendar-cell-today::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 6px;
    width: 20px;
    height: 2px;
    background: var(--pal-blue);
}

.w .w-calendar-cell:hover,
.w .w-calendar-cell-soft-selected {
    background: var(--list-hover-back-color);
}
.w .w-calendar-month-grid .w-calendar-cell:hover:active,
.w .w-calendar-cell-selected {
    font-weight: 500;
    color: var(--sel-fore-color)  !important;
    background: var(--sel-back-color)  !important;
    box-shadow: none;
}

.w .w-calendar-month-header {
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--pal-dark-snow);
}
.w .w-calendar-month-header > .w-calendar-cell {
    height: 16px;
    margin-top: 0;
    color: var(--label-small-color);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    background: unset  !important;         /* no hover */
    text-align: center;
    cursor: default;
}
.w .w-month-last-week {
    opacity: 0;
    transition: opacity .2s ease-out;
}
.w .w-drop-up .w-calendar .w-month-last-week,
.w .w-calendar.w-month-adt-week .w-month-last-week {
    opacity: 1;
}

.w .w-calendar-month .w-calendar-cell:nth-child(7n) {
    margin-right: 0;
}

.w .w-calendar-year-grid > .w-calendar-cell,
.w .w-calendar-decade-grid > .w-calendar-cell {
    width: 66px;
    height: 32px;
    margin: 6px 8px;
    padding: 0;
    line-height: 32px;
    text-align: center;
}

/* Chat */

.w .w-chat-message {
    display: flex !important;
    padding: 5px 5px;
    border-radius: 5px;
}

.w .w-chat-message-sent {
    direction: rtl;
}

.w .w-chat-message-text {
    box-shadow: var(--shadow-small);
    font-size: var(--label-title-small-fsize);
    padding: var(--space-small) var(--space-field-half-medium-compl);
    border-radius: 5px;
    max-width: 50%;
    word-wrap: break-word;
    color: #555555;
}

.w .w-chat-message-time {
    padding: var(--space-small) var(--space-field-half-medium-compl);
    display: flex;
    justify-content: center;
}
 
.w .w-chat-message-sent .w-chat-message-text {
    background-color: #FA6A01;
    color: white;
    unicode-bidi: plaintext;
}

.w .w-chat-message-sent .w-chat-message-time {
    direction: ltr;
}
  
@keyframes chatLocateMessageAnimation {
    0% {
        background-color: #b5e5fb;
    }
    100% {
        background-color: #b5e5fb00;
    }
}

/* Scroll-bars styling */

.w ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}
.w ::-webkit-scrollbar-track {
    background: var(--pal-snow);
}
.w ::-webkit-scrollbar-corner {
    background: var(--pal-snow);
}
.w ::-webkit-scrollbar-thumb {
    border: solid transparent;
    border-radius: 8px;
    background: var(--pal-smoke-40);
    background-clip: content-box;
}
.w ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
    border-width: 4px;
}

.w ul.w-header-present::-webkit-scrollbar-track:vertical {
    margin-top: calc(var(--list-header-height) - 1px);
}
.w ul.w-header-present.w-grid:not(.w-grid-style-list)::-webkit-scrollbar-track:vertical {
    margin-top: 0;
}


/* Wing Alerts and Highlighs */

.w-resynched-start {
    box-shadow: 0 0 0 2px hsl(0, 90%, 60%), inset 0 0 0 2000px hsla(0, 90%, 60%, .2)  !important;
}
.w-resynched-fade {
    box-shadow: 0 0 0 2px transparent  !important;
    transition: box-shadow 1s ease-out  !important;
}

.w-copied-start {
    box-shadow: inset 0 0 0 2000px hsla(210, 90%, 40%, .4)  !important;
}
.w-copied-fade {
    box-shadow: inset 0 0 0 2px transparent  !important;
    transition: box-shadow .25s ease-in  !important;
}


/* Placeholders */

.w input::placeholder {
    font-style: italic;
    color: var(--pal-smoke);
}


/* Firefox-specific rules */

@-moz-document url-prefix() {

    .w input:invalid,
    .w textarea:invalid {
        box-shadow: none;                       /* FF: disable default browser invalid indicator */
    }

    .w-scroll-y-auto-overlay {
        overflow-y: auto  !important;           /* FF does not support overlay yet */
    }

    .w-scroll-smooth {
        scroll-behavior: unset  !important;     /* FF bug which will block scrolling via JS. Remove when fixed */
    }

    /* Allowed for now on HorizontalTabs only
    .w ul.w-list-tabs.w-scroll-smooth > .w-list-container {
        scroll-behavior: unset  !important;     !* FF bug which will block scrolling via JS. Remove when fixed *!
    }
    */

    .w .w-calendar-page {
        padding-top: 0;
    }

    .w :focus {                                 /* FF disable focus marker */
        outline:none;
    }
    .w ::-moz-focus-inner {
        border:0;
    }

}


/* Chrome-specific rules  TODO Improve */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .w-image-downscaled {
        image-rendering: -webkit-optimize-contrast;     /* Safari accepts this but images get pixelated. Make Chrome-only */
    }
}


/* Disable Animations? */

#wing-page.w-disable-animations .w-dropdown-element {
    transition: none  !important;
}

#wing-page.w-disable-animations .w-calendar {
    transition: none  !important;
}

#wing-page.w-disable-animations .w-calendar-pages {
    transition: none  !important;
}

#wing-page.w-disable-animations .w-scroll-smooth,
#wing-page.w-disable-animations .w-list-container {
    scroll-behavior: unset  !important;
}


/* Test Mode rules */

.w.w-test-mode ul.w-list-tabs > .w-list-container {
    overflow-x: auto  !important;
    overflow-x: overlay  !important;
}
.w.w-test-mode ul.w-list-tabs > .w-list-container {
    scrollbar-width: thin  !important;
    scrollbar-color: auto transparent  !important;
}
.w.w-test-mode ul.w-list-tabs > .w-list-container::-webkit-scrollbar {
    height: 6px  !important;
}
.w.w-test-mode ul.w-list-tabs > .w-list-container::-webkit-scrollbar-thumb {
    border-width: 2px  !important;
}
.w.w-test-mode ul.w-list-tabs > .w-list-container::-webkit-scrollbar-track {
    background: transparent  !important;
}