@charset "UTF-8";

/* Variable CSS */
:root {

    --cevinio-font-family: 'Open Sans', Verdana, sans-serif;

    --cevinio-red: #d41c46;
    --cevinio-white: #fff;

    --indigo-50: #f2f4f6;
    --indigo-100: #ccd2d9;
    --indigo-200: #99a4b4;
    --indigo-300: #66778e;
    --indigo-400: #334969;
    --indigo-500: #001c43;
    --indigo-600: #001636;
    --indigo-700: #001128;
    --kobalt-50: #e7eaf2;
    --kobalt-100: #cfd5e5;
    --kobalt-200: #9faccc;
    --kobalt-300: #6f82b2;
    --kobalt-400: #3f5999;
    --kobalt-500: #0f2f7f;
    --kobalt-600: #0c2666;
    --orange-50: #fbece9;
    --orange-100: #f8d8d2;
    --orange-200: #f0b1a5;
    --orange-300: #e98a78;
    --orange-400: #e1634b;
    --orange-500: #da3c1e;
    --sangria-50: #f5e6e6;
    --sangria-100: #eccccc;
    --sangria-200: #d89999;
    --sangria-300: #c56666;
    --sangria-400: #b13333;
    --sangria-500: #9e0000;
    --saphire-50: #e8eaf7;
    --saphire-100: #d0d6ee;
    --saphire-200: #a1acdd;
    --saphire-300: #7283cc;
    --saphire-400: #4359bb;
    --saphire-500: #1430aa;
    --teal-50: #e6f5f3;
    --teal-100: #ccece8;
    --teal-200: #99d9d1;
    --teal-300: #66c5b9;
    --teal-400: #33b2a2;
    --teal-500: #009f8b;
    --teal-600: #007f6f;
    --yellow-50: #fdf7e6;
    --yellow-100: #fbf0cc;
    --yellow-200: #f7e099;
    --yellow-300: #f3d166;
    --yellow-400: #efc133;
    --yellow-500: #ebb200;
    --violet-50: #f7e8f4;
    --violet-100: #eed1ea;
    --violet-200: #dda3d4;
    --violet-300: #cc75bf;
    --violet-400: #BB47a9;
    --violet-500: #aa1994;

    /* Z-index */
    --z-index-navigation-backdrop: 970;
    --z-index-navigation: 980;
    --z-index-dropdown-backdrop: 990;
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;

    /* Cevinio */
    --main-background: #fbfbfe;
    --background: var(--cevinio-white);
    --main-color: var(--indigo-500);
    --main-color-light: var(--cevinio-white);
    --main-icon-color: var(--kobalt-500);
    --main-icon-color-disabled: var(--indigo-100);
    --main-radius: 5px;
    --main-hover: var(--kobalt-50);
    --main-overlay-background: var(--kobalt-500);
    --main-shadow: 0 1px 20px 0 #0F2F7F17;
    --darker-shadow: 0 1px 20px 0 #0F2F7F59;
    --link-color: var(--kobalt-500);
    --header-text-color: var(--kobalt-500);
    --separator-line: var(--kobalt-50);
    --userAction-info-text: var(--kobalt-400);
    --footer-text-color: var(--indigo-200);

    /* Navigation */
    --main-navigation-icon-color: var(--teal-500);
    --main-navigation-text-color: var(--indigo-500);
    --main-navigation-background: var(--cevinio-white);
    --menu-gradient: linear-gradient(3deg, rgba(232, 234, 238, 1) 0%, rgba(255, 255, 255, 1) 100%);

    /* Buttons */
    --button-primary-background: var(--teal-500);
    --button-primary-background-hover: var(--teal-600);
    --button-primary-background-focus: var(--teal-400);
    --button-primary-text-color: var(--cevinio-white);

    --button-secondary-background: var(--indigo-50);
    --button-secondary-background-hover: var(--indigo-100);
    --button-secondary-background-focus: var(--indigo-200);
    --button-secondary-color: var(--indigo-500);

    --button-login-background: var(--cevinio-red);
    --button-login-text-color: var(--cevinio-white);
    --button-login-alt-text-color: var(--cevinio-red);

    /* Badge */
    --badge-background: var(--cevinio-red);
    --badge-text-color: var(--cevinio-white);
    --badge-alt-background: var(--kobalt-300);
    --badge-alt-text-color: var(--kobalt-300);
    --badge-error-background: var(--sangria-500);
    --badge-warning-background: var(--yellow-500);
    --badge-success-background: var(--teal-500);
    --badge-info-background: var(--kobalt-500);

    /* Card */
    --card-background: var(--cevinio-white);
    --card-header-grid-border: var(--kobalt-100);
    --card-header-grid-label-color: var(--indigo-300);
    --card-footer-text-color: var(--kobalt-500);
    --card-floating-menu-background: var(--kobalt-50);
    --card-floating-divider-color: var(--kobalt-300);

    /* Form */
    --form-field-background: var(--cevinio-white);
    --form-field-border: var(--kobalt-50);
    --form-field-label: var(--indigo-300);
    --form-field-placeholder: var(--indigo-200);
    --form-field-desciption: var(--indigo-300);
    --form-field-checkbox: var(--kobalt-500);
    --form-field-toggle: var(--kobalt-200);
    --form-field-button: var(--kobalt-100);
    --form-field-button-content: var(--kobalt-500);
    --form-field-rating: var(--kobalt-100);
    --form-field-rating-checked: var(--kobalt-500);
    --form-field-rating-hover: var(--kobalt-300);
    --form-field-disabled: var(--indigo-50);
    --form-field-disabled-border: var(--kobalt-200);
    --form-field-text-color: var(--indigo-500);
    --form-field-select-border: var(--kobalt-200);
    --form-field-icon-color: var(--kobalt-100);
    --form-field-selector-background: var(--kobalt-500);
    --form-field-selector-text: var(--cevinio-white);

    /* Tooltip */
    --tooltip-underline: var(--kobalt-500);
    --tooltip-text-color: var(--main-color);
    --tooltip-text-highlight: var(--kobalt-500);
    --tooltip-background: var(--background);
    --tooltip-border: var(--kobalt-50);

    /* Tabs */
    --tab-header-background: var(--kobalt-50);
    --tab-header-text-color: var(--kobalt-500);
    --tab-background: var(--background);

    /* Data records / tables */
    --data-record-active: var(--teal-500);
    --data-record-border: var(--kobalt-50);
    --data-record-border-hover: var(--kobalt-300);
    --data-record-border-focus: var(--kobalt-300);
    --data-record-highlight: var(--kobalt-50);
    --data-record-highlight-border: var(--kobalt-500);
    --data-record-hover: var(--main-background);

    /* Chips */
    --chip-background: var(--saphire-50);
    --chip-color: var(--saphire-500);
    --chip-icon-color: var(--saphire-500);

    /* Loading animation */
    --loading-animation-color-1: var(--cevinio-red);
    --loading-animation-color-2: var(--indigo-500);
    --loading-animation-color-3: var(--teal-500);

    /* Font-weight */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;

    /* Gaps */
    --gap-xs: 2px;
    --gap-s: 4px;
    --gap-m: 8px;
    --gap-l: 12px;
    --gap-xl: 16px;
    --gap-xxl: 20px;
    --gap-xxxl: 24px;
}

