:root {
    --header-height: 0px;
    --white: #FFFFFF;
    --grey-25: #FCFCFD;
    --grey-50: #F9FAFB;
    --grey-100: #F2F4F7;
    --grey-200: #EAECF0;
    --grey-300: #D0D5DD;
    --grey-400: #98A2B3;
    --grey-500: #667085;
    --grey-600: #475467;
    --grey-700: #344054;
    --grey-900: #101828;
    --primary-50: #F9F5FF;
    --primary-100: #F4EBFF;
    --primary-200: #E9D7FE;
    --primary-300: #D6BBFB;
    --primary-400: #B692F6;
    --primary-500: #9E77ED;
    --primary-600: #7F56D9;
    --primary-700: #6941C6;
    --primary-800: #53389E;
    --primary-900: #42307D;
    --success-25: #F6FEF9;
    --success-50: #ECFDF3;
    --success-100: #D1FADF;
    --success-300: #6CE9A6;
    --success-500: #12B76A;
    --success-600: #039855;
    --success-700: #027A48;
    --error-25: #FFFBFA;
    --error-50: #FEF3F2;
    --error-100: #FEE4E2;
    --error-300: #FDA29B;
    --error-400: #F97066;
    --error-500: #F04438;
    --error-600: #D92D20;
    --error-700: #B42318;
    --warning-25: #FFFCF5;
    --warning-50: #FFFAEB;
    --warning-100: #FEF0C7;
    --warning-200: #FEDF89;
    --warning-300: #FEC84B;
    --warning-500: #F79009;
    --warning-600: #DC6803;
    --warning-700: #B54708;
    --warning-800: #93370D;
    --warning-900: #7A2E0E;
    --info-25: #F5F8FF; /* blue dark palette */
    --info-50: #EFF4FF; /* blue dark palette */
    --info-100: #D1E0FF; /* blue dark palette */
    --info-200: #B2CCFF; /* blue dark palette */
    --info-300: #84ADFF; /* blue dark palette */
    --info-400: #53B1FD; /* blue dark palette */
    --info-500: #2970FF; /* blue dark palette */
    --info-600: #155EEF; /* blue dark palette */
    --info-700: #004EEB; /* blue dark palette */
    --info-800: #1849A9; /* blue dark palette */
    --info-900: #194185; /* blue dark palette */
    --yellow-25: #FEFDF0;
    --yellow-50: #FEFBE8;
    --yellow-100: #FEF7C3;
    --yellow-200: #FEEE95;
    --yellow-300: #FDE272;
    --yellow-400: #FAC515;
    --yellow-500: #EAAA08;
    --yellow-600: #CA8504;
    --yellow-700: #A15C07;
    --yellow-800: #854A0E;
    --yellow-900: #713B12;
}

*, ::after, ::before {
    box-sizing: border-box;
}

html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
}

body {
    background: var(--grey-25);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    font-style: normal;
    color: var(--grey-900);
}

    body.bg-white {
        background: var(--white);
    }

@media (max-width: 991px) {
    body.main-navigation-open {
        overflow-y: hidden;
    }

    body.sidebar-right-open {
        overflow-y: hidden;
    }
}

.scrollbar-styled::-webkit-scrollbar {
    width: 10px;
}

.scrollbar-styled::-webkit-scrollbar-track {
    background: none;
}

.scrollbar-styled::-webkit-scrollbar-thumb {
    background-color: var(--grey-300);
    border-radius: 20px;
    border: 3px solid #FFFFFFFF;
}

/* #region Defaults */
h1 {
    font-weight: 600;
    font-size: 38px;
    line-height: 1.2;
    color: var(--grey-900);
}

h2 {
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: var(--grey-900);
}

a {
    color: var(--primary-700);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
}

b {
    font-weight: 700;
}

strong {
    font-weight: 700;
}

/* #endregion */

/* #region Animations */
.rotating {
    -webkit-animation: rotating 2s linear infinite;
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.flash-primary-400 {
    animation: flash-primary-400 1s ease-in-out;
}

@keyframes flash-primary-400 {
    0% {
        background-color: var(--primary-400);
    }

    100% {
        background-color: var(--white);
    }
}

.flash-primary-200-smooth {
    animation: flash-primary-200-smooth 1s ease-in-out;
}

@keyframes flash-primary-200-smooth {
    0% {
        background-color: var(--white);
    }

    25% {
        background-color: var(--primary-200);
    }

    100% {
        background-color: var(--white);
    }
}

.breathe-warning-200-warning-100 {
    animation: breathe-warning-200-warning-100 2.5s ease-in-out infinite;
}

@keyframes breathe-warning-200-warning-100 {
    0% {
        background-color: var(--warning-100);
    }

    50% {
        background-color: var(--warning-300);
    }

    100% {
        background-color: var(--warning-100);
    }
}
/* #endregion */

/* #region Common */
.info {
    background: var(--info-50) !important;
    color: var(--info-700) !important;
}

.warning {
    background: var(--warning-50) !important;
    color: var(--warning-700) !important;
}

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

.error {
    background: var(--error-50) !important;
    color: var(--error-700) !important;
}

.no-background {
    background: none !important;
}

.primary {
    background: var(--primary-50) !important;
    color: var(--primary-700) !important;
}

.mt-0 {
    margin-top: 0px;
}

.mb-0 {
    margin-bottom: 0px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mt-24 {
    margin-top: 24px;
}

.mb-24 {
    margin-bottom: 24px;
}

.mt-32 {
    margin-top: 32px;
}

.mb-32 {
    margin-bottom: 32px;
}

.mb-16 {
    margin-bottom: 16px;
}


.mr-8 {
    margin-right: 8px;
}

.mr-16 {
    margin-right: 16px;
}

.padding-0 {
    padding: 0;
}

.margin-left-auto {
    margin-left: auto;
}

.float-right {
    float: right;
}

.nowrap {
    white-space: nowrap;
}

.divider {
    width: 100%;
    height: 1px;
    background: var(--grey-200);
    margin: 20px 0px;
}

    .divider.dark {
        background: var(--grey-300);
    }

.subtitle {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--grey-600);
}

.width-100 {
    width: 100%;
}

.no-select {
    user-select: none;
}

.no-wrap {
    white-space: nowrap;
}

.font-weight-normal {
    font-weight: 400;
}

.font-size-12 {
    font-size: 12px;
}

.text-grey-500 {
    color: var(--grey-500);
}

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

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

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-right: 8px;
}

.dotted-underline {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.text-small {
    font-size: 12px;
}

.color-grey-500 {
    color: var(--grey-500);
}

.cursor-pointer {
    cursor: pointer;
}

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

@media (min-width: 992px) {
    .desktop-hidden {
        display: none;
    }
}

@media (max-width: 991px) {
    .mobile-hidden {
        display: none;
    }
}
/* #endregion */

/* #region Master wrapper */
#main-wrapper {
    display: flex;
}

    #main-wrapper #navigation-wrapper {
        flex-shrink: 0;
    }

    #main-wrapper main {
        flex-grow: 1;
        overflow-x: hidden;
        min-height: calc(100vh - var(--header-height));
    }

        #main-wrapper main.impersonation {
            padding-top: 36px;
        }

    #main-wrapper #sidebar-right-wrapper {
        flex-shrink: 0;
    }

    #main-wrapper #main-darkness {
        display: block;
        background: rgba(52, 64, 84, 0.6);
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        z-index: 10;
    }

@media (max-width: 991px) {
    body.main-navigation-open #main-wrapper #main-darkness {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 1;
    }

    body.sidebar-right-open #main-wrapper #main-darkness {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 1;
    }
}
/* #endregion */

/* #region Sidebar right */
#sidebar-right-wrapper {
    width: 380px;
}

#sidebar-right-container {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: auto;
    min-height: calc(100vh - var(--header-height));
    width: 380px;
    border-left: 1px solid var(--grey-200);
    display: flex;
    transition: transform 0.2s ease-in-out, width 0.2s ease-in-out;
    z-index: 20;
    flex-direction: row;
    overflow: hidden;
}

#sidebar-right-wrapper #sidebar-right-container .content-wrapper {
    display: flex;
    flex-direction: row;
    transition: transform 0.2s ease-in-out;
    transform: translateX(-80px);
}

#sidebar-right-wrapper #sidebar-right-container .collapsed-content {
    background: var(--white);
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    width: 80px;
}

    #sidebar-right-wrapper #sidebar-right-container .collapsed-content .toggle-sidebar-collapse {
        margin-top: 18px;
    }

#sidebar-right-wrapper #sidebar-right-container .collapsed-content {
    background: var(--white);
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 80px;
}


#sidebar-right-wrapper #sidebar-right-container .collapsed-content {
    background: var(--white);
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 80px;
}





#sidebar-right-wrapper #sidebar-right-container .expanded-content {
    background: white;
    width: 380px;
}

    #sidebar-right-wrapper #sidebar-right-container .expanded-content .header {
        display: flex;
        justify-content: space-between;
        padding: 24px;
    }

        #sidebar-right-wrapper #sidebar-right-container .expanded-content .header .subtitle {
            color: var(--grey-500);
        }

#sidebar-right-wrapper #sidebar-right-container .toggle-sidebar-collapse {
    display: block;
    width: 32px;
    height: 32px;
    background: var(--grey-200);
    cursor: pointer;
    border-radius: 999px;
}

    #sidebar-right-wrapper #sidebar-right-container .toggle-sidebar-collapse:hover {
        background: var(--grey-300);
    }


    #sidebar-right-wrapper #sidebar-right-container .toggle-sidebar-collapse .icon-wrapper {
        height: 32px;
        width: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #sidebar-right-wrapper #sidebar-right-container .toggle-sidebar-collapse .icon-wrapper .icon {
            background: var(--grey-700);
            height: 16px;
            width: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.2s ease-out;
        }

#sidebar-right-wrapper.collapsed .toggle-sidebar-collapse .icon {
    transform: rotate(180deg);
}

#sidebar-right-wrapper #sidebar-right-container .toggle-sidebar {
    display: block;
    width: 32px;
    height: 32px;
    background: var(--grey-200);
    cursor: pointer;
    border-radius: 999px;
}

    #sidebar-right-wrapper #sidebar-right-container .toggle-sidebar:hover {
        background: var(--grey-300);
    }


    #sidebar-right-wrapper #sidebar-right-container .toggle-sidebar .icon-wrapper {
        height: 32px;
        width: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #sidebar-right-wrapper #sidebar-right-container .toggle-sidebar .icon-wrapper .icon {
            background: var(--grey-700);
            height: 16px;
            width: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.2s ease-out;
        }

@media (min-width: 992px) {
    #sidebar-right-wrapper.collapsed {
        width: 80px;
    }

        #sidebar-right-wrapper.collapsed #sidebar-right-container {
            width: 80px;
        }

            #sidebar-right-wrapper.collapsed #sidebar-right-container .content-wrapper {
                transform: translateX(0px);
            }

        #sidebar-right-wrapper.collapsed.hover {
            width: 80px;
        }

            #sidebar-right-wrapper.collapsed.hover #sidebar-right-container {
                width: 380px;
            }

                #sidebar-right-wrapper.collapsed.hover #sidebar-right-container .content-wrapper {
                    transform: translateX(-80px);
                }

    #sidebar-right-wrapper #sidebar-right-container .toggle-sidebar {
        display: none;
    }
}

@media (max-width: 991px) {
    #sidebar-right-wrapper {
        width: 0;
    }

    #sidebar-right-container {
        transform: translateX(100%);
    }

    body.sidebar-right-open #sidebar-right-container {
        transform: translateX(0%);
    }

    #sidebar-right-wrapper #sidebar-right-container .toggle-sidebar-collapse {
        display: none;
    }
}

/* #endregion */

/* #region Header */
#mobile-header {
    display: none;
}

@media (max-width: 991px) {
    #mobile-header {
        display: block;
        background: var(--white);
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid var(--grey-200);
    }

        #mobile-header .logo {
            display: block;
            max-height: 32px;
            max-width: 248px;
        }

        #mobile-header .menu-toggle {
            position: absolute;
            left: 8px;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #mobile-header .toggle-sidebar {
            position: absolute;
            right: 8px;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
}
/* #endregion */


/* #region Impersonation */
.impersonation-wrapper .impersonation-banner {
    background: var(--warning-100);
    color: var(--grey-700);
    padding: 8px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    position: fixed;
    top: 0;
    left: 280px;
    right: 0px;
    z-index: 10;
}

    .impersonation-wrapper .impersonation-banner .icon-wrapper {
        height: 20px;
        width: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .impersonation-wrapper .impersonation-banner .icon-wrapper .icon {
            height: 20px;
            width: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            background: var(--grey-700);
        }

    .impersonation-wrapper .impersonation-banner .end-impersonation-btn {
        color: white;
        border-radius: 4px;
        background: var(--grey-700);
        padding: 4px;
        margin-left: 8px;
        font-weight: 500;
    }

@media(max-width: 991px) {
    .impersonation-wrapper .impersonation-banner {
        left: 0px;
        right: 0px;
    }
}

/* #endregion */

/* #region Breadcrumb */
.breadcrumb {
    display: flex;
    column-gap: 8px;
    row-gap: 4px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
}

    .breadcrumb .item {
        color: var(--grey-600);
        cursor: pointer;
        font-weight: 500;
    }

        .breadcrumb .item.text-primary {
            color: var(--primary-700);
        }

        .breadcrumb .item.text-medium {
            font-weight: 500;
        }

    .breadcrumb .chevron {
        height: 16px;
        width: 16px;
        background: var(--grey-400);
        display: flex;
        justify-content: center;
        align-items: center;
        mask-size: contain !important;
        mask: url(/assets/icons/chevron-right.svg) no-repeat center;
    }

/* #endregion */

/* #region Main navigation */
.main-navigation {
}

    .main-navigation li {
        margin-bottom: 4px;
    }

        .main-navigation li a {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border-radius: 6px;
            color: var(--grey-700);
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            line-height: 24px;
            cursor: pointer;
        }

            .main-navigation li a:hover {
                background: var(--grey-50);
            }

            .main-navigation li a .icon {
                background: none;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 24px;
                height: 24px;
            }

            .main-navigation li a span {
                margin-left: 12px;
            }

            .main-navigation li a .icon-submenu {
                margin-left: auto;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 24px;
                width: 24px;
                flex-shrink: 0;
            }

                .main-navigation li a .icon-submenu img {
                    transition: transform 0.2s ease-out;
                }

            .main-navigation li a .hint {
                margin-left: auto;
                font-size: 12px;
                line-height: 18px;
                font-weight: 500;
                color: var(--grey-700);
                background: var(--grey-100);
                padding: 2px 8px;
                border-radius: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

        .main-navigation li.active > a {
            background: var(--grey-50);
            color: var(--grey-900);
        }

        .main-navigation li.has-submenu ul {
            overflow: hidden;
            transition: height 0.2s ease-out;
        }

            .main-navigation li.has-submenu ul li:first-child {
                margin-top: 8px;
            }

            .main-navigation li.has-submenu ul li:last-child {
                margin-bottom: 8px;
            }

        .main-navigation li.has-submenu ul {
            overflow: hidden;
            transition: height 0.2s ease-out;
        }

        .main-navigation li.has-submenu.open a .icon-submenu img {
            transform: rotate(180deg);
        }

        .main-navigation li.has-submenu:not(.open) ul {
            height: 0;
        }

        .main-navigation li.has-submenu ul li a {
            font-size: 14px;
            font-weight: 500;
        }

        .main-navigation li a.shoppingcart {
            gap: 8px;
        }

            .main-navigation li a.shoppingcart span:first-child {
                margin-left: 0px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
/* #endregion */

/* #region Navigation */
#navigation-wrapper {
    width: 280px;
}

#navigation-container {
    position: fixed;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    background: var(--white);
    min-height: calc(100vh - var(--header-height));
    width: 280px;
    border-right: 1px solid var(--grey-200);
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-in-out;
    z-index: 20;
}

    #navigation-container .logo {
        display: block;
        margin-left: 16px;
        max-height: 32px;
        max-width: 248px;
    }

    #navigation-container nav.main-navigation > ul {
        margin-top: 24px;
    }

