#jaugevox{
    --jaugevox-pipe-height: 1rem;
    --jaugevox-items-margin-bottom: 16px;
    --jaugevox-item-border-width: 1px;
    --jaugevox-border-radius: 0.375rem;
    --jaugevox-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

    margin-bottom: 1rem;
}

.jaugevox-items{
    display: flex; justify-content: space-between;
    margin-bottom: var(--jaugevox-items-margin-bottom);
}
.jaugevox-items > div[data-step]{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: var(--gray-light);
    padding: .2rem .25rem;
    border-radius: 8px;
    border: var(--jaugevox-item-border-width) solid var(--gray-1);
}
.jaugevox-items > div[data-step].checked{
    border-color: var(--primary);

}
.jaugevox-items > div[data-step].checked::after{
    content: "";
    position: absolute;
    bottom: -8px;
    right: -8px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(255,255,255)" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/></svg>') no-repeat center center var(--primary);
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.jaugevox-items .pipe{
    display: block;
    width: 3px;
    height: var(--jaugevox-pipe-height);
    position: absolute;
    bottom: calc(-1 * (var(--jaugevox-pipe-height) + var(--jaugevox-items-margin-bottom) + var(--jaugevox-item-border-width)));
    background: var(--primary);
    z-index: 800;
    left: calc(50% - 1.5px);
}

#jaugevox .jaugevox-message{
    text-align: center;
    font-size: 1.1em;
}



@keyframes jaugevox-progress-bar-stripes {
    0% {
        background-position-x: var(--jaugevox-progress-height);
    }
}
.jaugevox-progress,
.jaugevox-progress-stacked {
    --jaugevox-progress-height: 1rem;
    --jaugevox-progress-font-size: 0.75rem;
    --jaugevox-progress-bg: var(--gray-light);
    --jaugevox-progress-border-radius: var(--jaugevox-border-radius);
    --jaugevox-progress-box-shadow: var(--jaugevox-box-shadow-inset);
    --jaugevox-progress-bar-color: #fff;
    --jaugevox-progress-bar-bg: var(--secondary);
    --jaugevox-progress-bar-transition: width 0.6s ease;
    display: flex;
    height: var(--jaugevox-progress-height);
    /*overflow: hidden;*/
    font-size: var(--jaugevox-progress-font-size);
    background-color: var(--jaugevox-progress-bg);
    border-radius: var(--jaugevox-progress-border-radius);
    margin: 0 2em var(--jaugevox-items-margin-bottom) 0;
}

.jaugevox-progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*overflow: hidden;*/
    color: var(--jaugevox-progress-bar-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--jaugevox-progress-bar-bg);
    transition: var(--jaugevox-progress-bar-transition);
    position: relative;
    border-radius: var(--jaugevox-progress-border-radius);
}
@media (prefers-reduced-motion: reduce) {
    .jaugevox-progress-bar {
        transition: none;
    }
}

.jaugevox-progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: var(--jaugevox-progress-height) var(--jaugevox-progress-height);
}

.jaugevox-progress-stacked > .jaugevox-progress {
    overflow: visible;
}

.jaugevox-progress-stacked > .jaugevox-progress > .progress-bar {
    width: 100%;
}

.jaugevox-progress-bar-animated {
    animation: 1s linear infinite jaugevox-progress-bar-stripes;
}
@media (prefers-reduced-motion: reduce) {
    .jaugevox-progress-bar-animated {
        animation: none;
    }
}

.jaugevox-progress-bar .cart{
    --jaugevox-progress-bar-cart-width: 40px;
    position: absolute;
    width: var(--jaugevox-progress-bar-cart-width);
    height: var(--jaugevox-progress-bar-cart-width);
    padding: calc(var(--jaugevox-progress-bar-cart-width) / 6);
    right: calc(-1 * var(--jaugevox-progress-bar-cart-width) / 2);
    background-color: var(--jaugevox-progress-bg);
    border-radius: 50%;
    border: 2px solid var(--primary);
    z-index: 900;
}
.jaugevox-progress-bar .cart svg{
    width: 100%;
    height: 100%;
}

.jaugevox-block .header-block {
    background: none 0 4px scroll no-repeat var(--gray-light);
    background-size: 40px;
    padding: 16px 0 14px 54px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.jaugevox-block .header-block h3 {
    margin-bottom: 0;
}