.button-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      gap: 10px; /* Optional: Adds space between buttons */
      width: 100%; /* Ensures the container fills the parent's width */
  }

.select-btn {
      border: 2px solid rgb(60, 60, 63);
      background-color: white;
      color: blue;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.2s ease;
      padding: 10px;
    }

.select-btn:hover {
      background-color: blue;
      color: white;
    }

.select-btn.selected {
      background-color: blue;
      color: white;
    }

.ans_button {      
  border: 2px solid rgb(60, 60, 63);
  background-color: white;
  color: blue;
  font-size: 20px;
  font-weight: bold;
  border-radius: 3px;
  transition: all 0.2s ease;
  padding: 10px;
  width: 50%;
  text-align: center;
  }

.ans_correct {
  border: 2px solid rgb(60, 60, 63);
  background-color: rgb(3, 174, 46);
  color: rgb(0, 0, 0);
  font-size: 20px;
  font-weight: bold;
  border-radius: 3px;
  transition: all 0.2s ease;
  padding: 10px;
  width: 50%;
  text-align: center;
}

.ans_incorrect {
  border: 2px solid rgb(60, 60, 63);
  background-color: rgb(182, 1, 1);
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-weight: bold;
  border-radius: 3px;
  transition: all 0.2s ease;
  padding: 10px;
  width: 50%;
  text-align: center;
}
    

/* From my own styling */
#htmx-indicator {
  opacity: 0;
  transition: opacity 500ms ease-in;
}

#htmx-request .loader {
  display: block;
}

#htmx-request.loader {
  display: block;
}

/* Hide previously loaded content during HTMX request */
#htmx-request .loaded-content {
  display: none;
}

#htmx-request.loaded-content {
  display: none;
}
.ck-content .image.image_resized {
	display: block;
	box-sizing: border-box;
}

.ck-content .image.image_resized img {
	width: 100%;
}

.ck-content .image.image_resized > figcaption {
	display: block;
}

#comments {
  padding: 0px;
  margin: 0px;
  width: 100%;
}

#comments .card {
  background-color: white;
  color: white;
  border: white;
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
}

#comments h4 {
  text-align: left !important;
}

#comments .card_title {
  color: red;
  text-align: left !important;
}

#comments .text-muted em {
  color: yellow;
}

.bg_GOLD {
  background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}

.bg_SILVER {
  background: linear-gradient(90deg,rgba(138, 138, 138, 1) 1%, rgba(217, 217, 217, 1) 50%, rgba(184, 184, 184, 1) 100%);
}

.bg_BRONZE {
  background: linear-gradient(90deg,rgba(125, 103, 7, 1) 0%, rgba(181, 88, 22, 1) 50%, rgba(125, 103, 7, 1) 100%);
}

.bg_BASIC {
  background: linear-gradient(141deg,rgba(0, 71, 99, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(1, 77, 17, 1) 100%);
}

.bg_GUEST {
   background: linear-gradient(141deg,rgba(0, 71, 99, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(1, 77, 17, 1) 100%);
}

.bg_green {
    background-color: green;
    height: 100%;
    width: 2px;
    float: left;
    margin: 0px;
    padding: 0px;
}

.bg_red {
    background-color: darkred;
    height: 100%;
    width: 2px;
    float: left;
    margin: 0px;
    padding: 0px;
}

.rotatedtext {
    writing-mode: sideways-lr;
    vertical-align: bottom;
    width: 30px;
}

.percentages {
    width: 30px;
    text-align: center;
    vertical-align: middle;
    height: 30px;
}

.student_results {
    overflow-x: auto;
    width: 100%;
}

.student_results_row_border {
    border-bottom: 2px dotted #ff000d;
}

#fq {
    background-color: darkred;
    color: white;
}

#sq {
    background-color: orangered;
    color: white;
}

#tq {
    background-color: lightgreen;
    color: black;
}

#lq {
    background-color: green;
    color: black
}

.courses_row_bottom_border {
    border-bottom: 1px solid #ff000d;
}

.student_results_box_border {
    border: 1px solid lightgrey;
}

/*-------------------------
    Canvas 
-------------------------*/
#container {
  position: relative;
  display: inline-block;
  max-width: 90vw;
}

#bgCanvas {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

#drawCanvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: auto;
}

#controls {
  margin-top: 10px;
}

#controls button {
  margin-right: 5px;
}