#bottom-navigation-wrapper {
    margin-top: auto;
}

    #bottom-navigation-wrapper .user-info-wrapper {
        border-top: 1px solid var(--grey-200);
        margin-top: 24px;
    }

    #bottom-navigation-wrapper .user-impersonation {
        margin: 24px 8px 0px 8px;
        padding: 8px;
        background: var(--warning-100);
        color: var(--grey-700);
        font-weight: 400;
        border-radius: 4px;
        display: flex;
        gap: 8px;
    }

        #bottom-navigation-wrapper .user-impersonation .icon-wrapper {
            height: 20px;
            width: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

            #bottom-navigation-wrapper .user-impersonation .icon-wrapper .icon {
                height: 20px;
                width: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-shrink: 0;
                background: var(--grey-700);
            }

    #bottom-navigation-wrapper .user-info {
        padding: 24px 8px 0px 8px;
        display: flex;
        gap: 12px;
    }

        #bottom-navigation-wrapper .user-info .avatar {
            background: var(--primary-600);
            width: 40px;
            height: 40px;
            border-radius: 999px;
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            #bottom-navigation-wrapper .user-info .avatar .initials {
                color: var(--white);
                font-weight: 600;
                font-size: 16px;
                line-height: 24px;
            }

        #bottom-navigation-wrapper .user-info .text {
            display: flex;
            flex-direction: column;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: normal;
        }

            #bottom-navigation-wrapper .user-info .text .company {
                font-weight: 600;
                color: var(--grey-700);
                line-height: 20px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            #bottom-navigation-wrapper .user-info .text .email {
                line-height: 20px;
                color: var(--grey-600);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

        #bottom-navigation-wrapper .user-info .logout {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            margin-left: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

@media (max-width: 991px) {
    #navigation-wrapper {
        width: 0;
    }

    #navigation-container {
        transform: translateX(-100%);
    }

    body.main-navigation-open #navigation-container {
        transform: translateX(0%);
    }
}
/* #endregion */

/* #region Modal */
body.modal-open {
    overflow-y: hidden;
}

.modal {
    visibility: hidden;
    height: 0;
    z-index: 200;
    overflow-y: scroll;
}

    .modal.show {
        visibility: visible;
        height: auto;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px;
        background-color: rgba(0, 0, 0, 0);
        transition: background-color 0.3s ease-out;
        transition-delay: 0s; /* 0.1 if the transition time is 0.2s because the card takes 0.3 to disappear */
    }

        .modal.show.top {
            align-items: start;
            padding-top: 32px;
        }

        .modal.show.background {
            background-color: rgba(52, 64, 84, 0.7);
            transition-delay: 0s;
        }

    .modal .modal-body {
    }

    .modal.open .modal-card {
        opacity: 1;
        margin-top: 0px;
        transition-delay: 0s, 0s;
    }

