.font-bold {
  font-weight: bold;
}

.fixed-header {
  position: fixed;
  min-height: 50px;
  top: 0;
  left: 0; /* Align the header to the left edge */
  width: 100%;
  z-index: 1000; /* Make sure the header is above other content */
  background: #f9fafb; /* Set background to white, or another color based on your design */
  overflow-x: visible;
  overflow-y: visible;
}

@media (max-width: 768px) {
  .header-logo {
    display: none;
  }
  .fixed-header {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

.container {
  max-width: 90%;
  margin: auto;
  padding: 20px;
}

h1 {
  text-align: center;
}

label {
  display: inline-block;
  margin-top: 10px;
}

.result {
  margin-top: 10px;
}

select {
  display: inline-block;
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: transparent;
}

#numberTableWrapper {
  width: auto;
  max-height: auto;
  overflow: auto;
  border: 1px solid #323232;
  margin-top: 10px;
  margin-bottom: 10px;
}

#numberTable th {
  padding: 10px;
  text-align: center;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 2;
  background: #f0f0f0;
  place-content: center;
  border: 1px solid #323232;
}

#numberTable th[scope=row] {
  left: 0;
  z-index: 1;
}

#numberTable td {
  padding: 10px;
  text-align: center;
  place-content: center;
  border: 1px solid #323232;
}

button {
  display: block;
  margin-bottom: 10px;
}

#result, #result2 {
  font-weight: bold;
  padding-left: 10px;
}

/* Additional CSS to remove spinner */
input[id*="cell"] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  appearance: textfield;
}

input[id*="cell"]::-webkit-inner-spin-button,
input[id*="cell"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

py-config { display: none; }
py-script { display: none; }

iframe {
  display: block;
  max-width: 720px;
  width: 100%;
  aspect-ratio: 560/315;
  margin: auto;
}

.centered-quote {
  text-align: center;
  font-style: italic; /* Add styling as needed */
  margin: 20px;
  font-size: 20px;
}

.quote-author {
  display: block;
  text-align: right;
  margin: 10px;
  font-weight: bold; /* Add styling as needed */
  font-size: 15px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px; /* Reduced from 60px */
  height: 24px; /* Reduced from 34px */
}
.switch input { 
  display: none;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px; /* Reduced from 26px */
  width: 18px; /* Reduced from 26px */
  left: 3px; /* Adjusted for new size */
  bottom: 3px; /* Adjusted for new size */
  background-color: white;
  transition: .4s;
}
input:checked + .slider {
  background-color: #2196F3;
}
input:checked + .slider:before {
  transform: translateX(16px); /* Adjusted for new size */
}
.slider.round {
  border-radius: 24px; /* Adjust for rounded edges at smaller size */
}
.slider.round:before {
  border-radius: 50%;
}

.switch-container label {
  font-size: 20px;
  vertical-align: middle; /* Aligns text vertically with the slider */
}

.suggestions-box {
  display: block;
  position: absolute;
  border: 1px solid #ccc;
  background-color: #fff;
  width: calc(100% - 2px);
  z-index: 1000;
  max-height: 600px;
  width: auto;
  overflow-y: auto;
}

.suggestion {
  padding: 8px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.suggestion:hover {
  background-color: #f0f0f0;
}

#tableWrapper {
  max-width: 90%;
  max-height: 400px;
  overflow: auto;
  border: 1px solid #ddd;
  margin-top: 20px;
}

#multipleTable {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  text-align: center;
}

#multipleTable th, #multipleTable td {
  border: 1px solid #ddd;
  padding: 2px;
  font-size: 14px;
}

#multipleTable th {
  background-color: rgba(60, 60, 60, 0.8); /* Darker headers with slight transparency */
  color: white;
  font-weight: bold;
  position: sticky;
  top: 0;  /* Keep column headers visible when scrolling vertically */
  z-index: 1;
}

#multipleTable tr th:first-child {
  position: sticky;
  left: 0;  /* Keep row headers visible when scrolling horizontally */
  background-color: rgba(60, 60, 60, 0.8); /* Same darker color for row headers */
  z-index: 2;
}

#multipleTable tr:nth-child(even) {
  background-color: transparent; /* Transparent for even rows */
}

#multipleTable tr:hover {
  background-color: rgba(0, 0, 0, 0.1); /* Light hover effect for entire row visibility */
}

#multipleTable td {
  min-width: 70px;
  background-color: transparent; /* Transparent background for data cells */
}

.py-error {
  display: none;
}