body { font-family: 'Roboto', sans-serif; }
.card-icon {max-width: 500px; width: 50%; min-width: 300px;}
.section { margin-top: 30px; margin-left: auto; margin-right: auto; max-width:700px; width:90%; align-self: center; padding:20px;}
.centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.session_button {position: fixed; bottom: 10px; right: 10px; z-index: 999; box-shadow: 0px 2px 8px rgba(0,0,0,0.2);}
.historic{display: flex; justify-content: space-between; align-items: center;}
.scrollable-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding-right: 8px;
}
.scrollable-graph {
  overflow-x: auto;
  width: 100%;
  min-width: 80%;
  height: 300px;
}


.graph-controls {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 10px;
}

.zoom-button {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.zoom-button:hover {
  background-color: #ddd;
}

input[type="range"] {
  width: 100%;
  margin-top: 10px;
}