:root, [data-bs-theme=light] {
  --bs-blue: #2A5C8B;
  --bs-indigo: #3F51B5;
  --bs-purple: #6A1B9A;
  --bs-pink: #C2185B;
  --bs-red: #C62828;
  --bs-orange: #F57C00;
  --bs-yellow: #FFB300;
  --bs-green: #218838;
  --bs-teal: #00695C;
  --bs-cyan: #007B87;

  --bs-gray-100: #F8F9FA;
  --bs-gray-200: #E9ECEF;
  --bs-gray-300: #DEE2E6;
  --bs-gray-400: #CED4DA;
  --bs-gray-500: #ADB5BD;
  --bs-gray-600: #6C757D;
  --bs-gray-700: #495057;
  --bs-gray-800: #343A40;
  --bs-gray-900: #212529;

  --bs-primary: var(--bs-blue);
  --bs-secondary: #6C757D;
  --bs-success: var(--bs-green);
  --bs-info: var(--bs-cyan);
  --bs-warning: #FFC107;
  --bs-danger: #DC3545;
  --bs-light: #f8f9fa;

  --bs-primary-subtle: #E3F2FD;
  --bs-secondary-subtle: #F8F9FA;
  --bs-success-subtle: #D4EDDA;
  --bs-info-subtle: #D1ECF1;
  --bs-warning-subtle: #FFF3CD;
  --bs-danger-subtle: #F8D7DA;
  --bs-light-bg-subtle: #fcfcfd;

  --bs-primary-hover: #1D4E74;
  --bs-secondary-hover: #5A6268;
  --bs-success-hover: #1C7430;
  --bs-info-hover: #006266;
  --bs-warning-hover: #D39E00;
  --bs-danger-hover: #BD2130;
  --bs-light-hover: #E2E6EA;

  --bs-body-color: #212529;
  --bs-body-bg: #F8F9FA;
  --bs-link-color: #2A5C8B;
  --bs-link-hover-color: #1D4E74;

  --bs-border-color: #dee2e6;
  --bs-border-radius: 0.5rem;

  --bs-box-shadow: 0 0.5rem 1.5rem rgba(42, 92, 139, 0.1);
  --bs-box-shadow-sm: 0 0.125rem 0.375rem rgba(42, 92, 139, 0.05);

  --bs-primary-rgb: 42,92,139;
  --bs-secondary-rgb: 108,117,125;
  --bs-success-rgb: 33,136,56;
  --bs-info-rgb: 0,123,135;
  --bs-warning-rgb: 255,193,7;
  --bs-danger-rgb: 220,53,69;
  --bs-light-rgb: 248, 249, 250;
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-color: #ABB2BF;
  --bs-body-color-rgb: 171, 178, 191;
  --bs-body-bg: #282C34;
  --bs-body-bg-rgb: 40, 44, 52;
  --bs-emphasis-color: #FFFFFF;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(171, 178, 191, 0.75);
  --bs-secondary-color-rgb: 171, 178, 191;
  --bs-secondary-bg: #2C323C;
  --bs-secondary-bg-rgb: 44, 50, 60;
  --bs-tertiary-color: rgba(171, 178, 191, 0.5);
  --bs-tertiary-color-rgb: 171, 178, 191;
  --bs-tertiary-bg: #3B4048;
  --bs-tertiary-bg-rgb: 59, 64, 72;

  --bs-primary: #61AFEF;
  --bs-success: #98C379;
  --bs-info: #56B6C2;
  --bs-warning: #E5C07B;
  --bs-danger: #E06C75;
  --bs-secondary: #5C6370;
  --bs-light: #ABB2BF;

  --bs-primary-text-emphasis: #61AFEF;
  --bs-secondary-text-emphasis: #5C6370;
  --bs-success-text-emphasis: #98C379;
  --bs-info-text-emphasis: #56B6C2;
  --bs-warning-text-emphasis: #E5C07B;
  --bs-danger-text-emphasis: #E06C75;
  --bs-light-text-emphasis: #ABB2BF;

  --bs-primary-bg-subtle: #1E2B3A;
  --bs-secondary-bg-subtle: #242931;
  --bs-success-bg-subtle: #1E2E22;
  --bs-info-bg-subtle: #1A2D32;
  --bs-warning-bg-subtle: #2E2A1E;
  --bs-danger-bg-subtle: #3A1F22;
  --bs-light-bg-subtle: #495057;

  --bs-border-color: #3E4451;
  --bs-primary-border-subtle: #2C4D6E;
  --bs-success-border-subtle: #3D5D48;
  --bs-info-border-subtle: #2D636D;
  --bs-warning-border-subtle: #6E5D34;
  --bs-danger-border-subtle: #6E3A40;
  --bs-light-border-subtle: #4B545C;

  --bs-link-color: #61AFEF;
  --bs-link-hover-color: #7FBCF2;
  --bs-link-color-rgb: 97, 175, 239;
  --bs-link-hover-color-rgb: 127, 188, 242;

  --bs-code-color: #C678DD;
  --bs-highlight-bg: #3D3B32;
  --bs-border-color-translucent: rgba(200, 200, 200, 0.1);

  --bs-form-valid-color: #98C379;
  --bs-form-valid-border-color: #98C379;
  --bs-form-invalid-color: #E06C75;
  --bs-form-invalid-border-color: #E06C75;
}


