@charset "UTF-8";

/* This stylesheet uses Cascading Layers: */
@layer reset, base, layout, component, utility, dev;

/*!
 * Project:        LMSX - FrontOffice UI 2026
 * Author:         mledwig@letmeship.com
 * Version:        1.0.1

TABLE OF CONTENTS
------------------------------------------------------------------

LAYER: RESET
    @Font
    @Token
    @Core

LAYER: BASE
    @Typography
    @Link
    @Button
    @List
    @Media
    @Disclosure
    @Dropdown
    @Table
    @Divider
    @Form
    @Feedback
    @Icon

LAYER: LAYOUT
    @Grid
    @Group
    @Page
    @Section

LAYER: COMPONENTS
    @Loading
    @Autocomplete
    @Badge
    @Captcha
    @Card
    @Cookie
    @Datepicker
    @Modal / TODO: is replaced by the Dependency Update, need a CSS Update
    @Nav-Main
    @Nav-Meta
    @Nav-Action
    @Slider
    @Tab
    @Tooltip

LAYER: UTILITIES
    @Color
    @Helper
    @Alignment
    @Width

LAYER: DEV
    @Debugbar
    @Editor
    @Bugfix
 */

/* ===================================================================
   LAYER: RESET
   =================================================================== */

@layer reset {
    /*  @Font
    ------------------------------------------------------------------ */
    @font-face {
        font-family: Ubuntu;
        src: local("Ubuntu Regular"), local("Ubuntu-Regular"),
        url("../font/Ubuntu-Regular.woff2") format("woff2"),
        url("../font/Ubuntu-Regular.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: Ubuntu;
        src: local("Ubuntu Italic"), local("Ubuntu-Italic"),
        url("../font/Ubuntu-Italic.woff2") format("woff2"),
        url("../font/Ubuntu-Italic.woff") format("woff");
        font-weight: normal;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: Ubuntu;
        src: local("Ubuntu Medium"), local("Ubuntu-Medium"),
        url("../font/Ubuntu-Medium.woff2") format("woff2"),
        url("../font/Ubuntu-Medium.woff") format("woff");
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: Ubuntu;
        src: local("Ubuntu Medium Italic"), local("Ubuntu-MediumItalic"),
        url("../font/Ubuntu-MediumItalic.woff2") format("woff2"),
        url("../font/Ubuntu-MediumItalic.woff") format("woff");
        font-weight: 500;
        font-style: italic;
        font-display: swap;
    }

    /*  @Token
    ------------------------------------------------------------------ */
    :root {
        /* Fonts */
        --font-family-sans: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol";
        --font-weight-base: 400;
        --font-weight-bold: 500;
        --lineheight-base: 1.4;
        --lineheight-large: 1.6;

        /* Colors */
        --color-light-100: hsl(0 0% 100%);
        --color-light-85: hsl(0 0% 100% / 85%);
        --color-light-50: hsl(0 0% 100% / 50%);
        --color-neutral-100: hsl(40 12% 95%);
        --color-neutral-200: hsl(60 8% 88%);
        --color-neutral-300: hsl(53 8% 75%);
        --color-neutral-400: hsl(55 9% 55%);
        --color-neutral-500: hsl(56 8% 41%);
        --color-primary-base: hsl(44 80% 56%); /* GOLD */
        --color-secondary-base: hsl(223 84% 20%); /* BLUE */
        --color-accent: hsl(227 89% 55%);

        /* Semantic Colors */
        --color-danger: hsl(5 54% 50%);
        --color-danger-light: hsl(5 54% 95%);
        --color-warning: var(--color-primary-base);
        --color-warning-light: hsl(45 100% 95%);
        --color-success: hsl(101 33% 43%);
        --color-success-light: hsl(101 100% 92%);
        --color-info: var(--color-secondary-base);
        --color-info-light: hsl(193 100% 93%);

        /* Applied */
        --page-color: var(--gradient);
        --element-color: var(--color-light-100);
        --text-color-base: var(--color-secondary-base);
        --text-color-invert: var(--color-light-100);
        --text-color-muted: var(--color-neutral-500);
        --text-color-accent: var(--color-accent);
        --highlight-color: var(--color-info-light);
        --gradient: linear-gradient(90deg, #d8e4ea, #dbedd3 100%);
        --overlay-color: rgba(0, 0, 0, 0.1);
        --overlay-blur: blur(4px);
        --shadow-color-base: hsl(44 6% 43% / 10%);
        --shadow-color-dark: hsl(44 6% 43% / 25%);
        --shadow-base: 0 0.125rem 0.125rem var(--shadow-color-base);
        --shadow-large: 0 1rem 3rem var(--shadow-color-base);
        --accent-color: mediumvioletred;

        /* Focus */
        --focus-ring-color: var(--color-accent);
        --focus-ring-style: solid;
        --focus-ring-width: var(--border-width-large);
        --focus-ring-offset: 0;

        /* Spacing */
        --space: 1.25rem;
        --grid-max-width: 165rem;
        --grid-gutter: var(--space);
        --section-space: calc(var(--space) * 3);
        --flow-space: var(--space);
        --fluid-space: clamp(1rem, 4vw, 3rem);
        --modal-min-width: 50rem;
        --element-space-base: 0.3rem;
        --element-space-large: 0.6rem;
        --ifta-indent: 1.6rem;

        /* Border */
        --border-radius-base: 0.3rem;
        --border-radius-large: 0.6rem;
        --border-radius-circle: 50%;
        --border-width-base: 1px;
        --border-width-large: 2px;

        /* Animation */
        --transition-all: all 300ms ease;
        --transition-color: color 300ms ease, background-color 300ms ease,
        border-color 300ms ease, text-decoration-color 300ms ease, fill 300ms ease,
        stroke 300ms ease;

        /* Modular Font Size Scale  */
        --ratio: 1.14;
        --font-size-base: 1rem; /* eg. p, h6 */
        --font-size-sm: calc(var(--font-size-base) / var(--ratio)); /* eg. small */
        --font-size-md: calc(var(--font-size-base) * var(--ratio)); /* eg. H5 */
        --font-size-lg: calc(var(--font-size-md) * var(--ratio)); /* eg. H4 */
        --font-size-xl: calc(var(--font-size-lg) * var(--ratio)); /* eg. H3 */
        --font-size-xxl: calc(var(--font-size-xl) * var(--ratio)); /* eg. H2 */
        --font-size-xxxl: calc(var(--font-size-xxl) * var(--ratio)); /* eg. H1 */

        /**
    * Custom content icons
    * https://www.svgbackgrounds.com/tools/svg-to-css/
    */
        --icon-square-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='hsl(44deg 80% 56%)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='m10 8 4 4-4 4'/%3E%3C/svg%3E"); /* GOLD */
        --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke='hsl(44deg 75%25 50%25)' d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6v6m-11 5L21 3'/%3E%3C/svg%3E"); /* GOLD */
        --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' stroke='hsl(223deg 84% 20%25)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); /* BLUE */
        --icon-search-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' stroke='hsl(0deg 0% 100%25)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); /* WHITE */
        --icon-datepicker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' stroke='hsl(223deg 84% 20%25)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); /* BLUE */
        --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='hsl(223deg 84% 20%25)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); /* BLUE */
        --icon-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='hsl(53deg 8% 75%)' viewBox='0 0 322 511.2'%3E%3Cpath d='M295 212H27a27 27 0 0 1-20-45L144 9l3-3c12-9 29-8 38 4l130 157a27 27 0 0 1 7 18c0 15-12 27-27 27zM27 300h268a27 27 0 0 1 20 44L185 502a27 27 0 0 1-41 0L7 344a27 27 0 0 1 20-44z'/%3E%3C/svg%3E"); /* GREY */
        --icon-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dfac20' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); /* GOLD */
        --icon-editor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E"); /* WHITE */
        --icon-triangle-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='hsl(5 54% 50%)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); /* RED */
        --icon-dangerousgoods: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='hsl(5 54% 50%)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m12.5 17-.5-1-.5 1h1z'/%3E%3Cpath d='M15 22a1 1 0 0 0 1-1v-1a2 2 0 0 0 1.56-3.25 8 8 0 1 0-11.12 0A2 2 0 0 0 8 20v1a1 1 0 0 0 1 1z'/%3E%3Ccircle cx='15' cy='12' r='1'/%3E%3Ccircle cx='9' cy='12' r='1'/%3E%3C/svg%3E");
    }

    /*  @Core
    ------------------------------------------------------------------ */
    /**
    * Apply styling to all elements (including their `::before` and `::after`
    * pseudo-elements). One common use of this selector is to apply a custom
`   *  box-sizing`.
    */
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        border: 0;
        vertical-align: baseline;
        box-sizing: border-box;

        /* Adds a margin above an element when it is the target of an ID link */
        scroll-margin-top: var(--flow-space);
        scroll-margin-bottom: var(--flow-space);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    html {
        text-size-adjust: 100%;


        /* Links that point to a location on the same page will scroll smoothly down to that location. */
        /*@media (prefers-reduced-motion: no-preference) {
            scroll-behavior: smooth;
        }*/
    }

    /* Set the document's default font, color, size, and line height */
    body {
        background: #dbedd3 var(--page-color) no-repeat center/cover;
        font-family: var(--font-family-sans, sans-serif);
        color: var(--text-color-base);
        line-height: var(--lineheight-base);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-base);
        text-rendering: optimizelegibility;
        min-height: 100vh;
        max-width: 100vw;
    }

    /* avoid 300ms click delay on touch devices that support the `touch-action` CSS property */
    a,
    area,
    button,
    [role="button"],
    input:not([type="range"]),
    label,
    select,
    summary,
    textarea {
        touch-action: manipulation;
    }

    /**
    * Hide content visually, but allow screen readers to read the
    * content. Note that for Accessibility guidelines, this content
    * must become visible if toggled over using a keyboard.
    */
    .visually-hidden:not(:focus, :active),
    .sr-only:not(:focus, :active) {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    /* Base :focus styles for fallback purposes */
    *:focus {
        outline: none;
        transition: none;
        text-decoration: none !important;
        background-color: var(--color-light-100);
        box-shadow: 0 0 1rem var(--color-accent);
    }

    *:focus-visible {
        outline: none;
        transition: none;
        text-decoration: none !important;
        background-color: var(--color-light-100);
        box-shadow: 0 0 1rem var(--color-accent);
    }

    /* Use primary color for focus styles and suppress the focus outline on elements that cannot be accessed via keyboard */
    /* Remove base :focus styles when :focus-visible is available */
    *:focus:not(:focus-visible),
    [tabindex="-1"]:focus {
        outline: none !important;
    }

    /* Ensures disabled elements do not accept events */
    [disabled] {
        pointer-events: none !important;
        cursor: not-allowed !important;
    }

    [hidden] {
        display: none !important;
    }

    ::selection {
        background-color: var(--highlight-color);
    }

    /* Remove the chrome cancel button */
    input[type="search"]::-webkit-search-cancel-button {
        display: none;
    }
}

/* END Cascading Layers */

/* ===================================================================
   LAYER: BASE
   =================================================================== */

