@font-face {
  font-family: robotobold;
  src: url(../fonts/roboto-bold-webfont.woff2) format("woff2"),
    url(../fonts/roboto-bold-webfont.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: robotomedium;
  src: url(../fonts/roboto-medium-webfont.woff2) format("woff2"),
    url(../fonts/roboto-medium-webfont.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: robotoregular;
  src: url(../fonts/roboto-regular-webfont.woff2) format("woff2"),
    url(../fonts/roboto-regular-webfont.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: robotoregular;
}

ul li {
  list-style: none;
}

.slimScrollBar {
  width: 7px !important;
  background-color: #7d8FAB !important;
   border: radius 1px !important;
}

.toggle-main-menu {
  border: 0;
  background: 0 0;
  margin-left: 15px;
  padding: 0 2px;
}

.toggle-main-menu i {
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
}

.toggle-main-menu:focus,
.toggle-main-menu:hover {
  outline: 0;
}

.sidebar .nav-link span {
  display: block;
}

.sidebar .nav-link span.hide-menu-label {
  display: none;
}

.menu-width-50 {
  width: 50px !important;
}

.main-margin-left-50 {
  margin-left: 50px !important;
}

.sidebar.menu-width-50 .nav-link.active::before {
  margin-top: 4px;
}

html:not([dir="rtl"]) .sidebar {
  margin-left: 0;
}

.back-to-tiles {
  font-size: 18px;
  cursor: pointer;
}

.left-sidebar {
  display: block;
}

.profile-phone {
  padding: 0 15px;
}

.profile-main-info {
  flex: 0 0 28.333%;
  max-width: 28.333%;
}

.margin-bottom-5 {
  margin-bottom: 5px;
}

.gender-info {
  width: 30%;
}

.date-info {
  width: 17%;
}

.grade-info {
  width: 12%;
}

.school-name {
  width: 48%;
}

.social-area {
  width: 20%;
}

.block-inline {
  display: inline-block;
}

.profile-name-info {
  flex: 0 0 27.333%;
  max-width: 27.333%;
}

.profile-address-info {
  flex: 0 0 28.333%;
  max-width: 28.333%;
}

.profile-other-info {
  flex: 0 0 43.333%;
  max-width: 43.333%;
}

.mobile-edit {
  display: none;
}

.desktop-edit {
  display: block;
}

.profile-top-bar {
  background: #202b3d;
  color: #fff;
  font-size: 13px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  word-wrap: break-word;
  position: relative;
}

.profile-picture {
  position: relative;
  width: 130px;
  height: 140px;
}

.btn-change-profile-pic {
  position: absolute;
  bottom: 10px;
  right: -8px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 16px;
  padding: 0;
}

.info-profile {
  margin-left: 7%;
  width: 51%;
  position: relative;
  height: 100%;
}

.common-display-tab .display-table {
  text-align: left;
}

.info-profile .name-profile {
  font-size: 16px;
  color: #fff;
  font-family: "robotobold";
}

.info-profile .code-profile {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

.profile-phone {
  padding: 0 15px;
}

.profile-icons i {
  font-size: 18px;
  margin-right: 5px;
  width: 18px;
  text-align: center;
  position: relative;
  top: 2px;
  color: #1e95f3;
}

.email-id i {
  font-size: 13px;
  top: 0;
}

.personal-info {
  padding: 0 5px;
}

.personal-info .label-value-profile {
  font-family: "robotobold";
}

.personal-info .edit-profile {
  text-align: right;
  padding-right: 10px;
}

.personal-info .edit-profile:hover {
  opacity: 0.7;
  cursor: pointer;
}

.personal-info .social-links a {
  font-size: 18px;
  margin: 0 5px;
  color: #1e95f3;
}

.personal-info .social-links a:hover {
  color: #3fb6ff;
}

.personal-info .social-links a:last-child {
  margin-right: 0;
}

.padding-bottom-5 {
  padding-bottom: 5px;
}

.mobile-panel-show {
  display: none;
}

.left-sidebar .grid-box-bottom {
  padding: 10px 15px 10px;
  cursor: pointer;
}

.left-sidebar .grid-box .grid-box-bottom .chapter-name {
  margin-top: 0;
}

.left-sidebar {
  width: 24.5%;
  position: fixed;
  top: 63px;
  left: -17.9%;
  height: 95%;
  transition: 0.35s;
  box-shadow: 5px 0 5px -5px #7d7d7d;
  z-index: 9;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 0 !important;
}

.height-help-sidebar {
  padding: 0 20px;
}

.main-full-width {
  width: 100%;
}

.tile-help.course-tile-top .course-image {
  border-radius: 5px;
}

.tile-help.course-tile-top .black-layer {
  border-radius: 5px;
}

.tile-help.course-tile-top .course-row {
  position: relative;
  top: 0;
}

.tile-help.course-tile-top .course-row .course-name {
  margin-top: 0;
  line-height: unset;
}

.separator-line {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.3);
  margin: 20px auto 15px;
}

.video-container video {
  width: 100%;
  height: 450px;
}

.document-container {
  text-align: center;
}

.left-sidebar .grid-box .grid-box-bottom .chapter-name span {
  margin-left: 10px;
  position: relative;
  top: 3px;
}

.help-panel {
  display: none;
}

.padding-top-5 {
  padding-top: 5px;
}

.single-tile-selection-container {
  padding: 20px;
}

.help-tiles {
  padding: 0 !important;
}

.height-help-main-box {
  padding: 20px 20px 0 !important;
}

.tile-help {
  cursor: pointer;
}

.tile-help:hover {
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  transition: 0.35s ease-in;
}

.tile-help.course-tile-top .course-image {
  width: 100%;
  border-radius: 5px;
  height: 125px;
}

.fixed-contact-container-bottom {
  position: fixed;
  bottom: -55px;
  left: 0;
  width: 240px;
  height: 55px;
  right: 0;
  margin: auto;
  background: #ff715b;
  z-index: 9999;
  transition: 0.35s ease-in;
}

.bottom-0-main {
  bottom: 0 !important;
  transition: 0.35s ease-in;
}

.fixed-contact-bottom {
  position: absolute;
  width: 65px;
  height: 50px;
  bottom: 55px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 22px;
  background: #257cc2;
  padding: 7px 10px 12px;
  text-align: center;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  cursor: pointer;
  transition: 50ms ease-in;
}

.sub-collapse {
  display: none;
  position: absolute;
  bottom: 65px;
  top: -530% !important;
  background: #ff715b;
  right: -10px;
}

.sub-collapse::after {
  content: "";
  position: relative;
  top: 7px;
  bottom: 0;
  width: 0;
  left: auto;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #ff8c00 transparent transparent transparent;
  margin: auto 25px;
}

.sub-collapse li a {
  padding: 14px 25px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.common-profile-content-padding {
  padding-top: 10px !important;
}

.desktop-other-info {
  display: block;
}

.tab-other-info,
.tab-social {
  display: none;
}

.social-links {
  margin-top: 15px;
}

.bottom-add-strip {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  padding-left: 140px;
}

.add-list {
  padding: 0;
  margin: 0;
}

.add-list li {
  list-style: none;
  float: left;
  margin-right: 10px;
  color: #fff;
  font-size: 14px;
}

.add-list,
.add-list-btn {
  padding: 10px 0;
}

.add-list-btn {
  font-size: 14px;
  margin: 0 5px;
  color: #1e95f3;
}

.profile-picture img {
  width: 100%;
  height: 100%;
}

.drop-collapse:hover .sub-collapse {
  display: block;
}

.fixed-contact-bottom img {
  width: 18px;
}

.fixed-contact-bottom:hover {
  height: 55px;
  background: #1e639b;
  transition: 0.35s ease-in;
  -webkit-box-shadow: 0 0 4px 2px rgba(55, 66, 84, 1);
  -moz-box-shadow: 0 0 4px 2px rgba(55, 66, 84, 1);
  box-shadow: 0 0 4px 2px rgba(55, 66, 84, 0.7);
}

.menu-absolute-bottom ul {
  padding: 0;
  margin: 0;
}

.menu-absolute-bottom ul li {
  float: left;
}

.menu-absolute-bottom ul li:hover {
  background: #ff715b;
  transition: 0.35s ease-in;
}

.menu-absolute-bottom ul li a {
  font-size: 18px;
  color: #fff;
  display: block;
  padding: 14px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}

.menu-absolute-bottom ul li a img {
  width: 18px;
}

.menu-absolute-bottom ul li a i {
  font-size: 18px;
}

.menu-absolute-bottom ul li:last-child a {
  border-right: 0 solid rgba(255, 255, 255, 0.2);
}

.menu-absolute-bottom ul li a:hover .contact-name-bottom {
  display: block;
}

ul.sub-collapse li a:hover .contact-name {
  display: block;
}

.contact-name-bottom {
  display: none;
  position: absolute;
  bottom: 60px;
  left: -56px;
  right: 0;
  width: 170px;
  background: rgba(0, 0, 0, 0.9);
  padding: 5px 15px;
  border-radius: 5px;
  font-size: 13px;
  text-align: center;
  color: #fff;
}

.contact-name-bottom:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
}

.drop-collapse {
  position: relative;
}

.sub-collapse {
  display: none;
  position: absolute;
  bottom: 65px;
  top: -530% !important;
  background: #ff715b;
}

.sub-collapse::after {
  content: "";
  position: relative;
  top: 7px;
  bottom: 0;
  width: 0;
  left: auto;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #ff715b transparent transparent transparent;
  margin: auto 25px;
}

.drop-collapse:hover .sub-collapse {
  display: block;
}

.drop-collapse:active .sub-collapse {
  display: block;
}

.fixed-contact-container .slimScrollBar {
  width: 4px !important;
}

.fixed-contact {
  position: absolute;
  top: -50px;
  right: 0;
  width: 60px;
  height: 50px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  background: #257cc2;
  font-size: 22px;
  text-align: center;
  padding-top: 5px;
  cursor: pointer;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: 10ms ease-in;
}

.fixed-contact:hover {
  height: 55px;
  top: -55px;
  transition: 10ms ease-in;
}

.fixed-contact img {
  width: 18px;
}

.fixed-contact:hover {
  background: #1e639b;
  transition: 0.35s ease-in;
  -webkit-box-shadow: 0 0 4px 2px rgba(55, 66, 84, 1);
  -moz-box-shadow: 0 0 4px 2px rgba(55, 66, 84, 1);
  box-shadow: 0 0 4px 2px rgba(55, 66, 84, 0.7);
}

.menu-absolute {
  position: relative;
  width: 300px !important;
}

.menu-absolute:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.fixed-contact-container {
  position: fixed;
  bottom: -209px;
  left: -150px;
  right: 0;
  margin: auto;
  width: 300px;
  height: auto;
  z-index: 99999;
  transition: 0.35s ease-in;
}

.bottom-0-panel {
  bottom: 0;
  transition: 0.35s ease-in;
}

.fixed-contact-container ul {
  padding: 0;
  margin: 0;
  width: 60px;
  position: absolute;
  right: 0;
  background: #ff8c00;
}

.fixed-contact-container ul li a {
  font-size: 14px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 15px 15px;
  display: block;
  position: relative;
  text-align: center;
}

.fixed-contact-container ul li a img {
  width: 18px;
}

.contact-name {
  display: none;
  position: absolute;
  top: 9px;
  right: 109%;
  width: 170px;
  background: rgba(0, 0, 0, 0.9);
  padding: 5px 15px;
  border-radius: 5px;
  font-size: 13px;
  color: #fff;
}

.contact-name:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.9);
}

.fixed-contact-container ul li a:hover .contact-name {
  display: block;
}

.fixed-contact-container ul li:hover {
  background: #f17e00;
  cursor: pointer;
}

.fixed-contact-container ul li:last-child {
  border-bottom: 0 solid #c8ced3;
}

.fixed-contact-container ul li i {
  font-size: 18px;
}

.fixed-contact-container ul li .contact-type {
  line-height: 17px;
}

.profile-main-info {
  flex: 0 0 28.333%;
  max-width: 28.333%;
}

.margin-bottom-5 {
  margin-bottom: 5px;
}

/* .gender-info {
width: 12%
} */

/* .date-info {
width: 17%
}

.grade-info {
width: 12%
} */

/* .school-name {
width: 39%
} */

/*
.social-area {
width: 20%
} */

.block-inline {
  display: inline-block;
}

.profile-name-info {
  flex: 0 0 27.333%;
  max-width: 27.333%;
}

.profile-address-info {
  flex: 0 0 28.333%;
  max-width: 28.333%;
}

.profile-other-info {
  flex: 0 0 43.333%;
  max-width: 43.333%;
}

.mobile-edit {
  display: none;
}

.desktop-edit {
  display: block;
}

.profile-top-bar {
  background: #202b3d;
  color: #fff;
  font-size: 13px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  word-wrap: break-word;
}

/* .profile-picture {
position: relative;
width: 100px;
height: 100px
} */

.btn-change-profile-pic {
  position: absolute;
  bottom: 10px;
  right: -8px;
  border: 0;
  background: 0 0;
  color: #fff;
  font-size: 16px;
  padding: 0;
}

/* .info-profile {
margin-left: 7%;
width: 60%;
position: relative;
height: 100%
} */

.common-display-tab .display-table {
  text-align: left;
}

.info-profile .name-profile {
  font-size: 16px;
  color: #fff;
  font-family: robotobold;
}

.info-profile .code-profile {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

.profile-phone {
  padding: 0 15px;
}

.profile-icons i {
  font-size: 18px;
  margin-right: 5px;
  width: 18px;
  text-align: center;
  position: relative;
  top: 2px;
  color: #1e95f3;
}

.email-id i {
  font-size: 13px;
  top: 0;
}

.personal-info {
  padding: 0 5px;
}

.personal-info .label-value-profile {
  font-family: robotobold;
}

.personal-info .edit-profile {
  text-align: right;
  padding-right: 10px;
}

.personal-info .edit-profile:hover {
  opacity: 0.7;
  cursor: pointer;
}

.personal-info .social-links a {
  font-size: 18px;
  margin: 0 5px;
  color: #1e95f3;
}

.personal-info .social-links a:hover {
  color: #3fb6ff;
}

.personal-info .social-links a:last-child {
  margin-right: 0;
}

.padding-bottom-5 {
  padding-bottom: 5px;
}

.all-timeline .task-timeline a {
  color: #257cc2;
  text-decoration: none;
}

.all-timeline .task-timeline a:hover {
  color: #01589e;
  cursor: pointer;
}

.count-tiles .c-title {
  padding-bottom: 0;
}

.count-tiles .text-value {
  font-size: 25px;
  line-height: 25px;
}

.ui-widget.ui-widget-content {
  z-index: 999 !important;
}

.top-filter-timeline {
  background: #ddd;
  padding: 15px;
}

.margin-bottom-m-20 {
  margin-bottom: -20px;
}

.top-filter-timeline label {
  float: left;
  width: 25%;
  padding-top: 5px;
}

.top-filter-timeline input {
  float: left;
  width: 75%;
}

.ui-datepicker-trigger {
  border: 0;
  background: 0 0;
}

.ui-datepicker-trigger i {
  position: absolute;
  right: 28px;
  top: 10px;
  color: #259ae7;
  font-size: 14px;
}

.journey-content {
  position: relative;
  top: -3px;
  background: #e6e6e6;
  padding: 12px 15px;
  border-radius: 5px;
}

.journey-content .task-timeline {
  color: #000;
}

.journey-content .task-time {
  color: #5b5b5b;
  font-size: 12px;
}

.journey-content.left,
.journey-content.right {
  position: relative;
}

.journey-content.left::before {
  content: "";
  position: absolute;
  top: 10px;
  right: -15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #e6e6e6;
}

.journey-content.right::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent #e6e6e6 transparent transparent;
}

.all-timeline {
  padding: 20px;
}

.bottom-border-radius-5 {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.s-timeline {
  padding-bottom: 60px;
  position: relative;
}

.circle-activity {
  width: 35px;
  height: 35px;
  border-radius: 100%;
  display: block;
  padding-top: 7px;
  position: relative;
  z-index: 99;
  margin: auto;
  text-align: center;
}

.circle-activity i {
  color: #fff;
  font-size: 17px;
}

.watch-time {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 3px;
  margin-top: 1px;
}

.s-timeline::after {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  content: "";
  margin: auto;
  left: 0;
  right: 0;
}

.s-timeline-yellow::after {
  background: #faa21b;
}

.bg-dark-gray {
  background: #bdcada;
}

.s-timeline-gray::after {
  background: #bdcada;
}

.bg-dark-green {
  background: #00841c;
}

.bg-dark-yellow {
  background: #faa21b;
}

.bg-dark-violet {
  background: #cf66cd;
}

.s-timeline-violet::after {
  background: #cf66cd;
}

.bg-course {
  background: #4dbd74;
}

.s-timeline-course::after {
  background: #4dbd74;
}

.bg-lesson {
  background: #989898;
}

.s-timeline-lesson::after {
  background: #989898;
}

.bg-assesment {
  background: #20a8d8;
}

.s-timeline-assesment::after {
  background: #20a8d8;
}

.bg-quiz {
  background: #f86c6b;
}

.s-timeline-quiz::after {
  background: #f86c6b;
}

#card-22 .front .chart-attendance,
.bubble-all-chart .chart-attendance {
  width: 75%;
}

.height-700 {
  height: 700px;
}

.chart-attendance img {
  width: 100%;
}

.layout-btns {
  display: none;
}

.title-course span {
  font-family: robotobold;
}

.title-course {
  font-size: 16px;
  padding-top: 7px;
}

.grid-title {
  padding: 15px;
  background: #333;
  color: #fff;
  font-size: 16px;
}

.padding-top-10 {
  padding-top: 10px;
}

.padding-left-20 {
  padding-left: 20px;
}

.padding-right-20 {
  padding-right: 20px;
}

.margin-top-0 {
  margin-top: 0 !important;
}

.bg-accepted {
  background: #4dbd74;
}

.bg-inprogress {
  background: #20a8d8;
}

.bg-rejected {
  background: #f86c6b;
}

.bg-pending {
  background: #989898;
}

.title-demographic {
  font-size: 20px;
  text-align: center;
  padding-bottom: 15px;
  font-family: robotobold;
}

.btn-secondary-next {
  background-color: #fff;
  border-color: #2095f2;
  padding: 8px 20px 8px 20px;
  color: #26344b;
  font-family: robotobold;
  font-size: 13px;
}

.btn-secondary-next:hover {
  color: #00061d;
  border-color: #006dca;
}

.btn-primary-next {
  background-color: #2095f2;
  border-color: #2095f2;
  padding: 8px 20px 8px 20px;
  color: #fff;
  font-size: 13px;
  font-family: robotobold;
}

.btn-primary-next:hover {
  background-color: #006dca;
  border-color: #006dca;
}

.sw-btn-group-extra .btn-primary-next,
.sw-btn-next,
.sw-btn-prev {
  position: relative;
}

.sw-btn-group-extra .btn-primary-next:after {
  content: "\f00c";
  position: absolute;
  font-family: FontAwesome;
  color: #fff;
  font-size: 12px;
  margin-left: 10px;
}

.sw-theme-arrows > ul.step-anchor > li.done > a .hover-icon,
.sw-theme-arrows > ul.step-anchor > li > a .hover-icon {
  display: none;
}

.sw-theme-arrows > ul.step-anchor > li.done > a .normal-icon,
.sw-theme-arrows > ul.step-anchor > li > a .normal-icon {
  display: inline-block;
}

.sw-theme-arrows > ul.step-anchor > li.active > a .hover-icon,
.sw-theme-arrows > ul.step-anchor > li.done > a .hover-icon {
  display: inline-block;
}

.sw-theme-arrows > ul.step-anchor > li.active > a .normal-icon,
.sw-theme-arrows > ul.step-anchor > li.done > a .normal-icon {
  display: none;
}

.sw-btn-group-extra {
  display: none;
}

.step-no {
  font-size: 15px;
  font-family: robotomedium;
}

.step-name {
  font-size: 14px;
  font-family: robotobold;
  font-weight: 400;
}

.step-name img {
  position: relative;
  bottom: 2px;
  margin-right: 5px;
}

.step-content .form-control {
  height: 40px;
  width: 100%;
  padding: 8px 15px;
  font-size: 14px;
  line-height: 1.5;
  color: #26344b;
  background-color: #f8f9fb;
  border: 1px solid #cfd0d7;
}

.step-content select.form-control:not([size]):not([multiple]) {
  height: 40px;
}

.height-150 {
  height: 150px !important;
}

.height-100 {
  height: 100px !important;
}

.height-120 {
  height: 120px !important;
}

.question {
  color: #ced0d3;
  margin-right: 5px;
}

.question .que {
  font-size: 30px;
}

.question .que {
  font-size: 20px;
}

.sw-theme-arrows > ul.step-anchor > li.active > a {
  border-color: #1e639c !important;
  color: #fff !important;
  background: #1e639c !important;
}

.sw-theme-arrows > ul.step-anchor > li.nav-item.active > a::after {
  border-left: 30px solid #2095f2 !important;
}

.sw-theme-arrows > ul.step-anchor > li.nav-item.done > a {
  border-color: #4dbd74 !important;
  color: #fff !important;
  background: #4dbd74 !important;
}

.sw-theme-arrows > ul.step-anchor > li {
  width: 32%;
}

.sw-theme-arrows > ul.step-anchor > li:first-child > a,
.sw-theme-arrows > ul.step-anchor > li:first-child > a:hover {
  padding-left: 20px !important;
}

.sw-theme-arrows > ul.step-anchor > li > a:hover::after {
  border-left-color: #e7eaf1;
}

.sw-theme-arrows > ul.step-anchor > li.nav-item.done > a::after {
  border-left: 30px solid #4dbd74;
}

.sw-theme-arrows > ul.step-anchor > li > a,
.sw-theme-arrows > ul.step-anchor > li > a:hover {
  color: #bbb;
  text-decoration: none;
  padding: 15px 0 15px 45px !important;
}

.sw-theme-arrows > ul.step-anchor {
  border: 0 !important;
  border-bottom: 0 solid #ddd !important;
  padding: 0 20px !important;
  background: #fff !important;
  position: relative !important;
}

.sw-container.tab-content:after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  background: #d9dfed;
}

.sw-container.tab-content {
  border-top: 0 solid #ccc;
}

.sw-main .sw-container {
  margin-top: 25px !important;
  padding-top: 15px !important;
  padding-bottom: 70px !important;
}

.sw-theme-arrows {
  border: 0 solid #ddd !important;
}

.sw-theme-arrows > ul.step-anchor > li > a,
.sw-theme-arrows > ul.step-anchor > li > a:hover {
  color: #26344b;
}

.sw-theme-arrows > ul.step-anchor > li > a,
.sw-theme-arrows > ul.step-anchor > li > a:hover {
  background: #e7eaf1;
}

.sw-theme-arrows > ul.step-anchor > li > a::before {
  border-left: 30px solid #fff;
}

.sw-theme-arrows > ul.step-anchor > li > a::after {
  border-left: 30px solid #e7eaf1;
}

.sw-theme-arrows .step-content {
  padding: 0 20px !important;
}

.container-demographic {
  padding-top: 10px;
}

.sw-btn-group-extra.mr-2 {
  margin-right: 0 !important;
}

.sw-btn-group-extra .btn-primary {
  border-radius: 5px !important;
}

.sw-theme-arrows .sw-toolbar {
  border-top: 1px solid #d9dfed;
  padding: 15px 20px 20px !important;
  position: relative;
  bottom: 0;
  width: 100%;
  left: 0;
  margin: auto !important;
  right: 0;
  background: #fff;
}

.sw-theme-arrows > ul.step-anchor > li.nav-item.active > a {
  border-color: #2095f2 !important;
  color: #fff !important;
  background: #2095f2 !important;
}

#smartwizard .tab-content .grey-widget {
  height: 500px;
  overflow: hidden;
}

