.button{
    padding:5px;
    color:white;
    background: black;
    margin:5px;
    display: inline;
    cursor: pointer;
}
.button:hover{
    background: rgb(22, 21, 21);
}
body{
    font-family: Arial, Helvetica, sans-serif;
}

.childArea{
    width: 80%;
    height:0cm;
    max-height: 5cm;
    margin-left: 10px;
    margin-right: 10%;
    /* border: 0.1px solid gray;
     */
     box-shadow: 0px 0px 1px 0px gray;
    resize: both;
    overflow: auto;
    white-space: nowrap;
    transition: height 1s;

}
.parentArea{
    cursor: pointer;
    height:0cm;
    margin: 10px;
    box-shadow: 0px 0px 1px 0px gray;
    /* padding: 5px; */
    overflow:hidden;
    transition: height 1s;
}

.relatedObjects{
    cursor: pointer;
    padding: 10px;
    border: 0.1px solid whitesmoke;
    padding: 5px;
}
.parentArea:hover{
    background: whitesmoke;
}

.layoutArea{
    width: 80%;
    height:0cm;
    /* max-height: 5cm; */
    margin-left: 10px;
    margin-right: 10%;    
    overflow: auto;
    white-space: nowrap;
    transition: height 1s;
}

.showData{
    position:absolute;
    top:0px;
    right:0px;
    background:rgba(128, 128, 128, 0.308);
    color:white;
    display:inline;
}

.goButton:hover{
cursor:pointer;

}

.layoutContainer{
    position: absolute;
    background: white;
    box-shadow: 0px 0px 3px 0px gray;
    top:10%;
    width:80%;
    left:5%;
    padding:10px;
    z-index: 1;
    height:37%;

    overflow: auto;
}

.layoutExitButton{
    cursor: pointer;
    text-align: end;
    display: inline;
    background: black;
    color: white;
    margin: 10px;
    padding: 5px;
}

.ObjectsArea{
    box-shadow: 0px 0px 3px 0px gray;
    overflow: auto;
    width:80%;
    height:5cm;
}
.ObjectsArea:hover{
    cursor: pointer;    
    background: whitesmoke;

}