:root {
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0; /* For small text */
  --text-highlight: #ffcc33;
  --text-on-dark-button: #ffffff;
  --text-error: #dd3333;

  --bg-body-image: url(/static/images/back.svg);
  --bg-body-color-fallback: #0a0a0a;
  --bg-content: #111111;
  --bg-question: #222233;
  --bg-card: #222233;
  --bg-answer: #222222;
  --bg-progress-div: #111111;

  --link-color: var(--text-primary);
  --link-hover-decoration: underline;

  --button-primary-bg: #304D6F;
  --button-secondary-bg: #120636;
  --button-primary-hover-bg: #458845;

  --border-color-table: #263a63;
  --border-color-hr: #555555;
  --border-color-input: #444444;
  --border-color-input-focus: var(--text-highlight);
  --input-focus-bg: #333333;
  --input-padding: 12px;

  --font-family-base: "Trebuchet MS", Helvetica, Arial, sans-serif;
  --font-size-base: 1em;
  --line-height-base: 1.6em;
  --line-height-condensed: 1.4em;

  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 15px;

  --max-width-container: 800px;

  /* Progress Bar */
  --progress-bar-bg: #444;
  --progress-bar-height: 12px;
  --progress-fill-default: #57A957; /* success */
  --progress-fill-blue: #339BB9;
  --progress-fill-error: #C43C35;
  --progress-fill-warning: #D9B31A;
  --progress-label-color: rgba(255, 255, 255, 0.9);

  /* Pagination */
  --pagination-border: #444;
  --pagination-attempted-bg: #103d5d;
  --pagination-active-bg: #009900;
}

body {
  font: normal var(--font-size-base) var(--font-family-base);
  background-image: var(--bg-body-image);
/*  background-color: var(--bg-body-color-fallback);*/
  background-size: 300px 300px;
  color: var(--text-primary);
}
h2 { text-align:center; color: var(--text-primary);  } /* Was #dfdfdf, close to #ddd */
h4 { color: var(--text-highlight); }
p {text-align: left;  margin:  12px; line-height: var(--line-height-base); color: inherit;} /* Inherit body color */
img.fit {max-width:100%; height: auto;}
li {text-align:left; line-height: var(--line-height-base); }
#wrapper {margin:0 auto;max-width: var(--max-width-container);}
.content { background: var(--bg-content); padding: 12px; border-radius: var(--border-radius-medium); }
.center {text-align:center;}
.left {text-align:left; }

table {margin: 0 auto; border: 1px solid var(--border-color-table); border-spacing: 0; border-collapse: collapse;}
table.padded td {padding:6px;}
td {  border: 1px solid var(--border-color-table); padding: 4px 0px;}

a { outline: 0;  text-decoration: none;color: var(--link-color);}
a:hover {  text-decoration: var(--link-hover-decoration);}
.link { background-color: var(--button-primary-bg); color: var(--text-on-dark-button); padding:  16px; font-size:1.4em; border-radius: var(--border-radius-medium); display: inline-block; text-align: center;}
.link:hover {background-color: var(--button-primary-hover-bg); text-decoration: none;}

.smalllink { background-color: var(--button-secondary-bg); color: var(--text-on-dark-button); margin:4px; padding: 4px; font-size:1.2em; border-radius: var(--border-radius-medium); display: inline-block; text-align: center;}
.smalllink:hover {background-color: var(--button-primary-hover-bg); text-decoration: none;}

.errorlist {color: var(--text-error); font-size:0.9em; padding:2px;list-style-type:none; margin-left: 0; padding-left: 10px;}

hr {  border: 0; border-top: 1px solid var(--border-color-hr);  border-radius:var(--border-radius-small); margin: 20px 0;}
.highlight { color: var(--text-highlight); font-weight:bold;}
.large {font-size: 1.2em;}
input[type=submit], button {
  outline:none;
  border: none;
  padding: 10px 15px;
  border-radius: var(--border-radius-medium);
  cursor: pointer;
}
input[type=text], input[type=date], input[type=email], input[type=password], select {
  padding: var(--input-padding);
  border-radius: var(--border-radius-medium);
  border: 1px solid var(--border-color-input);
  background-color: var(--bg-content); /* Or a slightly lighter shade */
  color: var(--text-primary);
}
input:focus, select:focus {
  outline: none;
  border-color: var(--border-color-input-focus);
  background-color: var(--input-focus-bg);
  box-shadow: 0 0 0 2px var(--border-color-input-focus-shadow, rgba(255,204,51,0.3)); /* Optional focus ring */
}

div.question {
  font-size:1.4em;
  padding:10px;
  color: var(--text-primary); /* was #eeeeee */
  background-color: var(--bg-question);
  border-radius: var(--border-radius-large);
  margin-bottom: 15px;
}

