/* Page layout */
#page-layout {
  min-height: 88.6%;
  position: relative;
}
#header {
  background: #252A36;
  padding: 0px;
}
#body {
  padding: 0px;
  padding-bottom: 0px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0px;
  background: #2b2b2b;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 14px;
  font-weight: 300;
  font-family: Poppins;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: #f2f3f8;
}
textarea.form-control.content-area {
  height: 400px;
}
.breadcrumb {
  background: white;
}

/* Elements' style */
.btn {
  cursor: pointer;
}

/* Wrapper */
#wrapper {
  min-height: 100%;
}

.no-gutters {
  margin-bottom: 30px;
}
.no-gutters .same-height {
  height: 100%;
  min-height: 200px;
  margin-bottom: 0px;
}
.tooltip-inner {
  font-family: Poppins;
  font-size: 13px;
  font-weight: 300;
}
.w-content {
  display: flex;
}

/* Navbar */
.navbar {
  -webkit-box-shadow: 0 1px 15px 1px rgba(113,106,202,.2);
  -moz-box-shadow: 0 1px 15px 1px rgba(113,106,202,.2);
  box-shadow: 0 1px 15px 1px rgba(113,106,202,.2);
  background-color: #252A36;
  color: white;
}
.navbar .navbar-brand {
  margin-right: 3rem;
}
.navbar .navbar-brand img {
  width: 40px;
  margin-right: 0.5rem;
}
.navbar-dark .navbar-nav .nav-link:hover {
  color: rgba(255,255,255,.75);
}
.navbar .navbar-nav .nav-link {
  color: rgba(255,255,255,1);
}

.navbar .navbar-nav .nav-link.special {
  font-weight: 300;
  background: rgba(244, 82, 109, 1);
  border-radius: 40px;
  padding: .5rem 1.2rem;
  margin-left: 10px;
}

.navbar-amount-symbol i {
  color: #007BFF;
}

.navbar-amount {
  font-family: Poppins;
  font-style: normal;
  font-weight: normal;
  color: #FFFFFF;
}

.navbar .profile-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.navbar .profile-nav li,
.navbar .profile-nav .profile {
  display: inline-block;
  vertical-align: middle;
}
.navbar .profile-nav li a {
  color: rgba(255,255,255,1);
  font-size: 26px;
  text-decoration: none;
  padding: 0px 3px;
}
.navbar .profile-nav li a:hover {
  color: rgba(255,255,255,.75);
}
.navbar .profile-nav .notifications {
  position: relative;
}

.navbar .profile-nav .badge-notify {
  background:red;
  position:relative;
  top: -20px;
  left: -19px;
  font-size: 11px;
}
.navbar .profile-nav .notifications.notification-alert:before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffb822;
}
.navbar .profile-nav .profile {
  margin-left: 10px;
  padding: 4px 0px;
}
.navbar .profile-nav .profile .dropdown-toggle:after {
  display: none;
}
.navbar .profile-nav .profile .dropdown-toggle img {
  position: relative;
  background: #6B99FF;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #3866CC;
  vertical-align: middle;
  z-index: 9;
}
.navbar .profile-nav .profile .dropdown-toggle span {
  position: relative;
  vertical-align: middle;
  color: #fff;
  background: #3866CC;
  padding: 4px 10px 4px 18px;
  margin-left: -10px;
  z-index: 3;
  font-family: Poppins;
  font-style: normal;
  font-weight: normal;
}
.navbar .profile-nav .profile .dropdown-menu.dropdown-menu-right {
  left: auto;
  right: 0px;
}
.navbar .profile-nav .profile .dropdown-menu {
  border: 0px;
  border-radius: 0px;
  -webkit-box-shadow: 0 1px 15px 1px rgba(113,106,202,.2);
  -moz-box-shadow: 0 1px 15px 1px rgba(113,106,202,.2);
  box-shadow: 0 1px 15px 1px rgba(113,106,202,.2);
}
.navbar .profile-nav .profile .dropdown-menu .dropdown-item span {
  vertical-align: middle;
}
.navbar .profile-nav .profile .dropdown-menu .dropdown-item i {
  font-size: 18px;
  vertical-align: middle;
  margin-right: 5px;
  color: inherit;
}


/* Welcome block */
.welcome {
  margin: 30px 0px;
}
.welcome .alert {
  margin: 0px;
  text-align: center;
  border-radius: 0px;
}
.welcome .alert h3 {
  margin: 0px;
  font-weight: 300;
  color: #575962;
}


/* 404 block */
.error-404 {
  margin: 40px auto 30px auto;
  max-width: 900px;
}
.error-404 .image-404 {
  margin-bottom: 0px;
}
.error-404 .alert {
  margin: 0px;
  text-align: center;
  border-radius: 0px;
  padding: 60px 30px;
}
.error-404 .alert h3 {
  margin: 0px 0px 20px 0px;
  font-weight: 300;
  color: #575962;
}

/* Normal anchors */
a {
  text-decoration: none;
}
a:not([class]):hover {
  text-decoration: underline;
}

/* Revert badge padding to Bootstrap4 */
.badge {
  padding: 0.25em 0.5em;
}