/* Basic elements styles */
* {
    font-family: var(--cevinio-font-family);
    font-size: 11px;
}

body {
    padding: 0;
    margin: 0;
    background-color: var(--main-background);
    color: var(--main-color);
}

a,
a:visited {
    color: var(--link-color);
    text-decoration: none;
    cursor: pointer;
}

div.h1,
div.h2,
div.h3,
div.h4 {
    color: var(--header-text-color);
    margin-bottom: 10px;
}

div.h1 {
    font-weight: var(--font-weight-extra-bold);
    font-size: 1.4rem;
}

div.h2 {
    font-weight: var(--font-weight-bold);
    font-size: 1.3rem;
}

div.h3 {
    font-weight: var(--font-weight-bold);
    font-size: 1.25rem;
}

div.h4 {
    font-weight: var(--font-weight-semi-bold);
    font-size: 1rem;
}

body ul {
    list-style: disc;
}

span.badge {
    background-color: var(--badge-background);
    border-radius: 10px;
    color: var(--badge-text-color);
    font-size: 0.833rem;
    font-weight: var(--font-weight-bold);
    position: relative;
    margin-left: -2px;
    margin-top: -10px;
    padding: 0 5px;
}

span.badge:empty {
    display: none;
}

span.badge.error {
    background-color: var(--badge-error-background);
}

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

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

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