.modal-card {
    background: var(--white);
    border-radius: 12px;
    width: 400px;
    opacity: 0;
    transition: opacity 0.2s ease-out, margin 0.3s ease-out;
    transition-delay: 0.1s, 0s;
    margin-top: -50px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 64px);
}

    .modal-card.w700 {
        width: 700px;
    }

    .modal-card.w-100 {
        width: calc(100vw - 64px);
    }

    .modal-card .modal-header {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px 24px 20px 24px;
    }

        .modal-card .modal-header .icon-close {
            position: absolute;
            top: 16px;
            right: 16px;
            height: 44px;
            width: 44px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .modal-card .modal-header .icon-close {
            cursor: pointer;
        }

        .modal-card .modal-header .icon-wrapper {
            border: 1px solid var(--grey-200);
            height: 48px;
            width: 48px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .modal-card .modal-header .icon-wrapper .icon {
                background: var(--grey-700);
                height: 48px;
                width: 48px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

        .modal-card .modal-header .title {
            display: block;
            margin-top: 16px;
            font-weight: 600;
            font-size: 18px;
            line-height: 28px;
        }

        .modal-card .modal-header .subtitle {
            display: block;
            margin-top: 4px;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: var(--grey-600);
            text-align: center;
        }

    .modal-card .modal-content {
        padding: 24px;
        overflow-y: auto;
        flex-shrink: 1;
    }

    .modal-card .modal-footer {
        border-top: 1px solid var(--grey-200);
        padding: 24px;
    }

        .modal-card .modal-footer .buttons {
            display: flex;
            gap: 12px;
        }

            .modal-card .modal-footer .buttons .btn {
                width: 100%;
            }

            .modal-card .modal-footer .buttons.centered {
                justify-content: center;
            }

                .modal-card .modal-footer .buttons.centered .btn {
                    width: auto;
                }

    
    .modal-card.notification .modal-header .title {
        font-size: 24px;
        line-height: 32px;
    }

    .modal-card.notification .modal-content {
        margin-top: -12px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: var(--grey-600);
    }

@media (max-width: 991px) {
    .modal-body {
        flex-grow: 1;
    }

    .modal-card {
        width: 100%;
    }

        .modal-card.w700 {
            width: 100%;
        }
}
/* #endregion */

/* #region Forms, inputs and buttons */
.form-group {
}

    .form-group label {
        display: block;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: var(--grey-700);
        margin-bottom: 6px;
        cursor: pointer;
    }

    .form-group .text-danger {
        display: block;
        margin-top: 6px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: var(--error-500);
    }

        .form-group .text-danger:empty {
            margin-top: 0px;
        }

form .validation-summary-errors ul li {
    display: block;
    margin-bottom: 12px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--error-500);
}

form a.validation-result-url {
    display: block;
    margin-top: -12px;
    font-weight: 400;
    color: var(--error-500);
    text-decoration: underline;
    margin-bottom: 12px;
}

.ned-input {
    font-family: 'Inter';
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-600);
    line-height: 24px;
    border: 1px solid var(--grey-300);
    border-radius: 8px;
    padding: 10px 14px;
    width: 100%;
}

    .ned-input::placeholder {
        color: var(--grey-400);
    }

    .ned-input:disabled {
        background-color: var(--grey-100);
    }

    .ned-input:read-only {
        background-color: var(--grey-100);
    }

.ned-input, input:focus {
    outline-color: var(--primary-200);
}

select.ned-input {
    padding-right: 40px;
    appearance: none;
    background-image: url('/assets/icons/chevron-down.svg');
    background-repeat: no-repeat;
    background-position: right 14px top 50%;
}

    select.ned-input:read-only {
        background-color: var(--white);
    }

    select.ned-input:disabled {
        background-color: var(--grey-100);
    }

.ned-input[type="date"] {
    padding: 9px 14px;
}

/* #region buttons */
.btn {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-wrap: wrap;
}

    .btn.disabled {
        opacity: 0.5;
        cursor: initial;
    }

    .btn.nowrap {
        white-space: nowrap;
    }

    .btn.primary {
        background: var(--primary-600) !important;
        color: var(--white) !important;
        border: none;
        transition: background 0.1s linear;
        outline-color: var(--primary-200);
    }

        .btn.primary:hover {
            background: var(--primary-700) !important;
        }

        .btn.primary .icon {
            background: var(--white);
        }


    .btn.secondary {
        background: var(--white);
        border: 1px solid var(--grey-300);
        color: var(--grey-700);
        transition: background 0.1s linear;
        outline-color: var(--grey-200);
    }

        .btn.secondary:hover {
            background: var(--grey-50);
        }

        .btn.secondary .icon {
            background: var(--grey-700);
        }

    .btn.error {
        background: var(--error-600) !important;
        color: var(--white) !important;
        border: none;
        transition: background 0.1s linear;
        outline-color: var(--error-200);
    }

    .btn .icon-wrapper {
        height: 20px;
        width: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .btn .icon-wrapper .icon {
            height: 20px;
            width: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
        }

    .btn:disabled {
        background: var(--grey-200) !important;
        color: var(--grey-400) !important;
    }

        .btn:disabled:hover {
            background: var(--grey-200) !important;
            outline-color: var(--grey-200);
            color: var(--grey-400) !important;
        }

        .btn:disabled .icon {
            background: var(--grey-400) !important;
        }

    .btn.btn-small {
        font-weight: 500;
        padding: 5px 10px;
    }

        .btn.btn-small .icon-wrapper {
            height: 16px;
            width: 16px;
        }

            .btn.btn-small .icon-wrapper .icon {
                height: 16px;
                width: 16px;
            }

.buttons-wrapper {
    display: flex;
    gap: 16px;
}

    .buttons-wrapper.right {
        justify-content: flex-end;
    }
/* #endregion */

/* #region ned-checkbox */
.checkbox-wrapper {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

    .checkbox-wrapper label.subtitle {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: var(--grey-600);
    }

.form-group.checkbox .checkbox-container {
    position: relative;
    display: flex;
    align-items: start;
    gap: 8px;
    margin-bottom: 0;
}

    .form-group.checkbox .checkbox-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .form-group.checkbox .checkbox-container label {
        margin-bottom: 0;
        user-select: none;
    }

    .form-group.checkbox .checkbox-container .hint {
        font-weight: 400;
        color: var(--grey-600);
    }

    .form-group.checkbox .checkbox-container .ned-checkbox {
        height: 16px;
        width: 16px;
        border: 1px solid var(--grey-300);
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2px;
        flex-shrink: 0;
    }

        .form-group.checkbox .checkbox-container .ned-checkbox::after {
            display: none;
            content: "";
            height: 16px;
            width: 16px;
        }

    .form-group.checkbox .checkbox-container input:checked ~ .ned-checkbox::after {
        display: block;
        -webkit-mask-image: url(/assets/icons/check-primary.svg);
        -webkit-mask-repeat: no-repeat;
        mask-image: url(/assets/icons/check-primary.svg);
        mask-repeat: no-repeat;
        mask-position: 50% 50%;
        background: var(--primary-600);
    }

    .form-group.checkbox .checkbox-container input:disabled ~ .ned-checkbox {
        background: var(--grey-100);
    }

    .form-group.checkbox .checkbox-container input:checked ~ .ned-checkbox {
        background: var(--primary-100);
        border: 1px solid var(--primary-600);
    }

    .form-group.checkbox .checkbox-container input:focus ~ .ned-checkbox {
        outline-color: var(--primary-200);
        outline: 2px solid var(--primary-200);
        outline-style: auto;
    }

.form-group.checkbox:hover .checkbox-container .ned-checkbox {
    background: var(--primary-100);
    border: 1px solid var(--primary-600);
}

/* #endregion */

/* #region ned-checkbox-slider */
.ned-checkbox-slider-wrapper {
    display: flex;
}

.ned-checkbox-slider {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 44px;
}

    .ned-checkbox-slider input {
        display: none;
    }

    .ned-checkbox-slider .slider {
        background-color: var(--grey-300);
        bottom: 0;
        cursor: pointer;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        transition: .4s;
    }

        .ned-checkbox-slider .slider:before {
            background-color: #fff;
            bottom: 2px;
            content: "";
            height: 20px;
            left: 2px;
            position: absolute;
            transition: .4s;
            width: 20px;
        }

    .ned-checkbox-slider input:checked + .slider {
        background-color: var(--primary-700);
    }

        .ned-checkbox-slider input:checked + .slider:before {
            transform: translateX(20px);
        }

    .ned-checkbox-slider .slider.round {
        border-radius: 34px;
    }

        .ned-checkbox-slider .slider.round:before {
            border-radius: 50%;
        }
/* #endregion */

/* #region ned-radio */
.radiobutton-wrapper {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

    .radiobutton-wrapper label.subtitle {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: var(--grey-600);
    }

.form-group.radiobutton .radiobutton-container {
    position: relative;
    display: flex;
    align-items: start;
    gap: 8px;
    margin-bottom: 0;
}

    .form-group.radiobutton .radiobutton-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .form-group.radiobutton .radiobutton-container label {
        margin-bottom: 0;
        user-select: none;
    }

    .form-group.radiobutton .radiobutton-container .hint {
        font-weight: 400;
        color: var(--grey-600);
    }

    .form-group.radiobutton .radiobutton-container .ned-radiobutton {
        height: 16px;
        width: 16px;
        border: 1px solid var(--grey-300);
        border-radius: 999px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2px;
        flex-shrink: 0;
    }

        .form-group.radiobutton .radiobutton-container .ned-radiobutton::after {
            display: none;
            content: "";
            height: 16px;
            width: 16px;
        }

    .form-group.radiobutton .radiobutton-container input:checked ~ .ned-radiobutton::after {
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 4px;
        background: var(--primary-600);
    }

    .form-group.radiobutton .radiobutton-container input:disabled ~ .ned-radiobutton {
        background: var(--grey-100);
    }

    .form-group.radiobutton .radiobutton-container input:checked ~ .ned-radiobutton {
        background: var(--primary-100);
        border: 1px solid var(--primary-600);
    }

    .form-group.radiobutton .radiobutton-container input:focus ~ .ned-radiobutton {
        outline-color: var(--primary-200);
        outline: 2px solid var(--primary-200);
        outline-style: auto;
    }

.form-group.radiobutton:hover .radiobutton-container .ned-radiobutton {
    background: var(--primary-100);
    border: 1px solid var(--primary-600);
}
/* #endregion */

/* #region dragdrop */
.file-drag-drop-container {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}


    .file-drag-drop-container .icon-wrapper {
        box-sizing: content-box;
        background: var(--grey-100);
        border: 8px solid var(--grey-50);
        border-radius: 28px;
        height: 40px;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

        .file-drag-drop-container .icon-wrapper .icon {
            background: var(--grey-600);
            height: 40px;
            width: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
        }

    .file-drag-drop-container .title {
        display: block;
        margin-top: 12px;
        margin-bottom: 4px;
        font-size: 14px;
        font-weight: 400;
        color: var(--grey-600);
        line-height: 20px;
    }

        .file-drag-drop-container .title .click-hint {
            font-weight: 600;
            color: var(--primary-700);
        }

        .file-drag-drop-container .title .uploading-hint {
            display: none;
        }

        .file-drag-drop-container .title .uploaded-hint {
            display: none;
        }

    .file-drag-drop-container .subtitle {
        font-size: 12px;
        font-weight: 400;
        color: var(--grey-600);
        line-height: 18px;
    }

    .file-drag-drop-container .upload-progress {
        display: none;
        width: 100%;
        height: 4px;
        background: var(--grey-200);
        margin-top: 12px;
        border-radius: 4px;
    }

        .file-drag-drop-container .upload-progress .value {
            width: 0%;
            height: 4px;
            background: var(--primary-600);
            border-radius: 4px;
        }

    .file-drag-drop-container.uploaded .upload-progress .value {
        background: var(--success-500);
    }

    .file-drag-drop-container.dragover {
        border: 1px solid var(--primary-600);
        background-color: var(--primary-50);
    }

        .file-drag-drop-container.dragover .icon-wrapper {
            background: var(--primary-200);
            border: 8px solid var(--primary-100);
        }

            .file-drag-drop-container.dragover .icon-wrapper .icon {
                background: var(--primary-700);
            }

    .file-drag-drop-container:hover {
        border: 1px solid var(--primary-600);
        background-color: var(--primary-50);
    }

        .file-drag-drop-container:hover .icon-wrapper {
            background: var(--primary-200);
            border: 8px solid var(--primary-100);
        }

            .file-drag-drop-container:hover .icon-wrapper .icon {
                background: var(--primary-700);
            }
/* #endregion */

/* #endregion */

/* #region Cards */
.card {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

    .card.shadow {
        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.08);
    }

    .card.mb-0 {
        margin-bottom: 0px;
    }

/* #region KPI */
.kpi-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    height: calc(100% - 16px);
}

    .kpi-card .title {
        display: block;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: var(--grey-600);
    }

    .kpi-card .value-wrapper {
        display: flex;
    }

        .kpi-card .value-wrapper .value {
            font-weight: 600;
            font-size: 30px;
            line-height: 38px;
            color: var(--grey-900);
        }

        .kpi-card .value-wrapper .tag {
            margin-left: auto;
            margin-top: auto;
            margin-bottom: 4px;
        }

    .kpi-card .icon-wrapper {
        height: 38px;
        width: 38px;
        display: flex;
        align-items: center;
        justify-content: start;
        flex-shrink: 0;
    }

        .kpi-card .icon-wrapper .icon {
            background: var(--grey-900);
            height: 22px;
            width: 22px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            mask-size: cover;
        }
/* #endregion */

/* #region Line */
.line-card {
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

    .line-card .top-items-wrapper {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .line-card .bottom-items-wrapper {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-left: auto;
    }


    .line-card .line-card-icon-wrapper {
        box-sizing: content-box;
        background: var(--primary-100);
        border: 8px solid var(--primary-50);
        border-radius: 28px;
        height: 40px;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

        .line-card .line-card-icon-wrapper .icon {
            background: var(--primary-600);
            height: 40px;
            width: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
        }

    .line-card .line-card-title-wrapper {
        display: flex;
        flex-direction: column;
    }

        .line-card .line-card-title-wrapper .subtitle {
            display: block;
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            color: var(--grey-600);
        }

        .line-card .line-card-title-wrapper .title {
            display: block;
            margin-top: 2px;
            font-size: 18px;
            font-weight: 600;
            line-height: 28px;
            color: var(--grey-900);
        }

    .line-card .dropdown .dropdown-toggle {
        height: 32px;
        width: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

@media (max-width: 767px) {
    .line-card {
        display: block;
    }

        .line-card:has(.dropdown) .top-items-wrapper {
            margin-right: 32px;
        }

        .line-card .bottom-items-wrapper {
            margin-top: 24px;
        }

        .line-card .dropdown {
            position: absolute;
            top: 15px;
            right: 20px;
        }
}

@media (min-width: 768px) {
    .line-card .bottom-items-wrapper:has(.dropdown) > :nth-last-child(2) {
        margin-right: -8px;
    }
}

/* #endregion */

/* #region Splitted card */
.card.splitted-card {
    padding: 0px;
}

    .card.splitted-card > .row {
        margin: 0;
    }


    .card.splitted-card .split-column {
        padding: 0;
    }

        .card.splitted-card .split-column:not(:first-of-type) {
            border-left: 1px solid var(--grey-100);
        }

        .card.splitted-card .split-column .split-column-content {
            padding: 20px;
        }

@media (max-width: 991px) {
    .card.splitted-card .split-column:not(:first-of-type) {
        border-left: none;
        border-top: 1px solid var(--grey-100);
    }
}


/* #endregion*/

.filter-search-card {
    background: var(--grey-100);
    border: none;
    display: flex;
    gap: 12px;
    align-items: end;
}

    .filter-search-card button {
        margin-left: auto;
    }

    .filter-search-card .filter-wrapper {
        flex-grow: 1;
    }

@media (max-width: 991px) {
    .filter-search-card {
        display: block;
    }

        .filter-search-card button {
            width: 100%;
        }
}

@media (min-width: 992px) {
    .filter-search-card .form-group.mb-20 {
        margin-bottom: 0px;
    }

    .filter-search-card .form-group.mb-24 {
        margin-bottom: 0px;
    }
}

.info-card {
    position: relative;
    background: var(--info-25);
    border: 1px solid var(--info-100);
    padding-left: 48px;
}

    .info-card::after {
        content: url('/assets/icons/toastr-info.svg');
        display: block;
        position: absolute;
        top: 20px;
        left: 20px;
    }

.summary-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .summary-card .summary-line {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .summary-card .summary-line .title {
            color: var(--grey-400);
        }

        .summary-card .summary-line .value {
            color: var(--grey-600);
        }

        .summary-card .summary-line .value-large {
            font-size: 16px;
            font-weight: 500;
            color: var(--grey-700);
        }

    .summary-card .summary-spacer {
        height: 1px;
        background: var(--grey-200);
        margin: 14px -20px 14px -20px;
    }

.notification-card {
    border: 2px solid var(--primary-500);
}

    .notification-card .title-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
    }

        .notification-card .title-bar .icon-wrapper {
            height: 24px;
            width: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
        }

            .notification-card .title-bar .icon-wrapper .icon {
                background: var(--grey-900);
                height: 24px;
                width: 24px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-shrink: 0;
            }

        .notification-card .title-bar .title {
            font-size: 18px;
            font-weight: 600;
            line-height: 24px;
        }

    .notification-card .message {
        margin-left: 36px;
        color: var(--grey-900);
        font-size: 14px;
    }

/* #endregion */

/* #region Dropdown */
.dropdown {
    position: relative;
}

    .dropdown .dropdown-toggle {
        cursor: pointer;
    }

        .dropdown .dropdown-toggle.dots {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 40px;
            width: 40px;
            border-radius: 10px;
        }

        .dropdown .dropdown-toggle .icon {
            background: var(--grey-700);
            height: 40px;
            width: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .dropdown .dropdown-toggle:hover {
            background: var(--grey-100);
        }

    .dropdown .dropdown-content {
        display: none;
    }

    .dropdown.open .dropdown-content {
        display: block;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        background: var(--white);
        border-radius: 8px;
        border: 1px solid var(--grey-200);
        padding: 6px;
        z-index: 5;
        overflow: hidden;
    }

    .dropdown.open.top .dropdown-content {
        top: initial;
        bottom: calc(100% + 8px);
    }

    .dropdown .dropdown-content a {
        display: block;
        padding: 10px 10px;
        white-space: nowrap;
        color: var(--grey-700);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        margin-bottom: 2px;
    }

        .dropdown .dropdown-content a:hover {
            background: var(--grey-100);
            border-radius: 8px;
        }

        .dropdown .dropdown-content a:last-of-type {
            margin-bottom: 0px;
        }
/* #endregion */

/* #region Tags */
.tag {
    background: var(--grey-50);
    color: var(--grey-700);
    font-size: 14px;
    line-height: 20px;
    padding: 2px 8px;
    border-radius: 16px;
    font-weight: 500;
    white-space: nowrap;
}

    .tag.primary {
        background: var(--primary-50);
        color: var(--primary-700);
    }

    .tag.info {
        background: var(--info-50);
        color: var(--info-700);
    }

    .tag.info-negative {
        background: var(--info-700);
        color: var(--white);
    }

    .tag.success {
        background: var(--success-50);
        color: var(--success-700);
    }

    .tag.warning {
        background: var(--warning-50);
        color: var(--warning-700);
    }

    .tag.error {
        background: var(--error-50);
        color: var(--error-700);
    }

    .tag.yellow {
        background: var(--yellow-50);
        color: var(--yellow-700);
    }

    .tag.bordered {
        border: 1px solid currentColor;
    }

    .tag.light-grey {
        background: var(--grey-50);
        color: var(--grey-400);
    }

/* #endregion */

/* #region Alerts */

.alert {
    display: block;
    background: var(--white);
    border: 1px solid var(--grey-300);
    color: var(--grey-600);
    border-radius: 12px;
    padding: 16px;
}

    .alert.primary {
        border: 1px solid var(--primary-700);
    }

    .alert.info {
        border: 1px solid var(--info-700);
    }

    .alert.warning {
        border: 1px solid var(--warning-700);
    }

    .alert.success {
        border: 1px solid var(--success-700);
    }

/* #endregion */

/* #region Progress */
.progress-wrapper {
    display: flex;
    gap: 16px;
    width: 100%;
}

    .progress-wrapper .progress-step {
        flex-grow: 1;
        border-top: 4px solid var(--grey-200);
        padding-top: 12px;
        padding-bottom: 20px;
    }

        .progress-wrapper .progress-step.completed {
            border-top: 4px solid var(--primary-700);
        }

        .progress-wrapper .progress-step.active {
            border-top: 4px solid var(--primary-200);
        }

        .progress-wrapper .progress-step span {
            font-weight: 600;
            font-size: 16px;
            line-height: 24px;
            color: var(--grey-700);
        }

        .progress-wrapper .progress-step.active span {
            color: var(--primary-700);
        }

@media (max-width: 767px) {
    .progress-wrapper {
        flex-direction: column;
    }
}

/* #endregion */

/* #region Loader */
.loader-wrapper {
    aspect-ratio: 1/1;
    position: relative;
    margin-bottom: 32px;
}

    .loader-wrapper .loader {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 50%;
        border: 5px solid var(--grey-300);
        border-top: 5px solid var(--primary-700);
        animation: spin 2s linear infinite; /* Infinite spin animation */
    }

        .loader-wrapper .loader.primary-500 {
            border-top: 5px solid var(--primary-500);
        }

    .loader-wrapper .loader-text-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 32px;
    }

        .loader-wrapper .loader-text-wrapper .icon-wrapper {
            margin-bottom: 0px !important;
        }

    .loader-wrapper.inactive .loader {
        border-color: var(--grey-300);
        animation: none;
    }

/* Keyframes for spinner rotation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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


/* #endregion */

/* #region Other actions */
.other-action {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

    .other-action .action-name {
        display: flex;
        flex-direction: column;
    }

        .other-action .action-name .subtitle {
            font-weight: 400;
            color: var(--grey-600);
        }

/* #endregion */

/* #region Page */
.page-wrapper {
    margin: 32px 0px;
}

    .page-wrapper .title-action-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: self-end;
        gap: 16px;
    }

        .page-wrapper .title-action-wrapper .action-wrapper {
            margin-left: auto;
        }

    .page-wrapper .title-wrapper {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .page-wrapper.page-top-header {
        margin-top: 0px;
    }

    .page-wrapper .top-header-wrapper {
        background: var(--white);
        padding: 16px 0px;
        border-bottom: 1px solid var(--grey-200);
    }

    .page-wrapper .top-header {
        display: flex;
        align-items: center;
        gap: 32px;
        flex-wrap: wrap;
    }

        .page-wrapper .top-header .header-title-wrapper .titlebar {
            display: flex;
            align-items: start;
            gap: 8px;
        }

            .page-wrapper .top-header .header-title-wrapper .titlebar .title {
                font-weight: 600;
                font-size: 18px;
                line-height: 28px;
                color: var(--grey-900);
                word-break: break-all;
            }

            .page-wrapper .top-header .header-title-wrapper .titlebar .tag {
                margin-top: 2px;
            }

        .page-wrapper .top-header .header-title-wrapper .subtitlebar .subtitle {
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: var(--grey-600);
            word-break: break-all;
        }

        .page-wrapper .top-header .action-wrapper {
            margin-left: auto;
            display: flex;
            gap: 12px;
            align-items: center;
        }

            .page-wrapper .top-header .action-wrapper a {
                white-space: nowrap;
            }

            .page-wrapper .top-header .action-wrapper .spacer {
                width: 1px;
                height: 32px;
                background: var(--grey-200);
                margin: 0px 8px;
            }

            .page-wrapper .top-header .action-wrapper .dropdown-toggle {
                display: flex;
                justify-content: center;
                align-items: center;
            }

                .page-wrapper .top-header .action-wrapper .dropdown-toggle.dots {
                    height: 40px;
                    width: 40px;
                    border-radius: 10px;
                }

                .page-wrapper .top-header .action-wrapper .dropdown-toggle:hover {
                    background: var(--grey-50);
                }

                .page-wrapper .top-header .action-wrapper .dropdown-toggle .icon {
                    background: var(--grey-700);
                    height: 40px;
                    width: 40px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }



    .page-wrapper .top-header-wrapper .top-header .mobile {
        display: none;
    }

    .page-wrapper .top-header-wrapper .top-header .desktop {
        display: flex;
    }

@media (max-width: 767px) {
    .page-wrapper .title-wrapper a {
        width: 100%;
    }
}

@media (max-width: 991px) {
    .page-wrapper .top-header-wrapper {
        border-top: 1px solid var(--grey-200);
    }

        .page-wrapper .top-header-wrapper .top-header {
            flex-direction: column;
            align-items: start;
            gap: 16px;
        }

            .page-wrapper .top-header-wrapper .top-header .action-wrapper {
                width: 100%;
                justify-content: flex-end;
            }

                .page-wrapper .top-header-wrapper .top-header .action-wrapper a {
                    width: 100%;
                }

            .page-wrapper .top-header-wrapper .top-header .mobile {
                display: flex;
            }

            .page-wrapper .top-header-wrapper .top-header .desktop {
                display: none;
            }
}
/* #endregion */

/* #region Flex */
.flex {
    display: flex;
}

.flex-direction-row {
    flex-direction: row;
}

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

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

.gap-12 {
    gap: 12px;
}
/* #endregion */

/* #region One column */
#main-column-wrapper main {
    display: flex;
    min-height: 100vh;
    justify-content: center;
    padding-top: 96px;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 32px;
}

#main-column-wrapper .content-column-wrapper {
    width: 360px;
}

    #main-column-wrapper .content-column-wrapper.wide {
        width: 720px;
    }

#main-column-wrapper .content-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    #main-column-wrapper .content-column h1 {
        text-align: center;
    }

    #main-column-wrapper .content-column .subtitle {
        display: block;
        margin-top: 12px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: var(--grey-600);
        text-align: center;
    }

    #main-column-wrapper .content-column form {
        width: 100%;
    }

        #main-column-wrapper .content-column form button {
            width: 100%;
        }

    #main-column-wrapper .content-column a.back {
        color: var(--grey-600);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        display: flex;
        gap: 8px;
    }

        #main-column-wrapper .content-column a.back .url-icon-wrapper {
            height: 20px;
            width: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

            #main-column-wrapper .content-column a.back .url-icon-wrapper .icon {
                background: var(--grey-600);
                height: 20px;
                width: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-shrink: 0;
            }

        #main-column-wrapper .content-column a.back:hover {
            color: var(--grey-900);
        }

            #main-column-wrapper .content-column a.back:hover .url-icon-wrapper .icon {
                background: var(--grey-900);
            }

    #main-column-wrapper .content-column .icon-wrapper-2 {
        height: 32px;
        width: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        #main-column-wrapper .content-column .icon-wrapper-2 .icon {
            background: var(--grey-500);
            height: 32px;
            width: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
        }



