:root {
  --umich-blue: #00274C;
  --umich-maize: #FFCB05;
  --umich-blue-light: #1c4e80;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-600: #6c757d;
  --gray-800: #343a40;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  background-color: var(--gray-100);
  min-height: 100vh;
}

.pt-25 {
  padding-top: 0.75rem !important;
}

.mt-n1 {
  margin-top: -0.5rem;
}

.mt-n2 {
  margin-top: -1rem;
}

/* Nav */

.navbar {
  background-color: var(--umich-blue);
  color: white;
  border-radius: 0px;
  min-height: 50px;
  padding: initial;
  position: relative;
}

.navbar.navar-expand-lg {
  margin: 0;
  border: 0;
  background: var(--umich-blue);
}

.navbar-nav {
  color: white;
}

.nav-button {
  background-color: transparent;
  border: none;
  color: white;
}

.nav-button:hover, .nav-button:hover i {
  color: var(--umich-maize);
}

.nav-button span {
  color: white;
}

.nav-button:hover span {
  color: var(--umich-maize);
}

.nav-link {
  text-decoration: none;
  color: white !important;
}

.nav-link:hover, .nav-link:hover i {
  color: var(--umich-maize) !important;
}

.nav-link:focus, .nav-link:focus i {
  color: var(--umich-maize) !important;
}

.nav-container {
  max-width: 1540px;
}

.navbar-brand {
  float: left;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}

.banner-img {
  display: block;
  width: 100%;
  max-width: 820px;
}

/* Overlay */

.loading-overlay {
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.spinner-overlay {
  width: 3rem;
  height: 3rem;;
}

/* Card */
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  background-color: var(--umich-blue);
  color: white;
  padding: 1.25rem 1.5rem;
  border-bottom: 4px solid var(--umich-maize);
}

.card-header h2 {
  font-size: 1.5rem;
  font-weight: 500;
}

.card-header p {
  color: var(--gray-300);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.card-body {
  padding: 1.5rem;
}

/* Form Elements */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--gray-800);
}

.form-group label .required {
  color: red;
}

label .required {
  color: red;
}

.form-control {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
  outline: none;
  border-color: var(--umich-blue);
  box-shadow: 0 0 0 3px rgba(0, 39, 76, 0.1);
}

.form-hint {
  font-size: 0.8rem;
  color: var(--gray-600);
  margin-top: 0.25rem;
}

.form-label {
  font-weight: 700 !important;
}

.col-form-label {
  font-weight: 700 !important;
}

/* Section Divider */
.section-divider {
  margin: 1.5rem 0;
  border: none;
  border-top: 1px solid var(--gray-600);
}

.section-divider-light {
  margin: 1.5rem 0;
  border: none;
  border-top: 1px solid var(--gray-300);
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--umich-blue);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--umich-maize);
}

/* Text Backgrounds */

.text-bg-outline-success {
  color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
  background-color: transparent !important;
}

/* Tables */
/*
.table-head-blue th {
  background-color: var(--umich-blue);
  color: white;
}

.table-group-divider {
  color: var(--umich-maize);
}
*/
/* Buttons */

.btn-blue {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--umich-blue-light);
  --bs-btn-border-color: var(--umich-blue-light);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--umich-blue);
  --bs-btn-hover-border-color: var(--umich-blue);
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--umich-blue);
  --bs-btn-active-border-color: var(--umich-blue);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--umich-blue-light);
  --bs-btn-disabled-border-color: var(--umich-blue-light);
}

.btn-outline-blue {
  --bs-btn-color: var(--umich-blue-light);
  --bs-btn-border-color: var(--umich-blue-light);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--umich-blue-light);
  --bs-btn-hover-border-color: var(--umich-blue-light);
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--umich-blue-light);
  --bs-btn-active-border-color: var(--umich-blue-light);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--umich-blue-light);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--umich-blue-light);
  --bs-gradient: none;
}

/* Errors */

.error-img {
  max-height: 180px;
}