/* ul { margin: 0; padding: 0; display: flex; list-style-type: none; }
li > * { padding: 1em; }
li.active > a { color: #5e5e5e; border-bottom: 2px solid #4a4a4a; }
form { display: flex; }
label > input { width: 3em; }
form > * { padding-right: 1em; }
#result { font-weight: bold; } */

.start-quiz-button {
  font-size: 20px;
  padding: 10px 20px;
}

.required:after {
  content: " *";
  color: red;
}

label[for=answer],
label[for=hint] {
  font-size: 2.5em;
  padding-top: 0.25em;
  padding-right: 0.25em;
  padding-bottom: 0.025em;
  padding-left: 0.5em;
}

#hint_area {
  background-color: #00ffff;
  border-radius: 25px;
  padding: 1.15em;
}

#hint {
  background-color: #66ffff;
  padding: 5px;
  margin: 0.5em;
  max-width: 650px;
}

#upload_hint_image {
  padding: 1.15em;
}

#categories,
#search-within-categories,
#quizfilters {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.categories-group {

  border-radius: 25px;
}

.category-item,
.categories-group {
  background-color: #ff9933;
}

#new_cat {
  border: 4px solid #ff9933;
  /* float: right; */
}

#collapse-categories-button {
  float: right;
}

.category-title {
  margin-bottom: 0.5rem;
}

.question-form-area {
  border-radius: 25px;
  background-color: #66ff66;
  padding: 1.15em;
  word-wrap: break-word;
}

.answer-form-area {
  border-radius: 25px;
  background-color: #ff99ff;
  padding: 1.15em;
}

.qty-to-que-number-form {
  width: 75px;
  padding: 10px;
  margin: 25px;
}

.user-completed-questions-msg,
.user-que-more-questions-msg {
  padding: 10px;
  margin: 15px;
  font-size: 2rem;
}

.question-option-checkboxn {
  padding: 10px;
  margin: 15px;
  background-color: #6699ff;
  border-radius: 25px;
  padding-right: 55px;
}


.question-option-checkbox {
  padding: 10px;
  margin: 15px;
  background-color: #6699ff;
  border-radius: 25px;
  padding-right: 55px;
}

#sidebar {
  width: 450px;
  overflow: auto;
  margin: 10px;
  margin-top: 0 !important;
  background: #ccffcc;
  color: black;
  transition: all 0.3s;
  float: left;
  word-break: break-word;
}

#edit-question-content {
  float: right;
  border: solid;
}

#delete-question-button {
  margin-left: 2em;
}

@media (max-width: 800px) {
  #sidebar {
    position: relative;
    width: 100%;
  }

  #edit-question-content {
    margin-left: 0;
  }
}

.search-filters {
  background-color: #00ccff;
}

@media (min-width: 992px) {
  .navbar-nav {
    margin-left: 100px;
  }
}

#search-filters {
  margin: 10px;
}

#edit-question-header {
  background-color: #ff99ff;
  padding: 5px;
  /* border-radius: 25px; */
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;

}

.edit-question-title {
  padding-left: 20px;
}

#search-filters {
  padding: 10px;
  margin: 10px;
}

#title-filter-button-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

span {
  display: inline-block;
}

.search-result-category-item {
  padding: 3px;
  margin: 3px;
  background-color: #ff9933;
  border-radius: 15px;
  padding-right: 9px;
  padding-left: 9px;
}

#editquestionform-area {
  display: none;
}

.image-container>img {
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
  padding: 5px;
  margin: 5px;
}

.image-close-button {
  position: absolute;
  right: 2.7rem;
  font-size: x-large;
  font-weight: 800;
}

#starrating {
  display: flex;
  align-items: center;
  width: 160px;
  flex-direction: row-reverse;
  justify-content: space-between;
  position: relative;
}

/* hide the inputs */
.star-rating input {
  display: none;
}

/* set properties of all labels */
.star-rating>label {
  width: 30px;
  height: 30px;
  font-family: Arial;
  font-size: 30px;
  transition: 0.2s ease;
  color: orange;
}

/* give label a hover state */
.star-rating label:hover {
  color: #ff69b4;
  transition: 0.2s ease;
}

.star-rating label:active::before {
  transform: scale(1.1);
}

/* set shape of unselected label */
.star-rating label::before {
  content: '\2606';
  top: 0;
  line-height: 26px;
}

/* set full star shape for checked label and those that come after it */
.star-rating input:checked~label:before {
  content: '\2605';
}

@-moz-document url-prefix() {
  .star-rating input:checked~label:before {
    font-size: 36px;
    line-height: 21px;
  }
}

#que-more-search-results-container {
  background: brown;
  border-radius: 15px;

}

#que-more-search-results-table {
  border: 2px solid;
  margin: 10px;
  padding: 5px;
}

#que-more-search-results-table tr,
th,
td {
  border: 2px solid;
  margin: 10px;
  padding: 10px;
}

.block-button,
.badge {
  padding: 10px;
  margin: 10px;
}

.question-chkbox {
  width: 30px;
  height: 30px;
}

.user-list-area {
  background: gray;
  border-radius: 15px;
  padding: 10px;
  margin: 10px;
}

.q-question-title-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.qq-flexbox {
  display: flex;
  justify-content: space-between;

}

.q-section-left-column {
  max-width: 54%;
}

.q-section-right-column {
  max-width: 45%;
}

.question-text-section {
  display: inline-flex;
  align-items: baseline;
  justify-content: space-around;
  align-content: flex-end;
  flex-wrap: wrap;
  flex-direction: row;
}

.answer-text {
  padding: 0.8em;
  margin: 0.2em;
  min-width: 300px !important;
}

