:root {
    --sidebar_width: 300px;
    --full-vw: 100vw;
    --full-vh: 100vh;
}
.home_mat_sidebar  .form-control{
    font-size: 12px !important;
    padding: 5px 10px !important;
}
.home_mat_sidebar{
    overflow-y: auto;
}
.input-utils{
    width: 70px !important;
    text-align: center;
}
.input-utils-assistance{
    width: 50px !important;
    /* font-size: 14px; */
    text-align: center;
}
.utils-block{
    box-shadow: 0px 4px 4px 0px #00000040;
    border-radius: 10px;
}
.btn-default{
    border: 1px solid #EEEEEE;
}
.canvas-container {
    position: relative;
    flex-grow: 1;
    height: 100%;
}

/* Full-page grid canvas */
#gridCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--full-vw);
    height: var(--full-vh);
    z-index: 0; /* Below sidebar, toolbar, and chart */
}
/* Chart canvas */
#drawCanvas {
    position: relative;
    margin-left: var(--sidebar_width); /* Offset for sidebar */
    z-index: 1; /* Above the grid */
    width: calc(var(--full-vw) - var(--sidebar_width)); /* Adjust width based on sidebar */
    height: var(--full-vh);
}
/* Toolbar positioned inside the chart canvas */
#toolbar{
    position: fixed;
    margin-left: var(--sidebar_width); /* Offset for sidebar */
    top: 10px;
    width: calc(var(--full-vw) - var(--sidebar_width) );
    z-index: 3; /* Top layer */

    
     
}
/* Sidebar */
#sidebar{
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar_width);
    z-index: 2; /* Top layer */
}

/* Custom switch style */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #D6FADE;
    border-color: #D6FADE;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #9FC5A5;
    border-color: #9FC5A5;
}


/* Hide arrows for number inputs */
input[type="number"].no-arrows {
    -moz-appearance: textfield;
}
  
input[type="number"].no-arrows::-webkit-outer-spin-button,
input[type="number"].no-arrows::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.actionMode{
    border: 2px solid #E0A82E;
}