/* Alert */
.alert {
  padding: 30px;
  -webkit-box-shadow: 0 1px 15px 1px rgba(113,106,202,.08);
  -moz-box-shadow: 0 1px 15px 1px rgba(113,106,202,.08);
  box-shadow: 0 1px 15px 1px rgba(113,106,202,.08);
}


/* Card */
.card {
  margin-bottom: 30px;
  border: 0px;
  border-radius: 0px;
  -webkit-box-shadow: 0 1px 15px 1px rgba(113,106,202,.08);
  -moz-box-shadow: 0 1px 15px 1px rgba(113,106,202,.08);
  box-shadow: 0 1px 15px 1px rgba(113,106,202,.08);
  word-wrap: normal;
}
.card .card-header {
  background-color: #ffffff;
  padding: 20px 30px;
  border-bottom: 1px solid #ebedf2;
}
.card .card-header .card-title {
  font-size: 16px;
  font-weight: 400;
  margin: 0px;
}
.card .card-header .card-title span {
  display: inline-block;
  vertical-align: middle;
}
.card .card-header .card-title .collapse-toggle i {
  vertical-align: middle;
  transform: rotate(90deg);
  cursor: pointer;
}
.card .card-body {
  background-color: #ffffff;
  padding: 25px 30px;
  color: #575962;
}
.card .card-footer {
  background-color: #ffffff;
  padding: 15px 30px;
  border-top: 1px solid #ebedf2;
  color: #575962;
}
.card .card-footer .pagination {
  margin: 0px;
}
.card .card-body .nav-pills .nav-item {
  display: block;
  width: 100%;
}

/* Same height card */
.card-row {
  margin-bottom: 30px;
}
.card-row .same-height {
  height: 100%;
  margin-bottom: 0px;
}

/* Pagination */
.pagination .page-item {
  padding: 0;
  margin-right: 5px;
  display: inline-block;
}
.pagination .page-item:last-child {
  margin-right: 0px;
}
.pagination .page-item .page-link {
  cursor: pointer;
  display: inline-block;
  height: 30px;
  width: 30px;
  vertical-align: middle;
  padding: 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  line-height: 12px;
  font-weight: 500;
  border: none;
  color: #575962;
}
.pagination .page-item.active .page-link {
  color: #ffffff;
}
.pagination .page-item.disabled .page-link {
  color: #cfcedb;
}
.pagination .page-item:first-child .page-link {
  border-radius: 50%;
}
.pagination .page-item:last-child .page-link {
  border-radius: 50%;
}


/* Custom badge */
.w-badge {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background: #eaeaea;
  color: #444;
  font-size: .8rem;
  line-height: 12px;
  min-height: 12px;
  min-width: 12px;
  vertical-align: middle;
  text-align: center;
  display: inline-block;
  padding: 0 2px;
}
.w-badge.w-badge-square {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  background: #dfe1ed;
}
.w-badge.w-badge-square.done {
  background: #34bfa3;
}
.w-badge.w-badge-cplusplus {
  background: #f4516c;
}
.w-badge.w-badge-php {
  background: #5867dd;
}
.w-badge.w-badge-javascript {
  background: #ffb822;
}



/* Widget comments */
.widget-comment {
  margin-bottom: 15px;
  border-bottom: 1px dashed #ebedf2;
}
.widget-comment:last-child {
  margin-bottom: 0px;
  border-bottom: 0px;
}

.widget-comment-avatar {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  object-fit: cover;
}

.widget-comment .widget-comment__header .widget-comment__user {
  display: table;
  width: 100%;
}
.widget-comment .widget-comment__header .widget-comment__user .widget-comment-avatar,
.widget-comment .widget-comment__header .widget-comment__user .widget-comment-info,
.widget-comment .widget-comment__header .widget-comment__user .widget-comment-href {
  display: table-cell;
  vertical-align: middle;
}
.widget-comment .widget-comment__header .widget-comment__user .widget-comment-href .link-disabled {
  color: grey;
}
.widget-comment .widget-comment__header .widget-comment__user .widget-comment-avatar {
  width: 48px;
  padding-right: 5px;
}
.widget-comment .widget-comment__header .widget-comment__user .widget-comment-avatar img {
  width: 48px;
  border-radius: 50%;
}
.widget-comment .widget-comment__header .widget-comment__user .widget-comment-info .widget-comment-info-username {
  font-weight: 500;
}
.widget-comment .widget-comment__header .widget-comment__user .widget-comment-info .widget-comment-info-dateandtime {
  font-size: 12px;
}
.widget-comment .widget-comment__body {
  margin: 15px 0px;
}
.widget-comment .widget-comment__body .widget-comment__text {
  color: #898b96;
  margin-bottom: 0px;
}
.widget-comment__text {
  word-wrap:break-word;
}
.widget-comment:last-child .widget-comment__body {
  margin-bottom: 0px;
}


/* Widget learn — editorial dashboard look */
#widget-learn {
  --wl-card: #ffffff;
  --wl-soft: #f8f9fc;
  --wl-soft-2: #fafbfd;
  --wl-line: #ebedf2;
  --wl-line-soft: #f2f3f8;
  --wl-text: #3a4252;
  --wl-muted: #8a91a3;
  --wl-muted-2: #b4b8c5;
  --wl-blue: #4680ff;
  --wl-blue-deep: #2e5fd9;
  --wl-blue-soft: #e8efff;
  --wl-teal: #34bfa3;
  --wl-teal-soft: #d8f1e9;
  --wl-amber: #f4a93c;
  margin: -25px -30px;
}