#smartwizard {
  width: 100%;
}

.help-questionnair h5 {
  margin-top: 15px;
  font-family: robotobold;
}

.help-questionnair ul {
  padding-left: 25px;
}

.help-questionnair ul li {
  list-style: disc;
}

.help-questionnair p {
  margin-bottom: 2px;
}

.custom-select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: #fff url(../img/angle-down.png) no-repeat 97% 50%;
}

.opacity-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e4e5e6;
  z-index: 9999;
}

.absolute-popup {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 60%;
  z-index: 99999;
}

.demographic-tab.nav-tabs .nav-link {
  color: #fff;
  background: 0 0;
}

.demographic-tab.nav-tabs .nav-link.active,
.demographic-tab.nav-tabs .nav-link.active:focus {
  color: #fff;
  background: 0 0;
  border-bottom: 2px solid #257cc2;
}

.demographic-tab.nav-tabs .nav-link {
  padding: 20px 15px;
}

.video-opacity-div {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9;
}

.vid-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.bgvid {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
}

.inner-container {
  width: 750px;
  height: 400px;
  position: absolute;
  top: calc(50vh - 175px);
  left: calc(50vw - 370px);
  overflow: hidden;
  z-index: 99;
  margin: auto;
  position: fixed;
}

.bgvid.inner {
  top: calc(-50vh + 200px);
  left: calc(-50vw + 200px);
  filter: url("data:image/svg+xml;utf9, <svg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='10'%20/></filter></svg>#blur");
  -webkit-filter: blur(10px);
  -ms-filter: blur(10px);
  -o-filter: blur(10px);
  filter: blur(10px);
}

.box.login-box {
  position: absolute;
  height: 100%;
  width: 100%;
}
.box.login-sc-box {
  position: absolute;
  height: 100%;
  width: 100%;
}

.login-box .logo-container img {
  width: 100%;
}

.login-box .form-control:focus {
  box-shadow: none;
}

.login-box .left-content .box-content .title {
  font-size: 34px;
}

.login-box .left-content .box-content .form-container {
  margin-top: 20px;
  margin-bottom: 20px;
}

.login-box .left-content .box-content,
.login-box .right-content .box-content {
  padding: 50px;
  margin-top: -30px;
}

.login-box .logo-container {
  width: 200px;
  margin: auto;
}
.login-box .login-Box-footer .logo-container {
  width: 150px;
  margin: auto;
}
.login-box .right-content {
  background: rgba(37, 124, 194, 0.9);
  width: 45%;
  height: 100%;
  padding: 15px;
  float: left;
}

.login-box .left-content {
  background: rgba(255, 255, 255, 0.9);
  width: 55%;
  height: 100%;
  float: left;
}
.login-sc-box .left-content {
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
  float: left;
}
.login-sc-box .right-content {
  background: rgba(37, 124, 194, 0.9);
  width: 50%;
  height: 100%;
  padding: 5%;
  padding-bottom: 6% !important;
  float: left;
  padding-top: 6.7%;
}
.login-box.box p {
  color: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.btn-toggle-layout {
  margin-top: 15px;
  margin-right: 15px;
  width: 110px;
}

.chart-attendance {
  width: 90%;
  margin: auto;
}

.list-view-task {
  overflow: visible !important;
  margin-top: 0 !important;
}

.bg-blue-collaboration {
  background: #20a8d8;
}

.border-blue-collaboration {
  border-left: 1px solid #20a8d8;
  border-right: 1px solid #20a8d8;
  border-bottom: 1px solid #20a8d8;
}

#accordion .card-body .widget-title {
  padding: 8px 10px;
  font-size: 13px;
}

#accordion .card-body .widget-content {
  padding: 8px 10px;
  font-size: 13px;
}

.padding-top-20 {
  padding-top: 20px;
}

#calendar .fc-event-container .fc-content .fc-title i {
  margin-right: 10px;
}

.calendar-sidebar {
  position: absolute;
  top: 0;
  right: -100%;
  width: 40%;
  height: 100%;
  background: #fff;
  z-index: 9;
  -webkit-box-shadow: -2px 0 5px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: -2px 0 5px 0 rgba(0, 0, 0, 0.3);
  box-shadow: -2px 0 5px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.35s ease;
}

.sidebar-right-0 {
  right: 0;
  transition: all 0.35s ease;
}

.overflow-hidden {
  overflow: hidden;
}

.day-title {
  text-align: center;
  padding: 10px;
  font-size: 16px;
  background: #eee;
  font-family: robotobold;
}

.close-day-slider {
  float: right;
  font-size: 14px;
  color: #f86c6b;
  cursor: pointer;
}

.day-slider-content #accordion .card {
  margin-bottom: 5px;
}

.day-slider-content #accordion .card .card-header h5 {
  font-size: 14px;
  color: #2095f2;
  font-family: robotomedium;
  font-weight: 400;
}

.day-slider-content #accordion .card .card-header h5 a {
  text-decoration: none;
}

.complete-task .text-value {
  text-align: right;
  font-size: 14px !important;
  line-height: 17px;
}

.complete-task .text-muted {
  font-size: 11px !important;
}

.top-box .text-value span.value-unit {
  font-size: 16px;
}

.btn-grid-edit,
.btn-grid-refresh {
  padding: 5px;
  font-size: 14px;
  color: #257cc2;
}

.table-common-lms td,
.table-common-lms th {
  color: #000;
  font-size: 11px;
}

.top-list .top-attendance-height,
.top-list .top-tab-height {
  height: 426px;
  overflow-y: scroll;
}

.btn-bubble-click {
  cursor: pointer;
}

.lesson-panel .thumb {
  float: left;
  width: 20%;
}

.lesson-panel .content-unit {
  float: left;
  width: 80%;
  padding-left: 15px;
  padding-top: 10px;
}

.lesson-panel .top-panel-tile.top-list .left-content {
  width: 12%;
  overflow: hidden;
}

.lesson-panel .top-list .left-content img {
  width: auto;
}

.lesson-panel .top-panel-tile .small-value {
  font-size: 13px;
  color: #26344b;
}

.lesson-panel .top-panel-tile .small-name {
  font-size: 12px;
  color: #90959f;
}

.lesson-panel .top-panel-tile.top-list .circle canvas {
  margin-top: -15px;
}

.lesson-panel .top-panel-tile.top-list .circle strong {
  top: 5px;
}

.lesson-panel .tile-content .title a {
  height: 40px;
  margin-top: 0;
}

.lesson-panel .tile-content {
  padding: 20px;
}

.status-behind {
  color: #e12928;
}

.lesson-list-height {
  height: 510px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0 2px;
}

.grid-box {
  background: #f3f4f7;
  border: 1px solid #b1c5d5;
  margin-top: 10px;
  position: relative;
}

.grid-box .lock-area {
  width: 100%;
}

.grid-box .lock-area img {
  width: 30px;
}

.grid-box-top {
  padding: 10px 15px;
}

.grid-box-bottom {
  padding: 10px 15px 15px;
}

.border-bottom-grid {
  border-top: 1px solid #b1c5d5;
}

.grid-box.active,
.grid-box:hover {
  background: #d7edff;
  border: 1px solid #b1c5d5;
  -webkit-box-shadow: 0 0 3px 2px rgba(212, 212, 212, 1);
  -moz-box-shadow: 0 0 3px 2px rgba(212, 212, 212, 1);
  box-shadow: 0 0 3px 2px rgba(212, 212, 212, 1);
}

.grid-box .grid-box-top .lesson-count {
  font-size: 16px;
  font-family: robotomedium;
  color: #26344b;
}

.grid-box .grid-box-bottom .chapter-name {
  font-size: 18px;
  font-family: robotomedium;
  color: #2095f2;
  line-height: 20px;
  margin-bottom: 10px;
}

.bottom-footer {
  position: relative;
}

.lesson-detail .tab-content .tab-pane#home {
  overflow: hidden;
}

.specific-unit-assesment {
  cursor: pointer;
}

.assesment-list {
  padding: 20px;
  -webkit-box-shadow: 0 -4px 3px rgba(189, 189, 189, 0.7);
  -moz-box-shadow: 0 -4px 3px rgba(189, 189, 189, 0.7);
  box-shadow: 0 -4px 3px rgba(189, 189, 189, 0.7);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  transition: 0.35s;
  z-index: 99999;
}

.bottom-0 {
  bottom: -95px !important;
  transition: 0.35s;
}

.bg-gray-opacity {
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99999;
  transition: 0.35s;
}

.floater-btn {
  cursor: pointer;
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  margin: auto;
  width: 55px;
  text-align: center;
  background: #fff;
  height: 25px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  padding-top: 1px;
  -webkit-box-shadow: 0 -4px 3px rgba(189, 189, 189, 0.7);
  -moz-box-shadow: 0 -4px 3px rgba(189, 189, 189, 0.7);
  box-shadow: 0 -4px 3px rgba(189, 189, 189, 0.7);
}

.rotate-arrow {
  transform: rotate(180deg);
  padding-bottom: 5px;
}

#assesment-slider {
  position: relative;
}

#assesment-slider .owl-item .item {
  text-align: center;
}

#assesment-slider .owl-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#assesment-slider.owl-carousel .owl-nav button.owl-next,
#assesment-slider.owl-carousel .owl-nav button.owl-prev {
  line-height: 35px;
}

.assesment-list a {
  border: 1px solid #d2d6e1;
  display: inline-block;
  background: #f3f4f7;
  position: relative;
  width: 185px;
}

.assesment-list a .lock-area {
  width: 100%;
}

.assesment-list a .lock-area img {
  width: 20px;
}

.bg-yellow {
  background: #d0a001;
}

.text-indent-div {
  padding: 7px 15px !important;
  width: 100%;
  text-align: center;
}

.margin-left-10 {
  margin-left: 10px;
}

.assesment-list a:hover {
  text-decoration: none;
}

.assesment-list a span.icon {
  float: left;
  padding: 10px 10px;
}

.assesment-list a span.title {
  font-size: 18px;
  color: #26344b;
  font-family: robotobold;
  float: left;
  padding: 5px 15px;
}

.lesson-height {
  height: 487px;
  overflow-y: hidden;
  padding: 0 20px;
  display: block;
}

#lesson-tile.owl-carousel {
  display: none;
}

.lesson-detail .tab-content {
  /* height: 525px;
  overflow-y: hidden; */
  overflow-x: hidden;
}

.lesson-detail .lesson-head {
  font-size: 18px;
  font-family: robotobold;
  color: #26344b;
  text-transform: uppercase;
}

.lesson-detail .box-title {
  color: #26344b;
  padding: 0 20px;
}

.lesson-detail .nav-tabs {
  border-bottom: 0 solid #c8ced3;
  background: #6f819d;
}

.lesson-detail .nav-tabs .nav-item {
  margin-bottom: 0;
}

.lesson-detail .nav-tabs .nav-link.active {
  color: #fff;
  background: 0 0;
  border-bottom: 0 solid #257cc2;
}

.border-top-radius-0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.border-bottom-radius-0 {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.padding-10-15 {
  padding: 10px 15px !important;
}

.padding-0 {
  padding: 0 !important;
}

.lesson-detail .tab-content {
  margin-top: -2px;
  background: #fff;
  border-top: 0 solid #ccc;
  border-radius: 5px;
}

.lesson-detail .nav-tabs .nav-link.active {
  color: #fff;
  background: 0 0;
  border-bottom: 0 solid #257cc2;
  font-family: robotobold;
}

.lesson-detail .nav-tabs .nav-link.active:focus {
  color: #fff;
  background: 0 0;
  border-bottom: 0 solid #257cc2;
  font-family: robotobold;
}

.lesson-detail .nav-tabs .nav-link:focus,
.lesson-detail .nav-tabs .nav-link:hover {
  color: #fff;
  border-bottom: 0 solid #257cc2;
  font-family: robotobold;
}

.lesson-detail .nav-tabs .nav-link {
  font-size: 14px;
  color: #dbdee5;
  text-transform: uppercase;
  border: 0 solid transparent;
  border-bottom-width: 0;
  border-bottom-style: solid;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}

.lesson-detail .nav-tabs .nav-link {
  border: 0 solid transparent;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.lesson-detail .nav-link {
  display: block;
  padding: 10px 15px;
}

.lesson-detail .tab-content .tab-pane {
  padding: 0;
}

.right-info-chapter {
  background: #f8f9fb;
  border-left: 1px solid #d9e0e9;
}

.padding-20 {
  padding: 20px;
}

.flex-div {
  flex: 1;
}

.chapter-content {
  padding: 20px;
}

.chapter-content p {
  font-size: 13px;
  color: #26344b;
  line-height: 21px;
}

.chapter-img {
  position: relative;
  margin-bottom: 20px;
}

.chapter-img img {
  width: 100%;
}

.chapter-img .chapter-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 15px;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  font-family: robotobold;
  background: url(../img/strip-title.png) no-repeat;
  background-size: cover;
}

.chapter-pagination {
  text-align: center;
  padding: 15px 15px;
  border-top: 1px solid #d9e0e9;
}

.chapter-pagination ul {
  padding: 0;
  margin: 0;
}

.chapter-pagination ul li {
  display: inline-block;
  list-style: none;
  cursor: pointer;
}

.chapter-pagination ul li:first-child {
  margin-left: 0;
}

.chapter-pagination ul li:last-child {
  margin-right: 0;
}

.chapter-pagination ul li a {
  color: #7f858f;
  font-size: 16px;
  cursor: pointer;
}

.chapter-pagination ul li a:hover {
  color: #505660;
}

.chapter-pagination ul li.active span {
  color: #24344b;
  font-size: 14px;
  font-family: robotobold;
  position: relative;
  top: -2px;
}

.chapter-pagination ul li span {
  color: #7f858f;
  font-size: 13px;
  font-family: robotomedium;
  position: relative;
  top: -2px;
}

.right-info-chapter .widget-title,
.widget-title {
  padding: 12px 15px;
  font-size: 16px;
  color: #fff;
  font-family: robotomedium;
  line-height: 20px;
}

.right-info-chapter .widget-content,
.widget-content {
  padding: 12px 15px;
}

.right-info-chapter .widget-content .left-img {
  margin-top: 5px;
}

.right-info-chapter .widget-content p,
.widget-content p {
  margin-bottom: 0;
  line-height: 15px;
}

.right-info-chapter .widget-content ul {
  margin: 0;
  padding-left: 15px;
}

.right-info-chapter .widget-content p,
.right-info-chapter .widget-content ul li a {
  color: #26344b;
  font-size: 13px;
}

.right-info-chapter .widget-content ul li {
  margin-bottom: 5px;
}

.right-info-chapter .widget-content ul li a:hover {
  text-decoration: none;
}

.bg-red {
  background: #f86c6b;
}

.border-red {
  border-left: 1px solid #f86c6b;
  border-right: 1px solid #f86c6b;
  border-bottom: 1px solid #f86c6b;
}

.bg-violet {
  background: #9b58b5;
}

.border-violet {
  border-left: 1px solid #9b58b5;
  border-right: 1px solid #9b58b5;
  border-bottom: 1px solid #9b58b5;
}

.bg-green {
  background: #16a085;
}

.border-green {
  border-left: 1px solid #16a085;
  border-right: 1px solid #16a085;
  border-bottom: 1px solid #16a085;
}

.right-float {
  float: right;
}

.left-float {
  float: left;
}

.btn-expand {
  background-image: url(../img/maximize.png);
}

.btn-collapse {
  background-image: url(../img/minimize.png);
}

.btn-common-bg {
  background-repeat: no-repeat;
  background-size: 17px;
  background-position: 50%;
}

.action-btn {
  padding: 8px;
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 999;
  background-color: transparent;
  border: 0;
}

.slide-panel {
  margin-left: -25%;
  transition: all 0.5s ease;
}

.expand-col-3.col-xl-3,
.expand-col-3.col-xl-5,
.expand-col-9.col-xl-12,
.expand-col-9.col-xl-7,
.expand-col-9.col-xl-9 {
  transition: all 0.5s ease;
}

.expand-col-9.col-xl-12.padding-left-0 {
  padding-left: 15px;
}

.lesson-panel .tile-content,
.lesson-panel .top-panel-tile {
  height: 145px;
}

.lesson-panel .tile-content,
.top-panel-tile {
  background: #f8f9fb;
  border: 1px solid #d9e0e9;
  border-radius: 5px;
}

.top-panel-tile.top-list .right-content .title {
  margin-bottom: 8px;
}

.top-panel-tile.top-list .circle canvas {
  width: 60px;
  height: 60px;
  margin-top: -10px;
}

.top-panel-tile.top-list .circle strong {
  top: 10px;
}

.top-panel-tile.top-list .left-content {
  width: 11%;
  float: left;
}

.extra-table-content .small-value,
.top-panel-tile .small-value {
  font-size: 16px;
  color: #26344b;
}

.extra-table-content .small-name,
.top-panel-tile .small-name {
  font-size: 12px;
  color: #90959f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.white-box {
  background: #fff;
  padding: 20px;
  border: 1px solid #d9e0e9;
  border-radius: 5px;
}

.box-title {
  font-size: 20px;
  font-family: robotobold;
  color: #000;
  text-transform: uppercase;
  line-height: 17px;
  margin-bottom: 10px;
}

.box-title .count-no {
  font-size: 14px;
  background: #9b59b6;
  color: #fff;
  border-radius: 100%;
  padding-top: 7px;
  width: 30px;
  height: 30px;
  display: inline-block;
  text-align: center;
  position: relative;
  bottom: 2px;
  margin-left: 5px;
}

.tile-content {
  padding: 20px;
  -webkit-box-shadow: 0 0 7px 0 #9299a5;
  -moz-box-shadow: 0 0 7px 0 #9299a5;
  box-shadow: 0 0 7px 0 #9299a5;
}

.status-area {
  color: #26344b;
  font-size: 13px;
  font-family: robotobold;
}

.status-complete {
  color: #4dbd74;
}

.bg-status-complete {
  background: #4dbd74;
}

.status-pending {
  color: #d0a001;
}

.bg-status-pending {
  background: #d0a001;
}

.status-area span {
  font-size: 13px;
  font-family: robotomedium;
}

.tile-content .thumb {
  position: relative;
}

.tile-content .thumb img {
  width: 100%;
  border-radius: 6px;
}

.overall-status {
  position: absolute;
  top: -13px;
  right: -13px;
  width: 34px;
  height: 34px;
  border-radius: 100%;
  border: 4px solid #fff;
  padding: 1px 4px 3px;
}

.complete-overall {
  background: #4dbd74;
}

.ongoing-overall {
  background: #d0a001;
}

.tile-content .title a {
  font-size: 16px;
  font-family: robotomedium;
  color: #2095f2;
  height: 50px;
  margin-top: 10px;
  line-height: 21px;
  display: block;
}

.tile-content .title a:hover {
  font-size: 16px;
  color: #0277d2;
  text-decoration: none;
}

.tile-content .custom-progress-group .title-progress {
  font-size: 13px;
  color: #26344b;
  font-family: robotomedium;
}

.lock-div {
  opacity: 0.4;
}

.not-allowed {
  cursor: not-allowed;
}

.lock-area {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(38, 52, 75, 0.6);
  width: 92%;
  height: 100%;
  right: 0;
  margin: auto;
  z-index: 99;
  pointer-events: none;
}

.lock-area img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.custom-progress-group .progress {
  background-color: #dee0e5;
}

.custom-progress-group {
  margin-bottom: 0;
}

.custom-progress-group .process-percent {
  font-size: 13px;
  color: #000;
  font-family: robotobold;
}

.unit-content {
  padding: 0;
  text-align: right;
  margin-bottom: 5px;
}

.unit-content li {
  list-style: none;
  display: inline-block;
  position: relative;
}

.unit-content li .normal-icon {
  display: block;
}

.unit-content li:focus .normal-icon,
.unit-content li:hover .normal-icon {
  display: none;
}

.unit-content li .hover-icon {
  display: none;
}

.unit-content li:focus .hover-icon,
.unit-content li:hover .hover-icon {
  display: block;
}

.unit-content li .hover-div {
  display: none;
  position: absolute;
  bottom: 27px;
  left: -40px;
  right: 0;
  width: 100px;
  padding: 3px 5px;
  border-radius: 3px;
  margin: auto;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 12px;
}

.unit-content li .hover-div:after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
  bottom: -8px;
}