/* Header styles */
div#navigation {
    background: var(--main-navigation-background);
    height: 48px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: rgb(15 47 127 / 5%) 0 6px 24px 0, rgb(15 47 127 / 2%) 0 0 0 1px;
}

div#navigation * {
    font-family: var(--cevinio-font-family);
}

div#navigation a {
    display: flex;
    width: calc(100% - 24px);
    align-items: center;
    padding: 12px;
    font-size: 1.1rem;
    color: var(--main-navigation-text-color);
    text-decoration: none;
}

div#navigation a.icon {
    display: block;
    height: 24px;
    position: relative;
    width: 24px;
}

div#navigation a.icon-spacer {
    visibility: hidden;
}

div#navigation div.ic_close {
    transition: all 0.3s ease-in-out;
}

div#navigation div.ic_close:hover {
    transform: rotate( 180deg );
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

div#navigation a.client_logo {
    width: 170px;
    height: 48px;
    padding: 0;
}

div#navigation a.client_logo span#client_logo {
    width: 100%;
    height: 100%;
    max-width: 130px;
    max-height: 48px;
    padding: 0;
    margin: 0 auto;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

div#navigation span {
    display: inline-block;
}

div#navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

div#navigation div#mobileMenu,
div#navigation ul.userMenu {
    display: flex;
    align-items: center;
}

div#navigation li.dropdown {
    z-index: var(--z-index-dropdown);
}

div#navigation ul li.dropdown ul.subMenu a {
    display: flex;
    align-items: center;
    padding: 12px 18px;
}

div#navigation ul.mobileAppMenu {
    display: none;
    padding-top: 48px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    height: calc(100vh - 48px);
    position: fixed;
    top: 48px;
    left: 0;
    width: 80%;
    background: var(--menu-gradient);
    z-index: var(--z-index-navigation);
}

div#navigation ul.mobileAppMenu li {
    width: 100%;
}

div#navigation ul.mobileAppMenu li .svg {
    margin-right: 20px;
}

div#navigation ul.mobileAppMenu li ul {
    display: none;
}

div#navigation ul.mobileAppMenu li.dropdown:hover ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

div#navigation ul.mobileAppMenu li.dropdown:hover div.ic_arrow_drop_down {
    transform: rotate(180deg);
}

div#navigation ul.mobileAppMenu li ul li {
    margin-left: 44px;
}

div#navigation ul.appMenu {
    display: none;
}

div#navigation div#appMenuOverlay {
    top: 48px;
    left: 0;
    height: calc(100vh - 48px);
    width: 100%;
    position: absolute;
    background-color: rgba(0, 28, 67, 0.4);
    backdrop-filter: blur(2px);
    z-index: var(--z-index-navigation-backdrop);
    display: none;
}