/* Module-level locked overlay (only for the body's direct .locked child,
   so it doesn't leak onto .lesson-item.locked rows). */
#widget-learn .learn-item .learn-item__body > .locked {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #000;
  z-index: 5;
}
#widget-learn .learn-item .learn-item__body > .locked .text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
#widget-learn .learn-item:hover .learn-item__body > .locked {
  opacity: 0.7;
}

/* Module header (always expanded — no collapse toggle) */
#widget-learn .learn-item .learn-item__header {
  border-bottom: 1px solid var(--wl-line);
  padding: 20px 28px;
  background: var(--wl-card);
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}
#widget-learn .learn-item .learn-item__header .learn-item__title {
  flex: 1;
  min-width: 0;
}
#widget-learn .learn-item .learn-item__header .learn-item__title h5 {
  font-size: 19px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
  color: #2a2f3b;
  display: flex;
  align-items: center;
  gap: 12px;
}
#widget-learn .learn-item .learn-item__header .w-badge {
  margin-right: 0;
  flex-shrink: 0;
}
/* Repurpose the cplusplus badge as the editorial colored marker. */
#widget-learn .learn-item .learn-item__header .w-badge.w-badge-cplusplus {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 0;
  border-radius: 4px;
  background: var(--wl-blue);
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}
#widget-learn .learn-item .learn-item__header .status {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
#widget-learn .learn-item .learn-item__header .status .progress {
  width: 110px;
  height: 6px;
  border-radius: 999px;
  background: var(--wl-line-soft);
  overflow: hidden;
  margin: 0;
}
#widget-learn .learn-item .learn-item__header .status .progress .progress-bar {
  height: 6px;
  background: linear-gradient(90deg, var(--wl-blue) 0%, var(--wl-teal) 100%);
  border-radius: 999px;
  transition: width 1.2s cubic-bezier(.2,.8,.2,1);
}
#widget-learn .learn-item .learn-item__header .status .learn-item__pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--wl-muted);
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: right;
}
#widget-learn .learn-item .learn-item__body {
  position: relative;
  background: var(--wl-card);
  padding: 6px 0 14px;
}

/* Chapter rows (editorial module-rows) */
#widget-learn .learn-item-components {
  margin: 0;
  padding: 4px 16px;
  list-style: none;
}
#widget-learn .learn-item-components .nav-item {
  padding: 0;
  border-bottom: 0;
  border-radius: 12px;
}
#widget-learn .learn-item-components .nav-item + .nav-item {
  margin-top: 2px;
}
#widget-learn .learn-item-components .nav-item .nav-item__title {
  padding: 12px 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  cursor: pointer;
  transition: background .15s ease;
}
#widget-learn .learn-item-components .nav-item .nav-item__title:hover {
  background: var(--wl-soft);
}
#widget-learn .learn-item-components
  .nav-item:has(> .nav-item__content:not(.collapse)) > .nav-item__title {
  background: var(--wl-soft);
}
#widget-learn .learn-item-components .nav-item .nav-item__title > a {
  display: inline-flex;
  align-items: center;
  color: var(--wl-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
#widget-learn .learn-item-components .nav-item .nav-item__title > a > span {
  font-weight: inherit;
}
#widget-learn .learn-item-components .nav-item .nav-item__title > a.btn {
  color: #fff;
  font-weight: 600;
}
#widget-learn .learn-item-components .nav-item .nav-item__title span {
  vertical-align: middle;
}
#widget-learn .learn-item-components .nav-item .nav-item__title .w-badge {
  margin-right: 0;
  flex-shrink: 0;
}
#widget-learn .learn-item-components .nav-item.chapter-locked
  .nav-item__title > span:not(.w-badge):not(.state):not(.fa-exclamation-triangle),
#widget-learn .learn-item-components .nav-item.chapter-locked
  .nav-item__title > a {
  color: var(--wl-muted);
}
#widget-learn .learn-item-components .nav-item .nav-item__title .fa-lock {
  color: var(--wl-muted-2);
  margin-right: 0;
  font-size: 13px;
}
/* Toggle chevron (the empty <a> wrapping the .state span) — push to right. */
#widget-learn .learn-item-components .nav-item
  .nav-item__title > a[data-bs-toggle="collapse"] {
  margin-left: auto;
  color: var(--wl-muted-2);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  transition: transform .25s ease;
}
#widget-learn .learn-item-components
  .nav-item:has(> .nav-item__content:not(.collapse)) > .nav-item__title
  > a[data-bs-toggle="collapse"] {
  transform: rotate(180deg);
}
#widget-learn .learn-item-components .nav-item
  .nav-item__title > a[data-bs-toggle="collapse"] > .state {
  display: inline-flex;
}
/* Admin-only "Solved by N users" chip (uses .state.mx-2). */
#widget-learn .learn-item-components .nav-item .nav-item__title
  .state.mx-2 {
  margin-left: auto !important;
  background: var(--wl-line-soft);
  color: var(--wl-muted);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
#widget-learn .learn-item-components .nav-item .nav-item__title
  .state.mx-2 small {
  font-size: inherit;
}
#widget-learn .learn-item-components .nav-item .nav-item__title
  .state.mx-2 + a[data-bs-toggle="collapse"] {
  margin-left: 8px;
}
/* Recolor the marker dot per chapter state */
#widget-learn .learn-item-components .nav-item .w-badge.w-badge-square {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 0;
  border-radius: 3px;
  padding: 0;
  background: var(--wl-blue);
}
#widget-learn .learn-item-components .nav-item .w-badge.w-badge-square.done {
  background: var(--wl-teal);
}
#widget-learn .learn-item-components .nav-item.chapter-locked
  .w-badge.w-badge-square {
  background: var(--wl-muted-2);
}

/* Lessons inside a chapter — vertical timeline of cards */
#widget-learn .lessons-list {
  padding: 6px 14px 8px 44px;
  margin: 0;
  list-style: none;
  position: relative;
}
#widget-learn .lessons-list .lesson-item {
  position: relative;
  padding: 11px 14px;
  margin: 8px 0;
  background: var(--wl-soft);
  border: 1px solid var(--wl-line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#widget-learn .lessons-list .lesson-item:hover {
  transform: translateX(2px);
  box-shadow: 0 8px 20px -16px rgba(15,22,38,.18);
}
/* Timeline node (left circle) */
#widget-learn .lessons-list .lesson-item:before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--wl-card);
  border: 2px solid var(--wl-line);
  position: absolute;
  left: -23px;
  top: 50%;
  margin-top: -8px;
  z-index: 4;
  box-sizing: border-box;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
/* Connecting line between nodes */
#widget-learn .lessons-list .lesson-item:not(:last-child):after {
  content: '';
  width: 2px;
  height: calc(100% + 8px);
  background: var(--wl-line);
  position: absolute;
  left: -16px;
  top: 50%;
  z-index: 3;
}
/* Done state — filled teal node */
#widget-learn .lessons-list .lesson-item.done:before {
  background: var(--wl-teal);
  border-color: var(--wl-teal);
}
#widget-learn .lessons-list .lesson-item.done:not(:last-child):after {
  background: var(--wl-teal);
}
#widget-learn .lessons-list .lesson-item.done {
  background: var(--wl-card);
}
/* Current state — highlighted blue ring on the timeline node */
#widget-learn .lessons-list .lesson-item.current:before {
  background: var(--wl-blue);
  border-color: var(--wl-blue);
  box-shadow: 0 0 0 5px var(--wl-blue-soft);
}
#widget-learn .lessons-list .lesson-item.current {
  background: var(--wl-card);
  border-color: var(--wl-blue);
  box-shadow: 0 12px 24px -18px rgba(70,128,255,.35);
}
#widget-learn .lessons-list .lesson-item.current > a {
  font-weight: 600;
  color: var(--wl-text);
}
/* Locked state — muted, no overlay (overrides any inherited overlay). */
#widget-learn .lessons-list .lesson-item.locked {
  position: relative;
  opacity: 1;
  background: var(--wl-soft);
  z-index: auto;
}
#widget-learn .lessons-list .lesson-item.locked:before {
  background: var(--wl-card);
  border-color: var(--wl-muted-2);
}
#widget-learn .lessons-list .lesson-item.locked > a,
#widget-learn .lessons-list .lesson-item.locked > span:not(.fa-lock) {
  color: var(--wl-muted);
}
#widget-learn .lessons-list .lesson-item .fa-lock {
  color: var(--wl-muted-2);
  margin-right: 0;
  font-size: 12px;
}

#widget-learn .lessons-list .lesson-item > a {
  display: inline-flex;
  align-items: center;
  color: var(--wl-blue);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
}
#widget-learn .lessons-list .lesson-item > a:hover {
  color: var(--wl-blue-deep);
}
#widget-learn .lessons-list .lesson-item.done > a {
  color: var(--wl-text);
}
#widget-learn .lessons-list .lesson-item a.disabled {
  color: var(--wl-muted-2);
  pointer-events: none;
}
/* The inline "Continue here" button — make it the editorial blue CTA. */
#widget-learn .lessons-list .lesson-item a#continue-here-button,
#widget-learn .nav-item__title a#continue-here-button {
  margin-left: auto !important;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: var(--wl-blue);
  border-color: var(--wl-blue);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(70,128,255,.5);
}
#widget-learn .lessons-list .lesson-item a#continue-here-button:hover,
#widget-learn .nav-item__title a#continue-here-button:hover {
  background: var(--wl-blue-deep);
  border-color: var(--wl-blue-deep);
  color: #fff;
}
/* Admin "Solved by N users" chip inside lesson rows. */
#widget-learn .lessons-list .lesson-item .state.mx-2 {
  margin-left: auto !important;
  background: var(--wl-line-soft);
  color: var(--wl-muted);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
#widget-learn .lessons-list .lesson-item .state.mx-2 small {
  font-size: inherit;
}

