.combinations{
    overflow: hidden;
    /*text-align: center;*/
    margin-bottom: 20px;
}
.combinations .square{
    min-width: 40px;
    height: 32px;
    padding-left: 13px;
    padding-right: 13px;
    border-radius: 4px;
    line-height: 31px;
    text-align: center;
    cursor: pointer;
    float: left;
    margin-right: 10px;
    border: 1px solid #000;
    background: #fff;
    margin-top: 6px;
    color: #000;
    font-size: 13px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          supported by Chrome and Opera */    
}

.combinations .square.selected,
.combinations .square:hover,
.combinations input:checked + .square{
    background: #000;
    color: #fff;    
}

.combinations .attributeGroup input {
    display: none;
}

.combinations .circle{
    width: 32px;
    max-width: 32px;
    height: 32px;
    padding-left: 4px;
    padding-right: 4px;
    line-height: 31px;
    text-align: center;
    cursor: pointer;
    text-indent: -99999px;
    float: left;
    margin-right: 10px;
    border: none;
    background: #fff;
    margin-top: 6px;
    border-radius: 50px;
    color: #000;
    font-size: 13px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;  
    opacity: 0.5;
}

.combinations .circle.selected,
.combinations .circle:hover{
    opacity: 1;
    border: 2px solid #444;
}

.combinations .circle input{
    display: none;
}

.combinations .wrapAttribute{
    min-width: inherit !important;    
}

@media (max-width: 767px) {
    .combinations .square{
        float: none;
        display: inline-block;
    }   
    .combinations .circle{
        float: none;
        display: inline-block;
    }       
}


.combinations .attributeGroup{
    margin-bottom: 16px;
    overflow: hidden;
}

.combinations .square.noAvailable,
.combinations .square.noAvailable:hover{
    border-color: #b9b9b9 !important;
    color: #b9b9b9 !important;
    cursor: default !important;
    background: transparent !important;
}

.combinations .circle.noAvailable,
.combinations .circle.noAvailable:hover{
    border-color: #b9b9b9 !important;
    color: #b9b9b9 !important;
    cursor: default !important;
    background: transparent !important;
}