@media (min-width: 992px) {

    div#navigation div#mobileMenu,
    div#navigation ul.mobileAppMenu {
        display: none;
    }

    div#navigation a {
        font-size: 13px;
        flex-direction: row;
        width: auto;
        line-height: 16px;
    }

    div#navigation a:hover {
        background: rgba(0,0,0,0.02);
    }

    div#navigation ul.appMenu li:not(.dropdown) a {
        padding: 16px 12px;
    }

    div#navigation a.mainMenuIcon div.svg {
        margin-right: 12px;
    }

    div#navigation ul.appMenu {
        display: flex;
        position: relative;
        width: calc(100vw - 266px);
        top: auto;
        padding: 0;
        flex-direction: row;
        height: 48px;
        background: none;
        z-index: var(--z-index-navigation);
        color: var(--link-color);
    }

    div#navigation ul.appMenu ul.subMenu span.badge {
        margin-left: auto;
        margin-top: auto;
    }

    div#navigation ul.appMenu div.appMenuItems {
        padding: 20px;
        display: none;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-start;
        position: fixed;
        top: 48px;
        background-color: var(--background);
        z-index: var(--z-index-dropdown);
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        box-shadow: 0 30px 30px rgba(15, 47, 127, 0.10);
        height: 400px;
        width: calc(100% - 40px);
        left: 0;
    }

    div#navigation ul.appMenu li.dropdown:hover div.ic_arrow_drop_down {
        transform: rotate(180deg);
    }

    div#navigation ul.appMenu div.appMenuItems div.appMenuItem {
        width: 300px;
        display: flex;
        flex-direction: row;
        padding: 15px;
    }

    div#navigation ul.appMenu div.appMenuItems div.appMenuItem:hover {
        background-color: var(--main-hover);
        border-radius: 10px;
    }

    div#navigation ul.appMenu div.appMenuItems div.appMenuItem .svg {
        background-color: var(--main-icon-color);
        margin-right: 12px;
    }

    div#navigation ul.appMenu div.appMenuItems div.appMenuItem span {
        font-size: 13px;
        font-weight: var(--font-weight-bold);
        padding-top: 4px;
    }

    div#navigation ul.appMenu div.appMenuItems div.appMenuItem span.badge {
        padding-top: 0;
        font-size: 10px;
        font-weight: var(--font-weight-bold);
    }

    div#navigation ul.appMenu div.appMenuItems div.appMenuItem span:hover {
        cursor: default;
    }

    div#navigation ul.appMenu div.appMenuItems div.appMenuItem a {
        padding: 6px 0 0 12px;
        color: var(--link-color);
        font-weight: var(--font-weight-semi-bold);
    }

    div#navigation ul.appMenu div.appMenuItems div.appMenuItem a:hover {
        background: none;
    }

    div#navigation ul.appMenu div.appMenuItems div.appMenuItem ul a {
        font-weight: var(--font-weight-regular);
    }

    div#navigation ul.appMenu div.svg.icon-mobile {
        display: none;
    }

    div#navigation ul.appMenu li.dropdown ul.subMenu {
        display: none;
        background: var(--background);
        box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
    }

    div#navigation ul.appMenu li.dropdown ul.subMenu li a {
        font-size: 13px;
        padding: 17px 24px;
        display: block;
    }

    div#navigation ul.appMenu li.dropdown:hover ul.subMenu {
        position: absolute;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

div#navigation ul.userMenu span.badge {
    left: 25px;
    position: absolute;
    top: 16px;
}

div#navigation ul.userMenu li.dropdown ul {
    min-width: 200px;
    right: 0;
}

div#navigation ul.userMenu li ul.myLanguage div.flags {
    margin-right: 10px;
}

div#navigation ul.userMenu li ul li.userName {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    padding: 12px 18px;
    background-color: var(--main-navigation-text-color);
    color: var(--main-color-light);
}

div#navigation ul.userMenu ul.subMenu {
    display: none;
    box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
}

div#navigation ul ul.subMenu li a {
    font-size: 13px;
    display: block;
}

div#navigation ul.userMenu li.dropdown:hover ul.subMenu {
    display: block;
    position: absolute;
    background: var(--background);
}

div#page_content {
    padding:5px 5px 0 5px;
}