#main-column-wrapper .icon-wrapper {
    box-sizing: content-box;
    background: var(--primary-100);
    border: 8px solid var(--primary-50);
    border-radius: 28px;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

    #main-column-wrapper .icon-wrapper .icon {
        background: var(--primary-600);
        height: 40px;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }


@media (max-width: 767px) {
    #main-column-wrapper main {
        padding-top: 48px;
    }

    #main-column-wrapper .content-column-wrapper {
        width: 100%;
    }

        #main-column-wrapper .content-column-wrapper.wide {
            width: 100%;
        }
}

/* #endregion */

/* #region Two columns */
#main-two-columns-wrapper {
    display: flex;
    min-height: 100vh;
}

    #main-two-columns-wrapper #column-left {
        flex-basis: 0;
        flex-grow: 1;
        background: var(--white);
        display: flex;
        flex-direction: column;
    }

        #main-two-columns-wrapper #column-left main {
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 32px;
        }

        #main-two-columns-wrapper #column-left footer {
            padding-top: 48px;
            padding-left: 32px;
            padding-bottom: 32px;
            padding-right: 32px;
        }

            #main-two-columns-wrapper #column-left footer .copyright {
                color: var(--grey-600);
                font-size: 14px;
                line-height: 20px;
                font-weight: 400;
            }

    #main-two-columns-wrapper #column-right {
        flex-basis: 0;
        flex-grow: 1;
        background: var(--grey-100);
        position: relative;
    }

        #main-two-columns-wrapper #column-right .logo {
            position: sticky;
            top: 50%;
            left: 75%;
            transform: translate(-50%, -25%);
        }

    #main-two-columns-wrapper .content-column-wrapper {
        width: 360px;
    }

        #main-two-columns-wrapper .content-column-wrapper .logo {
            display: block;
            max-height: 32px;
            max-width: 248px;
            margin-bottom: 80px;
        }

        #main-two-columns-wrapper .content-column-wrapper .title-wrapper {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 12px;
        }

            #main-two-columns-wrapper .content-column-wrapper .title-wrapper .subtitle {
                font-weight: 400;
                font-size: 16px;
                line-height: 24px;
                color: var(--grey-600);
            }

        #main-two-columns-wrapper .content-column-wrapper form button {
            width: 100%;
        }

        #main-two-columns-wrapper .content-column-wrapper .link-wrapper {
            display: flex;
            justify-content: center;
        }

@media (max-width: 1400px) {
    #main-two-columns-wrapper #column-left {
        flex-basis: 70%;
    }

    #main-two-columns-wrapper #column-right {
        flex-basis: 30%;
    }

        #main-two-columns-wrapper #column-right .logo {
            position: sticky;
            top: 50%;
            left: 85%;
            transform: translate(-50%, -15%);
        }
}

@media (max-width: 991px) {
    #main-two-columns-wrapper #column-right {
        display: none;
    }
}

@media (max-width: 767px) {
    #main-two-columns-wrapper .content-column-wrapper {
        width: 100%;
    }
}
/* #endregion */

/* #region Tabs */
.tab-wrapper {
}

    .tab-wrapper .tab-headers {
        display: flex;
        gap: 16px;
        border-bottom: 1px solid var(--grey-200);
        margin-bottom: 16px;
    }

        .tab-wrapper .tab-headers.mb-32 {
            margin-bottom: 32px;
        }

        .tab-wrapper .tab-headers.scrollable {
            white-space: nowrap;
            overflow-x: auto;
        }


        .tab-wrapper .tab-headers.full-width .tab-header {
            flex-basis: 0;
            flex-grow: 1;
        }

        .tab-wrapper .tab-headers .tab-header {
            display: flex;
            padding: 0px 4px;
            justify-content: center;
            align-items: start;
            min-height: 32px;
            cursor: pointer;
            color: var(--grey-500);
            font-weight: 600;
            font-size: 14px;
            line-height: 20px;
        }

            .tab-wrapper .tab-headers .tab-header:not(.active):hover {
                border-bottom: 2px solid var(--primary-200);
            }

            .tab-wrapper .tab-headers .tab-header.active {
                border-bottom: 2px solid var(--primary-700);
                color: var(--primary-700);
            }

    .tab-wrapper .tab-content {
        display: none;
    }

        .tab-wrapper .tab-content.active {
            display: block;
        }

/* #endregion */

/* #region Icons */
.icon {
    background: var(--grey-600);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .icon.contain {
        mask-size: contain !important;
    }

    .icon.size-em {
        mask-size: 1em !important;
        width: 1em !important;
        height: 1em !important;
    }

    .icon.vehicle {
        -webkit-mask: url(/assets/icons/vehicle.svg) no-repeat center;
        mask: url(/assets/icons/vehicle.svg) no-repeat center;
    }

    .icon.api {
        -webkit-mask: url(/assets/icons/cloud.svg) no-repeat center;
        mask: url(/assets/icons/cloud.svg) no-repeat center;
    }

    .icon.language {
        -webkit-mask: url(/assets/icons/language.svg) no-repeat center;
        mask: url(/assets/icons/language.svg) no-repeat center;
    }

    .icon.search {
        -webkit-mask: url(/assets/icons/search.svg) no-repeat center;
        mask: url(/assets/icons/search.svg) no-repeat center;
    }

    .icon.keeporcancel {
        -webkit-mask: url(/assets/icons/keep-or-cancels.svg) no-repeat center;
        mask: url(/assets/icons/keep-or-cancels.svg) no-repeat center;
    }

    .icon.documents {
        -webkit-mask: url(/assets/icons/documents.svg) no-repeat center;
        mask: url(/assets/icons/documents.svg) no-repeat center;
    }

    .icon.orders {
        -webkit-mask: url(/assets/icons/orders.svg) no-repeat center;
        mask: url(/assets/icons/orders.svg) no-repeat center;
    }

    .icon.file {
        -webkit-mask: url(/assets/icons/file.svg) no-repeat center;
        mask: url(/assets/icons/file.svg) no-repeat center;
    }

    .icon.view {
        -webkit-mask: url(/assets/icons/view.svg) no-repeat center;
        mask: url(/assets/icons/view.svg) no-repeat center;
    }

    .icon.lookup {
        -webkit-mask: url(/assets/icons/lookup.svg) no-repeat center;
        mask: url(/assets/icons/lookup.svg) no-repeat center;
    }

    .icon.loader {
        -webkit-mask: url(/assets/icons/loader.svg) no-repeat center;
        mask: url(/assets/icons/loader.svg) no-repeat center;
    }

    .icon.plus {
        -webkit-mask: url(/assets/icons/plus.svg) no-repeat center;
        mask: url(/assets/icons/plus.svg) no-repeat center;
    }

    .icon.left {
        -webkit-mask: url(/assets/icons/arrow-left.svg) no-repeat center;
        mask: url(/assets/icons/arrow-left.svg) no-repeat center;
    }

    .icon.dots-vertical {
        -webkit-mask: url(/assets/icons/dots-vertical.svg) no-repeat center;
        mask: url(/assets/icons/dots-vertical.svg) no-repeat center;
    }

    .icon.switch {
        -webkit-mask: url(/assets/icons/switch.svg) no-repeat center;
        mask: url(/assets/icons/switch.svg) no-repeat center;
    }

    .icon.network {
        -webkit-mask: url(/assets/icons/network.svg) no-repeat center;
        mask: url(/assets/icons/network.svg) no-repeat center;
    }

    .icon.trash {
        -webkit-mask: url(/assets/icons/trash.svg) no-repeat center;
        mask: url(/assets/icons/trash.svg) no-repeat center;
    }

    .icon.cart {
        -webkit-mask: url(/assets/icons/cart.svg) no-repeat center;
        mask: url(/assets/icons/cart.svg) no-repeat center;
    }

    .icon.excel {
        -webkit-mask: url(/assets/icons/excel.svg) no-repeat center;
        mask: url(/assets/icons/excel.svg) no-repeat center;
    }

    .icon.key {
        -webkit-mask: url(/assets/icons/key.svg) no-repeat center;
        mask: url(/assets/icons/key.svg) no-repeat center;
    }

    .icon.arrow-left {
        -webkit-mask: url(/assets/icons/arrow-left.svg) no-repeat center;
        mask: url(/assets/icons/arrow-left.svg) no-repeat center;
    }

    .icon.arrow-right {
        -webkit-mask: url(/assets/icons/arrow-right.svg) no-repeat center;
        mask: url(/assets/icons/arrow-right.svg) no-repeat center;
    }

    .icon.upload {
        -webkit-mask: url(/assets/icons/upload.svg) no-repeat center;
        mask: url(/assets/icons/upload.svg) no-repeat center;
    }

    .icon.question {
        -webkit-mask: url(/assets/icons/question-mark.svg) no-repeat center;
        mask: url(/assets/icons/question-mark.svg) no-repeat center;
    }

    .icon.chevron-right {
        -webkit-mask: url(/assets/icons/chevron-right.svg) no-repeat center;
        mask: url(/assets/icons/chevron-right.svg) no-repeat center;
    }

    .icon.chevron-down {
        -webkit-mask: url(/assets/icons/chevron-down.svg) no-repeat center;
        mask: url(/assets/icons/chevron-down.svg) no-repeat center;
    }

    .icon.chevron-up {
        -webkit-mask: url(/assets/icons/chevron-up.svg) no-repeat center;
        mask: url(/assets/icons/chevron-up.svg) no-repeat center;
    }

    .icon.clock {
        -webkit-mask: url(/assets/icons/clock.svg) no-repeat center;
        mask: url(/assets/icons/clock.svg) no-repeat center;
    }

    .icon.promo {
        -webkit-mask: url(/assets/icons/promo.svg) no-repeat center;
        mask: url(/assets/icons/promo.svg) no-repeat center;
    }

    .icon.edit {
        -webkit-mask: url(/assets/icons/edit.svg) no-repeat center;
        mask: url(/assets/icons/edit.svg) no-repeat center;
    }

    .icon.file-download {
        -webkit-mask: url(/assets/icons/file-download.svg) no-repeat center;
        mask: url(/assets/icons/file-download.svg) no-repeat center;
    }

    .icon.help {
        -webkit-mask: url(/assets/icons/help.svg) no-repeat center;
        mask: url(/assets/icons/help.svg) no-repeat center;
    }

    .icon.align-right {
        -webkit-mask: url(/assets/icons/align-right.svg) no-repeat center;
        mask: url(/assets/icons/align-right.svg) no-repeat center;
    }

    .icon.align-left {
        -webkit-mask: url(/assets/icons/align-left.svg) no-repeat center;
        mask: url(/assets/icons/align-left.svg) no-repeat center;
    }

    .icon.user-left {
        -webkit-mask: url(/assets/icons/user-left.svg) no-repeat center;
        mask: url(/assets/icons/user-left.svg) no-repeat center;
    }

    .icon.toastr-error {
        -webkit-mask: url(/assets/icons/toastr-error.svg) no-repeat center;
        mask: url(/assets/icons/toastr-error.svg) no-repeat center;
    }

    .icon.close-small {
        -webkit-mask: url(/assets/icons/close-small.svg) no-repeat center;
        mask: url(/assets/icons/close-small.svg) no-repeat center;
    }

    .icon.copy {
        -webkit-mask: url(/assets/icons/copy.svg) no-repeat center;
        mask: url(/assets/icons/copy.svg) no-repeat center;
    }

    .icon.eye {
        -webkit-mask: url(/assets/icons/eye.svg) no-repeat center;
        mask: url(/assets/icons/eye.svg) no-repeat center;
    }

    .icon.eye-off {
        -webkit-mask: url(/assets/icons/eye-off.svg) no-repeat center;
        mask: url(/assets/icons/eye-off.svg) no-repeat center;
    }

    .icon.settings {
        -webkit-mask: url(/assets/icons/settings.svg) no-repeat center;
        mask: url(/assets/icons/settings.svg) no-repeat center;
    }

    .icon.truck {
        -webkit-mask: url(/assets/icons/truck.svg) no-repeat center;
        mask: url(/assets/icons/truck.svg) no-repeat center;
    }

/* #endregion */

/* #region Toastr */
#toast-container {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
}

