.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        position: absolute;
        width: 230px;
        background-color: #fff;
        color: #373a36;
        text-align: left;
        padding: 10px;
        border-radius: 6px;
        border: 2px solid #373a36;
        z-index: 1;
        opacity: 0;
        transition: opacity 1s;
        font-weight: bold;
        font-size: 15px;
    }

    .tooltip:hover .tooltiptext,
    .tooltip.tooltip-active .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    .tooltip .tooltiptext2 {
        visibility: hidden;
        position: absolute;
        width: 120px;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        z-index: 1;
    }

    .tooltip:hover .tooltiptext2 {
        visibility: visible;
    }

    .tooltip:hover .tooltip-title {
        font-weight: bold;
    }

    .tooltip .tooltiptext.tooltip-bottom4 {
        top: 30px;
        left: 0;
        font-weight: normal;
        font-size: 12px;
        padding: 5px;
        width: 260px;
    }

        .tooltip .tooltiptext.tooltip-bottom4::after {
            left: 50px;
        }

        .tooltip .tooltiptext.tooltip-bottom4 p {
            margin: 0;
            margin-top: 5px;
        }

        .tooltip .tooltiptext.tooltip-bottom4 p:first-of-type {
            margin-top: 0;
        }

.tooltip-right {
    top: 15px;
    left: 118%;
}

.tooltip-right2 {
    top: -41px;
}

.tooltip-right3 {
    top: -41px;
}

.tooltip-right::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -8px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent #555 transparent transparent;
}

.tooltip-bottom {
    top: 106%;
    left: -12px;
}

    .tooltip-bottom::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -15px;
        border-width: 15px;
        border-style: solid;
        border-color: transparent transparent #555 transparent;
    }

.tooltip-top {
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
}

.tooltip-top2 {
    bottom: 115%;
    left: 50%;
    margin-left: -60px;
}

.tooltip-top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip-left {
    top: -5px;
    bottom: auto;
    right: 128%;
}

.tooltip-left2 {
    top: -5px;
    bottom: auto;
    right: 105%;
}

.tooltip-left::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #555;
}

.tooltip .tooltiptext-bottomarrow {
    visibility: hidden;
    width: 120px;
    background-color: #111;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 130%;
    left: 50%;
    margin-left: -60px;
}

    .tooltip .tooltiptext-bottomarrow::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
    }

.tooltip:hover .tooltiptext-bottomarrow {
    visibility: visible;
}

.tooltip .tooltiptext-toparrow {
    visibility: hidden;
    width: 120px;
    background-color: #111;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

    .tooltip .tooltiptext-toparrow::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent black transparent;
    }

.tooltip:hover .tooltiptext-toparrow {
    visibility: visible;
}

.tooltip .tooltiptext-leftarrow {
    visibility: hidden;
    width: 120px;
    background-color: #111;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 110%;
}

    .tooltip .tooltiptext-leftarrow::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent black transparent transparent;
    }

.tooltip:hover .tooltiptext-leftarrow {
    visibility: visible;
}

.tooltip .tooltiptext-rightarrow {
    visibility: hidden;
    width: 120px;
    background-color: #111;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 110%;
}

    .tooltip .tooltiptext-rightarrow::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent transparent black;
    }

.tooltip:hover .tooltiptext-rightarrow {
    visibility: visible;
}

@media only screen and (max-width: 480px) {
    /*.tooltip-bottom::after {
        display: none;
    }*/

    .tooltip-bottom {
        top: 130px;
    }

    .tooltip-bottom1 {
        left: 0;
        right: auto;
    }

        .tooltip-bottom1::after {
            left: 45px;
        }

    .tooltip-bottom2 {
        left: -65px;
        right: auto;
    }

        .tooltip-bottom2::after {
        }

    .tooltip-bottom3 {
        right: 0;
        left: auto;
    }

        .tooltip-bottom3::after {
            left: 180px;
        }

    .tooltip .tooltiptext.tooltip-bottom4 {
        top: 30px;
        left: auto;
        right: -10px;
        width: 249px;
    }

        .tooltip .tooltiptext.tooltip-bottom4::after {
            left: 200px;
        }

    .tooltip .tooltiptext {
        position: absolute;
        width: 200px;
        padding: 10px;
        font-size: 12px;
    }
}