.unit-content li:hover .hover-div {
  display: block;
}

.margin-top-30 {
  margin-top: 30px;
}

.social-icons {
  font-size: 16px;
  color: #fff;
  margin: 0 5px;
}

.social-icons:hover {
  color: rgba(255, 255, 255, 0.7);
}

.search-area {
  position: relative;
}

.search-area .btn-search {
  position: absolute;
  top: 0;
  right: 0;
  background: 0 0;
  border: 0;
  font-size: 15px;
  padding: 5px 10px;
}

.white-container {
  background: #fff;
  padding: 0 15px 15px;
  border-radius: 5px;
}

.grey-widget {
  background: #f8f9fb;
  border: 1px solid #c8ced3;
  border-radius: 5px;
  padding: 15px;
}

.margin-bottom-0 {
  margin-bottom: 0 !important;
}

.margin-top-15 {
  margin-top: 15px;
}

.grey-widget .header {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.margin-top-10 {
  margin-top: 10px;
}

.grey-widget .header:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #c8ced3;
}

.grey-widget .header .title {
  font-size: 14px;
  font-family: robotobold;
  text-transform: uppercase;
}

.grey-widget .content {
  height: 70px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.margin-bottom-10 {
  margin-bottom: 10px !important;
}

.grey-widget .big-height {
  height: 140px !important;
  overflow-y: scroll;
  overflow-x: hidden;
}

.grey-widget .big-height label {
  margin-bottom: 2px;
}

.btn-add,
.btn-edit {
  border: 0;
  background: 0 0;
  font-size: 14px;
  color: #257cc2;
}

.address-book-pagination {
  margin-top: 20px;
}

.address-book-pagination .pagination .page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #257cc2;
  border-color: #257cc2;
}

.grey-widget .content .grey-color {
  color: #969696;
}

.right-float {
  float: right;
}

.left-float {
  float: left;
}

.margin-right-5 {
  margin-right: 5px;
}

.content-name {
  margin-bottom: 5px;
  font-family: robotomedium;
}

.blue-widget {
  background: #1e639c;
  padding: 10px 15px;
  border-radius: 5px;
}

.profile-info i {
  opacity: 0.6;
}

.profile-info .name {
  font-size: 16px;
  color: #fff;
  font-family: robotomedium;
}

.profile-info .address {
  font-size: 13px;
  color: #fff;
}

.profile-info .other-detail {
  font-size: 13px;
  color: #fff;
}

.profile-image {
  position: relative;
  width: 75px;
  height: 75px;
}

.profile-image img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.course-image {
  position: relative;
  width: 75px;
  height: 75px;
}

.course-image img {
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.margin-top-5 {
  margin-top: 5px;
}

.btn-change-profile {
  position: absolute;
  bottom: 0;
  right: -10px;
  font-size: 15px;
  color: #fff;
  border: 0;
  background: 0 0;
}

.btn-change-course {
  position: absolute;
  bottom: 0;
  right: -10px;
  font-size: 15px;
  color: #5c6873;
  border: 0;
  background: 0 0;
}

.full-profile-widget {
  background: #1e639c;
  padding: 0 15px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.full-profile-widget .header .title {
  font-size: 18px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
  font-family: robotobold;
}

.full-profile-widget .btn-edit {
  border: 0;
  background: 0 0;
  font-size: 16px;
  color: #fff;
  margin-left: 15px;
}

.full-profile-widget .profile-image {
  position: relative;
  width: 80px;
  height: 80px;
}

.task-list-con .dropdown-item {
  font-size: 12px;
}

.full-profile-widget .profile-image img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.full-profile-widget .profile-info {
  margin-left: -30px;
}

.padding-left-0 {
  padding-left: 0;
}

.padding-right-0 {
  padding-right: 0;
}

.margin-right-20 {
  margin-right: 20px;
}

.other-info {
  position: relative;
}

.other-info:before {
  content: "";
  position: absolute;
  left: -15px;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
}

.other-info .label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.other-info .content {
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
}

.full-profile-widget .profile-info .name {
  font-size: 16px;
  color: #fff;
  margin-bottom: 5px;
  font-family: robotobold;
}

.full-profile-widget .profile-info .name span {
  font-size: 13px;
}

.full-profile-widget .profile-info .name span,
.full-profile-widget .profile-info i {
  opacity: 0.6;
}

.full-profile-widget .profile-info .address {
  font-size: 14px;
  color: #fff;
}

.full-profile-widget .profile-info .other-detail {
  font-size: 14px;
  color: #fff;
}

.profile-picture-compact {
  position: relative;
  width: 130px;
  height: 140px;
}

.my-profile-container {
  padding: 15px 0;
}

.task-container {
  background: #114670;
  padding: 0 15px;
  border-top-right-radius: 5px;
}

.task-container .border-right-tile {
  border-right: 1px solid #1e639c;
}

.task-container .border-bottom-tile {
  border-bottom: 1px solid #1e639c;
}

.bottom-dark-strip {
  background: #202b3d;
  padding: 5px 15px;
  color: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.task {
  padding: 12px 12px;
  text-align: center;
  line-height: 14px;
}

.task .count {
  font-size: 25px;
  margin-bottom: 10px;
}

.text-light-blue {
  color: #24a2ca;
}

.text-light-green {
  color: #48bf7f;
}

.text-light-violet {
  color: #9277d6;
}

.text-light-red {
  color: #f46d69;
}

.task .name {
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
}

.margin-right-30 {
  margin-right: 30px;
}

.que-about {
  font-size: 14px;
  color: #000;
  margin-top: 15px;
}

.ans-about {
  font-size: 14px;
  color: #000;
  margin-top: 15px;
  word-break: break-all;
}

.bold-font {
  font-family: robotobold;
}

.medium-font {
  font-family: robotomedium;
}

/* .medium-font
{
width: 271px;
font-family: robotomedium;
height: auto;
word-break: break-word;
white-space: pre-wrap;
} */

.document-row {
  border: 1px solid #d5dbe0;
  padding: 10px 15px;
  border-radius: 3px;
  margin-bottom: 10px;
}

.doc-type {
  color: #90959f;
}

.document-row .doc-icon {
  font-size: 33px;
}

.document-row .doc-name {
  font-size: 14px;
  margin-top: 5px;
  margin-left: -50px;
}

.visible-overflow {
  overflow: visible !important;
}

.disable-btn {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 1;
}

.document-row .doc-download {
  font-size: 20px;
  text-align: right;
  color: #257cc2;
  margin-top: 10px;
}

.document-row .doc-download:hover {
  opacity: 0.7;
  cursor: pointer;
}

.text-red {
  color: #ff6261;
}

.pwd-field {
  width: 70%;
  float: left;
}

.pwd-field input {
  border: 0;
  background: 0 0;
  padding: 0;
}

.primary-btn {
  border: 0;
  background: 0 0;
}

.secondary-btn {
  border: 0;
  background: 0 0;
}

.change-pwd {
  color: #20a8d8;
  width: 30%;
  float: left;
  cursor: pointer;
}

.tab-header-s {
  text-decoration: none !important;
}

.card1 .nav-tabs .nav-link.active {
  color: #2f353a;
  background: #fff;
  border-color: #9575cd;
  border-bottom: 2px solid #9575cd;
}

.card1 .nav-tabs .nav-link:focus,
.card1 .nav-tabs .nav-link:hover {
  border-bottom: 2px solid #9575cd;
}

.card1 .nav-tabs .nav-link.active:focus {
  background: #fff;
  border-bottom: 2px solid #9575cd;
}

.bg-assignment {
  position: relative;
}

.bg-assignment a {
  color: #eee;
}

.bg-assignment .owl-prev {
  color: #fff !important;
  top: 40% !important;
  left: -13px !important;
}

.bg-assignment .owl-next {
  color: #fff !important;
  top: 40% !important;
  right: -13px !important;
}

.btn-form {
  margin-bottom: 10px;
}

.card2 .nav-tabs .nav-link.active {
  color: #2f353a;
  background: #fff;
  border-color: #f86c6b;
  border-bottom: 2px solid #f86c6b;
}

.card1 .nav-tabs .nav-link:focus,
.card2 .nav-tabs .nav-link:hover {
  border-bottom: 2px solid #f86c6b;
}

.card2 .nav-tabs .nav-link.active:focus {
  background: #fff;
  border-bottom: 2px solid #f86c6b;
}

.card3 .nav-tabs .nav-link.active {
  color: #2f353a;
  background: #fff;
  border-color: #20a8d8;
  border-bottom: 2px solid #20a8d8;
}

.card1 .nav-tabs .nav-link:focus,
.card3 .nav-tabs .nav-link:hover {
  border-bottom: 2px solid #20a8d8;
}

.card3 .nav-tabs .nav-link.active:focus {
  background: #fff;
  border-bottom: 2px solid #20a8d8;
}

.card4 .nav-tabs .nav-link.active {
  color: #2f353a;
  background: #fff;
  border-color: #4dbd74;
  border-bottom: 2px solid #4dbd74;
}

.card1 .nav-tabs .nav-link:focus,
.card4 .nav-tabs .nav-link:hover {
  border-bottom: 2px solid #4dbd74;
}

.card4 .nav-tabs .nav-link.active:focus {
  background: #fff;
  border-bottom: 2px solid #4dbd74;
}

#card1.active .bg-violet,
#card1:hover .bg-violet,
#card2.active .bg-red,
#card2:hover .bg-red,
#card3.active .bg-blue,
#card3:hover .bg-blue,
#card4.active .bg-green,
#card4:hover .bg-green {
  background: #fff !important;
}

#card1.active .bg-violet,
#card1:hover .bg-violet {
  border-bottom: 5px solid #a468bd;
}

#card2.active .bg-red,
#card2:hover .bg-red {
  border-bottom: 5px solid #f86c6b;
}

#card2.active .bg-yellow .text-value
{
  color: #da9f29 !important;
}
#card2.active .bg-yellow
{
  border-bottom: 5px solid #da9f29 !important;
}


#card3.active .bg-blue,
#card3:hover .bg-blue {
  border-bottom: 5px solid #20a8d8;
}

#card4.active .bg-green,
#card4:hover .bg-green {
  border-bottom: 5px solid #4dbd74;
}

#card1.active .text-value,
#card1:hover .text-value {
  color: #9b59b6;
}

#card2.active .text-value,
#card2:hover .text-value {
  color: #f86c6b !important;
}

#card3.active .text-value,
#card3:hover .text-value {
  color: #20a8d8;
}

#card4.active .text-value,
#card4:hover .text-value {
  color: #4dbd74;
}

#card4.active svg.svg-inline--fa.fa-chart-line,
#card4:hover svg.svg-inline--fa.fa-chart-line {
  color: #4dbd74;
  font-size: 5.4em;
  opacity: 1;
}

#card4 svg.svg-inline--fa.fa-chart-line {
  font-size: 5.4em;
  opacity: 0.2;
}



#card1.active .c-title,
#card1.active .text-muted,
#card1:hover .c-title,
#card1:hover .text-muted,
#card2.active .c-title,
#card2.active .text-muted,
#card2:hover .c-title,
#card2:hover .text-muted,
#card3.active .c-title,
#card3.active .text-muted,
#card3:hover .c-title,
#card3:hover .text-muted,
#card4.active .c-title,
#card4.active .text-muted,
#card4:hover .c-title,
#card4:hover .text-muted {
  color: #000 !important;
}

#card1 .card,
#card2 .card,
#card3 .card,
#card4 .card {
  overflow: hidden;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border-bottom: 2px solid #257cc2;
}

.tab-content-s {
  display: none;
}

.menu-list-btn:hover {
  color: #000;
  cursor: pointer;
}

.bg-assignment p {
  font-size: 15px;
  color: #fff;
  margin-bottom: 5px;
}

.main .container-fluid {
  /* padding: 0 20px; */
  padding: 0px 60px;
  margin-left: 56px;
}

.menu-list-btn .dropdown-toggle::after {
  display: none;
}

.menu-list-btn a {
  font-size: 16px;
}

.menu-list-btn .dropdown-menu a i {
  display: inline-block;
  width: 20px;
  margin-right: 0;
  margin-left: -10px;
  color: #7c828d;
  text-align: center;
  font-size: 13px;
}

.menu-list-btn.show a {
  color: #2c394f !important;
}

.menu-list-btn .dropdown-menu a:last-child {
  border-bottom: 0 !important;
}

.dropdown-item:focus i,
.dropdown-item:hover i {
  color: #2c394f !important;
}

.dropdown-item:focus,
.dropdown-item:hover {
  color: #2c394f !important;
  text-decoration: none;
  background-color: #f0f3f5 !important;
}

.menu-list-btn.menu-list-btn .dropdown-menu a {
  font-size: 12px;
  color: #7c828d;
  border-bottom: 1px solid #e7ebf4;
}

.btn.focus,
.btn:focus {
  outline: 0;
  box-shadow: none;
}

.bg-assignment {
  border: 0 !important;
}

.blue-icon-con {
  color: #257cc2;
  line-height: 57px !important;
  font-size: 16px;
}

.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {
  color: #92bee1;
}

.bg-assignment .title {
  font-size: 18px;
  font-family: robotobold;
  color: #fff;
  font-weight: 100;
  text-transform: uppercase;
  line-height: 30px;
  margin-bottom: 10px;
}

.sidebar .nav-link {
  padding: 15px 0;
  border-bottom: 1px solid #364760;
  text-align: center;
  color: #7d8fab;
  font-size: 12px;
  font-family: robotobold;
}

html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .app-footer,
html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .main {
  margin-left: 90px;
}

.top-box .card {
  border: 0;
  position: relative;
}

.bg-assignment {
  background: url(../img/assign-bg.jpg);
  background-size: cover;
  background-position: center;
}

.top-list .tab-content .tab-pane {
  padding: 10px 0;
}

.task-list-con .tab-pane {
  padding: 0rem !important;
}

.task-list-con .nav-link {
  font-size: 12px;
  padding: 10px;
}

.bottom-content {
  font-size: 14px;
}

.top-content {
  color: #000;
  font-family: robotomedium;
  font-size: 14px;
  padding-top: 5px;
}

.c-title {
  font-size: 14px;
  font-family: robotomedium;
  text-transform: uppercase;
  padding-bottom: 10px;
}
.c-title2 {
  font-size: 14px;
  font-family: robotomedium;
  padding-bottom: 10px;
}
.date-month {
  text-transform: uppercase;
  text-align: center;
}

.date-value {
  font-size: 18px;
  font-family: robotobold;
  text-align: center;
}

.bg-grey {
  background: #6f819d;
  border: 0 !important;
}

.view-all {
  text-align: right;
  float: right;
}

.view-all a {
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
}

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 15px 20px;
}

.text-muted {
    color: #73818f !important;
    font-size: 11px!important;
}

.top-box .text-value {
  font-family: robotobold;
  font-weight: 100;
  font-size: 30px;
  margin-bottom: -5px;
}

.top-box .text-muted {
  font-size: 12px;
  text-transform: uppercase;
}

.top-box .bg-white .text-value {
  color: #9575cd;
}

.right-below-content .tab-content .tab-pane {
  padding: 0;
}

.right-below-content .tab-content {
  overflow-y: scroll;
}

#calendar {
  margin-bottom: 2px;
}

.bg-green {
  background: #4dbd74;
}

.bg-blue {
  background: #20a8d8;
}

.bg-red {
  background: #f86c6b;
  overflow: hidden;
}

.bg-white {
  background: #fff;
}

.app-body {
  background: #eef1f5;
}

.sidebar .nav-link:hover .nav-icon {
  color: #20a8d8;
}

.sidebar .nav-link:hover {
  color: #fff;
  background: #1f2b3d;
}

.top-box {
  margin-top: 20px;
}

.left-side-container {
  margin-top: 20px;
}

.card {
  margin-bottom: 20px;
  border: 1px solid #d9e0e9;
}

.sidebar .nav-link.active:before {
  /* content: ""; */
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 7px 0;
  border-color: transparent #eef1f5 transparent;
  margin-top: 10px;
}

.sidebar .nav-item:after {
  width: 100%;
  border-bottom: 1px solid #fff;
}

.sidebar {
  background: #26344b;
}

.sidebar .sidebar-nav {
  width: 90px;
}

.sidebar .nav-link.active {
  color: #fff;
  background: #1f2b3d;
}

.app-header .navbar-brand {
  width: 300px;
  font-size: 16px;
  padding-left: 14px;
  color: #fff;
  font-family: robotobold;
  text-transform: uppercase;
  padding-top: 10px;
  padding-bottom: 10px;
  -ms-flex-align: left;
  align-items: left;
  -ms-flex-pack: left;
  justify-content: left;
}

.sidebar .nav {
  width: 90px;
}

.sidebar-fixed .sidebar {
  width: 90px;
}

.sidebar .nav-link .nav-icon {
  display: block;
  margin-bottom: 5px !important;
  color: #73818f;
  text-align: center;
  width: 100%;
  margin: 0;
  font-size: 16px;
}

.app-header {
  background: #257cc2;
  height: auto;
  border-bottom: 0 solid #c8ced3;
}

.app-header .nav-item .avatar.nav-link > img,
.app-header .nav-item .nav-link > .img-avatar {
  height: 30px;
  margin: 0 10px;
  border: 2px solid #257cc2;
}

.d-md-down-none i {
  font-size: 18px;
  opacity: 0.7;
}

.double-border-right:after {
  content: "";
  height: 20px;
  border-left: 1px solid #15456c;
  border-right: 1px solid #2c6da1;
  width: 2px;
  position: absolute;
  top: 0;
  right: -1px;
}

header .navbar-nav .nav-link {
  color: #fff;
}

.app-header .nav {
  background: #1e639b;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-right: 35px;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border-bottom: 2px solid #257cc2;
}

.tab-content {
  margin-top: -2px;
  background: #fff;
  border: 0 solid #c8ced3;
  border-top-width: 0;
  border-top-style: solid;
  border-top-color: #c8ced3;
  border-top: 1px solid #ccc;
}

.nav-tabs .nav-link.active {
  color: #2f353a;
  background: #fff;
  border-color: #c8ced3;
  border-bottom-color: #c8ced3;
  border-bottom-color: #fff;
  border-bottom: 2px solid #257cc2;
}

.nav-tabs .nav-item {
  margin-bottom: 0;
}