/* Widget login progress */
.login-progress-border-top {
  border-bottom: 1px solid #ebedf2;
}
.widget-login-progress {
  padding-top: 30px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.widget-login-progress .widget-login-progress__title h3 {
  font-weight: 400;
  font-size: 16px;
  margin: 0px;
  display: inline-block;
  color: #000000;
}
.widget-login-progress .flex-display {
  display: flex; flex-wrap: wrap;
}
.widget-login-progress .flex-display .timeframe-margins {
  margin: 18px;
}
.widget-login-progress .row {
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
  border-radius: 0px;
}
.widget-login-progress .row .block {
  display: block;
}
.widget-login-progress .row .block .day {
  height: 14px;
  width: 17px;
  margin: 3px;
  margin-top: 0px;
  margin-right: 2px;
  font-size: .8rem;
}
.widget-login-progress .progress-bar {
  height: 15px;
  width: 15px;
  line-height: 10px;
  background: #bfbfbf;
  margin: 1px;
  margin-top: 2px;
  border-radius: 0.1rem;
}
.widget-login-progress .white {
  background-color: #FFFFFF;
}
.widget-login-progress .progress-bar.filled {
  background: #34bfa3;
  border-radius: 0.1rem;
}
.widget-login-progress .info {
  margin-top: 30px;
}
.widget-login-progress .info.month-name-margins {
  margin-left: -12px;
}
.widget-login-progress .info.show-logins {
  margin-left: -10px;
}
.widget-login-progress .info p {
  margin-bottom: 5px;
  font-weight: 400;
  font-size: 13px;
}
.widget-login-progress .info p:last-child {
  margin: 0px;
}
.widget-login-progress .flex-right {
  display: flex;
  justify-content: flex-end;
}
.widget-login-progress .legend-margins p {
  margin: 0px 5px 0px 5px;
}
.widget-login-progress .legend-margins p:last-child {
  margin: 0px 0px 0px 5px;
}

/* Widget submissions */
.widget-submissions {
  padding: 30px;
  border: 4px solid #f7f7fa;
  margin-bottom: 30px;
}
.widget-submissions .widget-submissions__title h3 {
  font-weight: 300;
  font-size: 16px;
  margin: 0px;
  display: inline-block;
}
.widget-submissions .progress {
  margin-top: 50px;
  background-color: #f7f7fa;
  border: 1px solid #f7f7fa;
  border-radius: 0px;
}
.widget-submissions .progress-bar {
  height: 10px;
  line-height: 10px;
  background: #f4516c;
  margin: 1px;
}
.widget-submissions .progress-bar.filled {
  background: #34bfa3;
}
.widget-submissions .info {
  margin-top: 30px;
}
.widget-submissions .info p {
  margin-bottom: 5px;
  font-weight: 400;
  font-size: 13px;
}
.widget-submissions .info p:last-child {
  margin: 0px;
}

/* Learning streak */
.widget-streak .streak-number {
  font-weight: 400;
  font-size: 60px;
}

/* User rank */
.rank-stars {
  font-size: 30px;
}

.rank-text {
  font-weight: 250;
  font-size: 17px;
}

/* Footer */
.footer {
  width: 100%;
  background: #2b2b2b;
  color: #ffffff;
}
.footer .no-gutters {
  margin-bottom: 0px;
}
.footer .main-footer {
  padding-top: 40px;
  padding-bottom: 40px;
}
.footer .main-footer .footer-brand {
  font-size: 20px;
}
.footer .main-footer img {
  width: 70px;
  margin-right: 3px;
}
.footer .main-footer .footer-links {
  text-align: center;
}
.footer .main-footer .footer-links a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  padding: 2px 0px;
}
.footer .main-footer .contact-footer {
  text-align: right;
}
.footer .sub-footer {
  padding: 20px 0px;
  background: #232323;
}
.footer .sub-footer p {
  color: #ffffff;
  margin: 0px;
  font-size: 13px;
}


/* Login & Signup form */
.login-form {
  max-width: 420px;
  margin: 30px auto;
}
.login-form .card-header .card-title {
  text-align: center;
}
.login-form .form-actions {
  text-align: center;
  margin-top: 30px;
}
.login-form .btn-facebook {
  background: #3b5998;
  color: #ffffff;
  cursor: pointer;
}
.login-form .btn-facebook span,
.login-form .btn-facebook i {
  vertical-align: middle;
}
.login-form .btn-facebook span {
  margin-left: 5px;
  font-weight: 300;
}
.login-form .with-line {
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,.15);
  line-height: 6px;
  margin: 30px 0px;
}
.login-form .with-line span {
  background: #fff;
  padding: 0 10px;
  color: #6d5c5c;
  font-weight: 300;
  font-size: 16px;
}
form input:not([type="checkbox"], [type="radio"], [type="textarea"]) {
  height: 36px;
  line-height: 36px !important;
}

/* Achievements carousel */
#achievements-carousel .carousel-item {
  height: 200px;
}

#achievements-carousel .carousel-indicators li {
  border-radius: 100%;
  width: 9px;
  height: 9px;
  box-shadow: inset 4px 4px 4px 4px #999;
}

#achievements-carousel .carousel-indicators {
  bottom: -20px;
}

