:root {
  --font-increase-px: 6px;
  --font-increase-em: 0.375em;
  --font-increase-rem: 0.375rem;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}

a,
span,
i {
  display: inline-block;
}
html body svg.fill-white,
html body .fill-white * {
  fill: white;
}
html body svg.fill-primary,
html body .fill-primary * {
  fill: #78bcb8;
}
html body svg.fill-secondary,
html body .fill-secondary * {
  fill: #1e3b41;
}
body {
  position: relative;
}
body,
html {
  overflow-x: hidden;
  overflow-y: auto;
}
body div.paragraph,
body p {
  font-weight: 300;
}
a,
button,
.pointer {
  cursor: pointer;
}
.linkHover:hover {
  text-decoration: underline !important;
}
.rotate-180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

body.stop-scrolling::-webkit-scrollbar {
  display: none;
}

.sigma-icon-lg {
  width: 91px;
  height: 91px;
}

.rotate-90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.container-sm {
  width: 760px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

section h1,
section h1.section__intro-title {
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  font-size: calc(36px + var(--font-increase-px));
  line-height: calc(48px + var(--font-increase-px));
}

.section-main__text {
  padding-bottom: 10px;
  /* margin-top: 58px; */
}

.section-main__text div.paragraph,
.section-main__text p {
  font-size: calc(13px + var(--font-increase-px));
  line-height: calc(16px + var(--font-increase-px));
}

.main-panels--left > * {
  display: inline-block;
  vertical-align: middle;
}

.section-panel {
  position: relative;
  padding: 30px;
  border-radius: 8px;
  border-top: 1px solid rgba(142, 142, 142, 0.2);
  overflow: hidden;
  margin-bottom: 25px;
}

.section-panel:before,
.section-panel:after {
  content: "";
  position: absolute;
  background-image: -webkit-gradient(
    linear,
    0 0,
    0 100%,
    from(#8e8e8e),
    to(transparent)
  );
  background-image: -webkit-linear-gradient(#8e8e8e, transparent);
  background-image: -moz-linear-gradient(#8e8e8e, transparent);
  background-image: -o-linear-gradient(#8e8e8e, transparent);
  background-image: linear-gradient(#8e8e8e, transparent);
  top: -1px;
  bottom: -1px;
  width: 1px;
  opacity: 0.2;
}

.section-panel:before {
  left: 0px;
}

.section-panel:after {
  right: 0px;
}

.panel-title {
  text-transform: uppercase;
  font-size: calc(12px + var(--font-increase-px));
  line-height: calc(1.125rem + var(--font-increase-rem));
  letter-spacing: 0.05rem;
  color: #77bbb5;
}

.section-panel .panel-title {
  margin-bottom: 0;
}

.section-panel h3.panel-title {
  display: block;
}

.section-panel-active .panel-title {
  color: #ffffff;
}

.section-panel .panel-meta__time {
  font-size: calc(10px + var(--font-increase-px));
  line-height: calc(12px + var(--font-increase-px));
  color: rgba(255, 255, 255, 0.49);
}

.main-panels--right button,
.main-panels--right .btn {
  min-width: 119px;
  text-align: center;
  line-height: 22px;
  overflow: hidden;
}

.main-panels--left div.paragraph,
.main-panels--left p {
  font-size: calc(12px + var(--font-increase-px));
  line-height: calc(16px + var(--font-increase-px));
  -webkit-font-smoothing: antialiased;
}

.oval__container {
  width: 81px;
  height: 81px;
  line-height: 81px;
  padding: 0;
  border-radius: 100%;
  background: #ffffff;
  color: #1e3b41;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.oval__container svg {
  fill: #1e3b41;
}

/* .section-main__text {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
} */

.section-panel .section-panel__btn {
  text-align: right;
}

.section-panel__btn .btn {
  min-width: 119px;
  min-height: 35px;
  line-height: calc(35px + var(--font-increase-px));
  white-space: normal;
  margin-left: auto;
}

.section-intro__btn .btn {
  font-size: calc(12px + var(--font-increase-px));
  padding-top: 0;
  padding-bottom: 0;
}

.section-panel__btn > * + * {
  margin-top: 6px;
}

.section-panel__score {
  position: relative;
}

.section-panel__btn .btn-score {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.section-panel__btn-text {
  font-size: calc(8px + var(--font-increase-px));
  line-height: calc(11px + var(--font-increase-px));
  min-width: 0%;
  max-width: 50%;
  text-align: left;
}

.section-panel__btn-result {
  font-size: calc(18px + var(--font-increase-px));
  line-height: calc(24px + var(--font-increase-px));
  min-width: 50%;
  flex: 1;
}

.section-panel__toggle-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: #8a999c;
  border-color: #8a999c;
  padding: 0;
  width: 42px;
  height: 26px;
  line-height: 0px;
  text-align: center;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 0;
}
.section-panel__toggle-btn:hover {
  background: #8a999c;
  border-color: #8a999c;
}
.section-panel__toggle-btn:not(:disabled):not(.disabled):active,
.section-panel__toggle-btn:not(:disabled):not(.disabled).active,
.show > .dropdown-toggle.section-panel__toggle-btn {
  background: #8a999c;
  border-color: #8a999c;
}

.section-panel__collapse {
  margin-top: 15px;
  width: 100%;
}

.section-panel__toggle-btn.collapsed {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  background: #8a999c;
  border-color: #8a999c;
}

.progress-meter {
  position: relative;
  z-index: 1;
}

.progress-meter .progress-meter__track {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
  left: 0;
  z-index: 0;
}

.section-panel__list.disabled {
  opacity: 0.5;
  cursor: default !important;
}

.section-panel__list:last-child {
  margin-bottom: 0;
}

.section-panel__list div.paragraph,
.section-panel__list p {
  margin: 0;
  font-weight: normal;
}

.section-panel__list-score > :first-child {
  font-size: calc(8px + var(--font-increase-px));
  line-height: calc(11px + var(--font-increase-px));
}

.section-panel__list .progress-meter .progress-meter__track {
  border-radius: 6px;
}

.section-panel__list .section-panel__list-score > * {
  vertical-align: middle;
}

.popover {
  background-color: #5f5f5f;
  max-width: 156px;
  padding: 0px 15px 3px;
  text-align: center;
}
.popover,
.popover-body {
  border-radius: 6px;
}
.popover-body {
  overflow: hidden;
  font-size: calc(12px + var(--font-increase-px));
  line-height: calc(14px + var(--font-increase-px));
}
.noCourse .row {
  min-height: calc(100vh - 105px);
  align-items: center;
}
.noCourse div.paragraph:before,
.noCourse div.paragraph::after,
.noCourse p:before,
.noCourse p::after {
  display: inline-block;
  padding: 0 5px;
}
.noCourse div.paragraph:before,
.noCourse p:before {
  content: "❝";
}
.noCourse div.paragraph:after,
.noCourse p:after {
  content: "❞";
}

.no-course-text {
  font-size: 18px;
}

.display-none {
  display: none !important;
}

.display-block {
  display: block !important;
}

@media only screen and (max-width: 991px) {
  .oval__container {
    width: 61px;
    height: 61px;
    line-height: 61px;
  }
}

#end_content_canvas {
  position: fixed;
  z-index: -1;
  height: 100%;
  width: 100%;
  top: 50px;
  bottom: 50px;
}

.navbar-brand img {
  min-width: 84.4px;
  height: 20px;
}

.navbar-dropdown-item {
  padding: 4px 20px;
  cursor: pointer;
}

.navbar-dropdown-item:hover {
  background-color: #525252;
  font-size: calc(12px + var(--font-increase-px));
}

.user-icon {
  background-color: #7a7a7a;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: calc(24px + var(--font-increase-px));
  margin-bottom: -2px;
}

blockquote {
  background-color: #172d31;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  margin: 25px 0px;
  padding: 20px 30px;
}
blockquote div.paragraph,
blockquote p {
  margin-bottom: 0px;
}
blockquote h1,
blockquote h2,
blockquote h3,
blockquote h4,
blockquote h5 {
  color: #86b2b1;
}
blockquote h5 {
  font-size: calc(16px + var(--font-increase-px));
  font-weight: bold;
}

.course-home
  .section-panel__score
  .d-flex.justify-content-between.align-items-center {
  cursor: pointer;
}

button:disabled,
button[disabled] {
  cursor: default !important;
}

.rteright {
  text-align: right;
}

.rtecenter {
  text-align: center;
}

.rtejustify {
  text-align: justify;
}

.user-feedback {
  max-width: 400px;
  width: 100%;
  vertical-align: top;
}
.user-feedback textarea {
  width: 100%;
  background-color: #122528;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.27);
}

span.tooltiip {
  bottom: 75px;
  width: 150px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  z-index: 99999;
  margin-left: -20px;
  opacity: 0;
  font-size: calc(12px + var(--font-increase-px));
  transition: opacity 0.3s;
  display: inline-block;
  opacity: 1;
  position: absolute;
}
span.tooltiip:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

span.tooltiip.tooltip-trans-my-credits {
  bottom: 40px;
  left: 50px;
}

.dropdown-item.trans-my-credits {
  white-space: normal;
}

.dropdown-item.trans-my-credits .disabled {
  color: #d3d3d3;
}

div.section-panel.chapter-section-panel {
  overflow: hidden;
}

.section-home .section-panel {
  overflow: visible;
}

.section-main__text .badge {
  background: rgba(255, 255, 255, 0.228);
  width: 16.13px;
  height: 16.13px;
  border-radius: 100%;
  margin-left: 11px;
  margin-right: 11px;
}

.tltip {
  position: relative;
  display: inline-block;
}

.tltip .tltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #fff;
  color: #0e1d21;
  text-align: center;
  border-radius: 6px;
  padding: 10px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tltip:hover .tltiptext {
  visibility: visible;
}

.tooltip > .tooltip-inner {
  background-color: #555;
  color: #fff;
  font-size: calc(12px + var(--font-increase-px));
  border-radius: 6px;
  padding: 5px 5px 5px 5px;
  transition: opacity 0.3s;
  opacity: 1;
}

/*Chatbox css*/
a,
span,
i {
  display: inline-block;
}
html body svg.fill-white,
html body .fill-white * {
  fill: white;
}
html body svg.fill-primary,
html body .fill-primary * {
  fill: #78bcb8;
}
.rotate-180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.container-sm {
  width: 760px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
section h1 {
  font-size: calc(36px + var(--font-increase-px));
  line-height: calc(48px + var(--font-increase-px));
  margin-top: 58px;
}
.section-main__text div.paragraph,
.section-main__text p {
  font-size: calc(13px + var(--font-increase-px));
  line-height: calc(16px + var(--font-increase-px));
}
.main-panels--left > * {
  display: inline-block;
  vertical-align: middle;
}
.section-panel {
  position: relative;
  padding: 30px;
  border-radius: 6px;
  border-top: 1px solid rgba(142, 142, 142, 0.2);
  overflow: hidden;
  margin-bottom: 25px;
}
.section-panel:before,
.section-panel:after {
  content: "";
  position: absolute;
  background-image: -webkit-gradient(
    linear,
    0 0,
    0 100%,
    from(#8e8e8e),
    to(transparent)
  );
  background-image: -webkit-linear-gradient(#8e8e8e, transparent);
  background-image: -moz-linear-gradient(#8e8e8e, transparent);
  background-image: -o-linear-gradient(#8e8e8e, transparent);
  background-image: linear-gradient(#8e8e8e, transparent);
  top: -1px;
  bottom: -1px;
  width: 1px;
  opacity: 0.2;
}
.section-panel:before {
  left: 0px;
}
.section-panel:after {
  right: 0px;
}

.section-panel .badge {
  background: rgba(255, 255, 255, 0.228);
  width: 20.13px;
  height: 20.13px;
  border-radius: 100%;
  margin-left: 11px;
  margin-right: 11px;
}
.section-panel-active .panel-title {
  color: #ffffff;
}
.section-panel .panel-meta__time {
  font-size: calc(10px + var(--font-increase-px));
  line-height: calc(12px + var(--font-increase-px));
  color: rgba(255, 255, 255, 0.49);
}
.main-panels--right button,
.main-panels--right .btn {
  min-width: 119px;
  text-align: center;
  line-height: 22px;
}

.quizListTitlesColumnWidth {
  min-width: 70%;
}

/*****Chatting***/
footer #footer_ul a {
  border: 1px solid transparent;
}
/* start feedback popup */
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  background-color: #000000;
}

.feeling {
  background-color: #202729;
  border-radius: 7px;
  padding: 22px 30px;
}
.feeling .feeling-txt {
  font-size: calc(14px + var(--font-increase-px));
  line-height: calc(17px + var(--font-increase-px));
  color: #ffffff;
  margin-right: 107px;
}
.custom-control-inline {
  padding: 0;
  margin-right: 0;
}
.custom-control-label::after,
.custom-control-label::before {
  content: none;
}
.custom-radio .custom-control-label {
  border: 4px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label {
  border-color: #ffffff;
}

.keyboard {
  margin-top: 15px;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.keyboard .do-icon-submit {
  width: 20px;
  height: 19px;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-color: #899496;
  -webkit-mask: url(../images/icons/icon-submit.svg) no-repeat 1px 0;
  mask: url(../images/icons/icon-submit.svg) no-repeat 1px 0;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.keyboard .submit-btn.btn-primary {
  background-color: #3b4d51;
  border: 0;
  border-radius: 50%;
  padding: 10px 13px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.keyboard .submit-btn.btn-primary:hover,
.keyboard .submit-btn.btn-primary:focus {
  color: #fff;
  background-color: #56aba6;
  border-color: #51a39e;
}
.keyboard .submit-btn.btn-primary:hover .do-icon-submit,
.keyboard .submit-btn.btn-primary:focus .do-icon-submit {
  background-color: #ffffff;
}
/* end feedback popup */

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .dropdown-toggle.btn-primary {
  background-color: transparent;
  border-color: transparent;
}

#feedback_icon {
  cursor: pointer;
  position: fixed;
  bottom: 0px;
  right: 12px;
  width: 42px;
  height: 42px;
  z-index: 9999;
  animation: load_up 1s forwards;
  -webkit-animation: load_up 1s forwards;
}

@keyframes load_up {
  from {
    bottom: -100px;
  }
  to {
    bottom: 12px;
  }
}

@-webkit-keyframes load_up {
  from {
    bottom: -100px;
  }
  to {
    bottom: 12px;
  }
}

.active-learning-button {
  position: relative;
  display: flex;
  float: right;
  margin: 20px 0 0;
}

.active-learning-button-link {
  cursor: pointer;
}

.active-learning-button-link:hover {
  text-decoration: underline;
}

.active-learning-button-link .icon-angle-arrow {
  height: 4px;
  width: 8px;
}

.active-learning-button-link svg {
  fill: #ffffff;
}
/**  END SCROLLBAR STYLE*/

/* end tutor-chat poup */
/* end css for popup */
/**Update the primary and secondary Buttons**/
.btn-primary {
  color: #161618;
  background-color: #5fc4b8;
  border: 3px solid #5fc4b8;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
}
.btn-primary:not(:disabled):hover {
  background: #b8fff7 !important;
  border-color: #b8fff7 !important;
}
.btn-primary:active {
  background: #b8fff7;
  border-color: #b8fff7;
  opacity: 30%;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .dropdown-toggle.btn-primary {
  color: #161618;
  background: #b8fff7;
  border-color: #b8fff7;
  opacity: 30%;
}
.disabled.btn-primary,
.btn-primary:disabled {
  color: #161618;
  background-color: #5fc4b8;
  border-color: #5fc4b8;
  opacity: 30%;
}

.btn-secondary {
  color: #5fc4b8;
  background-color: rgba(255, 255, 255, 0);
  border: #5fc4b8 1px solid;
  border-radius: 5px;
  font-size: 14px;
  font-style: normal;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
}

.btn-secondary:hover {
  color: #b8fff7;
  background-color: rgba(255, 255, 255, 0);
  border-color: #b8fff7;
}

.btn-secondary.disabled,
.btn-secondary:disabled {
  opacity: 30%;
  background-color: rgba(255, 255, 255, 0);
  color: #5fc4b8;
  background-color: transparent;
  border-color: #5fc4b8;
}

.btn-secondary:active {
  opacity: 30%;
  background-color: rgba(255, 255, 255, 0);
  color: #b8fff7;
  border-color: #b8fff7;
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  opacity: 30%;
  background-color: rgba(255, 255, 255, 0);
  color: #b8fff7;
  border-color: #b8fff7;
}
.btn-primary:focus,
.btn-primary:focus-visible {
  background-color: #b8fff7 !important;
  border: 1px solid white !important;
  outline: none !important;
  box-shadow: none !important;
}
.btn-secondary:focus-visible,
.btn-secondary:focus {
  color: #b8fff7 !important;
  border: 1px solid white !important;
  outline: none !important;
  box-shadow: none !important;
}
/**Update the primary and secondary Buttons END**/
@media only screen and (max-width: 768px) {
  .active-learning table {
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}