.nav-tabs .nav-link {
  border: 0 solid transparent;
}

.nav-tabs .nav-link.active:focus {
  background: #fff;
  border-bottom: 2px solid #257cc2;
}

.list-view-custom {
  margin-top: 20px;
}

.list-view-custom ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.height-282 {
  height: 282px;
}

.list-view-custom {
  overflow-y: scroll;
}

.insights-h {
  height: 190px;
  overflow: hidden;
}

.list-view-custom ul li {
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  background: #f8f9fb;
}

.top-list .tab-content {
  height: 426px;
  overflow-y: hidden;
  overflow-x: hidden;
}

.insights-h:hover,
.top-list .tab-content:hover {
  overflow-y: auto;
}

.bg-violet {
  background: #9b59b6 !important;
}

.list-view-custom ul li .left-icon {
  color: #fff;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.list-content {
  display: table;
}

.list-content .left-icon {
  width: 18%;
}

.list-content .middle-icon {
  width: 72%;
}

.list-content .right-icon {
  width: 10%;
}

.list-content .right-icon {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  padding-right: 10px;
}

.list-content .middle-content {
  width: 72%;
}

.task-list-con .list-content .middle-content {
  width: 80%;
}

.list-content .left-icon {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.list-content .middle-content {
  display: table-cell;
}

.list-view-custom ul li .middle-content {
  font-size: 12px;
  padding: 5px 10px;
}

.list-view-custom ul li {
  border: 1px solid #d9e0e9;
}

.social-header .name {
  font-size: 15px;
  color: #26344b;
}

.social-header .social-content {
  font-size: 13px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.social-icon {
  font-size: 18px;
  color: #2095f2;
  position: absolute;
  right: 20px;
  top: 10px;
}

.social-header .username {
  font-size: 14px;
  color: #2095f2;
}

.social-container {
  border-radius: 5px;
  padding: 20px;
  position: relative;
  border: 1px solid #c8ced3;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #f8f9fb;
}

.social-left ul {
  padding: 0;
  margin: 0;
}

.social-right {
  text-align: right;
}

.social-header .img-con {
  width: 60px;
}

.social-left ul li a {
  color: #969696;
}

.social-left ul li {
  display: inline-block;
  width: 30px;
}

.top-list ul {
  padding: 0;
  margin-bottom: 0;
}

.list-c li .small-name {
  font-size: 12px;
  color: #90959f;
  white-space: nowrap;
}

.list-c li .small-value {
  font-size: 13px;
  color: #26344b;
  font-family: robotobold;
  white-space: nowrap;
}

.menu-list-btn {
  float: right;
}

.list-c li {
  background: #f8f9fb;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.top-list ul li {
  list-style: none;
}

.top-list .right-content .title {
  font-size: 18px;
  color: #2095f2;
  font-family: robotomedium;
  margin-bottom: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.width-20 {
  width: 20%;
  float: left;
}

.top-list .right-content {
  width: 85%;
  float: left;
  padding: 10px 20px;
}

.top-list .left-content img {
  width: 100%;
}

.top-list .left-content {
  width: 13%;
  float: left;
}

.circle {
  width: 55px;
  position: relative;
}

.circle strong {
  position: absolute;
  font-size: 12px;
  left: 50%;
  transform: translate(-50%);
  top: 4px;
}

.circle canvas {
  width: 70px;
  height: 70px;
  margin-top: -20px;
}

.quate-title {
  font-size: .9rem;
  opacity: 0.7;
  padding-left: 15px;
  padding-right: 15px;
}

.img-logo-right {
  position: absolute;
  right: 0;
  top: 55px;
}

.img-quate-right {
  position: absolute;
  right: 0;
  top: 77px;
}

.owl-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 0;
  font-size: 30px;
  right: 0;
}

.owl-carousel .owl-nav button.owl-prev {
  position: absolute;
  top: 0;
  font-size: 30px;
  left: 0;
}

.quate-content {
  font-size: 15px;
  font-family: robotobold;
  font-style: italic;
  padding-left: 15px;
  padding-right: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 96%;
}

.owl-dots {
  display: none;
}

.width-100 {
  width: 100%;
}

.padding-left-0 {
  padding-left: 0;
}

.padding-left-10 {
  padding-left: 10px;
}

.padding-right-10 {
  padding-right: 10px;
}

.padding-left-15 {
  padding-left: 15px;
}

.padding-bottom-0 {
  padding-bottom: 0;
}

.padding-right-15 {
  padding-right: 15px;
}

.margin-right-20 {
  margin-right: 20px;
}

.margin-left-20 {
  margin-left: 20px;
}

.margin-bottom-30 {
  margin-bottom: 30px;
}

.margin-left-5 {
  margin-left: 5px;
}

.margin-right-15 {
  margin-right: 15px;
}

.margin-left-15 {
  margin-left: 15px;
}

.margin-left-m-10 {
  margin-left: -10px;
}

.margin-right-m-10 {
  margin-right: -10px;
}

.margin-top-20 {
  margin-top: 20px;
}

.padding-right-0 {
  padding-right: 0;
}

.close-popup-confirmation {
  display: none;
  position: absolute;
  z-index: 99;
  width: 60%;
  height: auto;
  padding: 30px 30px 30px 80px;
  top: 45%;
  left: 0;
  right: 0;
  margin: auto;
  background: #fff;
  -webkit-box-shadow: 0 0 12px 5px rgba(172, 172, 172, 1);
  -moz-box-shadow: 0 0 12px 5px rgba(172, 172, 172, 1);
  box-shadow: 0 0 12px 5px rgba(172, 172, 172, 1);
}

.confirm-msg {
  font-size: 18px;
  font-family: robotobold;
  position: relative;
  margin-bottom: 15px;
}

.confirm-msg img {
  position: absolute;
  top: 0;
  left: -60px;
}

.result-status-img {
  width: 250px;
  margin: auto;
}

.result-status-img img {
  width: 100%;
}

.result-text {
  text-align: center;
}

.result-text .result-status {
  color: #fa3b3a;
  font-size: 30px;
  font-family: robotobold;
  line-height: 25px;
  margin-bottom: 15px;
}

.result-text .result-name-sentence {
  color: #7f858f;
  font-size: 16px;
  line-height: 20px;
}

.detail-result {
  margin-top: 15px;
  padding: 20px 100px 30px;
}

.detail-result .blue-box {
  background: #f3f4f7;
  border: 1px solid #d8dbe6;
  height: 100px;
  padding: 15px;
  text-align: center;
  border-radius: 5px;
}

.detail-result .blue-box .obtained-mark {
  color: #2095f2;
  font-size: 30px;
  font-family: robotobold;
}

.detail-result .blue-box .mark-label {
  color: #7a808c;
  font-size: 14px;
  font-family: robotobold;
}

.que-ans ul {
  padding: 0;
}

.que-ans ul li {
  margin-bottom: 15px;
}

.question-quiz {
  font-size: 18px;
  font-family: robotomedium;
  margin-bottom: 20px;
  position: relative;
  padding-left: 0;
  color: #26344b;
}

.question-quiz .question {
  font-family: robotobold;
  position: absolute;
  top: 0;
  left: -40px;
  line-height: 20px;
}

.question-quiz .question .que {
  font-size: 30px;
}

.question-quiz .question .que-no {
  font-size: 20px;
}

.test-start-content {
  display: none;
  padding: 0 100px;
}

.test-start-content-preview {
  padding: 0 100px;
}

.modal-common .modal-footer {
  display: inline-block;
  padding: 0 0 20px;
  border-top: 0 solid #e4e7ea;
}

.que-count {
  padding-top: 12px;
}

.modal-common .modal-footer .test-start-content {
  border-top: 1px solid #dbdfe9;
}

.modal-common .modal-header .title {
  padding-top: 7px;
}

.modal-common .modal-header .close {
  padding: 5px 0;
  margin: 0 0 0 10px;
  text-shadow: none;
  opacity: 1;
}

/* modal-lg */

.modal-lg .modal-footer {
  display: inline-block;
  padding: 0 0 20px;
  border-top: 0 solid #e4e7ea;
}

.modal-lg .modal-footer .test-start-content {
  border-top: 1px solid #dbdfe9;
}

.modal-lg .modal-header .title {
  padding-top: 7px;
}

.modal-lg .modal-header .close {
  padding: 5px 0;
  margin: 0 0 0 10px;
  text-shadow: none;
  opacity: 1;
}

.time-lapse-label {
  float: right;
  font-size: 12px;
  padding-top: 8px;
  margin-right: 10px;
}

.flip-clock-wrapper {
  width: 80px;
  margin: 0;
  float: right;
  padding: 5px 0;
}

.flip-clock-wrapper .flip {
  box-shadow: none;
}

.flip-clock-wrapper ul li {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 26px;
  text-decoration: none !important;
}

.flip-clock-divider {
  width: 5px;
  height: 30px;
}

.flip-clock-dot {
  display: block;
  background: #fff;
  width: 4px;
  height: 4px;
  position: absolute;
  border-radius: 50%;
  box-shadow: none;
  left: 0;
}

.flip-clock-dot.top {
  top: 12px;
}

.flip-clock-dot.bottom {
  bottom: 2px;
}

.flip-clock-wrapper ul {
  position: relative;
  float: left;
  margin: 5px 2px;
  width: 30px;
  height: 28px;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  border-radius: 0;
  background: #000;
  padding: 0;
}

.flip-clock-wrapper ul li a div {
  z-index: 1;
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  font-size: 16px;
  overflow: hidden;
  outline: 1px solid transparent;
}

.flip-clock-wrapper ul li a div.up::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 0;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.4);
}

.flip-clock-wrapper ul li a div div.inn {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 200%;
  color: #fff;
  text-shadow: none;
  text-align: center;
  background-color: #6e7b8b;
  border-radius: 0;
  font-size: 16px;
}

.flip-clock-wrapper ul li a div.down {
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.clock ul:nth-child(1),
.clock ul:nth-child(2),
.clock ul:nth-child(3),
.flip-clock-divider.days,
.flip-clock-divider.hours,
.flip-clock-label {
  display: none;
}

.quiz {
  padding-left: 0;
}

.question-list,
.result-status-content.failed,
.result-status-content.passed {
  display: none;
}

.green-pass {
  color: #189a24 !important;
}

.question-list.active-que {
  display: block;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  background-color: #000;
}

.modal-common.modal-lg {
  max-width: 1000px;
  margin: 10px auto 0;
}

.modal-common .modal-footer .test-start-content {
  padding: 15px 130px 0;
}

.modal-common .modal-header {
  /* background: #525e6c; */
  background: #10174c;
  font-size: 16px;
  font-family: robotobold;
  color: #fff;
  text-transform: uppercase;
  padding: 5px 15px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: 0 solid #e4e7ea;
}

.modal-common .modal-content {
  border-radius: 5px;
  border: 0 solid rgba(0, 0, 0, 0.2);
}

.modal-common .modal-header .row {
  margin-right: 0;
  margin-left: 0;
  width: 100%;
}

.modal-common .modal-body {
  padding: 0;
}

.modal-common .modal-body .top-section-modal-body {
  background: #f3f4f7;
  padding: 30px;
  border-bottom: 1px solid #d8dbe6;
}

.modal-common .modal-body .top-section-modal-body .gray-box {
  background: #596979;
  padding: 15px;
  border-radius: 5px;
}

/* Modal-lg */

.modal-lg.modal-lg {
  max-width: 1000px;
  margin: 75px auto 0;
}

.modal-lg .modal-footer .test-start-content {
  padding: 15px 130px 0;
}

.modal-lg .modal-header {
  background: #525e6c;
  font-size: 16px;
  font-family: robotobold;
  color: #fff;
  text-transform: uppercase;
  padding: 5px 15px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: 0 solid #e4e7ea;
}

.modal-lg .modal-content {
  border-radius: 5px;
  border: 0 solid rgba(0, 0, 0, 0.2);
}

.modal-lg .modal-header .row {
  margin-right: 0;
  margin-left: 0;
  width: 100%;
}

.modal-lg .modal-body {
  padding: 0;
}

.modal-lg .modal-body .top-section-modal-body {
  background: #f3f4f7;
  padding: 30px;
  border-bottom: 1px solid #d8dbe6;
}

.modal-lg .modal-body .top-section-modal-body .gray-box {
  background: #596979;
  padding: 15px;
  border-radius: 5px;
}

.popup-tile {
  padding: 12px;
  border-radius: 5px;
}

.top-section-modal-body .gray-box .name-info {
  padding: 12px 0;
}

.top-section-modal-body .gray-box .name-info .title {
  font-size: 18px;
  font-family: robotobold;
  color: #fff;
  line-height: 18px;
  margin-bottom: 4px;
}

.top-section-modal-body .gray-box .name-info .label {
  font-size: 12px;
  color: #becedd;
}

.tile-img {
  width: 25%;
  margin-right: 5%;
}

.tile-img img {
  width: 100%;
}

.assesment-info {
  width: 70%;
}

.assesment-info .total {
  font-size: 24px;
  font-family: robotobold;
  color: #fff;
  line-height: 24px;
}

.assesment-info .total-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.modal-common .modal-body .bottom-section-modal-body {
  background: #fff;
  padding: 30px 30px 0;
  height: 400px;
  overflow-y: auto;
}

.modal-common .modal-body .bottom-section-modal-body .note {
  font-size: 18px;
  font-family: robotobold;
  color: #26344b;
  line-height: 18px;
  text-transform: uppercase;
}

.modal-common .modal-body .bottom-section-modal-body .note-list ul {
  padding-left: 12px;
  margin-top: 15px;
  margin-bottom: 0;
}

.modal-common .modal-body .bottom-section-modal-body .note-list ul li {
  font-size: 14px;
  font-family: robotomedium;
  color: #26344b;
  margin-bottom: 13px;
  list-style: disc;
}

.btn-primary {
  background-color: #2095f2 !important;
  border: 1px solid #2095f2 !important;
  color: #fff;
  font-family: robotobold;
  text-transform: uppercase;
  text-align: center;
  font-size: 14px;
  padding: 8px 20px 8px 20px;
  border-radius: 5px;
}

.btn-primary:hover {
  background-color: #006dca !important;
}

.btn-primary img,
.btn-secondary img {
  position: relative;
  bottom: 2px;
}

.btn-secondary {
  background-color: #fff;
  border: 1px solid #2095f2;
  color: #26344b;
  font-family: robotobold;
  text-transform: uppercase;
  text-align: center;
  font-size: 14px;
  padding: 8px 20px 8px 20px;
  border-radius: 5px;
  margin-right: 10px;
}

.btn-secondary:hover {
  color: #00061d;
  border-color: #006dca;
}

.all-timeline .task-timeline a {
  color: #257cc2;
  text-decoration: none;
}

.all-timeline .task-timeline a:hover {
  color: #01589e;
  cursor: pointer;
}

.count-tiles .c-title {
  padding-bottom: 0;
}

.count-tiles .text-value {
  font-size: 25px;
  line-height: 25px;
}

.ui-widget.ui-widget-content {
  z-index: 999 !important;
}

.top-filter-timeline {
  background: #ddd;
  padding: 15px;
}

.margin-bottom-m-20 {
  margin-bottom: -20px;
}

.top-filter-timeline label {
  float: left;
  width: 25%;
  padding-top: 5px;
}

.top-filter-timeline input {
  float: left;
  width: 75%;
}

.ui-datepicker-trigger {
  border: 0;
  background: 0 0;
}

.ui-datepicker-trigger i {
  position: absolute;
  right: 28px;
  top: 10px;
  color: #259ae7;
  font-size: 14px;
}

.journey-content {
  position: relative;
  top: -3px;
  background: #e6e6e6;
  padding: 12px 15px;
  border-radius: 5px;
}

.journey-content .task-timeline {
  color: #000;
}

.journey-content .task-time {
  color: #5b5b5b;
  font-size: 12px;
}

.journey-content.left,
.journey-content.right {
  position: relative;
}

.journey-content.left::before {
  content: "";
  position: absolute;
  top: 10px;
  right: -15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #e6e6e6;
}

.journey-content.right::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent #e6e6e6 transparent transparent;
}

.all-timeline {
  padding: 20px;
}

.bottom-border-radius-5 {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.s-timeline {
  padding-bottom: 60px;
  position: relative;
}

.circle-activity {
  width: 35px;
  height: 35px;
  border-radius: 100%;
  display: block;
  padding-top: 7px;
  position: relative;
  z-index: 99;
  margin: auto;
  text-align: center;
}

.circle-activity i {
  color: #fff;
  font-size: 17px;
}

.watch-time {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 3px;
  margin-top: 1px;
}

.s-timeline::after {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  content: "";
  margin: auto;
  left: 0;
  right: 0;
}

.s-timeline-yellow::after {
  background: #faa21b;
}

.bg-dark-gray {
  background: #bdcada;
}

.s-timeline-gray::after {
  background: #bdcada;
}

.bg-dark-green {
  background: #00841c;
}

.bg-dark-yellow {
  background: #faa21b;
}

.bg-dark-violet {
  background: #cf66cd;
}

.s-timeline-violet::after {
  background: #cf66cd;
}

.bg-course {
  background: #4dbd74;
}

.s-timeline-course::after {
  background: #4dbd74;
}

.bg-lesson {
  background: #989898;
}

.s-timeline-lesson::after {
  background: #989898;
}

.bg-assesment {
  background: #20a8d8;
}

.s-timeline-assesment::after {
  background: #20a8d8;
}

.bg-quiz {
  background: #f86c6b;
}

.s-timeline-quiz::after {
  background: #f86c6b;
}

.file-upload .file-select {
  display: block;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.file-upload .file-select:hover .file-select-button {
  opacity: 0.8;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.file-upload .file-select .file-select-button {
  padding: 0;
  display: inline-block;
}

.file-upload .file-select .file-select-name {
  display: inline-block;
  padding: 0;
}

.file-upload .file-select input[type="file"] {
  z-index: 100;
  cursor: pointer;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
}

.modal-footer > :not(:first-child) {
  margin-left: 0;
}

#assignment-modal .modal-common .modal-header {
  padding: 10px 15px;
}

#assignment-modal .modal-common .modal-header .title {
  padding-top: 0;
}

#assignment-modal .modal-common .modal-header .close {
  padding: 0 0;
}

.assignment-student-feedback .btn-submit-student,
.assignment-teacher-feedback .btn-submit-teacher {
  margin-left: 30px;
}

.assignment-student-feedback,
.assignment-teacher-feedback {
  display: none;
}

#assignment-modal .teacher-review .purpose-info::after {
  border-left: 0 solid #d2d6e1 !important;
  border-right: 0 solid #d2d6e1 !important;
}

.btn-add-attachment {
  padding: 0;
  border: 0;
  background: 0 0;
  text-align: center;
  vertical-align: top;
  outline: 0;
}

.all-download-link img {
  position: relative;
  top: -2px;
}

#assignment-modal .top-section-modal-body .gray-box .name-info {
  padding: 0;
}

.top-section-modal-body .gray-box .name-info .label span {
  font-size: 18px;
  font-family: robotobold;
  color: #fff;
  line-height: 18px;
  margin-bottom: 4px;
}

.font-24 {
  font-size: 24px !important;
}

.total-mark {
  position: relative;
  top: 3px;
  line-height: 5px !important;
}

.attachment-tile {
  background: #edeef2;
  color: #26344b;
  font-size: 14px;
  font-family: robotobold;
  margin: 0;
}

.attachment-tile .title-container {
  padding: 10px 0;
  text-align: center;
}

.attachment-tile .title-container .title-tile {
  padding-top: 2px;
  text-align: left;
}

.download-btn {
  background: #d8d9e0;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
}

.download-btn:hover {
  opacity: 0.8;
}

.all-download-link {
  text-align: right;
  font-size: 12px;
  text-transform: uppercase;
  font-family: robotobold;
  color: #2998f1;
}

.bg-blue-opacity {
  background: #f3f4f7;
  border: 1px solid #d8dbe6;
}

.border-blue-opacity {
  border-bottom: 1px solid #d8dbe6;
}

.student-feedback-container .feedback .feedback-title,
.student-feedback-container .student-attachment .student-attachment-title {
  padding: 12px 15px;
  color: #26344b;
  font-size: 16px;
  font-family: robotobold;
  text-transform: uppercase;
  line-height: 16px;
}

.student-feedback-container .feedback .feedback-content,
.student-feedback-container .student-attachment .student-attachment-content {
  padding: 10px 15px;
}

.student-feedback-container .feedback .feedback-content .message-title {
  font-size: 14px;
  font-family: robotobold;
  color: #26344b;
  margin-bottom: 10px;
}

.student-feedback-container .feedback .feedback-content .message-content {
  font-size: 13px;
  color: #7a808c;
  margin-bottom: 10px;
}