.q-section-right-column {
  border: 2px solid;
  margin: 0.3rem;
  padding: 0.5rem;
  border-radius: 15px;
  background-color: pink;
}

/* Single star *after question rating number */
/* #singlestar {
  display: flex;
  align-items: center;
  flex-direction: row-reverse; 
  justify-content: space-between;
  position: relative;
} */

#singlestar label {
  height: 5em;
  /* adjust as needed to match the size of your h1 */
}

#singlestar label::before {
  font-size: 1.5em;
  /* adjust this value to change the size of the star */
  line-height: 1em;
  /* you may also need to adjust line-height to align the star vertically */
  display: inline-flex;
  align-items: start;
  align-self: start;
  ;

}

#singlestar {
  display: inline-flex;
  align-items: start;
  align-self: start;
  ;
}

.bigbtn {
  align-self: center;
  min-height: 100px;
  margin: 0.5em;
  padding: 1.0em;
  padding-left: 2em;
  padding-right: 2em;
}

.btn3d {
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
}

.provided-answer-field.disabled {
  background-color: #f2f2f2;
  color: #808080;
}

.q-answer-container {
  display: flex;
  border: none !important;
  padding: 0.5em;
  margin: 0.5em;
}

#q-answer-reveal-text {
  border: 2px solid;
  min-height: 6em;
}

.q-answer-container {
  display: Flex;
  align-items: flex-start
}

@media screen and (max-width: 768px) {
  .q-answer-container {
    flex-direction: column;
  }

  .hide-if-small {
    display: none;
  }

  .shrink-if-small {
    font-size: 1.5rem;
  }
}

.button-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#incorrect-answer-result-button {
  background-color: #f90000;
}

#exclude-question-button {
  background-color: #f90000;
}

.seeking-help {
  background-color: yellow;
}

#login-area {
  display: flex;
  justify-content: center;
  align-items: center;
}

#username {
  width: 250px;
}

#password {
  width: 250px;
}

.form-group {
  margin-bottom: 1rem;
  padding: 1rem;
}

.chart-container {
  max-width: 100%;
  overflow-x: auto;
  /* Add horizontal scrollbar if needed */
}

.chart-container img {
  max-width: 100%;
  /* Reduce the size of the chart to fit the container */
  height: auto;
}

.redbtn {
  background-color: red !important;
  min-width: 150px !important;
}

.login-button-container {
  display: inline-flex;
  align-items: center;
}

#edu-tree {
  width: 150px;
}

.login-section-field {
  text-align: center;
}

.image-container {
  justify-content: center;
}

.centering-container {
  display: flex;
  justify-content: center;
  /* Horizontally center the content */
  align-items: center;
  /* Vertically center the content */
  margin: 5px;
  padding: 5px;
}

#community-image-container {
  width: 39%;
  padding: 5px;
  margin: 5px;
}

#community-text-container {
  width: 59%;
  padding: 5px;
  margin: 5px;
}

#text-container {
  padding: 5px;
  margin: 5px;
}

#hourglass-container {
  width: 50%;
}

#hourglass {
  max-height: 250px;
}

#hourglass-container {
  padding-left: 17%;
}

@media screen and (max-width: 500px) {
  .centering-container {
    flex-direction: column;
  }

  #hourglass-container {
    padding-left: 0;


  }

  #community-image-container,
  #community-text-container {
    width: 100%;
  }

  #site-format-container,
  #community-container,
  #repetition-days-conatiner {
    flex-direction: column-reverse;
  }

  #login-area {
    flex-direction: column;
  }


}

.typical-spacing {
  padding: 5px;
  margin: 5px;
}


footer {
  background-color: #343a40;
  /* A dark grey color */
  color: #ffffff;
  /* Text color is white for contrast */
  padding: 20px 0;
  /* Padding at the top and bottom of the footer */
  margin-top: 20px;
  /* Margin at the top of the footer to separate from the content above */
  /* float: left; */
  display: flex;
  align-content: space-around;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap
}

.footer-content {
  margin: 0 auto;
  /* Center the content */
  max-width: 960px;
  /* Maximum width of the content */
  padding: 0 20px;
  /* Padding at the sides of the content */
}

.footer-content h4 {
  margin-bottom: 15px;
  /* Space below the headings */
}

.footer-content p {
  margin-bottom: 0;
  /* Remove the space below paragraphs */
}

.footer-bottom {
  border-top: 1px solid #ffffff;
  /* A border at the top of the bottom section for separation */
  padding-top: 20px;
  /* Padding at the top of the bottom section */
}

.button-inner-text {
  margin: 5px;
  padding: 5px;
}

.picture {
  max-width: 100%;
}

.footer-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.form-control.answer {
  max-height: 600px;
}

.answer-cls {
  max-width: 1000px;
  white-space: nowrap;
}

.hidden {
  display: None;
}



/* prism stuff temp*/

code[class*="language-"],
pre[class*="language-"] {
  color: black;
  background: none;
  text-shadow: 0 1px white;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
}

pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
  text-shadow: none;
  background: #b3d4fc;
}

@media print {

  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none;
  }
}

/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  margin: .5em 0;
  overflow: auto;
}

:not(pre)>code[class*="language-"],
pre[class*="language-"] {
  background: #f5f2f0;
}

/* Inline code */
:not(pre)>code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray;
}

.token.punctuation {
  color: #999;
}

.token.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #9a6e3a;
  /* This background color was intended by the author of this theme. */
  background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #07a;
}

.token.function,
.token.class-name {
  color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
  color: #e90;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

.error {
  color: red
}