:root {
    --usi-primary-color: var(--primary, var(--color-primary, #000));
    --usi-secondary-color: var(--secondary, var(--color-secondary, #4e4e4e));
    --usi-warning-color: var(--warning, var(--color-warning, #fc951d));
    --usi-dark-color: var(--dark, var(--color-dark, #000));
    --usi-success-color: var(--success, var(--color-success, #7cc325));
    --usi-light-success-color: #e5f3d3;
    --usi-border-radius: 0.25rem;
    --usi-light-color: #f5f5f5;
    --usi-gray-color: #888;
    --usi-light-warning-color: #feead2;
    --usi-white-color: #fff;
    --usi-border-color: #e9ecef;
    --usi-table-bg: #fff;
    --usi-table-hovered-bg: #f9f9f9;
    --usi-table-head-bg: #f2f2f2;
    --usi-table-label-color: #343a40
}

.usi-btn {
    display: inline-block;
    font-weight: 400;
    color: var(--usi-dark-color);
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    cursor: pointer
}

.usi-btn, .usi-btn:hover {
    text-decoration: none
}

.usi-btn-primary {
    background-color: var(--usi-primary-color);
    border-color: var(--usi-primary-color)
}

.usi-btn-primary, .usi-btn-primary:hover, .usi-btn-secondary {
    color: var(--usi-white-color)
}

.usi-btn-secondary {
    background-color: var(--usi-secondary-color);
    border-color: var(--usi-secondary-color)
}

.usi-btn-secondary:hover {
    color: var(--usi-white-color)
}

.usi-btn-sm {
    line-height: 1;
    font-size: .9rem
}

.usi-wrapper {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem
}

@media (min-width: 992px) {
    .usi-wrapper {
        margin-top: 3rem;
        margin-bottom: 3rem
    }
}

.usi-title span {
    color: var(--usi-secondary-color)
}

.usi-surtitle {
    margin-bottom: .25rem;
    font-size: 1.125rem
}

@media (min-width: 992px) {
    .usi-container {
        display: flex;
        position: relative;
        align-items: flex-start
    }
}

.usi-view {
    overflow: hidden;
    margin-bottom: 1.5rem;
    border: 1px solid transparent
}

@media (min-width: 992px) {
    .usi-view {
        flex: 0 0 42%;
        max-width: 42%;
        position: sticky;
        top: 0;
        height: 100vh;
        margin-right: 3%;
        margin-bottom: 0
    }
}

.usi-view img {
    max-height: 100vh
}

.usi-view__inner {
    position: relative;
    max-width: -moz-fit-content;
    max-width: fit-content
}

.usi-view--zoomed {
    border: 1px solid var(--usi-border-color);
    border-radius: var(--usi-border-radius)
}

.usi-view--zoomed .usi-view__zoom-content {
    cursor: move
}

.usi-zoom-toggle {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--usi-white-color);
    border-color: var(--usi-primary-color);
    color: var(--usi-primary-color);
    padding: .75rem;
    transition: background-color .3s;
    z-index: 1
}

.usi-zoom-toggle svg {
    fill: var(--usi-primary-color);
    width: 1.25rem
}

@media (min-width: 992px) {
    .usi-zoom-toggle {
        top: 1rem
    }
}

.usi-zoom-toggle:hover {
    background-color: var(--usi-primary-color)
}

.usi-zoom-toggle:hover svg {
    fill: var(--usi-white-color)
}

.usi-table {
    background-color: var(--usi-table-bg);
    border: 1px solid var(--usi-border-color);
    border-bottom: 0;
    border-top-left-radius: var(--usi-border-radius);
    border-top-right-radius: var(--usi-border-radius);
    margin-bottom: 1.875rem
}

@media (min-width: 992px) {
    .usi-table {
        flex: 0 0 55%;
        max-width: 55%
    }
}

.usi-table__head {
    background-color: var(--usi-table-head-bg)
}

@media (max-width: 991px) {
    .usi-table__head {
        display: none
    }
}

.usi-table__item {
    border-bottom: 1px solid var(--usi-border-color);
    display: grid;
    gap: .5rem;
    grid-template-columns:40px 3fr 3fr;
    grid-template-areas:"a b b" "a c d";
    padding: .625rem
}

@media (min-width: 768px) {
    .usi-table__item {
        padding: .625rem 1.25rem;
        grid-template-columns:50px 3fr 3fr;
        grid-template-areas:"a b c" "a b d"
    }
}

@media (min-width: 992px) {
    .usi-table__item {
        grid-template-columns:50px 4fr 2fr 2fr;
        grid-template-areas:"a b c d"
    }
}

.usi-table__item.hovered {
    background-color: var(--usi-table-hovered-bg)
}

.usi-table__label {
    color: var(--usi-table-label-color);
    display: block;
    font-weight: 700
}

.usi-table__entry--1 {
    grid-area: a;
    text-align: center
}

.usi-table__entry--2 {
    grid-area: b
}

.usi-table__entry--3 {
    grid-area: c
}

@media (min-width: 768px) {
    .usi-table__entry--3 {
        text-align: right
    }
}

.usi-table__entry--4 {
    grid-area: d
}

.usi-table__list .usi-table__entry {
    align-self: center
}

.usi-table__list .usi-table__entry--1 {
    font-weight: 700
}

.usi-table__list .usi-table__entry--1 > span {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--usi-light-color);
    border-radius: 2rem
}

.usi-table__list .usi-table__entry--4 {
    display: flex;
    justify-content: flex-end
}

.usi-table__qty {
    margin-right: .5rem;
    display: flex
}

.usi-table__qty input {
    max-width: 2rem;
    border-top: 1px solid var(--usi-border-color);
    border-bottom: 1px solid var(--usi-border-color);
    border-left: 0;
    border-right: 0;
    height: 100%
}

.usi-table__qty input::-webkit-inner-spin-button, .usi-table__qty input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.usi-table__qty input[type=number] {
    -moz-appearance: textfield
}

.usi-table__qty button {
    padding: .25rem .5rem;
    font-size: 1.25rem;
    border: 1px solid var(--usi-border-color);
    height: 100%
}

.usi-table__qty button:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.usi-table__qty button:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.usi-table__qty button, .usi-table__qty input {
    text-align: center;
    background-color: var(--usi-white-color)
}

.usi-hotspot {
    position: absolute;
    width: 1rem;
    height: 1rem;
    margin-top: -.3125rem;
    border-radius: 50%;
    background-color: var(--usi-primary-color);
    opacity: .2;
    cursor: pointer
}

@media (min-width: 768px) {
    .usi-hotspot {
        width: 1.5rem;
        height: 1.5rem;
        margin-top: -.3125rem
    }
}

.usi-hotspot.hovered {
    border: 2px dotted var(--usi-secondary-color);
    background-color: transparent;
    opacity: 1
}

.usi-reference {
    color: var(--usi-gray-color);
    line-height: 1;
    display: block;
    font-size: .875rem
}

.usi-product-name {
    display: block
}

.usi-price {
    color: var(--usi-primary-color);
    font-weight: 700
}

.usi-price-before {
    margin-right: .25rem;
    font-size: .875rem;
    text-decoration: line-through
}

.usi-add-to-cart svg {
    width: 1.25rem;
    fill: var(--usi-white-color)
}

.usi-availability {
    background-color: var(--usi-light-warning-color);
    border-radius: var(--usi-border-radius);
    padding: .25rem .5rem;
    line-height: 1;
    white-space: break-spaces !important;
    text-align: left !important;
}

.usi-availability svg {
    width: 1rem;
    display: inline;
    vertical-align: bottom
}

.usi-spinner {
    position: relative;
    width: 100%;
    height: 12.5rem;
    background-color: var(--usi-light-color)
}

.usi-spinner > svg {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 1s linear infinite;
    width: 2.25rem;
    height: 2.25rem
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

#back_to_assemblies {
    margin-bottom: 1.5rem
}

.usi-part-details {
    position: relative;
    cursor: pointer;
    margin-left: .25rem
}

.usi-part-details svg {
    width: 1rem;
    height: 1rem;
    fill: var(--usi-secondary-color)
}

.usi-part-details .usi-part-context {
    visibility: hidden;
    position: absolute;
    background-color: var(--usi-dark-color);
    color: var(--usi-white-color);
    text-align: center;
    padding: .375rem;
    border-radius: var(--usi-border-radius);
    z-index: 1;
    opacity: 0;
    transition: opacity .6s;
    bottom: 125%;
    left: 50%;
    width: 7.5rem;
    margin-left: -3.75rem
}

.usi-part-details .usi-part-context:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--usi-dark-color) transparent transparent transparent
}

.usi-part-details:hover .usi-part-context {
    visibility: visible;
    opacity: 1
}

.usi-availability, .usi-delivery {
    border-radius: var(--usi-border-radius);
    display: inline-block;
    font-size: 75%;
    font-weight: 400;
    line-height: 1;
    padding: .25em .4em;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap
}

.usi-availability {
    margin-right: .25rem
}

.usi-availability--success {
    background-color: var(--usi-success-color);
    color: var(--usi-white-color)
}

.usi-availability--warning {
    background-color: var(--usi-warning-color);
    color: var(--usi-white-color)
}

.usi-delivery {
    background-color: var(--usi-light-color)
}

.usi-container-rows {
    flex-direction: column
}

.usi-container-rows .usi-view {
    position: relative;
    max-width: 100%;
    margin-bottom: 15px
}

.usi-container-rows .usi-view img {
    width: 100%;
    max-height: none
}

.usi-container-rows .usi-table {
    width: 100%;
    max-width: none
}

.usi-submodels {
    display: flex;
    margin: 1rem 0;
    overflow-x: auto
}

@media (min-width: 768px) {
    .usi-submodels {
        overflow-x: revert;
        flex-wrap: wrap
    }
}

.usi-submodels__item {
    border: 1px solid var(--usi-primary-color);
    color: var(--usi-primary-color);
    margin-right: .625rem;
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    flex-shrink: 0
}

.usi-submodels__item span {
    line-height: 1
}

.usi-submodels__item svg {
    fill: var(--usi-primary-color);
    width: 1rem;
    margin-right: .5rem
}

.usi-submodels__item.active {
    background-color: var(--usi-primary-color);
    color: var(--usi-white-color)
}

.usi-submodels__item.active svg {
    fill: var(--usi-white-color)
}

.usi-assemblies {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    grid-gap: .625rem
}

@media (min-width: 768px) {
    .usi-assemblies {
        grid-template-columns:repeat(3, 1fr)
    }
}

@media (min-width: 992px) {
    .usi-assemblies {
        grid-template-columns:repeat(4, 1fr)
    }
}

@media (min-width: 768px) {
    .usi-assemblies.usi-assemblies-3 {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (min-width: 992px) {
    .usi-assemblies.usi-assemblies-3 {
        grid-template-columns:repeat(3, 1fr)
    }
}

.usi-assemblies__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    border-radius: .25rem;
    border: 1px solid var(--usi-border-color);
    padding: .8rem
}

.usi-assemblies__item > * {
    margin-bottom: 0;
    margin-top: 1rem
}

.usi-notification {
    position: fixed;
    bottom: 4.125rem;
    right: 1.125rem;
    z-index: 2147483648;
    padding-left: .9375rem
}

@media (min-width: 992px) {
    .usi-notification {
        top: 1.125rem;
        bottom: auto
    }
}

.usi-notification__message {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: var(--usi-light-success-color);
    padding: .25rem .5rem;
    border-radius: var(--usi-border-radius);
    color: var(--usi-success-color);
    margin-bottom: .5rem;
    max-width: -moz-fit-content;
    max-width: fit-content;
    justify-self: flex-end
}

@media (max-width: 767px) {
    .usi-notification__message {
        font-size: .9rem
    }
}

.usi-notification__message svg {
    fill: var(--usi-success-color);
    width: 1rem;
    margin-right: .5rem
}

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
}

.fade-enter, .fade-leave-to {
    opacity: 0
}