/*
    See the JupyterLab Developer Guide for useful CSS Patterns:

    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
*/

.my-apodWidget {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
}

body {
font-family: Arial, sans-serif;
}

.cells-class {
display: flex;
flex-direction: column; /* Adjusted to column to stack header and tabs */
background-color: #e0ebeb; /* Light cyan */
padding: 10px;
border-radius: 5px; /* Rounded corners */
}

.class-header {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px; /* Spacing below header */
background-color: #e0ebeb; /* Same light cyan background */
padding: 10px;
}

.class-tabs {
display: flex;
background-color: #e0ebeb; /* White background for tabs container */
padding: 10px;
align-items: center;
overflow: auto;
}

.student-tab {
  padding: 10px 50px;
  border: 2px solid #ccc;
  cursor: pointer;
  font-weight: bold;
  background-color: #f1f1f1; /* Light grey for tabs */
  margin-right: 5px;
}

.student-tab:hover {
background-color: #ddd;
}

.student-tab.active {
  background-color: white;
  font-weight: bold;
  border: 4px solid #ccc;
}
.sidebar-content {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.node {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 40px 0;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  width: 150px;
}

.node1 {
  background-color: #b3e5fc; /* Light Blue */
}

.node2 {
  background-color: #c8e6c9; /* Light Green */
}

.node3 {
  background-color: #ffe0b2; /* Light Orange */
}

.node4 {
  background-color: #ffccbc; /* Light Red */
}

.node5 {
  background-color: #816868; /* Light Brown */
}


/* Styles for the edges */
.edges {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

#cy {
  width: 100%;
  height: 100%;
}
.hidden {
  display: none;
}
#viewSelector {
  width: 100%;
  margin-bottom: 10px;
}

#student-graph {
  display: none;
}
.student-node {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  margin: 10px auto;
  font-size: 12px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.student-graph .student-node {
  background-color: #ccc;
  margin: 40px auto; /* Increase spacing between student nodes */
}

/* Example styles for different student nodes */
#student-node1 {
  background-color: #4CAF50; /* Green */
}

#student-node2 {
  background-color: #2196F3; /* Blue */
}

#student-node3 {
  background-color: #FF9800; /* Orange */
}

#student-node4 {
  background-color: #f44336; /* Red */
}

#student-node5 {
  background-color: #9E9E9E; /* Grey */
}

/* style.css */
.my-custom-widget {
  margin-top: 30px;
  padding: 10px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}

/* Add this to your stylesheet (e.g., in index.css) */
.flowchart-widget {
  height: 100%; /* Ensure it takes up the full height of the sidebar */
  width: 100%;
  overflow: auto;
}

.flowchart-widget .content {
  flex-grow: 1;
  overflow: auto; /* Makes the content scrollable */
}
