#text {
    margin: 50px auto;
    width: 500px
}

.hotspot {
    cursor: pointer;
}

#tt {
    position: absolute;
    z-index: 99999;
    display: block;
    background: url(../img/tooltip/tt_left.gif) top left no-repeat
}

#tttop {
    display: block;
    height: 5px;
    margin-left: 5px;
    background: url(../img/tooltip/tt_top.gif) top right no-repeat;
    overflow: hidden;
    z-index: 99999
}

#ttcont {
    display: block;
    padding: 2px 12px 3px 7px;
    margin-left: 5px;
    background: #666;
    color: #FFF;
    z-index: 99999
}

#ttbot {
    display: block;
    height: 5px;
    margin-left: 5px;
    background: url(../img/tooltip/tt_bottom.gif) top right no-repeat;
    overflow: hidden;
    z-index: 99999
}


/*  quello nuovo*/

.tooltip {
    /*position: relative;
    display: inline-block;
    width: auto;
    background: #25a955;
    color: white;
    padding: 6px;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 10px;
    top: -2px;
    cursor: pointer;
    text-align: center;*/
}

    .tooltip .tooltiptext {
        visibility: hidden;
        position: absolute;
        width: 204px;
        background-color: rgb(79 79 79 / 90%);
        color: #fff;
        text-align: center;
        padding: 10px;
        border-radius: 6px;
        z-index: 1;
        opacity: 0;
        transition: opacity .6s;
        font-size: 14px;
        text-shadow: 0 1px black;
        font-weight: normal;
    }

.box.contenuto .icone .tooltip .tooltiptext {
    width: 92px;
}

.box.contenuto .icone .tooltip-top {
    bottom: 30px;
    left: 107%;
    margin-left: -65px;
}

.tooltip:hover .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-right {
    top: -5px;
    left: 125%;
}

.tooltip-right2 {
    top: -5px;
    left: 105%;
}

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

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

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

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

.tooltip-top {
    bottom: 29px;
    left: 0%;
    margin-left: -91px;
}

.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: -12px;
    bottom: auto;
    right: 128%;
}

/* quanti in carr */
.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;
}