@layer base {
    /*  @Typography
    ------------------------------------------------------------------ */
    /* Setup flow spacing for typography elements */
    :where(h1, h2, h3, h4, h5, h6, p, address):not(:empty) {
        margin-bottom: var(--flow-space);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: var(--font-weight-bold);
        letter-spacing: -0.01em;
        text-wrap: balance;

        /* Decrease space between sequential headings */

        & + :where(h2, h3, h4, h5, h6) {
            margin-top: 0;
        }
    }

    /* Heading typography */
    h1,
    .is-h1 {
        font-size: var(--font-size-xxxl);
        margin-bottom: calc(var(--flow-space) * 2);
        max-width: 60ch;

        &:not(:first-child) {
            margin-top: calc(var(--flow-space) * 2);
        }
    }

    h2,
    .is-h2 {
        font-size: var(--font-size-xxl);
        max-width: 60ch;
    }

    h3,
    .is-h3 {
        font-size: var(--font-size-xl);
    }

    h4,
    .is-h4 {
        font-size: var(--font-size-lg);
    }

    h5,
    .is-h5 {
        font-size: var(--font-size-md);
    }

    /* H6 and form labels */
    h6,
    .is-h6,
    label,
    legend {
        font-size: var(--font-size-base);
    }

    /* Paragraph styles */
    p {
        text-wrap: pretty;
    }

    /* Small text */
    small,
    .is-small {
        font-size: var(--font-size-sm);
    }

    /* Basic styles for inline semantics */
    strong,
    b,
    .is-bold {
        font-weight: var(--font-weight-bold);
    }

    em,
    cite {
        font-style: italic;
    }

    u {
        text-decoration: underline;
        font-style: normal;
    }

    /* Basic style for subscript and superscript text */
    sub,
    sup {
        font-size: var(--font-size-sm);
        line-height: 0;
        position: relative;

        &:is(sup) {
            top: -0.5em;
        }

        &:is(sub) {
            bottom: -0.25em;
        }
    }

    /* Mark styles */
    mark {
        background: var(--highlight-color);
        padding: 0.1em 0.3em;
    }

    /* Basic styles for abbreviation. Only style differently when a title is present. */
    abbr {
        text-decoration: none;

        &[title] {
            cursor: help;
            text-decoration: underline dotted;
        }
    }

    /* Italisize q when it includes a cite */
    q {
        quotes: none;

        &[cite] {
            font-style: italic;
        }

        &::before,
        &::after {
            content: "";
        }
    }

    blockquote {
        background-color: var(--color-neutral-100);
        padding: 1.5rem 2rem;
        border-left: 3px solid var(--color-primary-base);
        border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
        quotes: none;

        &::before,
        &::after {
            content: "";
        }
    }

    /*  @Link
    ------------------------------------------------------------------ */
    a:not([class]),
    article a,
    table a:is(.black, .red),
    .is-link {
        color: inherit;
        text-decoration-style: solid;
        text-decoration-thickness: var(--border-width-base);
        text-decoration-color: inherit;
        text-underline-offset: 0.25rem;
        border-radius: var(--border-radius-base);
        transition: var(--transition-color);

        /*For links without href*/
        text-decoration: underline;
        cursor: pointer;

        &:hover,
        &:focus {
            color: var(--text-color-accent);
            text-decoration-color: var(--text-color-accent);
        }
    }

    .active {
        font-weight: var(--font-weight-bold);
        text-decoration: none;
        cursor: default;
    }

    .bg-warning a:not([class]) {
        text-decoration-color: var(--color-primary-base);
    }

    /* Add an icon for links that go to a PDF and/or links that open in a new tab */
    a:not([class])[target="_blank"]::after,
    a:not([class])[data-link-type="external"]::after,
    .nav ul li a[target="_blank"] span::after {
        margin: 0.25rem 0 0 0.25rem;
        vertical-align: middle;
        content: var(--icon-external);
        white-space: nowrap;
    }

    /*  @Button
    ------------------------------------------------------------------ */
    /* Basis für Buttons & Button-ähnliche Controls */
    :is(
    .button,
    .button_main,
    button,
    [type="button"],
    [type="reset"],
    [type="submit"]
    ) {
        font-family: inherit;
        padding: calc(var(--element-space-large) - 1px) var(--flow-space);
        background-color: var(--color-light-100);
        color: var(--color-secondary-base);
        border-radius: var(--border-radius-base);
        border: var(--border-width-large) solid var(--color-primary-base);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-bold);
        text-align: center;
        justify-content: center;
        text-decoration: none;
        transition: var(--transition-all);
        transform: scale(1);
        cursor: pointer;
        white-space: nowrap;
        width: auto;
        max-height: 3.638rem;
        gap: var(--element-space-base);
        display: inline-flex;
        align-items: center;
        box-shadow: var(--shadow-base);

        /* States */

        &:hover {
            background-color: var(--color-light-100);
            color: var(--color-secondary-base);
            border-color: var(--color-secondary-base);
            box-shadow: 0 0.25rem 0.5rem var(--shadow-color-base);
        }

        &:focus-visible {
            outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
            outline-offset: var(--focus-ring-offset);
            box-shadow: 0 0 1rem var(--color-accent);
        }

        &:active:not(:disabled),
        &:active:has([href]) {
            transform: scale(0.9);
        }

        /* Icon inside button */

        > img,
        > svg {
            margin: 0;
        }

        /* Icon-only variant */

        &.icon-only {
            padding: var(--element-space-large);
            aspect-ratio: 1 / 1;
            /*width: initial;*/
            width: min-content;

            > img,
            > svg {
                margin: 0;
                vertical-align: text-bottom;
            }
        }

        /* Small variant */

        &.small {
            padding: var(--element-space-base) var(--element-space-large);
            font-size: var(--font-size-sm);

            &.icon-only {
                padding: var(--element-space-base);
            }
        }

        /* Theming variants */

        &.primary {
            border-color: var(--color-primary-base);
            background-color: var(--color-primary-base);
            z-index: 1; /* highlight in groups */

            &:hover {
                background-color: var(--color-secondary-base);
                color: var(--text-color-invert);
                border-color: var(--color-secondary-base);
            }
        }

        &.error {
            color: var(--color-danger);
            border-color: var(--color-danger);
            z-index: 1;
        }

        &.success {
            background-color: var(--color-success);
            z-index: 1;
        }

        &.clear {
            background-color: transparent;
            border-color: transparent;
            color: var(--color-secondary-base);
        }
    }

    /* Spezifisch: native submit soll ebenfalls “oben” liegen */
    [type="submit"] {
        z-index: 1;
    }

    /* Spacing bei Button-Gruppen (nicht innerhalb .grouped ...) */
    .button + .button:not(.grouped *) {
        margin-left: var(--flow-space);
    }

    .button.small + .button.small:not(.grouped *) {
        margin-left: var(--element-space-base);
    }

    /* Label/Badge-Styles innerhalb von Buttons */
    .button {

        /* FIX */

        .labelWithoutInsuranceValue {
            b:first-child {
                text-decoration: underline;
            }
        }

        .labelSalesPriceValue,
        .labelWithoutInsuranceValue,
        .labelInsuranceValue {

            & b:last-child {
                background-color: var(--color-secondary-base);
                color: var(--color-light-100);
                display: inline-block;
                padding: 0.25em 0.4em;
                line-height: 1;
                text-align: center;
                white-space: nowrap;
                vertical-align: baseline;
                border-radius: 0.25rem;
            }

            & b:empty { /* or change in LmsFeTexts.xml and PriceComparisonPanel*/
                display: none;
            }
        }

        i {
            display: none;
        }
    }

    /* Upload Button fix for Filename*/
    .file_name_script {
        margin: 0 var(--flow-space);
    }

    /*  @List
    ------------------------------------------------------------------ */
    /* Reset flow spacing to list elements */
    ul,
    ol {
        list-style: none;
        margin: 0;
        padding: 0;

        /* Set indention and flow spacing for lists */

        &:not([class]) {
            margin-left: 1em;
            margin-bottom: var(--flow-space);

            /* Add spacing between list items */

            li {
                margin-bottom: 0.5rem;

                &::marker {
                    color: var(--color-secondary-base);
                }
            }

            /* Ensure nested lists have the correct spacing */

            ul,
            ol {
                margin-top: 0.5rem;
                margin-bottom: 0.5rem;
            }
        }
    }

    /* Set nested unordered list styles */
    ul:not([class]) {
        list-style-type: disc;

        ul:not([class]) {
            list-style-type: circle;

            ul:not([class]) {
                list-style-type: square;
            }
        }
    }

    /* Set nested ordered list styles */
    ol:not([class]) {
        list-style-type: decimal;

        ol:not([class]) {
            list-style-type: upper-alpha;

            ol:not([class]) {
                list-style-type: lower-roman;
            }
        }
    }

    /* Add basic styles for definition lists */
    dl {
        margin-bottom: var(--flow-space);

        dt {
            font-weight: var(--font-weight-bold);
        }

        dd {
            padding-left: 0;
        }
    }

    /*  @Media
    ------------------------------------------------------------------ */
    iframe {
        border: 0;
    }

    img {
        &.fluid {
            max-width: 100%;
            width: auto;
            height: auto;
        }

        &.customer-logo {
            max-width: 8rem;
            margin-inline: inherit;
        }

        /* Let SVG scale without boundaries */

        &[src$=".svg"] {
            width: 100%;
            height: auto;
            max-width: none;
        }
    }

    /*  @Disclosure
    ------------------------------------------------------------------ */
    /**
    * Display:block removes Firefox's marker
    * ::webkit-details-marker removed Chrome & Safair's marker
    */
    details {
        display: block;
        position: relative;
        margin-bottom: var(--flow-space);

        /* inner content */

        .details-content {
            padding-block: 1rem;
            padding-left: 2.5rem;
        }

        /* rotate chevron when details is open */

        &[open] > summary::before {
            transform: rotate(90deg);
        }
    }

    /* summary-only rules (nicht auf .vatReportOpen/.vatReportClose anwenden) */
    summary {
        &::-webkit-details-marker {
            display: none;
        }

        &:focus::before {
            color: var(--color-primary-base);
        }
    }

    /* shared presentation for summary and VatReport variants */
    summary,
    .vatReportOpen, /* Page: VatReport */
    .vatReportClose /* Page: VatReport */
    {
        display: flex;
        cursor: pointer;
        gap: 1rem;
        align-items: center;
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-xl);

        & > a {
            pointer-events: none;
            color: var(--text-color-base);
            text-decoration: none;
        }

        &:hover,
        &:hover a {
            text-decoration: underline;
            color: var(--text-color-accent);
        }

        &::before {
            will-change: transform;
            transition: transform 300ms ease;
            transform-origin: center;
            content: var(--icon-square-chevron-right);
            display: inline-block;
            text-align: center;
            width: 1.5rem;
            height: 1.5rem;
        }
    }

    /* Page: VatReport */
    /* always-open variant rotates chevron */
    .vatReportOpen {
        &::before {
            transform: rotate(90deg);
        }
    }

    /*  @Dropdown
    ------------------------------------------------------------------ */
    details.dropdown {
        position: relative;
        display: inline-block;
        margin: 0;

        &[open] > summary.button,
        &[open] > summary.button svg use {
            color: var(--color-secondary-base);
            border-color: var(--color-secondary-base);
        }

        > :last-child {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            filter: drop-shadow(0 0 2rem var(--shadow-color-dark));
            padding: 1rem;
            background-color: var(--color-light-100);
            width: 18rem;
            border-radius: var(--border-radius-large);
            z-index: 90;
            margin-top: 1rem;

            &::before {
                content: "";
                position: absolute;
                display: block;
                width: 0;
                left: 50%;
                top: 0;
                border: 0.5rem solid transparent;
                border-bottom-color: var(--color-light-100);
                transform: translate(-50%, -100%);
            }
        }

        summary {
            &::before {
                content: none;
            }
        }
    }

    /* User dropdown in the header */
    header details.dropdown {
        > :last-child {
            transform: none;
            left: auto;
            right: 0;

            &::before {
                left: auto;
                right: 0.5rem;
            }
        }
    }

    /*  @Table
    ------------------------------------------------------------------ */
    /* Table Container */
    .table-wrapper {
        overflow: auto;
        -webkit-overflow-scrolling: touch;

        &::-webkit-scrollbar {
            width: var(--element-space-large);
            height: var(--element-space-large);
        }

        &::-webkit-scrollbar-track {
            background-color: var(--color-light-100);
        }

        &::-webkit-scrollbar-thumb {
            background-color: var(--color-secondary-base);
            border-radius: var(--element-space-large);
            visibility: hidden;
        }

        &:hover::-webkit-scrollbar-thumb {
            visibility: visible;
        }
    }

    /* Table Element */
    table {
        width: 100%;
        max-width: 100%;
        border: 0;
        border-collapse: collapse;
        text-align: left;
        margin-bottom: var(--flow-space);

        /* Cells */

        th,
        td {
            padding: var(--element-space-large);
            vertical-align: middle;
        }

        td img {
            vertical-align: middle;
        }

        /* Headings */

        th {
            font-weight: var(--font-weight-bold);
            font-size: var(--font-size-sm);
            line-height: var(--lineheight-base);

            &:first-child {
                border-top-left-radius: var(--border-radius-base);
                border-bottom-left-radius: var(--border-radius-base);
            }

            &:last-child {
                border-top-right-radius: var(--border-radius-base);
                border-bottom-right-radius: var(--border-radius-base);
            }

            a {
                color: var(--color-secondary-base) !important;
                text-decoration-color: var(--color-neutral-100) !important;
                display: inline-flex;
                gap: var(--element-space-base);

                &::after {
                    content: var(--icon-sort);
                    width: 0.4rem;
                }

                &:hover {
                    color: var(--text-color-accent) !important;
                    text-decoration-color: var(--text-color-accent) !important;
                }
            }
        }

        /* Rows */

        tr {
            border-bottom: var(--border-width-base) solid var(--color-neutral-200);

            &.is-separator {
                border-bottom-width: var(--border-width-large);
            }

            &.no-border {
                border: 0;
            }
        }

        /* Hover nur wenn explizit aktiviert */

        &.has-hover tr:hover {
            background-color: var(--color-neutral-100);
        }

        /* Striped variant */

        &.is-striped tr:nth-of-type(2n) {
            background-color: var(--color-neutral-100);
        }

        /* Datalist variant */

        &.is-datalist {
            tr:last-child {
                border: 0;
            }

            td {
                padding: var(--element-space-base);
                vertical-align: top;
            }

            td:first-child {
                padding-left: 0;
            }

            td:last-child {
                padding-right: 0;
            }
        }

        /* Head/Body/Foot */

        thead,
        tbody th {
            background: var(--color-neutral-100);
            color: var(--text-color-muted);
        }

        tfoot {
            border-top: var(--border-width-large) solid var(--color-neutral-200);

            tr:hover {
                background: transparent !important;
            }
        }

        thead tr,
        tbody tr:has(th),
        tfoot tr {
            border: 0;
        }

        thead tr:hover {
            background: transparent !important;
        }

        caption {
            caption-side: bottom;
            text-align: inherit;
            font-size: var(--font-size-sm);
            color: var(--text-color-muted);
            padding: var(--element-space-large) 0;
        }

        /* Column border utilities */

        th.border-right:not(:last-child),
        td.border-right:not(:last-child) {
            border-right: var(--border-width-base) solid var(--color-neutral-200);
            padding-right: 1rem;
        }

        th.border-right + th,
        td.border-right + td {
            padding-left: 1rem;
        }
    }

    /* Card-like tables inside article */
    article {
        table {
            background-color: var(--color-light-100);
            padding: var(--fluid-space, 4%);
            border-radius: var(--border-radius-large);
            box-shadow: var(--shadow-large);
        }
    }

    /* Sorting Indicator */
    tr.sorting-indicator {
        position: relative;
        height: 0;
        margin-top: -2px;
        border: 0;

        td {
            height: var(--border-width-large);
            padding-block: 0;

            &.sorting-td {
                background: var(--color-primary-base);
            }
        }
    }

    /* container tweaks when a sorting-indicator row exists */
    tbody:has(tr.sorting-indicator) {
        position: relative;
        margin-top: -2px;
        border: 0;
    }

    /* Special-case: hide last cell in a specific template */
    [data-template="PriceComparisonPanel"] {
        tr.sorting-indicator {
            td:last-child {
                display: none;
            }
        }
    }

    /* Details blocks */
    td.has-details,
    tr.has-details {
        background: var(--color-neutral-100);
        border-left: var(--border-width-large) solid var(--color-primary-base);
    }

    td.has-details {
        padding: var(--fluid-space, 1rem);
        vertical-align: top;
    }

    tr.has-details {
        border-bottom-color: var(--color-neutral-300);
    }

    /* Marked Tag section */
    .marked-tag-container {
        padding-top: var(--flow-space);

        td {
            padding: 0;
        }
    }

    tbody + tbody.marked-tag-container {
        td {
            padding-top: var(--flow-space);
        }
    }

    .marked-tag {
        padding: var(--element-space-base) var(--element-space-large);
        background: var(--color-info-light);
        font-size: var(--font-size-sm);
        border-top-left-radius: var(--border-radius-base);
        border-top-right-radius: var(--border-radius-base);
    }

    /* Status rows */
    tr.cancelled_shipment,
    tr.red,
    td.red,
    tr:has(td.red) {
        color: var(--color-danger);
        background-color: var(--color-danger-light);
    }

    tr.darkGreen {
        td {
            font-weight: var(--font-weight-bold);
        }
    }

    /* inactive rows */
    tr.grey,
    tr:has(td b.NOT_DISPLAYED) {
        /* Page: LmsAdmin/Partners */
        color: var(--text-color-muted);
        background-color: var(--color-warning-light);
    }

    /* Modal-specific hover exceptions */
    /* TODO: Adjust for the new LMS Modal*/
    .modal-dialog {
        & .addresses-setting-table table tr:not(.no-hover):hover,
        & .front-end table tr:not(.no-hover):hover {
            background-color: var(--color-neutral-100);
        }
    }

    /*  @Divider
    ------------------------------------------------------------------ */
    /* Horizontal Rule */
    hr {
        border: none;
        border-bottom: var(--border-width-base) solid var(--color-neutral-200);
        width: 100%;
        margin: calc(var(--flow-space) * 2) 0 calc(var(--flow-space) * 2) 0;

        /* hr.spacer */

        &.spacer {
            border: none;
            margin: calc(var(--section-space) / 3) 0;
        }

        /* hr.vertical */

        &.vertical {
            border: none;
            display: inline-block;
            align-self: stretch;
            width: var(--border-width-base) !important;
            min-height: 1em;
            background-color: var(--color-neutral-200);
            padding: 0 !important;
            margin: 0 var(--flow-space);
        }

        /* Kontext: .form-group oder .is-inflow gefolgt von hr */

        :where(.form-group, .is-inflow) + & {
            margin-top: var(--flow-space);
        }
    }

    /*  @Form
    ------------------------------------------------------------------ */
    /* Group & Layout */
    .form-group {
        display: flex;
        flex-direction: column;
        margin-bottom: var(--flow-space);

        /* Fix */

        > .is-input {
            display: flex;
            flex-direction: column;
        }

        &:empty,
        &:blank {
            display: none;
        }
    }

    legend {
        background: red;
        color: red;
    }

    /* Labels */
    label {
        display: block;
        margin: 0;
        background: transparent;

        & br {
            display: none;
        }

        :where(.form-control, .rgFindingUs, .autogenerated-label) & {
            font-size: var(--font-size-base);
            color: var(--text-color-base);
        }

        .autogenerated-label & {
            margin-left: 0.5rem;

            /* Last label without mr*/

            &:not(:last-of-type) {
                margin-right: var(--flow-space);
            }
        }
    }

    /* Required marker */
    label.required,
    .required {
        &::after {
            content: " *";
            color: var(--color-danger);
            font-size: var(--font-size-base);
            line-height: 1;
        }
    }

    /* Fields Base */
    input:not(
      [type="checkbox"],
      [type="radio"],
      [type="submit"],
      [type="color"],
      [type="button"],
      [type="reset"]
    ),
    select,
    textarea,
    textarea[type="text"],
    .is-wysiwyg-wrapper,
    .form-control-ifta,
    .form-control-plaintext,
    .is-input-wrapper,
    .chosen-container,
        /*.chosen-container-multi,
        .chosen-container-multi .chosen-choices,*/
    .chosen-container-active,
    .chosen-container:not(.chosen-container-single) {
        font: inherit;
        line-height: inherit;
        display: block;
        width: 100%;
        padding: var(--element-space-large);
        border-radius: var(--border-radius-base);
        border: var(--border-width-base) solid var(--color-neutral-300);
        font-size: 1em;
        transition: var(--transition-color);
        color: var(--text-color-base);
        box-shadow: inset var(--shadow-base);

        /* State: Hover */

        &:hover {
            border-color: var(--color-neutral-500);
            position: relative;
            z-index: 9;
        }

        /* State: Focus */

        &:focus,
        &:focus-within {
            outline: var(--border-width-large) solid var(--color-secondary-base);
            border-color: var(--color-secondary-base);
            outline-offset: max(-2px, -0.15em);
        }

        &::placeholder {
            color: var(--text-color-muted);
        }

        &.default-text {
            color: var(--text-color-muted);
        }

        /* IFTA Parent element */

        .form-group-ifta & {
            padding-top: var(--ifta-indent);

            &::placeholder {
                color: var(--text-color-invert);
            }
        }
    }

    /* ifta = Infield Top Aligned Form Labels */
    .form-group-ifta,
    .form-control-ifta {
        position: relative;
        width: 100%;
        z-index: 1;

        & > label,
        & > .is-label label,
        & ~ .form-control-ifta > label,
        & .form-control-ifta > label {
            position: absolute;
            z-index: 10;
            top: var(--element-space-base);
            left: var(--element-space-large);
            right: 0.1rem;
            margin: 0;
            color: var(--text-color-muted);
            pointer-events: none;
            text-wrap: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: var(--font-size-sm);
        }

        &:focus-within label {
            color: var(--text-color-base);
            z-index: 10;
        }

        &.form-group-chosen {
            z-index: auto;
        }
    }

    /* IFTA Input-Wrapper */
    .form-group-ifta > .is-input-wrapper {
        display: flex;
        align-items: center;
        padding: 0 !important;
        background: var(--color-light-100);
        overflow: hidden;

        &:has( > [disabled]) {
            border-color: var(--color-light-100);

            /* Darker surface for Table Details */

            .has-details & {
                border-color: var(--color-neutral-200);
            }
        }

        input {
            padding-top: var(--ifta-indent);
            border: none;
            box-shadow: none;
            background: transparent;
            border-radius: 0;

            &.is-country-prefix {
                width: auto;
                box-sizing: content-box;
                /*border-right: solid 1px;
                border-image: linear-gradient(to top, #ffffff, darkorchid) 1;*/
            }

            &:focus {
                border: none;
                outline: none;
            }

            &.error-field {
                border-color: transparent;
                outline: transparent;
            }
        }

        & .is-country-seperator {
            position: relative;

            &::after {
                content: "/";
                position: absolute;
                right: 0;
                bottom: var(--element-space-large);
                color: var(--text-color-muted);
            }
        }
    }

    /* Textarea & WYSIWYG */
    textarea,
    .wysiwyg-editor {
        resize: vertical;
        min-height: 6rem;
        caret-color: var(--color-primary-base);

        @supports (field-sizing: content) {
            min-height: 1rem;
            field-sizing: content;
            resize: none;
        }
    }

    /* Page: RecommendFormPage */
    .is-wysiwyg-wrapper {
        background-color: var(--color-light-100);
        padding-right: 0;

        /* Override editor-ver-XXX.css */

        & .wysiwyg-editor {
            box-sizing: border-box !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 var(--element-space-large) 0 0 !important;
        }
    }

    /* Select & Chosen */
    select {
        appearance: none;
        background: var(--color-light-100) no-repeat 100% / 1em;
        padding-right: 3ch !important;
        background-position: right var(--element-space-large) center;
        background-image: var(--icon-caret);
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .chosen-container {
        width: 100% !important;

        &.chosen-container-single {
            font-size: inherit !important;
            background-color: var(--color-light-100) !important;

            & .chosen-single {
                padding: 0 !important;
                border: none !important;
                color: var(--text-color-base) !important;

                /* Muted text / Placeholder text */

                & span {
                    color: var(--text-color-muted) !important;
                }

                /* icon-caret */

                & div b {
                    background-size: 1em !important;
                    background-position: right var(--element-space-large) center !important;
                    background-image: var(--icon-caret) !important;
                }
            }
        }

        &.chosen-container-multi {
            z-index: 11 !important;
            font-size: inherit !important;

            & .chosen-choices {

                border: 0 !important;
                background: 0 !important;
                box-shadow: none !important;

                & li.search-field input[type="text"] {
                    height: auto !important;
                    margin: 0 !important;
                    padding: 0 !important;
                    color: inherit !important;
                    font-family: inherit !important;
                }
            }

            & .chosen-choices li.search-choice {
                display: flex !important;
                align-items: center !important;
                gap: 0.5rem !important;
                flex-wrap: nowrap !important;
                padding: 0.25rem !important;
                line-height: inherit !important;
                font-size: var(--font-size-sm) !important;
                border-radius: var(--border-radius-base) !important;
                background: var(--color-neutral-100) !important;
                border-color: var(--color-neutral-300) !important;
                box-shadow: none !important;
                color: inherit !important;

                & .search-choice-close {
                    position: static !important;
                }
            }
        }

        & .chosen-results li.group-result,
        & ul.chosen-results li.result-selected {
            font-weight: var(--font-weight-bold) !important;
        }

        & .chosen-drop {
            border: none !important;
            box-shadow: none !important;
            top: calc(100% + var(--border-width-large)) !important;
            background: var(--color-light-100) !important;
            border-radius: var(--border-radius-large) !important;
            filter: drop-shadow(0 0 2rem var(--shadow-color-dark)) !important;
        }

        & ul.chosen-results {
            margin: 0 !important;
            padding: 0.7rem !important;

            & li {
                padding: 0.25rem 0.7rem !important;
                margin: 0 !important;
                border-radius: var(--border-radius-base) !important;
                line-height: inherit !important;
                font-size: var(--font-size-base) !important;

                &:hover,
                &.result-selected {
                    background: var(--highlight-color) !important;
                    color: var(--text-color-base) !important;
                    cursor: pointer !important;
                }
            }
        }
    }


    /* Plaintext / Read-only */
    .form-control-plaintext,
    .form-control-plaintext [type="text"],
    .form-control-ifta {
        background: var(--color-neutral-100);
        border-color: var(--color-neutral-100);
        color: var(--text-color-muted);
        padding-top: var(--ifta-indent);
        box-shadow: none;

        /* Darker surface for Table Details */

        .has-details & {
            background: var(--color-neutral-200);
            border-color: var(--color-neutral-200);
        }
    }

    /* States: Disabled */
    :is(input, select)[disabled],
    :is(input, select)[disabled]:hover,
    :is(
      .button,
      button,
      [type="button"],
      [type="reset"],
      [type="submit"]
    )[disabled],
    :is(
      .button,
      button,
      [type="button"],
      [type="reset"],
      [type="submit"]
    )[disabled]:hover,
    .button[tabindex="-1"],
    :where(main, .modal-dialog) a.button:not([href]),
    :where(main, .modal-dialog) a.button.primary:not([href]),
    :where(main, .modal-dialog) a.button.primary:not([href]):hover {
        opacity: 100% !important;
        cursor: not-allowed !important;
        color: var(--text-color-muted) !important;
        background: var(--color-neutral-100) !important;
        border-color: var(--color-neutral-300) !important;
        box-shadow: none !important;

        /* Darker surface for Table Details */

        .has-details & {
            background: var(--color-neutral-200) !important;
            border-color: var(--color-neutral-200) !important;
        }
    }


    /* States: Error Validation */
    input.error-field:not(
      [type="checkbox"],
      [type="radio"],
      [type="submit"],
      [type="color"],
      [type="button"],
      [type="reset"]
    ),
    .is-input-wrapper:has(.error-field),
    .form-control-ifta:has(.error-label),
    textarea.error-field {
        border-color: var(--color-danger);
        outline: var(--border-width-large) solid var(--color-danger);
        outline-offset: max(-2px, -0.15em);
    }

    /* States: success Validation */
    input.success:not(
      [type="checkbox"],
      [type="radio"],
      [type="submit"],
      [type="color"],
      [type="button"],
      [type="reset"]
    ),
    textarea.success {
        border-color: var(--color-success);
    }

    /* Form Control (Label + Control inline) */
    .form-control {
        display: grid;
        grid-template-columns: var(--flow-space) auto;
        align-items: center;
        gap: 0.5em;
        margin: 0 0 calc(var(--flow-space) / 2);
        font-size: var(--font-size-base);
        color: var(--text-color-base);

        label.disabled,
        .form-control-disabled {
            color: var(--text-color-muted);
            cursor: not-allowed;
        }
    }

    /* Custom Checkbox & Radio */
    @supports (appearance: none) {
        input[type="checkbox"],
        input[type="radio"] {
            appearance: none;
            position: relative;
            width: 1.5em;
            height: 1.5em;
            aspect-ratio: 1/1;
            vertical-align: middle;
            transition: var(--transition-color);
            background: var(--color-light-100);
            border: var(--border-width-base) solid var(--color-neutral-300);
            border-radius: var(--border-radius-base);
            margin: 0;
            display: grid;
            place-content: center;
            backface-visibility: hidden;
            box-shadow: inset var(--shadow-base);

            &::before {
                content: "";
                width: 0.75em;
                height: 0.75em;
                transform: scale(0);
                transform-origin: center;
                transition: 120ms transform ease-in-out;
                box-shadow: inset 1em 1em var(--color-primary-base);
                border-radius: var(--border-width-large);
            }

            &:checked {
                outline: var(--border-width-large) solid var(--color-primary-base);
                border-color: var(--color-primary-base);
                outline-offset: max(-2px, -0.15em);

                &::before {
                    transform: scale(1);
                }
            }

            /* States: Hover */

            &:hover {
                border-color: var(--color-neutral-500);
            }

            /* States: Focus */

            &:focus,
            &:focus-visible {
                outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
                outline-offset: var(--focus-ring-offset);
                box-shadow: 0 0 1rem var(--color-accent);
            }
        }

        input[type="radio"],
        input[type="radio"]::before {
            border-radius: var(--border-radius-circle);
        }
    }

    /* Help Text */
    .form-text {
        padding: 0.25rem var(--element-space-large);
        font-size: var(--font-size-sm);
        background: var(--color-neutral-100);
        border: var(--border-width-base) solid var(--color-neutral-300);
        border-top: none;
        border-bottom-left-radius: var(--border-radius-base);
        border-bottom-right-radius: var(--border-radius-base);

        &::first-letter {
            text-transform: uppercase;
        }

        *:last-child {
            margin-bottom: 0;
        }
    }

    input:has(~ .form-text),
    textarea:has(~ .form-text),
    select:has(~ .form-text) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Misc */
    input[type="search"]::-webkit-search-cancel-button {
        display: none;
    }

    /*  @Feedback
    ------------------------------------------------------------------ */
    /* Feedback Panel */
    .feedbackPanel {
        margin-bottom: var(--flow-space);

        /* Error Panel innerhalb Feedback Panel */

        .feedbackPanelERROR {
            order: 0;
        }
    }

    /* Info Panel */
    .feedbackPanelINFO {
        font-size: var(--font-size-sm);
        padding: 0.25rem var(--element-space-large);
        border-radius: var(--border-radius-base);
        font-weight: var(--font-weight-bold);
        grid-column: 1 / -1; /* Fix für Checkbox-Grid */
        color: var(--color-success);
        background: var(--color-success-light);
    }

    /* Error Messages */
    .error-mini,
    .error-mini-calculator,
    .feedbackPanel .feedbackPanelERROR {
        order: 9999;
        display: flex;
        gap: var(--element-space-base);
        color: var(--color-danger);
        margin-top: 0.25rem;
        font-size: var(--font-size-sm);
        padding: 0.25rem var(--element-space-large);
        font-weight: var(--font-weight-bold);
        background: var(--color-danger-light);
        border-radius: var(--border-radius-base);
        align-items: center;
        grid-column: 1 / -1; /* Fix für Checkbox-Grid */

        &::before {
            display: inline-block;
            content: var(--icon-triangle-alert);
            height: 1.25rem;
            width: 1.25rem;
        }
    }

    /* Error Labels */
    .error-label,
    label.error-label,
    .error-field label {
        color: var(--color-danger);
    }

    /*  @Icon
    ------------------------------------------------------------------ */
    /**
    * FEATHER https://feathericons.com/
    * https://lucide.dev/icons
    */
    /* Icon Wrapper */
    .has-icon {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Feather & Icon Base */
    .feather,
    img.icon {
        width: 1.15rem;
        height: 1.15rem;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        shape-rendering: geometricPrecision;
        flex-shrink: 0;

        /* Size variants */

        &.icon-sm {
            font-size: 0.9rem;
            width: 0.9rem;
            height: 0.9rem;
        }

        &.icon-md {
            font-size: 1.25rem;
            width: 1.25rem;
            height: 1.25rem;
        }

        &.icon-lg {
            font-size: 1.5rem;
            width: 1.5rem;
            height: 1.5rem;
        }
    }

    /* Rotation */
    .icon-r90 {
        transform: rotate(90deg);
    }

    /* Feather Data Icons */
    [data-feather="search"] {
        content: var(--icon-search);

        &:hover {
            content: var(--icon-search-hover);
        }
    }

    [data-feather="dangerousgoods"] {
        content: var(--icon-dangerousgoods);
    }
}

/* END Cascading Layers */

/* ===================================================================
   LAYER: LAYOUT
   =================================================================== */

@layer layout {
    /*  @Grid
    ------------------------------------------------------------------ */
    /*
    * Based on Bootstrap Grid v5.3.2 with optimizations
    * Breakpoints: XS (<600px), SM (600px+), MD (900px+), LG (1200px+)
    */
    /* Container */
    .container {
        --grid-gutter-x: 1.25rem;
        --grid-gutter-y: 0;
        padding-inline: var(--grid-gutter-x);
        margin-inline: auto;
        max-width: var(--grid-max-width);
        width: 100%;

        /*@media (min-width: 56.25rem) {
            width: calc(100% - var(--grid-gutter-x));
        }*/

        &.container-is-modal {
            min-width: var(--modal-min-width);
        }
    }

    /* Row */
    .row {
        --grid-gutter-x: 1.25rem;
        --grid-gutter-y: 0;
        display: flex;
        flex-wrap: wrap;
        margin-block-start: calc(-1 * var(--grid-gutter-y));
        margin-inline: calc(-0.5 * var(--grid-gutter-x));

        /* Row Variants */

        &.row-wrap {
            row-gap: 1.5rem;
        }

        @media (min-width: 75rem) {
            &.row-has-space {
                --grid-gutter-x: 4rem;
                /*column-gap: clamp(var(--grid-gutter-x), 8vw, 6rem);*/

                .modal-dialog & {
                    --grid-gutter-x: 3rem;
                    /*column-gap: clamp(var(--grid-gutter-x), 4vw, 3rem);*/
                }
            }
        }

        /* Grid Children */

        & > * {
            box-sizing: border-box;
            flex-shrink: 0;
            width: 100%;
            max-width: 100%;
            padding-right: calc(var(--grid-gutter-x) * 0.5);
            padding-left: calc(var(--grid-gutter-x) * 0.5);
            margin-top: var(--grid-gutter-y);
        }
    }

    /* Base Column Classes */
    .col {
        flex: 1 0 0;
    }

    .col-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Gutters */
    .g-0,
    .gx-0 {
        --grid-gutter-x: 0;
    }

    .g-0,
    .gy-0 {
        --grid-gutter-y: 0;
    }

    .g-1,
    .gx-1 {
        --grid-gutter-x: 0.5rem;
    }

    .g-1,
    .gy-1 {
        --grid-gutter-y: 0.5rem;
    }

    .g-2,
    .gx-2 {
        --grid-gutter-x: 1.25rem;
    }

    .g-2,
    .gy-2 {
        --grid-gutter-y: 1.25rem;
    }

    .g-3,
    .gx-3 {
        --grid-gutter-x: 3rem;
    }

    .g-3,
    .gy-3 {
        --grid-gutter-y: 3rem;
    }

    /* Utility Classes */
    .d-block {
        display: block !important;
    }

    .d-none {
        display: none !important;
    }

    .d-flex {
        display: flex !important;
    }

    .flex-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    /* Flexbox Utilities */
    .justify-content-start {
        justify-content: flex-start !important;
    }

    .justify-content-end {
        justify-content: flex-end !important;
    }

    .justify-content-center {
        justify-content: center !important;
    }

    .justify-content-between {
        justify-content: space-between !important;
    }

    .align-items-start {
        align-items: flex-start !important;
    }

    .align-items-end {
        align-items: flex-end !important;
    }

    .align-items-center {
        align-items: center !important;
    }

    .align-items-stretch {
        align-items: stretch !important;
    }

    /* Responsive Breakpoints */
    @media (min-width: 37.5rem) {
        .col-sm {
            flex: 1 0 0;
        }

        .col-sm-auto {
            flex: 0 0 auto;
            width: auto;
        }

        .col-sm-1 {
            flex: 0 0 auto;
            width: 8.33333333%;
        }

        .col-sm-2 {
            flex: 0 0 auto;
            width: 16.66666667%;
        }

        .col-sm-3 {
            flex: 0 0 auto;
            width: 25%;
        }

        .col-sm-4 {
            flex: 0 0 auto;
            width: 33.33333333%;
        }

        .col-sm-5 {
            flex: 0 0 auto;
            width: 41.66666667%;
        }

        .col-sm-6 {
            flex: 0 0 auto;
            width: 50%;
        }

        .col-sm-7 {
            flex: 0 0 auto;
            width: 58.33333333%;
        }

        .col-sm-8 {
            flex: 0 0 auto;
            width: 66.66666667%;
        }

        .col-sm-9 {
            flex: 0 0 auto;
            width: 75%;
        }

        .col-sm-10 {
            flex: 0 0 auto;
            width: 83.33333333%;
        }

        .col-sm-11 {
            flex: 0 0 auto;
            width: 91.66666667%;
        }

        .col-sm-12 {
            flex: 0 0 auto;
            width: 100%;
        }

        /* SM Gutters & Utilities */
        .g-sm-0,
        .gx-sm-0 {
            --grid-gutter-x: 0;
        }

        .g-sm-0,
        .gy-sm-0 {
            --grid-gutter-y: 0;
        }

        .g-sm-1,
        .gx-sm-1 {
            --grid-gutter-x: 0.5rem;
        }

        .g-sm-1,
        .gy-sm-1 {
            --grid-gutter-y: 0.5rem;
        }

        .g-sm-2,
        .gx-sm-2 {
            --grid-gutter-x: 1.25rem;
        }

        .g-sm-2,
        .gy-sm-2 {
            --grid-gutter-y: 1.25rem;
        }

        .g-sm-3,
        .gx-sm-3 {
            --grid-gutter-x: 3rem;
        }

        .g-sm-3,
        .gy-sm-3 {
            --grid-gutter-y: 3rem;
        }

        .d-sm-block {
            display: block !important;
        }

        .d-sm-none {
            display: none !important;
        }

        .d-sm-flex {
            display: flex !important;
        }

        .flex-wrap-sm-reverse {
            flex-wrap: wrap-reverse !important;
        }

        .justify-content-sm-start {
            justify-content: flex-start !important;
        }

        .justify-content-sm-end {
            justify-content: flex-end !important;
        }

        .justify-content-sm-center {
            justify-content: center !important;
        }

        .justify-content-sm-between {
            justify-content: space-between !important;
        }

        .align-items-sm-start {
            align-items: flex-start !important;
        }

        .align-items-sm-end {
            align-items: flex-end !important;
        }

        .align-items-sm-center {
            align-items: center !important;
        }

        .align-items-sm-stretch {
            align-items: stretch !important;
        }
    }

    @media (min-width: 56.25rem) {
        .col-md {
            flex: 1 0 0;
        }

        .col-md-auto {
            flex: 0 0 auto;
            width: auto;
        }

        .col-md-1 {
            flex: 0 0 auto;
            width: 8.33333333%;
        }

        .col-md-2 {
            flex: 0 0 auto;
            width: 16.66666667%;
        }

        .col-md-3 {
            flex: 0 0 auto;
            width: 25%;
        }

        .col-md-4 {
            flex: 0 0 auto;
            width: 33.33333333%;
        }

        .col-md-5 {
            flex: 0 0 auto;
            width: 41.66666667%;
        }

        .col-md-6 {
            flex: 0 0 auto;
            width: 50%;
        }

        .col-md-7 {
            flex: 0 0 auto;
            width: 58.33333333%;
        }

        .col-md-8 {
            flex: 0 0 auto;
            width: 66.66666667%;
        }

        .col-md-9 {
            flex: 0 0 auto;
            width: 75%;
        }

        .col-md-10 {
            flex: 0 0 auto;
            width: 83.33333333%;
        }

        .col-md-11 {
            flex: 0 0 auto;
            width: 91.66666667%;
        }

        .col-md-12 {
            flex: 0 0 auto;
            width: 100%;
        }

        /* MD Gutters & Utilities */
        .g-md-0,
        .gx-md-0 {
            --grid-gutter-x: 0;
        }

        .g-md-0,
        .gy-md-0 {
            --grid-gutter-y: 0;
        }

        .g-md-1,
        .gx-md-1 {
            --grid-gutter-x: 0.5rem;
        }

        .g-md-1,
        .gy-md-1 {
            --grid-gutter-y: 0.5rem;
        }

        .g-md-2,
        .gx-md-2 {
            --grid-gutter-x: 1.25rem;
        }

        .g-md-2,
        .gy-md-2 {
            --grid-gutter-y: 1.25rem;
        }

        .g-md-3,
        .gx-md-3 {
            --grid-gutter-x: 3rem;
        }

        .g-md-3,
        .gy-md-3 {
            --grid-gutter-y: 3rem;
        }

        .d-md-block {
            display: block !important;
        }

        .d-md-none {
            display: none !important;
        }

        .d-md-flex {
            display: flex !important;
        }

        .flex-wrap-md-reverse {
            flex-wrap: wrap-reverse !important;
        }

        .justify-content-md-start {
            justify-content: flex-start !important;
        }

        .justify-content-md-end {
            justify-content: flex-end !important;
        }

        .justify-content-md-center {
            justify-content: center !important;
        }

        .justify-content-md-between {
            justify-content: space-between !important;
        }

        .align-items-md-start {
            align-items: flex-start !important;
        }

        .align-items-md-end {
            align-items: flex-end !important;
        }

        .align-items-md-center {
            align-items: center !important;
        }

        .align-items-md-stretch {
            align-items: stretch !important;
        }
    }

    @media (min-width: 75rem) {
        .col-lg {
            flex: 1 0 0;
        }

        .col-lg-auto {
            flex: 0 0 auto;
            width: auto;
        }

        .col-lg-1 {
            flex: 0 0 auto;
            width: 8.33333333%;
        }

        .col-lg-2 {
            flex: 0 0 auto;
            width: 16.66666667%;
        }

        .col-lg-3 {
            flex: 0 0 auto;
            width: 25%;
        }

        .col-lg-4 {
            flex: 0 0 auto;
            width: 33.33333333%;
        }

        .col-lg-5 {
            flex: 0 0 auto;
            width: 41.66666667%;
        }

        .col-lg-6 {
            flex: 0 0 auto;
            width: 50%;
        }

        .col-lg-7 {
            flex: 0 0 auto;
            width: 58.33333333%;
        }

        .col-lg-8 {
            flex: 0 0 auto;
            width: 66.66666667%;
        }

        .col-lg-9 {
            flex: 0 0 auto;
            width: 75%;
        }

        .col-lg-10 {
            flex: 0 0 auto;
            width: 83.33333333%;
        }

        .col-lg-11 {
            flex: 0 0 auto;
            width: 91.66666667%;
        }

        .col-lg-12 {
            flex: 0 0 auto;
            width: 100%;
        }

        /* LG Gutters & Utilities */
        .g-lg-0,
        .gx-lg-0 {
            --grid-gutter-x: 0;
        }

        .g-lg-0,
        .gy-lg-0 {
            --grid-gutter-y: 0;
        }

        .g-lg-1,
        .gx-lg-1 {
            --grid-gutter-x: 0.5rem;
        }

        .g-lg-1,
        .gy-lg-1 {
            --grid-gutter-y: 0.5rem;
        }

        .g-lg-2,
        .gx-lg-2 {
            --grid-gutter-x: 1.25rem;
        }

        .g-lg-2,
        .gy-lg-2 {
            --grid-gutter-y: 1.25rem;
        }

        .g-lg-3,
        .gx-lg-3 {
            --grid-gutter-x: 3rem;
        }

        .g-lg-3,
        .gy-lg-3 {
            --grid-gutter-y: 3rem;
        }

        .d-lg-block {
            display: block !important;
        }

        .d-lg-none {
            display: none !important;
        }

        .d-lg-flex {
            display: flex !important;
        }

        .flex-wrap-lg-reverse {
            flex-wrap: wrap-reverse !important;
        }

        .justify-content-lg-start {
            justify-content: flex-start !important;
        }

        .justify-content-lg-end {
            justify-content: flex-end !important;
        }

        .justify-content-lg-center {
            justify-content: center !important;
        }

        .justify-content-lg-between {
            justify-content: space-between !important;
        }

        .align-items-lg-start {
            align-items: flex-start !important;
        }

        .align-items-lg-end {
            align-items: flex-end !important;
        }

        .align-items-lg-center {
            align-items: center !important;
        }

        .align-items-lg-stretch {
            align-items: stretch !important;
        }
    }

    /* Print Styles */
    @media print {
        .d-print-block {
            display: block !important;
        }

        .d-print-none {
            display: none !important;
        }
    }

    /*  @Group
    ------------------------------------------------------------------ */
    .grouped {
        --grid-gutter-x: var(--flow-space);
        display: flex;

        & > *:not(:last-child) {
            margin-right: var(--grid-gutter-x);
        }

        &.gapless {
            & > *,
            & .form-group-ifta > * {
                margin: 0 0 0 -1px !important;
                border-radius: 0 !important;
            }

            & .button + .button {
                margin: 0 0 0 -2px !important;
            }

            & .form-group-ifta {
                margin-bottom: var(--flow-space);
            }

            & > *:first-child,
            & .form-group-ifta:first-child > * {
                margin: 0 !important;
                border-radius: var(--border-radius-base) 0 0 var(--border-radius-base) !important;
            }

            & > *:last-child,
            & .form-group-ifta:last-child > * {
                border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0 !important;
            }
        }
    }

    .grouped-text {
        display: flex;
        align-items: center;
        padding: var(--element-space-large);
        margin-bottom: 0;
        text-align: center;
        white-space: nowrap;
        background-color: var(--color-neutral-100);
        border-radius: var(--border-radius-base);
        border: var(--border-width-base) solid var(--color-neutral-300);
        font-size: 1em;
        color: var(--text-color-muted);
    }

    /* FIX: PredefinedParcelEditPanel for the unit text ( > without a selector)*/
    .grouped-text-fix {
        display: flex;
        align-items: center;
        padding-right: var(--element-space-large);
        text-align: center;
        white-space: nowrap;
        background-color: var(--color-neutral-100);
        border-radius: var(--border-radius-base);
        box-shadow: 0 0 0 var(--border-width-base) var(--color-neutral-300) inset;
        font-size: 1em;
        color: var(--text-color-muted);

        & > input {
            border-radius: var(--border-radius-base) 0 0 var(--border-radius-base) !important;
        }
    }

    /*  @Page
    ------------------------------------------------------------------ */
    /**
    * Ensures the page is always at least viewport height,
    * so the footer stays at the bottom
    */
    .page {
        display: grid;
        /* Define grid areas for clarity and maintainability */
        grid-template-areas:
        "dev"
        "header"
        "sidebar"
        "main"
        "footer";
        /* Define column and row sizes */
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr auto;
        min-height: 100vh; /* Ensure layout takes full viewport height */
        min-width: 56.25rem; /* 900px */

        @media (min-width: 100rem) {
            grid-template-areas:
                "dev dev"
                "header header"
                "sidebar main"
                "footer footer";
            grid-template-columns: 25rem 1fr;/* Fixed sidebar, flexible main content */
            grid-template-rows: auto auto 1fr auto;/* Dev, Header, main content (grows), footer */
        }
    }

    /* Header: */
    header {
        grid-area: header;
        width: 100%;
        background-color: var(--element-color);
        box-shadow: var(--shadow-large);
        padding-block: var(--flow-space);
    }

    /* Aside: hide empty/blank articles */
    aside {
        grid-area: sidebar;
        margin-top: var(--section-space);

        @media (min-width: 100rem) {
            & > article:not(.article-not-sticky) {
                position: sticky;
                top: var(--section-space);
            }
        }

        & article:empty,
        & article:blank {
            display: none;
        }
    }

    /* Articles: max readable width */
    article,
    aside article {
        max-width: 120ch;
    }

    /*Wicket Error Message - ML: Remove CSS to quick fix the Bug: QA-798
    [data-template="LmsFeErrorPage"] {
        white-space: break-spaces;

        & :is(p, h1, h2, h3, h4, span, strong, em, a, small) {
            text-align: center !important;
            display: inline-flex;
        }
    }*/
    /* Main content:
   Expands to take remaining space,
   pushes footer to bottom */
    main, #content {
        grid-area: main;
        width: 100%;
        margin-top: var(--section-space);
    }

    /* eg. Page: Shipping
   Remove Element for the GRID Layout */
    .grid-is-ignore {
        display: contents;
    }

    /* Footer:
   Does not shrink, always visible at bottom */
    footer {
        grid-area: footer;
        padding: var(--section-space) 0 1.5rem 0;
    }

    /*  @Section
    ------------------------------------------------------------------ */
    .section {
        margin-top: var(--section-space);
    }
}

