/* Page palette: color definitions for a triad with complementary
   color without black and white. */
:root {
   --primary_color_2: #b5c9f0;
   --primary_color_3: #85a2dc;
   --primary_color_1: #5e81c5;
   --primary_color_4: #3f64ac;
   --primary_color_5: #264d9b;

   --secondary_color_1_2: #e2b1ef;
   --secondary_color_1_3: #c77edc;
   --secondary_color_1_1: #ac56c5;
   --secondary_color_1_4: #9137ab;
   --secondary_color_1_5: #7e1d9a;

   --secondary_color_2_2: #d0f9b6;
   --secondary_color_2_3: #b2f287;
   --secondary_color_2_1: #98ea62;
   --secondary_color_2_4: #81e143;
   --secondary_color_2_5: #64cd20;

   --complement_color_2: #ffe7ba;
   --complement_color_3: #ffd88f;
   --complement_color_1: #ffcc6b;
   --complement_color_4: #ffc14c;
   --complement_color_5: #e9a525;
}

.correct{
    color: #00AA00
}

.wrong{
    color: #DD0000
}

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    display: flex;
    justify-content: center; /* Centers content horizontally */
}

.container {
    width: 50%;
    max-width: 1200px;
}

.container::after {
    content: "";
    display: block;
    /* width: 100px; */
    height: 130px;
}

.bottom-line {
    position: fixed;
    bottom: 0;
    width: 50%;
    max-width: 1200px;
    background-color: white;
    color: black;
    text-align: center;
    padding: 10px 0;
}

/* Responsive for small screens */
@media (max-width: 768px) {
    .container {
	width: 95%; /* Adjust width on small screens */
    }
    .bottom-line {
	width: 95%; /* Adjust width on small screens */
    }
    body {
	font-size: 13px; /* Increase font size for mobile */
    }
}

h1 {
    color: #333;
}

h4.thin {
  display: block;
  font-size: 1em;
  margin-top: 1em;
  margin-bottom: 0.0em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

form {
    margin-top: 20px;
}

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

input[type="text"] {
    margin-top: 10px;
    padding: 5px;
}

input[type="submit"] {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: var(--secondary_color_1_1);
    color: white;
    border: none;
    cursor: pointer;
}

input[type="submit"]:hover {
    color: white;
    background-color: var(--secondary_color_1_4);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
}
th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
th {
    background-color: var(--secondary_color_1_4);
    color: white;
}
tr:nth-child(even) {
    background-color: #f2f2f2;
}
tr:hover {
    background-color: #ddd;
}


.plainT table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
}

.plainT th,
.plainT td {
    padding: 12px;
    text-align: left;
    /* border-bottom: 1px solid #ddd; */
}

.plainT th {
    background-color: var(--secondary_color_1_4);
    /* color: white; */
}

.plainT tr:nth-child(even) {
    /* Default color is just transparent */
    background-color: transparent;
}

.plainT tr:hover {
    background-color: transparent;
    }
/**
Setup for 5-Star rating system (see five_star_rating_template)
*/
.star-rating {
    font-size: 0;
    display: inline-block;
}
.star-rating span {
    font-size: 30px;
    cursor: pointer;
    color: #ccc;
    display: inline-block;
}

/* If hovered or *has* the 'selected' class */
.star-rating span[class~="selected"],
.star-rating span:hover {
    /* color: #ffcc00; */
    color: var(--secondary_color_2_4);
}

/* Reset if begins with 'disabled' class */
.star-rating span[class|="disabled"] {
    color: #ccc; /* Reset disabled stars */
}