:root {
    --webshop-accent: #007bff;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v118/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

icon {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    cursor: default;
}

body > servconnectstorecart {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 500;
}

body > servconnectstorecart > bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 0;
    background: rgba(0, 0, 0, .75);
    opacity: 0;
    transition: opacity .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

body > servconnectstorecart.sh > bg {
    opacity: 1;
}


body > servconnectstorecart > content {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 100%;
    max-width: 600px;
    height: 100%;
    overflow: hidden;
    box-shadow: 0px 0px 32px rgba(0, 0, 0, .5);
    background: #ffffff;
    transform: translate3d(110%, 0, 0);
    transition: transform .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

body > servconnectstorecart.sh > content {
    transform: translate3d(0%, 0, 0);
}


body > servconnectstorecart > content > pricebar {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 32px;
    border-top: 1px solid #dfdfdf;
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    z-index: 1;
}

body > servconnectstorecart > content > pricebar > button {
    position: relative;
    display: block;
    flex: 1 1;
    white-space: nowrap;
}

body > servconnectstorecart > content > pricebar > textwrap {
    position: relative;
    display: block;
    flex: 1 1 60%;
}


body > servconnectstorecart > content > pricebar > textwrap > h6 {
    position: relative;
    margin: 0;
}

body > servconnectstorecart > content > pricebar > textwrap > p {
    position: relative;
    margin: 0 0 2px 0;
}


body > servconnectstorecart > content > content {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0 0 150px 0;
    z-index: 0;
}


body > servconnectstorecart > content > content > header {
    position: sticky;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 52px 0 0 32px;
    border-bottom: 1px solid #dfdfdf;
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    z-index: 1;
}

body > servconnectstorecart > content > content > header > icon {
    position: relative;
    padding: 32px;
    display: block;
    cursor: pointer;
    color: var(--webshop-accent);
}

body > servconnectstorecart > content > content > header > icon:active {
    opacity: .5;
}

body > servconnectstorecart > content > content > header > h6,
body > servconnectstorecart > content > content > header > h5 {
    position: relative;
    margin: 0;
    display: block;
}


body > servconnectstorecart > content > content > cartempty {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80%;
    padding: 32px;
}

body > servconnectstorecart > content > content > cartempty > content {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    max-width: 400px;
}

body > servconnectstorecart > content > content > cartempty > content > svg {
    position: relative;
    stroke: var(--webshop-accent);
    stroke-width: 1.8;
    display: block;
    width: 100px;
    margin: 0 auto;
    stroke-linecap: round;
    stroke-linejoin: round;
    padding: 0 22px 12px 0;
}


body > servconnectstorecart > content > content > cartempty > content > svg .cart {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    transition: stroke-dashoffset 1s cubic-bezier(0.165, 0.84, 0.44, 1) .2s;
}


body > servconnectstorecart.sh > content > content > cartempty:not(.restart-anim) > content > svg .cart {
    stroke-dashoffset: 120;
}


body > servconnectstorecart > content > content > cartempty > content > h6,
body > servconnectstorecart > content > content > cartempty > content > p {
    position: relative;
    width: 100%;
    display: block;
    text-align: center;
    transform: translate3d(0, 50px, 0);
    opacity: 0;
    transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1) .2s, opacity .4s cubic-bezier(0.165, 0.84, 0.44, 1) .2s;
}

body > servconnectstorecart > content > content > cartempty > content > p {
    transform: translate3d(0, 100px, 0);
}

body > servconnectstorecart.sh > content > content > cartempty:not(.restart-anim) > content > h6,
body > servconnectstorecart.sh > content > content > cartempty:not(.restart-anim) > content > p {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}



body > servconnectstorecart > content > content > entry {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 24px;
    z-index: 0;
}


body > servconnectstorecart > content > content > entry > content {
    position: relative;
    display: flex;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid #dfdfdf;
}

body > servconnectstorecart > content > content > entry.shipping > content {
    justify-content: space-between;
}

body > servconnectstorecart > content > content > entry.shipping > content > p {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}

body > servconnectstorecart > content > content > entry.shipping > content > p:last-of-type {
    position: relative;
    white-space: nowrap;
    text-align: right;
    color: #000000;
}

body > servconnectstorecart > content > content > entry > content > img {
    position: relative;
    flex: 0 0 78px;
    width: 78px;
    height: 56px;
    object-fit: cover;
    object-position: center center;
    margin: 0 24px 0 0;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid #dfdfdf;
}

body > servconnectstorecart > content > content > entry > content > h6 {
    position: relative;
    display: block;
    margin: 0;
    font-size: 20px;
    white-space: nowrap;
    text-align: right;
    cursor: pointer;
}

body > servconnectstorecart > content > content > entry > content > textwrap {
    position: relative;
    display: block;
    flex: 1 1;
    cursor: pointer;
}

body > servconnectstorecart > content > content > entry > content > textwrap > h6 {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    font-size: 20px;
    cursor: pointer;
}

body > servconnectstorecart > content > content > entry > content > textwrap > a {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 2px 0;
    cursor: pointer;
}

body > servconnectstorecart > content > content > entry > content > textwrap > p {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 2px 0;
    cursor: pointer;
}

body > servconnectstorecart > content > content > entry > content > textwrap > a:last-of-type {
    padding-bottom: 0;
}



servconnectstore-checkout-spinner {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    z-index: 3;
    background: #ffffff;
    opacity: 1;
    transition: opacity .1s linear;
}

servconnectstore-checkout-spinner.hi {
    opacity: 0;
    pointer-events: none;
}

servconnectstore-checkout-spinner > wrap > svg {
    position: relative;
    display: block;
    animation: rotate 1.5s linear infinite;
    height: 120px;
    width: 120px;
    margin: 0 auto;
}

servconnectstore-checkout-spinner > wrap > svg circle {
    stroke-dasharray: 1200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite 0s, color 6s ease-in-out infinite;
    stroke-linecap: round;
    fill: none;
    stroke-width: 5;
}

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

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}

@keyframes color {

    100%,
    0% {
        stroke: #000000;
    }

    50% {
        stroke: #333333;
    }
}