/* Notifications */
.alert .alert-heading {
  font-weight: 400;
}
.alert-success {
  color: #35a58e;
  background-color: #e2f6f3;
  border-color: #c3e6cb;
}
.alert-new {
  color: #1f6154;
  background-color: #b1e7df;
  border-color: #a5d9b1;
}
.alert-warning {
  color: #e19f15;
  background-color: #fff5e0;
  border-color: #edd488;
}
.alert-danger {
  color: #f4516c;
  background-color: #fdedf0;
  border-color: #f1b0b7;
}
.alert-primary {
  color: #3f73e5;
  background-color: #dae5ff;
  border-color: #9fcdff;
}

/* Settings panel */
.settings-panel .sidebar {
  max-width: 260px;
  flex: 0 0 260px;
}
.settings-panel {
  font-weight: 400;
}
.settings-panel form .form-actions {
  border-top: 1px solid #ebedf2;
  padding: 15px 30px;
  margin: 30px -30px -25px -30px;
  text-align: right;
}
.settings-panel form select.form-control:not([size]):not([multiple]) {
  height: auto;
}
.settings-panel .table {
  margin: 0px;
}
.settings-panel .table thead {
  background: #6b99ff;
  color: #fff;
}
.settings-panel .table thead th {
  font-weight: 400;
  border: 0px;
}
.settings-panel .table th td,
.settings-panel .table tr td {
  vertical-align: middle;
}
.settings-panel .table.table-hover tbody tr:hover {
  background-color: #f7f7fa;
}
.settings-panel .table a {
  text-decoration: none;
}
.settings-panel .table .btn-light {
  background-color: #e2e6ea;
  border-color: #dae0e5;
  font-size: 17px;
  padding: 0px 8px;
  color: #727272;
}
.settings-panel .table .badge {
  padding: 6px 10px;
  font-weight: 500;
}
.settings-panel .messages-nav {
  margin-bottom: 30px;
}
.settings-panel .note-editor.card {
  margin: 0px;
}
.settings-panel .note-editor.card .card-header {
  padding: 0 0 5px 5px;
  background-color: #e2e6ea;
  border-bottom: 1px solid #e2e6ea;
}
.settings-panel .note-editor.note-frame .note-editing-area .note-editable {
  min-height: 150px;
}
.settings-panel .note-editor .btn-light {
  background-color: #ffffff;
  border-color: #ffffff;
  font-size: 12px;
  color: #333;
}


/* Page content lesson */
.page-content-lesson {
  font-size: 16px;
  color: #212529;
  margin-bottom: 40px;
  padding: 0px 0px 20px 0px;
  border-bottom: 1px solid #e6ebf1;
}

/* Achievements */
.achievement-main-badge {
  margin-top: 10px;
  margin-right: 20px
}

.achievement-badge {
  margin-top: 10px;
  margin-right: 10px
}

/* Comments */
.comments a {
  text-decoration: none;
}
.comments .comments-header::after {
  display: block;
  content: "";
  clear: both
}
.comments .comments-header h5 {
  float: left;
  padding-top: 8px;
  margin-bottom: 0;
  font-weight: 400;
}
.comments>ul {
  margin-top: 40px;
  margin-bottom: 40px;
  list-style: none;
  padding: 0px;
}
.comments .comment.is-admin {
  background: #f5f8ff;
}
.comments>ul>li:last-child .comment {
  border-bottom: 0
}
.comments>ul li .comment {
  width: auto;
  display: table;
  border-bottom: 1px solid #eaeaea;
  padding: 20px 30px;
  margin: 0px -30px;
}
.comments>ul li .comment:hover .comment-action .dropdown {
  display: inline-block !important
}
.comments>ul li .comment>div {
  display: table-cell;
  vertical-align: top
}
.comments>ul li .comment>div.comment-avatar {
  width: 60px;
  position: relative
}
.comments>ul li .comment>div.comment-avatar .badge {
  position: absolute;
  top: 42px;
  right: 0px;
  padding: 0;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 22px;
}
.comments>ul li .comment>div.comment-avatar img {
  border-radius: 50%;
  width: 60px;
}
.comments>ul li .comment>div.comment-post {
  padding-left: 22px;
  font-size: 14px
}
.comments>ul li .comment>div.comment-post .comment-header {
  margin-bottom: 10px;
  display: block
}
.comments>ul li .comment>div.comment-post .comment-header::after {
  display: block;
  content: "";
  clear: both
}
.comments>ul li .comment>div.comment-post .comment-author {
  float: left
}
.comments>ul li .comment>div.comment-post .comment-author h5 {
  display: inline-block;
  font-size: 16px;
  margin-bottom: 0px;
  font-weight: 400;
}
.comments>ul li .comment>div.comment-post .comment-author h5>span {
  padding: 3px 5px;
  margin-left: 5px;
  vertical-align: top;
  font-weight: 400;
}
.comments>ul li .comment>div.comment-post .comment-author>span {
  font-size: 14px;
  display: inline-block;
  margin-right: 10px;
  padding-right: 10px
}
.comments>ul li .comment>div.comment-post .comment-author>span:before {
  color: #9c9c9c;
  content: "\002022";
  margin: 0 5px 0 0;
  display: inline-block
}
.comments>ul li .comment>div.comment-post .comment-action {
  float: right;
  padding-right: 10px
}
.comments>ul li .comment>div.comment-post .comment-action .dropdown {
  display: none
}
.comments>ul li .comment>div.comment-post .comment-action .dropdown .dropdown-menu-right {
  margin-right: -7px
}
.comments>ul li .comment>div.comment-post .comment-action .dropdown>a {
  color: #f4516c;
  text-decoration: none;
}
.comments>ul li .comment>div.comment-post .comment-action .dropdown.show {
  display: inline-block
}
.comments>ul li .comment>div.comment-post .comment-footer {
  display: block
}
.comments>ul li .comment>div.comment-post .comment-footer ul {
  padding: 0
}
.comments>ul li .comment>div.comment-post .comment-footer ul li {
  display: inline-block;
  font-size: 14px
}
.comments>ul li .comment>div.comment-post .comment-footer ul li:after {
  font-size: 12px;
  color: #cccccc;
  content: "\002022";
  margin: 0 5px;
  display: inline-block
}
.comments>ul li .comment>div.comment-post .comment-footer ul li:last-child:after {
  display: none
}
.comments>ul li .comment>div.comment-post>span {
  font-size: 14px
}
.comments>ul li .comment>div.comment-post>span i {
  margin-right: 3px
}
.comments>ul li:first-child .comment {
  padding-top: 0
}
.comments>ul li>ul {
  padding-left: 80px;
  padding-top: 20px;
  list-style: none;
}
.comments form h5 {
  font-weight: 400;
  margin-bottom: 10px;
}

