* { box-sizing: border-box; font-family: "Roboto", sans-serif; } body { padding-top: 5vw; display: flex; flex-direction: column; background-color: #afafaf; margin: 0; } .navbar { background-color: #333; height: 60px; display: flex; align-items: center; padding: 0 20px; position: fixed; /* Fix the navbar at the top of the page */ top: 0; /* Position it at the very top */ width: 100%; /* Make it span the full width of the page */ z-index: 1000; /* Make sure it's above all other elements */ } .navbar-nav { list-style: none; display: flex; align-items: center; justify-content: center; /* Center the links horizontally */ height: 100%; width: 100%; /* Make it span the full width of the navbar */ } .nav-item { margin-right: 20px; } .nav-link { color: #fff; text-decoration: none; font-size: 18px; } .container { display: flex; flex-direction: row; align-items: center; border: 2px solid #ccc; border-radius: 10px; margin: 20px; padding: 20px; width: 90; box-sizing: border-box; } .data-types { flex: 1; display: flex; flex-direction: column; align-items: flex-start; margin-right: 60px; margin-bottom: 10px; font-size: 0.8em; padding: 8px; border-radius: 5px; background-color: #f0f0f0; } .filters { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 10px; } .date-filter { flex: 1; text-align: center; margin-right: 60px; font-size: 1.2em; /* Increase font size for a bigger appearance */ padding: 8px; border-radius: 5px; /* Add border radius for a rounded look */ background-color: #f0f0f0; /* Light background color for contrast */ } .node-filter { flex: 1; margin: auto; text-align: center; margin-right: 60px; align-content: center; font-size: 1.2em; /* Increase font size for a bigger appearance */ padding: 8px; border-radius: 5px; /* Add border radius for a rounded look */ background-color: #f0f0f0; /* Light background color for contrast */ } .filter-button { width: 10%; background-color: #007bff; color: white; padding: 10px; border: none; border-radius: 5px; cursor: pointer; } .js-plotly-plot { align-self: center; width: 95%; height: 100%; margin: 10px; } /* Additional styling as needed */