.toast-top-right {
    top: 24px;
    right: 24px;
}

.toast-bottom-right {
    bottom: 24px;
    right: 24px;
}

#toast-container * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#toast-container > div {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    margin: 0 0 12px;
    padding: 48px 16px 16px 16px;
    width: 300px;
    border-radius: 12px;
    box-shadow: 0px 12px 16px -4px #10182814;
}

.toast {
    background-color: var(--white);
    border: 1px solid var(--grey-100);
}

.toast-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--grey-900);
    padding-bottom: 4px;
}

.toast-message {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    font-weight: 400;
    font-size: 14px;
    color: var(--grey-600);
}

.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    background-color: #000;
    opacity: 0.2;
}

.toast-close-button {
    position: absolute;
    width: 36px;
    height: 36px;
    float: right;
    right: 8px;
    top: 10px;
    background: red;
}

#toast-container > div:hover {
    cursor: pointer;
}

button.toast-close-button {
    cursor: pointer;
    border: 0;
    -webkit-appearance: none;
    visibility: hidden;
}

    button.toast-close-button::before {
        display: block;
        content: url('/assets/icons/close-small.svg');
        visibility: visible;
        position: absolute;
        top: 10px;
        left: 12px;
    }

.toast-close-button:focus, .toast-close-button:hover {
    opacity: .4;
}

.toast::after {
}

.toast.toast-error {
    background: var(--error-25);
    border: 1px solid var(--error-100);
}

    .toast.toast-error .toast-title {
        color: var(--error-700);
    }

    .toast.toast-error .toast-message {
        color: var(--error-700);
    }

    .toast.toast-error::before {
        background: var(--error-100);
        border-color: var(--error-50);
    }

    .toast.toast-error::after {
        content: url('/assets/icons/toastr-error.svg');
        display: block;
        position: absolute;
        top: 16px;
        left: 16px;
    }

    .toast.toast-error .toast-progress {
        background-color: var(--error-500);
    }

.toast.toast-success {
    background: var(--success-25);
    border: 1px solid var(--success-100);
}

    .toast.toast-success .toast-title {
        color: var(--success-700);
    }

    .toast.toast-success .toast-message {
        color: var(--success-700);
    }

    .toast.toast-success::before {
        background: var(--success-100);
        border-color: var(--success-50);
    }

    .toast.toast-success::after {
        content: url('/assets/icons/toastr-success.svg');
        display: block;
        position: absolute;
        top: 16px;
        left: 16px;
    }

    .toast.toast-success .toast-progress {
        background-color: var(--success-500);
    }

.toast.toast-info {
    background: var(--info-25);
    border: 1px solid var(--info-100);
}

    .toast.toast-info .toast-title {
        color: var(--info-700);
    }

    .toast.toast-info .toast-message {
        color: var(--info-600);
    }

    .toast.toast-info::before {
        background: var(--info-100);
        border-color: var(--info-50);
    }

    .toast.toast-info::after {
        content: url('/assets/icons/toastr-info.svg');
        display: block;
        position: absolute;
        top: 16px;
        left: 16px;
    }

    .toast.toast-info .toast-progress {
        background-color: var(--info-500);
    }

.toast.toast-warning {
    background: var(--warning-25);
    border: 1px solid var(--warning-100);
}

    .toast.toast-warning .toast-title {
        color: var(--warning-700);
    }

    .toast.toast-warning .toast-message {
        color: var(--warning-600);
    }


    .toast.toast-warning::before {
        background: var(--warning-100);
        border-color: var(--warning-50);
    }

    .toast.toast-warning::after {
        content: url('/assets/icons/toastr-warning.svg');
        display: block;
        position: absolute;
        top: 16px;
        left: 16px;
    }

    .toast.toast-warning .toast-progress {
        background-color: var(--warning-500);
    }

@media (max-width: 767px) {
    #toast-container > div {
        width: 100%;
    }

    .toast-top-right {
        top: unset;
        bottom: 24px;
        right: 24px;
        left: 24px;
    }

    .toast-bottom-right {
        top: unset;
        bottom: 24px;
        right: 24px;
        left: 24px;
    }
}

/* #endregion */

/* #region DataTable */
/* #region Card and wrapper */
.table-card {
    padding: 0;
    position: relative;
}

    .table-card .title-wrapper {
        padding: 20px 24px;
    }

    .table-card .title {
        font-weight: 600;
        font-size: 18px;
        line-height: 28px;
        color: var(--grey-900);
    }

    .table-card .top-search {
        position: absolute;
        top: -63px;
        right: 0;
        display: flex;
        gap: 16px;
    }

.table-wrapper {
    overflow-x: auto;
}

    .table-wrapper::-webkit-scrollbar {
        width: 12px;
    }

    .table-wrapper::-webkit-scrollbar-track {
        background: none;
    }

    .table-wrapper::-webkit-scrollbar-thumb {
        background-color: var(--grey-300);
        border-radius: 20px;
        border: 3px solid #FFFFFFFF;
    }

.table-card.card-no-title .table-wrapper {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.table-wrapper .action-wrapper {
    display: flex;
    justify-content: flex-end;
}

    .table-wrapper .action-wrapper.gap-12 {
        gap: 12px;
    }

    .table-wrapper .action-wrapper .action {
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 40px;
        white-space: nowrap;
    }

        .table-wrapper .action-wrapper .action.highlighted {
            background: var(--grey-100);
            margin-right: 12px;
        }


        .table-wrapper .action-wrapper .action:hover {
            background: var(--grey-200);
            cursor: pointer;
        }

.table-wrapper tr.loading .action-wrapper .action:hover {
    background: none;
    cursor: initial;
}

.table-wrapper .action-wrapper .action .icon {
    background: var(--grey-700);
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-wrapper .action-wrapper .action .text {
    color: var(--grey-600);
    padding-left: 12px;
    padding-right: 12px;
}

.table-wrapper .action-wrapper .action .icon + .text {
    padding-left: 0px;
    padding-right: 12px;
}

.table-wrapper .action-wrapper .action.action-button {
    min-width: 40px;
    width: auto;
}

.table-wrapper .action-wrapper .action.action-button {
    min-width: 40px;
    width: auto;
    background: var(--grey-200);
    border: none;
    transition: background 0.1s linear;
    outline-color: var(--primary-200);
}

    .table-wrapper .action-wrapper .action.action-button:hover {
        background: var(--grey-300);
    }

    .table-wrapper .action-wrapper .action.action-button.ml-8 {
        margin-left: 8px;
    }

    .table-wrapper .action-wrapper .action.action-button .text.mr-8 {
        margin-right: 8px;
    }

    .table-wrapper .action-wrapper .action.action-button .text.ml-8 {
        margin-left: 8px;
    }

.table-wrapper .icon-wrapper {
    height: 40px;
    width: 40px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .table-wrapper .icon-wrapper .icon {
        background: var(--grey-700);
        height: 40px;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .table-wrapper .icon-wrapper .icon.grey-300 {
            background: var(--grey-300);
        }

.table-wrapper a .icon-wrapper {
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

    .table-wrapper a .icon-wrapper .icon {
        height: 20px;
        width: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

/* #endregion */

/* #region Table head */
table.dataTable > thead > tr > th {
    border-top: 1px solid var(--grey-200);
    border-bottom: 1px solid var(--grey-200);
    background: var(--grey-50);
    padding: 12px 16px;
}

table.dataTable th.dt-left {
    text-align: left !important;
}

table.dataTable th.dt-right {
    text-align: right !important;
}

.table-card.card-no-title table.dataTable > thead > tr > th {
    border-top: none;
    vertical-align: middle;
}

    .table-card.card-no-title table.dataTable > thead > tr > th:first-child {
        border-top-left-radius: 12px;
    }

    .table-card.card-no-title table.dataTable > thead > tr > th:last-child {
        border-top-right-radius: 12px;
    }

table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc, table.dataTable thead > tr > td.dt-orderable-asc, table.dataTable thead > tr > td.dt-orderable-desc {
    cursor: pointer;
}

    table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover, table.dataTable thead > tr > td.dt-orderable-asc:hover, table.dataTable thead > tr > td.dt-orderable-desc:hover {
        outline: 2px solid var(--grey-200);
    }

table.dataTable thead th .dt-column-title {
    font-weight: 500;
    color: var(--grey-600);
    font-size: 12px;
    line-height: 18px;
}
/* #endregion */

/* #region Table rows */
table.dataTable > tbody > tr > td {
    padding: 16px;
    background: var(--white);
    border-bottom: 1px solid var(--grey-200);
    vertical-align: middle;
    color: var(--grey-600);
}

    table.dataTable > tbody > tr > td.table-title {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
    }

    table.dataTable > tbody > tr > td .hint {
        font-weight: 400;
        color: var(--primary-600);
        margin-top: 2px;
        display: block;
        width: fit-content;
        font-size: 12px;
    }

        table.dataTable > tbody > tr > td .hint.hint-error {
            color: var(--error-600);
        }

    table.dataTable > tbody > tr > td .small {
        font-size: 12px;
        display: block;
    }

table.dataTable td.dt-left {
    text-align: left !important;
}

table.dataTable td.dt-right {
    text-align: right !important;
}

table.dataTable > tbody > tr > td .table-icon-wrapper {
    background: var(--primary-100);
    border-radius: 28px;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

    table.dataTable > tbody > tr > td .table-icon-wrapper .icon {
        background: var(--primary-600);
        height: 40px;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

table.dataTable > tbody > tr:hover > td {
    background: var(--grey-50);
}

table.dataTable > tbody > tr.loading {
    position: relative;
}

    table.dataTable > tbody > tr.loading::after {
        content: '';
        position: absolute;
        top: calc(50% - 15px);
        left: calc(50% - 15px);
        transform: translate(-50%, -50%);
        width: 30px;
        height: 30px;
        border: 3px solid rgba(0, 0, 0, 0.2);
        border-top: 3px solid var(--primary-600);
        border-radius: 50%;
        animation: spin 2s linear infinite;
    }

    table.dataTable > tbody > tr.loading > td {
        opacity: 0.5;
        background: var(--primary-100);
    }

    table.dataTable > tbody > tr.loading:hover > td {
        background: var(--primary-100);
    }


div.dt-container.dt-empty-footer tbody > tr:last-child > * {
    border-bottom: 1px solid var(--grey-200);
}


div.dt-container:not(:has(.bottom-wrapper)) table.dataTable tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

div.dt-container:not(:has(.bottom-wrapper)) table.dataTable tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

div.dt-container:not(:has(.bottom-wrapper)) table.dataTable tbody tr:last-child td {
    border-bottom: 0px;
}

div.dt-container:has(table.dataTable) .bottom-wrapper {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

table.dataTable.round-bottom tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

table.dataTable.round-bottom tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

table.dataTable.round-bottom tbody tr:last-child td {
    border-bottom: 0px;
}

table.dataTable .no-wrap {
    white-space: nowrap;
}

@media (max-width: 991px) {
    table.dataTable td.dt-empty {
        text-align: left;
        vertical-align: top;
    }
}

/* #endregion */

/* #region Tabble bottom wrapper */
.dt-container .bottom-wrapper {
    background: var(--white);
    padding: 16px;
}

    .dt-container .bottom-wrapper .dt-paging {
        display: flex;
        justify-content: center;
        gap: 2px;
    }

        div.dt-container .dt-paging .dt-paging-button, .dt-container .bottom-wrapper .dt-paging .ellipsis {
            all: unset;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 40px;
            width: 40px;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: var(--grey-600) !important;
            cursor: pointer;
            border-radius: 8px;
            cursor: pointer;
            border: none;
        }

            div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
                border: none;
                color: var(--grey-600) !important;
                cursor: default;
            }

            div.dt-container .dt-paging .dt-paging-button:active {
                outline: none;
                background: var(--grey-100) !important;
                box-shadow: none;
            }

            div.dt-container .dt-paging .dt-paging-button:hover {
                border: none;
                background: var(--grey-100) !important;
                color: var(--grey-600) !important;
            }

            div.dt-container .dt-paging .dt-paging-button:focus {
                outline: 2px solid var(--grey-200);
            }

        .dt-container .bottom-wrapper .dt-paging .dt-paging-button.current {
            background: var(--grey-100);
            color: var(--grey-600) !important;
        }

        .dt-container .bottom-wrapper .dt-paging .dt-paging-button.previous {
            margin-right: auto;
            white-space: nowrap;
            width: auto;
            border: 1px solid var(--grey-300);
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
            line-height: 20px;
            color: var(--grey-700) !important;
            padding: 8px 14px;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

            .dt-container .bottom-wrapper .dt-paging .dt-paging-button.previous::before {
                content: url(/assets/icons/arrow-left-700.svg);
                height: 20px;
                width: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
            }

        .dt-container .bottom-wrapper .dt-paging .dt-paging-button.next {
            margin-left: auto;
            white-space: nowrap;
            width: auto;
            border: 1px solid var(--grey-300);
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
            line-height: 20px;
            color: var(--grey-700) !important;
            padding: 8px 14px;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }


            .dt-container .bottom-wrapper .dt-paging .dt-paging-button.next::after {
                content: url(/assets/icons/arrow-right-700.svg);
                height: 20px;
                width: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
            }

div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active {
    cursor: default;
    opacity: 0.3;
    background: none !important;
    color: var(--grey-700) !important;
    border: 1px solid var(--grey-300);
}


@media (max-width: 991px) {
    .dt-container .bottom-wrapper .dt-paging .dt-paging-button {
        display: none;
    }

    .dt-container .bottom-wrapper .dt-paging .ellipsis {
        display: none;
    }

    .dt-container .bottom-wrapper .dt-paging .dt-paging-button:first-child {
        display: flex;
    }

    .dt-container .bottom-wrapper .dt-paging .dt-paging-button.current {
        display: flex;
    }

    .dt-container .bottom-wrapper .dt-paging .dt-paging-button:last-child {
        display: flex;
    }
}
/* #endregion */

/* #region Searching */
.table-card.mt-search {
    margin-top: 62px;
}

.dt-container .dt-search {
    order: 2;
}

    .dt-container .dt-search label {
        display: none;
    }

div.dt-container .dt-search input {
    margin-left: 0;
    background: var(--white);
    font-family: 'Inter';
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-600);
    line-height: 24px;
    border: 1px solid var(--grey-300);
    border-radius: 8px;
    padding: 10px 14px;
    width: 100%;
}

@media (max-width: 991px) {
    .dt-container .dt-search {
        left: 0;
    }
}
/* #endregion */

/* #endregion */

/* #region Tables */
table.form-group-table {
    width: 100%;
}

    table.form-group-table > thead > tr > th {
        text-align: left;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        color: var(--grey-700);
        padding: 12px 0px;
        border-bottom: 1px solid var(--grey-200);
    }

    table.form-group-table > tbody > tr > td {
        padding: 20px 0px;
        border-bottom: 1px solid var(--grey-200);
    }

    table.form-group-table > tbody > tr:last-child > td {
        border-bottom: none;
    }

    table.form-group-table > tbody > tr > td .icon-wrapper {
        height: 20px;
        width: 20px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    table.form-group-table > tbody > tr > td .icon {
        background: var(--grey-500);
        height: 20px;
        width: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        mask-size: contain;
    }

    table.form-group-table.text-align-top > tbody > tr > td {
        vertical-align: top;
    }

    table.form-group-table .name {
        color: var(--grey-700);
        font-weight: 500;
    }

    table.form-group-table .subtext {
        color: var(--grey-600);
        font-weight: 400;
    }


table.details-table {
}

    table.details-table tr td, th {
        padding: 4px;
    }

        table.details-table tr td:first-of-type {
            font-weight: 500;
            padding-right: 12px;
        }

table.info-table {
}

    table.info-table thead tr th {
        font-weight: 500;
    }

    table.info-table tr td, th {
        padding: 4px;
        text-align: left;
    }

        table.info-table tr td:first-of-type {
            padding-right: 16px;
        }

/* #endregion */

/* #region Empty page */
#empty-page-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 128px;
}

    #empty-page-wrapper.mt-0 {
        margin-top: 0px;
    }

    #empty-page-wrapper .icon-wrapper {
        height: 64px;
        width: 64px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 32px;
    }

        #empty-page-wrapper .icon-wrapper .icon {
            background: var(--grey-300);
            height: 64px;
            width: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            mask-size: contain;
        }

    #empty-page-wrapper .title {
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        color: var(--grey-700);
        margin-bottom: 8px;
        text-align: center;
    }

    #empty-page-wrapper .subtitle {
        color: var(--grey-500);
        text-align: center;
    }
/* #endregion */

/* #region Presentation mode */
#presentation-mode-container {
    position: fixed;
    right: 24px;
    bottom: 24px;
}

    #presentation-mode-container button {
        background: var(--primary-200);
        border-radius: 999px;
        height: 32px;
        width: 32px;
        border: none;
        outline: none;
    }

        #presentation-mode-container button:hover {
            background: var(--primary-300);
            cursor: pointer;
        }

        #presentation-mode-container button.enabled {
            background: var(--primary-500);
        }
