:root {

  --category-color: #013222;
  --subCategory-color: #FFAB1E;
  --moduleCategory-color: #de7b96;

  --color-primary: #013222;


  --color-1: #ffe500;
  --color-2: #ffb800;
  --color-3: #30c83f;
  --color-4: #ff7A00;
  --color-5: #007BFF;
  --color-6: #E83E8C;


  --color-yellow: #ffe500;
  --color-orange: #ffb800;
  --color-green: #30c83f;
}

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

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

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

.btn:not(.card-comment .btn):not(label.btn):not(span.btn) {
  /* border-bottom: 2px; */
  /* background-color: var(--color-primary) !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(--color-primary) !important; */
}


.btn:not(.card-comment .btn):not(label.btn-default):not(span.btn) {
  /* background-image: var(--color-primary) !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(--color-primary) !important; */
}

#card-login {
  background-color: transparent;
  border: 0px solid #000 !important;
  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: #000;
  font-style: normal;
}

.fc .fc-button-primary {
  /* background-color: var(--color-primary) !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(--color-primary) !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(--color-primary) !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(--color-primary) !important; */
}

/* .box {
  background:  var(--color-primary) !important;
} */

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

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

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

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

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

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

.answer.w-hover.mb-2.p-3.correct::after {
/* content: 'CORRECT ANSWER'; */
/* display: block; */
}

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

.card-body {
position: relative;
}

#notification-bell {
/*background-color: var(--color-primary);
   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;
}

.geser.geser-reply {
display: flex;
}
.geser.geser-reply .comment-textbox {
width: 100%;
}
.geser.geser-reply .comment-sendbtn {
margin-left: 1rem;
padding: 0rem 0.5rem;
}



@media only screen and (max-width: 767px) {
/* styles for mobile devices */
#pdf-canvas, #pdf-canvas2 {
  margin-top: 5rem;
}

}

.sidebar-menu .sidebar-wrapper ul.nav li:hover {
    background:none;
    color: #fff !important;
}

.sidebar-menu .sidebar-wrapper ul.nav li:hover a {
    /* background-color: #c6315a;
    color: #fff !important; */
}
.sidebar-menu .sidebar-wrapper ul.nav li:hover a i,
.sidebar-menu .sidebar-wrapper ul.nav li.active a i
{
    /*background-color: #c6315a;*/
    color: #fff !important;
}


.vl-watch textarea {
  background-color: #D9D9D9 !important;
  border-radius: 40px;
}

.btn-post-comment i::before {
  content : '' !important;
}