#3d-graph { display: flex; } .node-label { font-size: 14px; color: white; font-weight: bold; /*text-align: center;*/ padding: 1px 4px; border-radius: 4px; background-color: rgba(0,0,0,0.7); user-select: none; z-index: 1; } .close-button { pointer-events: all; z-index: 99; cursor: pointer; right: 10px; top: 5px; position: absolute; font-size: 20px; } .detail-view { position: absolute; top: 0; right: 0; width: 250px; height: 100%; background-color: whitesmoke; padding: 10px; z-index: 20; } .detail-view-image { width: 125px; height: 125px; top: 0; left: 0; overflow: hidden; border-radius: 50%; display: inline; margin-top: 10px; margin-bottom: 20px; } .detail-view-top-area { position: relative; width: 100%; overflow: auto; text-align: center; } .detail-view-text-area { display: block; padding-left: 25px; padding-right: 25px; height: 45%; overflow-y: scroll; } .detail-view-headline { font-weight: bold; /*text-align: center;*/ font-family: CuratorRegular,Helvetica Neue,Helvetica,Arial,sans-serif; word-wrap: break-word; hyphens: auto; font-size: 2.0vw; } .link-overlay { position: absolute; bottom: 0; pointer-events: none; width: 350px; max-width: 400px; padding: 10px; left: 0; display: block; background-color: rgba(0,0,0,.6); } .relation { display: inline-block; padding-right: 5px; color: #fff; font-size: 13px; line-height: 20px; font-family: CuratorRegular,Helvetica Neue,Helvetica,Arial,sans-serif; text-transform: uppercase; margin-bottom: 6px; height: 17px; } .rel-container { display: block; height: 2px; width: 78px; } .tab { overflow: hidden; width: 200px; background-color: #f1f1f1; } .tab button { color: white; float: left; border: none; outline: none; cursor: pointer; width: 50px; padding: 10px 12px; transition: 0.3s; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } .tabcontent { display: none; padding: 6px 0px; border-top: none; overflow-x: scroll; height: 100px; width: 200px; } .bottom container { position: absolute; bottom: 0; left: 0; width: 200px; padding: 0px; margin: 0px; } .link img { position: relative; text-align: center; min-width: 60px; width: 60px; height: 60px; margin-left: 5px; pointer-events: all; cursor: pointer; border-radius: 50%; } .link title { font-size: 2px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }