.DiagramBox { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; .DiagramBox-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; .DIYNodeBox { /* existing code */ .DIYNodeBox-iframe { height: 100%; width: 100%; border: none; } } .search-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; padding: 10px; textarea { flex: 1; height:5px; margin-right: 10px; min-height: 20px; height:auto; resize:none; overflow: hidden; } button { padding: 5px 10px; width:80px; height:30px; border-radius: 10px; } } .content { flex: 1; display: flex; justify-content: center; align-items: center; width:100%; height:100%; .diagramBox{ flex: 1; display: flex; justify-content: center; align-items: center; width:100%; height:100%; svg{ max-width: none !important; } } } .loading-circle { position: absolute; display:flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; border: 3px solid #ccc; border-top-color: #333; animation: spin 1s infinite linear; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } } }