:root {
  --custom-blue: #000;
  --custom-red: #db4437;
  --custom-yellow: #6d6e71;
  --custom-green: green;
  --custom-gray: #3a3741;

  --category-color: #0056a4;
  --subCategory-color: #6d6e71;
  --moduleCategory-color: #000000;

  --color-1: #0056a4;
  --color-2: #f90302;
  --color-3: #3a3741;
  --color-4: #007fff;
  --color-5: #fefefe;
  --color-6: #000000;

  --btn-text-hover-color: #fff;
  --btn-text-color: #f2f2f2;

  --color-primary: #fff;
  --color-secondary: #1354a3;

  --bg-menu: #f2f2f2;
}

.popovertext {
  background: var(--category-color) !important;
}
.fab {
  background: var(--category-color) !important;
}

.box {
  background: var(--category-color) !important;
}

.card {
  border-bottom: 5px solid var(--category-color) !important;
}

.sidebar {
  box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.1);
}
.btn:not(.card-comment .btn):not(label.btn-default):not(span.btn) {
  background: var(--category-color) !important;
  color: #fff !important;
}

.pdf-controls-fixed {
  position: fixed;
  top: 5rem;
  text-align: center;
  width: 100%;
}

.pdf-controls-absolute {
  position: absolute;
  top: 1rem;
  text-align: center;
  width: 100%;
  left: 0;
  right: 0;
}
.pdf-controls-absolute button,
.pdf-controls-fixed button {
  margin-bottom: 10px;
  font-size: 12px;
  width: auto !important;
  padding: 5px 10px;
}

#pdf-canvas,
#pdf-canvas2 {
  margin-top: 2rem;
}

.card-comment .card-body {
  height: 300px;
}

.btn {
  font-size: 0.8rem;
  padding: 0.2em 1.5em;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #ffb800;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #633f6b;
  cursor: pointer;
}

.radio-container {
  background-color: var(--category-color);
  color: #fff !important;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 5px !important;
}

.sub-radio-container {
  background-color: var(--subCategory-color);
  color: #fff !important;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 5px !important;
  width: 95%;
}

.module-radio-container {
  background-color: var(--moduleCategory-color);
  color: #fff !important;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 5px !important;
  width: 90%;
}

.card-box {
  background: var(--category-color) !important;
  height: auto;
  color: #fff !important;
}

.card-box:hover,
.card-box.active,
.mini-video:hover {
  background: var(--subCategory-color) !important;
  color: #000 !important;
}

.card label {
  text-align: left;
}

.sub-category-container,
.module-category-container {
  text-align: right;
}

.toggle-admin {
  width: fit-content;
  font-size: 12px;
}

#question {
  padding: 0.5rem 2rem 1.5rem;
}

.sidebar .nav i,
.off-canvas-sidebar .nav i {
  display: inline-block;
  color: #787a7d;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #0596f2;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #0596f2;
  cursor: pointer;
}

#question {
  height: auto !important;
}

#text-question {
  height: 30vh;
  overflow-y: auto;
}

.answer-rationale-header {
  padding-top: 0;
}

.quiz-status div.card {
  height: 100px;
}

#question h6 {
  font-weight: bold;
}
#text-question,
.answer span {
  font-size: 1.2rem !important;
  font-weight: normal !important;
}

.answer span {
  color: #fff !important;
}

.answer {
  padding: 0.25rem !important;
}

.text-primary,
a.text-primary:focus,
a.text-primary:hover {
  color: #007bff !important;
}

#card-login {
  border-bottom: 0px solid !important;
}

#notification-bell {
  background-color: var(--color-1);
  border-radius: 50px;
  position: absolute;
  padding: 0.1rem 1rem;
  z-index: 1030;
  right: 2rem;
  top: 1rem;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}

#notification-bell > * {
  color: #fff !important;
}

.notification-list {
  position: absolute;
  z-index: 100;
  right: 2rem;
  top: 3rem;
  width: 18rem;
  background-color: #fff;
  padding: 0.5rem;
  border-radius: 10px;
  box-shadow: 1px 1px 20px #ebebeb;
}

.notification-list .small {
  font-size: 0.7rem;
}
.notification-list span {
  text-wrap: wrap;
  font-size: 0.75rem;
}

.notification {
  background-color: #f4f4f4;
  padding: 10px;
  margin-bottom: 10px;
}