.comment, .comment-post, .comment-edit-area, .comment-edit-box {
  width: 100%;
}
.comment-text {
  white-space: pre-line;
}

i.comments-load-icon {
  font-size: 48px;
  color: #4680ff;
}

/* Module list */

.module-item {
  background-clip: padding-box;
  border: 10px solid transparent;
  display: flex !important;
}

.module-item .card-footer {
  margin-top: auto;
  text-align: center;
}

.story-card {
  box-shadow: none;
  margin-top: 5px;
}
.story-card .card-body {
  padding: 0;
  background: #666;
}
.story-card .card-footer {
  background: #d6d8d9;
  padding: 15px 10px;
  border-top: 1px solid #c6c8ca;
}
.story-card .card-footer .progress {
  height: 12px;
  background: #fff;
  border: 1px solid #c6c8ca;
}
.story-card .card-footer .progress .progress-bar {
  height: 12px;
  background-color: #27aa90;
}

.story-card .story-book {
  overflow: hidden; min-width: 100%; width: 0;
}

.story-card .story-book,
.story-card .slick-list,
.story-card .slick-track {
  height: 800px;
  overflow: hidden;
}
.story-card .slick-track, .slick-list {
  background: #000;
}
.story-card .slick-slide {
  outline: none;
}
.story-card .slick-slide img {
  height: 100%;
  margin: 0 auto;
}
.story-card .story-controls .btn,
.story-card .story-controls .btn:focus,
.story-card .story-controls .btn:active {
  outline: none;
  box-shadow: none;
  cursor: pointer;
}

/* Comment system */
.custom-control-input {
  opacity: 1;
}
ul.timeline-comments {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
li.timeline-comment {
  position: relative;
  margin-bottom: 15px;
  padding: 0px;
  z-index: 9;
}
li.timeline-comment:after {
  content: '';
  width: 1px;
  height: 100%;
  background: #ebedf2;
  position: absolute;
  left: 15px;
  top: 15px;
  z-index: 3;
}
li.timeline-comment:last-child:after {
  display: none;
}
ul.timeline-comments li ul {
  padding-left: 30px;
  margin-top: 15px;
}
ul.timeline-comments li ul li:first-child .timeline-comment-header {
  position: relative;

}
ul.timeline-comments li > ul > li:first-child > .timeline-comment-wrapper > .timeline-comment-header:before {
  content: '';
  width: 15px;
  height: 1px;
  background: #ebedf2;
  position: absolute;
  left: -15px;
  top: 50%;
  z-index: 3;
}
ul.timeline-comments li > ul > li:first-child > .timeline-comment-wrapper > .timeline-comment-header:after {
  content: '';
  width: 1px;
  height: 100%;
  background: #ebedf2;
  position: absolute;
  left: -16px;
  bottom: 50%;
  z-index: 1;
}

.timeline-comment-wrapper {
  background-color: #fff;
  border: 1px solid #ebedf2;
  position: relative;
  box-shadow: 0px 0px 4px 0 rgba(52,40,22,.04);
  z-index: 99;
}
.timeline-comment-header {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  background-color: #f7f7fa;
  border-bottom: 1px solid #ebedf2;
  color: #586069;
  padding: 10px 15px;
  position: relative;
}
.timeline-comment-header .ribbon {
  width: 40px;
  height: 40px;
  overflow: hidden;
  position: absolute;
  top: -5px;
  left: -5px;
}
.timeline-comment-header .ribbon::before,
.timeline-comment-header .ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #2980b9;
  border-top-color: transparent;
  border-left-color: transparent;
}
.timeline-comment-header .ribbon::before {
  top: 0;
  right: 0;
}
.timeline-comment-header .ribbon::after {
  bottom: 0;
  left: 0;
}
.timeline-comment-header .ribbon span {
  position: absolute;
  display: block;
  width: 58px;
  padding: 0px 0;
  background-color: #4680ff;
  box-shadow: 0 5px 10px rgba(0,0,0,.05);
  color: #fff;
  font-size: 8px;
  font-weight: 400;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
  right: -5px;
  top: 10px;
  transform: rotate(-45deg);
  z-index: 9;
}
.timeline-comment-header .timeline-comment-author {
  display: inline-block;
  vertical-align: middle;
}
.timeline-comment-header .timeline-comment-author img {
  width: 26px;
  height: 26px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #ebedf2;
  object-fit: cover;
  vertical-align: middle;
}
.timeline-comment-header .timeline-comment-author h5 {
  margin: 0 0 0 5px;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
}
.timeline-comment-header .comment-action {
  float: right;
  margin: 3px 0px;
  cursor: pointer;
  color: #808080;
  display: none;
}
.timeline-comment-wrapper:hover .timeline-comment-header .comment-action {
  display: inline-block;
}
.timeline-comment-body {
  padding: 15px;
}
.timeline-comment-body p {
  font-size: 14px;
}

