.form-inline .select-swatch {
    margin-bottom: 20px
}

    .form-inline .select-swatch .swatch {
        font-size: 1.1rem;
        margin-bottom: 14px
    }

        .form-inline .select-swatch .swatch .header {
            margin-bottom: 8px;
            font-size: 1.1rem;
            color: #444B52;
            display: flex;
            align-items: start
        }

            .form-inline .select-swatch .swatch .header .value-roperties {
                font-weight: 600;
                color: #002d3a;
                margin-left: 5px
            }

        .form-inline .select-swatch .swatch .swatch-element {
            display: inline-block;
            margin: 0px 5px 5px 0
        }

            .form-inline .select-swatch .swatch .swatch-element input {
                display: none
            }

            .form-inline .select-swatch .swatch .swatch-element label {
                min-width: 25px;
                height: 25px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #9d9d9d;
                cursor: pointer;
                white-space: nowrap;
                padding: 0 5px;
                position: relative;
                margin-bottom: 0;
                text-align: center;
                line-height: 25px
            }

                .form-inline .select-swatch .swatch .swatch-element label .crossed-out {
                    display: none
                }

            .form-inline .select-swatch .swatch .swatch-element input:checked + label {
                background: #002d3a;
                border-color: #ddd;
                color: #fff
            }

            .form-inline .select-swatch .swatch .swatch-element .tooltip {
                display: none
            }

            .form-inline .select-swatch .swatch .swatch-element.soldout {
                position: relative
            }

                .form-inline .select-swatch .swatch .swatch-element.soldout label {
                    position: relative
                }

            .form-inline .select-swatch .swatch .swatch-element.color label {
                border-radius: 50%
            }

            .form-inline .select-swatch .swatch .swatch-element.color input:checked + label {
                border: 2px solid #f1f1f1;
                box-shadow: 0 2px 5px rgba(0,0,0,0.5)
            }

@media (min-width: 1200px) {
    .form-inline .select-swatch .swatch .swatch-element.color:hover:before {
        content: attr(title);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        padding: 3px 7px;
        background: var(--mainColor);
        color: #fff;
        border-radius: 5px;
        font-size: 1rem;
        white-space: nowrap;
        display: inline-block;
        line-height: initial;
        transform: translate(-50%, 0%)
    }

    .form-inline .select-swatch .swatch .swatch-element.color:hover:after {
        display: block;
        position: absolute;
        border: 10px solid transparent;
        border-top-color: var(--mainColor);
        content: "";
        left: 50%;
        bottom: calc(100% + -7px);
        z-index: -1;
        transform: translate(-50%, 0%)
    }
}