.svg-triangle {
    position: absolute;
    margin: 0 auto;
    overflow: visible;
}

.base-fleche-h-d {
    width: 30px;
    height: 30px;
    top: 0;
    right: 4px;
}

.base-fleche-h-g {
    width: 40px;
    height: 40px;
    top: 0;
    left: 4px;
}

.base-fleche-b-d {
    width: 40px;
    height: 1px;
    bottom: -1px;
    right: 4px;
}

.base-fleche-b-g {
    width: 40px;
    height: 1px;
    bottom: -1px;
    left: 4px;
}

.svg-triangle polygon {
    fill: #fff;
    stroke-width: 0;
}

.svg-triangle line {
    stroke: lightgrey;
}

.mon-popup {
    position: absolute;
    font-size: .66rem;
    background-color: white;
    padding: 2em .6vh .6em .6vh;
    border: solid 2px;
    border-color: darkgrey;
    border-radius: 3px;
    color: #2B2B2B;
}

.popup-gest-users {
    width: 300px;
    margin: auto;
    position: fixed;
    top: 40%;
    left: 50%;
    height: auto;
    font-weight: 800;
    font-size: 1.1rem !important;
    z-index: 999999
}

@media (max-width: 991px) {
    .popup-gest-users {
        top: 40%;
        left: 35%;
    }
}

@media (max-width: 520px) {
    .popup-gest-users {
        top: 40%;
        left: 23%;
    }
}

@media (max-width: 440px) {
    .popup-gest-users {
        top: 40%;
        left: 15%;
    }
}

@media (max-width: 375px) {
    .popup-gest-users {
        top: 40%;
        left: 11%;
    }
}

.light-blue-border {
    border: solid 3px !important;
    border-color: #019F9C !important;
}


.tuto-suivant {
    float: right;
    color: cornflowerblue;
    cursor: pointer;
}


.mon-btn-close {
    position: absolute;
    right: .5vh;
    top: 0.2em;
    font-weight: 700;
    cursor: pointer;
}
.mon-btn-close.gauche {
   
    left: .5vh;

}
.hidden {
    display: none !important;
}


.mon-popup > div.mon-popup-body {
    margin-top: .2em !important;
    margin-bottom: 1rem !important;
}