/* #endregion */

/* #region Tooltip */
.tooltip {
    display: none;
    position: absolute;
    background: var(--grey-700);
    color: var(--white);
    padding: 8px 12px;
    border-radius: 4px;
}

    .tooltip .title {
        font-size: 12px;
    }

    .tooltip .value {
        font-size: 14px;
        font-weight: 500;
    }
/* #endregion */

/* #region Sidebar shoppingcart */
#sidebar-right-wrapper.sidebar-shoppingcart .collapsed-content .shoppingcart-collapsed {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    width: 80px;
}

    #sidebar-right-wrapper.sidebar-shoppingcart .collapsed-content .shoppingcart-collapsed .cart-info {
        padding: 16px;
        border-radius: 999px;
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        font-size: 18px;
        line-height: 24px;
        font-weight: 600;
        color: var(--grey-700);
    }

        #sidebar-right-wrapper.sidebar-shoppingcart .collapsed-content .shoppingcart-collapsed .cart-info .icon-wrapper {
            height: 20px;
            width: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            #sidebar-right-wrapper.sidebar-shoppingcart .collapsed-content .shoppingcart-collapsed .cart-info .icon-wrapper .icon {
                background: var(--grey-900);
                height: 20px;
                width: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

    #sidebar-right-wrapper.sidebar-shoppingcart .collapsed-content .shoppingcart-collapsed .hint-text {
        display: block;
        margin-top: 18px;
        flex-grow: 1;
        writing-mode: vertical-rl;
        text-align: center;
        color: var(--grey-600);
    }


#sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    #sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart #empty-page-wrapper {
        flex-grow: 1;
        justify-content: center;
        margin-top: 0;
    }

    #sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart .items {
        flex-grow: 1;
        overflow-y: auto;
    }

        #sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart .items .group-header {
            display: block;
            font-size: 12px;
            margin-top: 32px;
            padding: 0px 24px;
            color: var(--grey-500);
            font-weight: 600;
        }

            #sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart .items .group-header:first-of-type {
                margin-top: 8px;
            }

        #sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart .items .item {
            position: relative;
            display: flex;
            justify-content: space-between;
            gap: 8px;
            border-top: 1px solid var(--grey-200);
            padding: 16px 24px;
        }

            #sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart .items .item.disabled {
                opacity: 0.5;
                background: var(--grey-200);
            }

            #sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart .items .item:not(.disabled):not(.loading):hover {
                background: var(--grey-100);
            }

            #sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart .items .item.loading {
                opacity: 0.5;
                background: var(--primary-100);
            }

                #sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart .items .item.loading::after {
                    content: '';
                    position: absolute;
                    top: calc(50% - 15px);
                    left: calc(50% - 15px);
                    transform: translate(-50%, -50%);
                    width: 30px;
                    height: 30px;
                    border: 3px solid rgba(0, 0, 0, 0.2);
                    border-top: 3px solid var(--primary-600);
                    border-radius: 50%;
                    animation: spin 2s linear infinite;
                }


        #sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart .items .items-group .item:first-of-type {
            border-top: none;
        }


        #sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart .items .item .description {
            display: block;
            margin-top: 2px;
            color: var(--grey-600);
        }

        #sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart .items .item .shipping {
            display: inline-block;
            margin-top: 10px;
            font-size: 12px;
            color: var(--grey-500);
        }

            #sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart .items .item .shipping::before {
                display: inline-block;
                content: '';
                width: 8px;
                height: 8px;
                background: var(--primary-500);
                border-radius: 50%;
                margin-right: 4px;
            }


        #sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart .items .item .right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-end;
            gap: 8px;
        }

        #sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart .items .item .item-quantity {
            width: 50px;
            padding: 5px 7px;
            text-align: right;
        }

    #sidebar-right-wrapper.sidebar-shoppingcart .shoppingcart .buttons {
        padding: 24px;
    }


/* #endregion */

/* #region Hover */
.hover-trigger {
    position: relative;
}

    .hover-trigger .hover-wrapper {
        display: none;
    }

    .hover-trigger:not(.hover-dynamic):hover .hover-wrapper {
        display: block;
        position: absolute;
        z-index: 100;
    }

        .hover-trigger:not(.hover-dynamic):hover .hover-wrapper.hover-wrapper-align-right {
            right: 0;
        }

.hover-wrapper .hover-spacer {
    height: 16px;
}

.hover-wrapper .hover-container {
    background: var(--grey-200);
    border-radius: 8px;
    padding: 16px;
    cursor: initial;
}

    .hover-wrapper .hover-container::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 12px;
        height: 12px;
        background: var(--grey-200);
        z-index: -1;
    }

.hover-wrapper.hover-wrapper-align-right .hover-container::before {
    left: unset;
    right: 16px;
}



.hover-dynamic-container {
    position: absolute;
    z-index: 1000;
}
/* #endregion */

/* #region Generic flexbox*/
.d-flex {
    display: flex;
}

    .d-flex.align-items-center {
        align-items: center;
    }

    .d-flex.justify-content-between {
        justify-content: space-between;
    }

/* #endregion */

/* #region Pages*/
/* #region Register */
@media (min-width: 768px) {
    #main-two-columns-wrapper .page-register {
        width: 600px;
    }
}
/* #endregion */

/* #region Shoppingcart */
.page-shoppingcart table input.reference {
    font-size: 12px;
    line-height: 1.1;
    padding: 8px;
    width: fit-content;
    min-width: auto;
}

.page-shoppingcart table input.quantity {
    width: 64px;
    text-align: right;
    height: 40px;
    padding: 0px 12px;
}

.page-shoppingcart table .price-on-demand {
    color: var(--error-400) !important;
}

.page-shoppingcart table td.info-promo {
    text-align: right;
}

.page-shoppingcart table .promo-price {
    display: block;
    color: var(--success-700) !important;
}

.page-shoppingcart table .promo-availability {
    font-size: 12px;
}


.page-shoppingcart table .your-price-promo-wrapper {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: end;
}

.page-shoppingcart table .your-price-promo {
    color: var(--success-700) !important;
    white-space: nowrap;
}

    .page-shoppingcart table .your-price-promo .icon {
        background: var(--grey-600);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

.page-shoppingcart table .your-price-promo-wrapper + .your-price {
    font-size: 12px;
    white-space: nowrap;
}

.page-shoppingcart .total-disclaimer {
    display: block;
    text-align: center;
    margin-top: 16px;
    color: var(--grey-500);
    font-size: 12px;
}

#cart-alternatives-table .promo-price {
    display: block;
    color: var(--success-700) !important;
}

#cart-alternatives-table .strike-through-price {
    display: block;
    text-decoration: line-through;
}

.alternative .card {
    cursor: pointer;
    color: var(--grey-500);
}

.alternative .alternative-main .main-row {
    display: flex;
    justify-content: space-between;
}

    .alternative .alternative-main .main-row span {
        font-weight: 600;
        color: var(--grey-900);
    }

.alternative .alternative-info {
    margin-top: 8px;
}

    .alternative .alternative-info .info-row {
        display: flex;
        justify-content: space-between;
    }

.alternative .card:hover {
    background: var(--primary-50);
    border-color: var(--primary-100);
    color: var(--primary-500);
}

    .alternative .card:hover .main-row span {
        color: var(--primary-700);
    }

    .alternative .card:hover .main-row span {
        color: var(--primary-700);
    }

.page-shoppingcart .shoppingcart-summary-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

    .page-shoppingcart .shoppingcart-summary-wrapper .info-wrapper {
        margin-bottom: 16px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .page-shoppingcart .shoppingcart-summary-wrapper .price-on-demand-info {
        color: var(--grey-400) !important;
    }

    .page-shoppingcart .shoppingcart-summary-wrapper .promo-price-info {
        color: var(--grey-400) !important;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .page-shoppingcart .shoppingcart-summary-wrapper .promo-price-info .icon {
            background: var(--grey-400) !important;
        }


.page-shoppingcart .totals-summary-wrapper {
    margin-left: auto;
    width: 300px;
}

    .page-shoppingcart .totals-summary-wrapper .totals-summary {
        position: relative;
    }

        .page-shoppingcart .totals-summary-wrapper .totals-summary.loading {
            opacity: 0.5;
        }

            .page-shoppingcart .totals-summary-wrapper .totals-summary.loading::after {
                content: '';
                position: absolute;
                top: calc(50% - 15px);
                left: calc(50% - 15px);
                transform: translate(-50%, -50%);
                width: 30px;
                height: 30px;
                border: 3px solid rgba(0, 0, 0, 0.2);
                border-top: 3px solid var(--primary-600);
                border-radius: 50%;
                animation: spin 2s linear infinite;
            }

#cart-alternatives-table td.selected {
    background: var(--primary-100) !important;
}

#cart-alternatives-table td.oem {
}

    #cart-alternatives-table td.selected .loader.grey-300, #cart-alternatives-table td.oem .loader.grey-300 {
        background: var(--primary-400) !important;
    }

    #cart-alternatives-table td.selected .tag.primary, #cart-alternatives-table td.oem .tag-primary {
        background: var(--primary-600) !important;
        color: white !important;
    }

    #cart-alternatives-table td.selected .action .icon, #cart-alternatives-table td.oem .action .icon {
        background: var(--primary-600) !important;
    }

    #cart-alternatives-table td.selected .action:hover, #cart-alternatives-table td.oem .action:hover {
        background: var(--primary-200) !important;
    }

    #cart-alternatives-table td.selected .action-button, #cart-alternatives-table td.oem .action-button {
        background: var(--primary-600) !important;
    }

        #cart-alternatives-table td.selected .action-button .icon, #cart-alternatives-table td.oem .action-button .icon {
            background: var(--white) !important;
        }

        #cart-alternatives-table td.selected .action-button .text, #cart-alternatives-table td.oem .action-button .text {
            color: var(--white) !important;
        }

        #cart-alternatives-table td.selected .action-button:hover, #cart-alternatives-table td.oem .action-button:hover {
            background: var(--primary-700) !important;
        }

#cart-alternatives-table .price-on-demand {
    color: var(--error-400) !important;
}

/* max width on mobile */
@media (max-width: 575px) {
    .page-shoppingcart .totals-summary-wrapper {
        width: 100%;
    }
}
/* #endregion */