/** Page Cards **/
div.page-cards-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xxxl);
}

div.card-container {
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
}

div.card-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
}

div.card-header div.h2 {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: var(--gap-s);
    margin-bottom: unset;
    padding-bottom: 4px;
}

div.card-header div.h2 div.svg {
    height: 18px;
    width: 18px;
}

div.card-header div.h2 div.svg-tooltip {
    background-color: var(--kobalt-100);
}

div.card-header:not(:has(div.h2)) {
    justify-content: flex-end;
}

.card {
    border: 0;
    padding: 15px;
}

div.card div.grid-container {
    display: grid;
    gap: var(--gap-xl);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    width: 100%;
}

div.card div.grid-container.grid-1 {
    grid-template-columns: 1fr;
}

div.card div.grid-container.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

div.card div.grid-container.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

div.card div.grid-container.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

div.card div.grid-container.grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

div.card div.grid-container.compact {
    gap: var(--gap-s);
}

div.card.card-header-grid {
    background-color: transparent;
    box-shadow: unset;
    border: 1px solid var(--card-header-grid-border);
    padding: 16px;
}

div.card-header-grid * {
    font-size: 1.3rem;
}

div.card-header-grid div.info-label {
    font-size: 1.1rem;
}

div.card-header-grid div.header-column {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
}

div.card-info-grid div.info-item {
    width: 100%;
}

div.card-header-grid div.info-item div.info-label,
div.card-info-grid div.info-item div.info-label {
    color: var(--card-header-grid-label-color);
    margin-bottom: 4px;
}

div.card-header-grid div.info-item div.info-value,
div.card-info-grid div.info-item div.info-value {
    font-weight: var(--font-weight-semi-bold);
}

div.card-icon-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    gap: var(--gap-xxl);
}

div.card-icon-container .card {
    background-color: var(--card-background);
    border-radius: var(--main-radius);
    box-shadow: var(--main-shadow);
}

div.card-icon-container .card-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    width: calc(24% - 45px);
    color: var(--link-color);
    text-align: center;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    transition: 0.3s;
}

div.card-icon-container .card-icon:hover {
    background-color: var(--main-hover);
}

div.card-icon-container .card-icon .svg {
    margin-bottom: 10px;
    width: 48px;
    height: 48px;
}

div#pageContentFooter {
    margin-top: 15px;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
}

div#pageContentFooter span {
    margin-left: 5px;
}

div#pageContentFooter a,
div#pageContentFooter span {
    color: var(var(--footer-text-color));
    font-weight: unset;
}

/* Onlu used in Purchase, need to be removed (line 630/685) if new formfields are replaced on that productmapping page. */

