::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  border-radius: 4px;
  background: transparent;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
::-webkit-scrollbar:hover {
  background: #c6c7ca;
}
::-webkit-scrollbar-thumb {
  background: #777779;
  border-radius: 4px;
}
.cl-mobile-label {
  display: none;
}
.cl-web-label {
  display: flex;
}
#classHubJoinedPage #examsTabPane #examIndex table tbody tr td:nth-child(4) .form-control {
  font-size: 12px;
  height: auto;
}
.classhub-list-item-ctrl div {
  display: inline-block;
}
ul.badge-legends {
  list-style-type: none;
}
ul.badge-legends li {
  margin-right: 30px;
  float: left;
}
table tr:hover {
  background: aliceblue;
}
#examForm .option-row {
  background: #f1f1f1;
  cursor: pointer;
}
#examForm .option-row p {
  margin: 0px;
}
#examForm .option-row input[type=radio] {
  width: 0px;
}
#examForm .option-row.option-selected {
  background: #d0cece;
}
#examForm .option-row:hover {
  background: #d0cece;
}
#examIndex {
  overflow: auto;
}
.dropzone {
  width: 100%;
  margin: auto;
}
.online-indicator {
  width: 15px;
  vertical-align: middle;
  margin-right: 10px;
  height: 15px;
  background: #49c349;
  border-radius: 100%;
  display: none !important;
}
#userLessonsModal table tr:hover {
  cursor: pointer;
}
.form-control {
  border-radius: 0px;
}
.modal-header {
  background: #c00000;
  color: white;
  border-radius: 0px;
}
.learner-indicator {
  background: #a9a8a8c4;
  padding: 2px 3px;
  padding-top: 4px;
}
.learner-indicator img {
  vertical-align: top;
}
.learner-indicator-medal {
  position: absolute;
  right: 15px;
  top: 1px;
}
.learner-indicator-thumbs-up {
  position: absolute;
  right: 45px;
  top: 1px;
}
.learner-indicator-check {
  position: absolute;
  right: 75px;
  top: 1px;
  display: none;
}
.learner-indicator-check i {
  color: green;
  font-size: 20px;
}
.learner-indicator-check.learner-indicator {
  background: none;
  color: inherit;
}
.exam-start-greetings {
  padding-top: 50px;
  border-top: solid 5px #e6e5e5;
  color: #333;
}
.exam-details ul li {
  margin-bottom: 10px;
}
.classhub-header-forms #joinClasshubForm,
.classhub-header-forms #createClasshubForm {
  margin-top: -45px;
}
.classhub-header-forms #joinClasshubForm input,
.classhub-header-forms #createClasshubForm input,
.classhub-header-forms #joinClasshubForm button,
.classhub-header-forms #createClasshubForm button {
  height: 25px;
  font-size: 10px;
}
.classhub-header-forms #joinClasshubForm {
  margin-top: -30px;
}
#classHubPage .nav-item,
#classHubCreatedPage .nav-item,
#classHubJoinedPage .nav-item,
#uploadFileModal .nav-item {
  flex: none;
}
#classHubPage .nav-link,
#classHubCreatedPage .nav-link,
#classHubJoinedPage .nav-link,
#uploadFileModal .nav-link {
  border-radius: 0px !important;
  color: #333;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: #e7e6e6;
  font-weight: bold;
}
#classHubPage .nav-link.active,
#classHubCreatedPage .nav-link.active,
#classHubJoinedPage .nav-link.active,
#uploadFileModal .nav-link.active {
  background: #595959;
  color: white;
}
#classHubPage .nav-tabs,
#classHubCreatedPage .nav-tabs,
#classHubJoinedPage .nav-tabs,
#uploadFileModal .nav-tabs {
  border-bottom: 3px solid #000;
}
#classHubCreatedPage ul.enrolled-learners-control,
#classHubJoinedPage ul.enrolled-learners-control,
#uploadFileModal ul.enrolled-learners-control {
  list-style-type: none;
  padding: 0px;
}
#classHubCreatedPage ul.enrolled-learners-control li,
#classHubJoinedPage ul.enrolled-learners-control li,
#uploadFileModal ul.enrolled-learners-control li {
  float: left;
  margin-right: 10px;
}
#classHubCreatedPage ul.enrolled-learners-control li select,
#classHubJoinedPage ul.enrolled-learners-control li select,
#uploadFileModal ul.enrolled-learners-control li select,
#classHubCreatedPage ul.enrolled-learners-control li button,
#classHubJoinedPage ul.enrolled-learners-control li button,
#uploadFileModal ul.enrolled-learners-control li button,
#classHubCreatedPage ul.enrolled-learners-control li a,
#classHubJoinedPage ul.enrolled-learners-control li a,
#uploadFileModal ul.enrolled-learners-control li a {
  border-radius: 0px;
}
#classHubCreatedPage ul.enrolled-learners-control li a,
#classHubJoinedPage ul.enrolled-learners-control li a,
#uploadFileModal ul.enrolled-learners-control li a {
  font-size: 0.7rem;
  padding: 10px 20px;
  font-weight: bold;
}
#classHubCreatedPage ul.learner-list,
#classHubJoinedPage ul.learner-list,
#uploadFileModal ul.learner-list,
#classHubCreatedPage ul.inner-pane-ctrl,
#classHubJoinedPage ul.inner-pane-ctrl,
#uploadFileModal ul.inner-pane-ctrl {
  list-style-type: none;
  padding: 0px;
}
#classHubCreatedPage ul.learner-list li,
#classHubJoinedPage ul.learner-list li,
#uploadFileModal ul.learner-list li,
#classHubCreatedPage ul.inner-pane-ctrl li,
#classHubJoinedPage ul.inner-pane-ctrl li,
#uploadFileModal ul.inner-pane-ctrl li {
  display: inline-block;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}
