header a.root-item-selected {color: #30266b !important;
    border-bottom-color: #30266b !important;
}
.main_h1{padding-top:50px;}
.mf-ok-text{color:green;margin-bottom:10px;}
.char,.qal{position:relative;width:45%;background:#ebebeb;line-height:50px;display:inline-block;text-align:center;color:#30266b;text-decoration:none;font-size:110%;}
.char:hover,.qal:hover{text-decoration:underline;}
.char{float:left;}
.qal{float:right;}
.a_hidden{/*display:none;*/position:absolute;top:-30px;left:50%;font-size:80%;display:inline-block;line-height:20px;margin-left:-60px;

}

.i-have-a-tooltip {

}

.i-have-a-tooltip:before {
    content:attr(data-description);
    box-sizing:border-box;
    display:block;
    background:rgba(0,0,0,.7);
    color:white;
    padding:4px 10px;
    position:absolute;
    left:50%;
    top:-30px;
    margin-left:-100px;

    height:28px;
    line-height:20px;
    border-radius:5px;
    opacity:0;
    transition:.25s ease-in-out;
    font-size:90%;
}

.i-have-a-tooltip:after {
    content:'';
    display:block;
    position:absolute;
    top:-2px;
    left:50%;
    margin-left:-8px;
    height:0;
    width:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:8px solid rgba(0,0,0,.7);
    transition:.25s ease-in-out;
    opacity:0;
}

.i-have-a-tooltip:hover:before {
    opacity:1;
    top:-40px;
}

.i-have-a-tooltip:hover:after {
    opacity:1;
    top:-12px;
}