div.layout-editor-wrapper {
    grid-area: editor-container; 
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: grid;
    grid-template-columns: 300px auto 320px 60px;
    grid-template-rows: auto auto;
    overflow: hidden;
    grid-template-areas: "left-sidebar center-container treeview toolbar" "left-sidebar center-container properties toolbar";
}

div.studio-editor>div.andy-ui-container-wrapper.sub-container::before {
    content: '';
    background-color: var(--background-medium-color);
    width: 300px;
    position: absolute;
    height: 100%;
}

div.layout-editor-wrapper>div.document {
    grid-area: center-container;
    background-color: #303030;
    position: relative;
    overflow: auto;
}

div.layout-editor-wrapper>div.document>div.canvas-wrapper {
    position: absolute;
    transform: translate(0);
}

div.layout-editor-wrapper>div.document>div.canvas-wrapper>div.canvas-container {
    background-color: white;
    box-shadow: 2px 5px 14px 0px rgba(0, 0, 0, 0.75);
}

div.canvas-container {
    transform-origin: top left;
    transition: 375ms ease all;
}

div.layout-editor-wrapper>div.treeview {
    grid-area: treeview;
    border-left: #212121 2px solid;
}

div.layout-editor-wrapper>div.properties-editor {
    grid-area: properties;
    overflow: auto;
    border-left: #212121 2px solid;
}

div.layout-editor-wrapper>div.component-selector {
    grid-area: left-sidebar;
    border-right: #212121 2px solid;
    border-top: #212121 2px solid;
}

div.studio-pages-list-item{
    display: flex; 
    justify-content: center;
    align-items: center;
}

div.studio-pages-list-item>div.andy-ui-button{
    visibility: hidden;
    position: absolute;
    top: 12px;
    right: 10px;
}

div.studio-pages-list-item:hover>div.andy-ui-button{
    visibility: visible;
}