.box {
    background-color: #07464B;
    transform: skew(-10deg);
    margin: 0.5rem;
  }

  .box-line {
    background-color: #1F7473;
    transform: skew(-1deg);
    position: absolute;
    height: 100%;
    width: 0.5rem;
    left: 0.7rem;
  }

  .box-text {
    font-size: 1.3rem;
    font-weight: 900;
    color: #5D9A9B;
    padding: 0.5rem 0.5rem 0.5rem 2rem;
  } 

  .bbox-text {
    font-size: 0.8rem;
    font-weight: 800;
    color: #5D9A9B;
    padding: 0.2rem 1rem;
  }

  .box-inverted {
    background-color: #1F7473;
  }

  .box-inverted .box-line {
    background-color: #07464B;
  }

  .box-inverted .box-text {
    color: #07464B;
  }

  .page-title {
    font-weight: 900;
    font-size: 3rem;
    color: #07464B;
    text-transform: uppercase;
  }

  .count-d-day {
    text-align: center;
    margin-top: -2rem;
  }

  .remaining-day {
    font-size: 7rem;
  }

  .label-d-day {
    margin-top: -3rem;
    font-weight: bolder;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
  }

  #performance {
    background-color: #07464B;
  }

  #q-stats {
    /* background-color: #07464B;
    height: 80vh;
    border-radius: 0.5rem; */
    min-height: 80vh;
    border-radius: 0.5rem;
    padding-bottom: 1rem;
  }

  .bg-dark {
    background-color: #07464B !important;
  }

  .box.inactive {
    opacity: 0.5;
    color: #1F7473;
  }

  .box.active {
    color: #fff;
  }

  .box-text-big {
    padding-left: 1.7rem;
    font-weight: bold;
  }

  .box-text-small {
    padding-left: 1.5rem;
    font-weight: bold;
  }

  .big-small-text .big-text {
    font-size: 1.5rem;
    color: #fff;
    text-align: center;
  }

  .big-small-text .small-text {
    font-size: 0.6rem;
    color: #fff;
    text-align: center;
    line-height: 1;
  }

  .vl.mini-video {
    padding-right: 0.3rem;
    padding-left: 0.3rem;
    padding-bottom: 0.5rem;
    color: #07464B;
  }

  .vl.mini-video.inactive {
    opacity: 0.5;
  }

  .vl.mini-video.active {
    color: #fff !important;
  }

  .vl .video-thumbnail {
    background-color: #07464B;
    height: 9em;
    border: 0.3rem #07464B solid;
    background-size: contain;
    background-position: center;
    position: relative;
    background-repeat: no-repeat;
  }

  .video-thumbnail .p-bar {
    height: 0.15rem;
    position: absolute;
    background: red;
    bottom: 0.2rem;
  }

  .vl .video-text-1 {
    padding: 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    font-weight: bold;
  }

  .vl .video-text-2 {
    padding: 0 0.5rem;
    font-size: 1rem;
    margin-top: -0.4rem;
  }

  .vl-watch {
    padding: 0rem 4rem;
  }

  .vl-watch .bbox-text {
    font-size: 0.8rem;
    color: #fff;
    text-transform: uppercase;
    padding: 0.2rem 0.2rem;
    font-weight:normal;
  }

  .vl-watch .box {
    background-color: #07464B;
    transform: skew(0deg); 
    margin: 0.5rem 0;
  }

  .box-options {
    position: absolute;
    width: 96%;
    z-index: 1;
    opacity: 0.9;
    top: -315%;
  }

  .vl-watch textarea {
    background: #fff;
    border-radius: 0.5rem;
    max-height: unset;
    padding: 0.5rem;
  }

  .vl-watch button:not(.dropdown-item) {
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1rem;
    background: #07464B;
    border-color: #07464B;
  }

  .dropdown-menu {
    min-width: auto;
  }

  .vl-overlay {
    position: absolute;
    width: 99%;
    height: 100%;
    background: #07464B;
    z-index: 1;
    top: 0;
    opacity: 0.9;
  }

  .overlay-msg {
    color: #fff;
    font-style: italic;
    font-size: 2rem;
    text-align: center;
    margin-top: 3rem;
  }

  .overlay-progress {
    width: 46%;
    margin-left: 27%;
    margin-top: 1rem;
  }

  .prog-txt {
    color: #fff;
    font-size: 0.7rem;
    text-align: center;
  }

  .progress {
    height: 2rem;
    border-radius: 0.5rem;
    background-color: #1F7473;
  }

  .progress-bar {
    background-color: #57A09F;
  }

  .overlay-rate {
    width: 30%;
    margin-left: 35%;
    text-align: center;
    color: #fff;
    font-size: 0.6rem;
    font-style: italic;
    margin-top: 1rem;
  }

  .vl-overlay button {
    font-size: 0.7rem;
    background-color: #57A09F;
    padding: 0.5rem;
  }

  .q-btn {
    width: 15rem;
    border-color: #07464B;
    color: #fff;
    background-color: #07464B;
    border-radius: 0.5rem;
  }

  .box-dark {
    background-color: #07464B !important;
    color: #fff;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    position: relative;
  }

  #question {
    height: 60vh;
  }

  .answer {
    text-align: center;
    border: 0.3rem #07464B solid;
    line-height: 1;
  }

  .answer.correct {
    border: 0.3rem #fff solid !important;
  }

  .answer.incorrect {
    border: 0.3rem #CE505C solid !important;
    color: #CE505C !important;
  }

  .box-dark-header {
    font-size: 1rem;
    color: #1F7473;
    font-weight: bold;
  }

  .color-d {
    color: #07464B !important;
  }

  .color-m {
    color: #1F7473 !important;
  }

  .color-l {
    color: #57A09F  !important;
  }

  .btn-next-q {
    position: absolute;
    bottom: -1rem;
    width: 7rem;
    padding: 0.2rem;
    border-radius: 0.5rem;
    background-color: #fff;
    color: #07464B;
    font-style: italic;
    font-weight: bold;
    right: 0;
  }

  .box-button {
    position: absolute;
    bottom: -1rem;
    padding: 0.2rem;
    border-radius: 0.5rem;
    color: #07464B;
    font-style: italic;
    font-weight: bold;
  }

  .box-button-left {
    left: 0;
  }
  .box-button-right {
    right: 0;
  }

  .box-button .btn {
    background-color: #fff;
    color: #1F7473 ;
  }

  .box-dark .btn {
    background-color: #fff;
    color: #1F7473;
  }

  .letter-correct-answer {
    background-color: #fff;
    color: #074648;
    width: 5rem;
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    border-radius: 0.5rem;
    margin-top: -2rem;
    line-height: 1.4;
    float: left;
  }

  .answer-rationale-header {
    font-style: italic;
    font-size: 1rem;
    padding-top: 1rem;
  }

  .box-dark p {
    white-space: pre-line;
  }

  .box-dropdown {
    position: absolute;
    width: 100%;
    z-index: 1;
    background: transparent;
  }

  .box-dropdown ul {
    list-style: none;
    padding: 0rem 1rem;
  }

  .box-dropdown li {
    background-color: #1F7473;
    margin-bottom: 0.3rem;
    padding: 0.1rem;
    line-height: 1.3;
  }

  .box-dropdown div {
    line-height: 1;
    font-size: 0.7rem;
    padding: 0.5rem 0;
    padding-left: 0.3rem;
  }

  .msg-text {
    border-radius: 0.5rem!important;
    background-color: #1F7473;
    max-height: 7rem !important;
    border: none !important; 
  }

  .contact-name {
    background-color: #57A09F;
    float: left;
    padding: 0 1.54rem;
    margin-left: -1rem;
    border-radius: 0.5rem;
    font-weight: bold;
  }

  .convo-right {
    width: 80%;
    margin-left: 20%;
  }

  .convo-left {
    width: 80%;
  }

  .convo-right .box-dark {
    background-color: #57A09F!important;
  }

  .convo-left .box-dark {
    background-color: #043B3E!important;
  }

  .convo-img {
    border-radius: 100%;
    border: 0.3rem #57A09F solid;
    width: 4%;
    margin: 0.3rem;
    background-color: #57A09F;
  }

  .convo-right .convo-img {
    float: right;
  }

  .triangle-topright {
    width: 0;
    height: 0;
    border-top: 2rem solid #57A09F;
    border-left: 3rem solid transparent;
    position: absolute;
    right: 8%;
  }

  .triangle-topleft {
    width: 0;
    height: 0;
    border-top: 2rem solid #043B3E;
    border-right: 3rem solid transparent;
    position: absolute;
    left: 8%;
  }

  #main-panel {
    background: #1F7473;
  }

  .top-users {
    list-style: none;
    padding-left: 0;font-size: 0.9rem;
    margin-bottom: 0!important;
  }

  .top-users li {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .top-users li:nth-child(n+11) {
    display: none;
  }

  .table.w-hover tbody tr {
    cursor: pointer;
  }

  .w-hover {
    cursor: pointer;
  }

  .table.w-hover tbody tr:hover td {
    color: #fff !important;
  }

  .box.w-hover {
    cursor: pointer;
  }
  .box.w-hover:hover div {
    color: #fff !important;
  }

  .add-video .video-thumbnail {
    cursor: pointer !important;
    text-align: center;
  }

  .add-video .fa {
    font-size: 5rem;
    line-height: 1.3;
  }


  #spinner-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background-color: black;
    z-index: 100000;
    opacity: 0.5;
  }

  .spinner-border {
    position: absolute;
    top: 50%;
  }


  .progress {
    
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #eaecf4;
    border-radius: .35rem;

    position: absolute;
    z-index: 100001;
    width: 15%;
    left: 1%;
    margin: auto;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    margin-top: 20%;
}

  a {
    color: inherit;
  }

  a:hover, a:focus {
      color: #fff;
      text-decoration: none;
  }



  /*comment*/
  .title {
      font-size: 14px;
      font-weight:bold;
      line-height: 1;
      margin-top: 0; 
      margin-bottom: 0;
    }
    .komen {
        font-size:14px;
    }
    .komen-text {
        white-space: pre-line;
    }

    .comment {
      resize: none;
    }


    .comment-left, .comment-right {
      width: 15%;
      text-align: center;
    }
    .comment-body {
      width: 70%;
    }

    .comment-reply-left, .comment-reply-right {
      width: 15%;
      text-align: center;
    }
    .comment-reply-body {
      width: 60%;
    }

    .comment-reply-indent {
      width: 10%;
    }

    .comment-reply-container {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
    }

    .media-object {
      width: 2rem;
      border-radius: 50%;
      height: 2rem;
    }

    .comment-textbox {
      width: 90%;
    }

    .comment-sendbtn {
      width: 10%;
      z-index: 1;
    }

    .comment-sendbtn button {
      width: 100%;
      margin-top: 1%;
    }

    .reply-section, .view-reply-section {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .geser-reply {
      padding-left: 15%;
      display: flex;
      flex-wrap: wrap;
      width: 97%;
    }

    a.reply {
      color: #f96332 !important;
    }

    
  /*end comment*/


  .card {
    background-color: #07464B !important;
    color: #fff !important;
  }



  /* login form css*/

.btn-primary {
background-color: #257976; /* Green */

}
.btn-primary:hover {
background-color: #1c5e5c; /* Green */

}
.btn-forgot {
background-color: #c8dce3; /* Green */
color: #257577;

}
.btn-forgot:hover {
background-color: #b4c6cc; /* Green */
color: #257577;
}
.btn-register {
background-color: #257976; /* Green */

}
.btn-register:hover {
background-color: #1c5e5c; /* Green */

}

.form-control {
color: #257976; /* Green */
}

.box-dark select.form-control {
color: #fff; /* Green */
background-color: #257976;
}

.box-dark textarea.form-control {
color: #fff; /* Green */
background-color: #257976;
}

.form-group input[type=file] {
height: auto;
}




::placeholder {
color: red;
}


.squaredFour input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.col-form-label {
font-style: italic;
color: #07464B;
font-weight: bold;
}
input.form-control {
background-color: #07464B !important;
border-radius: 0.5rem;
color: #D0F2FE !important;
border: none !important;
}
.input-group-text {
border-radius: 0.5rem !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
background-color: #07464B !important;
border: none !important;
}

/*box dark*/
.box-dark .col-form-label,
.box-dark input.form-control,
.box-dark .input-group-text {
  color: #fff !important;
}

.box-dark input.form-control {
  border: 1px solid #fff !important;
}

.btn {
font-size: 1rem;
width: 8rem;
font-weight: bold;
border-radius: 0.5rem;
padding: 0.3rem 0rem;
margin: 0;


    width: fit-content;
    padding: 0.4em 0.8em;
}

.toggle-group .btn {
  width: fit-content;
  padding: 0.4em 1em;
}
  /* end login*/


  /*handouts css*/
div.card-img-top {
      background-size: cover;
      height: 15rem;
    }

    .card-handouts .card-img-top {
      height: 5rem;
    }
  /*end*/


  .resources-nav, .card-folder, .card-handouts {
    cursor: pointer;
  }



.table th, .table td {
  color: #fff;
}


.table-responsive {
  overflow-x: unset;
  overflow: unset;
}

.btn-remove-image {
  width: 3em;
}

.question-copyright {
      position: absolute;
    opacity: 0.5;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

.alert {
  color: #000;
}


.video-watermark {
      position: absolute;
    z-index: 1000;
    color: #fff;
    opacity: 0.2;
    font-size: 1.5em;
    line-height: 1;"
}
/*mobile*/


    @media only screen and (max-width: 600px) {
      .vl-watch {
        padding: 0 !important;
        margin-top: 1rem;
      }

      .video-watermark {
          font-size: 0.6em;
      }

      .comment-text {
        max-width: 95% !important; 
      }

    }