.studycontainer {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    gap: 10px;       /* Adds space between items and rows */
}

.item {
    /* Set a width for the items, for example: */
    flex-basis: 150px; /* Suggests a base width, items can grow/shrink */
    flex-grow: 1;      /* Allows items to grow to fill available space in the row */
    /* Add styling for visibility */
    background-color: lightblue;
    padding: 20px;
    border: 1px solid blue;
    text-align: center;
}

ul {
  list-style-position: inside;
    /* 1. Force the text to the left */
  text-align: left;

  /* 2. Remove default large browser padding */
  padding-left: 20px; 

  /* 3. Keep the list from stretching 100% width if needed */
  display: inline-block; 
    /* This is usually the default, but ensures consistency */
  list-style-position: outside;
  /* Add padding to the UL to create the necessary space for the bullets */
  padding-left: 1.5em; 
  /* Zero the margin to avoid extra indents, if needed */
  margin-left: 0; 
}



li {
  /* Ensures all lines of text within the LI wrap correctly after the initial indentation */
  word-wrap: break-word; 
  overflow-wrap: break-word;
}


.study-details {
  display: none;
}

/* Initially hide the div */
.toggledDiv {
  display: none;
}

.study-details { display: none; }
/* Class to show the div */
.visible {
  display: block; /* Or 'flex', 'grid', etc. depending on layout needs */
}

 .message-box { background: #e0f2f1; padding: 15px; border-radius: 4px; margin-bottom: 20px; border: 1px solid teal; }

.maincard {
  width: 90% !important !important;
  margin: 20px auto; /* Centers the card and adds spacing top/bottom */
  background-color: #fff;
  padding: 20px;
  border-radius: 8px; /* Optional: adds a nice soft corner */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.login-btn {
  background-color: teal; /* Primary blue color */
  color: white;              /* Text color */
  padding: 10px 20px;       /* Top/Bottom and Left/Right space */
  text-decoration: none;     /* Removes the underline */
  display: inline-block;     /* Allows for padding and margins */
  border-radius: 5px;        /* Rounded corners */
  font-family: Arial, sans-serif;
  font-weight: bold;
  transition: background 0.3s; /* Smooth color change on hover */
   margin: 5px;
}

.study-details {
    display: none; /* Hidden by default */
}
.study-details.is-visible {
    display: block; /* Shown when this class is added */
}

/* Hover effect for better UX */
.login-btn:hover {
  background-color: #20B2AA; /* Darker blue when hovering */
}

.logout-btn {
	float: right;
  background-color: teal; /* Primary blue color */
  color: white;              /* Text color */
  padding: 5px 12px;       /* Top/Bottom and Left/Right space */
  text-decoration: none;     /* Removes the underline */
  display: inline-block;     /* Allows for padding and margins */
  font-family: Arial, sans-serif;
  font-weight: bold;
  transition: background 0.3s; /* Smooth color change on hover */
  margin: 5px;
}

/* Hover effect for better UX */
.logout-btn:hover {
  background-color: #20B2AA; /* Darker blue when hovering */
}

.weight {
    width: 7em; /* Width in em units (relative to font size) */
}

.popup-overlay {
  display: none; /* Hidden by default */
  position: fixed; /* Stays in place relative to the viewport */
  z-index: 1000; /* Sit on top of other content */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  display: flex;
  justify-content: center; /* Horizontally centers content */
  align-items: center; /* Vertically centers content */
}

.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  /* Add width, height, or max-width as needed */
  max-width: 500px;
}