:root {
    --dividers_width: 3px;
}


.canvas_view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--canvas_background_color);
}

/*=============================*/
/*  Styles for the four views  */
/*=============================*/
/* Main container */
.designer #views_container {
    position: relative;
    height: 100vh;
    background: url('images/background_shape3d.png'), center;
    background-position: center;
    background-size: cover; /* ou contain selon vos besoins */
    background-repeat: no-repeat;
}

/* Style des panneaux contenant les canevas */
.designer .panel {
    position: absolute;
    overflow: hidden;
    background-color: #ffffff;
}

.designer canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.designer .iframe_viewer3d {
    width: 100%;
    height: 100%;
    padding: 0.8rem;
    border: none;
}
/* --- Dividers styles --- */
.designer .v-divider, .h-divider {
    position: absolute;
    background-color: #fff;
    transition: background-color 0.2s;
    z-index: 10;
}

.designer .v-divider {
    cursor: col-resize;
    width: var(--dividers_width);
}

.designer .h-divider {
    cursor: row-resize;
    height: var(--dividers_width);
}

.designer #center-handle {
    position: absolute;
    width: 16px; /* Plus grand pour être plus facile à saisir */
    height: 16px;
    background-color: #007bff; /* Couleur distincte quand actif */
    border: 2px solid white;
    border-radius: 50%;
    cursor: move;
    z-index: 20;
    display: none; /* Caché par défaut */
    transform: translate(-50%, -50%); /* Centrage parfait */
}

/* Hover effect */
.designer .v-divider:hover, .h-divider:hover {
    background-color: #007bff;
}

/* View icons*/
.designer .view_icon {
    position: absolute;
    left: 5px;
    width: 24px;
    height: 24px;
}

    .designer .view_icon:hover {
        cursor: pointer;
        background-color: #007bff;
    }