:root{    
    --color_outline1: #c3c3c3;
    --color_grey1: #c3c3c3; 
    --color_grey_light1: #e9e9e9; 

    --color_red_light1: #fdf7f7; 
    --color_green_light1: #f6faef;
    --color_blue_light1: #f7fdf8;   
  }

body, html{
    height: 99%;
}

iframe{
    position:fixed;
    height:100%; width: 22rem;
    left: 0rem;
}

/* class */
.layout0 {
    display: flex; /* ADDED */
    /* background-color: bisque; */
        
    height: 99%; width: 100%;
      
    border: 1px solid var(--color_outline1);
    

}


.top0a
{
    align-content: center;
    text-align: center;
    
    height: 2.2rem; width: 100%;

    /*border-bottom: 2px solid #c3c3c3;*/
    /*box-shadow: 0 2px 4px rgba(0,0,0, .2);*/
    opacity: 1;
    
}


.left0b {
    width: 22rem; height: 100%;
    display: block;

    transition: all .3s ease-out, opacity .5s linear; 
}

.right0c {
    float: left; 
    
    height: 100%;  width: 100%;
    flex: 1; /* ADDED */
    overflow: hidden;
    background-color: white;
    position: sticky;
}

iframe.iframe0c{
    position: relative; /* We need to add this to help position the left & top property of the element. Else it would just be on the top of container tag. */
    left: 0%; top: 0;
    width: 99%; height: 10;

}

#iframe0b{
    width: 23rem; 
}



/* Middle Spliter */
.middle {
    border: 5px solid white; 
    border-left: 1px solid #c3c3c3; 

    width: 10px;
    background-color: white; 
    position: relative;
}

.middle:hover{
    background-color:  var(--color_grey_light1);
    border: 5px solid var(--color_grey_light1);
    border-left: 1px solid var(--color_grey_light1);
    
    cursor: ew-resize;
}




/* Center */
.centered {
position: absolute; top: 50%; left: 50%; 
transform: translate(-50%, -50%); text-align: center;

}


.centered img { width: 150px; border-radius: 50%; }