/* END Cascading Layers */

/* ===================================================================
   LAYER: COMPONENT
   =================================================================== */

@layer component {
    /*  @Loading
    ------------------------------------------------------------------ */
    #ajax-indicator {
        display: none;
        position: fixed;
        color: var(--color-secondary-base);
        inset: 0;
        z-index: 999;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: var(--transition-all);
        background: var(--overlay-color);

        &.ajax-indicating {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;

            & svg {
                width: 6rem;
                height: 6rem;
                margin: 0 auto;
                display: inline-block;

                & path {
                    fill: var(--color-secondary-base);
                }
            }
        }

        & .ajax-indicator-svg {
            display: flex;
            align-items: center;
            height: 100%;
        }
    }

    /*  @Autocomplete
    ------------------------------------------------------------------ */
    .wicket-aa-container {
        z-index: 999;
        background: var(--color-light-100);
        border-radius: var(--border-radius-large);
        filter: drop-shadow(0 0 2rem var(--shadow-color-dark));

        & .wicket-aa ul {
            margin: 0;
            padding: var(--element-space-large);
            list-style: none;

            & li {
                padding: var(--element-space-base) var(--element-space-large);
                margin: 0;
                border-radius: var(--border-radius-base);

                &:hover,
                &.selected {
                    background: var(--highlight-color);
                    cursor: pointer;
                }
            }
        }
    }

    /*  @Badge
    ------------------------------------------------------------------ */
    .badge {
        display: inline-block;
        padding: 0.25em 0.4em;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;

        &.badge-danger {
            color: var(--color-danger);
            background-color: var(--color-danger-light);
        }

        &.badge-warning {
            color: var(--color-warning);
            background-color: var(--color-warning-light);
        }

        &.badge-info {
            color: var(--color-info);
            background-color: var(--color-info-light);
        }

        &.badge-success {
            color: var(--color-success);
            background-color: var(--color-success-light);
        }
    }

    /*  @Captcha
    ------------------------------------------------------------------ */
    .form-captcha {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;

        & label {
            margin: 0;
            max-width: 50%;
            width: 12.5rem;
            flex: 0 0 auto;
        }

        & img {
            outline: 3px solid var(--color-neutral-100);
            outline-offset: -2px;
            border-radius: var(--border-radius-base);
            max-width: 100%;
            width: 100%;
            height: 3.125rem;
            margin: 0;
            display: grid;
            object-fit: cover;
        }

        &:focus-within label {
            color: var(--text-color-base);
        }
    }

    /*  @Card
    ------------------------------------------------------------------ */
    .card {
        &:not(.modal-dialog *) {
            background-color: var(--color-light-85);
            padding: var(--fluid-space, 4%);
            border-radius: var(--border-radius-large);
            box-shadow: var(--shadow-large);
        }

        &.card-is-first-child {
            border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
        }

        &.card-is-last-child {
            border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
        }
    }

    .card-is-wrapper > .card {
        &:first-child {
            border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
        }

        &:last-child {
            border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
        }
    }

    .card-is-filter:not(.modal-dialog *) {
        background-color: var(--color-light-50);
    }

    /*  @Cookie
    ------------------------------------------------------------------ */
    /*  @Datepicker
    ------------------------------------------------------------------ */
    img.ui-datepicker-trigger,
    .grouped.gapless .form-group-ifta > img.ui-datepicker-trigger {
        position: absolute;
        right: var(--element-space-large);
        border-radius: 0 !important;
        max-height: 100%;
        max-width: 100%;
        width: 1.25rem;
        height: auto;
        top: calc(50% - 1.25rem / 2);
        margin: auto !important;
        z-index: 10;
        cursor: pointer;
    }

    .ui-datepicker {
        z-index: 11 !important;
        font-size: var(--font-size-sm) !important;
        font-family: var(--font-family-sans) !important;

        & .ui-datepicker-title {
            line-height: 1 !important;
            display: flex;
            align-items: center;
            gap: 1rem;

            & select {
                font-size: 0.8rem !important;
                font-family: var(--font-family-sans) !important;
            }
        }
    }

    table.ui-datepicker-calendar tr {
        border: none;
    }

    /* Datepicker Icon */
    .ui-datepicker-trigger {
        content: var(--icon-datepicker);
    }

    /*  @Modal
    ------------------------------------------------------------------ */
    /* TODO: Need updated CSS Code for the new LMS Dialog Modal */
    .modal-dialog .modal-dialog-content {
        text-align: left;
    }

    .dialog-theme-lms .panel-title {

    }


    /* Dark mask overlay: adds blur and transition */
    div.wicket-mask-dark {
        transition: background-color 0.3s ease, opacity 0.3s ease !important;
        backdrop-filter: var(--overlay-blur) !important;
        background: var(--overlay-color) !important;
        opacity: 1 !important;
    }

    /* Modal window */
    div#_wicket_window_0.wicket-modal,
    :where(.wicket-modal) {
        border-radius: var(--border-radius-large);
        background: var(--color-light-100);
        padding: 1rem;
        min-width: var(--modal-min-width);

        /* Remove extra content border */

        & div.w_content_3 {
            border: none !important;
        }

        /* Caption styling */

        & div.w_caption {
            color: var(--color-secondary-base);
            height: auto;
            min-height: 1.4em;
            overflow: visible;
            padding: 0 var(--flow-space);
        }

        & h3.w_captionText {
            position: relative;
            font-weight: var(--font-weight-bold);
            height: auto;
            font-size: var(--font-size-md);
            margin: 0;

            &:not(:empty) {
                margin: 0 0 var(--flow-space) 0;
            }
        }

        /* Blue skin parts */

        & div.w_blue {
            div.w_left,
            div.w_right,
            div.w_top,
            div.w_bottom,
            div.w_topLeft,
            div.w_topRight,
            div.w_bottomRight,
            div.w_bottomLeft {
                background: var(--color-light-100) !important;
            }
        }

        /* Remove spacing from nested content parts */

        div.w_right_1,
        div.w_content_1,
        div.w_content_2 {
            margin: 0 !important;
            padding: 0 !important;
        }
    }

    /* Wicket Modal Close Icon */
    & div.wicket-modal {
        & a.w_close,
        & div.w_blue a.w_close {
            background-image: var(--icon-close) !important;
            background-position: 0 !important;
            height: 1.5rem !important;
            width: 1.5rem !important;
        }

        /* FIX */

        & div.w_content_container {
            height: auto !important;
            padding: var(--flow-space);
        }
    }

    /*  @Nav-Main
    ------------------------------------------------------------------ */
    .nav {
        display: flex;
        align-items: stretch;
    }

    .brand {

        margin-right: 0;

        & svg,
        & img {
            width: auto;
            height: auto;
            max-height: 2.5rem;
            display: block;

            @media (min-width: 75rem) {
                max-height: 2.75rem;
            }
        }

    }


    /* Only for testing / TODO: Remove SVG Logo in FeHeaderPanel.html */
    .brand img {
        display: none;
    }

    .account {
        justify-content: flex-end;
        order: 3;
    }

    .menu {
        min-height: 3.754rem;
        order: 4;

        @media (min-width: 75rem) {
            order: 2;
            padding-left: 1rem;
            margin-left: 0.25rem;

            &:has(nav ul li a) {
                border-left: var(--border-width-base) solid var(--color-neutral-200);
            }
        }

        @media (min-width: 87.5rem) {
            padding-left: 2rem;
            margin-left: 1.25rem;
        }
    }

    nav.nav {
        &.is-main-level {
            margin-top: var(--flow-space);

            @media (min-width: 75rem) {
                margin-top: 0;
                margin-bottom: calc(var(--flow-space) / 2);
            }

            & ul li a:has(span.main_menu_item_active)::after {
                display: block;
                content: "";
                width: 0;
                height: 0;
                border-left: 0.25rem solid transparent;
                border-right: 0.25rem solid transparent;
                border-top: 0.25rem solid var(--color-secondary-base);
                position: absolute;
                transform: translateX(-50%);
                left: 50%;
                bottom: -0.25rem;
            }
        }

        &.is-sub-level {
            & ul li a {
                font-weight: var(--font-weight-bold);
            }
        }

        & ul {
            display: flex;
            gap: 0.5rem;

            @media (min-width: 87.5rem) {
                gap: 1rem;
            }

            & li {
                display: flex;
                align-items: center;

                & a {
                    text-decoration-color: var(--color-light-100);
                    transition: var(--transition-color);
                    text-decoration-thickness: var(--border-width-base);
                    white-space: nowrap;
                    position: relative;
                    display: flex;

                    /* Need Block Element for Uppercase the first letter */

                    & span {
                        text-decoration-thickness: var(--border-width-base);
                        display: inline-block;
                        font-size: var(--font-size-base);
                    }

                    &:hover,
                    &:has(span.main_menu_item_active):hover {
                        text-decoration-color: var(--color-accent);
                        color: var(--color-accent);
                    }

                    &:is(.active),
                    &:has(span.main_menu_item_active) {
                        font-weight: var(--font-weight-bold);
                        text-decoration: underline;
                        text-underline-offset: 0.25rem;
                        text-decoration-thickness: 0.094rem;
                        text-decoration-color: var(--color-secondary-base);
                        color: var(--text-color-base);
                    }

                    &[target="_blank"]::after {
                        content: none;
                    }

                    &.menu-is-bookmark {
                        --grid-gutter-x: 0;
                        padding-inline: 0.2rem;
                        position: relative;

                        & .badge {
                            position: absolute;
                            top: -0.25rem;
                            left: 0.8rem;
                            font-size: 60%;
                        }
                    }
                }
            }
        }
    }

    header a.loginlink:not([href]) {
        display: none;
    }

    .phonenummber {
        padding: var(--border-radius-base) 0.5rem;

        & .flag {
            height: 18px;
            border-radius: var(--border-radius-base);
        }

        & .tooltip_info_container,
        & .tooltip_info {
            padding: 0;
        }

        & .pill {
            display: flex;
            gap: 0.25rem;
            padding: 0.25rem 0.5rem 0.25rem 0.25rem;
            border: solid var(--border-width-large) var(--color-neutral-200);
            border-radius: var(--border-radius-large);
        }
    }

    .bt-wrapper .bt-content {
        padding: 1rem;
        color: var(--text-color-base);
        font-size: var(--font-size-sm);
    }

    /*  @Nav-Meta
    ------------------------------------------------------------------ */
    .nav-meta {

        hr.vertical {
            background-color: var(--color-neutral-300);
        }

        ul {
            li {
                a {
                    &[target="_blank"]::after {
                        content: none;
                    }
                }
            }
        }
    }


    /*  @Nav-Action
    ------------------------------------------------------------------ */
    .nav-action {
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        position: fixed;
        z-index: 1000;
        box-shadow: 0 0.5rem 1rem var(--shadow-color-base);

        body.template & {
            position: fixed !important;
        }

        & ul {
            position: relative;
            width: 2.15rem;
            text-align: right;
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            & > li {
                background-color: var(--color-primary-base);
                will-change: transform;
                transition: transform 400ms ease 0s;
                transform: translate3d(calc(100% - 2.15rem), 0, 0);
                margin-bottom: var(--border-width-base);

                &:first-child {
                    border-top-left-radius: var(--border-radius-base);
                }

                &:last-child {
                    border-bottom-left-radius: var(--border-radius-base);
                    margin-bottom: 0;
                }

                &:hover,
                &:has(> .is-open) {
                    transform: translate3d(0, 0, 0);
                    border-top-left-radius: var(--border-radius-base);
                    border-bottom-left-radius: var(--border-radius-base);
                }

                & .is-open {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.5rem;
                    width: 48rem;
                }

                & a {
                    white-space: nowrap;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.5rem 1rem 0.5rem 0.5rem;

                    & .tooltip_info {
                        &:after {
                            background-color: var(--color-secondary-base);
                        }
                    }

                    &[target="_blank"]::after {
                        display: none;
                    }
                }
            }
        }
    }

    /*  @Slider
    ------------------------------------------------------------------ */
    .bx-wrapper {
        position: relative;
        background-color: var(--color-light-100);
        padding: 1.5rem;
        border-radius: var(--border-radius-large);
        touch-action: pan-y;

        /* PAGER */

        & .bx-pager {
            text-align: center;

            & a {
                background: var(--color-primary-base);
                text-indent: -9999px;
                display: block;
                width: var(--element-space-base);
                height: var(--element-space-base);
                margin: 0.5rem;
                outline: 0;
                border-radius: var(--border-radius-base);

                &::before,
                &::after {
                    content: "";
                    width: 100%;
                    height: 0.75rem;
                    display: block;
                    position: relative;
                    top: -0.5rem;
                }
            }

            &.bx-default-pager {
                & a:hover,
                & a:focus {
                    background: var(--color-primary-base);
                }

                & a.active {
                    background: var(--color-secondary-base);
                    width: var(--element-space-large);
                }
            }
        }

        & .bx-pager-item {
            display: inline-block;
            vertical-align: bottom;
            font-size: 0;
            line-height: 0;
        }
    }

    .bx-viewport {
        /* fix other elements on the page moving (in Chrome) */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* Gemeinsame Struktur für Slides & News (duplikatfrei) */
    :is(.bx-slides-container > div, .lwNews div) {
        text-align: left;
        color: var(--text-color-base);
        max-width: 200ch;

        & > strong:first-of-type span {
            font-size: var(--font-size-base) !important;
            font-weight: var(--font-weight-bold) !important;
            color: var(--color-secondary-base) !important;
            display: block;
            margin-bottom: var(--flow-space);
        }

        & > strong:first-of-type + br {
            display: none;
        }

        & > span:not(:last-of-type) {
            display: block;
            margin-bottom: var(--flow-space);
        }
    }

    /* Spezifische Unterschiede: Slides */
    .bx-slides-container {
        & > div, & > div span {
            font-size: var(--font-size-base) !important;
            line-height: var(--lineheight-large);

            & span[style*="text-decoration"] {
                text-decoration: none !important;
            }
        }
    }

    /* Spezifische Unterschiede: News */
    .lwNews {
        & div,
        & div span {
            font-size: var(--font-size-base) !important;
        }
    }

    /*  @Tab
    ------------------------------------------------------------------ */
    .tabs {
        display: flex;
        background: var(--element-color);
        border-radius: var(--border-radius-large);
        border: solid var(--border-width-large) var(--color-secondary-base);
        overflow: hidden;

        & + article > h1:first-child {
            margin-top: var(--flow-space);
        }

        /* data-template: ShipmentTemplateEditPanel */

        .has-details & {
            margin-bottom: var(--flow-space);
        }

        & > a,
        & > span a {
            padding: var(--element-space-large) 1rem;
            flex: 0 1 auto;
            color: var(--color-secondary-base);
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            border-radius: 0;
            display: block;

            &:not(:first-child) {
                border-left: solid 1px var(--color-secondary-base);
            }

            &[aria-current="page"],
            &.active,
            &:hover {
                opacity: 1;
                color: var(--color-secondary-base);
                background: var(--color-neutral-200);
            }

            &[aria-current="page"],
            &.active,
            &.actual-menu-3 {
                font-weight: var(--font-weight-bold);
                background: var(--color-secondary-base);
                color: var(--text-color-invert);
            }
        }

        & > span {
            &.actual-menu-3 a {
                font-weight: var(--font-weight-bold);
                background: var(--color-secondary-base);
                color: var(--text-color-invert);
            }

            & a:hover {
                opacity: 1;
                color: var(--color-secondary-base);
                background: var(--color-neutral-200);
            }
        }

        &.is-full a {
            flex: 1 1 auto;
        }
    }

    /*  @Tooltip
    ------------------------------------------------------------------ */
    /* Tooltip info base */
    .tooltip_info,
    .tooltip_info_container {
        box-sizing: content-box;
        display: flex;
        padding: 0 0.25rem;
        position: relative;
    }

    /* Tooltip inside label */
    label .tooltip_info {
        display: inline-block;
    }

    /* Tooltip indicator "i" */
    .tooltip_info {
        &[id]::after,
        &:has(img)::after {
            content: "i";
            font-size: 0.7rem;
            font-weight: bold;
            color: var(--text-color-invert);
            border-radius: 100%;
            background: var(--color-primary-base);
            width: 1rem;
            height: 1rem;
            line-height: 1;
            text-align: center;
            cursor: pointer;
            aspect-ratio: 1/1;
            display: flex;
            justify-content: center;
            align-items: center;
            text-transform: lowercase;
            transition: var(--transition-all);
        }

        &:hover::after {
            background: var(--color-secondary-base);
        }

        > img {
            width: 100%;
            height: 100%;
            aspect-ratio: 1 / 1;
            position: absolute;
            margin: 0;
            opacity: 0;
            cursor: pointer;
            inset: 0;
        }

        /* Absolute positioning for IFTA forms */

        &.is-absolute,
        .form-group-ifta & {
            position: absolute;
            z-index: 20;
            padding: 0;
            right: 0;
            top: 0;
        }
    }

    /* Adjust border-radius for grouped form IFTA tooltips */
    .grouped.gapless .form-group-ifta .tooltip_info::after {
        border-radius: 0 0 0 var(--border-radius-base);
    }

    .form-group-ifta .tooltip_info::after {
        border-radius: 0 var(--border-radius-base) 0 var(--border-radius-base);
    }

    /* Tooltip image active state */
    img.bt-active {
        cursor: pointer;
    }
}

