charlesdedampierre/citeo-plastic

1body {2  margin: 0;3  padding: 0;4}5 6.json-display {7  font-family: Arial, sans-serif;8  display: flex;9  flex-direction: column;10  min-height: 90vh;11  overflow-y: hidden;12 13}14 15.top-right {16  display: flex;17  flex-direction: row;18  align-items: center;19  /* Center vertically */20  min-height: 3vh;21}22 23.linkedin-icon img {24  width: 50px;25  /* Adjust the width to your desired size */26  height: auto;27  /* Maintain aspect ratio */28}29 30/* Style for the Bunka logo */31.bunka-logo {32  /* Set the width and height to make the logo smaller */33  width: 200px;34  /* Adjust the width as desired */35  height: fit-content;36  /* Maintain aspect ratio */37  margin-top: 1em;38}39 40.topic-title {41  word-spacing: 10px;42  /* Adjust the spacing as needed */43}44 45 46/* Add or modify the following CSS for the LinkedIn icon */47.linkedin-icon {48  position: absolute;49  top: 10px;50  right: 10px;51  /* Adjust the width and height to make the logo smaller */52}53 54.linkedin-icon img {55  width: 50px;56  /* Adjust the width to your desired size */57  height: auto;58  /* Maintain aspect ratio */59}60 61.scatter-plot-and-text-container {62  display: flex;63  min-height: 89vh;64}65 66.scatter-plot-container {67  display: flex;68  width: 100%;69}70 71svg {72  border: none;73}74 75.scatter-plot-container svg {76  background-color: #9bdbfb;77  border: 1px solid #ddd;78  cursor: grab;79}80 81.scatter-plot-container svg .tick text {82  font-size: 1.4em;83}84 85.text-container {86  width: 35%;87  min-width: 100px;88  font-size: 30px;89  align-items: center;90  justify-content: center;91  background-color: #fff;92  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);93  border-radius: 5px;94}95 96/* Style for the title */97h2 {98  font-size: 50px;99  /* Specify the unit, e.g., 'px' */100  margin: 10px 0;101  color: rgb(24, 113, 222);102  align-items: center;103}104 105/* Style for the text content within the text container */106.text-container p {107  margin: 10px;108  padding: 2px 0;109 110}111 112 113/* Style for the scatter plot circles */114circle {115  cursor: pointer;116  transition: fill 0.3s;117}118 119/* Style for clicked circles */120circle.clicked {121  fill: pink;122}123 124/* Style for the contour lines */125path.contour {126  fill: none;127  stroke: black;128  stroke-width: 1;129}130 131.box {132  border: 3px solid #ccc;133  padding: 10px;134  background-color: white;135  cursor: pointer;136  margin: 30px;137  /* Add margin to create space between each box */138}139 140.box.clicked {141  background-color: lightgray;142}143 144/* Style for the fixed header container */145.topic-container {146  display: flex;147  flex-direction: column;148}149 150/* Style for the topic title inside the title box */151.topic-title {152  margin: 0;153}154 155/* Style for the main content box */156.topic-content {157  padding-top: 40px;158  /* Adjust as needed to provide space for the fixed title */159}160 161/* Style for the content container */162.content-container {163  display: flex;164}165 166/* Style for the topic title inside the title box */167.topic-title {168  margin: 0;169}170 171.csv-upload-container {172  margin-top: 50px;173  flex: 1;174  align-items: left;175  margin-left: 0;176  /* Remove margin from the left side */177 178  /* Adjust the margin as needed */179}180 181 182.csv-upload-input {183  margin-top: 50px;184  flex: 1;185  align-items: left;186  margin-left: 0;187  /* Remove margin from the left side */188 189  /* Adjust the margin as needed */190}191 192.topic-box {193  /* Adjust the maximum height as needed */194  overflow-y: auto;195  display: flex;196  flex-direction: column;197}198 199.topic-box h2 {200  position: sticky;201  top: 0;202  background-color: white;203  align-self: center;204  /* Set the background color to your desired value */205}206 207.content-container {208  /* Adjust these styles as needed */209  flex: 1;210  overflow-y: auto;211}