div.formContainer {
    font-size: 12px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

div.formContainer div.formField {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 10px;
}

div.formContainer div.formField.w50 {
    width: 48%;
}

div.formContainer.horizontal div.formField.w50 {
    width: 100%;
}

div.formContainer.horizontal div.formField {
    flex-direction: row;
}

div.formContainer div.formField label.formFieldLabel {
    font-weight: var(--font-weight-bold);
    margin-bottom: 5px;
}

div.formContainer.horizontal div.formField label.formFieldLabel {
    margin-bottom: 0;
    width: 150px;
}

div.formContainer.horizontal div.formField div.formFieldContent {
    width: calc(100% - 150px);
}

div.formContainer.horizontal div.formField div.formFieldContent input.formFieldCheckbox {
    margin: 1px;
}

div.formContainer div.formField div.formFieldContent select.formFieldSelectBox {
    width: 100%;
    padding: 6px 10px;
    border-radius: var(--main-radius);
    background-color: var(--cevinio-white);
    border: 1px solid var(--kobalt-100);
    color: var(--indigo-500);
}

div.statusPill {
    display: inline-flex;
    align-items: center;
    border-radius: var(--main-radius);
    padding: 0 5px;
    font-weight: var(--font-weight-semi-bold);
    min-height: 16px;
    line-height: 1.1rem;
    border-width: 2px;
    border-style: solid;
    border-color: var(--kobalt-500);
}

div.statusPill.checked {
    padding-left: 16px;
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: left top;
}

div.statusPill.indigo {
    border-color: var(--indigo-500);
    color: var(--indigo-500);
}

div.statusPill.indigo.filled {
    background-color: var(--indigo-50);
}

div.statusPill.indigo.checked {
    background-image: url('data:image/svg+xml, <svg fill="%23001c43" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m382-388 321-321q19-19 45-19t45 19q19 19 19 45t-19 45L427-253q-19 19-45 19t-45-19L167-423q-19-19-19-45t19-45q19-19 45-19t45 19l125 125Z"/></svg>');
}

div.statusPill.kobalt {
    border-color: var(--kobalt-500);
    color: var(--kobalt-500);
}

div.statusPill.kobalt.filled {
    background-color: var(--kobalt-50);
}

div.statusPill.kobalt.checked {
    background-image: url('data:image/svg+xml, <svg fill="%230f2f7f" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m382-388 321-321q19-19 45-19t45 19q19 19 19 45t-19 45L427-253q-19 19-45 19t-45-19L167-423q-19-19-19-45t19-45q19-19 45-19t45 19l125 125Z"/></svg>');
}

div.statusPill.orange {
    border-color: var(--orange-500);
    color: var(--orange-500);
}

div.statusPill.orange.filled {
    background-color: var(--orange-50);
}

div.statusPill.orange.checked {
    background-image: url('data:image/svg+xml, <svg fill="%23da3c1e" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m382-388 321-321q19-19 45-19t45 19q19 19 19 45t-19 45L427-253q-19 19-45 19t-45-19L167-423q-19-19-19-45t19-45q19-19 45-19t45 19l125 125Z"/></svg>');
}

div.statusPill.sangria {
    border-color: var(--sangria-500);
    color: var(--sangria-500);
}

div.statusPill.sangria.filled {
    background-color: var(--sangria-50);
}

div.statusPill.sangria.checked {
    background-image: url('data:image/svg+xml, <svg fill="%239e0000" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m382-388 321-321q19-19 45-19t45 19q19 19 19 45t-19 45L427-253q-19 19-45 19t-45-19L167-423q-19-19-19-45t19-45q19-19 45-19t45 19l125 125Z"/></svg>');
}

div.statusPill.saphire {
    border-color: var(--saphire-500);
    color: var(--saphire-500);
}

div.statusPill.saphire.filled {
    background-color: var(--saphire-50);
}

div.statusPill.saphire.checked {
    background-image: url('data:image/svg+xml, <svg fill="%231430aa" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m382-388 321-321q19-19 45-19t45 19q19 19 19 45t-19 45L427-253q-19 19-45 19t-45-19L167-423q-19-19-19-45t19-45q19-19 45-19t45 19l125 125Z"/></svg>');
}

div.statusPill.teal {
    border-color: var(--teal-500);
    color: var(--teal-500);
}

div.statusPill.teal.filled {
    background-color: var(--teal-50);
}

div.statusPill.teal.checked {
    background-image: url('data:image/svg+xml, <svg fill="%23009f8b" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m382-388 321-321q19-19 45-19t45 19q19 19 19 45t-19 45L427-253q-19 19-45 19t-45-19L167-423q-19-19-19-45t19-45q19-19 45-19t45 19l125 125Z"/></svg>');
}

div.statusPill.yellow {
    border-color: var(--yellow-500);
    color: var(--yellow-500);
}

div.statusPill.yellow.filled {
    background-color: var(--yellow-50);
}

div.statusPill.yellow.checked {
    background-image: url('data:image/svg+xml, <svg fill="%23ebb200" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m382-388 321-321q19-19 45-19t45 19q19 19 19 45t-19 45L427-253q-19 19-45 19t-45-19L167-423q-19-19-19-45t19-45q19-19 45-19t45 19l125 125Z"/></svg>');
}

div.statusPill.violet {
    border-color: var(--violet-500);
    color: var(--violet-500);
}

div.statusPill.violet.filled {
    background-color: var(--violet-50);
}

div.statusPill.violet.checked {
    background-image: url('data:image/svg+xml, <svg fill="%23aa1994" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m382-388 321-321q19-19 45-19t45 19q19 19 19 45t-19 45L427-253q-19 19-45 19t-45-19L167-423q-19-19-19-45t19-45q19-19 45-19t45 19l125 125Z"/></svg>');
}

div.chip {
    align-items: center;
    background-color: var(--chip-background);
    border-radius: 12px;
    color: var(--chip-color);
    display: flex;
    gap: var(--gap-s);
    padding: 2px 12px;
}

div.chip.indigo {
    background-color: var(--indigo-50);
    color: var(--indigo-500);
}

div.chip.kobalt {
    background-color: var(--kobalt-50);
    color: var(--kobalt-500);
}

div.chip.orange {
    background-color: var(--orange-50);
    color: var(--orange-500);
}

div.chip.sangria {
    background-color: var(--sangria-50);
    color: var(--sangria-500);
}

div.chip.teal {
    background-color: var(--teal-50);
    color: var(--teal-500);
}

div.chip.yellow {
    background-color: var(--yellow-50);
    color: var(--yellow-500);
}

div.chip.violet {
    background-color: var(--violet-50);
    color: var(--violet-500);
}

div.chip div.svg {
    height: 20px;
    width: 20px;
    background-color: var(--chip-icon-color);
}

div.chip.indigo div.svg {
    background-color: var(--indigo-500);
}

div.chip.kobalt div.svg {
    background-color: var(--kobalt-500);
}

div.chip.orange div.svg {
    background-color: var(--orange-500);
}

div.chip.sangria div.svg {
    background-color: var(--sangria-500);
}

div.chip.teal div.svg {
    background-color: var(--teal-500);
}

div.chip.yellow div.svg {
    background-color: var(--yellow-500);
}

div.chip.violet div.svg {
    background-color: var(--violet-500);
}

div.chip div.chip-content {
    color: inherit;
    display: flex;
    font-weight: var(--font-weight-semi-bold);
    gap: var(--gap-xs);
}

div.loading-animation {
    width: 24px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--loading-animation-color-3);
    transform-origin: top;
    display: grid;
    animation: loading-animation-1 1s infinite linear;
}

div.loading-animation::before,
div.loading-animation::after {
    content: "";
    grid-area: 1/1;
    background:var(--loading-animation-color-2);
    border-radius: 50%;
    transform-origin: top;
    animation: inherit;
    animation-name: loading-animation-2;
}

div.loading-animation::after {
    background: var(--loading-animation-color-1);
    --s:180deg;
}

div.loading-animation-inline {
    width: 24px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--loading-animation-color-1);
    animation: loading-animation-inline 1.5s infinite;
}

@keyframes loading-animation-1 {
    0%,20% {transform: rotate(0)}
    100%   {transform: rotate(360deg)}
}

@keyframes loading-animation-2 {
    50% {transform: rotate(var(--s,90deg))}
    100% {transform: rotate(0)}
}

@keyframes loading-animation-inline {
    0%,
    100%{transform:translate(0);box-shadow:     0     0 var(--loading-animation-color-2), 0     0 var(--loading-animation-color-3)}
    40% {transform:translate(65px);box-shadow: -15px  0 var(--loading-animation-color-2),-30px  0 var(--loading-animation-color-3)}
    50% {transform:translate(65px);box-shadow:  0     0 var(--loading-animation-color-2), 0     0 var(--loading-animation-color-3)}
    90% {transform:translate(0);box-shadow:     15px  0 var(--loading-animation-color-2), 30px  0 var(--loading-animation-color-3)}
}