/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: #7C84E8;
    color: #FFFFFF;
    text-align: start;
    padding: 20px;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* ====== Tooltip position ====== */

/* == right == */
.tooltip .tooltip_right {
    bottom: 60%;
    left: 115%;
}
.tooltip .tooltip_right_freemium {
    bottom: 0;
    left: 115%;
}
/* == left == */
.tooltip .tooltip_left {
    bottom: 60%;
    right: 115%;
}
/* == top == */
.tooltip .tooltip_top{
    width: 250px;
    bottom: 13vh;
    right: 30%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltip .tooltip_top_right{
    width: 250px;
    bottom: 13vh;
    left: 60%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

/* == bottom == */
.tooltip .tooltip_bottom {
    width: 250px;
    top: 8vh;
    right: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
@media screen and (min-width: 1200px){
    .tooltip .tooltip_bottom {
        width: 250px;
        top: 9vh;
        right: 50%;
        margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
    }
    .tooltip .tooltip_top{
        width: 250px;
        bottom: 8vh;
        right: 30%;
        margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
    }
    .tooltip .tooltip_top_right{
        width: 250px;
        bottom: 8vh;
        right: 30%;
        margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
    }
}

/* ====== Tooltip arrow position ====== */

/* == right == */
.tooltip .tooltip_arrow_right::after {
    content: " ";
    position: absolute;
    top: 90%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #6E76E5;
}

/* == left == */
.tooltip .tooltip_arrow_left::after {
    content: " ";
    position: absolute;
    top: 90%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #6E76E5 transparent transparent;
}

/* == top == */
.tooltip .tooltip_arrow_top::after {
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 80%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #6E76E5 transparent;
}

/* == bottom == */

.tooltip .tooltip_arrow_bottom::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #6E76E5 transparent transparent transparent;
}
.tooltip .tooltip_arrow_bottom_left::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 20%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #6E76E5 transparent transparent transparent;
}

.tooltip .tooltip_arrow_bottom_right::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 80%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #6E76E5 transparent transparent transparent;
}

/* ====== Tooltip size ====== */

.tooltip_lg{
    width : 300px !important;
}

.tooltip_top_xl{
    width : 400px !important;
    height : 260px !important;
    text-align : start !important;
}


.tooltip .tooltiptext {
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    opacity: 1;
}

.tooltip_show {
    opacity: 1 !important;
    visibility: visible !important;
    display:block !important;
}