.timeline-comment-footer {
  padding: 5px;
  border-top: 1px solid #ebedf2;
}
.timeline-comment-footer .btn {
  cursor: pointer;
}
.timeline-comment-footer .score {
  display: inline-block;
  vertical-align: middle;
  margin: 0px 5px;
  color: #ccc;
}
.timeline-comment-footer .score .score-text {
  display: inline-block;
  margin: 0px 5px;
  color: #575962;
}
.timeline-comment-header .comment-date {
  display: inline-block;
  vertical-align: middle;
  font-size: 11px;
  color: #bbb;
  margin-left: 5px;
}
.timeline-comment-status {
  padding: 5px;
  border-top: 1px solid #ebedf2;
}
.timeline-comment-status .custom-control .custom-control-description {
  margin: 0px;
}
.timeline-comment-status .custom-checkbox {
  margin-bottom: 0px;
}

/* Responsive */
@media screen and (max-width: 1199px) {
  .story-card .story-book,
  .story-card .slick-list,
  .story-card .slick-track {
    height: 600px;
    overflow: hidden;
  }
}
@media screen and (max-width: 991px) {
  .navbar .navbar-nav {
    padding: 20px 0px;
    text-align: center;
  }
  .navbar .profile-nav {
    padding: 20px 0px;
    text-align: center;
  }
  .navbar .profile-nav .profile {
    display: block;
    padding: 10px 0px;
    margin: 0px;
  }
  .navbar .profile-nav .profile .dropdown-menu.dropdown-menu-right {
    left: 0;
  }
  .navbar .profile-nav .profile .dropdown-menu {
    text-align: center;
  }
  .navbar .profile-nav .notifications.notification-alert:before {
    margin-left: -4px;
  }
  .story-card .story-book,
  .story-card .slick-list,
  .story-card .slick-track {
    height: 500px;
    overflow: hidden;
  }
}

@media screen and (max-width: 767px) {
  body {
    margin-bottom: 0px;
  }
  .settings-panel .sidebar {
    max-width: 100%;
  }
  #widget-learn .learn-item .learn-item__header .status .progress {
    width: 70px;
  }
  .comments>ul li .comment>div,
  .comments>ul li .comment>div.comment-post {
    display: block;
    padding-left: 0px;
  }
  .comments>ul li .comment>div.comment-avatar {
    margin-bottom: 10px;
  }
  .comments>ul li>ul {
    padding-left: 40px;
  }
  .footer {
    position: relative;
    bottom: auto;
    height: auto;
  }
  .footer .main-footer {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .footer .main-footer .footer-brand,
  .footer .main-footer .footer-links,
  .footer .main-footer .contact-footer {
    text-align: center;
    padding: 10px 0px;
  }
  .story-card .story-book,
  .story-card .slick-list,
  .story-card .slick-track {
    height: 350px;
    overflow: hidden;
  }

  /* Comments */
  ul.timeline-comments li ul {
    padding-left: 15px;
  }
  li.timeline-comment:after {
    left: 5px;
  }
  ul.timeline-comments li > ul > li:first-child > .timeline-comment-wrapper > .timeline-comment-header:after {
    left: -11px;
  }
  ul.timeline-comments li > ul > li:first-child > .timeline-comment-wrapper > .timeline-comment-header:before {
    width: 10px;
    left: -10px;
  }
}

/* Captcha */
.grecaptcha-badge {
  z-index: 1;
}

/* Change new Bootstrap5 Info button to the old color */
.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info:hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}

.btn-info:focus,
.btn-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-info.disabled,
.btn-info:disabled {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show>.btn-info.dropdown-toggle {
  color: #fff;
  background-color: #0b6e82;
  border-color: #0a6c7a;
}

.btn-info:not(:disabled):not(.disabled):active:focus,
.btn-info:not(:disabled):not(.disabled).active:focus,
.show>.btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

/* Override dropdown button color */
.dropdown-toggle.btn-info {
  background-color: #17a2b8;
  border-color: #17a2b8;
}

/* Embeded youtube videos */
.embed-responsive {
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  max-width: 100%;
}

.embed-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}