.student-feedback-container .feedback .feedback-content,
.student-feedback-container .student-attachment .student-attachment-content {
  height: 130px;
  overflow-y: scroll;
}

.student-feedback-container
  .student-attachment
  .student-attachment-content
  .attachment-tile {
  background: #fff;
  color: #26344b;
  border: 1px solid #d8dbe6;
}

.attachment-tile:last-child {
  margin-bottom: 15px;
}

.teacher-review .circle-grade,
.teacher-review .purpose-info {
  position: relative;
  padding: 0 15px;
}

.teacher-review .purpose-info::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border-left: 0 solid #d2d6e1 !important;
  border-right: 1px solid #d2d6e1 !important;
}

.teacher-review .purpose-info .white-total {
  font-size: 15px;
  font-family: robotobold;
  color: #26344b;
}

.teacher-review .purpose-info .label-total {
  font-size: 12px;
  color: #6e6e70;
}

.teacher-review .grade.orange {
  background: #ff9700;
  border: 3px solid #e2bc86;
}

.teacher-review .grade {
  width: 40px;
  height: 40px;
  font-size: 14px;
  font-family: robotobold;
  color: #fff;
  text-align: center;
  padding-top: 7px;
  border-radius: 100%;
}

.teacher-review .purpose-info:first-child {
  padding-left: 0;
}

.bg-green-tile {
  background: #20a8d8;
  border: 0 !important;
}

.connected,
.exclude,
.handles,
.sortable {
  margin: auto;
  padding: 0;
  width: 310px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.sortable.grid {
  overflow: hidden;
}

.connected li {
  list-style: none;
  border: 1px solid #d2d6e1;
  background: #f3f4f7;
  color: #485163;
  margin: 5px 0;
  padding: 10px 15px;
  height: 40px;
  line-height: 16px;
  font-size: 14px;
}

.connected.no1 {
  position: relative;
}

.disable-div {
  cursor: not-allowed;
  pointer-events: none;
  background: #d8d9e0;
  height: auto;
}

.connected.no1 li {
  padding: 10px 20px 10px 15px;
  position: relative;
}

.connected.no1 li:after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 10px;
  height: 24px;
  margin: auto 0;
  background: #fff;
  border-top: 1px solid #d2d6e1;
  border-left: 1px solid #d2d6e1;
  border-bottom: 1px solid #d2d6e1;
  bottom: 0;
}

.connected.no2 li {
  padding: 10px 15px 10px 20px;
  position: relative;
}

.connected.no2 li:before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 10px;
  height: 24px;
  margin: auto 0;
  background: #f3f4f7;
  border-top: 1px solid #d2d6e1;
  border-left: 1px solid #d2d6e1;
  border-bottom: 1px solid #d2d6e1;
  bottom: 0;
}

.handles span {
  cursor: move;
}

li.disabled {
  opacity: 0.5;
}

.sortable.grid li {
  line-height: 80px;
  float: left;
  width: 80px;
  height: 80px;
  text-align: center;
}

#connected {
  width: 440px;
  overflow: hidden;
}

.connected {
  float: left;
  width: 220px;
}

.connected.no2 {
  float: right;
}

li.sortable-placeholder {
  border: 1px dashed #ccc;
  background: 0 0;
}

.limited-area {
  width: 600px;
  height: 600px;
}

.matching-pairs {
  width: 250px;
  float: left;
  margin-bottom: 15px;
}

.matching-pairs .ui-widget-content {
  border: 1px solid #d2d6e1;
  background: 0 0;
  color: #586070;
  padding: 12px;
}

.match-drag {
  width: 300px;
  float: left;
}

.match-option {
  font-size: 14px;
  color: #586070;
  padding: 12px;
  border: 1px solid #d2d6e1;
  font-weight: 400;
  background: 0 0;
}

.match-option.ui-state-highlight {
  background: #fffa90;
}

.flip-cart {
  padding: 15px 0 !important;
}

.title-sorting {
  padding: 0 15px;
}

.btn-close-expand-view {
  border: 0;
  background: 0 0;
  padding: 0 0 0 10px;
  margin: 0;
  line-height: 0;
  position: relative;
  top: -4px;
  opacity: 0.7;
}

.btn-close-expand-view:hover {
  opacity: 1;
}

.gradebook-detail .box-title {
  color: #26344b;
  padding: 0 0 10px;
  font-size: 16px;
}

.custom-search-area.bl-search.search-area .action-btns-on-search {
  width: 15% !important;
  margin-left: 3%;
  margin-right: 3%;
}

.custom-search-area.bl-search.search-area .action-btns-on-search ul li {
  width: 100%;
}

.action-btns-on-search ul li {
  list-style: none;
}

.filter-sort-btn {
  padding: 5px 7px;
  border: 0;
  color: #fff;
  cursor: pointer;
  position: relative;
  top: 2px;
  float: right;
}

.filter-btn {
  background: #e3e4e9;
  border: 1px solid #ccd4de;
  border-radius: 5px;
}

.action-btns-on-search ul {
  padding: 0;
  margin: 0;
}

.normal-button {
  display: block;
}

.hover-button {
  display: none;
}

.filter-btn.active .normal-button {
  display: none;
}

.filter-btn.active .hover-button {
  display: block;
}

.box-show-hide {
  background: #eef1f5;
  padding: 10px;
  position: relative;
  display: none;
  border-top: 1px solid #ccd4de;
  border-bottom: 1px solid #ccd4de;
  margin-top: 10px;
}

.btn-sort-type {
  background: #788599;
  color: #fff;
  font-size: 13px;
  padding: 5px 20px 5px 7px;
  position: relative;
  margin-right: 2px;
  border-radius: 4px;
  border: 0;
}

.filter-btn.active::before {
  content: "";
  position: absolute;
  top: 40px;
  width: 11px;
  height: 6px;
  z-index: 9;
  background: url(../img/sort-arrow.png) no-repeat;
  left: 0;
  right: 0;
  margin: auto;
}

.btn-sort-type.active,
.btn-sort-type:hover {
  color: #fff;
  background: #475468;
}

.desc-order {
  display: block;
  position: absolute;
  top: 7px;
  right: 7px;
  line-height: 3px;
}

.both-sort {
  display: block;
  position: absolute;
  top: 7px;
  right: 7px;
  line-height: 3px;
}

.tile-que-status .attempt-count {
  font-size: 14px;
  font-family: robotobold;
  color: #26344b;
}

.tile-que-status .label-que-attempt {
  font-size: 12px;
  font-family: robotomedium;
  color: #6d7d8f;
}

.right-borders {
  position: relative;
}

.margin-bottom-15 {
  margin-bottom: 15px;
}

.right-borders:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border-left: 1px solid #fff;
  border-right: 1px solid #b6ccde;
}

.grade-circle-tile {
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 13px;
  font-family: robotobold;
  color: #fff;
  border-radius: 100%;
  padding-top: 2px;
  margin-top: 5px;
}

.passed-border {
  border-bottom: 3px solid #4dbd74 !important;
}

.failed-border {
  border-bottom: 3px solid #f86c6b !important;
}

.grade-box-circle .grade.green,
.grade-circle-tile.green {
  background: #4dbd74;
  border: 3px solid #75d2a7;
}

.grade-box-circle .grade.orange,
.grade-circle-tile.orange {
  background: #ff9700;
  border: 3px solid #e2bc86;
}

.grade-box-circle .grade.violet,
.grade-circle-tile.violet {
  background: #7e57c2;
  border: 3px solid #a89ac5;
}

.blue-title,
.gradebook-detail .grid-box .grid-box-top .lesson-count {
  color: #2095f2;
}

.lesson-head span img {
  position: relative;
  bottom: 3px;
}

.common-tile-container-height {
  height: 613px;
  overflow-y: hidden;
  padding: 0 20px;
  display: block;
}

/* .note-attempt {
background: #d7edff;
border-radius: 5px;
padding: 7px 10px;
color: #26344b;
} */

.note-attempt {
  background: #d7edff;
  border-radius: 5px;
  padding: 7px 10px;
  color: #26344b;
  margin: 5px;
}

.note-text {
  color: #26344b;
  font-size: 14px;
  padding-top: 4px;
}

.count-attempt {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: #596979;
  text-align: center;
  padding-top: 5px;
  color: #fff;
  float: right;
  margin-top: -5px;
}

.grade-box-circle {
  padding: 0 5px;
}

.grade-box-circle .grade {
  width: 40px;
  height: 40px;
  font-size: 14px;
  font-family: robotobold;
  color: #fff;
  text-align: center;
  padding-top: 7px;
  border-radius: 100%;
}

.hover-icon {
  display: none;
}

.normal-icon {
  display: block;
}

.questionnarie-section {
  display: block;
}

.override-area .title,
.questionnarie-section .title {
  color: #26344b;
  font-size: 18px;
  font-family: robotobold;
  text-transform: uppercase;
  line-height: 18px;
}

.questionnarie-section .content {
  padding: 20px 40px;
}

.questionnarie-section .content .question-quiz {
  font-size: 16px;
}

.btn-ans {
  border: 0;
  border-radius: 5px;
  padding: 7px 15px;
  width: 80px;
}

.btn-yes {
  background: #4dbd74;
  color: #fff;
}

.btn-no {
  background: #788599;
  color: #fff;
}

.questionnarie-section
  .content
  .quiz
  li.question-list
  .que-ans
  ul
  li
  .custom-radio-button
  [type="radio"]:checked
  + label::after,
[type="radio"]:not(:checked) + label::after {
  background: #4dbd74;
}

.questionnarie-section .content .quiz li.question-list {
  display: block;
}

.override-block,
.override-summary {
  padding: 15px 15px 18px;
  margin-top: 15px;
}

.override-summary .profile-main {
  padding-top: 0;
}

.override-summary .reason-sec .content {
  padding-top: 8px;
}

.reason-sec .content {
  font-size: 14px;
  color: #26344b;
  font-family: robotobold;
}

.reason-sec .label {
  font-size: 12px;
  color: #969aa2;
}

.border-right-gray {
  position: relative;
}

.border-right-gray:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border-right: 1px solid #cbd0da;
}

.box-shadow-gray {
  -webkit-box-shadow: 0 0 15px 3px rgba(210, 214, 225, 1);
  -moz-box-shadow: 0 0 15px 3px rgba(210, 214, 225, 1);
  box-shadow: 0 0 15px 3px rgba(210, 214, 225, 1);
}

.override-block label {
  font-size: 12px;
  font-family: robotobold;
}

.override-block .btn-primary,
.override-block .btn-secondary {
  font-size: 12px;
}

.profile-teacher img {
  border-radius: 100%;
  margin-right: 10px;
  height: 50px;
}

.profile-main {
  padding-top: 10px;
}

.profile-main .staff-name {
  font-size: 16px;
  font-family: robotobold;
  color: #2095f2;
  margin-top: 5px;
}

.profile-main .staff-designation {
  font-size: 12px;
  color: #969aa2;
}

.override-btns {
  padding-top: 27px;
}

.border-bottom-blue-gray {
  border-top: 1px solid #dbdfe9;
  margin-top: 20px;
  margin-bottom: 20px;
}

.assesment-box {
  background: #4e5c6a;
  height: 117px;
  border-radius: 5px;
}

.assesment-box .right-box-assesment {
  background: #4e5c6a;
  color: #d9eaf8;
  font-size: 16px;
  font-family: robotomedium;
  line-height: 16px;
  position: relative;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}

.assesment-box .right-box-assesment:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-left: 1px solid #3b4855;
  border-right: 1px solid #8b96a1;
}

.assesment-box .right-box-assesment img {
  width: 18px;
  height: 18px;
  margin: auto;
}

.assesment-box .top-box-assesment {
  background: #6f7f8f;
  padding: 15px 15px;
  color: #d9eaf8;
  font-size: 16px;
  font-family: robotomedium;
  line-height: 16px;
  position: relative;
  border-top-left-radius: 5px;
}

.assesment-box .top-box-assesment:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #3b4855;
  border-bottom: 1px solid #8b96a1;
}

.assesment-box .bottom-box-assesment {
  background: #596979;
  padding: 17px 0;
  border-bottom-left-radius: 5px;
}

.assesment-box .bottom-box-assesment-grading {
  background: #596979;
  padding: 17px 0;
  border-bottom-left-radius: 5px;
}

.purpose-info {
  position: relative;
  padding: 0 15px;
}

.purpose-info:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border-left: 1px solid #3b4855;
  border-right: 1px solid #8b96a1;
}

.purpose-info .white-total {
  font-size: 15px;
  font-family: robotobold;
  color: #fff;
}

.purpose-info .label-total {
  font-size: 12px;
  color: #b3c2d1;
}

.lock-area {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(38, 52, 75, 0.5);
  width: 100%;
  height: 100%;
  right: 0;
  margin: auto;
  z-index: 99;
  pointer-events: none;
}

.lock-area img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.bg-lock-gray {
  background: #b5bac3;
}

.assesment-list {
  -webkit-box-shadow: 0 -4px 3px rgba(189, 189, 189, 0.7);
  -moz-box-shadow: 0 -4px 3px rgba(189, 189, 189, 0.7);
  box-shadow: 0 -4px 3px rgba(189, 189, 189, 0.7);
  position: fixed !important;
  bottom: 0;
  top: auto !important;
  left: 0;
  width: 100%;
  background: #fff;
  transition: 0.35s;
  z-index: 99999;
}

.bottom-0 {
  bottom: 0 !important;
  transition: 0.35s;
  height: 0 !important;
  padding: 0 !important;
}

.drag-height-div {
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  height: 250px;
  top: auto !important;
  transition: 0.35s;
}

.bg-gray-opacity {
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  transition: 0.35s;
}

.floater-btn {
  cursor: pointer;
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  margin: auto;
  width: 55px;
  text-align: center;
  background: #fff;
  height: 25px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  padding-top: 1px;
  -webkit-box-shadow: 0 -4px 3px rgba(189, 189, 189, 0.7);
  -moz-box-shadow: 0 -4px 3px rgba(189, 189, 189, 0.7);
  box-shadow: 0 -4px 3px rgba(189, 189, 189, 0.7);
}

.rotate-arrow {
  transform: rotate(180deg);
  padding-bottom: 5px;
}

.lessonwise-assesment .title-main {
  color: #26344b;
  font-size: 16px;
  font-family: robotobold;
  margin-bottom: 20px;
  margin-top: 20px;
}

.lessonwise-assesment ul {
  padding: 0;
  margin: 0;
}

.lessonwise-assesment ul li {
  list-style: none;
  width: 100%;
  float: left;
  margin-bottom: 10px;
}

.assesment-list a {
  border: 1px solid #d2d6e1;
  display: inline-block;
  background: #f3f4f7;
  position: relative;
  width: 100%;
}

.assesment-list a .lock-area {
  width: 100%;
}

.assesment-list a .lock-area img {
  width: 20px;
}

.bg-yellow {
  background: #d0a001;
}

.text-indent-div {
  padding: 7px 15px !important;
  width: 100%;
  text-align: center;
}

.margin-left-10 {
  margin-left: 10px;
}

.assesment-list a:hover {
  text-decoration: none;
}