#classHubCreatedPage ul.learner-list li a,
#classHubJoinedPage ul.learner-list li a,
#uploadFileModal ul.learner-list li a,
#classHubCreatedPage ul.inner-pane-ctrl li a,
#classHubJoinedPage ul.inner-pane-ctrl li a,
#uploadFileModal ul.inner-pane-ctrl li a {
  color: inherit;
}
#classHubCreatedPage ul.learner-list li:nth-child(2),
#classHubJoinedPage ul.learner-list li:nth-child(2),
#uploadFileModal ul.learner-list li:nth-child(2),
#classHubCreatedPage ul.inner-pane-ctrl li:nth-child(2),
#classHubJoinedPage ul.inner-pane-ctrl li:nth-child(2),
#uploadFileModal ul.inner-pane-ctrl li:nth-child(2) {
  text-decoration: none;
}
#classHubCreatedPage ul.learner-list li.active,
#classHubJoinedPage ul.learner-list li.active,
#uploadFileModal ul.learner-list li.active,
#classHubCreatedPage ul.inner-pane-ctrl li.active,
#classHubJoinedPage ul.inner-pane-ctrl li.active,
#uploadFileModal ul.inner-pane-ctrl li.active {
  color: #c00000;
}
#classHubCreatedPage .nav-item,
#classHubJoinedPage .nav-item,
#uploadFileModal .nav-item {
  flex: auto;
}
#classHubCreatedPage .nav-link,
#classHubJoinedPage .nav-link,
#uploadFileModal .nav-link {
  width: auto;
}
#classHubCreatedPage #learnersTabPane .male-learners-pane,
#classHubJoinedPage #learnersTabPane .male-learners-pane,
#uploadFileModal #learnersTabPane .male-learners-pane,
#classHubCreatedPage #learnersTabPane .female-learners-pane,
#classHubJoinedPage #learnersTabPane .female-learners-pane,
#uploadFileModal #learnersTabPane .female-learners-pane {
  margin-top: 10px;
}
#classHubCreatedPage #learnersTabPane .male-learners-pane table.table,
#classHubJoinedPage #learnersTabPane .male-learners-pane table.table,
#uploadFileModal #learnersTabPane .male-learners-pane table.table,
#classHubCreatedPage #learnersTabPane .female-learners-pane table.table,
#classHubJoinedPage #learnersTabPane .female-learners-pane table.table,
#uploadFileModal #learnersTabPane .female-learners-pane table.table {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 5px;
  overflow: auto;
}
#classHubCreatedPage #learnersTabPane .male-learners-pane table.table th,
#classHubJoinedPage #learnersTabPane .male-learners-pane table.table th,
#uploadFileModal #learnersTabPane .male-learners-pane table.table th,
#classHubCreatedPage #learnersTabPane .female-learners-pane table.table th,
#classHubJoinedPage #learnersTabPane .female-learners-pane table.table th,
#uploadFileModal #learnersTabPane .female-learners-pane table.table th {
  background: #e7e6e6;
  padding: 5px;
}
#classHubCreatedPage #learnersTabPane .male-learners-pane table.table th,
#classHubJoinedPage #learnersTabPane .male-learners-pane table.table th,
#uploadFileModal #learnersTabPane .male-learners-pane table.table th,
#classHubCreatedPage #learnersTabPane .female-learners-pane table.table th,
#classHubJoinedPage #learnersTabPane .female-learners-pane table.table th,
#uploadFileModal #learnersTabPane .female-learners-pane table.table th,
#classHubCreatedPage #learnersTabPane .male-learners-pane table.table td,
#classHubJoinedPage #learnersTabPane .male-learners-pane table.table td,
#uploadFileModal #learnersTabPane .male-learners-pane table.table td,
#classHubCreatedPage #learnersTabPane .female-learners-pane table.table td,
#classHubJoinedPage #learnersTabPane .female-learners-pane table.table td,
#uploadFileModal #learnersTabPane .female-learners-pane table.table td {
  text-align: center;
  max-width: 100px;
  min-width: 100px;
}
#classHubCreatedPage #learnersTabPane .male-learners-pane table.table th:nth-child(2),
#classHubJoinedPage #learnersTabPane .male-learners-pane table.table th:nth-child(2),
#uploadFileModal #learnersTabPane .male-learners-pane table.table th:nth-child(2),
#classHubCreatedPage #learnersTabPane .female-learners-pane table.table th:nth-child(2),
#classHubJoinedPage #learnersTabPane .female-learners-pane table.table th:nth-child(2),
#uploadFileModal #learnersTabPane .female-learners-pane table.table th:nth-child(2),
#classHubCreatedPage #learnersTabPane .male-learners-pane table.table td:nth-child(2),
#classHubJoinedPage #learnersTabPane .male-learners-pane table.table td:nth-child(2),
#uploadFileModal #learnersTabPane .male-learners-pane table.table td:nth-child(2),
#classHubCreatedPage #learnersTabPane .female-learners-pane table.table td:nth-child(2),
#classHubJoinedPage #learnersTabPane .female-learners-pane table.table td:nth-child(2),
#uploadFileModal #learnersTabPane .female-learners-pane table.table td:nth-child(2) {
  max-width: 300px;
  min-width: 300px;
}
#classHubCreatedPage #learnersTabPane .male-learners-pane table.table tr:hover,
#classHubJoinedPage #learnersTabPane .male-learners-pane table.table tr:hover,
#uploadFileModal #learnersTabPane .male-learners-pane table.table tr:hover,
#classHubCreatedPage #learnersTabPane .female-learners-pane table.table tr:hover,
#classHubJoinedPage #learnersTabPane .female-learners-pane table.table tr:hover,
#uploadFileModal #learnersTabPane .female-learners-pane table.table tr:hover {
  background: aliceblue;
}
#classHubCreatedPage #learnersTabPane .pending-learner-list p,
#classHubJoinedPage #learnersTabPane .pending-learner-list p,
#uploadFileModal #learnersTabPane .pending-learner-list p {
  cursor: pointer;
  text-transform: capitalize;
}
#classHubCreatedPage #learnersTabPane .pending-learner-list p:hover,
#classHubJoinedPage #learnersTabPane .pending-learner-list p:hover,
#uploadFileModal #learnersTabPane .pending-learner-list p:hover {
  color: green !important;
}
.classhub-control {
  margin-left: 30px;
  transform: skewX(-30deg);
  position: absolute;
  top: -5px;
  width: 300px;
}
.classhub-control .button-wrapper {
  padding: 3px;
  background: white;
  margin-bottom: 5px;
  display: inline-block;
}
.classhub-control .button-wrapper .ctrl-btn {
  width: 100%;
  border-radius: 0px;
  color: white;
}
.classhub-control .button-wrapper .ctrl-btn div {
  transform: skewX(30deg);
}
.classhub-name {
  color: black;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: inline-block;
  vertical-align: top;
}
.creator-tag {
  font-size: 0.7rem;
  padding: 5px 15px;
  background: black;
  margin-left: 10px;
  color: white;
}
.classhub-header-forms input::-webkit-input-placeholder, .classhub-body-forms input::-webkit-input-placeholder {
  color: #c00000 !important;
  opacity: 1;
  /* Firefox */
}
.classhub-header-forms input::-moz-placeholder, .classhub-body-forms input::-moz-placeholder {
  color: #c00000 !important;
  opacity: 1;
  /* Firefox */
}
.classhub-header-forms input:-ms-input-placeholder, .classhub-body-forms input:-ms-input-placeholder {
  color: #c00000 !important;
  opacity: 1;
  /* Firefox */
}
.classhub-header-forms input::-ms-input-placeholder, .classhub-body-forms input::-ms-input-placeholder {
  color: #c00000 !important;
  opacity: 1;
  /* Firefox */
}
.classhub-header-forms input::placeholder,
.classhub-body-forms input::placeholder {
  color: #c00000 !important;
  opacity: 1;
  /* Firefox */
}
.classhub-header-forms .form-group,
.classhub-body-forms .form-group {
  margin-bottom: 5px;
}
.classhub-header-forms .form-control,
.classhub-body-forms .form-control {
  border: solid 1px #eee;
  border-radius: 0px;
  box-shadow: none;
}
.classhub-header-forms .create-classhub,
.classhub-body-forms .create-classhub,
.classhub-header-forms .create-classhub-body,
.classhub-body-forms .create-classhub-body,
.classhub-header-forms .join-classhub,
.classhub-body-forms .join-classhub,
.classhub-header-forms .join-classhub-body,
.classhub-body-forms .join-classhub-body {
  max-width: 300px;
  margin: auto;
}
.classhub-header-forms .create-classhub-body,
.classhub-body-forms .create-classhub-body,
.classhub-header-forms .join-classhub-body,
.classhub-body-forms .join-classhub-body {
  max-width: 340px;
  padding: 20px;
  background: #f2f2f2;
  margin-top: 20px;
}
.brand-bg-red {
  background: #c00000 !important;
}
.brand-color-red {
  color: #c00000 !important;
}
.inner-pages-header {
  background: url(/images/headerv2.jpg);
  height: 110px;
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
}
#main-side-menu-pane,
#main-content-pane {
  display: inline-block;
  vertical-align: top;
}
.avatar,
.account-info {
  display: inline-block;
  vertical-align: top;
}
.avatar img {
  width: 80px;
  height: 80px;
  border-radius: 100%;
}
#main-side-menu-pane,
#main-side-menu-pane-mobile {
  width: 250px;
  min-height: 100vh;
  background: url(/images/percdc-nav-bg.jpg);
  background-size: cover;
  background-position: bottom left;
  background-repeat: no-repeat;
  padding: 10px;
  padding-top: 30px;
  height: 100%;
  color: white;
  border-right: solid 5px #5a505061;
}
#main-side-menu-pane .account-info,
#main-side-menu-pane-mobile .account-info {
  padding-left: 10px;
  padding-top: 10px;
  font-size: 0.9rem;
  width: 140px;
  word-break: break-word;
  text-align: left;
  color: white;
}
#main-side-menu-pane .coin-perks,
#main-side-menu-pane-mobile .coin-perks {
  padding: 20px;
  text-align: left;
  color: white;
}
#main-side-menu-pane .site-brand,
#main-side-menu-pane-mobile .site-brand {
  color: #f9ec22;
  font-weight: bold;
  text-align: center;
}
#main-side-menu-pane .site-brand .sb-logo,
#main-side-menu-pane-mobile .site-brand .sb-logo,
#main-side-menu-pane .site-brand .sb-text,
#main-side-menu-pane-mobile .site-brand .sb-text {
  display: inline-block;
}
#main-side-menu-pane .site-brand .sb-logo,
#main-side-menu-pane-mobile .site-brand .sb-logo {
  padding: 0px 10px;
  padding-left: 0px;
}
#main-side-menu-pane .navigation-menu,
#main-side-menu-pane-mobile .navigation-menu {
  margin-top: 10px;
}
#main-side-menu-pane .navigation-menu table,
#main-side-menu-pane-mobile .navigation-menu table {
  background: white;
  color: black;
}
#main-side-menu-pane .navigation-menu table tr td,
#main-side-menu-pane-mobile .navigation-menu table tr td {
  border: solid 1px black;
  padding: 5px;
  text-align: left;
  padding-left: 15px;
}
#main-side-menu-pane .navigation-menu table tr:hover,
#main-side-menu-pane-mobile .navigation-menu table tr:hover {
  color: white;
  cursor: pointer;
  background: #595959;
}
#main-side-menu-pane .navigation-menu table tr.active,
#main-side-menu-pane-mobile .navigation-menu table tr.active {
  color: black;
  cursor: pointer;
  background: #59595963;
}
#main-content-pane {
  width: calc(100% - 195px);
  padding-left: 30px;
}
html,
body {
  background-color: #fff;
  color: #333;
  margin: 0;
  font-family: 'Open Sans', sans-serif !important;
}
body.auth-layout-body {
  overflow: hidden;
}
.white-line-divider {
  position: absolute;
  top: 0px;
  left: -1px;
  height: 100%;
  width: 2px;
  color: white;
  background: white;
}
textarea:focus,
select:focus,
input:focus {
  outline: none !important;
}
.rendered-video-container > div {
  position: initial !important;
}
.rendered-video-container iframe {
  height: -webkit-fill-available !important;
}
input[name=acc_type_f1]::-webkit-input-placeholder, input[name=acc_type_f2]::-webkit-input-placeholder {
  text-align: center;
}
input[name=acc_type_f1]::-moz-placeholder, input[name=acc_type_f2]::-moz-placeholder {
  text-align: center;
}
input[name=acc_type_f1]:-ms-input-placeholder, input[name=acc_type_f2]:-ms-input-placeholder {
  text-align: center;
}
input[name=acc_type_f1]::-ms-input-placeholder, input[name=acc_type_f2]::-ms-input-placeholder {
  text-align: center;
}
input[name=acc_type_f1]::placeholder,
input[name=acc_type_f2]::placeholder {
  text-align: center;
}
.prc-logo-container {
  padding-top: 50px;
  padding-bottom: 50px;
}
.prc-logo-container .prc-logo-text,
.prc-logo-container .prc-logo {
  display: inline-block;
  vertical-align: middle;
}
.prc-logo-container .prc-logo-text {
  margin-right: 20px;
}
.register-card {
  border-radius: 0px;
  padding: 10px 20px;
  min-height: 800px;
  margin-top: -100px;
}
.register-card .avatar-preview {
  width: 70px;
  height: 70px;
  border-radius: 100%;
  background: #777779;
  overflow: hidden;
}
.register-card .avatar-preview img {
  width: 100%;
  height: 100%;
}
.register-card input,
.register-card select {
  border: none;
  border-bottom: solid 2px black;
}
.register-card input[type=text],
.register-card input[type=username],
.register-card input[type=password],
.register-card input[type=email] {
  border-radius: 0px;
}
.register-card .btn {
  padding: 5px 40px;
}
.register-card .btn-danger {
  background: #c00000;
}
#frontPage {
  padding-top: 100px;
  padding-bottom: 200px;
  height: 100%;
}
#frontPage .col-sm-6 {
  position: relative;
}
#frontPage .register-card.basic {
  padding: 100px 40px;
}
#frontPage .header-box h2 {
  font-weight: bold;
}
#frontPage .header-box p {
  color: white;
  font-size: 1.1rem;
}
#frontPage .form-group {
  margin-bottom: 0.5rem;
}
#frontPage .login-card {
  border-radius: 0px;
  box-shadow: none !important;
  background: transparent;
  color: white;
}
#frontPage .login-card input {
  border-radius: 0px !important;
}
#frontPage .login-card .login-btn {
  padding-left: 40px;
  padding-right: 40px;
  background: #c00000;
}
#frontPage .login-card .card-body {
  padding: 0px;
  margin: auto;
}
#frontPage .login-card .card-body .login-to-account-txt {
  font-size: 1.8rem;
  font-weight: bold;
}
.hide {
  display: none;
}
input {
  outline: none !important;
  box-shadow: none !important;
}
i {
  margin-right: 10px;
}
video {
  height: auto !important;
  width: 100% !important;
}
label.error {
  color: red !important;
}
.sorting_1 {
  display: none !important;
}
table td,
table th {
  text-align: center;
  vertical-align: middle !important;
}
.gp-apps {
  max-width: 450px;
  margin: auto;
  color: white;
}
.gp-apps ul {
  padding: 0px;
  list-style-type: none;
}
.prerequisite-exams-ul li {
  font-size: 12px;
}
.user-listing {
  overflow: auto;
}
.top-pagination ul.pagination {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  float: right;
}
.blog-sort-order {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 3px 10px;
  background: #d83611;
  color: white;
  border-radius: 100%;
  font-weight: bold;
}
.main-logo {
  width: 150px;
  height: 150px;
}
.mobile-menu {
  display: none;
}
.img img {
  width: 150px;
  height: 100px;
}
.item {
  text-align: center;
  padding: 10px;
}
.item .name {
  padding: 10px;
}
.item:hover {
  border: solid 1px #ddd;
  cursor: pointer;
}
.blog-card {
  padding: 10px;
  border: solid 1px #ddd;
  background: white;
  box-shadow: 2px 2px 2px #d4d4d4;
  height: 425px;
  position: relative;
}
.blog-card .blog-description {
  color: #333;
  background-color: #fbfbfb;
  margin: 5px;
  padding: 5px 20px;
  height: 50px;
  word-break: break-all;
  overflow: auto;
}
.blog-card .blog-status {
  position: absolute;
  top: 0;
  right: 0px;
  padding: 10px;
  color: white;
  background: grey;
}
.blog-card .blog-status.published {
  background: #36af36;
}
.blog-card .blog-body {
  text-align: center;
}
.blog-card .blog-body img {
  width: 250px;
  height: 250px;
  max-width: 260px;
}
.blog-card .blog-footer {
  padding: 10px;
}
.blog-card .blog-footer h3 {
  color: #333;
  height: 33px;
  word-break: break-all;
  overflow: auto;
}
.blog-card .blog-footer .blog-author {
  text-align: right;
  position: absolute;
  bottom: 20px;
  right: 15px;
}
.blog-card .blog-footer .blog-date {
  text-align: right;
  position: absolute;
  font-size: 10px;
  bottom: 0px;
  right: 15px;
}
.side-menu ul {
  list-style-type: none;
  color: white;
}
.side-menu ul li {
  padding: 5px;
  padding-left: 30px;
}
.side-menu ul li a {
  color: white;
  font-size: 13px;
  font-family: 'Lato';
}
.side-menu ul li ul {
  list-style-type: disc;
}
.side-menu ul li ul li {
  padding-left: 0px;
}
.side-menu ul li ul li a {
  font-family: 'Lato';
}
.avatar-wrapper {
  padding: 30px 0px;
  text-align: center;
  color: white;
  margin-left: 40px;
}
.avatar-wrapper img {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  padding: 2px;
  background: white;
}
.full-height {
  height: 100vh;
}
.flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
}
.position-ref {
  position: relative;
}
.top-right {
  position: absolute;
  right: 10px;
  top: 18px;
}
.content {
  text-align: center;
}
.title {
  font-size: 84px;
}
.links > a {
  color: #636b6f;
  padding: 0 25px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  text-transform: uppercase;
}
.m-b-md {
  margin-bottom: 30px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
}
input:checked + .slider {
  background-color: #2196F3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 100%;
  width: 0;
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  background-color: #000000;
  /* Black fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/opacity */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 0%;
  /* 25% from the top */
  width: 100%;
  /* 100% width */
  text-align: center;
  /* Centered text/links */
  margin-top: 30px;
  /* 30px top margin to avoid conflict with the close button on smaller screens */
}
/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  /* Display block instead of inline */
  transition: 0.3s;
  /* Transition effects on hover (color) */
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: -15px;
  right: 15px;
  font-size: 60px;
  z-index: 9;
}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px;
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin-top: 10px;
  cursor: pointer;
}
.upload-btn-wrapper .btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}
.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
.comment-section {
  background: #eee;
}
.playlist-item {
  padding: 20px;
  border-radius: 5px;
  box-shadow: 3px 3px 3px #ddd;
  border: solid 1px #eee;
  margin-bottom: 20px;
  position: relative;
}
.playlist-item i {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.perk-coin ul {
  margin: 0px;
}
.perk-coin ul li {
  float: left;
}
.mobile-menu-trigger {
  padding: 5px 10px;
  background: #c00000;
  border-radius: 100%;
  margin-right: 30px;
  vertical-align: middle;
  display: none;
}
.mobile-menu-trigger i {
  margin: 0px;
}
.fa.fa-bell {
  position: absolute;
  right: 40px ;
  top: 20px ;
  font-size: 20px;
  color: #ffd400;
  cursor: pointer;
  z-index: 999;
}
.notification-popup:focus {
  outline: none;
}
.notification-item:hover {
  background: #bbb;
  background: #ecf2ff96;
}
.notif-count {
  position: absolute;
  right: 39px;
  top: 13px;
  font-size: 10px;
  padding: 0px 5px;
  background: red;
  color: white;
  font-weight: bold;
  border-radius: 100%;
  z-index: 11;
  cursor: pointer;
  z-index: 10000;
}
.notification-popup {
  position: fixed;
  top: 50px;
  right: 20px;
  max-width: 250px;
  min-width: 250px;
  max-height: 300px;
  min-height: 300px;
  background: #fbfbfb;
  font-size: 11px;
  overflow: auto;
  z-index: 9999;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 5px;
  box-shadow: 5px 5px 5px #444;
  border: solid 1px #ddd;
}
.notification-popup .notification-item {
  border-bottom: solid 1px #eee;
  padding: 15px;
}
.notification-popup .notification-item .col-sm-9 {
  flex: 0 0 80%;
  max-width: 80%;
}
.notification-popup .notification-item .col-sm-3 {
  flex: 0 0 20%;
  max-width: 20%;
}
#myNav {
  color: white;
  z-index: 99999 !important;
}
#myNav #main-side-menu-pane-mobile {
  width: 100% !important;
}
#myNav ul {
  padding: 0px;
}
#myNav ul li a {
  color: white;
  font-size: 16px;
}
.playlist-card:hover .abs-name {
  left: 250px;
}
.playlist-card:hover .abs-playicon {
  opacity: 1;
}
.playlist-card {
  box-shadow: 5px 5px 5px #999;
  color: white;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  overflow: hidden;
  max-width: 260px;
  max-height: 404px;
  margin: auto;
  margin-bottom: 30px;
}
.playlist-card :hover {
  cursor: pointer;
}
.playlist-card :hover .playlist-bg1 {
  background: #000000a6;
}
.playlist-card .playlist-bg1 {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
.playlist-card .abs-name {
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: left;
  padding: 5px 10px;
  background: #000000a6;
  color: #fbfbfb;
  font-weight: bold;
  transition: all 1s ease;
}
.playlist-card .abs-name p {
  margin: 0px;
}
.playlist-card .abs-rbv-count {
  position: absolute;
  bottom: -10px;
  right: 0px;
}
.playlist-card .abs-rbv-count p {
  font-size: 16px;
  color: white;
}
.playlist-card .abs-playicon {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  bottom: 0px;
  margin: auto;
  opacity: 0;
  transition: all 1s ease;
}
.playlist-card .abs-playicon i {
  font-size: 120px;
  margin: 0px;
}
.playlist-card img {
  width: 260px;
  height: 260px;
  margin: auto;
}
.playlist-card .playlist-body {
  padding: 5px;
}
.playlist-card .playlist-body b {
  font-size: 14px;
}
.playlist-item-page .comment-thread .comment-item .rep-del[data-v-0d3347b1] {
  z-index: 0;
}
.playlist-item-page .black-bar {
  width: initial;
  height: 30px;
  position: fixed;
  top: 0px;
  z-index: 1;
  background: black;
  width: 800px !important;
}
.playlist-item-page .player-position-holder {
  position: fixed;
  width: inherit;
  height: inherit;
  z-index: 1;
}
.playlist-item-page .player-card {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 100vh;
  background: #1e1e1f;
  margin: auto;
  position: relative;
  padding: 30px 0px;
  width: 800px !important;
}
.playlist-item-page .player-card .video-player-container-2 iframe {
  position: inherit !important;
  min-width: inherit !important;
  height: inherit !important;
}
.playlist-item-page .player-card iframe.vooplayer {
  position: inherit !important;
  min-width: inherit !important;
  height: inherit !important;
}
.playlist-item-page .player-card .video-player-container video,
.playlist-item-page .player-card .video-player-container iframe {
  position: fixed;
  z-index: 1;
}
.playlist-item-page .player-card .abs-control {
  z-index: 1;
  position: fixed;
  background-color: #000;
  top: 0px;
  padding: 3px 10px;
}
.playlist-item-page .player-card .abs-control a {
  color: white;
}
.playlist-item-page .player-card .player {
  background: #000;
}
.playlist-item-page .player-card .video-title {
  background: #292929;
  color: white;
  padding: 10px 30px;
  position: relative;
}
.playlist-item-page .player-card .video-title .author {
  position: absolute;
  top: 10px;
  right: 20px;
}
.playlist-item-page .player-card .video-list a {
  text-decoration: none;
  color: white;
}
.playlist-item-page .player-card .video-list a .video-item {
  padding: 20px;
}
.playlist-item-page .player-card .video-list a .video-item p {
  margin: 0px;
}
.playlist-item-page .player-card .video-list a .video-playing {
  background: #1a1b1d;
}
.playlist-item-page .player-card .video-player-container {
  width: 800px !important;
  height: 380px !important;
  position: relative;
  background: black;
}
.tab-pane {
  height: 100%;
}
.nav-link {
  border-radius: 0px !important;
  color: white;
}
.playlist-item-ctrl {
  position: absolute;
  bottom: 110px;
  right: 0px;
  font-size: 20px;
  color: black;
  padding-left: 10px;
}
.playlist-item-ctrl i {
  cursor: pointer;
}
.nav-item {
  flex: auto;
  text-align: center;
}
.lessonplan-item-ctrl,
.exam-item-ctrl {
  position: absolute;
  bottom: 115px;
  right: 0px;
}
.lessonplan-item-ctrl i,
.exam-item-ctrl i {
  color: black;
}
.exam-item-ctrl {
  bottom: 10px;
  cursor: pointer;
}
ul.new-lessonplan-item-options {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}
ul.new-lessonplan-item-options li {
  text-align: center;
  display: inline-block;
  margin-right: 5px;
  margin-left: 5px;
}
ul.new-lessonplan-item-options li i {
  margin: 0px;
  cursor: pointer;
  color: #555;
}
ul.new-lessonplan-item-options li i:hover {
  color: #7ed000;
}
.lessonplan-item-page i.fa.fa-eye-slash {
  position: absolute;
  top: 11px;
  z-index: 1;
  right: 50px;
}
.lessonplan-item-page .comment-container-lp {
  width: 300px;
  height: 100vh;
  background: #636b6f;
  position: fixed;
  top: 0px;
  right: -300px;
  z-index: 9;
  transition: all 1s ease;
  z-index: 99999;
}
.lessonplan-item-page .comment-container-lp .cv-holder {
  overflow-x: hidden;
  height: 100%;
}
.lessonplan-item-page .comment-container-lp .comment-section {
  position: absolute;
  left: 0px;
  padding: 0px !important;
  top: 50px;
  background: none;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
.lessonplan-item-page .comment-container-lp .comment-section .main-comment-input .col-sm-2 {
  padding: 0px;
}
.lessonplan-item-page .comment-container-lp .comment-section .comment-disabled-msg {
  color: white;
}
.lessonplan-item-page .comment-container-lp .comment-section button.btn.btn-sm.btn-success.form-control {
  width: 45px;
}
.lessonplan-item-page .comment-container-lp .comment-section .comment-thread .comment-item {
  width: 250px;
}
.lessonplan-item-page .comment-container-lp .comment-section .comment-thread .comment-item .col-sm-1 {
  padding: 0px;
}
.lessonplan-item-page .comment-container-lp .comment-section .comment-thread .comment-item .rep-del .reply span {
  color: #a5bcff;
}
.lessonplan-item-page .comment-container-lp .comment-section .parent-comment-item,
.lessonplan-item-page .comment-container-lp .comment-section .reply-comment-item {
  color: white;
}
.lessonplan-item-page .comment-container-lp .comment-section .parent-comment-item img,
.lessonplan-item-page .comment-container-lp .comment-section .reply-comment-item img {
  max-width: 180px !important;
}
.lessonplan-item-page .comment-container-lp .comment-section .reply-comment-item p:nth-child(2) {
  padding-left: 10px;
}
.lessonplan-item-page .comment-container-lp .comment-section .reply-container .img-preview {
  width: 200px;
}
.lessonplan-item-page .comment-container-lp .comment-section .reply-container .img-preview img {
  max-width: 190px;
}
.lessonplan-item-page .comment-container-lp .comment-section .comment-thread .avatar {
  width: 30px;
  height: 30px;
}
.lessonplan-item-page .comment-container-lp .comment-section .comment-thread .comment-item .date {
  top: -14px;
}
.lessonplan-item-page .comment-container-lp .comment-section .main-comment-input .img-preview {
  padding: 5px;
  background: #fbfbfb;
  width: 200px;
}
.lessonplan-item-page .comment-container-lp .comment-section .main-comment-input .img-preview img {
  max-width: 100%;
}
.lessonplan-item-page .comment-container-lp span.close-comment {
  position: absolute;
  color: white;
  top: 94px;
  background: #ff4d4d;
  left: -12px;
  border-radius: 100%;
  padding: 0px 5px;
  cursor: pointer;
  display: none;
  z-index: 10;
}
.lessonplan-item-page .comment-container-lp span.close-comment i.fa.fa-times {
  margin: 0px;
}
.lessonplan-item-page .comment-container-lp span.close-comment.show {
  display: block;
}
@media (max-width: 575px) {
  .lessonplan-item-page .comment-container-lp .main-comment-input button.btn.btn-sm.btn-success.form-control {
    width: 100%;
  }
  .lessonplan-item-page .comment-container-lp .main-comment-input .col-sm-2 {
    padding: 0px 16px !important;
  }
}
@media (max-width: 518px) {
  .lessonplan-item-page .comment-container-lp .comment-section {
    left: auto;
    right: 35px;
  }
}
.lessonplan-item-page .header-player {
  box-shadow: 4px 4px 4px #eee;
}
.lessonplan-item-page .video-duration {
  position: absolute;
  right: 120px;
}
.lessonplan-item-page .header-slider,
.lessonplan-item-page .slick-list {
  height: 300px;
}
.lessonplan-item-page .header-control {
  position: absolute;
  right: 20px;
  bottom: -30px;
}
.lessonplan-item-page .header-control span {
  padding: 5px 10px;
  background: white;
  text-align: center;
  border-radius: 100%;
  border: solid 1px #ddd;
  cursor: pointer;
}
.lessonplan-item-page .header-control span i {
  margin: 0px;
}
.lessonplan-item-page .header-control span.comment-ctrl {
  background: #0eaf0e;
  color: white;
  border: none;
}
.lessonplan-item-page .header-control .slick-arrow.active {
  background: red;
  color: white;
  border: none;
}
.lessonplan-item-page .slick-track {
  height: 100%;
}
.lessonplan-item-page .lessonplan-video-player {
  background: #333;
  color: white;
  position: relative;
  text-align: center;
}
.lessonplan-item-page .lessonplan-video-player video {
  height: 100% !important;
}
.lessonplan-item-page .lpi-item-video.active {
  color: red !important;
}
.lessonplan-item-page .voo-id.default-skin-player.video-skin-player.play-button-sm-wrapper {
  text-align: center;
  height: 300px;
}
.lessonplan-item-page .voo-id.default-skin-player.video-skin-player.play-button-sm-wrapper iframe {
  min-width: auto !important;
  width: 532px !important;
  height: 299.815px !important;
}
@media (max-width: 645px) {
  .lessonplan-item-page .avatar-wrapper img {
    width: 90px;
    height: 90px;
  }
}
@media (max-width: 585px) {
  .lessonplan-item-page .lpi-header-title {
    font-size: 1.5rem;
  }
}
@media (max-width: 425px) {
  .lessonplan-item-page .avatar-wrapper .name {
    padding-top: 10px !important;
  }
}
.lesson-plan-items-control .dropdown {
  display: inline;
}
.lesson-plan-items-control .dropdown .dropdown-toggle::after {
  content: none;
}
.new-lessonplan-item-options {
  width: 10rem;
}
.new-lessonplan-item-options .dropdown {
  display: inline;
}
.new-lessonplan-item-options .dropdown .dropdown-toggle::after {
  content: none;
}
.new-lessonplan-item-options .dropdown button {
  width: 10rem;
  margin-bottom: 10px;
  text-align: left;
}
#lpi-list-container {
  padding: 5px;
  height: 350px;
  overflow: auto;
  background: #f7f7f7;
}
#lpi-list-container > .lpi-list-item {
  margin-bottom: 10px;
}
#lpi-list-container > .lpi-list-item .ui-sortable:last-child,
#lpi-list-container > .lpi-list-item > .lpi-list-item:last-child {
  border-bottom: 1px solid #ddd;
}
#lpi-list-container .lpi-list-item.expand {
  height: 31px;
  overflow: hidden;
}
#lpi-list-container .lpi-list-item.expand .lpi-list-item-parent {
  background: #dddddd;
}
#lpi-list-container .lpi-list-item-parent,
#lpi-list-container .lpi-list-item-child {
  padding: 5px 10px;
  font-size: 0.8rem;
  position: relative;
  cursor: pointer;
}
#lpi-list-container .lpi-list-item-parent .fa.fa-ellipsis-v,
#lpi-list-container .lpi-list-item-child .fa.fa-ellipsis-v {
  position: absolute;
  right: -10px;
  top: 3px;
  padding: 5px 7px;
  border-radius: 100%;
  font-size: 14px;
  z-index: 8;
}
#lpi-list-container .lpi-list-item-parent {
  background: white;
  color: black;
  border: 1px solid #ddd;
  box-shadow: 2px 1px 2px #ddd;
}
#lpi-list-container .lpi-list-item-parent i.fa.fa-ellipsis-v {
  color: white;
}
#lpi-list-container .lpi-list-item-child {
  background: white;
  color: #333;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  box-shadow: 0 0px 0px 0px white, 0 0px 0px 0px white, 2px 0 3px -2px #ddd, -3px 0 7px -4px #ddd;
}
#lpi-list-container .lpi-list-item-child i.fa.fa-ellipsis-v {
  color: #333;
}
#lpi-list-container .li_children_item {
  font-size: 0.8rem;
  padding: 5px;
  padding-left: 10px;
  border: solid 1px #ddd;
}
#lpi-list-container .highlight {
  background: #3a98b9;
  color: white;
}
#lpi-list-container .selected {
  background: green;
}
#myVideosModal #my-video-list {
  padding: 20px;
}
#myVideosModal #my-video-list .myvid-item:hover {
  background: #ddd;
}
#myVideosModal #my-video-list .myvid-item {
  text-align: center;
  display: inline-block;
  padding: 20px;
  border: solid 1px #ddd;
  cursor: pointer;
}
#myVideosModal #my-video-list .myvid-item .myvid-avatar img {
  width: 100px;
}
#selectedVidCont {
  padding: 10px;
  border: 1px dashed #a59e9e;
  margin-top: 10px;
}
.modal-content {
  border-radius: 0px;
  border: none;
}
.popover {
  z-index: 1;
}
#lessonPlanItemAddExamModal table tbody tr,
#lpiSettingUserListModal table tbody tr,
#lpiSettingGroupListModal table tbody tr,
#lpiSettingExamListModal table tbody tr,
#lpiSettingVideoListModal table tbody tr {
  cursor: pointer;
}
#lessonPlanItemAddExamModal table tbody tr:hover,
#lpiSettingUserListModal table tbody tr:hover,
#lpiSettingGroupListModal table tbody tr:hover,
#lpiSettingExamListModal table tbody tr:hover,
#lpiSettingVideoListModal table tbody tr:hover {
  background: #d5f5f5;
}
#lessonPlanItemSettingModal ul.sa-user-list,
#lessonPlanItemSettingModal ul.sa-group-list,
#lessonPlanItemSettingModal ul.p-exam-list,
#lessonPlanItemSettingModal ul.p-video-list {
  padding-left: 17px;
  margin-top: 10px;
}
#lessonPlanItemSettingModal ul.sa-user-list li,
#lessonPlanItemSettingModal ul.sa-group-list li,
#lessonPlanItemSettingModal ul.p-exam-list li,
#lessonPlanItemSettingModal ul.p-video-list li {
  font-size: 12px;
}
#lessonPlanItemSettingModal ul.sa-user-list li:hover,
#lessonPlanItemSettingModal ul.sa-group-list li:hover,
#lessonPlanItemSettingModal ul.p-exam-list li:hover,
#lessonPlanItemSettingModal ul.p-video-list li:hover {
  color: red;
  cursor: pointer;
}
ul.matching-student-answers li {
  cursor: pointer;
}
ul.matching-student-answers li:hover {
  color: Red;
}
#lessonPlanIndex .playlist-card {
  box-shadow: 5px 5px 5px #999;
  color: white;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  overflow: hidden;
  max-width: 650px;
  min-width: 650px;
  max-height: 400px;
  width: 100%;
  margin-left: 75px;
  margin-bottom: 30px;
}
#lessonPlanIndex .playlist-card img {
  width: 100%;
  height: 260px;
  margin: auto;
}
#lessonPlanIndex .playlist-card:hover .abs-name {
  left: 100%;
}
@media (max-width: 778px) {
  #lessonPlanIndex .playlist-card {
    margin-left: 0px;
  }
}
#editExamPage ul.question-types {
  list-style-type: none;
}
#editExamPage ul.question-types li {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  background: #5f7cb7;
  color: white;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 15px;
}
#editExamPage ul.question-types .active {
  background: #9c0000;
}
#editExamPage ol.mc-question-options li,
#editExamPage ul.enums-question-answers li,
#editExamPage ul.fitb-question-answers li,
#editExamPage ul.matching-question-answers li {
  cursor: pointer;
}
#editExamPage ol.mc-question-options li p,
#editExamPage ul.enums-question-answers li p,
#editExamPage ul.fitb-question-answers li p,
#editExamPage ul.matching-question-answers li p {
  margin: 0px;
}
#editExamPage ol.mc-question-options li:hover,
#editExamPage ul.enums-question-answers li:hover,
#editExamPage ul.fitb-question-answers li:hover,
#editExamPage ul.matching-question-answers li:hover {
  color: Red;
}
#editExamPage .exam-items {
  height: 500px;
  overflow: auto;
  box-shadow: 4px 4px 4px #999;
}
#editExamPage .exam-items .item-cont {
  border: solid 1px #ddd;
  margin-bottom: 10px;
  cursor: pointer;
}
#editExamPage .exam-items .item-cont .item {
  background: #9c0000;
  color: white;
  margin-bottom: 10px;
  text-align: left;
  position: relative;
}
#editExamPage .exam-items .item-cont .item p {
  margin: 0px;
}
#editExamPage .exam-items .item-cont .item span.delete {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0px 5px;
  background: white;
  border-radius: 100%;
  cursor: pointer;
}
#editExamPage .exam-items .item-cont .item span.delete i {
  color: red;
  margin: 0px;
}
#editExamPage .exam-items .item-cont .answer {
  padding: 10px 20px;
}
#videosTabPane .disable-file-item,
#filesTabPane .disable-file-item {
  border: solid 1px #ddd;
}
#videosTabPane .item-to-delete,
#filesTabPane .item-to-delete {
  border: solid 1px red;
  background: pink;
}
#videosTabPane .delete-items,
#filesTabPane .delete-items {
  padding: 0px 10px;
}
#videosTabPane .proceed-to-delete,
#filesTabPane .proceed-to-delete {
  background: red;
  color: white !important;
  padding: 0px 10px;
}
.playlist-index .pl-control,
#filesTabPane .pl-control,
#videosTabPane .pl-control {
  list-style-type: none;
}
.playlist-index .pl-control li,
#filesTabPane .pl-control li,
#videosTabPane .pl-control li {
  float: left;
  margin-right: 20px;
}
.playlist-index .pl-control li a,
#filesTabPane .pl-control li a,
#videosTabPane .pl-control li a {
  color: #333;
}
.playlist-item-listing .pli_item {
  padding: 10px;
  margin-bottom: 10px;
  border: solid 1px #ddd;
  box-shadow: 3px 3px 3px #eee;
  background: white;
  cursor: -webkit-grab;
  cursor: grab;
}
.playlist-item-listing .pli_item p {
  margin-bottom: 5px;
}
#addVideoModal .selected-video {
  text-align: center;
  padding: 15px;
}
#addVideoModal .selected-video img {
  height: 60px;
}
.classhub-item-control {
  min-width: 165px;
}
#videoFileListModal .modal-content {
  max-height: 650px;
  min-height: 650px;
  overflow: auto;
}
#videoFileListModal .video-file-list .vfl-item {
  text-align: center;
  padding: 15px;
  cursor: pointer;
}
#videoFileListModal .video-file-list .vfl-item img {
  height: 60px;
}
#videoFileListModal .video-file-list .vfl-item:hover {
  background: #0963ea40;
  border: solid 2px blue;
}
@media (max-width: 1918px) {
  .blog-description {
    font-size: 0.9rem;
  }
}
@media (max-width: 1812px) {
  .blog-description {
    font-size: 0.7rem;
  }
}
@media (max-width: 1490px) {
  .playlist-index .col-md-3 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
}
@media (max-width: 1440px) {
  .col-lg-3 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
  .side-menu ul li {
    padding: 10px;
    padding-left: 20px;
  }
  .blog-description {
    font-size: 0.9rem;
  }
}
@media (max-width: 1388px) {
  .blog-description {
    font-size: 0.89rem;
  }
}
@media (max-width: 1388px) {
  .blog-description {
    font-size: 0.8rem;
  }
}
@media (max-width: 1388px) {
  .blog-description {
    padding-top: 15px !important;
    font-size: 0.7rem;
  }
}
@media (max-width: 1388px) {
  .blog-description {
    padding-top: 15px !important;
    font-size: 0.6rem;
  }
}
@media (max-width: 1388px) {
  .blog-description {
    padding-top: 15px !important;
    font-size: 0.8rem;
  }
}
@media (max-width: 1315px) {
  .avatar-wrapper {
    margin-left: 18px;
  }
}
@media (max-width: 1266px) {
  .side-menu ul li {
    padding: 5px;
    padding-left: 0px;
  }
  .side-menu ul li a {
    color: white;
    font-size: 14px;
  }
}
@media (max-width: 1219px) {
  .avatar-wrapper img {
    width: 120px;
    height: 120px;
  }
}
@media (max-width: 1200px) {
  .side-menu ul {
    padding-left: 15px;
  }
  .side-menu ul li {
    padding-left: 25px;
  }
}
@media (max-width: 1142px) {
  .playlist-index .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 1100px) {
  .side-menu ul {
    padding-left: 15px;
  }
  .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 1085px) {
  .avatar-wrapper {
    margin-left: 20px;
  }
  .avatar-wrapper img {
    width: 100px;
    height: 100px;
  }
  .avatar-wrapper h5 {
    font-size: 16px;
  }
}
@media (max-width: 1034px) {
  .avatar-wrapper img {
    width: 120px;
    height: 120px;
  }
}
@media (max-width: 1024px) {
  .avatar-wrapper {
    margin: 0px;
  }
}
@media (max-width: 999px) {
  .classhub-join-create-list a {
    width: 50%;
    font-size: 14px;
  }
  .cl-mobile-label {
    display: inherit;
    font-weight: bold;
  }
  .cl-web-label {
    display: none;
  }
  .classhub-list-item-ctrl {
    position: relative !important;
    width: 100%;
    margin-top: 10px;
    text-align: left;
    font-size: 13px;
  }
  .classhub-list-item-ctrl div:nth-child(2) {
    display: block;
    position: absolute;
    top: -35px;
    right: 0px;
  }
  .classhub-list-item-ctrl div:nth-child(3) {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
  }
  .classhub-list-item-ctrl div button {
    width: 69px;
  }
  .mobile-menu-trigger {
    display: block;
  }
  #main-side-menu-pane {
    display: none;
  }
  #main-side-menu-pane-mobile {
    display: block !important;
    margin: auto;
  }
  #main-content-pane {
    width: 100vw;
    padding: 0px;
  }
  .lessonplan-item-page,
  #lessonPlanIndex {
    padding-top: 30px;
  }
  .fa.fa-bell {
    right: 30px;
    top: 20px;
  }
  .notif-count {
    right: 35px;
    top: 15px;
  }
  .side-menu {
    display: none;
  }
  .mobile-menu {
    display: block;
    position: fixed;
    width: 100%;
    z-index: 999;
  }
  .col-md-10.main-content {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .player-card {
    margin-top: 0px !important;
    padding-top: 30px !important;
  }
  .mobile-menu {
    padding: 0px !important;
  }
  .abs-control {
    top: 30px !important;
    z-index: 9 !important;
  }
  .playlist-item-page .player-card .video-player-container video,
  .playlist-item-page .player-card .video-player-container iframe {
    padding-top: 30px;
  }
}
@media (max-width: 991px) {
  #frontPage .basic-fields {
    padding-left: 0px !important;
  }
  #frontPage .avatar-row {
    text-align: center;
  }
  #frontPage .avatar-row .avatar-preview {
    margin: auto;
  }
  #frontPage .avatar-row .col-lg-3,
  #frontPage .avatar-row .col-lg-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 940px) {
  .blog-description {
    padding-top: 15px !important;
    font-size: 0.7rem;
  }
}
@media (max-width: 860px) {
  .playlist-item-page .player-card {
    width: 650px !important;
  }
  .playlist-item-page .player-card .video-player-container {
    width: 650px !important;
    height: 310px !important;
  }
  .player-card {
    padding: 0px;
    margin-top: 0px !important;
  }
  .abs-control {
    top: -3px;
    z-index: 1;
  }
  .abs-control a {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .file-list .col-sm-6 {
    flex: 0 0 33% ;
    max-width: 33%;
  }
  .prc-logo-container {
    padding-right: 30px;
  }
  .prc-logo-container .prc-logo img {
    width: 60px !important;
    height: 60px !important;
  }
  .prc-logo-container .prc-logo-text h4 {
    font-size: 1rem;
  }
  #frontPage {
    padding-top: 50px;
    padding-bottom: 100px;
  }
  #frontPage .register-card.basic {
    padding: 30px 10px;
  }
  .col-md-9,
  .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .login-row {
    padding: 0px !important;
    margin: 0px !important;
  }
  .login-row .card-body {
    padding: 20px !important;
  }
  .gp-apps {
    margin-top: 30px;
  }
}
@media (max-width: 767px) {
  #frontPage {
    padding-top: 50px;
    padding-bottom: 100px;
  }
  #frontPage .white-line-divider {
    display: none;
  }
  #frontPage .register-card {
    margin-top: 30px;
    min-height: auto;
  }
  .login-heading {
    padding: 10px 0px;
  }
  .login-card {
    margin-top: 40px !important;
  }
}
@media (max-width: 700px) {
  .playlist-item-page .player-card {
    width: 82vw !important;
  }
  .playlist-item-page .player-card .video-player-container {
    width: 82vw !important;
    left: 0;
    right: 0;
    margin: auto;
    height: 265px !important;
  }
  .black-bar {
    width: 82vw !important;
  }
}
@media (max-width: 687px) {
  #lessonPlanIndex {
    padding-top: 0px;
  }
  .ip-header-text h4,
  .ip-header-text h5 {
    font-size: 1rem;
  }
}
@media (max-width: 650px) {
  #lessonsTabPane .playlist-card:not(.not-playlist),
  #lessonPlanIndex .playlist-card:not(.not-playlist),
  .learnstore-item-list .playlist-card:not(.not-playlist) {
    max-width: 100%;
    min-width: auto;
    margin-left: 0px;
  }
}
@media (max-width: 620px) {
  .col-lg-3 {
    flex: 0 0 80%;
    max-width: 80%;
    margin: auto;
  }
  .blog-description {
    padding-top: 15px !important;
    font-size: 0.9rem;
  }
}
@media (max-width: 603px) {
  ul.pl-control {
    padding-left: 10px;
  }
  ul.pl-control li:nth-child(4) {
    float: left !important;
  }
  #filesTabPane ul.pl-control {
    padding-left: 25px;
  }
  #filesTabPane ul.pl-control li:nth-child(3) {
    float: left !important;
  }
}
@media (max-width: 600px) {
  #classHubCreatedPage.container-fluid {
    padding: 0px;
  }
  .playlist-index .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 594px) {
  .comment-section .col-sm-11 {
    flex: 0 0 89.666667%;
    max-width: 89.666667%;
  }
}
@media (max-width: 591px) {
  #frontPage {
    padding-top: 0px;
  }
  .prc-logo-container .prc-logo img {
    width: 40px !important;
    height: 40px !important;
  }
  .prc-logo-container .prc-logo-text {
    margin-right: 10px;
  }
  .prc-logo-container .prc-logo-text h4 {
    font-size: 0.7rem;
  }
}
@media (max-width: 590px) {
  .playlist-item-page .player-card .video-player-container {
    margin: auto;
  }
  .player-card h2 {
    font-size: 1.5rem;
  }
  .player-card .video-item img {
    width: 50px;
    height: 50px;
  }
}
@media (max-width: 585px) {
  .playlist-item-page .player-card .video-player-container,
  .player-card {
    width: 81vw !important;
  }
}
@media (max-width: 575px) {
  .inner-pages-header .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  input[name=title] {
    margin-top: 20px;
  }
  #frontPage .fp-login-btn {
    margin-top: 10px;
  }
  #frontPage .accout-type-options {
    padding-left: 38%;
  }
  #frontPage .form-group {
    text-align: center;
  }
  #frontPage .auth-opt {
    text-align: left;
    margin-left: 26%;
    margin-top: 15px;
  }
}
@media (min-width: 575px) {
  .login-heading .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .login-heading .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
}
@media (max-width: 575px) {
  #lessonsTabPane .badge-legends {
    margin-top: 20px;
  }
  #lessonsTabPane .lessonplan-container {
    padding-top: 40px;
  }
}
@media (max-width: 574px) {
  .login-heading .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .login-heading .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .player-card .col-sm-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .player-card .col-sm-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
}
@media (max-width: 572px) {
  ul.pl-control {
    padding-left: 50px;
  }
}
@media (max-width: 557px) {
  .lessonplan-item-page .lessonplan-video-player iframe {
    width: 100% !important;
  }
}
@media (max-width: 520px) {
  #lessonsTabPane .playlist-card:not(.not-playlist),
  #lessonPlanIndex .playlist-card:not(.not-playlist),
  .learnstore-item-list .playlist-card:not(.not-playlist) {
    max-height: 250px;
    height: 250px;
  }
  #lessonsTabPane .playlist-card:not(.not-playlist) img,
  #lessonPlanIndex .playlist-card:not(.not-playlist) img,
  .learnstore-item-list .playlist-card:not(.not-playlist) img {
    height: 150px;
  }
  #lessonsTabPane .playlist-card:not(.not-playlist) .lessonplan-item-ctrl,
  #lessonPlanIndex .playlist-card:not(.not-playlist) .lessonplan-item-ctrl,
  .learnstore-item-list .playlist-card:not(.not-playlist) .lessonplan-item-ctrl {
    bottom: 70px;
  }
  #lessonsTabPane .playlist-card:not(.not-playlist) .playlist-title h5,
  #lessonPlanIndex .playlist-card:not(.not-playlist) .playlist-title h5,
  .learnstore-item-list .playlist-card:not(.not-playlist) .playlist-title h5 {
    font-size: 1rem;
    font-weight: bold;
  }
  .classhub-name {
    color: white !important;
  }
  .col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
    margin: auto;
  }
  .blog-description {
    padding-top: 15px !important;
    font-size: 0.95rem;
  }
}
@media (max-width: 500px) {
  .blog-description {
    padding-top: 15px !important;
    font-size: 0.9rem;
  }
}
@media (max-width: 493px) {
  .playlist-item-page .player-card .video-player-container,
  .player-card {
    width: 82vw !important;
  }
  .black-bar {
    width: 82vw !important;
  }
}
@media (max-width: 475px) {
  .inner-pane-ctrl {
    margin-top: 25px;
  }
}
@media (max-width: 472px) {
  .playlist-item-page .player-card .video-player-container {
    height: 181px!important;
  }
  .player-position-holder {
    font-size: 10px;
  }
  .player-position-holder hr {
    margin: 5px;
  }
}
@media (max-width: 461px) {
  .playlist-item-page .player-card .video-player-container,
  .player-card {
    width: 82vw!important;
  }
  .black-bar {
    width: 82vw!important;
  }
}
@media (max-width: 459px) {
  .download-report-li {
    padding-top: 10px;
  }
  .add-column-li {
    padding-top: 10px;
  }
  .exams-index-pane table tbody .form-control,
  #examIndex table tbody .form-control {
    font-size: 11px;
    padding: 3px 0px;
    height: 25px;
    min-width: 60px !important;
    max-width: 60px !important;
  }
  .exams-index-pane table tbody a,
  #examIndex table tbody a {
    margin-bottom: 5px;
  }
  .exams-index-pane table tbody .exam-item-ctrl,
  #examIndex table tbody .exam-item-ctrl {
    bottom: 30px !important;
    right: 0px !important;
  }
  .exams-index-pane table tbody .exam-item-ctrl i,
  #examIndex table tbody .exam-item-ctrl i {
    margin-right: 0px;
  }
  .exams-index-pane table tbody tr td:nth-child(4),
  #examIndex table tbody tr td:nth-child(4) {
    padding-right: 20px;
  }
}
@media (max-width: 450px) {
  .lessonplan-item-page .header-slider,
  .lessonplan-item-page .slick-list {
    height: 230px;
  }
  .classhub-list-item-ctrl div:nth-child(2) {
    top: -32px;
  }
  .classhub-list-item-ctrl div button {
    width: 60px;
    font-size: 10px !important;
  }
  .classhub-item-control {
    min-width: 143px;
  }
}
@media (max-width: 442px) {
  .login-to-account-txt {
    font-size: 1.3rem !important;
  }
}
@media (max-width: 438px) {
  #lessonsTabPane .badge-legends {
    padding: 0px;
    right: auto !important;
  }
  #lessonsTabPane .badge-legends li {
    margin-right: 20px;
  }
}
@media (max-width: 425px) {
  .player-card h2 {
    font-size: 1rem;
  }
  .lpi-list-item span {
    font-size: 9px;
  }
  #accountSettingsPage {
    padding: 0px !important;
  }
  #accountSettingsPage .col-xl-6:nth-child(2) {
    margin-top: 30px;
  }
  .file-list .col-sm-6 {
    flex: 0 0 50% ;
    max-width: 50%;
  }
  #frontPage {
    padding-bottom: 30px;
  }
  #frontPage .auth-opt {
    margin-left: 22%;
  }
  #frontPage .main-logo {
    width: 100px;
    height: 100px;
  }
  #frontPage .header-box h2 {
    font-size: 1.5rem;
  }
  #frontPage .login-card {
    margin-top: 20px !important;
  }
  #frontPage .login-card .login-to-account-txt {
    font-size: 1.5rem !important;
  }
  #frontPage .login-card .auth-opt {
    padding-top: 10px;
  }
  #frontPage .accout-type-options {
    padding-left: 30%;
  }
  .gp-apps {
    font-size: 13px;
    padding: 20px;
  }
  .playlist-index h3 {
    font-size: 19px;
    margin-top: 11px;
  }
}
@media (max-width: 400px) {
  .video-item .col-sm-10 {
    padding-left: 30px;
    font-size: 12px;
  }
}
@media (max-width: 411px) {
  .login-heading h4 {
    font-size: 20px;
  }
}
@media (max-width: 390px) {
  #frontPage .auth-opt {
    margin-left: 19%;
  }
}
@media (max-width: 383px) {
  .blog-description {
    padding-top: 15px !important;
    font-size: 0.8rem;
  }
  #lessonsTabPane .badge-legends li {
    margin-right: 10px;
    font-size: 13px;
  }
}
@media (max-width: 375px) {
  #lessonsTabPane .playlist-card:not(.not-playlist),
  #lessonPlanIndex .playlist-card:not(.not-playlist),
  .learnstore-item-list .playlist-card:not(.not-playlist) {
    max-height: 220px;
    height: 220px;
  }
  #lessonsTabPane .playlist-card:not(.not-playlist) img,
  #lessonPlanIndex .playlist-card:not(.not-playlist) img,
  .learnstore-item-list .playlist-card:not(.not-playlist) img {
    height: 130px;
  }
  #lessonsTabPane .playlist-card:not(.not-playlist) .lessonplan-item-ctrl,
  #lessonPlanIndex .playlist-card:not(.not-playlist) .lessonplan-item-ctrl,
  .learnstore-item-list .playlist-card:not(.not-playlist) .lessonplan-item-ctrl {
    bottom: 60px;
  }
  #frontPage .login-card {
    margin-top: 0px !important;
  }
  #frontPage .login-card .login-to-account-txt {
    font-size: 1.3rem !important;
  }
  #frontPage .accout-type-options {
    padding-left: 25%;
  }
  #frontPage .auth-opt {
    margin-left: 17%;
  }
  .video-title {
    font-size: 13px;
  }
  .player-card h2 {
    font-size: 1.2rem;
  }
  .playlist-item-page .col-md-12 {
    padding: 0px;
  }
  .playlist-item-page .player-card .video-player-container,
  .playlist-item-page .player-card {
    width: 92vw !important;
  }
  .playlist-item-page .black-bar {
    width: 92vw !important;
  }
  .playlist-item-page .main-comment-input input[type=text] {
    width: 88%;
    margin: auto;
  }
  .playlist-item-page .main-comment-input button {
    width: 70%;
    font-size: 11px;
  }
}
@media (max-width: 370px) {
  #frontPage .auth-opt {
    margin-left: 17%;
  }
}
@media (max-width: 350px) {
  #frontPage .auth-opt {
    margin-left: 14%;
  }
}
@media (max-width: 330px) {
  #frontPage .auth-opt {
    margin-left: 11%;
  }
}
@media (max-width: 320px) {
  #frontPage .login-card .login-to-account-txt {
    font-size: 1rem !important;
  }
  #frontPage .auth-opt {
    margin-left: 8%;
  }
  .playlist-item-page .player-card .video-player-container,
  .player-card {
    width: 91vw !important;
  }
  .black-bar {
    width: 91vw !important;
  }
}