/* END Cascading Layers */

/* ===================================================================
   LAYER: UTILITY
   =================================================================== */

@layer utility {
    /*  @Color
    ------------------------------------------------------------------ */
    /* Backgrounds */
    .bg-primary {
        background-color: var(--color-primary-base) !important;
    }

    .bg-secondary {
        background-color: var(--color-secondary-base) !important;
    }

    .bg-light {
        background-color: var(--color-neutral-100) !important;
    }

    .bg-dark {
        background-color: var(--color-neutral-500) !important;
    }

    .bg-grey {
        background-color: var(--color-neutral-200) !important;
    }

    .bg-error {
        background-color: var(--color-danger) !important;
    }

    .bg-success {
        background-color: var(--color-success) !important;
    }

    .bg-warning {
        background-color: var(--color-warning-light) !important;
    }

    .bg-info {
        background-color: var(--color-info-light) !important;
    }

    /* Fills (SVG etc.) */
    .fill-primary {
        fill: var(--color-primary-base) !important;
    }

    /* Borders (1px solid) */
    .bd-primary {
        border: var(--border-width-base) solid var(--color-primary-base) !important;
    }

    .bd-light {
        border: var(--border-width-base) solid var(--color-neutral-200) !important;
    }

    .bd-dark,
    .bd-grey {
        border: var(--border-width-base) solid var(--color-neutral-400) !important;
    }

    .bd-error {
        border: var(--border-width-base) solid var(--color-danger) !important;
    }

    .bd-success {
        border: var(--border-width-base) solid var(--color-success) !important;
    }

    /* Text colors */
    .text-primary {
        color: var(--color-primary-base) !important;
    }

    .text-light {
        color: var(--color-neutral-400) !important;
    }

    .text-dark {
        color: var(--text-color-base) !important;
    }

    .text-muted {
        color: var(--text-color-muted) !important;
    }

    .text-error {
        color: var(--color-danger) !important;
    }

    .text-success {
        color: var(--color-success) !important;
    }

    .text-white {
        color: var(--text-color-invert) !important;
    }

    /*  @Helper
    ------------------------------------------------------------------ */
    /* Text transform */
    .text-uppercase {
        text-transform: uppercase;
    }

    .text-lowercase {
        text-transform: lowercase;
    }

    .text-capitalize {
        text-transform: capitalize;
    }

    /* Sizing */
    .is-full-screen {
        width: 100%;
        min-height: 100vh;
    }

    .is-full-width {
        width: 100% !important;
        max-width: 100%;
    }

    .is-full-height {
        height: 100% !important;
    }

    /* Gap */
    .is-gap-small {
        gap: 0.5rem;
    }

    /* Positioning */
    .is-fixed {
        position: fixed;
        width: 100%;
    }

    .is-relative {
        position: relative;
    }

    /* Spacing helpers */
    .is-paddingless {
        padding: 0 !important;
    }

    .is-marginless {
        margin: 0 !important;
    }

    .is-flowless {
        margin-bottom: 0 !important;
    }

    .is-inflow {
        margin-bottom: var(--flow-space);
    }

    .is-inflow-small {
        margin-bottom: calc(var(--flow-space) / 2);
    }

    .is-startless {
        margin-top: 0 !important;
    }

    /* Cursor */
    .is-pointer,
    .clickable {
        cursor: pointer !important;
    }

    /* Radius */
    .is-rounded {
        border-radius: var(--border-radius-base);
    }

    .is-rounded-full {
        border-radius: 100%;
    }

    /* Text wrapping/line-height */
    .is-nowrap {
        white-space: nowrap;
    }

    .is-lineheight-small {
        line-height: 1.2;
    }

    .break-all {
        word-break: break-all;
    }

    /* Clearfix (legacy float support) */
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }

    /* Visibility */
    .is-hidden {
        display: none !important;
    }

    /* Box style */
    .is-box {
        padding: var(--element-space-large);
        border-radius: var(--border-radius-large);
        background: var(--color-neutral-100);
        border: transparent;
    }

    .has-details .is-box {
        background: var(--color-light-100);
    }

    /* Cover parent (parent must be position: relative) */
    .is-cover {
        position: absolute;
        inset: 0;
        object-fit: cover;
    }

    /* Flex direction */
    .is-stacked {
        flex-direction: column;
    }

    /* Horizontal overflow (e.g., tables) */
    .overflow-x {
        overflow-x: auto;
    }

    /*  @Alignment
    ------------------------------------------------------------------ */
    /* Floats */
    .pull-right {
        float: right !important;
    }

    .pull-left {
        float: left !important;
    }

    /* Text alignment */
    .text-center {
        text-align: center;
    }

    .text-left {
        text-align: left;
    }

    .text-right {
        text-align: right;
    }

    .text-justify {
        text-align: justify;
    }

    /* Auto margins */
    .is-margin-left {
        margin-left: auto;
    }

    .is-margin-right {
        margin-right: auto;
    }

    /* Flexbox alignment presets */
    .is-vertical-align {
        display: flex;
        align-items: center;
    }

    .is-horizontal-align {
        display: flex;
        justify-content: center;
    }

    .is-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .is-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .is-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    /*  @Width
    ------------------------------------------------------------------ */
    .w-auto {
        width: 1%;
    }

    /* legacy "auto" behavior for table-like layouts */
    .w-25 {
        width: 25%;
    }

    .w-33 {
        width: 33%;
    }

    .w-50 {
        width: 50%;
    }

    .w-75 {
        width: 75%;
    }
}

/* END Cascading Layers */

/* ===================================================================
   LAYER: DEV
   =================================================================== */

@layer dev {
    /*  @Debugbar
    ------------------------------------------------------------------ */
    .dev {
        grid-area: dev;
        color: var(--text-color-invert);
        font-size: var(--font-size-sm);
        z-index: 99999;
        position: sticky;
        top: 0;
        background-color: var(--color-danger);
        line-height: 2;
        display: flex;
        align-items: center;
        gap: 1.5rem;

        & .editText,
        & .form-control {
            margin-block: 0;

            & label {
                color: var(--text-color-invert);
                font-size: var(--font-size-sm);
            }

            & a::after {
                display: none;
            }
        }
    }

    /* helper for the grid */
    body.template .dev::after {
        content: "XS";
        padding: 0.15rem 0.4rem;
        background-color: #892be2d5;
        text-align: center;
        color: var(--color-light-100);
        font-weight: var(--font-weight-bold);
        border-radius: var(--border-radius-base);
        backdrop-filter: var(--overlay-blur);
        line-height: 1.2;

        @media (min-width: 37.5rem) {
            content: "SM: 600";
            background-color: #2b96e2d5;
        }

        @media (min-width: 56.25rem) {
            content: "MD: 900";
            background-color: #2be2c0d5;
        }

        @media (min-width: 75rem) {
            content: "LG: 1200";
            background-color: #2be250d5;
        }
    }

    body.template [data-template] {
        position: relative;
        outline: dashed var(--border-width-large) rgba(154, 205, 50, 0.6);

        &:before {
            content: attr(data-template) ".html";
            position: absolute;
            left: -2px;
            bottom: 100%;
            padding: 2px 0.25rem;
            border-top-right-radius: var(--border-radius-base);
            background: rgba(154, 205, 50, 0.6);
            z-index: 998;
            font-size: var(--font-size-sm);
            color: var(--text-color-base);
        }
    }

    body[data-template]:before {
        position: static;
    }

    body.template .wicket-modal [data-template]:before {
        top: 0;
        bottom: auto;
    }

    /*  @Editor
    ------------------------------------------------------------------ */
    body.edit .editText,
    body.template::after {
        display: inline-flex;
    }

    .editText {
        display: none;
        margin: 0.75rem 0;
        position: relative;
        z-index: 999;

        &:empty,
        &:blank {
            display: none;
        }

        & a {
            color: var(--color-light-100) !important;
            padding: 0.15rem 0.4rem;
            font-size: 0.875rem;
            text-transform: uppercase;
            font-weight: var(--font-weight-bold);
            background: var(--color-accent);
            align-items: center;
            display: inline-flex;
            gap: var(--element-space-base);
            text-decoration: none !important;
            line-height: 1.2;
            position: relative;

            &::before {
                content: var(--icon-editor);
                width: 1rem;
                height: 1rem;
                display: block;
            }

            &::after {
                display: block;
                content: "";
                width: 0;
                height: 0;
                border-left: 0.5rem solid transparent;
                border-right: 0.5rem solid transparent;
                border-bottom: 0.5rem solid var(--color-accent);
                position: absolute;
                left: 1rem;
                top: -0.5rem;
            }

            &:hover {
                background: var(--color-secondary-base) !important;
                color: var(--color-light-100) !important;

                &::after {
                    border-bottom-color: var(--color-secondary-base) !important;
                }
            }
        }
    }

    .proops-info {
        height: 24rem;
        width: 100%;
        overflow-x: auto;
        overflow-y: auto;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;
        background: var(--color-info-light);
        padding: 1rem;
        margin: 2rem 0;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .proops-info::selection {
        background-color: white;
    }

    .mce-edit-area {
        height: 25rem;
        display: flex !important; /* TODO: this is a dirty fix: shows a editable textarea. Remove once it's properly fixed */
    }

    .mce-content-body,
    body#tinymce {
        background: var(--color-light-100) !important;
        min-width: auto !important;
    }

    /*  @Bugfix
    ------------------------------------------------------------------ */
    h3:empty,
    h3:blank,
    p:empty,
    p:blank,
    aside br {
        display: none;
    }

    /*Page: Pricecheck*/
    h3 *[style*="font-size: 12pt;"] {
        font-size: var(--font-size-xxxl) !important;
    }

    *[style*="font-size: 16px;"],
    *[style*="font-size: 15px;"],
    *[style*="font-size: 12pt;"] {
        font-size: var(--font-size-base) !important;
    }

    *[style*="font-size: 18pt;"] {
        font-size: inherit !important;
    }

    *[style*="color"] {
        color: inherit !important;
    }

    *[style*="font-weight: bold"] {
        font-weight: var(--font-weight-bold) !important;
    }

    *[style*="font-family"] {
        font-family: var(--font-family-sans) !important;
    }

    :where(h1, h2, h3, h4) i {
        font-style: normal;
    }
}