.assesment-list a span.icon {
  float: left;
  padding: 10px 10px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.assesment-list a span.title {
  font-size: 16px;
  color: #26344b;
  float: left;
  padding: 9px 15px 9px 55px;
  width: 90%;
}

.assesment-list .grade-box-circle {
  float: right;
  padding-right: 15px;
  padding-top: 7px;
  width: 10%;
}

.assesment-list .type-box-circle,
.grid-box .type-box-circle {
  padding-right: 15px;
  padding-top: 7px;
  width: 10%;
}

.lesson-head .type-box-circle {
  width: 10%;
}

.assesment-list .type-box-circle .type,
.grid-box .type-box-circle .type,
.lesson-head .type-box-circle .type {
  width: 22px;
  height: 22px;
  font-size: 13px;
  font-family: robotobold;
  color: #fff;
  text-align: center;
  padding-top: 0;
  border-radius: 100%;
  display: inline-block;
}

.assesment-list .type-box-circle span.bg-warning.font-sm.type,
.grid-box .type-box-circle span.bg-warning.font-sm.type,
.lesson-head .type-box-circle span.bg-warning.font-sm.type {
  padding-top: 1px;
}

.assesment-list .grade-box-circle .grade {
  width: 28px;
  height: 28px;
  font-size: 13px;
  font-family: robotobold;
  color: #fff;
  text-align: center;
  padding-top: 1px;
  border-radius: 100%;
  display: inline-block;
}

.pagination-input {
  width: 50px;
  border: 1px solid #c7d1d8;
  border-radius: 3px;
  padding: 5px 5px;
  color: #2095f2;
  font-family: robotomedium;
  text-align: center;
}

.grid-box {
  background: #f3f4f7;
  border: 1px solid #b1c5d5;
  margin-top: 10px;
  position: relative;
}

.grid-box .lock-area {
  width: 100%;
}

.grid-box .lock-area img {
  width: 30px;
}

.grid-box-top {
  padding: 10px 15px;
}

.grid-box-bottom {
  padding: 10px 15px 5px;
}

.border-bottom-grid {
  border-top: 1px solid #b1c5d5;
}

.grid-box.active,
.grid-box:hover {
  background: #d7edff;
  border: 1px solid #b1c5d5;
  -webkit-box-shadow: 0 0 3px 2px rgba(212, 212, 212, 1);
  -moz-box-shadow: 0 0 3px 2px rgba(212, 212, 212, 1);
  box-shadow: 0 0 3px 2px rgba(212, 212, 212, 1);
}

.grid-box .grid-box-top .lesson-count {
  font-size: 16px;
  font-family: robotomedium;
  color: #26344b;
}

.grid-box .grid-box-bottom .chapter-name {
  font-size: 16px;
  font-family: robotomedium;
  color: #2095f2;
  line-height: 18px;
  margin-bottom: 0;
  margin-top: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.grid-box-bottom .circle {
  width: 40px;
  position: relative;
  margin-left: 0;
}

.grid-box-bottom .circle canvas {
  width: 40px;
  height: 40px;
  margin-top: 0;
}

.grid-box-bottom .circle strong {
  position: absolute;
  font-size: 10px;
  left: 50%;
  transform: translate(-50%);
  top: 12px;
}

.margin-top-30 {
  margin-top: 30px;
}

.toggle-btn img {
  line-height: 10px;
  position: relative;
  top: -5px;
}

.top-panel-white-box {
  position: relative;
}

.toggle-btn {
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
  margin: auto;
  width: 50px;
  background: #fff;
  color: #2095f2;
  text-align: center;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  font-size: 20px;
  border-left: 1px solid #d9e0e9;
  border-right: 1px solid #d9e0e9;
  border-bottom: 1px solid #d9e0e9;
  height: 25px;
  cursor: pointer;
  z-index: 9;
}

.slide-profile-height {
  width: 70px !important;
  transition: 0.35s ease-in;
}

.slide-thumb-height {
  width: 38px !important;
  transition: 0.35s ease-in;
}

.lesson-panel .tile-content,
.lesson-panel .top-panel-tile {
  height: 125px;
  overflow: hidden;
}

.toggle-height-60 {
  height: 60px !important;
  overflow: hidden;
}

.lesson-panel .tile-content {
  padding: 20px;
}

.custom-padding-tile-content {
  padding: 5px 7px !important;
}

.toggle-info {
  display: none;
}

.rotate-180 {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.btn-bar-index {
  background: #cbced3;
  padding: 10px 15px;
  text-align: right;
}

.hide-text-btn {
  display: none;
}

.btn-create-assessment,
.btn-create-assessment-blue,
.btn-create-course,
.btn-create-lesson,
.btn-create-pre-post,
.btn-create-unit,
.btn-questionnaire,
.export-pdf-btn,
.hide-all-tree-btn,
.show-all-tree-btn {
  padding: 5px 15px !important;
}

.modal-index .bottom-section-modal-body {
  height: 450px !important;
  padding: 12px 0 !important;
}

.treeview.level-one li {
  border-top: 1px solid #d0d0d0;
}
.treeview.level-one li {
  border-top: 1px solid #d0d0d0;
}
.treeview.level-one:first-child li:first-child {
  border-top: 0 solid #d0d0d0;
}

.treeview .level-three li,
.treeview .level-two li {
  border-top: 0 solid #000;
}

.treeview .level-three li span .normal-icon,
.treeview .level-two li span .normal-icon,
.treeview.level-one li a .normal-icon {
  display: inline-block;
  margin-right: 7px;
  position: relative;
  bottom: 2px;
}

.treeview .level-three li span .hover-icon,
.treeview .level-two li span .hover-icon,
.treeview.level-one li a .hover-icon {
  display: none;
  margin-right: 7px;
  position: relative;
  bottom: 2px;
}

.treeview .level-three li span .normal-icon,
.treeview .level-two li span:hover .normal-icon,
.treeview.level-one li a:hover .normal-icon {
  display: none;
}

.treeview .level-three li span .hover-icon,
.treeview .level-two li span:hover .hover-icon,
.treeview.level-one li a:hover .hover-icon {
  display: inline-block;
}

.treeview.level-one li a {
  font-size: 15px;
  font-family: robotobold;
  color: #26344b;
}

.treeview .level-two li span {
  font-size: 13px;
  font-family: robotobold;
  color: #3b485d;
}

.treeview .level-three li span {
  font-size: 13px;
  font-family: robotomedium;
  color: #515d6f;
}

.treeview,
.treeview ul {
  list-style-type: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.treeview li {
  line-height: 22px;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}

.treeview.level-one li {
  padding: 8px 40px 8px;
}

.treeview .level-two li {
  padding: 8px 20px 8px;
}

.treeview .level-three li {
  padding: 8px 20px 8px;
}

.treeview li.contains-items,
.treeview li.items-expanded {
  position: relative;
}

.treeview li a.collapsed .fa-caret-right {
  -ms-transform: rotate(0);
  -webkit-transform: rotate(0);
  transform: rotate(0);
}

.treeview li a .fa-caret-right {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.treeview li:hover {
  background-size: 24px 24px;
}

.modal-index.modal-common .modal-header {
  padding: 10px 15px;
}

.modal-index.modal-common .modal-header .title {
  padding-top: 0;
}

.modal-index.modal-common .modal-header .close {
  padding: 0 0;
}

.sort-arrow {
  margin-left: 3px;
}

.asc-sorting,
.both-sorting,
.desc-sorting {
  position: relative;
  top: -2px;
}

.my-assessment-single-view .assesment-box .top-box-assesment {
  border-top-right-radius: 5px;
}

.my-assessment-single-view .assesment-box .bottom-box-assesment {
  border-bottom-right-radius: 5px;
}

.top-que-type select {
  height: 36px;
}

.my-assessment-single-view {
  position: relative;
}

.close-single-my-assessment {
  position: absolute;
  top: -10px;
  right: -10px;
  cursor: pointer;
  opacity: 0.8;
}

.close-single-my-assessment:hover {
  opacity: 1;
}

.my-assessment-table tr:hover .assessment-link {
  color: #2095f2;
  cursor: pointer;
}

.my-assessment-table-2 .chapter-pagination {
  border-top: 0;
}

.last-child-border {
  position: relative;
}

.last-child-border:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border-left: 0 solid #3b4855 !important;
  border-right: 0 solid #8b96a1 !important;
}

.action-row-btns a:hover {
  opacity: 0.8;
}

.grip-icon {
  position: relative;
  left: -12px;
  cursor: pointer;
}

.top-assessment-panel.top-lesson-panel .top-list .right-content {
  width: 58%;
  padding: 5px 10px;
}

.circle-assessment-type {
  display: inline-block;
  width: 27px;
  height: 27px;
  border-radius: 100%;
  text-align: center;
  font-size: 15px;
  font-family: robotomedium;
  padding-top: 2px;
  color: #fff;
  margin-right: 10px;
}

.type-assignment {
  background: #f86c6b;
}

.type-test {
  background: #e3b21c;
}

.lesson-icon {
  background: #e7b614;
}

.course-assesment.lesson-assesment {
  border-bottom-left-radius: 5px;
}

.top-lesson-panel .top-list .right-content {
  width: 69%;
}

.top-unit-panel .top-panel-tile.top-list .right-content .title {
  margin-bottom: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.top-unit-panel .slide-thumb-height {
  width: 114px !important;
  transition: 0.35s ease-in;
}

.left-content.unit-thumb-img {
  margin: 12px 0 12px 12px;
  border-radius: 5px !important;
}

.top-lesson-panel .top-list .right-content .title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: robotomedium;
}

.left-content.unit-thumb-img img {
  border-radius: 5px !important;
}

.left-content.unit-thumb-img .black-layer {
  border-radius: 5px !important;
}

.margin-right-0 {
  margin-right: 0 !important;
}

.common-panel-circle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 100%;
  border: 2px solid #fff;
  text-align: center;
  margin: auto;
  color: #fff;
  font-family: robotomedium;
  font-size: 18px;
  z-index: 99;
}

.left-content .black-layer {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 0;
}

.my-unit-container {
  position: relative;
}

.autocomplete-category:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  margin: auto 75%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 10px 8px;
  border-color: transparent transparent #fff transparent;
}

.autocomplete-category {
  display: none;
  position: absolute;
  top: 132px;
  background: #fff;
  -webkit-box-shadow: 0 0 12px 1px rgba(143, 162, 181, 1);
  -moz-box-shadow: 0 0 12px 1px rgba(143, 162, 181, 1);
  box-shadow: 0 0 12px 1px rgba(143, 162, 181, 1);
  width: 100%;
  z-index: 99;
  border-radius: 5px;
}

.unit-clone-box {
  left: -500px;
  width: 210%;
}

.close-category {
  text-align: center;
  margin-top: -10px;
  margin-bottom: 5px;
}

.autocomplete-category ul {
  padding: 15px 15px 0;
}

.autocomplete-category ul li {
  background: #f3f4f7;
  border: 1px solid #d2d6e1;
  padding: 12px 15px;
  margin-bottom: 15px;
}

.autocomplete-category ul li .category-name {
  color: #3a475c;
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: robotomedium;
}

.autocomplete-category ul li:hover .category-name {
  color: #2095f2;
}

.autocomplete-category ul li:hover {
  background: #d7edff;
  -webkit-box-shadow: 0 0 5px 0 rgba(216, 225, 232, 1);
  -moz-box-shadow: 0 0 5px 0 rgba(216, 225, 232, 1);
  box-shadow: 0 0 5px 0 rgba(216, 225, 232, 1);
}

.autocomplete-category ul li .edit-category {
  display: none;
  float: right;
}

.autocomplete-category ul li:hover .edit-category {
  display: block;
}

.autocomplete-category ul li .category-icons {
  margin-top: 4px;
}

.autocomplete-category ul li .category-icons .normal-icon {
  display: block;
}

.autocomplete-category ul li .category-icons .hover-icon {
  display: none;
}

.autocomplete-category ul li:hover .category-icons .normal-icon {
  display: none;
}

.autocomplete-category ul li:hover .category-icons .hover-icon {
  display: block;
}

.top-unit-panel .toggle-height-60 {
  height: 70px !important;
}

.top-unit-panel .slide-profile-height {
  width: 85px !important;
}

.create-date {
  font-size: 9px;
  color: #656f7f;
  font-family: robotobold;
  text-transform: uppercase;
}

.create-date span {
  color: #2e3c52;
}

.btn-search-by-category {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0;
  width: 40px;
  padding: 0 10px !important;
}

.category-search .tab-content {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  height: 76px;
}

.category-search .tab-content .tab-pane {
  padding: 20px 15px;
}

.category-tabs.nav-tabs {
  border-bottom: 1px solid #d9dfed;
}

.category-tabs.nav-tabs .nav-item {
  margin-bottom: 0;
  width: 25%;
  text-align: center;
}

.category-tabs.nav-tabs .nav-link {
  font-size: 12px;
  color: #677181;
  font-family: robotomedium;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  padding: 7px 10px;
}

.category-tabs.nav-tabs .nav-link:focus,
.category-tabs.nav-tabs .nav-link:hover {
  border-bottom: 2px solid #2095f2;
}

.category-tabs.nav-tabs .nav-link.active {
  color: #26344b;
  background: 0 0;
  border-color: transparent;
  border-bottom-color: transparent;
  border-bottom-color: transparent;
  border-bottom: 2px solid #2095f2;
  font-family: robotobold;
}

.btn-create-course {
  margin-right: 10px;
}

.margin-right-15 {
  margin-right: 15px;
}

.padding-left-5 {
  padding-left: 5px;
}

.padding-right-5 {
  padding-right: 5px;
}

.border-lr-gray {
  border-left: 1px solid #c7cfda;
  border-right: 1px solid #c7cfda;
}

.course-lesson.unit-lesson {
  border-bottom-left-radius: 5px;
}

.course-part-three .title {
  font-size: 16px;
  color: #26344b;
  font-family: robotobold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.btn-toggle.btn-secondary.active {
  background-color: #49bc47 !important;
  -webkit-box-shadow: inset 0 0 5px 0 rgba(15, 147, 40, 1);
  -moz-box-shadow: inset 0 0 5px 0 rgba(15, 147, 40, 1);
  box-shadow: inset 0 0 5px 0 rgba(15, 147, 40, 1);
}

.btn-toggle.btn-sm {
  position: relative;
  border: none;
  height: 27px;
  width: 74px;
  border-radius: 20px;
}

.btn-toggle.btn-sm.focus,
.btn-toggle.btn-sm.focus.active,
.btn-toggle.btn-sm:focus,
.btn-toggle.btn-sm:focus.active {
  outline: 0;
}

.btn-toggle.btn-sm:after,
.btn-toggle.btn-sm:before {
  line-height: 26px;
  width: 0.5rem;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
  font-family: robotobold;
}

.btn-toggle.btn-sm:before {
  padding-left: 23px;
}

.btn-toggle.btn-sm:after {
  padding-left: 13px;
}

.btn-toggle.btn-sm:before {
  content: "Off";
  left: -0.5rem;
}

.btn-toggle.btn-sm:after {
  content: "On";
  right: -0.5rem;
  opacity: 0.5;
}

.btn-toggle.btn-sm > .handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 23px;
  height: 23px;
  border-radius: 100%;
  background: #fff;
  transition: left 0.25s;
}

.btn-toggle.btn-sm.active {
  transition: background-color 0.25s;
}

.btn-toggle.btn-sm.active > .handle {
  left: 49px;
  transition: left 0.25s;
}

.btn-toggle.btn-sm.active:before {
  opacity: 0.5;
}

.btn-toggle.btn-sm.active:after {
  opacity: 1;
}

.btn-toggle.btn-sm.btn-sm:after,
.btn-toggle.btn-sm.btn-sm:before {
  line-height: -0.5rem;
  color: #fff;
  letter-spacing: 0.75px;
  left: 0.4125rem;
  width: 2.325rem;
}

.btn-toggle.btn-sm.btn-sm:before {
  text-align: right;
}

.btn-toggle.btn-sm.btn-sm:after {
  text-align: left;
  opacity: 0;
}

.btn-toggle.btn-sm.btn-sm.active:before {
  opacity: 0;
}

.btn-toggle.btn-sm.btn-sm.active:after {
  opacity: 1;
}

.btn-toggle.btn-secondary {
  color: #6b7381;
  background: #bdc1c8;
  -webkit-box-shadow: inset 0 0 5px 0 rgba(162, 166, 173, 1);
  -moz-box-shadow: inset 0 0 5px 0 rgba(162, 166, 173, 1);
  box-shadow: inset 0 0 5px 0 rgba(162, 166, 173, 1);
}

.btn-toggle.btn-secondary:after,
.btn-toggle.btn-secondary:before {
  color: #6b7381;
}

.btn-toggle.btn-secondary.active {
  background-color: #ff8300;
}

.custom-modal-form-btn {
  padding: 13px 20px;
  background: #fff;
  border-top: 1px solid #bdc2c9;
}

.course-part-one,
.course-part-three,
.course-part-two {
  padding: 13px 20px;
}

.border-bottom-gray {
  border-top: 1px solid #bdc2c9;
}

.create-title {
  background: #5aa7e5;
  color: #fff;
  font-size: 16px;
  font-family: robotobold;
  padding: 13px 20px;
  text-transform: uppercase;
}

.container-padding-0 {
  padding: 0 !important;
}

.custom-course-modal-content {
  background: #fff;
}

.common-file-upload {
  position: relative;
}

.common-file-upload .file-upload {
  display: block;
  text-align: center;
  font-size: 12px;
}

.common-file-upload .file-upload .file-select {
  display: block;
  color: #26344b;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  position: relative;
}

.common-file-upload .file-upload .file-select .file-select-button {
  background: #2095f2;
  padding: 7px 15px;
  display: inline-block;
  color: #fff;
  text-transform: uppercase;
  font-size: 13px;
  border-radius: 4px;
  font-family: robotobold;
  width: 21%;
  float: left;
  margin-right: 3%;
  text-align: center;
}

.common-file-upload .file-upload .file-select .file-select-button img {
  position: relative;
  margin-left: 5px;
  bottom: 2px;
}

.common-file-upload .file-upload .file-select .file-select-name {
  display: inline-block;
  padding: 6px 15px 6px 15px;
  font-size: 13px;
  color: #26344b;
  font-family: robotobold;
  border: 1px solid #cfd0d7;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  border-radius: 5px;
  background: #f8f9fb;
  width: 76%;
  float: left;
}

.common-file-upload .file-upload .file-select:hover {
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.common-file-upload .file-upload .file-select:hover .file-select-button {
  background: #006dca;
  color: #fff;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.common-file-upload .file-upload.active .file-select {
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.common-file-upload .file-upload.active .file-select .file-select-button {
  background: #636a71;
  color: #fff;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.common-file-upload .file-upload .file-select input[type="file"] {
  z-index: 100;
  cursor: pointer;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
}

.common-file-upload .file-upload .file-select.file-select-disabled {
  opacity: 0.65;
}

.common-file-upload .file-upload .file-select.file-select-disabled:hover {
  cursor: default;
  display: block;
  color: #34495e;
  cursor: pointer;
  margin-top: 5px;
  text-align: left;
  background: #fff;
  overflow: hidden;
  position: relative;
}

.common-file-upload
  .file-upload
  .file-select.file-select-disabled:hover
  .file-select-button {
  background: #dce4ec;
  color: #666;
  padding: 0 10px;
  display: inline-block;
}

.common-file-upload
  .file-upload
  .file-select.file-select-disabled:hover
  .file-select-name {
  display: inline-block;
  padding: 0 10px;
}

.create-new-course-div .form-group label {
  font-size: 14px;
  font-family: robotomedium;
  color: #26344b;
}

.course-part-three .title span,
.create-new-course-div .form-group label span {
  font-size: 14px;
  color: #d00d29;
}

.create-new-course-div .form-group label span.limit-image {
  color: #677181;
  font-size: 13px;
}

.create-new-course-div .form-group .form-control {
  font-size: 14px;
}

.all-grid-view
  .menu-list-btn.menu-list-btn
  .dropdown-menu
  .index-grid-btn:hover,
.all-tile-view
  .menu-list-btn.menu-list-btn
  .dropdown-menu
  .index-grid-btn:hover,
.main-common-tile
  .menu-list-btn.menu-list-btn
  .dropdown-menu
  .index-grid-btn:hover {
  color: #4dbd74 !important;
}

.all-grid-view .menu-list-btn.menu-list-btn .dropdown-menu .view-grid-btn:hover,
.all-tile-view .menu-list-btn.menu-list-btn .dropdown-menu .view-grid-btn:hover,
.main-common-tile
  .menu-list-btn.menu-list-btn
  .dropdown-menu
  .view-grid-btn:hover {
  color: #e7b614 !important;
}

.all-grid-view .menu-list-btn.menu-list-btn .dropdown-menu .edit-grid-btn:hover,
.all-tile-view .menu-list-btn.menu-list-btn .dropdown-menu .edit-grid-btn:hover,
.main-common-tile
  .menu-list-btn.menu-list-btn
  .dropdown-menu
  .edit-grid-btn:hover {
  color: #2095f2 !important;
}

.all-grid-view
  .menu-list-btn.menu-list-btn
  .dropdown-menu
  .delete-grid-btn:hover,
.all-tile-view
  .menu-list-btn.menu-list-btn
  .dropdown-menu
  .delete-grid-btn:hover,
.main-common-tile
  .menu-list-btn.menu-list-btn
  .dropdown-menu
  .delete-grid-btn:hover {
  color: #f86c6b !important;
}

.bg-icon-index {
  background: #4dbd74;
}

.bg-icon-view {
  background: #e7b614;
}

.bg-icon-edit {
  background: #2095f2;
}

.bg-icon-delete {
  background: #f86c6b;
}

.icon-img {
  width: 24px;
  height: 24px;
  border-radius: 100%;
  padding: 2px 5px;
  /* padding: 2px 3px; */
  display: inline-block;
  margin-right: 5px;
}

.icon-img.user-mgt.bg-icon-index {
  width: 24px;
  height: 24px;
  border-radius: 100%;
  padding: 2px 5px;
  display: inline-block;
  margin-right: 5px;
}

.icon-img.clone.bg-icon-index {
  width: 24px;
  height: 24px;
  border-radius: 100%;
  padding: 2px 7px;
  display: inline-block;
  margin-right: 5px;
}

.bg-icon-msg {
  background: #718ad5;
}

.bg-icon-improve {
  background: #db7633;
}

.all-tile-view .menu-list-btn .dropdown-menu,
.main-common-tile .menu-list-btn .dropdown-menu {
  padding: 0;
  position: relative;
  top: 10px !important;
}

.all-tile-view .menu-list-btn .dropdown-menu:after,
.main-common-tile .menu-list-btn .dropdown-menu:after {
  content: "";
  position: absolute;
  top: -7px;
  right: 24px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7px 8px 7px;
  border-color: transparent transparent #fff transparent;
}

.all-grid-view .menu-list-btn .dropdown-menu {
  -webkit-box-shadow: 0 0 6px 2px rgba(195, 212, 222, 1);
  -moz-box-shadow: 0 0 6px 2px rgba(195, 212, 222, 1);
  box-shadow: 0 0 6px 2px rgba(195, 212, 222, 1);
  position: relative;
  padding: 0;
  left: -20px !important;
  top: -25px !important;
}

.all-grid-view .menu-list-btn .dropdown-menu:after {
  content: "";
  position: absolute;
  top: 5px;
  right: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 8px;
  border-color: transparent transparent transparent #fff;
}

.all-grid-view .menu-list-btn.menu-list-btn .dropdown-menu a {
  font-size: 12px;
  font-family: robotobold;
  color: #3b485d;
  text-transform: uppercase;
  border-bottom: 1px solid #e7ebf4;
}

.course-link {
  color: #2095f2;
}

.course-filter {
  background: #fff;
  padding: 15px;
  border: 1px solid #d9e0e9;
  border-radius: 5px;
}

.course-filter-btn {
  margin-top: 30px;
}

.course-filter-btn .btn-cancel,
.course-filter-btn .btn-submit {
  padding: 6px 20px;
}

.course-filter .form-group label {
  font-size: 14px;
  font-family: robotobold;
  color: #26344b;
}

.course-filter .form-group .form-control {
  border: 1px solid #cfd0d7;
}

.black-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;

}
/* border-top-left-radius: 5px;
border-top-right-radius: 5px; */
.course-unit {
  border-bottom: 3px solid #20a8d8;
  border-bottom-left-radius: 5px;
}

.course-lesson {
  border-bottom: 3px solid #e7b614;
}

.course-assesment {
  border-bottom: 3px solid #f86c6b;
  border-bottom-right-radius: 5px;
}

.course-top-btn {
  margin-top: 2px;
  margin-right: 10px;
}

.course-tile-top .menu-list-btn {
  float: left;
}

.course-tile-top .menu-list-btn a {
  color: #fff;
}

.margin-0 {
  margin: 0;
}

.course-tile-top {
  position: relative;
}

.course-tile-top .course-image {

  display: block;
  width: 100%;
  /* height: 130px; */
  height: 23vh;
  border: none;
  transform: scale(1);
  transition: all 1s;
}
/* border-top-left-radius: 5px;
  border-top-right-radius: 5px; */
.course-row {
  position: absolute;
  top: 40px;
  left: 10px;
  width: 100%;
  z-index: 9;
}

.course-icon {
  background: #4dbd74;
}

.unit-icon {
  background: #20a8d8;
}

.course-row .common-icon-circle {
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 100%;
  font-size: 18px;
  font-family: robotomedium;
  color: #fff;
  text-align: center;
  display: inline-block;
}

.course-row .course-name {
  font-size: 13px;
  font-family: robotomedium;
  color: #fff;
  display: block;
  margin-top: 2px;
  line-height: 22px;
}

.course-tile-bottom {
  background: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.bottom-counts-course {
  text-align: center;
  padding: 5px 0;
}

.border-right-course {
  position: relative;
}

.border-right-course:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: #dbdbdb;
}

.bottom-counts-course .label {
  font-size: 11px;
  font-family: robotomedium;
  color: #677181;
}

.bottom-counts-course .count {
  font-size: 17px;
  font-family: robotobold;
  color: #26344b;
}

.title-single {
  font-size: 20px;
  font-family: robotobold;
  color: #26344b;
  text-transform: uppercase;
}

.btn-draft {
  display: inline-block;
  position: relative;
  margin-right: 15px;
  margin-top: 7px;
}

.notif-count {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 15px;
  height: 15px;
  color: #fff;
  font-size: 10px;
  text-align: center;
  background: #e7b614;
  border-radius: 100%;
  padding: 0;
}

.common-hover-btn .hover-view-btn {
  display: none;
}

.common-hover-btn .normal-view-btn {
  display: block;
}

.common-hover-btn.active .hover-view-btn,
.common-hover-btn:hover .hover-view-btn {
  display: block;
}

.common-hover-btn.active .normal-view-btn,
.common-hover-btn:hover .normal-view-btn {
  display: none;
}

.common-hover-btn {
  background: 0 0;
  border: 0;
  padding: 0;
}

.btn-create-course img {
  position: relative;
  bottom: 0 !important;
}

.layout-view-type {
  padding: 7px 0 0;
  margin: 0;
}

.layout-view-type li {
  display: block;
  list-style: none;
  float: left;
}

.layout-view-type li button {
  margin: 0 5px;
}

.quote-slide .owl-nav {
  position: absolute;
  top: 30px;
  width: 100%;
  left: 0;
}

.multiselect-selection .custom-select {
  background: #fff url(../img/angle-down.png) no-repeat 97% 50%;
  height: auto;
  padding: 0;
  border: 0;
}

.multiselect-selection .multiselect:focus,
.multiselect-selection .multiselect:hover {
  border-color: #8ad4ee;
  outline: 0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075),
    0 0 5px rgba(138, 212, 238, 0.5);
}

.multiselect-selection .multiselect {
  width: 100%;
  border: 1px solid #e4e7ea;
  background: 0 0;
  font-size: 12px;
  color: #515d6f;
  padding: 5px 15px 5px 8px;
  height: 36px;
  text-align: left;
  border-radius: 0.25rem;
  overflow: hidden;
}

.multiselect-selection .multiselect.dropdown-toggle::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0 solid;
  border-right: 0 solid transparent;
  border-bottom: 0;
  border-left: 0 solid transparent;
}

.multiselect-selection .multiselect-container > li > a {
  padding: 0;
  width: 100%;
}

.multiselect-selection .multiselect-container > li > a > label {
  margin: 0;
  height: 100%;
  cursor: pointer;
  font-weight: 400;
  padding: 5px 15px 5px 15px;
  width: 100%;
  color: #465161;
}

.multiselect-selection .btn-group {
  width: 100%;
}

.selection-box {
  font-size: 12px;
  color: #515d6f;
  padding: 5px 15px 5px 5px;
}

.selection-box.custom-select {
  background: #fff url(../img/angle-down.png) no-repeat 92% 50%;
}

.multiselect-selection
  .multiselect-container
  > li
  > a
  > label
  > input[type="checkbox"] {
  margin-bottom: 0;
  margin-right: 5px;
  position: relative;
  bottom: -2px;
}

.multiselect-selection .dropdown-menu {
  width: 100%;
  margin: 0;
}

.right-below-content {
  margin-top: 2px;
}

.border-bottom-iftxt {
  border-bottom: 1px solid #dbdfe9;
  width: 100%;
  margin-left: 30px;
  margin-right: 30px;
}

.activity-timeline .col-xl-2 {
  max-width: 32px;
}

.padding-top-7 {
  padding-top: 7px;
}

.padding-bottom-20 {
  padding-bottom: 20px;
}

.bg-violet {
  background: #8966c7;
}

.activity-timeline.all-timeline {
  padding: 20px 0 20px 8px;
}

.activity-timeline .circle-activity {
  width: 14px;
  height: 14px;
  padding-top: 0;
  position: relative;
  left: 0;
}

.activity-timeline .circle-activity i {
  font-size: 5px;
  position: relative;
  bottom: 7px;
}

.activity-timeline .timeline-grayish {
  position: relative;
}

.activity-timeline .timeline-grayish:after {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  content: "";
  margin: auto;
  left: 0;
  background: #d4dae0;
  right: auto !important;
}

.activity-timeline .journey-content {
  position: relative;
  top: -3px;
  background: 0 0;
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid #e4e4e4;
  border-radius: 0;
  padding-bottom: 10px;
}

.activity-timeline .journey-content.right::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent;
}