/* #region Tabbed */
.page-tabbed .tab-title-action-wrapper {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.page-tabbed .tab-title-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

    .page-tabbed .tab-title-wrapper .subtitle {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: var(--grey-600);
    }
/* #endregion */

/* #region Price request*/
.page-pricerequest .content-wrapper {
}

.page-pricerequest .subtitle {
    display: block;
    margin-top: 4px;
    color: var(--grey-600);
}

.page-pricerequest .review {
    background: var(--grey-100);
    margin-top: 76px;
    color: var(--grey-600);
    border-radius: 12px;
    padding: 16px 24px;
}

    .page-pricerequest .review .title {
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
        color: var(--grey-600);
    }

    .page-pricerequest .review .subtitle {
        color: var(--grey-500);
    }

    .page-pricerequest .review .info-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
    }

        .page-pricerequest .review .info-row .icon-wrapper {
            height: 18px;
            width: 18px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: content-box;
            flex-shrink: 0;
        }

            .page-pricerequest .review .info-row .icon-wrapper .icon {
                background: var(--grey-500);
                height: 18px;
                width: 18px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-shrink: 0;
                mask-size: contain;
            }

    .page-pricerequest .review .info-row-wrapper .info-row:last-of-type {
        margin-bottom: 0px;
    }

    .page-pricerequest .review .info-row span:first-of-type {
        font-weight: 500;
    }

    .page-pricerequest .review .article-row-wrapper .article-info-title {
        font-weight: 500;
        display: block;
        margin-bottom: 4px;
    }

    .page-pricerequest .review .article-row-wrapper .article-info-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
    }

        .page-pricerequest .review .article-row-wrapper .article-info-row .icon-wrapper {
            height: 18px;
            width: 18px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: content-box;
            flex-shrink: 0;
        }

            .page-pricerequest .review .article-row-wrapper .article-info-row .icon-wrapper .icon {
                background: var(--grey-500);
                height: 18px;
                width: 18px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-shrink: 0;
                mask-size: contain;
            }

        .page-pricerequest .review .article-row-wrapper .article-info-row:last-of-type {
            margin-bottom: 0px;
        }

.page-pricerequest .button-row {
    float: right;
    display: flex;
    gap: 12px;
}

/*brand-conversion-warning*/

.page-pricerequest .form-group.brand-conversion label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-pricerequest .form-group.brand-conversion .icon-wrapper {
    display: none;
}

.page-pricerequest .form-group.brand-conversion.brand-conversion-warning select {
    background-color: var(--warning-100);
}

.page-pricerequest .form-group.brand-conversion.brand-conversion-warning .icon-wrapper {
    height: 15px;
    width: 15px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: content-box;
    flex-shrink: 0;
}

    .page-pricerequest .form-group.brand-conversion.brand-conversion-warning .icon-wrapper .icon {
        background: var(--grey-500);
        height: 15px;
        width: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        mask-size: contain;
    }



/* #endregion*/

/* #region Provider 1 */
.page-provider1 .provider1-wrapper {
    display: flex;
    height: calc(100vh - 64px);
    flex-direction: column;
}

.page-provider1 .provider1-header {
    display: flex;
    margin-bottom: 16px;
    gap: 32px;
}

    .page-provider1 .provider1-header .left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }


    .page-provider1 .provider1-header .right {
        margin-left: auto;
    }

        .page-provider1 .provider1-header .right .vehicle {
            display: flex;
            flex-direction: column;
            text-align: right;
            color: var(--grey-500);
        }

            .page-provider1 .provider1-header .right .vehicle .vin {
                display: block;
                font-size: 12px;
                margin-top: 8px;
            }

    .page-provider1 .provider1-header .title {
        font-size: 18px;
        line-height: 28px;
        font-weight: 600;
        margin-top: 24px;
    }


.page-provider1 .content-wrapper {
    flex-grow: 1;
    display: flex;
    overflow: hidden;
}

    /* #region Card 1 */
    .page-provider1 .content-wrapper .provider1-card {
        padding: 0px;
        margin-bottom: 0px;
        display: flex;
        flex-grow: 1;
        overflow: hidden;
    }

        .page-provider1 .content-wrapper .provider1-card .content-left {
            position: relative;
            width: 350px;
            border-right: 1px solid var(--grey-200);
            padding: 8px;
            overflow-y: auto;
            flex-shrink: 0;
        }

        .page-provider1 .content-wrapper .provider1-card .content-right {
            flex-grow: 1;
            display: flex;
            overflow-y: auto;
        }


