
.custom-tooltip {
    position: relative;
    display: inline-block;
    height: 16px;
    width: 16px;
    background-image: url(https://img.zap.co.il/imgs/zapmobile/svg/icon-component.svg);
    cursor: pointer;
    margin-right: 5px;
    /*top: 3px;*/
}

.smart-txt .custom-tooltip {
    background-image: url(https://img.zap.co.il/imgs/svg/smart-tooltip.svg);
}

.read-more-tooltip {
    position: relative;
    display: inline-block;
    cursor:pointer;
}

    .tooltiptext, .read-more-tooltip .tooltiptext {
        /*display: flex;*/
        display: none;
        flex-direction: column;
        width: 445px;
        background-color: #FFFFFF;
        box-shadow: 0px 8px 25px 0px #DFDFDF;
        color: #000000;
        font-size: 12px;
        line-height: 18px;
        text-align: right;
        border-radius: 16px;
        padding: 16px;
        position: absolute;
        z-index: 3000;
        top: 17px;
        left: 101px;
        gap: 12px;                        
    }
        .tooltiptext .title{
            font-weight:700;
        }

        .tooltiptext .body {
            display:flex;
            gap:12px;
            flex-direction:column;
            font-weight: 400;
        }

        .tooltiptext .body p {
            margin:0;
        }

        .read-more-tooltip:hover .tooltiptext {
            visibility: visible;
        }

    .custom-tooltip.left-side .tooltiptext {
        bottom: auto;
        left: 0;
        top: -107%;
        right: 176%;
    }

.tag.left-side .tooltiptext {    
    left: 0;
}

.tooltiptext .bold
{
    font-weight:bold;
}

.tooltiptext ul {
    margin: 0 16px 0 0;
}

.custom-tooltip.left-side .tooltiptext .close {
    min-width: 20px;
    min-height: 20px;
    background: black;
    -webkit-mask: url(https://img.zap.co.il/imgs/zapmobile/svg/icon-x.svg) no-repeat center;
}

.read-more-tooltip .tooltiptext {
    left: -40%;
}
    /*.custom-tooltip .tooltiptext .title {
            display: inline-block;
            float: right;
            font-size: 23px;
            font-weight: bold;
            color: #000;
            padding-bottom: 5px;
        }*/
    .custom-tooltip .tooltiptext .body, .read-more-tooltip .tooltiptext .body {
        display: inline-block;
        float: right;
        text-align: right;
        font-size: 12px;
        font-weight: 600;
        color: #000;
    }

        .read-more-tooltip .tooltiptext .body a {
            text-decoration: underline;
            color: #444749;
        }

.custom-tooltip .tooltiptext b {
    font-size: 16px;
}
.custom-tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #FFFFFF transparent transparent transparent;
    z-index: -10;
    bottom: -10px;
    transform:none;
}
.read-more-tooltip .tooltiptext:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #FFFFFF transparent transparent transparent;
    z-index: -10;
}

.custom-tooltip.left-side .tooltiptext::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 102%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #ffff;
    z-index: -10;
}
