[tooltip]:before {
    /* needed - do not touch */
    content: attr(tooltip);
    position: absolute;
    opacity: 0;
    
    /* customizable */
    /*transition: all 0.15s ease;*/
    padding: 5px;
    color: white;
    /*border: 1px solid black;*/
    /*border-radius: 4px;*/
    /*box-shadow: 3px 3px 1px silver;    */
}

[tooltip]:hover:before {
    /* needed - do not touch */
    opacity: 1;
    
    /* customizable */
    background: black;
    margin-top: -25px;
    margin-left: 0px;    
}

[tooltip]:not([tooltip-persistent]):before {
    pointer-events: none;
}

div.multicolorstate {
    padding: 0px;
    overflow: hidden;
}

div .multicolorstate-item {
    margin: 2px;
    float: left;
    text-align: center;
    padding: 5px;
    border: 1px solid #000000;     
    border-radius: 5px;
}

    div .multicolorstate-item.selected {
        background: url(/img/mcs-check.png) no-repeat;
        background-size: 16px 16px;
        background-position: 16px;
    }

        div .multicolorstate-item.selected:hover {
            background-position: 13px;
        }

div .multicolorstate-item:hover {
    border: 4px solid #000000;     
    padding: 2px;
}

div .multicolorstate-item:hover.selected {
    border: 4px solid #000000;     
    padding: 2px;
}