/*
Put here the style for Desktop, Tablette and Mobile specific to this widget 
*/
.info-bulle-bloc {
    display: none;
    position: absolute;
    z-index: 9999;
    box-shadow: 3px 3px 7px 2px rgb(1 1 1/13%);
    background-color: #111;
    color: #fff;
    padding: 5px;
    text-align: center;
    border-radius: 5px
}

.info-with-header {
    background-color: transparent;
    padding: 0
}

.info-with-header .header-info-bulle {
    background-color: #46a9d5;
    color: #fff;
    padding: 5px;
    border-radius: 5px 5px 0 0
}

.info-with-header .content-info-bulle {
    background-color: #fff;
    color: #111;
    padding: 5px;
    border-radius: 0 0 5px 5px
}

.info-bulle-bloc[info-bulle-position=bottom]:after,.info-bulle-bloc[info-bulle-position=bottom]:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.info-bulle-bloc[info-bulle-position=bottom]:after {
    border-color: transparent transparent #111;
    border-width: 5px;
    margin-left: -8px
}

.info-bulle-bloc[info-bulle-position=bottom]:before {
    border-color: transparent transparent #111;
    border-width: 6px;
    margin-left: -10px
}

.info-bulle-bloc[info-bulle-position=left]:after,.info-bulle-bloc[info-bulle-position=left]:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent transparent transparent #111;
    border-width: 5px;
    margin-top: -5px
}

.info-bulle-bloc[info-bulle-position=left]:before {
    border-width: 6px
}

.info-bulle-bloc[info-bulle-position=right]:after,.info-bulle-bloc[info-bulle-position=right]:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent #111 transparent transparent;
    border-width: 5px;
    margin-top: -5px
}

.info-bulle-bloc[info-bulle-position=right]:before {
    border-width: 6px
}

.info-bulle-bloc[info-bulle-position=top]:after,.info-bulle-bloc[info-bulle-position=top]:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.info-bulle-bloc[info-bulle-position=top]:after {
    border-color: #111 transparent transparent;
    border-width: 5px;
    margin-left: -8px
}

.info-bulle-bloc[info-bulle-position=top]:before {
    border-color: #111 transparent transparent;
    border-width: 6px;
    margin-left: -10px
}

[info-bulle] .fa-info,[info-bulle].fa-info {
    cursor: help;
    padding: 2px 7px;
    border-radius: 11px;
    background: #ddd;
    font-size: var(--fs-400)
}
/* ===================================== Begin Desktop ================================ */
/* ===================================== End Desktop ================================== */

/* ===================================== Begin Tablette =============================== */
/* ===================================== End Tablette ================================= */

/* ===================================== Begin Mobile ================================== */
/* ===================================== End Mobile ==================================== */