body{
    background-color: var(--z0);
    color: var(--text-high);
}

input:enabled, textarea:enabled{
    background-color: #7676762e
}

.sidebar{
    background-color: var(--z0);
    border: var(--z1) 1px solid;
}
header{
    font-size: 16px;
    color: var(--text-low);
    height: 40px;
    background-color: var(--z2);
}

.footer{
    background-color: var(--t1);
    color: var(--text-high);
}

.control-button{

    border: none;
}

button{
    background-color: var(--z2);
    border: none;
    color: var(--text-high);
}

button:hover{
    background-color: #c7c7c7;
}

button:active{
    background-color: #bebebe;
}


.sidebar-tab-btn{
    border-left: var(--z1) 2px solid;
}


.sidebar-tab-btn.active{
    background-color: var(--z2);
    border-left: var(--z4) 2px solid;
}

.option{
    background-color: var(--z2);
}
.option:hover{
    background-color: var(--z3);
}

.ListEditorItem-item{
    border-radius: 4px;
    background-color: var(--z2);
    border: var(--z1) 1px solid;
    color: var(--text-high);
}

.ListEditorItem-item button{
    border: var(--z3) 1px solid;
}

.ErrorPopup-error-popup{

    background-color: var(--z1);
    border: 1px solid var(--z3);
    stroke: var(--z3);
}

.OptionsEditor-select{
    background-color: var(--z2);
    color: inherit;
}

input, textarea{
    background-color: var(--z2);
    color: inherit;
    /* no resize */
    resize: none;
}

textarea:disabled{
    background-color: transparent;
}


::-webkit-scrollbar {
  width: 5px; /* You can adjust the width as needed */
}

/* Style the scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
  background-color: var(--z3); /* Change the color as desired */
  border-radius: 1px; /* Add rounded corners if you like */
}