.check-ok,
.check-error,
.check-warning {
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
}

span.relative {
    position: relative;
}

span.relative > .check-ok,
span.relative > .check-error,
span.relative > .check-warning {
    margin-top: -38px;
    left: -6px;
}


.size-12 { font-size: 12px; }

.size-14 { font-size: 14px; }

.size-16 { font-size: 16px; }

.size-18 { font-size: 18px; }

.size-21 { font-size: 21px; }

.size-24 { font-size: 24px; }

.size-36 { font-size: 36px; }

.size-48 { font-size: 48px; }

.size-60 { font-size: 60px; }

.size-72 { font-size: 72px; }



.error {
    position: absolute;
    z-index: 1;
    line-height: 14px;
    font-size: 11px;
    display: none;
    min-width: 150px!important;
    padding: 3px 8px;
    color: #fff;
    text-align: left;
    text-decoration: none;
    background-color: red;
    border: 2px solid #333;
    right: -130px;
    top: -38px;
    opacity: .8;
}

.error:after, .error:before {
    top: 100%;
    border: solid;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.error:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #fef3f3;
    border-width: 8px;
    left: 10%;
    margin-left: -8px;
}
.error:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #333;
    border-width: 11px;
    left: 10%;
    margin-left: -11px;
}