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

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


/* 0. Main ChatBox */
#div_main0 {
    margin-top: -10px;
}


#div_main0, #div0, #quiz0{
    padding: 10px;
    width: 99%;
}

#div0{
    height: 20rem; padding-top: 1px;
    border: 1px solid black; 
    overflow-y: scroll; 
    overflow-wrap: 'break-word';
    width: 99%;
}


#quiz0{
    height: 2rem;
    margin-top: 10px;  
    resize: vertical; 
    min-height: 2rem;
    max-height: 12rem;
    width: 99%;

    margin-bottom: -10px;
}


/* 0. Left Panel */
#div_left0 {
    margin-left: -225px; 
    margin-right: 10px;
    background-color: antiquewhite;
    z-index: 2; width: 12rem;
    margin-bottom: 5px;
    padding: 10px; 
    padding-top: 1px;
    user-select: none;
    border: 1px solid gray; 
    transition: all .3s ease-out, opacity .5s linear; 
}

label{
    color: gray;

}



#div_middle0 {
    border: 5px solid white; 
    border-left: 10px solid wheat; 
    margin-right: -10px;
}


/* 0. Bottome */
#div_bottom0 {
    width: 49.5%; 
    user-select: none;
    display: grid; 
    grid-template-columns: auto 2fr;
    gap: 20px; 
}


#div_bottom0 p
{
    margin-top: 22px;
    white-space: pre-wrap;
}


/* 0. Layout */
#div_layout0 {
    display: flex; 
    height: 99%; 
    width: 50%; 
}

#div_layout0 h3 {
    margin-top: 0px;
    display: flex;
}

#div_main0 h3 {
    position: fixed;
}


/* 1. DataBase */
#div_vert1 {
    z-index: 3;
    display: flex; 
    position: absolute;
    height: 52%; 
    left: 50.5%;
    background-color: gray;
    width: 1px; 
    margin: 10px; margin-top: 0px; 
}

#div_db1 {
    z-index: 3;
    display: flex; 
    position: absolute;
    height: 50%; 
    left: 51%;
    margin: 10px; margin-left: 20px; margin-top: -0px;
    padding: 10px; 

    overflow-y: scroll; 

    width: 40%;
    border: 1px solid gray; 
    background-color: #e9e9e9;
}


#div_db1 ol{
    overflow-wrap: 'break-word';
    width: 40%;
}


#div_db1 h3 {
    margin-top: -10px;
    display: flex;
    position: fixed;
}

#div_db1 ol {
    width: 100%;
}

#div_db1 li {
    border-bottom: 1px solid gray;
    border-bottom: 1px solid gray;
    width: 100%;
    user-select: none;
}