.activity-timeline .journey-content .task-time {
  color: #7d8593;
  font-size: 11px;
  text-transform: uppercase;
  font-family: robotobold;
}

.activity-timeline.all-timeline .task-timeline a {
  color: #26344b;
  text-decoration: none;
  font-size: 12px;
  font-family: robotomedium;
}

.activity-timeline.all-timeline .task-timeline a:hover {
  color: #26344b;
  cursor: default;
}

.activity-timeline .s-timeline {
  padding-bottom: 15px;
}

.admin-quote .img-quate-right {
  position: absolute;
  right: 0;
  top: 105px;
}

.full-img {
  width: 100%;
}

.full-img img {
  width: 100%;
}

.height-330 {
  height: 330px;
}

.bg-graph-yellow {
  background: #da9f29;
}

.bg-graph-orange {
  background: #d25400;
}

.selected-yr {
  color: #465161;
  font-size: 12px;
}

.square-common {
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 5px;
  position: relative;
  bottom: -1px;
}

.margin-bottom-20 {
  margin-bottom: 20px;
}

.margin-left-0 {
  margin-left: 0;
}

.margin-right-0 {
  margin-right: 0;
}

.padding-top-15 {
  padding-top: 15px;
}

.title-db-admin-section {
  color: #26344b;
  font-size: 16px;
  font-family: robotobold;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.count-admin-db {
  font-size: 32px;
  font-family: robotobold;
  color: #fff;
  line-height: 30px;
  font-weight: 400;
}

.admin-db-label {
  font-size: 13px;
  font-family: robotobold;
  color: #fff;
  text-transform: uppercase;
}

.bg-gray-dark {
  background: #465161;
}

.border-right-faint-gray,
.border-right-static {
  position: relative;
}

.border-right-static:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-left: 1px solid #242b35;
  border-right: 1px solid #7e8691;
  height: 100%;
}

.border-right-faint-gray::after {
  content: "";
  position: absolute;
  top: 0;
  right: -15px;
  height: 100%;
  border-right: 1px solid #ddd;
}

.user-static-label {
  font-size: 12px;
  color: #485363;
  text-transform: uppercase;
}

.user-static-count {
  font-size: 28px;
  font-family: robotobold;
}

.user-count-green {
  color: #16a086;
}

.user-count-yellow {
  color: #da9f29;
}

.user-count-orange {
  color: #d25400;
}

.user-count-gray {
  color: #373737;
}

.border-bottom-static-gray {
  border-bottom: 1px solid #ddd;
}

.school-static-mre-count {
  font-size: 20px;
  font-family: robotobold;
  line-height: 20px;
}

.school-static-mre-label {
  color: #515d6f;
  font-size: 9px;
  text-transform: uppercase;
}

.stat-count-orange {
  color: #f36438;
}

.stat-count-green {
  color: #27ba55;
}

.stat-count-blue {
  color: #4d6aca;
}

.stat-count-pink {
  color: #e33098;
}

.user-static .border-right-faint-gray::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border-right: 1px solid #ddd;
}

.title-school-stat {
  font-size: 16px;
  font-family: robotomedium;
  color: #26344b;
  margin-bottom: 20px;
}

.descriptive-question .create-new-course-div .form-group .form-control {
  font-size: 13px;
  color: #26344b;
  border: 1px solid #cfd0d7;
}

.match-option-ans .enter-answer {
  width: 70%;
}

.descriptive-question .create-new-course-div {
  display: block;
}

.descriptive-question .main .container-fluid {
  padding: 0;
}

.descriptive-question-m-20 {
  margin: 0 -20px;
}

.descriptive-question .custom-course-modal-content {
  background: 0 0;
}

.label-green {
  color: #04b541 !important;
}

.label-red {
  color: #e12422 !important;
}

.descriptive-question .app-body {
  background: #f8f9fb;
}

.descriptive-question .course-part-two {
  background: #fff;
}

.btn-ans-add {
  position: absolute;
  right: 0;
  border: 0;
  background: 0 0;
}

.option-action {
  text-align: right;
}

.enter-answer {
  padding-right: 30px;
}

.btn-option {
  border: 0;
  background: 0 0;
  padding: 0 2px;
}

.btn-ans-add:hover,
.btn-option:hover {
  opacity: 0.8;
}

.match-option-set li .option-action {
  margin-top: 8px;
}

.options-set {
  padding: 0;
}

.options-set li {
  margin-bottom: 20px;
}

.custom-check.form-check {
  padding-left: 0;
}

.custom-check label {
  font-size: 13px;
  color: #26344b;
}

.custom-check input[type="checkbox"] {
  display: none;
}

.custom-check input[type="checkbox"] + span {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 20px;
  color: #000;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  font-size: 12px;
}

.custom-check input[type="checkbox"] + span:last-child {
  margin-bottom: 0;
}

.custom-check input[type="checkbox"] + span:before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border: 1px solid #3398e6;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all 0.12s, border-color 80ms;
  transition: all 0.12s, border-color 80ms;
}

