.square-variant{display:block;}
.square-variant p{margin:0; font-weight: bold; font-size: 14px;}
.square-variant .variant-item{width:40px; height:40px; display:inline-block; margin: 10px 5px; position:relative; background-color:#FFF; border:1px solid #dedede;}
.square-variant .variant-item.active{border:1px solid #adadad;}
.square-variant .variant-item:focus{border:1px solid #08b0b2 !important;}
.square-variant .variant-item:first-child{margin-left:0;}
.square-variant .variant-item:last-child{margin-right:0;}
.square-variant .variant-item a{display:block; width:100%;height:100%;border: 1px solid #dedede;text-align: center;line-height: 40px;text-decoration: none;color: #000;font-size: 15px; -webkit-transition: all 0.2s linear;transition: all 0.2s linear;}
.square-variant .variant-item a:hover{border: 1px solid #000000;-webkit-transition: all 0.2s linear; transition: all 0.2s linear;}

.square-variant .variant-item.colored{background:#06F; border:none; color:transparent;}
.square-variant .variant-item.colored.active{border: 1px solid #fff;}

.square-variant .error {
    display: none;
    position: absolute;
    font-size: 21px;
    line-height: 30px;
    padding: 0 6px;
    background-color: #a4001b;
    color: #fff;
    margin-left: -2px;
    border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
}