/* ------- Début - SPLITTER BAR CSS ------- */

.leftSide,.rightSide,.splitter{position:absolute;height:100%;overflow:hidden}
.splitter{width:10px;z-index:2;cursor:col-resize}
.leftSide>div,.rightSide>div{height:100%;width:100%;position:relative}
.div-1-content, .div-2-content{height:100%;width:100%;}
.splitter-dotelec{
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
}

[id^=splitter-dotelec-]{
    /* Sans ça, la hauteur est au minimum par défaut et ça fait un saut d'affichage */
    height: 100%; 
}

#splitter-dotelec-gauche{ 
    /* Ajout du scroll horizontal si splitter trop à gauche */
    overflow-x: auto;
    overflow-y: hidden;
}

.splitter{
    width: 8px;
    top: 20px;
    height: calc(100% - 40px);
    border-radius: 2px;
    cursor: ew-resize;
    /* background-color: #c9c9c9 !important; */
    background-color: transparent !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.splitter:hover::after{
    content: ' ';
    width: 8px;
    position: absolute;
    border-radius: 5px;
    background-color: #c9c9c9;
    left: 1px;
    height: 24px;
    top: calc(50% - 24px / 2);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiPg0KICAgIDxjaXJjbGUgY3g9IjQiIGN5PSI0IiByPSIyIiBmaWxsPSIjN0M3QzdDIi8+DQo8L3N2Zz4=);
    background-position: center;
    background-size: 8px;
}
.splitter:hover::before{
    content: ' ';
    width: 2px;
    height: 100%;
    position: absolute;
    /* background-color: #c9c9c9 */
    background-color: #c9c9c9
}
.splitter .circle{
    width: 4px;
    height: 4px;
    border-radius: 2px;
    margin: 2px 0;
    background-color: #7c7c7c;
}

/* -------- Fin - SPLITTER BAR CSS -------- */