.page-provider1 .categories-tree {
    padding-bottom: 24px;
}

    .page-provider1 .categories-tree .category {
        display: flex;
        align-items: start;
        gap: 10px;
        padding: 8px;
        border-radius: 4px;
    }

        .page-provider1 .categories-tree .category:hover {
            background: var(--grey-50);
            cursor: pointer;
        }


        .page-provider1 .categories-tree .category .code {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            background: var(--grey-100);
            color: var(--grey-600);
            font-size: 12px;
            border-radius: 4px;
            overflow: hidden;
            flex-shrink: 0;
            padding: 2px 8px;
        }


        .page-provider1 .categories-tree .category .name {
            min-height: 24px;
            display: flex;
            align-items: center;
            padding-right: 8px;
        }

        .page-provider1 .categories-tree .category .icon-submenu {
            margin-left: auto;
            flex-shrink: 0;
            height: 24px;
            width: 16px;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

            .page-provider1 .categories-tree .category .icon-submenu .chevron {
                height: 16px;
                width: 16px;
                background: var(--grey-500);
                display: flex;
                justify-content: center;
                align-items: center;
                mask: url(/assets/icons/chevron-down-small.svg) no-repeat center;
                transition: transform 0.2s ease-out;
            }

    .page-provider1 .categories-tree li.has-submenu:not(.open) ul {
        height: 0;
    }

    .page-provider1 .categories-tree li.has-submenu.open > .category .icon-submenu .chevron {
        transform: rotate(180deg);
    }


    .page-provider1 .categories-tree > ul li ul {
        position: relative;
        padding-left: 24px;
        overflow: hidden;
        transition: height 0.2s ease-out;
    }

        .page-provider1 .categories-tree > ul li ul::before {
            content: '';
            display: block;
            position: absolute;
            background: var(--grey-200);
            width: 1px;
            top: 0;
            bottom: 0;
            left: 16px;
        }

    .page-provider1 .categories-tree > ul > li > ul {
        padding-left: 42px;
    }

        .page-provider1 .categories-tree > ul > li > ul::before {
            content: '';
            display: block;
            position: absolute;
            background: var(--grey-200);
            width: 1px;
            top: 0;
            bottom: 0;
            left: 23px;
        }

    .page-provider1 .categories-tree > ul li.selected-tree > .category .name {
        font-weight: bold;
    }

    .page-provider1 .categories-tree > ul li.selected > .category .name {
        font-weight: bold;
    }

    .page-provider1 .categories-tree > ul li ul.submenu-loader li {
        padding: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--grey-400);
    }

    .page-provider1 .categories-tree > ul li ul.submenu-loader .icon-wrapper {
        height: 15px;
        width: 15px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .page-provider1 .categories-tree > ul li ul.submenu-loader .icon-wrapper .icon {
            background: var(--grey-400);
            height: 15px;
            width: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
        }


.page-provider1 .provider1-card .content-right .exploded-views-no-category {
    display: flex;
    background: var(--grey-50);
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

    .page-provider1 .provider1-card .content-right .exploded-views-no-category .title {
        display: block;
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        color: var(--grey-400);
        margin-bottom: 8px;
        text-align: center;
    }

    .page-provider1 .provider1-card .content-right .exploded-views-no-category .subtitle {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: var(--grey-400);
        text-align: center;
    }

.page-provider1 .provider1-card .content-right .exploded-views-no-drawings {
    display: flex;
    background: var(--grey-50);
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    padding: 32px;
}

    .page-provider1 .provider1-card .content-right .exploded-views-no-drawings .title {
        display: block;
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        color: var(--grey-400);
        margin-bottom: 8px;
        text-align: center;
    }

    .page-provider1 .provider1-card .content-right .exploded-views-no-drawings .subtitle {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: var(--grey-400);
        text-align: center;
    }

.page-provider1 .provider1-card .content-right #empty-page-wrapper.exploded-views-loader-wrapper {
    margin-top: 0px;
    flex-grow: 1;
    justify-content: center;
}

.page-provider1 .provider1-card .content-right .exploded-views-wrapper {
    width: 100%;
    min-height: calc(100% - 60px);
    padding-bottom: 24px;
}

    .page-provider1 .provider1-card .content-right .exploded-views-wrapper:has(.exploded-views-no-drawings) {
        display: flex;
        padding-bottom: 0px;
    }

    .page-provider1 .provider1-card .content-right .exploded-views-wrapper .title {
        display: block;
        font-weight: bold;
        margin-bottom: 12px;
    }

    .page-provider1 .provider1-card .content-right .exploded-views-wrapper .container-fluid {
        padding: 16px;
    }

    .page-provider1 .provider1-card .content-right .exploded-views-wrapper .exploded-view-row {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view {
        position: relative;
        width: 100%;
        -ms-flex: 0 0 calc(20% - (16px * 4/5));
        flex: 0 0 calc(20% - (16px * 4/5));
        max-width: calc(20% - (16px * 4/5));
        font-weight: 400;
        font-style: normal;
        color: var(--grey-700);
    }

        .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view .exploded-view-content {
            border: 1px solid var(--grey-200);
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            justify-content: space-between;
        }



            .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view .exploded-view-content .name-wrapper {
                display: flex;
                align-items: start;
                gap: 10px;
                padding: 8px;
                width: 100%;
            }

                .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view .exploded-view-content .name-wrapper .code {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: var(--grey-100);
                    color: var(--grey-600);
                    font-size: 12px;
                    border-radius: 4px;
                    overflow: hidden;
                    flex-shrink: 0;
                    padding: 2px 8px;
                    white-space: nowrap;
                }

                .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view .exploded-view-content .name-wrapper .name {
                    text-align: center;
                    word-break: break-word;
                    text-align: left;
                }

            .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view .exploded-view-content .img-wrapper {
                overflow: hidden;
                border-end-start-radius: 6px;
                border-end-end-radius: 6px;
                width: 100%;
                height: 100%;
            }


                .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view .exploded-view-content .img-wrapper .img-loader {
                    min-height: 150px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 8px;
                    color: var(--grey-400);
                    height: 100%;
                }

                    .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view .exploded-view-content .img-wrapper .img-loader .icon-wrapper {
                        height: 15px;
                        width: 15px;
                        border-radius: 10px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                        .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view .exploded-view-content .img-wrapper .img-loader .icon-wrapper .icon {
                            background: var(--grey-400);
                            height: 15px;
                            width: 15px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }


                .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view .exploded-view-content .img-wrapper img {
                    width: 100%;
                    transition: transform ease-in-out 0.2s;
                }


            .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view .exploded-view-content:hover {
                cursor: pointer;
            }

                .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view .exploded-view-content:hover::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: var(--grey-200);
                    opacity: 0.1;
                }

                .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view .exploded-view-content:hover .img-wrapper img {
                    transform: scale(1.1);
                    transform-origin: center;
                }

            .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view .exploded-view-content .more-available {
                display: flex;
                background: var(--grey-50);
                justify-content: center;
                align-items: center;
                flex-grow: 1;
                flex-direction: column;
                padding: 32px;
                text-align: center;
                border-radius: 6px;
            }

            .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view .exploded-view-content:has(.more-available):hover {
                cursor: initial;
            }

            .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view .exploded-view-content .more-available .title {
                color: var(--grey-400);
            }

            .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view .exploded-view-content .more-available .subtitle {
                color: var(--grey-400);
            }


.page-provider1 .switch-lr {
    display: none;
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    box-shadow: rgba(0, 0, 0, 0.24) 0 0 8px 2px;
}


@media(max-width: 2400px) {
    .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view {
        -ms-flex: 0 0 calc(25% - (16px * 3 / 4));
        flex: 0 0 calc(25% - (16px * 3 / 4));
        max-width: calc(25% - (16px * 3 / 4));
    }
}

@media(max-width: 2100px) {
    .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view {
        -ms-flex: 0 0 calc(33.333333% - (16px * 2 / 3));
        flex: 0 0 calc(33.333333% - (16px * 2 / 3));
        max-width: calc(33.333333% - (16px * 2 / 3));
    }
}

@media(max-width: 1700px) {
    .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view {
        -ms-flex: 0 0 calc(50% - (16px * 1 / 2));
        flex: 0 0 calc(50% - (16px * 1 / 2));
        max-width: calc(50% - (16px * 1 / 2));
    }
}

@media(max-width: 1500px) {
    .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media(max-width: 1400px) {
    .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view {
        -ms-flex: 0 0 calc(50% - (16px * 1 / 2));
        flex: 0 0 calc(50% - (16px * 1 / 2));
        max-width: calc(50% - (16px * 1 / 2));
    }
}

@media(max-width: 1150px) {
    .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media(max-width: 992px) {
    .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view {
        -ms-flex: 0 0 calc(50% - (16px * 1 / 2));
        flex: 0 0 calc(50% - (16px * 1 / 2));
        max-width: calc(50% - (16px * 1 / 2));
    }
}

@media(max-width: 600px) {
    .page-provider1 .provider1-card .content-right .exploded-views-wrapper .col-exploded-view {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* #endregion */

/* #region Card 2*/
.page-provider1 .content-wrapper .provider1-card-drawing {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}

    .page-provider1 .content-wrapper .provider1-card-drawing .content-left {
        position: relative;
        width: 450px;
        border-right: 1px solid var(--grey-200);
        overflow-y: auto;
        flex-shrink: 0;
        background: var(--white);
        border: 1px solid var(--grey-200);
        border-radius: 12px 0px 0px 12px;
    }

    .page-provider1 .content-wrapper .provider1-card-drawing .content-right {
        flex-grow: 1;
        display: flex;
        background: var(--white);
        border: 1px solid var(--grey-200);
        border-left: none;
        border-radius: 0px 12px 12px 0px;
    }

.page-provider1 .content-wrapper .content-left .parts-wrapper {
    display: flex;
    flex-direction: column;
}

    .page-provider1 .content-wrapper .content-left .parts-wrapper .part {
        position: relative;
        display: flex;
        gap: 8px;
        border-bottom: 1px solid var(--grey-200);
        padding: 12px;
    }

        .page-provider1 .content-wrapper .content-left .parts-wrapper .part.loading {
            opacity: 0.5;
            background: var(--primary-100);
        }

            .page-provider1 .content-wrapper .content-left .parts-wrapper .part.loading::after {
                content: '';
                position: absolute;
                top: calc(50% - 15px);
                left: calc(50% - 15px);
                transform: translate(-50%, -50%);
                width: 30px;
                height: 30px;
                border: 3px solid rgba(0, 0, 0, 0.2);
                border-top: 3px solid var(--primary-600);
                border-radius: 50%;
                animation: spin 2s linear infinite;
            }

        .page-provider1 .content-wrapper .content-left .parts-wrapper .part.disabled {
            opacity: 0.5;
            background: var(--grey-200);
        }

            .page-provider1 .content-wrapper .content-left .parts-wrapper .part.disabled .btn {
                cursor: initial;
            }


        .page-provider1 .content-wrapper .content-left .parts-wrapper .part:not(.disabled).hover {
            background: var(--primary-50);
        }


            .page-provider1 .content-wrapper .content-left .parts-wrapper .part:not(.disabled).hover .code {
                background: var(--primary-500);
                color: var(--white);
            }

        .page-provider1 .content-wrapper .content-left .parts-wrapper .part:not(.disabled):hover {
            background: var(--primary-50);
        }

        .page-provider1 .content-wrapper .content-left .parts-wrapper .part:not(.disabled).highlighted {
            background: var(--primary-100);
        }

            .page-provider1 .content-wrapper .content-left .parts-wrapper .part:not(.disabled).highlighted .code {
                background: var(--primary-500);
                color: var(--white);
            }

        .page-provider1 .content-wrapper .content-left .parts-wrapper .part:last-of-type {
            border-bottom: none;
        }

        .page-provider1 .content-wrapper .content-left .parts-wrapper .part .code {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            background: var(--grey-100);
            color: var(--grey-600);
            font-size: 12px;
            border-radius: 4px;
            overflow: hidden;
            flex-shrink: 0;
            padding: 2px 8px;
            align-self: start;
        }

        .page-provider1 .content-wrapper .content-left .parts-wrapper .part .part-info {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

            .page-provider1 .content-wrapper .content-left .parts-wrapper .part .part-info .part-info-line {
                display: flex;
                gap: 8px;
                justify-content: space-between;
            }

            .page-provider1 .content-wrapper .content-left .parts-wrapper .part .part-info .sku {
                font-weight: 500;
            }

            .page-provider1 .content-wrapper .content-left .parts-wrapper .part .part-info .description {
                display: block;
                margin-top: 4px;
                color: var(--grey-600);
            }

            .page-provider1 .content-wrapper .content-left .parts-wrapper .part .part-info .attribute {
                display: block;
                color: var(--grey-500);
                font-size: 12px;
            }

            .page-provider1 .content-wrapper .content-left .parts-wrapper .part .part-info .price-and-cart {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                gap: 8px;
                margin-top: 4px;
            }

                .page-provider1 .content-wrapper .content-left .parts-wrapper .part .part-info .price-and-cart .price .icon-wrapper {
                    height: 15px;
                    width: 15px;
                    border-radius: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                    .page-provider1 .content-wrapper .content-left .parts-wrapper .part .part-info .price-and-cart .price .icon-wrapper .icon {
                        background: var(--grey-700);
                        height: 15px;
                        width: 15px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                .page-provider1 .content-wrapper .content-left .parts-wrapper .part .part-info .price-and-cart .add-to-cart {
                    padding: 5px 8px;
                    font-weight: 500;
                }

.page-provider1 .content-wrapper .provider1-card-drawing .content-right .drawing-wrapper {
    flex-grow: 1;
}

    .page-provider1 .content-wrapper .provider1-card-drawing .content-right .drawing-wrapper .zoomist-container {
        width: 100%;
        max-width: 100%;
        height: 100%;
        border-start-end-radius: 12px;
        border-end-end-radius: 12px;
    }

        .page-provider1 .content-wrapper .provider1-card-drawing .content-right .drawing-wrapper .zoomist-container .hint {
            position: absolute;
            bottom: 16px;
            left: 16px;
            font-size: 12px;
            color: var(--grey-500);
            z-index: 1;
        }

    .page-provider1 .content-wrapper .provider1-card-drawing .content-right .drawing-wrapper .zoomist-wrapper {
        background: var(--grey-25);
        border-start-end-radius: 12px;
        border-end-end-radius: 12px;
    }

    .page-provider1 .content-wrapper .provider1-card-drawing .content-right .drawing-wrapper .zoomist-zoomer {
        border-start-end-radius: 12px;
    }

    .page-provider1 .content-wrapper .provider1-card-drawing .content-right .drawing-wrapper .zoomist-image {
        width: 100%;
        height: 100%;
    }

        .page-provider1 .content-wrapper .provider1-card-drawing .content-right .drawing-wrapper .zoomist-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
        }

.page-provider1 .drawing-wrapper .coordinates {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

    .page-provider1 .drawing-wrapper .coordinates .coordinate {
        position: absolute;
        cursor: pointer;
        border: 2px solid var(--primary-500);
        border-radius: 4px;
        opacity: 0.5;
    }

        .page-provider1 .drawing-wrapper .coordinates .coordinate.hover {
            background: var(--primary-500);
        }

        .page-provider1 .drawing-wrapper .coordinates .coordinate.highlighted {
            background: var(--primary-500);
        }

/* #endregion*/

/* Mobile */
@media (max-width: 991px) {
    .page-provider1 .provider1-wrapper {
        height: auto;
    }

    .page-provider1 .provider1-header {
        flex-direction: column;
        gap: 24px;
    }

        .page-provider1 .provider1-header .left {
            order: 1;
        }

        .page-provider1 .provider1-header .right {
            margin-left: unset;
        }

            .page-provider1 .provider1-header .right .vehicle {
                background: var(--grey-200);
                padding: 16px;
                text-align: center;
                border-radius: 12px;
            }
}

/* Small desktop and mobile */
@media (max-width: 1400px) {
    .page-provider1 .provider1-wrapper.small-screen-height-auto {
        height: auto;
    }

    .page-provider1 .content-wrapper .provider1-card {
        transition: transform 0.2s ease-in-out;
    }

        .page-provider1 .content-wrapper .provider1-card .content-left {
            width: 100%;
            flex-shrink: 0;
            transition: transform 0.2s ease-in-out, height 0.2s ease-in-out;
        }

        .page-provider1 .content-wrapper .provider1-card .content-right {
            transition: transform 0.2s ease-in-out, height 0.2s ease-in-out;
            flex-shrink: 0;
            transform: translateX(100%);
        }

        .page-provider1 .content-wrapper .provider1-card.show-right .content-left {
            transform: translateX(-100%);
        }

        .page-provider1 .content-wrapper .provider1-card.show-right .content-right {
            height: auto;
            transform: translateX(-100%);
            width: 100%;
        }

        .page-provider1 .content-wrapper .provider1-card .mobile-height-0 {
            height: 0 !important;
        }

    .page-provider1:has(.provider1-card.show-right) .switch-lr.show-drawings {
        display: none !important;
    }


    .page-provider1 .content-wrapper .provider1-card-drawing {
        flex-direction: column;
        gap: 32px;
    }

        .page-provider1 .content-wrapper .provider1-card-drawing .content-left {
            order: 2;
            width: 100%;
            border-radius: 12px;
        }

        .page-provider1 .content-wrapper .provider1-card-drawing .content-right {
            order: 1;
            border: 1px solid var(--grey-200);
            border-radius: 12px;
        }

            .page-provider1 .content-wrapper .provider1-card-drawing .content-right .drawing-wrapper .zoomist-container {
                border-start-start-radius: 12px;
                border-end-start-radius: 12px;
            }

            .page-provider1 .content-wrapper .provider1-card-drawing .content-right .drawing-wrapper .zoomist-wrapper {
                border-start-start-radius: 12px;
                border-end-start-radius: 12px;
            }

            .page-provider1 .content-wrapper .provider1-card-drawing .content-right .drawing-wrapper .zoomist-slider {
                border-start-start-radius: 12px;
            }
}

/* Small desktop */
@media (min-width: 992px) and (max-width: 1400px) {
    .page-provider1 .switch-lr {
        position: fixed;
        bottom: 16px;
        left: 312px;
        right: 312px;
    }

    #main-wrapper:has(#sidebar-right-wrapper.collapsed) .page-provider1 .switch-lr {
        right: 112px;
    }
}

/* Desktop */
@media (min-width: 1400px) {
    .page-provider1 .categories-tree {
        padding-bottom: 0px;
    }

    .page-provider1 .provider1-card .content-right .exploded-views-wrapper {
        padding-bottom: 0px;
    }

    .page-provider1 .switch-lr {
        display: none !important;
    }
}
/* #endregion */

/* #region Checkout */
.page-checkout .filenames {
}

    .page-checkout .filenames .filename:first-of-type {
        margin-top: 20px;
    }

/* #endregion */

/* #region New Search */
.page-newsearch .card {
    overflow: hidden;
}

/* #endregion */

/* #region Orders */
.page-orders .table-card.main-table {
    overflow-x: auto;
}

#ordersTable th {
    font-weight: 500;
    color: var(--grey-600);
    font-size: 12px;
    line-height: 18px;
}

#ordersTable .action-wrapper {
    display: flex;
    justify-content: end;
}

    #ordersTable .action-wrapper .action {
        /*border: 1px solid var(--grey-200);*/
        height: 40px;
        width: 40px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #ordersTable .action-wrapper .action:hover {
            background: var(--grey-200);
            cursor: pointer;
        }

        #ordersTable .action-wrapper .action .icon {
            background: var(--grey-700);
            height: 40px;
            width: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.2s ease-out;
        }

#ordersTable .order-header.shown > td {
    border-bottom: none;
}

table.dataTable > tbody > tr.order-details-child:hover > td {
    background: none;
}

#ordersTable .order-header.shown .action-wrapper .action .icon {
    transition: transform 0.2s ease-out;
    transform: rotate(180deg);
}

#ordersTable .icon-wrapper {
    height: 40px;
    width: 40px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    #ordersTable .icon-wrapper .icon {
        background: var(--grey-700);
        height: 40px;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

#ordersTable > tbody > tr.order-details:hover > td {
    background: var(--white);
}

#ordersTable .no-wrap {
    white-space: nowrap;
}

#ordersTable .width100 {
    width: 100%;
}

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

#ordersTable tr.order-header {
    cursor: pointer;
}

#ordersTable tr.order-details {
    display: none;
}


#ordersTable tr td:has(.order-details-card) {
    padding: 0;
}

#ordersTable .order-details-card {
    background: var(--grey-0);
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    margin-bottom: 0px;
    margin: 16px;
}

    #ordersTable .order-details-card .title {
        font-weight: 500;
        font-size: 14px;
        line-height: normal;
        color: var(--grey-700);
    }

    #ordersTable .order-details-card .button-wrapper {
        display: flex;
        justify-content: flex-end;
    }

    #ordersTable .order-details-card .loader-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        #ordersTable .order-details-card .loader-container .icon {
            background: var(--grey-500) !important;
        }

        #ordersTable .order-details-card .loader-container span {
            color: var(--grey-500);
        }

    #ordersTable .order-details-card .nodata-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: var(--grey-500);
    }

#ordersTable .detailsTable {
    white-space: nowrap;
}

    #ordersTable .detailsTable thead th {
        background: var(--grey-100);
        padding: 16px;
    }

        #ordersTable .detailsTable thead th:nth-child(2) {
            width: 100%;
        }

    #ordersTable .detailsTable tbody td {
        background: var(--grey-50);
        padding: 16px;
    }

        #ordersTable .detailsTable tbody td:nth-child(2) {
            width: 100%;
        }


table.dataTable#ordersTable .detailsTable > tbody > tr:hover > td {
    background: var(--grey-100);
}


/* #endregion */

/* #region Notifications */
#notificationstable td {
    white-space: nowrap;
}

#notificationstable .unread {
    font-weight: 600;
}

.notification-details-card .subject {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.notification-details-card .action-button {
    display: block;
    margin-top: 16px;
    width: fit-content;
}

/* #endregion */

/* #region Api access */
.page-api-access .access-details-table {
    font-size: 12px;
    color: var(--grey-500);
}

    .page-api-access .access-details-table td {
        padding: 0px 8px;
        padding-bottom: 4px;
    }


        .page-api-access .access-details-table td:first-of-type {
            padding-left: 0px;
            font-weight: 500;
        }

        .page-api-access .access-details-table td:last-of-type {
            padding-right: 0px;
        }

        .page-api-access .access-details-table td input {
            background: none;
            border: none;
            width: 200px;
        }

        .page-api-access .access-details-table td .apikey-show {
            display: block;
            width: 200px;
            word-break: break-word;
        }

        .page-api-access .access-details-table td .icons-wrapper {
            display: flex;
            gap: 8px;
        }

        .page-api-access .access-details-table td .icon-wrapper {
            height: 16px;
            width: 16px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .page-api-access .access-details-table td .icon-wrapper .icon {
                background: var(--grey-500);
                height: 16px;
                width: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
                mask-size: contain;
            }

                .page-api-access .access-details-table td .icon-wrapper .icon:hover {
                    background: var(--grey-900);
                    cursor: pointer;
                }

        .page-api-access .access-details-table td a {
            font-weight: normal;
            color: var(--grey-500);
            font-size: 12px;
            line-height: initial;
        }

/* #endregion */

/* #region Impersonate customer request*/
.page-impersonatecustomerrequest .subtitle.error-message {
    color: var(--error-700) !important;
}

.page-impersonatecustomerrequest .error-icon .icon {
    background: var(--error-700) !important;
}
/* #endregion*/
/* #endregion */

/*test banner*/
#development-disclaimer {
    /*display: none;*/
    position: fixed;
    padding: 4px;
    bottom: 0;
    right: 0;
    left: 280px;
    font-size: 12px;
    background: #ffb300;
    z-index: 999;
}

.presentation-mode {
    display: none;
}