.button-color {
    background: #8b00da;
    color: white;
    border: solid 1px transparent;
    padding: 10px;
    transition: 0.5s;
    border-radius: 3px;
    width: 42%;
    margin-left: 5%;
}
.button-color:hover {
    background: white;
    color: #8b00da;
    border-color: #8b00da;
    transition: 0.5s;
}

.modal-buttons {
    margin-top :10px;
}

.tooltips {
    position: relative;
    display: inline;
}

.tooltips span {

    font:300 15px, sans-serif;
    position: absolute;
    color: #FFFFFF;
    background: #000000;
    padding:5px 10px;
    border-radius: 10px;
    width:150px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    transition: opacity .6s ;
}

.tooltips > span img{max-width:140px;}

.tooltips[tooltip-position="top"] span{
    margin-left:10px;
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

.tooltips[tooltip-position="bottom"] span{
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

.tooltips[tooltip-position="left"] span{
    margin-top:30px;
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

.tooltips[tooltip-position="right"] span{
    margin-top:30px;
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

.tooltips span:after {
    content: '';
    position: absolute;
    width: 0; height: 0;
}

.tooltips[tooltip-position="top"] span:after{
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-top: 8px solid black;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

.tooltips[tooltip-position="bottom"] span:after{
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    border-bottom: 8px solid black;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

.tooltips[tooltip-position="left"] span:after{
    top: 50%;
    left: 100%;
    margin-top: -8px;
    border-left: 8px solid black;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.tooltips[tooltip-position="right"] span:after{
    top: 50%;
    right: 100%;
    margin-top: -8px;
    border-right: 8px solid black;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.tooltips:hover span {
    visibility: visible;
    opacity: 1;
    z-index: 999;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    filter: alpha(opacity=100);
}

.tooltips[tooltip-position="top"]:hover span{
    bottom: 30px;
    left: 50%;
    margin-left: -76px;
}

.tooltips[tooltip-position="bottom"]:hover span{
    top: 30px;
    left: 50%;
    margin-left: -76px;
}

.tooltips[tooltip-position="left"]:hover span{
    right: 100%;
    top: 50%;
    margin-top: -15px;
    margin-right: 15px;
}

.tooltips[tooltip-position="right"]:hover span{
    left: 100%;
    top: 50%;
    margin-top: -15px;
    margin-left: 15px;
}

.tooltips[tooltip-type="primary"] > span {
    background-color:#2980b9;
}

.tooltips[tooltip-type="primary"][tooltip-position="top"] > span:after{
    border-top: 8px solid #2980b9;
}

.tooltips[tooltip-type="primary"][tooltip-position="bottom"] > span:after{
    border-bottom: 8px solid #2980b9;
}

.tooltips[tooltip-type="primary"][tooltip-position="left"] > span:after{
    border-left: 8px solid #2980b9;
}

.tooltips[tooltip-type="primary"][tooltip-position="right"] > span:after{
    border-right: 8px solid #2980b9;
}

.tooltips[tooltip-type="success"] > span {
    background-color:#27ae60;
}

.tooltips[tooltip-type="success"][tooltip-position="top"] > span:after{
    border-top: 8px solid #27ae60;
}

.tooltips[tooltip-type="success"][tooltip-position="bottom"] > span:after{
    border-bottom: 8px solid #27ae60;
}

.tooltips[tooltip-type="success"][tooltip-position="left"] > span:after{
    border-left: 8px solid #27ae60;
}

.tooltips[tooltip-type="success"][tooltip-position="right"] > span:after{
    border-right: 8px solid #27ae60;
}

.tooltips[tooltip-type="warning"] > span {
    background-color:#f39c12;
}

.tooltips[tooltip-type="warning"][tooltip-position="top"] > span:after{
    border-top: 8px solid #f39c12;
}

.tooltips[tooltip-type="warning"][tooltip-position="bottom"] > span:after{
    border-bottom: 8px solid #f39c12;
}

.tooltips[tooltip-type="warning"][tooltip-position="left"] > span:after{
    border-left: 8px solid #f39c12;
}

.tooltips[tooltip-type="warning"][tooltip-position="right"] > span:after{
    border-right: 8px solid #f39c12;
}

.tooltips[tooltip-type="danger"] > span {
    background-color:#c0392b;
}

.tooltips[tooltip-type="danger"][tooltip-position="top"] > span:after{
    border-top: 8px solid #c0392b;
}

.tooltips[tooltip-type="danger"][tooltip-position="bottom"] > span:after{
    border-bottom: 8px solid #c0392b;
}

.tooltips[tooltip-type="danger"][tooltip-position="left"] > span:after{
    border-left: 8px solid #c0392b;
}

.tooltips[tooltip-type="danger"][tooltip-position="right"] > span:after{
    border-right: 8px solid #c0392b;
}