/* END Cascading Layers */

/* ===================================================================
   UNMAPPED / REVIEW
   =================================================================== */

/* Page: Price Page */
.lblCustomText h2,
.lblCustomText * {
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-base) !important;
    max-width: max-content !important;
}

.requiredMark {
    display: none;
}

/* Page: Shipping / Delivery address */
.wmcShippingType-bulkShipping.is-vertical-align {
    position: absolute;
    top: -1.5rem;
    gap: 1.5rem;

    & .form-control {
        margin-bottom: 0;
    }
}

/* only visible with the "helper" checkbox */
body.template .help,
body.template .todo {
    background: yellowgreen;
    color: black;
    padding: 4px;
    display: block;
}

/* CurrencyLabel.java*/
.negative-number {
    background: #00bb00;
}

/* Remove Margin */
[data-template="AddressPrettyOneColumnPanel"] .is-optional-marginless:has(~ p) {
    margin-bottom: 0 !important;
}

/*Versandarten*/
.each-carrier-img {
    height: auto;
    max-height: 2rem;
    width: auto;
    max-width: 100%;
    margin-left: auto;
}

.is-admin {
    min-height: 8rem;
}

/* END ;) */


@font-face {
    font-family: 'FontAwesome';
    src: url('../../font/fontawesome-webfont.eot?v=4.6.3'),
    url('../../font/fontawesome-webfont.woff?v=4.6.3') format('woff');
    font-weight: normal;
    font-style: normal;
}

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-chevron-right:before {
    content: "\f054";
}

