/*
    CSS for web forms & wasm components in BEM.
*/

@layer app.wasm {
    :root {
        /********************************
            z-index contexts
        ********************************/
        --z-index__tooltip: 100;
        --z-index__popup: 500;
        --z-index__menu-blur: 700;
        --z-index__menu: 701;
        --z-index__dialog-overlay: 900;
        --z-index__dialog: 1000;
        --z-index__column-header: 0;
        --z-index__error: 2000;
        --z-index__page-header-fixed: 2001;
        --z-index__topmost: 5000;

        /*****************************
            app properties
        *****************************/
        --hd-width: 1920px;
        --min-app-width: calc(var(--hd-width)/4);

        /********************************
            alert properties
         ********************************/
        --alert-border-color: var(--lc-profile_general-border-color);
        --alert-border-caution-color: var(--lc-profile_message-caution-color);
        --alert-message-color: var(--lc-profile_general-text-color);
        --alert-message-success-color: var(--lc-profile_message-information-color);
        --alert-message-warning-color: var(--lc-profile_message-caution-color);
        --alert-message-error-color: var(--lc-profile_message-error-color);
        --alert-border-size: 3px;
        --alert-padding-left-right: 3.125rem;
        --alert-padding-top-bottom: 0.625rem;

        /********************************
            input command properties
         ********************************/
        --command-button-color: var(--lc-profile_general-background-color);
        --command-popup-background-color: var(--lc-profile_general-background-color);
        --command-popup-border-color: var(--lc-profile_general-border-color);
        --command-popup-item-highlight-background-color: var(--lc-profile_selectable-highlight-background-color);
        --command-popup-item-highlight-text-color: var(--lc-profile_selectable-highlight-text-color);

        /********************************
            match item properties
         ********************************/
        --matchitem-highlight-text-color: var(--lc-profile_selectable-highlight-text-color);
        --matchitem-highlight-background-color: var(--lc-profile_selectable-highlight-background-color);

        /********************************
            action properties
        ********************************/
        --action-background-color: #fff;
        --action-border-color: #6c757d;
        --action-focus-color: #5E9ED6;
        --action-focus-background-color: #6c757d;
        --action-hover-border-color: #565d64;
        --action-hover-color: #fff;
        --action-text-color: #565d64;
        --action-padding: 0 0.75em;
        --action-height: 1.5em;

        /********************************
            property Header properties
        ********************************/
        --propertyHeader-background-color: #f7f7f7;
        --propertyHeader-border-color: #f1f1f1;
        --propertyHeader-content-padding: 1em;
        --propertyHeader-content-left-padding: 1.5em;

        /********************************
            tooltip properties
        ********************************/
        --tooltip-background-color: black;
        --tooltip-text-color: white;
        --tooltip-arrow-size: 14px;

        /********************************
            action bar properties
        ********************************/
        --actionbar-border-color: var(--lc-profile_general-border-color);
        --actionbar-action-height: 2em;
        --actionbar-action-padding: .375em .75em;

        /********************************
            RDE form properties
        ********************************/
        --rde-errorfield-color: var(--lc-profile_message-error-color);
        --rde-row-index-width: 2em;
        --rde-input-cell-width: 14em;

        /********************************
            Excel import properties
        ********************************/
        --excel-mapfield-width: 8em;
        --excel-cell-tooltip-background-color: var(--lc-profile_general-background-color);

        /********************************
            layout properties

            layout units are in rem (root em) as the layout is independent of content size.
        ********************************/
        --message-layout-margin: 0.625rem;
        --content-header-height: 3.25rem;
        --content-headeraction-height: 4rem;
        --content-layout-header-height: calc(var(--content-header-height) + var(--content-headeraction-height) + var(--layout-padding-top));
        --layout-padding-top: 1rem;
        --layout-padding-right: 1.5rem;
        --layout-padding-bottom: 1rem;
        --layout-padding-left: 1.5rem;
        --message-layout-padding-left-right: 3.125rem;
        --message-layout-padding-top-bottom: 1.25rem;

        /********************************
            resizer properties
        ********************************/
        --resizer-color: #d3d3d3;
        --resizer-width: 3px;

        /********************************
            breadcrumb  properties
        ********************************/
        --breadcrumb-highlight-color: var(--lc-profile_selectable-highlight-background-color);
        --breadcrumb-background-color: #fff;
        --breadcrumb-border-color: #ddd;
        --breadcrumb-max-width: 100px;
        --breadcrumb--active-max-width: 1080px;
        --breadcrumb-height: 40px;
        --breadcrumb-ease-time: 0.3s ease;
        --breadcrumb-text-color: #757575;
        --breadcrumb--highlight-text-color: var(--lc-profile_selectable-highlight-text-color);
        --breadcrumb---text-color: var(--lc-profile_general-text-color);
        --breadcrumb-chevron-border-top: 20px;
        --breadcrumb-chevron-border-bottom: 20px;
        --breadcrumb-chevron-border-left: 10px;

        /*******************************
            Report detail properties
        ********************************/
        --dimmed-opacity: 0.5;

        /*******************************
            Form properties
        ********************************/
        --form-gap: 0.5em;
        --form-field-gap: 0.75em;

        /******************************* 
            Explorer item properties
        ********************************/
        --selectable-selected-inactive-background-color: #757575;
        --selectable-error-text-color: var(--lc-profile_selectable-selected-text-color);
        --selectable-error-background-color: var(--lc-profile_message-error-color);

        /******************************* 
            Dialog properties
        ********************************/
        --lc-dialog-overlay-background-color: rgba(220, 220, 220, .6);
        --lc-dialog-background-color: white;
        --lc-dialog-width: var(--lc-dialog-width--large);
        --lc-dialog-border: 2px solid black;
        --lc-dialog-margin-top: 6vh;

        --lc-dialog-height: var(--lc-dialog-width--large);

        --lc-dialog-width--large: 98%;
        --lc-dialog-height--large: 91%;

        --lc-dialog-height--medium: 91%;
        --lc-dialog-width--medium: min(1200px, max(600px, 95vw));

        --lc-dialog-width--small: var(--wasm-dialog--small-fixed-width);
        --lc-dialog-height--small: var(--wasm-dialog--small-fixed-height);
    }

    /******************************************
     * default page class
     ******************************************/
    .lc-page-header {
    }

    .lc-page-body {
        position: relative;
        height: 100%;
        width: 100%;
        padding-top: 1px; /* prevents margin collapse with header */
    }

    /******************************************
     * navigation overrides
     ******************************************/

    /*
        Menu was built to work with content-box sizing.
        These overrides are needed to make the menu work
        with wasm's default border-box sizing standard.
    */
    .syd-global-nav-favorite-item {
        box-sizing: content-box;
    }

    .syd-global-nav-favorite-header-container {
        box-sizing: content-box;
    }

    /******************************************
     * wasm dialog
     ******************************************/
    .lc-wasm-dialog,
    .lc-wf-dialog {
        width: var(--lc-dialog-width);
        height: var(--lc-dialog-height);

        border: var(--lc-dialog-border);
        background-color: var(--lc-dialog-background-color);

        margin-top: var(--lc-dialog-margin-top);
        margin-left: auto;
        margin-right: auto;

        color: var(--lc-profile_general-text-color);
        font-size: 1em;

        /* supports dialog scrolling */
        display: flex;
        flex-direction: column;
        flex-grow: 0;
        min-height: 0;
    }

    .lc-wasm-dialog,
    .lc-wf-dialog--large {
        --lc-dialog-width: var(--lc-dialog-width--large);
        --lc-dialog-height: var(--lc-dialog-height--large);
    }

    .lc-wf-dialog--medium {
        --lc-dialog-width: var(--lc-dialog-width--medium);
        --lc-dialog-height: var(--lc-dialog-height--medium);
    }

    .lc-wf-dialog--small {
        --lc-dialog-width: var(--lc-dialog-width--small);
        --lc-dialog-height: var(--lc-dialog-height--small);
    }

    .lc-wasm-dialog-overlay,
    .lc-wf-dialog-overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--lc-dialog-overlay-background-color);
        z-index: var(--z-index__dialog-overlay);

        display: flex;
        flex-direction: column;
    }

    .lc-wasm-dialog-overlay--transparent {
        background: none;
    }

    .lc-wasm-dialog__content {
        border-width: 0;
        flex-grow: 2;
    }

    .lc-wasm-dialog--small-fixed {
        width: var(--wasm-dialog--small-fixed-width);
        left: max(0px, calc(50% - var(--wasm-dialog--small-fixed-width) / 2));
        height: var(--wasm-dialog--small-fixed-height);
        top: max(0px, calc(50% - var(--wasm-dialog--small-fixed-height)/2));
    }

    /******************************************
     * web app css
     ******************************************/

    #app {
        height: 100vh;
        display: flex;
        min-width: min(100%, var(--min-app-width));
    }

    .lc-app-layout {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
    }

    .lc-app-layout--medium {
        min-width: calc(var(--hd-width)/2);
    }

    /******************************************
     * main css
     ******************************************/

    .lc-main {
        padding: var(--layout-padding-top) var(--layout-padding-right) var(--layout-padding-bottom) var(--layout-padding-left);
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .lc-main--hidden {
        display: none;
    }

    /******************************************
     * header css
     ******************************************/

    .lc-header {
        height: var(--content-header-height);
        padding-bottom: 1em;
        overflow: hidden;
    }

    .lc-header__title {
        font-size: 1.4375em;
        font-weight: bold;
        text-transform: uppercase;
    }

    .lc-header__subheading {
        margin-top: 0.25em;
    }

    /******************************************
     * actionbar
     ******************************************/

    .lc-actionbar {
        border-bottom: 1px solid var(--actionbar-border-color);
        padding-bottom: 1em;
        display: flex;
        column-gap: 1em;
        --action-height: var(--actionbar-action-height);
        --action-padding: var(--actionbar-action-padding);
    }

    .lc-actionbar__top {
    }

    .lc-actionbar--header {
        overflow: hidden;
        height: calc(var(--content-headeraction-height) - 1px);
    }

    .lc-actionbar__box {
        display: flex;
        flex-wrap: wrap;
        flex-grow: 1;
        align-items: baseline;
        column-gap: 1em;
    }

    .lc-actionbar__box--left {
        justify-content: flex-start;
    }

    .lc-actionbar__box--right {
        justify-content: flex-end;
    }

    /******************************************
     * rde css
     ******************************************/

    .lc-rde-common-layout {
    }

    .lc-rde-common-layout:empty {
        display: none;
    }

    .lc-rde-common {
        border-bottom: 1px solid #eeeeee;
        padding: 0 0 1em 0;
        display: grid;
        grid-template-columns: 14em 1fr;
    }

    .lc-rde-common__header {
        font-size: 1.2em;
        font-weight: bold;
        color: var(--lc-profile_general-text-color);
        margin-top: 0.5em;
    }

    .lc-rde-common__field {
    }

    .lc-rde-common__fields {
        display: flex;
        flex-wrap: wrap;
        padding-left: var(--rde-row-index-width);
        gap: calc(var(--rde-input-cell-width) * 0.1);
    }

    .lc-rde-header {
        overflow-x: hidden;
        width: var(--rde-input-cell-width);
        flex-shrink: 0;
    }

    .lc-rde-header--pad {
        padding: 0.5em 0;
    }

    .lc-rde-header__label {
    }

    .lc-rde-input-common-field {
    }

    .lc-rde-input-common-field__error {
        padding: 0.5em 0.5em 0.5em var(--rde-row-index-width);
    }

    .lc-rde-input-container {
        width: var(--rde-input-cell-width);
        flex-shrink: 0;
        display: block;
    }

    .lc-rde-input-container__input {
        color: var(--lc-profile_general-text-color);
        font-family: var(--lc-profile_general-text-font);
        font-size: var(--lc-profile_general-text-size);
    }

    .lc-rde-input-row {
        display: flex;
        flex-wrap: nowrap;
        padding: 0.5em 0;
        align-items: baseline;
        column-gap: calc(var(--rde-input-cell-width) * 0.1)
    }

    .lc-rde-input-row--fixed {
        position: sticky;
        background-color: var(--lc-profile_general-background-color);
        top: var(--content-layout-header-height);
        z-index: var(--z-index__column-header);
    }

    .lc-rde-input-row__index {
        width: var(--rde-row-index-width);
        text-align: right;
        flex-shrink: 0;
    }

    .lc-rde-record {
        padding: 1em 0;
        display: inline-block; /* keeps the style extended to overflow content. */
        margin-right: var(--layout-padding-right);
    }

    /******************************************
     * rde inputfieldvaluelayout
     ******************************************/

    .lc-input-text {
        display: flex;
        flex-direction: column;
    }

    .lc-input-text__input {
        width: 0;
        flex: 1;
    }

    .lc-input-text__input--error {
        border: 1px solid var(--rde-errorfield-color);
        box-shadow: 0 0 3px var(--rde-errorfield-color);
    }

    .lc-input-text__input-row {
        display: flex;
    }

    .lc-input-text__match-row {
    }

    /******************************************
     * rde input-actionbar block
     ******************************************/

    .lc-input-actionbar {
        display: none;
    }

    .lc-input-actionbar[data-show] {
        display: flex;
    }

    /******************************************
     * rde actions-flyout block
     ******************************************/

    .lc-actions-flyout__command-popup--data-visible {
        position: absolute;
        background-color: var(--command-popup-background-color);
        min-width: 7.5em;
        display: block;
        z-index: var(--z-index__popup);
    }

    .lc-actions-flyout {
        height: 100%;
        display: inline-block;
    }

    .lc-actions-flyout__command-popup {
        position: absolute;
        background-color: var(--command-popup-background-color);
        min-width: 7.5em;
        display: none;
        z-index: var(--z-index__popup);
    }

    .lc-actions-flyout__command-popup-inner {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--command-popup-border-color);
    }

    .lc-actions-flyout__command-popup-item {
        background-color: transparent;
        border: none;
        text-align: left;
        padding-top: 0.4em;
        padding-bottom: 0.4em;
    }

    .lc-actions-flyout__command-popup-item:hover, .lc-actions-flyout__command-popup-item:focus {
        cursor: pointer;
        background-color: var(--command-popup-item-highlight-background-color);
        color: var(--command-popup-item-highlight-text-color);
    }

    .lc-actions-flyout__command-button {
        padding-right: 6px;
        padding-left: 6px;
        background-color: transparent;
        border: 1px solid var(--command-popup-border-color);
        height: 100%;
    }

    .lc-actions-flyout__command-button-icon {
        pointer-events: none;
        vertical-align: middle;
    }

    .lc-actions-flyout__command-popup-helper--top {
        background: var(--command-popup-background-color);
        height: 2px;
        position: absolute;
        right: 0;
        bottom: -1px;
        margin-right: 1px;
    }

    .lc-actions-flyout__command-popup-helper--bottom {
        background: var(--command-popup-background-color);
        height: 2px;
        position: absolute;
        right: 0;
        top: -1px;
        margin-right: 1px;
    }

    /******************************************
     * rde datePicker-flyout block
     ******************************************/

    .lc-datePicker-flyout {
        height: 100%;
        display: inline-block;
    }

    .lc-datePicker-flyout__command-popup {
        position: absolute;
        background-color: var(--command-popup-background-color);
        min-width: 7.5em;
        width: max-content;
        display: none;
        z-index: var(--z-index__popup);
    }

    .lc-datePicker-flyout__command-button {
        padding-right: 10px;
        padding-left: 10px;
        background-color: transparent;
        border: 1px solid var(--command-popup-border-color);
        height: 100%;
    }

    .lc-datePicker-flyout__command-button-icon {
        pointer-events: none;
        vertical-align: middle;
    }

    .lc-datePicker-flyout__command-popup-helper--top {
        background: var(--command-popup-background-color);
        height: 2px;
        position: absolute;
        right: 0;
        bottom: -1px;
        margin-right: 1px;
    }

    .lc-datePicker-flyout__command-popup-helper--bottom {
        background: var(--command-popup-background-color);
        height: 2px;
        position: absolute;
        right: 0;
        top: -1px;
        margin-right: 1px;
    }

    /******************************************
     * rde match-items block
     ******************************************/

    .lc-match-items {
        position: absolute;
        display: flex;
        flex-direction: column;
        background-color: white;
        width: 100%;
        border: 1px solid black;
        z-index: var(--z-index__popup);
    }

    .lc-match-items__item {
        background-color: transparent;
        border: none;
        text-align: left;
        padding-top: 0.4em;
        padding-bottom: 0.4em;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .lc-match-items__item:hover, .lc-match-items__item:focus {
        background-color: var(--matchitem-highlight-background-color);
        color: var(--matchitem-highlight-text-color);
    }

    /******************************************
     * rde errorfield
     ******************************************/

    .lc-rde-errorfield {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto;
        gap: 0.25em;
    }

    .lc-rde-errorfield__title {
        grid-column: 1 / span 2;
    }

    .lc-rde-errorfield__field {
        grid-column: 1;
    }

    .lc-rde-errorfield__messages {
        color: var(--rde-errorfield-color);
        grid-column: 2;
    }

    .lc-rde-errorfield__message {
    }

    /******************************************
     * alert
     ******************************************/

    .lc-alert {
        padding: var(--alert-padding-top-bottom) var(--alert-padding-left-right);
        border: var(--alert-border-size) solid var(--alert-border-color);
        text-align: center;
    }

    .lc-alert--blink {
        animation: lca-border-blink .5s linear;
    }

    .lc-alert--highlight {
        border-color: var(--alert-border-caution-color);
    }

    .lc-alert__message {
        color: var(--alert-message-color);
    }

    .lc-alert__message--error {
        color: var(--alert-message-error-color);
    }

    .lc-alert__message--warning {
        color: var(--alert-message-warning-color);
    }

    .lc-alert__message--success {
        color: var(--alert-message-success-color);
    }

    /******************************************
     * MessageLayout
     ******************************************/

    .lc-message-layout {
        position: relative;
        padding: var(--message-layout-padding-top-bottom) var(--message-layout-padding-left-right);
    }

    .lc-message-layout__close-button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        position: absolute;
        top: calc(var(--message-layout-padding-top-bottom) + var(--alert-border-size) + var(--message-layout-margin));
        right: calc(var(--message-layout-padding-left-right) + var(--alert-border-size) + var(--message-layout-margin));
    }

    .lc-message-layout__close-icon {
        filter: opacity(50%);
        height: 0.75em;
    }

    .lc-message-layout__close-icon:hover {
        filter: opacity(100%);
    }

    /******************************************
     * blazor error css
     ******************************************/

    #blazor-error-ui {
        background: lightyellow;
        bottom: 0;
        box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
        display: none;
        left: 0;
        padding: 0.6rem 1.25rem 0.7rem 1.25rem;
        position: fixed;
        width: 100%;
        z-index: var(--z-index__error);
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

    /******************************************
     * action button css
     ******************************************/

    .lc-action {
        display: flex;
        background-color: var(--action-background-color);
        border: 1px solid var(--action-border-color);
        color: var(--action-text-color);
        padding: var(--action-padding);
        font-size: 1em;
        border-radius: .25em;
        font-weight: 400;
        cursor: pointer;
        align-items: center;
        height: var(--action-height);
    }

    .lc-action:hover:enabled {
        background-color: var(--action-focus-background-color);
        color: var(--action-hover-color);
        border: 1px solid var(--action-hover-border-color);
    }

    .lc-action:focus {
        background-color: var(--action-focus-background-color);
        color: var(--action-hover-color);
        border: 1px solid var(--action-focus-color);
        box-shadow: 0 0 5px var(--action-focus-color);
        outline: none;
    }

    .lc-action:disabled {
        background-color: var(--action-background-color);
        border: 1px solid var(--action-border-color);
        opacity: 0.5;
        cursor: not-allowed;
    }

    .lc-action__icon {
        margin-right: 0.5em
    }

    .lc-explorer-action {
        background: none;
        border: none;
        padding: 0;
        color: var(--lc-profile_hyperlink-default-color);
        cursor: pointer;
    }

    .lc-explorer-action:hover {
        color: var(--lc-profile_hyperlink-hover-color);
        text-decoration: underline;
    }

    /******************************************
     * tooltip css
     ******************************************/

    .lc-tooltip {
        background-color: var(--lc-profile_general-background-color);
        box-shadow: 0px 6px 10px -3px rgba(0,0,0,0.3);
        display: none;
        width: max-content;
        position: absolute;
        z-index: var(--z-index__tooltip);

        padding: 0.2em;
        border: 1px solid var(--lc-profile_general-border-color);
    }

    .lc-tooltip__arrow {
        position: absolute;
        width: var(--tooltip-arrow-size);
        height: var(--tooltip-arrow-size);
        background: inherit;
        transform: rotate(45deg);
    }

    /******************************************
     * dialog css
     ******************************************/

    .lc-dialog {
        position: fixed;
        border: 2px solid black;
        background-color: white;
        display: flex;
        flex-direction: column;
        z-index: var(--z-index__dialog);
    }

    .lc-dialog--large {
        width: 98%;
        height: 91%;
        top: 6%;
        left: 1%;
    }

    .lc-dialog--slim {
        width: 70%;
        height: 91%;
        top: 6%;
        left: 15%;
    }

    .lc-dialog--medium-long {
        width: 50%;
        height: 70%;
        top: 11%;
        left: 30%;
    }

    .lc-dialog--small {
        width: 20%;
        height: 15%;
        top: 42.5%;
        left: 40%;
    }

    .lc-dialog-overlay {
        content: '';
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(220, 220, 220, .6);
        z-index: var(--z-index__dialog-overlay);
    }

    .lc-dialog__content {
        border-width: 0;
        flex-grow: 1;
        overflow: auto;
        display: flex;
    }

    .lc-dialog--medium {
        --medium-dialog-width: 31.25rem;
        --medium-dialog-min-height: 11.25rem;
        --medium-dialog-max-height: 11.25rem;
        margin: auto;
        width: var(--medium-dialog-width);
        min-height: var(--medium-dialog-min-height);
        max-height: var(--medium-dialog-max-height);
        left: calc(50% - (var(--medium-dialog-width) / 2));
        top: calc(40% - (var(--medium-dialog-min-height) / 2));
    }

    /******************************************
     * Confirm Dialog Block
     ******************************************/

    .lc-confirm-dialog {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        padding: 0.5em;
    }

    .lc-confirm-dialog__content {
        display: flex;
        justify-content: center;
        flex: 1;
        flex-direction: column;
    }

    .lc-confirm-dialog__action_layout {
        display: flex;
        justify-content: right;
        column-gap: 0.4em;
    }

    /******************************************
     * Session Expiry Dialog Block
     ******************************************/

    .lc-session-expiry-dialog {
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    .lc-session-expiry-dialog__content {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
    }

    .lc-session-expiry-dialog__action_layout {
        display: flex;
        justify-content: right;
        padding: 0.5em;
    }

    /******************************************
     * Confirm Message Block
     ******************************************/

    .lc-confirm-message {
        margin: auto;
    }

    /******************************************
     * Confirm Message Block
     ******************************************/

    .lc-action_button__button {
        cursor: pointer;
        background-color: var(--action-background-color);
        border: 1px solid var(--action-border-color);
        color: var(--action-text-color);
        padding: .375em .75em;
        font-size: 1em;
        border-radius: .25em;
        font-weight: 400;
    }

    .lc-action_button__button:hover,
    .lc-action_button__button:focus {
        background-color: var(--action-focus-background-color);
        color: var(--action-hover-color);
        border: 1px solid var(--action-hover-border-color);
    }

    .lc-action_button__button:focus {
        border: 1px solid var(--action-focus-color);
        box-shadow: 0 0 5px var(--action-focus-color);
        outline: none;
    }

    /******************************************
     * input action css
     ******************************************/

    .lc-action_input__input {
        margin-left: 0.25em;
        width: 3em;
    }

    /******************************************
     * progress layout css
     ******************************************/

    .lc-progress-layout {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
    }

    .lc-progress-layout__progress-text {
        font-size: 1em;
        text-align: center;
    }

    /******************************************
     * excel import
     ******************************************/

    .lc-excel_import__content {
        margin-right: var(--layout-padding-right);
        display: inline-block;
    }

    .lc-excel_mapfield {
        padding: 0.25em 0 0.5em 0;
        min-width: var(--excel-mapfield-width);
    }

    /******************************************
     * excel table css
     ******************************************/

    .lc-excel_table {
        width: 100%;
    }

    .lc-excel_table__row:first-child {
        position: sticky;
        top: var(--content-layout-header-height);
        background-color: var(--lc-profile_general-background-color);
        z-index: var(--z-index__column-header);
    }

    .lc-excel_table__cell:first-child,
    .lc-excel_table__header:first-child {
        padding-left: 0;
        text-align: right;
    }

    .lc-excel_table__header:last-child,
    .lc-excel_table__cell:last-child {
        padding-right: 0;
    }

    .lc-excel_table__row {
    }

    .lc-excel_table__header {
        vertical-align: top;
    }

    .lc-excel_table__header,
    .lc-excel_table__cell {
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 20em;
        padding: 0 5px;
    }

    .lc-excel_table__tooltip {
        position: absolute;
        background: var(--excel-cell-tooltip-background-color);
        padding: 0.5em 0.5em;
        display: none;
        box-shadow: 0px 0px 10px 1px gray;
        border-radius: .25em;
        font-size: 0.9em;
    }

    /******************************************
     * content layout
     ******************************************/

    .lc-content-template__header {
        height: var(--content-layout-header-height);
        background-color: var(--lc-profile_general-background-color);
        padding: var(--layout-padding-top) var(--layout-padding-right) 0 var(--layout-padding-left);
        width: 100%;
        overflow: hidden;
    }

    .lc-content-template__header--fixed {
        position: fixed;
        top: 0;
        left: 0;
    }

    .lc-content-template__body {
        margin-top: var(--content-layout-header-height);
    }

    /******************************************
     * loading content
     ******************************************/

    .lc-loading {
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        justify-content: center;
    }

    .lc-loading__message {
        display: flex;
        justify-content: center;
        font-weight: bold;
        font-size: larger;
    }

    /*****************************************
    * ListBox
    *****************************************/

    .lc-list-box {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border: 1px solid black;
        z-index: var(--z-index__popup);
    }

    .lc-list-box--restricted-height {
        height: 20em;
        overflow-y: auto;
    }

    .lc-list-box__list-style {
        list-style: none;
        padding: 0px;
        margin: 0px;
    }

    .lc-list-item {
        background-color: transparent;
        border: none;
        text-align: left;
        padding-top: 0.4em;
        padding-bottom: 0.4em;
        overflow-wrap: break-word;
        white-space: normal;
        padding: 0.5em;
    }

    .lc-list-item--keyboard-highlighted {
        cursor: pointer;
        background-color: var(--matchitem-highlight-background-color);
        color: var(--matchitem-highlight-text-color);
        outline: 5px auto -webkit-focus-ring-color;
    }

    .lc-list-item--mouse-highlighted {
        cursor: pointer;
        background-color: var(--command-popup-item-highlight-background-color);
        color: var(--command-popup-item-highlight-text-color);
    }

    /*****************************************
    * Context Menu
    *****************************************/

    .lc-context-menu {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border: 1px solid black;
        z-index: var(--z-index__popup);
    }

    .lc-context-menu:focus {
        outline: none;
    }

    .lc-context-menu__list-style {
        list-style: none;
        padding: 0px;
        margin: 0px;
    }

    .lc-menu-item {
        background-color: transparent;
        border: none;
        text-align: left;
        padding-top: 0.4em;
        padding-bottom: 0.4em;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .lc-menu-item--keyboard-highlighted {
        cursor: pointer;
        background-color: var(--matchitem-highlight-background-color);
        color: var(--matchitem-highlight-text-color);
        outline: 5px auto Highlight;
        outline: 5px auto -webkit-focus-ring-color;
    }

    .lc-menu-item--mouse-highlighted {
        cursor: pointer;
        background-color: var(--command-popup-item-highlight-background-color);
        color: var(--command-popup-item-highlight-text-color);
    }

    /*****************************************
    * Explorer
    *****************************************/

    :root {
        --explorer-item-drag-highlight-color: var(--lc-profile_selectable-highlight-background-color);
        --explorer-item-active-background-color: var(--lc-profile_selectable-highlight-background-color);
    }

    .lc-explorer {
        display: flex;
        flex-direction: column;
        margin: 2px;
    }

    .lc-explorer--active {
        outline: 2px solid;
    }

    .lc-explorer--grow {
        flex-grow: 1;
        overflow-x: hidden;
    }

    .lc-explorer__action-container {
        display: flex;
        justify-content: center;
    }

    .lc-explorer__items {
        display: flex;
        flex-direction: column;
        gap: 0.125em;
        margin: 0;
        padding: 0;
        flex: 1 0 auto;
        min-height: 1em;
        user-select: none;
    }

    .lc-explorer__item {
        --explorer-item-border-color: none;
        --explorer-item-border-width: 0;
        --explorer-item-background-color: white;
        --explorer-item-text-color: inherit;
        --explorer-item-background-image: none;
        padding: 0.25em;
        display: block;
        margin: 0;
        border: var(--explorer-item-border-width) solid var(--explorer-item-border-color);
        background-color: var(--explorer-item-background-color);
        background-image: var(--explorer-item-background-image);
        overflow-x: clip;
        cursor: default;
        color: var(--explorer-item-text-color);
    }

    .lc-explorer__item--highlight {
        --explorer-item-text-color: var(--lc-profile_selectable-highlight-text-color);
        --explorer-item-background-color: var(--lc-profile_selectable-highlight-background-color);
    }

    .lc-explorer__item--error {
        --explorer-item-background-color: var(--selectable-error-background-color);
        --explorer-item-text-color: var(--selectable-error-text-color);
    }

    .lc-explorer__item--selected {
        --explorer-item-text-color: var(--lc-profile_selectable-selected-text-color);
        --explorer-item-background-color: var(--lc-profile_selectable-selected-background-color);
    }

    .lc-explorer__item--active {
        --explorer-item-text-color: var(--lc-profile_selectable-focus-color);
        --explorer-item-background-color: var(--lc-profile_selectable-focus-background-color);
    }

    .lc-explorer__item--inactive {
        --explorer-item-text-color: var(--lc-profile_selectable-selected-text-color);
        --explorer-item-background-color: var(--selectable-selected-inactive-background-color);
    }

    .lc-explorer__item--error-indicator {
        --explorer-item-background-image: linear-gradient(135deg, var(--selectable-error-background-color) 4em, transparent 4em);
    }

    /*****************************************
    * Explorer drag and drop
    *****************************************/

    .lc-explorer--insert-empty {
        background-color: var(--explorer-item-drag-highlight-color);
    }

    .lc-explorer__item--insert-after {
        border-bottom: 1px solid var(--explorer-item-drag-highlight-color);
    }

    .lc-explorer__item--insert-before {
        border-top: 1px solid var(--explorer-item-drag-highlight-color);
    }

    .lc-explorer-drag-summary {
        padding: 0.5em;
        width: 100px;
        height: 100px;
        border: 1px dashed blue;
        background-color: white;
        position: absolute;
        overflow-y: hidden;
        text-align: center;
        display: none;
    }

    .lc-explorer-drag-summary__heading {
        font-size: 1.5em;
    }

    .lc-explorer-drag-summary__body {
        font-size: 1em;
    }

    .lc-explorer-drag-mode--drag-start {
        display: inline;
    }

    .lc-explorer-drag-mode--drag-end {
        display: none;
    }

    /*****************************************
    * Report field list selection
    *****************************************/

    .lc-report-fieldlist__header {
        text-align: center;
        padding: 1em;
        white-space: nowrap;
    }

    .lc-report-fieldlist__toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: var(--layout-padding-top);
    }

    .lc-report-fieldlist__selection {
        display: flex;
        flex: 1 1 auto;
        height: 0;
    }

    .lc-report-fieldlist__list_header,
    .lc-report-fieldlist__detail_header {
        text-align: center;
        padding: 0.5em;
        white-space: nowrap;
    }

    .lc-report-fieldlist__list_body {
        border: 1px solid #dddddd;
        display: flex;
        flex-grow: 1;
        overflow-y: auto;
    }

    .lc-report-fieldlist__source {
        display: flex;
        flex-direction: column;
        min-width: 20%;
        flex-shrink: 0;
    }

    .lc-report-fieldlist__target {
        display: flex;
        flex-direction: column;
        min-width: 20%;
        flex-shrink: 0;
    }

    .lc-report-fieldlist__detail {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-width: 20%;
    }

    .lc-report-fieldlist__detail--dimmed {
        opacity: var(--dimmed-opacity);
    }

    .lc-report-fieldlist__detail_body {
        flex: 1 1 auto;
        border: 1px solid #dddddd;
        padding: 0.25em;
        overflow-y: auto;
    }

    .lc-report-fieldlist__resizer {
        background-color: var(--resizer-color);
        width: var(--resizer-width);
        min-width: var(--resizer-width);
        cursor: col-resize;
    }

    /*****************************************
    * Report field list columns
    *****************************************/

    .lc-reportfield__row {
        display: flex;
    }

    .lc-reportfield__column-main {
        text-overflow: ellipsis;
        overflow-x: hidden;
        white-space: nowrap;
    }

    .lc-reportfield__column-action {
        width: 1em;
        visibility: hidden;
        margin-left: auto;
    }

    .lc-reportfield__column-action--visible {
        visibility: visible;
    }

    .lc-reportfield__action {
        font-size: small;
        cursor: pointer
    }

    .lc-reportfield__indicator-duplicate {
        font-size: 0.75em;
        color: darkgray;
        padding-left: 0.5em;
    }

    .lc-reportfield__details {
        width: 1em;
        display: none;
        margin-left: auto;
    }

    .lc-reportfield__details--visible {
        padding-left: 0.5em;
        padding-right: 0.5em;
        font-weight: bold;
        display: inline;
    }

    /*****************************************
    * FieldSelector
    *****************************************/

    .lc-linkfield-selector {
        display: flex;
        gap: 0.25em;
        flex-direction: column;
    }

    .lc-linkfield-selector__input {
        display: flex;
        align-items: center;
        gap: 0.25em;
    }

    .lc-linkfield-selector__fields {
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lc-linkfield-selector__fields__field-details {
        padding-left: 0.5em;
        font-weight: bold;
    }

    /******************************************
    * SortFieldSelector
    ******************************************/

    .lc-sortfield-selector {
        display: flex;
        align-items: end;
        flex-direction: column;
        white-space: nowrap;
        gap: 0.25em;
        width: 30%;
    }

    .lc-sortfield-selector__sortfields-container {
        overflow-x: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .lc-sortfield-selector__sortfields-textwrap {
        white-space: normal;
        max-width: 50%;
    }

    /*****************************************
    * Templatefield List
    *****************************************/

    .lc-templatefieldlist__row {
        display: flex;
    }

    .lc-templatefieldlist__column-action {
        display: flex;
        width: 1em;
    }

    .lc-templatefieldlist__action-item {
        cursor: pointer;
    }

    .lc-templatefieldlist__column-main {
        width: auto;
        text-overflow: ellipsis;
        overflow-x: hidden;
        white-space: nowrap;
    }

    .lc-templatefieldlist__column-main__column-details {
        width: 1em;
        display: none;
        margin-left: auto;
    }

    .lc-templatefieldlist__column-main__column-details--visible {
        padding-left: 0.5em;
        font-weight: bold;
        display: inline;
    }

    /*****************************************
    * Form
    *****************************************/

    .lc-view,
    .lc-edit {
        display: flex;
        flex-direction: column;
        gap: var(--form-gap);
    }

    /*****************************************
    * Form Group
    *****************************************/

    .lc-view-group,
    .lc-edit-group {
        display: flex;
        gap: 1em;
        align-items: baseline;
    }

    .lc-view-group__label,
    .lc-edit-group__label {
        flex: 0 0 10em;
    }

    .lc-view-group__value,
    .lc-edit-group__value {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lc-field-validation-error {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
        color: var(--lc-profile_message-error-color);
    }

    .lc-field-validation-error--blink {
        animation: lca-text-blink .5s linear;
    }

    /*****************************************
    * View/Edit Header
    *****************************************/
    .lc-view-header,
    .lc-edit-header {
        display: flex;
        gap: 1em;
        background-color: var(--propertyHeader-background-color);
        border: 2px solid var(--propertyHeader-border-color);
        font-size: 1em;
    }

    .lc-view-header__container,
    .lc-edit-header__container {
        border: none;
        display: block;
        text-align: left;
        font-size: 1em;
        font-weight: 500;
        width: 100%;
        padding: 0.5em;
        background-color: var(--propertyHeader-background-color);
    }

    .lc-view-header__action,
    .lc-edit-header__action {
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
    }

    /*****************************************
    * Form HeaderGroup
    *****************************************/

    .lc-view-header-group,
    .lc-edit-header-group {
    }

    .lc-view-header-group__items,
    .lc-edit-header-group__items {
        display: flex;
        flex-direction: column;
        padding-left: var(--propertyHeader-content-left-padding);
        padding-top: var(--propertyHeader-content-padding);
        padding-right: var(--propertyHeader-content-padding);
        padding-bottom: var(--propertyHeader-content-padding);
        gap: var(--form-field-gap);
        border: 2px solid var(--propertyHeader-border-color);
        border-top: 0px;
    }

    /*****************************************
    * Indicators
    *****************************************/

    .lc-loading-indicator {
        border: 2px solid #333;
        border-radius: 50%;
        height: 1em;
        width: 1em;
        border-right-color: #fff;
        animation: spin 3s infinite linear;
    }

    @keyframes spin {
        100% {
            transform: rotate(360deg);
        }
    }

    /*****************************************
    * Breadcrumb
    *****************************************/

    .lc-wa-breadcrumb {
        margin: 0.5em 0em 0.5em;
        padding: 0px;
        line-height: 0px;
        display: flex;
        zoom: 1;
        vertical-align: middle;
        height: var(--breadcrumb-height);
    }

    .lc-wa-breadcrumb__item {
        position: relative;
        margin: 0px 0px;
        padding: 0px;
        border-left: 1px solid var(--breadcrumb-border-color);
        display: block;
        line-height: var(--breadcrumb-height);
        color: var(--breadcrumb-text-color);
        padding: 0px 15px 0px 25px;
        text-decoration: none;
        background: var(--breadcrumb-background-color);
        border: 1px solid var(--breadcrumb-border-color);
        border-left: none;
        border-right: none;
        white-space: nowrap;
        transition: var(--breadcrumb-ease-time);
        max-width: var(--breadcrumb-max-width);
        overflow: hidden;
        height: var(--breadcrumb-height);
    }

    .lc-wa-breadcrumb__item-wrapper {
        background: transparent;
        display: inline-block;
        position: relative;
        transition: var(--breadcrumb-ease-time);
    }

    .lc-wa-breadcrumb__item-wrapper:before {
        content: "";
        position: absolute;
        right: -9px;
        top: 0px;
        z-index: 20;
        border-left: var(--breadcrumb-chevron-border-left) solid var(--breadcrumb-background-color);
        border-top: var(--breadcrumb-chevron-border-top) solid transparent;
        border-bottom: var(--breadcrumb-chevron-border-bottom) solid transparent;
        transition: var(--breadcrumb-ease-time);
    }

    .lc-wa-breadcrumb__item-wrapper:after {
        content: "";
        position: absolute;
        right: -10px;
        top: 0px;
        z-index: 10;
        border-left: var(--breadcrumb-chevron-border-left) solid var(--breadcrumb-border-color);
        border-top: var(--breadcrumb-chevron-border-top) solid transparent;
        border-bottom: var(--breadcrumb-chevron-border-bottom) solid transparent;
        transition: var(--breadcrumb-ease-time);
    }

    .lc-wa-breadcrumb__item-wrapper--mouse-over {
        background: transparent;
        display: inline-block;
        position: relative;
    }

    .lc-wa-breadcrumb__item-wrapper--mouse-over:before {
        content: "";
        position: absolute;
        right: -9px;
        top: 0px;
        z-index: 20;
        border-left: var(--breadcrumb-chevron-border-left) solid var(--breadcrumb-highlight-color);
        border-top: var(--breadcrumb-chevron-border-top) solid transparent;
        border-bottom: var(--breadcrumb-chevron-border-bottom) solid transparent;
        transition: var(--breadcrumb-ease-time);
    }

    .lc-wa-breadcrumb__item-wrapper--mouse-over:after {
        content: "";
        position: absolute;
        right: -10px;
        top: 0px;
        z-index: 10;
        border-left: var(--breadcrumb-chevron-border-left) solid var(--breadcrumb-border-color);
        border-top: var(--breadcrumb-chevron-border-top) solid transparent;
        border-bottom: var(--breadcrumb-chevron-border-bottom) solid transparent;
    }

    .lc-wa-breadcrumb__item--mouse-over {
        position: relative;
        margin: 0px 0px;
        padding: 0px;
        border-left: 1px solid var(--breadcrumb-border-color);
        display: block;
        line-height: var(--breadcrumb-height);
        padding: 0px 15px 0px 25px;
        text-decoration: none;
        border: 1px solid #ddd;
        border-left: none;
        border-right: none;
        white-space: nowrap;
        transition: var(--breadcrumb-ease-time);
        max-width: var(--breadcrumb--active-max-width);
        color: var(--breadcrumb--highlight-text-color);
        background: var(--breadcrumb-highlight-color);
        cursor: pointer;
        height: var(--breadcrumb-height);
    }

    .lc-wa-breadcrumb__anchor-item {
        position: relative;
        border-left: 1px solid var(--breadcrumb-border-color);
        display: block;
        line-height: var(--breadcrumb-height);
        color: var(--breadcrumb-text-color);
        padding: 0px 15px 0px 25px;
        text-decoration: none;
        background: var(--breadcrumb-background-color);
        border: 1px solid var(--breadcrumb-border-color);
        border-right: none;
        white-space: nowrap;
        transition: var(--breadcrumb-ease-time);
        max-width: var(--breadcrumb-max-width);
        overflow: hidden;
        border-radius: 5px 0px 0px 5px;
        height: var(--breadcrumb-height);
    }

    .lc-wa-breadcrumb__anchor-item--mouse-over {
        position: relative;
        border-left: 1px solid var(--breadcrumb-border-color);
        display: block;
        line-height: var(--breadcrumb-height);
        padding: 0px 15px 0px 25px;
        text-decoration: none;
        border: 1px solid #ddd;
        border-radius: 5px 0px 0px 5px;
        border-right: none;
        white-space: nowrap;
        transition: var(--breadcrumb-ease-time);
        max-width: var(--breadcrumb--active-max-width);
        color: var(--breadcrumb--highlight-text-color);
        background: var(--breadcrumb-highlight-color);
        cursor: pointer;
        height: var(--breadcrumb-height);
    }

    .lc-wa-breadcrumb__active-item {
        display: block;
        color: var(--lc-profile_selectable-selected-text-color);
        line-height: var(--breadcrumb-height);
        padding: 0px 15px 0px 25px;
        text-decoration: none;
        background: #fff;
        border: 1px solid var(--breadcrumb-border-color);
        border-left: none;
        white-space: nowrap;
        overflow: hidden;
        transition: var(--breadcrumb-ease-time);
        padding-right: 20px;
        border-radius: 0px var(--breadcrumb-height) var(--breadcrumb-height) 0px;
        background: var(--lc-profile_selectable-selected-background-color);
        height: var(--breadcrumb-height);
    }

    .lc-wa-breadcrumb__tooltip {
        line-height: normal;
    }

    /*****************************************
    * CustomDateTime
    *****************************************/
    .lc-custom-datetime {
        display: flex;
        gap: 1em;
        align-items: baseline;
    }

    .lc-custom-datetime__input {
        width: 15em;
    }

    /****************************************
    * Explorer Section Header
    *****************************************/

    .lc-explorer-section-header {
        background-color: gainsboro;
        padding: 0.25em;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
    }

    .lc-explorer-section-header-action {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }

    /****************************************
    * Translation Component.
    *****************************************/

    .lc-translation {
        display: flex;
        gap: 0.5em
    }

    .lc-translation__action {
    }

    .lc-translation__input {
        width: 100%;
    }

    .lc-translation_options {
        display: inline-block;
        margin: 1em;
        width: 100%
    }

    .lc-translation_options__action {
    }

    .lc-translation_options__input {
        margin-top: 0.5em;
    }

    /****************************************
    * ID Component.
    *****************************************/

    .lc-ID__input {
        width: 15em;
    }

    .lc-component_id_layout {
        display: flex;
        gap: 0.5em;
    }

    /****************************************
    * Readonly form field readonly component.
    *****************************************/

    .lc-field__display {
        white-space: normal;
    }

    .lc-field__message--error {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
        color: var(--lc-profile_message-error-color);
    }

    /************************************
    * Three Column Layout
    *************************************/

    .lc-three-column-layout__header {
        text-align: center;
        padding: 1em;
        white-space: nowrap;
    }

    .lc-three-column-layout__container {
        display: flex;
        flex: 1 1 auto;
    }

    .lc-three-column-layout__container--modal {
        height: 0;
    }

    .lc-three-column-layout__container--main {
        height: 100%;
    }

    .lc-three-column-layout__column_header {
        text-align: center;
        padding: 0.5em;
        white-space: nowrap;
    }

    .lc-three-column-layout__column1_body,
    .lc-three-column-layout__column2_body {
        border: 1px solid #dddddd;
        display: flex;
        flex-grow: 1;
        overflow-y: auto;
    }

    .lc-three-column-layout__column3_body {
        flex: 1 1 auto;
        border: 1px solid #dddddd;
        padding: 0.25em;
        overflow-y: auto;
    }

    .lc-three-column-layout__column1,
    .lc-three-column-layout__column2 {
        display: flex;
        flex-direction: column;
        min-width: 20%;
        flex-shrink: 0;
    }

    .lc-three-column-layout__column3 {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-width: 20%;
    }

    .lc-three-column-layout__column3--dimmed {
        opacity: var(--dimmed-opacity);
    }

    .lc-three-column-layout__resizer {
        background-color: var(--resizer-color);
        width: var(--resizer-width);
        min-width: var(--resizer-width);
        cursor: col-resize;
    }

    /************************************
    * Animations
    *************************************/

    @keyframes lca-border-blink {
        0% {
            border-color: transparent;
        }
    }

    @keyframes lca-textblink {
        0% {
            color: transparent;
        }
    }

    /************************************
    * BuildQuery
    *************************************/

    .lc-buildquery {
        display: flex;
        flex-direction: column;
        gap: var(--form-gap);
    }

    .lc-buildquery__header {
        font-size: small;
    }

    .lc-buildquery__message {
    }

    /*********************************
    *   Label Text
    **********************************/

    .lc-label-text {
        display: flex;
        align-items: center;
        gap: 0.5em;
    }

    .lc-label-text__mode-selector {
        flex: 0 0 4em;
    }

    .lc-label-text__text-input {
        flex: 1;
    }


    /***********************************
    *    UI Blocking Layout
    ************************************/

    .lc-progress-dialog {
        position: fixed;
        left: 0;
        top: 0;
        opacity: 0;
        height: 100vh;
        width: 100vw;
        z-index: 2000;
        cursor: wait;
    }

    .lc-progress-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    /******************************************
     * Calculated Field Dialog
     ******************************************/

    .lc-calculated-field-dialog {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        padding: var(--layout-padding-top) var(--layout-padding-right) var(--layout-padding-bottom) var(--layout-padding-left);
    }

    .lc-calculated-field-dialog__header {
        text-align: center;
        padding: 1em;
        white-space: nowrap;
    }

    .lc-calculated-field-dialog__container {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        height: 0;
    }

    .lc-calculated-field-dialog__body {
        border: 1px solid #dddddd;
        display: flex;
        flex-grow: 1;
        overflow-y: auto;
    }


    /******************************************
     * AI: Template Configuration
     ******************************************/

    .lc-template-configuration {
        padding-top: var(--layout-padding-top);
        padding-bottom: var(--layout-padding-bottom);
        display: flex;
        flex-direction: column;
    }


    /******************************************
     * Drag and Drop Selection List
     ******************************************/

    .lc-dnd-selection-list {
        display: flex;
        height: 30em;
    }

    .lc-dnd-selection-list__empty-text {
        display: flex;
        width: 100%;
        justify-content: center;
        align-self: center;
    }

    /*****************************************
    * AutoComplete
    *****************************************/
    .lc-autocomplete {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%
    }

    .lc-autocomplete__input {
        width: 100%;
    }

    .lc-autocomplete__interactable-input {
        cursor: pointer;
    }

    .lc-autocomplete__error {
        margin-top: 0.5em;
    }

    .lc-autocomplete__interactable-input:focus {
        background-color: var(--lc-profile_selectable-highlight-background-color);
    }

    .lc-autocomplete__interactable-input:hover:enabled {
        border-radius: 4px;
        background-color: var(--lc-profile_selectable-highlight-background-color);
    }

    .lc-autocomplete__caret {
        background: none;
        border: none;
        margin-left: -2em;
        cursor: pointer;
        outline: none;
    }

    /******************************************
     * Login form
     ******************************************/

    .lc-login {
        width: 50%;
        min-width: 400px;
        margin: 0 auto;
    }

    .lc-login__header {
        text-align: center;
        padding: 1em;
        white-space: nowrap;
        font-size: large;
    }

    /******************************************
     * Popup
     * When switching between popup display animation
     * we are using css class which requires the animation name change
     * https://css-tricks.com/restart-css-animation/
     ******************************************/

    .lc-popup {
        position: absolute;
        background-color: var(--lc-profile_general-background-color);
        width: max-content;
        box-shadow: 0px 6px 10px -3px rgba(0,0,0,0.3);
        z-index: var(--z-index__popup);
        padding: 0.2em;
        border: 1px solid var(--lc-profile_general-border-color);
        display: none;

        /* general text color for the popup */
        color: var(--lc-profile_general-text-color);
        text-align: left;
        font-size: 1rem;
        padding: 0.5em 1em;
        border-radius: 4px;
        transition-behavior: allow-discrete;
    }

    .lc-popup--show {
        display: block;
    }

    .lc-popup--hidden {
        display: none;
    }

    .lc-popup--fadeIn {
        animation: fadeIn 0.5s forwards;
    }

    .lc-popup--fadeOut {
        animation: fadeOut 0.5s forwards;
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
            display: none;
        }

        100% {
            opacity: 1;
            display: block;
        }
    }

    @keyframes fadeOut {
        0% {
            opacity: 1;
            display: block;
        }

        100% {
            opacity: 0;
            display: none;
        }
    }

    /******************************************
     * Database list
     ******************************************/
    .lc-database-list {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        align-items: center;
    }

    .lc-database-list__link {
        text-decoration: none;
        color: var(--lc-profile_hyperlink-default-color);
    }

    .lc-database-list__link:hover {
        text-decoration: underline;
        color: var(--lc-profile_hyperlink-hover-color);
    }

    /******************************************
     * Search Result
     ******************************************/
    .lc-searchresult {
        margin: 0.5em 0;
    }

    /******************************************
     * Explorer Grid Data
     ******************************************/
    .lc-explorer-grid-data {
        width: 100%;
        border-spacing: 0;
        border-collapse: collapse;
    }

    .lc-explorer-grid-data__header-cell {
        text-align: start;
        border-bottom: 1px solid var(--lc-profile_general-border-color);
        padding: 1em;
    }

    .lc-explorer-grid-data__data-cell {
        text-align: start;
        padding: 0.5em;
        border-bottom: 1px solid var(--lc-profile_general-border-color);
    }

    .lc-explorer-grid-data__data-cell:focus {
        outline: 2px solid black;
        border-bottom: none;
    }

    .lc-explorer-grid-data__row {
        height: var(--lc-profile_searchresult-row-height);
        font-size: var(--lc-profile_searchresult-text-size);
    }

    .lc-explorer-grid-data__row:hover {
        background-color: var(--lc-profile_selectable-highlight-background-color);
        color: var(--lc-profile_selectable-selected-text-color);
    }

    .lc-explorer-grid-data__row:focus {
        border: none;
        outline: 2px solid black;
    }

    .lc-explorer-grid-data__row--selected {
        background-color: var(--lc-profile_selectable-highlight-background-color);
    }

    .lc-explorer-grid-data__row:hover {
        background-color: var(--matchitem-highlight-background-color);
        color: var(--matchitem-highlight-text-color);
    }

    /******************************************
     * Content header
     ******************************************/
    .lc-content-header {
        margin: 0 0 1em 0;
    }

    .lc-content-header__header {
        font-size: 1.4375em;
        text-transform: uppercase;
        margin: auto;
    }

    /******************************************
     * Login content styles
     ******************************************/
    .lc-login-navgroup {
        margin: 1em auto;
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

    /******************************************
     * Code Style
     ******************************************/
    .lc-code-block {
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    /******************************************
     * Input Select Field Value Layout Style
     ******************************************/
    .lc-select-field-layout__info {
        margin-top: 0.25em;
    }

    /******************************************
     * Field Validation Info Style
     ******************************************/
    .lc-field-validation-info {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }


    /****************************
        Menubar
    ****************************/
    :root {
        /* 2em padding: 1em padding for menu, 0.5 em for section body, 0.5 em for group body */
        --lc-menucontainer-bg-color: white;
        --lc-menugroup-max-group-count: 5;
        --lc-menugroup-column-width: calc((1920px - 2em) / var(--lc-menugroup-max-group-count));
        --lc-menugroup-column-gap: calc(var(--lc-menugroup-column-width) * 0.1);
        --lc-menugroup-column-size: 1;
        --lc-banner-height: 2.75em;
        --lc-menugroup-group-column-count: 2;
        --lc-menugroup-column-span: 2;
        --lc-menugroup-max-column-item-count: 10;
        --lc-menugroup-padding-size: 0.5em;
        --lc-menuitem-padding-size: .4em;
        --lc-menuitem-scrollbar-buffer: 1.125em;

        /*** size definitions ***/

        /* document.body.scrollWidth of 1920 */
        --lc-content-width---normal: 1881px;
        --lc-menugroup-width---normal: 376px; /*calc(var(--lc-content-width---normal) / 5);*/
        --lc-menugroup-columns---normal: 2;
        --lc-menugroup-padding---normal: 0.5em;
        --lc-menugroup-max-rows---normal: 10;
        --lc-menugroup-max-span---normal: 0;
        --lc-menuitem-padding---normal: 0.5em;
        --lc-menuitem-height---normal: 1.5em;

        /* document.body.scrollWidth of 1536 */
        --lc-content-width---small: 1497px;
        --lc-menugroup-width---small: 299px; /*calc(var(--lc-content-width---small) / 5);*/
        --lc-menugroup-columns---small: 1;
        --lc-menugroup-padding---small: 1.5em;
        --lc-menugroup-max-rows---small: 6;
        --lc-menugroup-max-span---small: 0;
        --lc-menuitem-padding---small: 0.5em;
        --lc-menuitem-height---small: 1.5em;

        /* document.body.clientWidth with smallest width */
        --lc-content-width---tiny: 461px;
        --lc-menugroup-width---tiny: 400px;
        --lc-menugroup-columns---tiny: 1;
        --lc-menugroup-padding---tiny: 0.5em;
        --lc-menugroup-max-rows---tiny: 10;
        --lc-menugroup-max-span---tiny: 5;
        --lc-menuitem-padding---tiny: 0.5em;
        --lc-menuitem-height---tiny: 1.5em;

        /* default to normal width */
        --lc-menugroup-width: var(--lc-menugroup-width---normal);
        --lc-menugroup-columns: var(--lc-menugroup-columns---normal);
        --lc-menugroup-padding: var(--lc-menugroup-padding---normal);
        --lc-menugroup-max-rows: var(--lc-menugroup-max-rows---normal);
        --lc-menugroup-max-span: var(--lc-menugroup-max-span---normal);
        --lc-menuitem-padding: var(--lc-menuitem-padding---normal);
        --lc-menuitem-height: var(--lc-menuitem-height---normal);
    }

    .lc-banner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: var(--lc-banner-height);
        color: var(--lc-profile_general-header-link-color);
        background-color: var(--lc-profile_general-header-color);
        background-image: linear-gradient(to right, var(--lc-profile_general-header-color), var(--lc-profile_general-header-gradient-color));
        position: relative;
    }

    .lc-banner__logo {
        display: flex;
        height: 100%;
        align-items: center;
        padding: 0 0.5em;
    }

    .lc-banner__logo:focus {
        outline: 2px solid var(--lc-profile_general-header-link-color);
        outline-offset: -3px;
    }

    .lc-banner__logo-image {
        max-height: 35px;
        padding: 0 2em;
    }

    .lc-user-menu {
        display: flex;
        height: 100%;
    }

    .lc-user-menu__dropdown {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        background-color: var(--lc-profile_general-background-color);
        min-width: 13.375em;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        text-align: right;
        z-index: var(--z-index__menu);
    }

    .lc-user-menu__dropdown a {
        display: flex;
        flex-direction: column;
        padding: 0.5em 0.75em;
        font-size: 1em;
        color: var(--lc-profile_hyperlink-default-color);
        text-decoration: none;
    }

    .lc-user-menu__dropdown a:hover {
        background-color: var(--lc-profile_selectable-highlight-background-color);
        color: var(--lc-profile_selectable-highlight-text-color);
    }

    .lc-menubar {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin: 0;
        padding: 0;
        border-top: initial;
        border-bottom: initial;
        width: 100%;
        height: 100%;
    }

    .lc-menubar__menulist {
        display: flex;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    .lc-menubar__menuitem {
        display: flex;
        height: 100%;
        width: 100%;
    }

    .lc-menubar__menuitem-button, .lc-user-menu__toggle {
        all: unset;
        box-sizing: border-box
    }

    .lc-menubar__menuitem-button, .lc-menubar__menuitem-link, .lc-user-menu__toggle {
        color: inherit;
        display: flex;
        padding: 0 0.5em;
        cursor: pointer;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        text-wrap: nowrap;
    }

    .lc-menubar__menuitem-link--user {
        padding: 0 2em;
    }

    .lc-user-menu__toggle {
        padding: 0 2em;
    }

    .lc-menubar__menuitem-button::after, .lc-user-menu__toggle::after {
        content: "";
        border-bottom: 1px solid var(--lc-profile_general-header-link-color);
        border-right: 1px solid var(--lc-profile_general-header-link-color);
        height: 0.5em;
        margin-left: 0.75em;
        margin-top: -0.125em;
        width: 0.5em;
        transform: rotate(45deg);
    }

    .lc-menubar__menuitem-button:hover,
    .lc-user-menu__toggle:hover,
    .lc-menubar__menuitem-button[aria-expanded="true"],
    .lc-user-menu__toggle[aria-expanded="true"] {
        background-color: var(--lc-profile_selectable-focus-background-color);
        color: var(--lc-profile_selectable-focus-color);
    }

    .lc-menubar__menuitem-button[aria-expanded="true"]::after, .lc-user-menu__toggle[aria-expanded="true"]::after {
        margin-top: 0.475em;
        transform: rotate(225deg);
        border-bottom: 1px solid var(--lc-profile_selectable-focus-color);
        border-right: 1px solid var(--lc-profile_selectable-focus-color);
    }

    .lc-menubar__menuitem-button:focus, .lc-menubar__menuitem-link:focus, .lc-user-menu__toggle:focus {
        outline: 2px solid var(--lc-profile_general-header-link-color);
        outline-offset: -3px;
    }

    .lc-menuprofile {
        display: flex;
        flex-direction: column-reverse;
        z-index: var(--z-index__dialog);
    }

    .lc-menu-container {
        --menu-container-padding: 1em;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: black 2px solid;
        background-color: var(--lc-menucontainer-bg-color);
        padding: var(--menu-container-padding) 0;
        opacity: 0;
        display: none;
        z-index: var(--z-index__menu);
        width: 100%;
    }

    .lc-menu-container-edit {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-color: var(--lc-menucontainer-bg-color);
        z-index: var(--z-index__dialog);
    }

    .lc-menu-container--in-iframe {
        border: none;
    }

    .lc-menu-container--in-dialog {
        position: static;
    }

    .lc-menu-container--show {
        display: block;
    }

    .lc-menu-container--showing {
        opacity: 1;
    }

    .lc-menu-container__sections {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .lc-menuprofile_close {
        display: flex;
        position: relative;
        height: fit-content;
        align-items: center;
        justify-content: end;
        padding: 1em;
        z-index: inherit;
        padding-right: calc(1em + var(--lc-menugroup-padding-size));
    }

    .lc-menu-container__close-button-container {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        gap: 0.5em;
        align-items: center;
        justify-content: end;
        margin: var(--menu-container-padding) var(--menu-container-padding) 0 0;
    }

    .lc-menu-container__close-button {
        all: unset;
        cursor: pointer;
        opacity: 100%;
        padding: 0.125em;
        line-height: 1;
    }

    .lc-menu-container__close-button:hover {
        opacity: 60%;
    }

    .lc-menu-container__close-button:focus {
        outline: var(--lc-profile_hyperlink-default-color) 1px auto;
        border-radius: 24%;
    }

    .lc-menu-container__section {
        background-color: #fff;
    }

    .lc-menu-container__section-header {
        padding: var(--lc-menugroup-padding-size);
        padding-left: var(--menu-container-padding);
        letter-spacing: 0.4em;
    }

    .lc-menu-container__section-body {
        padding: var(--lc-menugroup-padding-size);
        display: flex;
        flex-wrap: wrap;
    }

    .lc-menu-container__group {
        --lc-menugroup-items: 10;
        --lc-menugroup-span: min(var(--lc-menugroup-max-span),
         round(up, calc(var(--lc-menugroup-items) / (var(--lc-menugroup-max-rows) * var(--lc-menugroup-columns))), 1));
        --lc-menugroup-max-columns: calc(var(--lc-menugroup-span) * var(--lc-menugroup-columns));
        --lc-menugroup-item-columns: min(var(--lc-menugroup-columns), round(up, calc(var(--lc-menugroup-items) / var(--lc-menugroup-max-rows)), 1));
        padding: var(--lc-menugroup-padding);
        width: calc(var(--lc-menugroup-width) * min(var(--lc-menugroup-max-span), var(--lc-menugroup-span)));
    }

    .lc-menu-container__group-header {
        font-size: 1em;
        padding: var(--lc-menugroup-padding-size);
        margin: 0;
        border-bottom: 1px solid black;
    }

    .lc-menu-container__group-body {
        padding: 0;
        margin: 0;
        display: flex;
        align-content: flex-start;
        flex-flow: column wrap;
        overflow: auto;
        list-style: none;
        max-height: calc(
            max(var(--lc-menugroup-max-rows),
                round(up, calc(var(--lc-menugroup-items) / var(--lc-menugroup-max-columns)), 1))
            * var(--lc-menuitem-height));
    }

    .lc-menu-container__group-menuitem {
        --lc-menuitem-gap: 0;
        padding: 0 var(--lc-menuitem-padding);
        height: var(--lc-menuitem-height);
        width: calc((var(--lc-menugroup-width) - (2 * var(--lc-menugroup-padding))) / var(--lc-menugroup-item-columns));
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: calc(var(--lc-menuitem-gap) * 2 * var(--lc-menugroup-padding));
    }

    .lc-menu-container__group-menuitem--gap {
        margin-right: calc(var(--lc-menugroup-column-gap) + (var(--lc-menugroup-padding-size) * 4));
    }

    .lc-menu-container__menuprofile-item-button-text--excluded,
    .lc-menu-container__group-menuitem--strikethrough {
        text-decoration: line-through;
    }

    .lc-menu-container__menuprofile-item,
    .lc-menu-container__group-menuitem > a {
        max-width: 100%;
        white-space: nowrap;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lc-menu-container__menuprofile-item {
        padding: 0.125em;
        line-height: 1;
    }

    .lc-menu-container__group-menuitem > a:focus-visible {
        outline: var(--lc-profile_hyperlink-default-color) 1px auto;
    }

    .lc-menu-container__menuprofile-item-button,
    .lc-menu-container__group-favmenuitem-delete-button {
        all: unset;
        box-sizing: border-box;
        display: flex;
        width: 100%;
        justify-content: space-between;
        cursor: pointer;
        padding: 0.125em;
        line-height: 1;
    }

    .lc-menu-container__menuprofile-item--disabled {
        color: grey;
    }

    .lc-menuprofile-group--focused,
    .lc-menu-container__menuprofile-item-button:focus,
    .lc-menu-container__group-favmenuitem-delete-button:focus {
        outline: var(--lc-profile_hyperlink-default-color) 1px auto;
        border-radius: 4px;
    }

    .lc-menuprofile-group {
        padding: 0.15em 0.25em;
    }

    .lc-menu-container__menuprofile-item-button-text,
    .lc-menu-container__group-favmenuitem-delete-button-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        opacity: 1;
    }

    .lc-menu-container__menuprofile-item-button-icon,
    .lc-menu-container__group-favmenuitem-delete-button-icon {
        opacity: 0;
        transition: opacity 0.375s ease;
    }

    .lc-menu-container__menuprofile-item-button:hover .lc-menu-container__menuprofile-item-button-icon,
    .lc-menu-container__menuprofile-item-button:focus .lc-menu-container__menuprofile-item-button-icon,
    .lc-menu-container__group-favmenuitem-delete-button:hover .lc-menu-container__group-favmenuitem-delete-button-icon,
    .lc-menu-container__group-favmenuitem-delete-button:focus .lc-menu-container__group-favmenuitem-delete-button-icon {
        opacity: 1;
        pointer-events: auto;
        transition: opacity 0.375s ease;
    }

    .lc-menu-container__group-menuitem--column-width-2 {
        --lc-menugroup-column-span: 1;
    }

    .lc-menu-container__group-menuitem--separator {
        margin: 10px 0;
        min-height: 1px;
        background-color: var(--lc-profile_navigation-line-color);
    }

    .lc-menu-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: var(--z-index__menu-blur);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        background: rgba(255, 255, 255, 0.1);
        transition: opacity 0.1s ease;
        display: none;
    }

    .lc-menu-overlay--active {
        display: block;
    }

    .lc-menuprofile-group
    {
    }

    .lc-menuprofile-group__selection {
        outline: none;
        margin: 0;
    }

    /****************************
        Toast Notifications
    ****************************/
    .lc-toast {
        position: fixed;
        top: 1em;
        left: 25%;
        width: 50%;
        z-index: var(--z-index__topmost);
        opacity: 0;
    }

    .lc-toast__content {
        text-align: center;
        color: var(--lc-profile_general-text-color);
        background-color: var(--lc-profile_general-background-color);
        box-shadow: 0 0 5px #aaaaaa;
        padding: 1em;
    }

    .lc-toast__content--success {
        color: var(--lc-profile_message-information-color);
    }

    .lc-toast__content--error {
        color: var(--lc-profile_message-error-color);
    }

    @keyframes toastShow {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes toastHide {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    .lc-toast--fadein {
        animation: toastShow 0.5s ease-in-out forwards;
    }

    .lc-toast--fadeout {
        animation: toastHide 0.5s ease-in-out forwards;
    }
}