.custom-check input[type="checkbox"]:checked + span:before {
  width: 7px;
  top: 0;
  left: 8px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.wizard-box {
  padding: 10px !important;
  margin-top: 20px;
  margin-bottom: 10px;
}

.complete-wizard a .breadcrumb-name .label-value-b,
.gsi-step-indicator.triangle a:hover .breadcrumb-name .label-value-b {
  font-family: robotomedium;
}

.gsi-step-indicator.triangle li:first-child a .breadcrumb-name {
  margin-left: -10px;
}

.gsi-step-indicator .left-content {
  width: 40px !important;
  height: 33px;
  overflow: hidden;
  border-radius: 8px!important;
}

.gsi-step-indicator li a .common-panel-circle {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.gsi-step-indicator .left-content img {
  width: 100%;
}

.gsi-step-indicator .left-content .black-layer {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
}

.breadcrumb-name .label-b {
  color: #24344d;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 12px;
}

.breadcrumb-name .label-value-b {
  color: #1f94f1;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.demo-div {
  position: fixed;
  width: 10px;
  height: 100%;
  background: #000;
  top: 0;
  right: 0;
  z-index: 9;
}

.toggle-btn-assignment {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #257cc3;
  color: #fff;
  height: 170px;
  width: 35px;
  z-index: 99;
  margin: auto;
}

.btn-primary{
  min-width: 100px!important;
}

.lessonwise-assesment{
  height:350px!important;
  overflow-y:auto!important;
}

.left-toggle-align.left-toggle {
  right: -20px;
  transition: all 0.5s ease;
}

.left-toggle {
  right: -44px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.right-toggle-align.right-toggle {
  left: -20px;
  transition: all 0.5s ease;
}

.right-toggle {
  left: -50px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.toggle-btn-assignment .btn-label {
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  margin-top: 75px;
  font-size: 16px;
  width: 130px;
  margin-left: -48px;
  text-align: center;
}

.toggle-btn-assignment .btn-label span img {
  position: relative;
  top: -2px;
  margin-right: 5px;
}

.toggle-btn-assignment .btn-label span {
  display: inline-block;
}

.mobile-edit {
  display: none;
}

.desktop-edit {
  display: block;
}

.profile-top-bar {
  background: #202b3d;
  color: #fff;
  font-size: 13px;
  color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  word-wrap: break-word;
}

.btn-change-profile-pic {
  position: absolute;
  bottom: 10px;
  right: -8px;
  border: 0;
  background: 0 0;
  color: #fff;
  font-size: 16px;
  padding: 0;
}

.common-display-tab .display-table {
  text-align: left;
}

.info-profile .name-profile {
  font-size: 16px;
  color: #fff;
  font-family: robotobold;
}

.info-profile .code-profile {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

.profile-phone {
  padding: 0 15px;
}

.profile-icons svg {
  font-size: 14px;
  margin-right: 5px;
  width: 18px;
  text-align: center;
  position: relative;
  top: 2px;
  color: #1e95f3;
}

.email-id i {
  font-size: 15px;
  top: 0;
}

/* .personal-info {
padding: 0 10px
} */

.personal-info .label-value-profile {
  font-family: robotobold;
}

.personal-info .edit-profile {
  text-align: right;
}

.personal-info .edit-profile:hover {
  opacity: 0.7;
  cursor: pointer;
}

.personal-info .social-links span {
  font-size: 18px;
  margin: 0 5px;
  color: #1e95f3;
}

.personal-info .social-links a:hover {
  color: #3fb6ff;
}

.personal-info .social-links a:last-child {
  margin-right: 0;
}

.padding-bottom-5 {
  padding-bottom: 5px;
}

@media (max-width: 991px) and (min-width: 768px) {
  .profile-picture {
    position: relative;
    width: 100px;
  }
  .profile-phone {
    padding: 0 15px 0 30px;
  }
  .mobile-edit {
    display: block;
    position: absolute;
    top: 5px;
    right: 25px;
  }
  .desktop-edit {
    display: none;
  }
  .profile-address-info,
  .profile-other-info {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .profile-main-info {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .profile-other-info.tab-other-info {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .common-display-tab .display-table {
    position: relative;
    padding: 10px 10px;
  }
  .personal-info {
    padding: 0 10px 0 0;
  }
  .desktop-other-info {
    display: none;
  }
  .tab-other-info {
    display: block;
  }
}

@media (max-width: 1199px) and (min-width: 992px) {
  .bottom-add-strip .padding-right-5 {
    padding-right: 15px;
  }
  .telephone-no {
    float: left;
  }
  .gender-info {
    width: 50%;
  }
  .unit-clone-box {
    left: -464px;
    width: 268%;
  }
  .profile-address-info,
  .profile-other-info {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .profile-phone {
    padding: 0 15px 0 30px;
  }
  .profile-main-info {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .personal-info .social-links a {
    font-size: 16px;
    margin: 0 5px;
  }
  .tab-social {
    display: block;
  }
  .social-cont-link.social-area.left-float {
    float: right;
  }
  .profile-other-info.tab-other-info {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .personal-info {
    padding: 0 5px;
  }
  .common-display-tab {
    height: 100%;
  }
  .common-display-tab .display-table {
    position: relative;
  }
  .desktop-other-info {
    display: none;
  }
  .tab-other-info {
    display: block;
  }
  .info-profile {
    width: 51%;
  }
  .common-display-tab .display-table {
    position: relative;
    padding: 10px 10px;
  }
  .info-profile .name-profile {
    font-size: 14px;
  }
  .info-profile .code-profile {
    font-size: 13px;
  }
  .mobile-edit {
    display: block;
    position: absolute;
    top: 5px;
    right: 25px;
  }
}

@media (max-width: 1300px) and (min-width: 1200px) {
  .personal-info {
    padding: 0 5px;
  }
  .info-profile {
    width: 46%;
  }
  .unit-clone-box {
    left: -500px;
    width: 210%;
  }
  .profile-top-bar {
    font-size: 11px;
  }
}

.pro-comp.wizard-box {
  padding: 15px 0 !important;
}

@media only screen and (min-width: 300px) and (max-width: 345px) {
  .app-header .navbar-brand {
    padding-left: 5px !important;
    font-size: 11px !important;
    left: 115px !important;
    width: 38%;
  }
}

@media (min-width: 1700px) and (max-width: 2000px) {
  .lesson-panel .thumb {
    width: 70px;
  }
  .top-panel-tile.top-list .left-content {
    width: 10%;
  }
  .top-panel-tile .small-value {
    margin-top: 12px;
  }
  .top-panel-tile.top-list .circle canvas {
    margin-top: 0;
  }
  .top-panel-tile.top-list .circle strong {
    top: 20px;
  }
}

@media (min-width: 1400px) and (max-width: 2000px) {
  .lesson-panel .thumb {
    width: 70px;
  }
  .lock-area {
    width: 95%;
  }
  .other-info::before {
    left: -70px;
  }
  .full-profile-widget .profile-info {
    margin-left: -80px;
  }
  .document-row .doc-name {
    margin-left: -75px;
  }
}

@media (min-width: 1400px) and (max-width: 1600px) {
  .top-panel-tile.top-list .left-content {
    width: 11%;
  }
  .other-info::before {
    left: -70px;
  }
}

@media (min-width: 1200px) and (max-width: 1300px) {
  .top-box .card-body {
    padding: 15px 15px;
  }
  .unit-clone-box {
    left: -500px;
    width: 210%;
  }
  .complete-task .text-value {
    font-size: 12px !important;
  }
  .complete-task .text-muted {
    font-size: 10px !important;
  }
  .top-box .text-muted {
    font-size: 10px;
  }
  .lesson-panel .tile-content {
    padding: 23px 20px;
  }
  .lesson-panel .top-panel-tile .small-value {
    font-size: 11px;
    color: #26344b;
  }
  .lesson-panel .top-panel-tile .small-name {
    font-size: 11px;
    color: #90959f;
  }
  .top-panel-tile.top-list .left-content {
    width: 13%;
  }
  .full-profile-widget .profile-info .address,
  .full-profile-widget .profile-info .other-detail,
  .other-info .content,
  .other-info .label {
    font-size: 13px;
  }
}

@media screen and (max-width: 1199px) {
  .other-info::before {
    width: 100%;
    height: 1px;
    left: 0;
  }
  .other-info {
    margin-top: 15px;
    padding-top: 15px;
  }
  .bottom-add-strip {
    position: relative;
    padding-left: 0;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .que-ans .notAttempted-text {
    font-size: 20px;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    position: absolute;
    margin: 0 35%;
    border: 2px solid #f86c6b;
    border-radius: 5px;
    padding: 5px 10px;
    box-shadow: 0 0 15px 0 #f86c6b;
    opacity: 0.5;
  }
  .unit-clone-box {
    left: -464px;
    width: 268%;
  }
  .desktop-edit {
    display: none;
  }
  .telephone-no {
    float: left;
  }
  .tab-social {
    display: block;
  }
  .social-cont-link.social-area.left-float {
    float: right;
  }
  .social-links {
    margin-top: 0px;
    text-align: right;
  }
  .desktop-other-info {
    display: none;
  }
  .tab-other-info {
    display: block;
  }
  .step-name img {
    width: 15px;
  }
  .step-name {
    font-size: 12px;
  }
  .calendar-sidebar {
    width: 60%;
  }
  .top-list .top-tab-height {
    height: 300px;
  }
  .lesson-panel .thumb {
    margin-top: 5px;
  }
  .unit-content li .normal-icon {
    width: 13px;
  }
  .lesson-panel .tile-content .title a {
    height: 45px;
  }
  .lesson-panel .top-panel-tile.top-list .circle {
    right: 120px;
  }
  .lesson-panel .top-panel-tile.top-list .left-content {
    width: 20%;
    overflow: hidden;
  }
  .lesson-panel .top-list .right-content {
    width: 80%;
    padding: 5px 10px 5px 15px;
  }
  .assesment-list a {
    margin-bottom: 10px;
  }
  .assesment-list .col-lg-6.padding-left-0 {
    padding-left: 6px;
  }
  .top-panel-tile.top-list .img-con {
    width: 60px;
  }
  .top-panel-tile.top-list .circle {
    right: 240px;
  }
  .top-panel-tile.top-list .left-content {
    width: 23%;
  }
  .unit-content {
    text-align: left;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .tile-content .title a {
    height: 80px;
  }
  .document-row .doc-name {
    margin-left: -20px;
  }
  .full-profile-widget .profile-info {
    margin-left: 0;
  }
  .task {
    padding: 30px 5px;
  }
  .other-info .content {
    font-size: 14px;
  }
  .other-info .label {
    font-size: 13px;
  }
  .other-info .margin-right-20 {
    margin-right: 15px;
  }
  .full-profile-widget .profile-info .address,
  .full-profile-widget .profile-info .other-detail {
    font-size: 14px;
  }
  .circle {
    width: 60px;
    position: relative;
  }
  .fc-day-grid-event .fc-time {
    font-weight: 700;
    font-size: 9px;
  }
  .top-list .tab-content {
    height: 280px;
    overflow-y: scroll;
  }
  .list-c li .small-value {
    font-size: 13px;
    color: #26344b;
    font-family: robotobold;
    padding-top: 5px;
  }
  .top-list .left-content {
    width: 30%;
    float: left;
  }
  .top-list .right-content {
    width: 70%;
    float: left;
    padding: 4px 15px;
  }
}

@media screen and (max-width: 991px) {
  .mobile-margin-top-30 {
    margin-top: 30px;
  }
  .box-title {
    margin-bottom: 0;
  }
  .lesson-panel .tile-content {
    margin-top: 20px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .step-name {
    font-size: 12px;
  }
  .flip-cart {
    padding: 45px 0 !important;
  }
  .profile-address-info,
  .profile-other-info {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .unit-clone-box {
    left: -414px;
    width: 275%;
  }
  .stdnt .assesment-box .right-box-assesment {
    padding: 45px 15px !important;
  }
  .sw-theme-arrows > ul.step-anchor > li > a,
  .sw-theme-arrows > ul.step-anchor > li > a:hover {
    padding: 15px 0 15px 35px;
  }
  .sw-theme-arrows > ul.step-anchor > li > a::before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    margin-top: -50px;
    margin-left: 1px;
    left: 100%;
    z-index: 1;
  }
  .sw-theme-arrows > ul.step-anchor > li > a::after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    margin-top: -50px;
    left: 100%;
    z-index: 2;
  }
  .absolute-popup,
  .sw-theme-arrows .sw-toolbar {
    width: 75%;
  }
  .bgvid {
    width: 1200px;
  }
  .top-list .top-tab-height {
    height: 300px;
  }
  .assesment-list .col-lg-6.padding-left-0 {
    padding-left: 5px;
  }
  .assesment-list a {
    margin-bottom: 10px;
  }
  .chapter-img .chapter-title {
    font-size: 16px;
  }
  .lesson-height {
    height: 625px;
  }
  .lesson-panel .content-unit {
    width: 85%;
  }
  .lesson-panel .thumb {
    width: 85px;
  }
  .lesson-panel .top-panel-tile .small-value {
    margin-top: 15px;
  }
  .lesson-panel .top-list .right-content {
    width: 85%;
    padding: 10px 10px 10px 15px;
  }
  .lesson-panel .tile-content,
  .lesson-panel .top-panel-tile {
    height: auto;
  }
  .top-panel-tile.top-list .circle {
    margin-top: 0;
  }
  .lock-area {
    width: 94%;
  }
  .document-row .doc-name {
    margin-left: -8px;
  }
  .full-profile-widget .col-xl-9.padding-right-0 {
    padding-right: 15px;
  }
  .task-container .tab-border {
    border-right: 1px solid #1e639c;
  }
  .task-container .border-bottom-tile {
    border-bottom: 0 solid #1e639c;
  }
  .full-profile-widget .profile-info {
    margin-left: 0;
  }
  .full-profile-widget .tab-padding.padding-right-0 {
    padding-left: 0;
  }
  .bottom-dark-strip .margin-right-30 {
    margin-right: 15px;
  }
  .profile-image {
    margin: 0 auto 10px;
  }
  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .app-footer,
  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .main {
    margin-left: 90px;
  }
  .top-list .left-content {
    display: none;
  }
  .top-list .tab-content {
    height: 250px;
    overflow-y: scroll;
  }
  .top-list .right-content {
    width: 100%;
    float: none;
    padding: 10px 20px;
  }
  .circle {
    width: 60px;
    position: relative;
    margin: auto;
  }
  .margin-top-m-10 {
    margin-top: 10px;
  }
  .app-header .navbar-toggler-icon {
    height: 23px;
    background-image: url(../img/menu.svg);
  }
  .app-header .navbar-toggler:hover .navbar-toggler-icon {
    background-image: url(../img/hover.svg);
  }
  .app-header .navbar-brand {
    position: absolute;
    left: 13%;
    margin-left: -75.5px;
  }
  .personal-info .social-links a:first-child {
    margin-left: 0;
  }
  .telephone-no {
    padding-bottom: 10px;
    float: left;
  }
  .social-cont-link.float-left {
    float: right !important;
  }
  .social-links {
    margin-top: 0px;
    text-align: right;
  }
  .bottom-add-strip .padding-right-5 {
    padding-right: 15px;
  }
  .tab-social {
    display: block;
  }
  .social-cont-link.social-area.left-float {
    float: right;
  }
  .gender-info {
    width: 50%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .social-area {
    width: 22%;
  }
  .profile-address-info,
  .profile-main-info,
  .profile-other-info {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .social-links {
    margin-top: 20px;
    text-align: right;
  }
  .profile-picture {
    position: relative;
  }
  .mobile-edit {
    display: block;
    position: absolute;
    top: 5px;
    right: 15px;
  }
  .desktop-edit {
    display: none;
  }
  .common-display-tab .display-table {
    position: relative;
    padding: 10px 10px;
  }
  .personal-info .social-links a:first-child {
    margin-left: 0;
  }
  .telephone-no {
    padding-bottom: 10px;
  }
  .social-cont-link.float-left {
    float: right !important;
  }
  .social-links {
    margin-top: 45px;
  }
  .sw-theme-arrows .sw-toolbar {
    width: 90%;
  }
  .step-name img {
    margin-right: 0;
    width: 15px;
  }
  .sw-theme-arrows > ul.step-anchor > li > a,
  .sw-theme-arrows > ul.step-anchor > li > a:hover {
    padding: 15px 0 15px 35px;
  }
  .sw-theme-arrows > ul.step-anchor > li > a::before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    margin-top: -50px;
    margin-left: 1px;
    left: 100%;
    z-index: 1;
  }
  .sw-theme-arrows > ul.step-anchor > li > a::after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    margin-top: -50px;
    left: 100%;
    z-index: 2;
  }
  .step-name {
    font-size: 11px;
  }
  .flip-btn {
    text-align: right !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .login-box .left-content .box-content,
  .login-box .right-content .box-content {
    padding: 25px;
  }
  .login-box .left-content,
  .login-box .right-content {
    height: 300px;
  }
  .login-box .logo-container {
    width: 138px;
    margin: auto;
  }
  .bgvid {
    position: absolute;
    left: 0;
    top: 0;
    width: 1200px;
  }
  .inner-container {
    width: 560px;
    height: 300px;
    position: absolute;
    top: calc(50vh - 120px);
    left: calc(50vw - 280px);
    overflow: hidden;
  }

  .calendar-sidebar {
    width: 70% !important;
  }
  .lesson-detail .nav-link {
    padding: 10px 15px !important;
  }
  .lesson-panel .thumb {
    width: 80px !important;
  }
  .unit-content {
    text-align: right !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .circle canvas {
    margin-top: -10px !important;
  }
  .social-header .img-con {
    width: 60px !important;
  }
  .list-content .middle-content {
    width: 80% !important;
  }
  .circle strong {
    position: absolute;
    font-size: 12px;
    left: 50%;
    transform: translate(-50%);
    top: 10px !important;
  }
}

@media (min-width: 300px) and (max-width: 575px) {
  .assesment-box
    div.col-12.col-lg-2.col-md-2.col-sm-12.col-xl-1.padding-left-0 {
    padding-left: 15px;
    padding-right: 0;
  }
  .profile-address-info,
  .profile-main-info,
  .profile-other-info {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .social-links {
    margin-top: 5px;
    text-align: left;
    margin-left: 5px;
  }
  .grade-info,
  .school-name,
  .social-area,
  .date-info,
  .gender-info {
    width: 100%;
    margin-bottom: 5px;
  }
  .profile-address-info,
  .profile-main-info,
  .profile-other-info {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .profile-picture {
    width: 70px;
    height: 70px;
  }
  .info-profile .name-profile {
    font-size: 14px;
  }
  .info-profile .code-profile {
    font-size: 12px;
  }
  .mobile-edit {
    display: block;
    position: absolute;
    top: 5px;
    right: 15px;
  }
  .desktop-edit {
    display: none;
  }
  .common-display-tab .display-table {
    position: relative;
    padding: 5px 10px;
  }
  .personal-info {
    padding: 0 10px 0 7px;
  }
  .personal-info .social-links a:first-child {
    margin-left: 0;
  }
  .telephone-no {
    padding-bottom: 10px;
  }
  .social-cont-link.float-left {
    float: right !important;
  }
  .questionnarie-section .content {
    padding: 20px 30px;
  }
  .info-profile .name-profile {
    font-size: 14px;
  }
  .info-profile .code-profile {
    font-size: 12px;
  }
  .date-info,
  .gender-info,
  .grade-info,
  .school-name,
  .social-area {
    width: 100%;
    margin-bottom: 5px;
  }
  .que-ans .notAttempted-text {
    font-size: 20px;
    transform: rotate(335deg);
    -webkit-transform: rotate(335deg);
    position: absolute;
    margin: 0 10% !important;
    border: 2px solid #f86c6b;
    border-radius: 5px;
    padding: 5px 10px;
    box-shadow: 0 0 15px 0 #f86c6b;
    opacity: 0.5;
  }
  .common-panel .assesment-box {
    height: 100% !important;
  }
  .sw-theme-arrows > ul.step-anchor > li > a,
  .sw-theme-arrows > ul.step-anchor > li > a:hover {
    padding: 15px 0 15px 20px;
  }
  .sw-theme-arrows > ul.step-anchor {
    border: 0;
    background: 0 0 !important;
  }
  .sw-theme-arrows .sw-toolbar {
    position: relative;
    width: 100%;
  }
  .sw-theme-arrows > ul.step-anchor > li {
    width: 95%;
  }
  .sw-theme-arrows > ul.step-anchor > li > a::before {
    border-left: 30px solid #fff;
  }
  .sw-theme-arrows > ul.step-anchor > li > a::before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 27px solid transparent;
    border-bottom: 27px solid transparent;
    position: absolute;
    top: 93%;
    margin-top: -50px;
    margin-left: 1px;
    left: 100%;
    z-index: 1;
  }
  .sw-theme-arrows > ul.step-anchor > li > a::after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 27px solid transparent;
    border-bottom: 27px solid transparent;
    position: absolute;
    top: 93%;
    margin-top: -50px;
    left: 100%;
    z-index: 2;
  }
  .flip-btn {
    text-align: left !important;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .inner-container {
    width: 100%;
    height: 630px;
    position: absolute;
    top: 20px;
    left: 0;
    overflow: hidden;
  }
  .bgvid {
    position: absolute;
    left: 0;
    top: 0;
    width: 1180px;
  }
  .vid-container {
    position: relative;
    height: 100vh;
    overflow-y: scroll;
  }
  .login-box .left-content .box-content,
  .login-box .right-content .box-content {
    padding: 30px;
  }
  .login-box .left-content,
  .login-box .right-content {
    width: 90%;
    float: none;
    margin: auto;
  }
}

@media (min-width: 300px) and (max-width: 767px) {
  #card-22 .front .chart-attendance,
  .bubble-all-chart .chart-attendance {
    width: 90%;
  }
  .profile-phone {
    padding: 0 15px 0 25px;
  }
  .tab-other-info {
    display: none;
  }
  .tab-other-info {
    display: none;
  }
  .tab-social {
    display: none;
  }
  .height-700 {
    height: 600px;
    overflow: scroll;
  }
  .wizard > .steps > ul > li {
    width: 100%;
  }
  .wizard > .content > .body {
    padding: 8%;
  }
  .absolute-popup {
    width: 90%;
  }
  .calendar-sidebar {
    width: 90%;
  }
  .top-list .top-tab-height.chart-attendance {
    height: auto;
    overflow-y: scroll;
  }
  .slide-panel {
    margin-left: 0;
  }
  .grid-box .text-right img {
    width: 20px;
    float: right;
  }
  .lesson-detail .nav-link {
    padding: 10px 5px;
  }
  .btn-expand {
    display: none;
  }
  .chapter-img .chapter-title {
    font-size: 14px;
  }
  .lesson-height {
    display: none;
  }
  #lesson-tile.owl-carousel {
    padding: 0 20px;
    display: block;
  }
  #lesson-tile .owl-nav {
    position: absolute;
    top: 37%;
    width: 98%;
    left: 0;
    margin: auto;
    right: 0;
  }
  #lesson-tile.owl-carousel .owl-nav button.owl-next,
  #lesson-tile.owl-carousel .owl-nav button.owl-prev {
    outline: 0;
  }
  .lesson-height {
    display: none;
    height: 0 !important;
  }
  .expand-col-9.col-12.padding-left-0 {
    padding-left: 15px;
  }
  .assesment-list .col-12 {
    text-align: center;
  }
  .assesment-list a span.icon {
    padding: 10px 12px;
  }
  .assesment-list a {
    margin-bottom: 10px;
  }
  .assesment-list .col-lg-6.padding-left-0 {
    padding-left: 5px;
  }
  .flex-div {
    flex: 100%;
  }
  .lesson-panel .top-panel-tile.top-list .circle canvas {
    margin-top: 0;
  }
  .lesson-panel .top-panel-tile.top-list .circle strong {
    top: 20px;
  }
  .lesson-panel .tile-content,
  .lesson-panel .top-panel-tile {
    height: auto;
  }
  .top-panel-tile.top-list .circle canvas {
    margin-top: 0;
  }
  .top-panel-tile.top-list .circle strong {
    top: 20px;
  }
  .app-body {
    margin-top: 62px;
  }
  .top-panel-tile .small-value {
    padding-top: 5px;
    font-size: 14px;
  }
  .lock-area {
    width: 92%;
  }
  .unit-content {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 5px;
  }
  .social-icons {
    margin: 0 3px;
    font-size: 14px;
  }
  .full-profile-widget .btn-edit {
    margin-left: 0;
  }
  .document-row .doc-name {
    margin-left: -20px;
  }
  .full-profile-widget .profile-info .address,
  .profile-info .address {
    margin-bottom: 5px;
  }
  .full-profile-widget .col-xl-9.padding-right-0 {
    padding-right: 15px;
  }
  .address-book-pagination .pagination .page-item .page-link {
    font-size: 12px;
  }
  .full-profile-widget .profile-info {
    margin-left: 15px;
  }
  .other-info .margin-right-20 {
    margin-right: 12px;
  }
  .full-profile-widget .tab-padding.padding-right-0 {
    padding-left: 0;
  }
  .task {
    padding: 15px 20px;
  }
  .full-profile-widget .profile-image {
    margin: 0 auto 15px;
  }
  .profile-image {
    margin: 0 auto 10px;
  }
  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .app-footer,
  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .main {
    margin-left: 90px;
  }
  .list-view-custom {
    overflow-y: scroll;
    height: auto !important;
  }
  .img-quate-right {
    position: absolute;
    right: 5px;
    top: 52px;
  }
  .fc-scroller {
    height: auto !important;
  }
  .fc-toolbar h2 {
    margin: 0;
    font-size: 14px;
    position: relative;
    top: 5px;
    float: left;
    color: #2095f2;
  }
  fc button {
    font-size: 11px;
  }
  .top-list .tab-content {
    height: auto;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  #facebook,
  #linkedin,
  #twitter {
    height: auto;
    overflow-x: hidden;
  }
  .list-view-task .col-sm-4.padding-left-0,
  .task-list .padding-left-0 {
    padding-left: 15px;
  }
  .task-list .padding-right-0 {
    padding-right: 15px;
  }
  .circle strong {
    position: absolute;
    font-size: 12px;
    left: 50%;
    transform: translate(-50%);
    top: 30px;
  }
  .circle {
    width: 60px;
    position: relative;
    margin-left: 0;
    margin-top: 0 !important;
  }
  .circle canvas {
    width: 60px;
    height: 60px;
    margin-top: 10px;
  }
  .app-header .navbar-toggler-icon {
    height: 23px;
    background-image: url(../img/menu.svg);
  }
  .app-header .navbar-toggler:hover .navbar-toggler-icon {
    background-image: url(../img/hover.svg);
  }
  .social-header .img-con {
    width: 40px;
  }
  .list-c li .small-value {
    font-size: 14px;
    color: #26344b;
    font-family: robotobold;
    padding-top: 12px;
  }
  .app-header .nav {
    padding-right: 15px;
  }
  .app-header .navbar-brand {
    position: absolute;
    left: 108px;
    margin-left: -77.5px;
    font-size: 13px;
    width: 115px;
  }
  .top-list .left-content {
    display: none;
  }
  .top-list .right-content {
    width: 100%;
    float: non e;
    padding: 10px;
  }
  .journal-bottom {
    margin-bottom: 25px;
  }
}

/* Written by Pallavi */

.pointer {
  cursor: pointer;
}

.pointer:hover {
  border-bottom: 1px solid #63c2de;
}

.color-white {
  color: white !important;
}

.inp {
  border: none;
  border-bottom: 1px solid #1890ff;
  outline: none;
  width: 20% !important;
}

.font-size-12 {
  font-size: 12px !important;
}

.width-9 {
  width: 9% !important;
}

.transcript-switch-label {
  width: 42px !important;
}

.transcript-switch {
  display: inline-block;
  height: 20px !important;
}

.transcript-switch-slider::before {
  position: absolute;
  top: 1.5px !important;
  left: 1px !important;
  box-sizing: border-box;
  width: 15px !important;
  height: 15px !important;
  content: "";
  background-color: #fff;
  border: 1px solid #c8ced3;
  transition: 0.15s ease-out;
  border-radius: 0.125rem;
}

.transcript-switch-slider {
  position: relative;
  display: block;
  height: inherit;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #c8ced3;
  transition: 0.15s ease-out;
  border-radius: 0.25rem;
}

.transcript-switch-label .transcript-switch-slider::after {
  position: absolute;
  top: 50%;
  right: 1px;
  z-index: 1;
  width: 50%;
  margin-top: -0.5em;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: #c8ced3;
  text-align: center;
  text-transform: uppercase;
  content: attr(data-unchecked);
  transition: inherit;
}

.transcript-switch-pill .transcript-switch-slider {
  border-radius: 50em;
}

.transcript-switch-pill .transcript-switch-slider::before {
  border-radius: 50em;
}

.notification-time {
  color: #7d8593 !important;
  font-size: 11px;
  font-family: robotobold;
  text-transform: uppercase;
}

.notification-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.notification-des {
  padding-left: 1.5rem !important;
}

.notification-description {
  width: 300px;
}

.notificationList-description {
  width: 550px;
}

.notification-description p {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  /* font-size: 14px; */
  line-height: 1.5;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 20px !important;
}

.notificationList-description p {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 35px;
  margin: 0 auto;
  /* font-size: 14px; */
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 20px !important;
}

.width-500 {
  width: 750px !important;
}

.div-announcement {
  height: auto !important;
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  border-radius: 2px;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.43);
  /* border: 1px solid #000000; */
  padding: 10px;
  background-color: #ffc107c2 !important;
}

.customClass {
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.25);
}

.popover.customClass,
.popover.customClass .popover-content {
  background: #fff;
  color: #555555;
}

.popover.customClass.top > .arrow:after {
  border-top-color: #fff;
}

/* New student dashboard CSS */

.short-course-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.top-list .st-tab-content {
  max-height: 1800px;
  height: auto;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.main-common-tile {
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.43);
}

.course-Name {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
}

.st-circle {
  width: 45px;
  position: relative;
}

.box-shadow {
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.43);
}

.st-course-img {
  position: relative;
  width: 100%;
  height: 185px;
}

.st-progress {
  display: -ms-flexbox;
  display: flex;
  height: 0.3rem !important;
  overflow: hidden;
  font-size: 0.65625rem;
  background-color: #f0f3f5;
  border-radius: 0.25rem;
}

.st-overall-status {
  position: absolute;
  top: -18px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 100%;
  border: 4px solid #fff;
  padding: 1px 4px 3px;
}

.st-common-icon-circle {
  width: 35px;
  height: 35px;
  border: 2px solid #fff;
  border-radius: 100%;
  font-size: 18px;
  font-family: robotomedium;
  color: #fff;
  text-align: center;
  display: inline-block;
  top: 39%;
  left: 45%;
  position: absolute;
}

.st-badge {
  display: inline-block;
  padding-top: 3px;
  padding-bottom: 5px;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 10rem;
}

.gd-icon {
  background-color: #d0a001;
}

.title-progress {
  font-size: 13px;
  color: #26344b;
  font-family: robotomedium;
}

.course-tile-top .st-course-image {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: block;
  width: 100%;
  height: 130px;
  border: none;
  transform: scale(1);
  transition: all 1s;
  filter: blur(3px);
  -webkit-filter: blur(3px);
}

.font-20 {
  font-size: 20px !important;
}

.height-60 {
  height: 60px !important;
}

.font-18 {
  font-size: 18px !important;
}

.font-15 {
  font-size: 15px !important;
}

.width-400 {
  width: 400px !important;
}

.mb-35 {
  margin-bottom: 35px !important;
}

.left-0 {
  left: 0 !important;
}

.login-height {
    min-height: 750px !important;
    top: calc(35vh - 190px) !important;
}

.login-box .right-content-url {
  background: black;
  width: 45%;
  height: 100%;
  padding: 15px;
  float: left;
}
.course-tile-at-top {
  background: #ffff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.modal-lg.modal-lg2 {
  max-width: 400px;
  margin: 10px auto 0;
}
.modal-lg .modal-footer2 {
  display: inline-block;
  padding: 0 0 0px;
  border-top: 0 solid #e4e7ea;
}
.ad-uniqueName-status {
  /* position: absolute; */
  top: 30px;
  /* right: 297px; */
  width: 34px;
  height: 34px;
  border-radius: 100%;
  border: 4px solid #fff;
  padding: 1px 4px 3px;
  margin-top: 27px;
  margin-left: -26px;
}

#bg-source .pagination {
  font-size: 14px;
}
.border-none{
  border: none !important;
}

@media (min-width: 768px) and (max-width: 991px){
  .bgvid{
    width:2200px!important;
  }
}