.dynamic-attributes {
    width: 50%;
    float: left;
    margin: 10px 0;
}
.dynamic-att-group .group-name, .dynamic-att-group .group-values {
    margin: 3px 0;
    font-weight: bold;
    position: relative;
}
.dynamic-att-group {
    margin: 5px 0;
    transition: color 200ms ease-in-out;
}
/* compact view */
.compact .dynamic-att-group {
    margin: 0;
    position: relative;
}
.compact .dynamic-att-group .group-name {
    float: left;
    font-weight: normal;
    width: 35%;
    padding: 0 5px 0 0;
    line-height: 25px;
    white-space: normal;
}
.compact .dynamic-att-group .group-values {
    float: left;
    width: 65%;
}
.dynamic-attributes.compact .ajax-response {
    position: absolute;
    top: 5px;
    left: 100%;
    margin-left: 10px;
}

.dynamic-att-group.just-saved,  .dynamic-att-group.just-saved label.checked{
    color: #71B238;
}
.dynamic-att-group.error {
    color: #FE9126;
}
.dynamic-att-group .ajax-response {
    white-space: nowrap;
    opacity: 0;
    transition: opacity 500ms ease-in-out;
}
.dynamic-att-group.just-saved .ajax-response,
.dynamic-att-group.error .ajax-response {
    opacity: 1;
}
#page .dynamic-attributes .ajax-response > span {
    display: none;
}
#page .dynamic-att-group.just-saved .ajax-response > .success,
#page .dynamic-att-group.error .ajax-response > .error  {
    display: inline-block;
}
.dynamic-attributes label {
    margin: 0;
    display: block;
    font-weight: normal;
}
.dynamic-attributes label.color-att {
    display: inline-block;
    width: 23px;
    height: 23px;
    margin: 3px 3px 3px 0;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    border-radius: 100%;
}
.dynamic-attributes .color-att.checked:before {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border: 2px solid #FFF;
    border-radius: 100%;
}
.dynamic-attributes label.color-att.bright {
    border: 1px solid #CCC;
}
.dynamic-attributes .color-att.bright:before {
    border: 1px solid #CCC;
}
.dynamic-attributes .color-att > * {
    opacity: 0;
}
@media (max-width: 991px) {
    #cart_summary .dynamic-attributes {
        width: 100%;
    }
}