:root {
  --custom-blue: #007fff;
  --custom-red: #db4437;
  --custom-yellow: #61bbbaff;
  --custom-green: #4dab82ff;
  --custom-gray: #3a3741;

  --category-color: #3b9c98ff;
  --subCategory-color: #61bbbaff;
  --moduleCategory-color: #4dab82ff;

  --color-1: #85ef24ff;
  --color-2: #3b9c98ff;
  --color-3: #61bbbaff;
  --color-4: #007fff;
  --color-5: #fdfdfcff;
  --color-6: #4dab82ff;
}

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

.sidebar .profile-pic {
  border-color: var(--custom-yellow);
}

.nav li:hover,
.nav li:hover * {
  background-color: var(--custom-yellow);
  color: #000 !important;
}

.btn:not(.card-comment .btn):not(label.btn):not(span.btn) {
  border-bottom: 2px;
  background-color: var(--custom-yellow) !important;
}

.toggle-admin {
  width: fit-content;
  margin-bottom: 1rem;
}

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

.table.w-hover tbody tr:hover td,
a:hover,
a:focus {
  color: var(--custom-yellow) !important;
}

.btn:not(.card-comment .btn):not(label.btn-default):not(span.btn) {
  background-image: var(--custom-yellow) !important;
  background-color: unset;
}

.btn:not(.card-comment .btn):not(label.btn):not(span.btn),
#card-login,
input.form-control,
select.form-control,
textarea.form-control,
.input-group-text {
  border-bottom: 5px solid var(--custom-yellow) !important;
}

#card-login {
  background-color: #fff;
  border-radius: 20px;
  margin-top: 5%;
}

#card-login input.form-control {
  padding: 14px !important;
}

#card-login .btn,
#card-register .btn {
  width: 60%;
  padding: 7px 0;
}

#btn-forgot u {
  color: #000;
  font-style: normal;
}

.fc .fc-button-primary {
  background-color: var(--custom-yellow) !important;
}

.wrap {
  white-space: pre-wrap;
}

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

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

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

.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;
}

.sub-category-container {
  width: 97%;
  margin-left: 3%;
}

.module-category-container {
  width: 94%;
  margin-left: 6%;
}

.media-heading,
.komen-text,
.vl-watch button:not(.dropdown-item),
.video-title,
.video-description,
.sticky-footer span,
.modal-body,
.modal-header .btn-close,
.col-form-label,
.card-subtitle {
  color: #000;
}

.btn-post-comment {
  padding: 0 !important;
}

.btn-post-comment i {
  color: #000;
  margin-top: 0.8rem;
}

a.reply {
  color: var(--custom-yellow) !important;
}

a:hover {
  color: #000 !important;
}

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

.card-zoom:hover {
  background-color: var(--custom-yellow) !important;
}

.btn-danger {
}

.form-group .input-group-prepend .input-group-text,
.form-group .input-group-append .input-group-text,
.input-group .input-group-prepend .input-group-text,
.input-group .input-group-append .input-group-text {
  padding: 10px;
}

.card-box {
  background: #bfbfbf;
}

.card-box:hover,
.card-box.active,
.mini-video:hover {
  background: var(--custom-yellow) !important;
}

.box {
  background: var(--custom-yellow) !important;
}

.popovertext {
  background-color: #fff !important;
  color: #000;
}

.fab {
  background: var(--custom-yellow) !important;
}

.progressbar-text {
  color: #000 !important;
}

.box-dark-header {
  color: #000 !important;
}

.active .quiz-btn:hover {
  color: var(--custom-yellow) !important;
}

.progress-bar {
  /* background-color: #57A09F; */
  background-image: linear-gradient(
    to right,
    var(--custom-yellow),
    var(--color-4) 130%
  );
}

.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;
}

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

@media (min-width: 2000px) and (orientation: portrait) {
  /* Your CSS rules here */
  #card-login {
    margin-top: 10%;
  }
}