/*
    SOURCE:
    https://www.w3schools.com/css/css_tooltip.asp
*/

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



/* ***** Tooltip SMALL ***** */

.tooltip .tooltip_small {
    visibility: hidden;
    width: 40px;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px; /* rounded bubble */

    /* Position the tooltip text */
    position: absolute;
    z-index: 3; /* make sure tooltip is in front of amcharts */
    bottom: 125%;
    left: 50%;
    margin-left: -20px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltip_small::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

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



/* ***** Tooltip MEDIUM ***** */

.tooltip .tooltip_medium {
    visibility: hidden;
    width: 70px;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px; /* rounded bubble */

    /* Position the tooltip text */
    position: absolute;
    z-index: 3; /* make sure tooltip is in front of amcharts */
    bottom: 125%;
    left: 50%;
    margin-left: -35px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltip_medium::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

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



/* ***** Tooltip LARGE ***** */

.tooltip .tooltip_large {
    visibility: hidden;
    width: 130px;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 3px 3px 3px 3px;
    border-radius: 6px; /* rounded bubble */

    /* Position the tooltip text */
    position: absolute;
    z-index: 3; /* make sure tooltip is in front of amcharts */
    bottom: 125%;
    left: 50%;
    margin-left: -70px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltip_large::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

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



/* ***** Tooltip ATTENDANCE ***** */

.tooltip .tooltip_attendance {
    visibility: hidden;
    width: 150px;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 3px 3px 3px 3px;
    border-radius: 6px; /* rounded bubble */

    /* Position the tooltip text */
    position: absolute;
    z-index: 3; /* make sure tooltip is in front of amcharts */
    bottom: 125%;
    left: 50%;
    margin-left: -120px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltip_attendance::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 77%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

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



/* ***** Tooltip TWITTER_NAME ***** */

.tooltip .tooltip_twitter_name {
    visibility: hidden;
    width: 100px;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 3px 3px 3px 3px;
    border-radius: 6px; /* rounded bubble */

    /* Position the tooltip text */
    position: absolute;
    z-index: 3; /* make sure tooltip is in front of amcharts */
    bottom: 125%;
    left: 50%;
    margin-left: -50px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltip_twitter_name::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

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




/* ***** Tooltip VOTE_EXPL_?? ***** */

.tooltip .tooltip_vote_expl_LEFT {
    visibility: hidden;
    width: 300px;
    background-color: #000;
    color: #fff;
    text-align: left;
    padding-top:    5px;
    padding-bottom: 5px;
    padding-right:  5px;
    padding-left:   5px;
    border-radius: 6px; /* rounded bubble */

    /* Position the tooltip text */
    position: absolute;
    z-index: 3; /* make sure tooltip is in front of amcharts */
    bottom: 125%;
    left: 50%;
    margin-left: -50px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltip_vote_expl_LEFT::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 16%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

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



.tooltip .tooltip_vote_expl_MIDL {
    visibility: hidden;
    width: 300px;
    background-color: #000;
    color: #fff;
    text-align: left;
    padding-top:    5px;
    padding-bottom: 5px;
    padding-right:  5px;
    padding-left:   5px;
    border-radius: 6px; /* rounded bubble */

    /* Position the tooltip text */
    position: absolute;
    z-index: 3; /* make sure tooltip is in front of amcharts */
    bottom: 125%;
    left: 50%;
    margin-left: -150px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltip_vote_expl_MIDL::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

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



.tooltip .tooltip_vote_expl_RGHT {
    visibility: hidden;
    width: 300px;
    background-color: #000;
    color: #fff;
    text-align: left;
    padding-top:    5px;
    padding-bottom: 5px;
    padding-right:  5px;
    padding-left:   5px;
    border-radius: 6px; /* rounded bubble */

    /* Position the tooltip text */
    position: absolute;
    z-index: 3; /* make sure tooltip is in front of amcharts */
    bottom: 125%;
    left: 50%;
    margin-left: -230px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltip_vote_expl_RGHT::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 75%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

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