/* Tank Zone — Product Page Color Switcher V1.1 */

.tz-product-family-colors{
    display:none;
}

.tz-visually-hidden{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}

@media(max-width:860px){
    html.tz-modern-mobile .tz-product-family-colors{
        display:grid;
        gap:8px;
        margin:17px 0 15px;
        padding:12px 0 14px;
        border-top:1px solid #e2e2dc;
        border-bottom:1px solid #e2e2dc;
    }

    html.tz-modern-mobile .tz-product-family-colors-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        color:#6f6f69;
        font-size:.64rem;
        line-height:1.4;
    }

    html.tz-modern-mobile .tz-product-family-colors-head > span{
        font-weight:800;
        color:#222;
    }

    html.tz-modern-mobile .tz-product-family-colors-head strong{
        color:#777;
        font-weight:650;
    }

    html.tz-modern-mobile .tz-product-family-color-row{
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        gap:9px;
        min-height:34px;
    }

    html.tz-modern-mobile .tz-product-family-color{
        display:block;
        position:relative;
        width:29px;
        height:29px;
        flex:0 0 29px;
        border:3px solid #fff;
        outline:1px solid #bcbcb5;
        outline-offset:0;
        border-radius:999px;
        background:#777;
        -webkit-tap-highlight-color:transparent;
        transition:
            transform .15s ease,
            outline-color .15s ease,
            outline-width .15s ease;
    }

    html.tz-modern-mobile .tz-product-family-color:active{
        transform:scale(.92);
    }

    html.tz-modern-mobile .tz-product-family-color[aria-current="true"]{
        outline:2px solid #111;
        outline-offset:2px;
    }

    html.tz-modern-mobile .tz-product-family-color--black{background:#111111}
    html.tz-modern-mobile .tz-product-family-color--white{
        background:#ffffff;
        box-shadow:inset 0 0 0 1px #d0d0cc;
    }
    html.tz-modern-mobile .tz-product-family-color--blue{background:#2453b3}
    html.tz-modern-mobile .tz-product-family-color--navy{background:#17233f}
    html.tz-modern-mobile .tz-product-family-color--purple{background:#6d3a92}
    html.tz-modern-mobile .tz-product-family-color--yellow{background:#e9c725}
    html.tz-modern-mobile .tz-product-family-color--red{background:#b81f27}
    html.tz-modern-mobile .tz-product-family-color--pink{background:#db8fa4}
    html.tz-modern-mobile .tz-product-family-color--green{background:#536a3a}
    html.tz-modern-mobile .tz-product-family-color--gray{background:#8a8a8a}
    html.tz-modern-mobile .tz-product-family-color--brown{background:#765343}
    html.tz-modern-mobile .tz-product-family-color--beige{background:#d8c8a9}
    html.tz-modern-mobile .tz-product-family-color--maroon{background:#6c2635}
    html.tz-modern-mobile .tz-product-family-color--other{background:#777}
}

/* TANKZONE_PRODUCT_GROUPS_IMAGE_ORDERING_V35 */
.tz-product-family-colors{
    display:grid;
    gap:8px;
    margin:17px 0 15px;
    padding:12px 0 14px;
    border-top:1px solid #e2e2dc;
    border-bottom:1px solid #e2e2dc;
}
.tz-product-family-colors-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:#6f6f69;
    font-size:.68rem;
    line-height:1.4;
}
.tz-product-family-colors-head > span{
    color:#222;
    font-weight:800;
}
.tz-product-family-colors-head strong{
    color:#777;
    font-weight:650;
}
.tz-product-family-color-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
    min-height:34px;
}
.tz-product-family-color{
    display:block;
    position:relative;
    width:31px;
    height:31px;
    flex:0 0 31px;
    border:3px solid #fff;
    outline:1px solid #bcbcb5;
    outline-offset:0;
    border-radius:999px;
    background:#777;
    -webkit-tap-highlight-color:transparent;
    transition:
        transform .15s ease,
        outline-color .15s ease,
        outline-width .15s ease;
}
.tz-product-family-color:hover{
    transform:translateY(-1px);
}
.tz-product-family-color:active{
    transform:scale(.92);
}
.tz-product-family-color[aria-current="true"]{
    outline:2px solid #111;
    outline-offset:2px;
}
.tz-product-family-color[style*="--tz-family-color"]{
    background:var(--tz-family-color);
}