:root {
  --custom-blue: #4285f4;
  --custom-red: #db4437;
  --custom-yellow: #f4b400;
  --custom-green: #0f9d58;
  --custom-gray: #3a3741;


  --category-color: #E74930;
  --subCategory-color: #FF8F01;
  --moduleCategory-color: #FFB800;
}

.page-title {
  color: #fff !important;
}

.card {
  /* background-color: #171B23 !important; */
  border: 0px solid #000;
  background-color: var(--custom-gray);
  border-bottom: 2px solid #9e5700 !important;
  color: #fff !important;
}

.sidebar:after,
.off-canvas-sidebar:after {
  background: var(--custom-gray) !important;
}

.sidebar .nav li > a,
.off-canvas-sidebar .nav li > a,
.sidebar .profile,
.card-title,
.big-small-text .big-text,
.big-small-text .small-text,
.bbox-text,
.card label,
.vl.mini-video.active,
.vl.mini-video,
.table th,
.table td,
.box-dark-header,
.quiz-title {
  color: #fff !important;
}

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

.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: linear-gradient(to right, yellow, red 130%);
  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: none !important;
}

#card-login {
  background-color: var(--custom-gray);
  border-radius: 20px;
}

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

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

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

.calendar thead *,
.card-header 
{
  background-color: var(--custom-gray) !important;
}

.fc .fc-button-primary {
  background-color: #e74930 !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: #fff;
}

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

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

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

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

.modal-title
 {
  color: var(--custom-red) !important;
}

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


.modal-content {
  background-color: var(--custom-gray);
}


.btn-danger {
  color: darkred !important;
}

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



.list-group-item {
  background-color: transparent;
  color: #fff;
  border: none;
  border-bottom: 1px solid #000;
  border-radius: 0px !important;
}

.navbar-toggler-bar {
  background-color: #fff !important;
}

.answer {
  border-radius: 10px;
  color: black;
  background-color: var(--custom-yellow) !important;
  border: 0.3rem var(--custom-yellow) solid !important;
}

@media (min-width: 1023px){
  .d-lg-none {
      display: block !important;
  }
  }