/*
  For custom radio buttons, ensure your HTML is structured like:
  <input type="radio" id="option1" name="questionX" class="aq-radio" value="A">
  <label for="option1" class="answer_radio">Answer A</label>
*/
input[type=radio].aq-radio {
  opacity: 0; /* Hide the original radio */
  position: fixed; /* Take out of flow, prevent accidental space */
  width: 0;
  height: 0;
}

label.answer_radio {
  background-color: var(--bg-answer);
  padding:10px;
  font-size:1.2em;
  display: inline-flex; /* Use flex for alignment */
  align-items: center;
  border-radius: var(--border-radius-large);
  cursor: pointer;
  margin-bottom: 8px; /* Add some space between radio options */
  width: 100%; /* Make labels take full width if desired */
  box-sizing: border-box;
}

/* This ::before is the custom radio button visual */
input[type=radio].aq-radio + label.answer_radio::before {
    content: '';
    display: inline-block; /* Keep it in flow with text */
    width: 1.2em;         /* Size of the custom radio */
    height: 1.2em;
    border: 2px solid var(--text-secondary); /* Use variable */
    border-radius: 50%;
    margin-right: 0.75em;   /* Space between custom radio and text */
    background-color: transparent; /* Default state */
    flex-shrink: 0; /* Prevent shrinking if label text is long */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

input[type=radio].aq-radio:checked + label.answer_radio::before {
    background-color: var(--text-highlight); /* Checked state fill */
    border-color: var(--text-highlight); /* Checked state border */
}

input[type=radio].aq-radio:checked + label.answer_radio {
  color: var(--text-highlight); /* Optionally change text color of selected label */
  /* font-weight: bold; */ /* Optionally make text bold */
}

/* Bar which is placed behind the progress */
.ui-progress-bar {
  background-color: var(--progress-bar-bg);
  border-radius: var(--border-radius-small);
  height: var(--progress-bar-height);
  position: relative;
  overflow: hidden;
}

.ui-progress-bar .ui-progress {
  background-color: var(--progress-fill-default);
  height: 100%;
  display: block;
  border-radius: var(--border-radius-small); /* Match parent or slightly less */
  transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
  text-align: right;
  line-height: var(--progress-bar-height);
}

.ui-progress-bar.blue .ui-progress {  background-color: var(--progress-fill-blue); }
.ui-progress-bar.error .ui-progress {  background-color: var(--progress-fill-error); }
.ui-progress-bar.warning .ui-progress {  background-color: var(--progress-fill-warning); }
.ui-progress-bar.success .ui-progress {  background-color: var(--progress-fill-default); } /* Default is success */

.ui-progress-bar .ui-progress span.ui-label {
  font-size: 10px;
  position: absolute;
  right: 0;
  line-height: var(--progress-bar-height);
  padding-right: 8px;
  color: var(--progress-label-color);
  white-space: nowrap;
}
.ui-progress-bar .ui-progress span.ui-label b {  font-weight: bold; }

#progress_div {
  /*position:fixed;*/
  text-align:center;
  top:0px;
  max-width: calc(var(--max-width-container) - 20px); /* Slightly less than wrapper */
  width:96%;
  padding:2%;
  background-color: var(--bg-progress-div);
  color: var(--text-primary); /* was #fee */
  border-radius: var(--border-radius-medium);
  margin: 0 auto 15px auto; /* Centering if not fixed */
  box-sizing: border-box;
}

.pagination table {width:100%}
.pagination td { border:1px solid var(--pagination-border); }
.pagination a {
    padding: 0px 4px;
}
.pagination a.attempted {  text-decoration: line-through; background-color: var(--pagination-attempted-bg);}
.pagination a.active {    background-color: var(--pagination-active-bg); color: var(--text-on-dark-button);}
.pagination a:hover:not(.active) {    background-color: var(--border-color-input); color: var(--text-highlight);}

table.result {
  width:100%;
  max-width: 400px;
  text-align:center;
  margin: 15px auto;
}
table.result td:nth-child(1) {
  text-align:left;
  padding-left: 10%;
}
table.result td{ padding:6px}
.not_selected { color: #fc8c88}
.selected { color: #5df076}
.second_attempt { color: #f7c86f}

/* Utility Classes Added */
.text-justify {
  text-align: justify;
}

.m-10 { /* For margin: 10px; */
  margin: 10px;
}

.text-important-date { /* For the white text in the schedule table */
  color: var(--text-on-dark-button);
}


form table td p.required > label {
  font-weight: bold;
}

/* Optional: Add an asterisk for required field labels
form table td p.required > label::before {
  content: "* ";
  color: var(--text-error);
  font-weight: bold;
  margin-right: 3px;
}
*/

.checkbox-large {
  transform: scale(1.5);
  margin: 15px;
  vertical-align: middle;
}

.user-logout-link {
  padding: 4px;
  border-radius: var(--border-radius-medium);
  background-color: var(--bg-card);
}
.card {
  padding: 12px;
  border-radius: var(--border-radius-medium);
  background-color: var(--bg-card);
}