:root {
    /*--site-width: 980px;*/
    --src-maroon-background-color: #8b0000;
    --src-gold: rgba(227, 170, 56, 1);
    --src-white: #EEEEEE;
    --src-black: #222;
    --src-border-gray: #888;
}

/* Bootstrap overrides */
.alert-error {
    --bs-alert-color: red;
    --bs-alert-bg: #f8d7da;
    --bs-alert-border-color: red;
    font-weight: bold;
}

.nav-link {
    color: white;
}

/* Tabbed panels (How-to / Explanation, payment methods, ...). The navbar
   rule above paints every .nav-link white, which hid inactive tab labels
   on white pages; tabs take their own colours from Bootstrap's variables. */
.nav-tabs {
    --bs-nav-tabs-border-color: #aaa;
    --bs-nav-tabs-link-active-border-color: #aaa #aaa #fff;
    --bs-nav-tabs-link-active-color: #888;
    --bs-nav-tabs-link-hover-border-color: #aaa #aaa #aaa;
    --bs-nav-link-color: #888;
    --bs-nav-link-hover-color: #666;
}
.nav-tabs .nav-link {
    color: var(--bs-nav-link-color);
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--bs-nav-link-hover-color);
}
.nav-tabs .nav-link.active {
    color: var(--bs-nav-tabs-link-active-color);
    font-weight: bold;
}

.bg-primary {
    --bs-bg-opacity: 0.7;
}

.btn-outline-warning {
  color: #dc931d;
  border-color: #dc931d;
}

.btn-outline-info{
  color: darkgreen !important;
  border-color: darkgreen;
}

.btn-outline-info:hover {
    background-color: darkgreen;
    color: white !important;
    border-color: darkgreen;
}

.card-header {
    background-color: rgba(0,0,0,0.2);
}

/* Lighter green on dark card headers */
.card-header .btn-success {
    background-color: #00d57270;
    border-color: green;
}

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

:root {
    --bs-info-rgb: 75, 175, 70;
}

.card-header * {
  /*color: black;*/
}

/* End Bootstrap overrides */

h1, h2, h3, h4, h5, h6 {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight:normal;
    color:#111;
}
h1 {font-size: 3em;line-height:1;margin-bottom:0;}
h2 {font-size: 2em;}

/* Scale the big display headings down on phones */
@media (max-width: 576px) {
    h1 {font-size: 1.9em;}
    h2 {font-size: 1.5em;}
}
h3 {font-size: 1.5em; line-height: 1; margin-bottom: 0;}
h4 {font-size: 1.2em; line-height: 1; margin-bottom: 0;}
h5 {font-size: 1em; margin-bottom: 0;}
h6 {font-size: 1em;}
p {font-size: 1em}

.bold {
    font-weight:bold;
}

.red {
    color: red;
}

hr {
    background: #aaa;
    height: 1px;
}

.right {
    float: right;
}

.quiet {
    color: #555;
}

input[type="radio"] {
    margin-right: 5px;
}

/* Full-screen overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Ensure it's on top */
}

/* Simple spinner animation */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.markdown-body {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 45px;
}

@media (max-width: 576px) {
    .markdown-body {
        min-width: 0;
        padding: 12px 15px;
    }
}

.markdown-body ul {
  list-style-type: disc !important;
  padding-left: 1.5em !important;
  margin-left: 0 !important;
}

.markdown-body ol {
  list-style-type: decimal !important;
  padding-left: 1.5em !important;
  margin-left: 0 !important;
}

.form-select {
    width: fit-content !important;
}

.container-fluid {
    --bs-gutter-x: 1.5rem;
    padding-right: var(--bs-gutter-x);
    padding-left: var(--bs-gutter-x);
}
/* Marks every page on the development server, so a staff member with dev and
   prod open cannot mistake one for the other. Rendered from base.html when
   settings.DEV_SERVER is on; absent entirely in production. Sits behind the
   content and ignores the mouse, so it cannot interfere with the page. */
.watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 12em;
    color: rgba(0, 0, 0, 0.1); /* Adjust transparency */
    z-index: 0;
    pointer-events: none;
    white-space: nowrap;
}

#requests-container .btn {
    text-wrap-mode: nowrap;
}