/* css styles */


/*testing something for stat 200 1-3 lab */
#content1-3 {
            display: none;
            text-align: center;
        }

.times-up {
            text-align: center;
            font-size: 4em;
            color: #333;
}

.times-up p {
            font-size: 20 px;
}

.img {
            cursor: pointer;
            margin: 10px;
            width: 150px; /* Example size */
}
#average {
            margin-top: 20px;
            font-size: 1.5em;
            color: #333;
}

.selected {
            opacity: 0.2; /* Visually indicate that the image has been selected */
}

/*for even spacing in the mean -median statistics line below the graph*/
.stat-item {
  margin-right: 0em;
}

.btn {
  margin: 3px;

}

/* Override Bootstrap's success green */
.btn-success {
  background-color: #198754;   /* Bootstrap's default green */
  border-color: #198754;
  color: #fff;                 /* keep text white */
  border-radius: 0.375rem;     /* matches Bootstrap's rounded edges */
}

/* Hover/focus states */
.btn-success:hover,
.btn-success:focus {
  background-color: #157347;   /* slightly darker */
  border-color: #146c43;
}

/* Override Bootstrap's warning yellow */
.btn-warning {
  background-color: #ffc107;   /* Bootstrap's default warning yellow */
  border-color: #ffc107;
  color: #212529;              /* dark text for readability */
  border-radius: 0.375rem;     /* Bootstrap’s default rounding */
}

/* Hover/focus states */
.btn-warning:hover,
.btn-warning:focus {
  background-color: #ffca2c;   /* slightly darker */
  border-color: #ffc720;
}

/* Override Bootstrap's secondary gray */
.btn-secondary {
  background-color: #6c757d;   /* Bootstrap default gray */
  border-color: #6c757d;
  color: #fff;                 /* white text */
  border-radius: 0.375rem;     /* default rounding */
}

/* Hover/focus states */
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: black;   /* slightly darker */
  border-color: #565e64;
}

/* Base info button */
.btn-info {
  color: #000;                 /* Bootstrap sets text dark on info */
  background-color: #66d9f5;   /* main info color */
  border-color: #66d9f5;
  border-radius: 0.375rem;     /* default rounding */
}

/* Hover and focus states */
.btn-info:hover,
.btn-info:focus {
  background-color: #31d2f2;   /* slightly lighter/darker depending on theme */
  border-color: #25cff2;
}

/* Active state */
.btn-info:active {
  background-color: #3dd5f3;
  border-color: #25cff2;
}

/* Base danger button */
.btn-danger {
  color: #fff;
  background-color: #e74c3c;   /* modern red */
  border-color: #e74c3c;
  border-radius: 0.375rem;
}

/* Hover and focus states */
.btn-danger:hover,
.btn-danger:focus {
  background-color: #d73d2c;
  border-color: #c63324;
}

/* Active state */
.btn-danger:active {
  background-color: #c0392b;
  border-color: #b02a1e;
}

/* Base primary button */
.btn-primary {
  color: #fff;
  background-color: #093162;
  border-color: #093162;
  border-radius: 0.375rem;
}

/* Hover and focus states */
.btn-primary:hover,
.btn-primary:focus {
  background-color: #07264a;
  border-color: #061f3d;
}

/* Active state */
.btn-primary:active {
  background-color: #051a33;
  border-color: #041426;
}

.chart {
  display: flex;
  flex-direction: column; /* stack instead of row */
  gap: 5px !important;              /* space between panels */
  margin-top: 5px !important;
}

/*for the p-hat in the weather prediction output*/
.phat sup {
  font-size: 0.7em;

}