h1, h2 {
  font-weight: bold;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

body[data-bs-theme=dark] {
  background-color: var(--bs-dark);
  color: var(--bs-light);
}

.main {
  flex-grow: 1;
  min-height: 100vh;
}

.footer {
  text-align: center;
  padding: 10px 0;
  background-color: var(--bs-dark);
  color: var(--bs-light);
}

.footer a {
  color: var(--bs-light);
}


.btn-primary {
  background-color: var(--bs-primary);
  border: var(--bs-primary);
}

.btn-primary:hover {
  background-color: var(--bs-primary-hover);
  border-color: var(--bs-primary-hover);
}

.btn-secondary {
  background-color: var(--bs-secondary);
  border: var(--bs-secondary);
}

.btn-secondary:hover {
  background-color: var(--bs-secondary-hover);
  border-color: var(--bs-secondary-hover);
}

.btn-success {
  background-color: var(--bs-success);
  border: var(--bs-success);
}

.btn-success:hover {
  background-color: var(--bs-success-hover);
  border-color: var(--bs-success-hover);
}

.btn-info {
  background-color: var(--bs-info);
  border: var(--bs-info);
}

.btn-info:hover {
  background-color: var(--bs-info-hover);
  border-color: var(--bs-info-hover);
}

.btn-warning {
  background-color: var(--bs-warning);
  border: var(--bs-warning);
}

.btn-warning:hover {
  background-color: var(--bs-warning-hover);
  border-color: var(--bs-warning-hover);
}

.btn-danger {
  background-color: var(--bs-danger);
  border: var(--bs-danger);
}

.btn-danger:hover {
  background-color: var(--bs-danger-hover);
  border-color: var(--bs-danger-hover);
}

.btn-light {
  background-color: var(--bs-light);
  border: var(--bs-light);
}

.btn-light:hover {
  background-color: var(--bs-light-hover);
  border-color: var(--bs-light-hover);
}

.btn-dark {
  background-color: var(--bs-dark);
  border: var(--bs-dark);
}

.btn-dark:hover {
  background-color: var(--bs-dark-hover);
  border-color: var(--bs-dark-hover);
}

.bg-primary-subtle {
  background-color: var(--bs-primary-subtle) !important;
}

.bg-secondary-subtle {
  background-color: var(--bs-secondary-subtle) !important;
}

.bg-success-subtle {
  background-color: var(--bs-success-subtle) !important;
}

.bg-info-subtle {
  background-color: var(--bs-info-subtle) !important;
}

.bg-warning-subtle {
  background-color: var(--bs-warning-subtle) !important;
}

.bg-danger-subtle {
  background-color: var(--bs-danger-subtle) !important;
}

.bg-light-subtle {
  background-color: var(--bs-light-subtle) !important;
}

.bg-dark-subtle {
  background-color: var(--bs-dark-subtle) !important;
}


.title {
  font-weight: bold;
}

.post img {
  max-width: 100% !important;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.nav-link.active {
  font-weight: bold;
}

.nav-link img {
  height: 24px;
  width: auto;
}

.capfirst::first-letter {
  text-transform: capitalize;
}

.table {
  td img,
  th img {
    height: 1rem;
    width: 1rem;
  }
}

form .form-label:has(+ input:required)::after,
form .form-label:has(+ select:required)::after,
form .form-label:has(+ textarea:required)::after {
    content: " *";
    color: red;
}

.form-label {
  font-size: 1rem;
}

.form-text {
  font-size: 0.8rem;
}


.allauth button {
  background-color: var(--bs-primary);
  border: var(--bs-primary);
  color: var(--bs-white);
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: var(--bs-border-radius);
  margin: 0.5rem 0;
}
.allauth button:hover {
  background-color: var(--bs-primary-hover);
  border-color: var(--bs-primary-hover);
}
.allauth button[name="action_primary"] {
  background-color: var(--bs-primary);
  border: var(--bs-primary);
}
.allauth button[name="action_send"] {
  background-color: var(--bs-primary);
  border: var(--bs-primary);
}
.allauth button[name="action_remove"] {
  background-color: var(--bs-danger);
  border: var(--bs-danger);
}
.allauth input[type="text"],
.allauth input[type="email"],
.allauth input[type="password"] {
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 0.5rem;
  width: 100%;
  text-align: center;
}
.allauth input[type="text"]:focus,
.allauth input[type="email"]:focus,
.allauth input[type="password"]:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}
.allauth input::placeholder {
  color: transparent;
}
.allauth .form-check-input {
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  width: 1rem;
  height: 1rem;
}
.allauth .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.allauth .form-check-input:focus {
  box-shadow: 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}
.allauth .form-check-label {
  margin-left: 0.5rem;
}
.allauth .form-check-label:hover {
  text-decoration: underline;
}
.allauth form {
  margin: 1rem 0;
}
.allauth ul {
  list-style: none;
  padding: 0;
}
.allauth ul li {
  margin: 0.5rem 0;
}