
my-elem-aside {
    position: absolute;
    display: block;
    left: calc(100% - var(--side-panel-width)); top: 0; width: var(--side-panel-width); height: 100%;
    pointer-events: all;
    background-color: rgba(255,255,255,1);
    backdrop-filter: blur(10px);
    border-left: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 0 4rem rgba(80,80,80,0.2);

    display: flex;
    flex-direction: column;

    transition: left 0.5s, width 0.5s;
    overflow: hidden;
}

/* #main_ui .side_panel_stage > div:first-child {
    position: absolute;
    right: 0; top: 0; width: 100%; height: 100%;
    overflow: auto;
}*/

@media (max-width: 800px) {
    my-elem-aside { 
        left: 100%; width: 100%; height: 100%; 
    }
}

my-elem-aside > my-elem {
    position: relative;
    display: block;
    width: 100%;
}

my-elem-aside my-elem.r_form {
    height: auto;
    overflow: hidden;
    pointer-events: all;
    border-bottom: 3px solid #555555;
    /* border-bottom: 6px solid #be3d3d; */
}    

my-elem-aside my-elem.data {
    position: relative;
    flex-grow: 1;
}    

my-elem-aside my-elem.data scroll-area {
    position: absolute;
    box-sizing: border-box;
    width: 100%; height: 100%;
    overflow-y: auto;
    pointer-events: all;
    /* padding-bottom: 30dvh; */
    /* padding: 50px 50px 30dvh 50px; */


    
    --scroll-area-track-color: #be3d3d31;
    --scroll-area-thumb-color: #be3d3d;
}


.controls my-elem-group[name='request'] {
    position: relative;
    opacity: 1!important;
    z-index: 1000;
    /* border-bottom: 10px solid #fdb9b9; */
}

.controls my-elem-group[name='request'] > .title {
    background-color: #be3d3d!important;
    color: #ffffff;
}

.controls my-elem-group[name='request'] > .title::after {
    border-color: #572d2d;
    border-color: white;
}