.fa-search:before {
    content: "\f002";
}

.fa-forward:before {
    content: "\f064";
}

.fa-envelope:before {
    content: "\f0e0";
}

.fa-phone:before {
    content: "\f095";
}

.fa-angle-right:before {
    content: "\f105";
}

.fa-times:before {
    content: "\f00d";
}

.fa-info-circle:before {
    content: "\f05a";
}

.fa-exclamation-triangle:before {
    content: "\f071";
}

.fa-check:before {
    content: "\f00c";
}

.fa-question:before {
    content: "\f128";
}

.fa-truck:before {
    content: "\f0d1";
}

.fa-wifi:before {
    content: "\f1eb";
}

.fa-square:before {
    content: "\f0c8";
}

.fa-asterisk:before {
    content: "\f069";
}

.fa-file-o:before {
    content: "\f016";
}

.fa-file:before {
    content: "\f15b";
}

.fa-map-maker:before {
    content: "\f041";
}

.fa-ship:before {
    content: "\f21a";
}

.fa-color-orange {
    color: #ffa500;
}

.fa-color-blue, .fa-domain-color {
    color: #0092d2;
}

.fa-color-dark-blue {
    color: #39639D;
}

.fa-color-red {
    color: red;
}

.fa-1 {
    font-size: 1.1em;
}