.tooltip, .tooltip-2, .tooltip-3, .tooltip-4{
        text-align: center;
        display: inline-block;
        vertical-align: top;
        font-size: 15px;
        color: #ffffff;
        font-family: 'Roboto', sans-serif;
        cursor: pointer;
    }
    .tooltip2{
        text-align: center;
        border: 1px solid black;
    }

    .tip{
        color: wheat;
        padding: 5px 15px 5px 10px;
        position: absolute;
        background: #000;
        max-width: 200px;
        font-family: 'Roboto', sans-serif;
        color: #ffffff;
		border-radius:3px;
		line-height:20px;
		height:21px;
		margin-top:11px;
		z-index:1000;
    }

    .show{
        opacity: 1.0;
    }
    .shadow{
        background: rgba(0,0,0,0.5);
        height: 100%;
        position: fixed;
        width: 100%;
        z-index: -1;
    }
    .common::before {
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        transform: translatex(-50%);
    }

    .horizontal::before{
        left: 50%;
    }

    .common::before {
        border-color: rgba(194, 225, 245, 0);
        border-width: 10px;
    }

    .bottom::before {
        border-bottom-color: #000;
        bottom: 100%;
    }

    .top::before {
        border-top-color: #000;
        top:100%;
        left: 50%;
    }

    .left::before {
        border-left-color: #000;
        right: -27px;
    }

    .right::before {
        border-right-color: #000;
        left: -8px;
    }