div.andy-studio-modal{
    width: 100%;
    z-index: -1;
    visibility: hidden;
    pointer-events: none;
    background-color: #303030;
    border-radius: 0px;
    box-sizing: border-box;
    display: grid; 
    right: 0px;
    position: absolute;
    top: 60px;
    bottom: 0px;
    left: 0px;
    grid-template-columns: 300px auto;
    grid-template-rows: 60px auto;
    grid-template-areas: "studio-list-header studio-nav" "studio-editor studio-editor";
}

div.andy-studio-modal>div.studio-editor>div.andy-ui-container-wrapper>div.andy-ui-container{
    display: grid; 
    grid-template-columns: 300px auto;
    grid-template-rows: auto;
    grid-template-areas: "side-list editor-container";
    padding: 0px;
}

div.andy-studio-modal>div.studio-editor>div.andy-ui-container-wrapper>div.andy-ui-container>div.side-list{
    display: grid; 
    grid-template-columns: auto ;
    grid-template-rows: auto 60px;
    grid-template-areas: "list-content" "list-footer";
    background-color: var(--background-medium-color);
}

div.andy-studio-modal>div.studio-editor>div.andy-ui-container-wrapper>div.andy-ui-container>div.side-list>div.content{
    grid-area: list-content;
}

div.andy-studio-modal>div.studio-editor>div.andy-ui-container-wrapper>div.andy-ui-container>div.side-list>div.footer{
    grid-area: list-footer;
}

div.andy-studio-modal.show {
    z-index: 999;
    visibility: visible;
    pointer-events: all;
    position: absolute;
    right: 0px;
    top: 60px;
    bottom: 0px;
    left: 0px;
}

div.andy-studio-modal>div.studio-list-header{
    grid-area: studio-list-header;
    background-color: var(--background-medium-color);
}


div.andy-studio-modal>div.studio-nav{
    grid-area: studio-nav;
}

div.andy-studio-modal>div.studio-editor{
    grid-area: studio-editor;
}


div.studio-page-editor{
    width: 100%;
    height: 100%;
    top: 0px; 
    left: 0px;
    position: absolute;
}


div.schedule-list.selected{
    background-color: var(--hover-dark-color);
    border-radius: 5px;
}

div.schedule-list>div.schedule-color{
    width: 20px;
    height: 20px;
    margin: 10px;
    border-radius: 50%;
    border: 1px solid #525556;
    box-sizing: border-box;
    overflow: hidden;
}