body {
  margin: 0px;
  padding: 0px;
  font-family: "Open Sans", sans-serif;
  background: hsla(240, 7%, 81%, 0.15); background-repeat: no-repeat;
}
a,
a:hover {
  text-decoration: none;
  cursor: pointer;
}
button:focus, button.btn:focus{outline: 0; box-shadow: none;}
.container {max-width: 100%; padding:0px 50px;}
.container-fluid {max-width: 100%;}

/*---login section---*/
.login-page { border: 1px solid #e6e6e6a3; background: #fff; width: 450px; padding: 40px 50px 40px; margin: 70px auto 30px; border-radius: 10px; box-shadow: 0px 20px 30px -20px #66666691;}
.login-page .dash_logo { text-align: center;display: block; margin-bottom: 40px;}
.login-page .dash_logo img { height: 45px; margin: 0px auto;}
.loginBox { height: 260px; display: flex; justify-content: center; flex-direction: column;}
.login-page h2 { font-size: 20px; text-align: center; margin-top: 40px; color: #000; font-weight: 600;}
.login-page label {font-size: 13px; color: #333; font-weight: normal; margin-bottom: 0px;}
.login-page .form-control {  height: 25px;  border-radius: 0px;  font-size: 13px; border: none; border-bottom: 1px solid #e6e6e6; padding: 0px;}
.login-page .form-control:hover,
.login-page .form-control:focus {  outline: 0;  box-shadow: none;  border-color: #00a79d !important;}
.login-page .btn-login {  background: #00a79d;  padding: 10px 20px;  text-align: center;  font-size: 16px;  margin-top: 15px;  color: #fff;  display: flex;  justify-content: center;  align-items: center;  border-radius: 5px;  height: 45px; border: 1px solid #00a79d;  width: 100%;}
.login-page .btn-login:hover {  text-decoration: none;  transition: 0.3s;}
.login-checkbox {  display: flex;
  -webkit-box-pack: justify;  justify-content: space-between;}
.login-page .custom-checkbox label { line-height: 25px; cursor: pointer;}
.login-page .custom-control-input:checked ~ .custom-control-label::before {  border-color: #00a79d;  background-color: #00a79d;}
.forgotPassword {  display: flex;  justify-content: center;  align-items: center;  margin: 0px;}
.forgotPassword a {  display: flex;  font-size: 13px;  color: #333333;  justify-content: center;  align-items: center;  margin: 0px;}
.forgotPassword a:hover {  color: #00a79d;  text-decoration: none;}
.forgotPassword a span {  display: inline-flex; margin-right: 6px;  font-size: 11px;}

/*---header section---*/
header {  padding: 6px 15px;  background: #fff;  border-bottom: 1px solid #e7e7e7;  box-shadow: 0px 0px 4px #e1e1e1;}
header .navbar {  padding: 0px 0px;}
header .nav-logo {  height: 45px;}
header .navbar-expand-md .navbar-collapse { justify-content: flex-end;}
header .navbar-collapse ul .nav-item .nav-link, header .navbar-collapse ul .nav-item .nav-link:focus {  display: flex;  cursor: pointer;  padding: 0px;  font-size: 15px;  color: #333;  font-weight: normal;  align-items: center;  border: none;background: transparent; outline: 0;}
header .navbar-collapse ul li + li {  margin-left: 40px;}
header .user-info .nav-link.dropdown-toggle {  border: 1px solid #ecf5f3;  height: 38px;  display: flex !important;  justify-content: center;  align-items: center;  font-size: 15px;  color: #333;  border-radius: 4px;  padding: 0px 18px !important;  background: #ecf5f3;  transition: 0.1s;}
header .user-info .nav-link.dropdown-toggle:hover {  border-color: #12aea2;background: #12b2a6;color: #fff;}
header .dropdown.user-info {  margin-left: 40px;}
header .user-info .nav-link.dropdown-toggle span {  display: inline-flex;  margin-right: 8px;}
header .navbar-expand-md .navbar-nav {  align-items: center;}
header .dropdown-menu {  right: 0;  left: auto;  padding: 0px;  min-width: 200px;  overflow: hidden;  padding: 5px 5px;}
header .dropdown-menu .dropdown-item {  padding: 8px 12px;  font-size: 14px;  border-radius: 4px;}
header .dropdown-menu {  border: 1px solid #ecf5f3; box-shadow: 4px 4px 10px #cccccc5c;}
header .navbar-collapse ul .nav-item .nav-link:hover {  color: #12aea2;}
header .navbar-collapse ul .nav-item .nav-link .nav-icon {  background: url("../images/pearson-menu.png") no-repeat;  width: 25px;  height: 25px;  display: inline-flex;  margin-right: 2px;}
header .navbar-collapse ul .nav-item .nav-link .home-icon {  background-position: 0px 0px;}
header .navbar-collapse ul .nav-item .nav-link .course-icon {  background-position: -1px -25px;}
header .navbar-collapse ul .nav-item .nav-link .class-icon {  background-position: -1px -50px;}
header .navbar-collapse ul .nav-item .nav-link .report-icon {  background-position: -1px -75px;}
header .navbar-collapse ul .nav-item .nav-link:hover .home-icon { background-position: -26px 0px;}
header .navbar-collapse ul .nav-item .nav-link:hover .course-icon {  background-position: -26px -25px;}
header .navbar-collapse ul .nav-item .nav-link:hover .class-icon {  background-position: -26px -50px;}
header .navbar-collapse ul .nav-item .nav-link:hover .report-icon {  background-position: -26px -75px;}
header .dropdown-menu .dropdown-item span {  margin-right: 8px;}
.userProfileLeft .courseImage {  text-align: center;  height: 150px;}
.userProfileLeft .courseImage img {  height: 100%;  width: auto;  margin: 0px auto;}
.userProfileLeft .courseContent {  text-align: center;  margin-top: 20px;}
.userProfileLeft h2 {  font-size: 20px;  font-weight: 600;}
.courseType ul li button .profile-icon {  margin-right: 10px;}

/*---Dashboard section---*/
.main-wrapper {  padding: 15px 15px;}
.course-wrap {  overflow: hidden;  border-radius: 8px;  box-shadow: 4px 4px 10px #cccccc5c;  margin: 15px 0px;  transition: 0.5s;  border: 1px solid #cccccc7a;}
.course-wrap:hover {  box-shadow: 5px 5px 20px #ccc;  transform: scale(1.05);}
.courseImage {  position: relative;  overflow: hidden;  height: 175px;}
.courseImage img {  transition: 0.8s;  object-fit: cover;  width: 100%;  height: 100%;}
.editButton {  position: absolute;  right: 10px; top: 10px;  background: #ffffffe6;  width: 35px;  height: 35px;  border-radius: 50%;  display: flex;  justify-content: center;  align-items: center;  color: #12aea2;  font-size: 14px;  transition: 0.5s;}
.editButton:hover {  background: #12aea2;  color: #ffffff;  transform: scale(1.3);}
.courseContent {  background: #fff;  padding: 20px 20px;  transition: 0.5s;}
.courseContent h2 {  font-size: 16px;  color: #000;  font-weight: 600;  line-height: 20px;  margin-bottom: 10px;  height: 40px;  overflow: hidden;}
.courseContent p {  font-size: 14px;  color: #808080;  margin-bottom: 20px;}
.courseContent p span {  display: inline-flex;  color: #12aea2;  margin-right: 8px;}
.viewButton {    background: #12b2a6;    display: flex;    height: 45px;    justify-content: center;    align-items: center;    font-size: 15px;    border-radius: 4px;    color: #fff !important;    transition: 0.5s;    border: none;    width: 48%;}
.viewButton:hover {  transform: translateY(-1px);  box-shadow: 4px 4px 10px #a2a2a2;}

/*---Edit course section---*/
.left-paanel {background: #fff;padding: 20px;margin: 15px 0px;box-shadow: 4px 4px 10px #cccccc5c; min-height: 390px; border: 1px solid #cccccc40; border-radius: 4px;}
.left-paanel .courseImage {  border-radius: 4px;}
.left-paanel .courseContent {  background: transparent;  padding: 20px 0px;}
.left-paanel .courseContent h2 {  height: auto;}
.left-paanel .courseContent p {  margin-bottom: 0px;}
.courseType ul li {  display: flex;  width: 100%;  list-style: none;}
.courseType ul li + li {  margin-top: 12px;}
.courseType ul li button {  background: #ecf5f3;  display: flex;  width: 100%;  height: 45px;  padding: 8px 15px;  align-items: center;  font-size: 15px;  color: #000;  border-radius: 4px; border:none;}
.courseType ul li button .tab-icon {  background: url("../images/course-detail-icons.png") no-repeat;  width: 28px;  height: 28px;  display: inline-flex;  margin-right: 12px;}
.courseType ul li button .user-icon {  background-position: -6px -6px;}
.courseType ul li button .config-icon {  background-position: -6px -46px;}
.courseType ul li button .module-icon {  background-position: -6px -86px;}
.courseType ul li button .topic-icon {  background-position: -6px -126px;}
.courseType ul li button .lession-icon {  background-position: -6px -166px;}
.courseType ul li button:hover .user-icon,
.courseType ul li button.active .user-icon {  background-position: -46px -6px;}
.courseType ul li button:hover .config-icon,
.courseType ul li button.active .config-icon { background-position: -46px -46px;}
.courseType ul li button:hover .module-icon,
.courseType ul li button.active .module-icon {  background-position: -46px -86px;}
.courseType ul li button:hover .topic-icon,
.courseType ul li button.active .topic-icon {  background-position: -46px -126px;}
.courseType ul li button:hover .lession-icon,
.courseType ul li button.active .lession-icon {  background-position: -46px -166px;}
.courseType ul li button:hover,
.courseType ul li button.active {  background: #12b2a6;  color: #ffffff;}
.right-panel label,
.addPopup label {  font-size: 14px;  margin-bottom: 4px;  color: #333;  display: block;}
.right-panel .form-control,
.right-panel .form-control:hover,
.right-panel .form-control:focus,
.addPopup .form-control,
.addPopup .form-control:hover,
.addPopup .form-control:focus {  border: 1px solid #f2f2f2;  background: #f2f2f2;  height: 40px;  font-size: 14px;  color: #333;  box-shadow: none;}
.right-panel .button-group,
.addPopup .button-group {  margin-top: 20px;}
.right-panel .btn,
.addPopup .btn {  font-size: 15px;  color: #333;  background: #d0e6e0;  min-width: 115px;  height: 40px;  transition: 0.5s;  }
.right-panel input,
.addPopup input[type="file"] {  font-size: 13px;}
.right-panel .btn + .btn,
.addPopup .btn + .btn {  margin-left: 10px;}
.right-panel .btn:hover,
.addPopup .btn:hover {  transform: translateY(-1px);  box-shadow: 4px 4px 10px #3333332e;}
.right-panel .btn-submit,
.right-panel .btn-submit:hover,
.addPopup .btn-submit,
.addPopup .btn-submit:hover,
.addPopup .btn-submit:focus {  background: #12b2a6;  color: #ffffff;  box-shadow: none;}
.right-panel .btn-cancel,
.right-panel .btn-cancel:hover,
.addPopup .btn-cancel,
.addPopup .btn-cancel:hover,
.addPopup .btn-cancel,
.addPopup .btn-cancel:focus {  background: #e2e2e2;  color: #333;  box-shadow: none;}
.courseAction a { width: 46%;}
.courseImage .viewButton, .courseImage .viewButton:focus {  width: 40px; height: 40px;  background: #fff;  position: absolute; right: 6px;  top: 6px;  border-radius: 50%;  color: #666 !important; outline: 0;}
.courseImage .viewButton:hover {  background: #fff;  color: #f00 !important;  transform: scale(1.08);  box-shadow: 0px 0px 10px #a2a2a2;}
.courseAction {  display: flex;  justify-content: space-between;}
.courseAction a span {  display: inline-flex;  margin-right: 10px;  font-size: 12px;}
.right-panel .title-heading {  border-bottom: 1px solid #eaeaea;  padding-bottom: 12px;  margin-bottom: 20px;  display: flex;  justify-content: space-between;  align-items: center;}
.right-panel .title-heading h2 {  font-size: 18px;  font-weight: 600;  margin: 0px;}
.topicList {  box-shadow: 2px 2px 10px #cccccc5c;  border-radius: 4px !important;}
.topicList .card-header.topic-heading {  padding: 10px 15px;  border-bottom: 1px solid #d0e6e0;  background: #12b2a6;  position: relative;  width: 100%;}
.topicList .card-header.topic-heading a, .topicList .card-header.topic-heading a:focus {  font-size: 16px;  color: #fff;  font-weight: 600;  margin: 0px;  width: auto;  padding: 0px;  position: relative; background: transparent; border: none; outline: 0;}
.topicList + .topicList { margin-top: 15px;}
.topicList .card + .card {  margin-top: 10px;}
.topicList .card {  background: transparent;  border: none;}
.topicList .card-header {  background: #ecf5f3;  padding: 10px 15px;  padding-left: 15px;  border: none;  display: flex; justify-content: space-between;  align-items: center;  padding-left: 50px;}
.topicList .card-header .count {  position: absolute;  left: 0px;  background: #12b2a6;  height: 41px;  width: 41px;  display: flex;  justify-content: center;  align-items: center;  font-size: 18px;  font-weight: 600;  color: #fff;}
.topicList .card-header a, .topicList .card-header a:focus {  color: #333;  display: inline-flex;  font-size: 14px;  align-items: center;  font-weight: 600; background: transparent; border: none; outline: 0;}
.topicList .card-header a span {  display: inline-flex;  margin-right: 8px;  font-size: 11px;}
.topicList .card-body {  border: none;  padding: 15px 15px;}
.topicList .card-body h4 { font-size: 13px;  color: #333;  margin-bottom: 0px;  display: flex;  justify-content: space-between; align-items: center;}
.topicList .card-body h4 .editTitle {  font-weight: normal;}
.topicList .card-body p {  font-size: 13px;  color: #808080;  margin-bottom: 0px;  line-height: 18px;}
.chapterList + .chapterList {  margin-top: 15px;}
.topicList .card-header a.collapsed .qvos-arrow {  transform: rotate(0deg);}
.topicList .card-header a .qvos-arrow {  transform: rotate(90deg);transition:.3s;}
.topicList .card .card-body .chapterList {  position: relative;  margin-left: 45px;  padding-right: 120px;}
.topicList .card .card-body .chapterList + .chapterList {  border-top: 1px solid #ededed;  padding-top: 10px;}
.topicList .card-body h4 .actionBtn {  position: absolute;  right: 0px;}
.topicList .card-header.topic-heading a span { font-size: 13px;}
.viewButton span {  margin-right: 10px;}
.courseImage .viewButton span { margin-right: 0px;}
.topic-heading .editTitle {  color: #333;  background: #ffffffd4;  padding: 3px 10px;  border-radius: 3px;  transition: 0.5s;}
.topic-heading .editTitle:hover {  background: #ffffff;  transform: translateY(-1px);  box-shadow: 4px 4px 10px #3333332e;}
.addPopup .modal-title {  font-size: 18px;  font-weight: 600;}
.addPopup .modal-header {  padding: 10px 20px;}
.addPopup .close,
.addPopup .close:focus {  padding: 0px 0px;  margin: 0px;  font-size: 28px;  font-weight: normal;  opacity: 1;  outline: 0;}
.addPopup .modal-body {  padding: 15px 20px 20px;}
.right-panel .btn-add {  background: #ecf5f3;  color: #333;}
.right-panel .btn-add:hover {  background: #12b2a6;  color: #ffffff;}
.right-panel .btn-add span {  display: inline-flex;  margin-right: 10px;}
.right-panel .accordion > .card {  overflow: hidden;  border-radius: 4px !important;  border: 1px solid #ededed;}
.actionBtn {  display: inline-flex;}
.editTitle + .editTitle {  margin-left: 12px;}
.editTitle {  font-size: 13px;  color: #333;  display: inline-flex;  align-items: center;  cursor: pointer;}
.editTitle i {  margin-right: 5px;  display: inline-flex;  font-size: 11px;}
.slidecontainer { width: 70%;}
.slider {
  -webkit-appearance: none;  width: 100%;  height: 10px;  border-radius: 5px;  background: #d3d3d3;  outline: none;  opacity: 0.7;
  -webkit-transition: 0.2s;  transition: opacity 0.2s;}
.slider:hover {  opacity: 1;}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;  width: 20px;  height: 20px;  border-radius: 50%;  background: #12b2a6;  cursor: pointer;  border-color: #12b2a6;}
.slider::-moz-range-thumb {  width: 20px;  height: 20px;  border-radius: 50%;  background: #12b2a6;  cursor: pointer;  border-color: #12b2a6;}
.top-wrapper { padding: 15px 0px;}
.unit-bg {background: url("../images/unit-bg.jpg") no-repeat 0px 0px; background-size: 100%;}
.lesson-bg {background: url("../images/lesson-bg.jpg") no-repeat 0px 0px; background-size: 100%;}
.reader-bg { background: url("../images/reader-bg.jpg") no-repeat 0px 0px; background-size: 100%;}
.mt-50 { margin-top: 50px;}
.topicImage { margin: 15px 0px;}
.topicListView { display: flex; justify-content: center;}
.topicListView ul { display: flex; padding: 0px; flex-wrap: wrap;}
.topicListView ul li { display: flex; list-style: none; width: 100%; margin: 8px 8px;}
.topicListView ul li a {display: flex; background: #ffffff; font-weight: 600; box-shadow: 5px 4px 10px #66666640; font-size: 15px;  color: #000; height: 40px; width: 100%; border-radius: 4px; justify-content: flex-start; align-items: center; padding: 10px 25px; transition: 0.3s;}
.topicListView ul li a:hover {background: #8bb8e1;color: #ffffff;}
.reader-button {width: 100%;text-align: right;}
.reader-button a {z-index: 9999;}
.reader-button button, .reader-button button:focus {display: inline-block; position: absolute;width: 220px; z-index: 999; border: none; background: transparent;padding: 0px; outline: 0;}
.left-button { display: flex; align-items: flex-start; justify-content: flex-start;}
.action-button, .action-button:focus {width: 60px;display: inline-block;transition: 0.3s; border: none; background: transparent; padding: 0px; outline: 0;}
.teacher-button, .teacher-button:focus {width: 140px;display: inline-block; margin:4px 0px; margin-left: 15px;transition: 0.3s;border: none; background: transparent; padding: 0px; outline: 0;}
.arrowbox > button, .arrowbox > button:focus { display: inline-block; width: 60px; height: 60px; border-radius:50%; border: none; padding-top: 0px; outline: 0;}
.dropdown-wrap { display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.arrowbox { width: 15%; justify-content: center; display: inline-flex;}
.dropdown-wrap .drop-button { width: 65%; margin: 0px 2%;}
.action-button:hover,
.teacher-button:hover { transform: scale(1.08); cursor: pointer;}
.dropdown-wrap .drop-button .btn.dropdown-toggle { background: #fff;  width: 100%;  height: 40px; color: #000;  text-align: left; font-weight: 600; font-size: 18px; align-items: center; display: flex; justify-content: flex-start; border-radius: 10px; box-shadow: 0px 0px 12px #969696;}
.dropdown-wrap .dropdown-menu { min-width: 100%; padding: 0px 12px; margin-top: 2px;}
.dropdown-wrap .dropdown-toggle::after { margin-left: 10px; font-size: 22px; top: 17px; position: absolute;right: 12px;}
.dropdown-wrap .dropdown-item { padding: 10px 0px; display: flex; flex-direction: column;}
.dropdown-wrap .dropdown-item + .dropdown-item { border-top: 2px solid #ccc;}
.dropdown-wrap .dropdown-item h2 { color: #ff5050;  font-size: 18px; font-weight: 600; margin-bottom: 0px;}
.dropdown-wrap .sub-dropdown { margin: 0px; padding: 0px;}
.dropdown-wrap .dropdown-item .sub-dropdown li { color: #086408; font-size: 18px; font-weight: normal; display: block; font-weight: 600;}
.dropdown-wrap .dropdown-item .sub-dropdown li button, .dropdown-wrap .dropdown-item .sub-dropdown li button:focus { color: #086408; font-size: 17px; font-weight: normal;position: relative; transition: 0.5s; background: transparent; padding: 0px; border: none; outline: 0;}
.dropdown-wrap .dropdown-item .sub-dropdown li button::before {content: "-"; opacity: 0; position: absolute; left: 0px;transition: 0.5s;}
.dropdown-wrap .dropdown-item .sub-dropdown li button:hover { color: #086408; padding-left: 12px;}
.dropdown-wrap .dropdown-item .sub-dropdown li button:hover::before {opacity: 1;}
.dropdown-wrap .dropdown-item:focus,
.dropdown-wrap .dropdown-item:hover { background-color: transparent;}
.arrow-buttonL{background: url("../images/left-arrow.png") no-repeat top center;}
.arrow-buttonR{background: url("../images/right-arrow.png") no-repeat top center;}
.disabled_arrowL{ background: url("../images/back_disable.png") no-repeat top center }
.disabled_arrowR{ background: url("../images/next_disable.png") no-repeat top center; }
.chapterListView ul { padding: 0px; margin: 0px; margin: 15px 0px; background: #ecf5f3; padding: 20px; min-height: 350px; border-radius: 4px;}
.chapterListView ul li { display: flex;list-style: none;}
.chapterListView ul li a {display: flex; width: 100%; flex-direction: column;}
.chapterListView ul li a h2 { font-size: 16px; color: #12b2a6; margin-bottom: 5px; font-weight: 600;}
.chapterListView ul li a p {font-size: 14px; color: #333; margin-bottom: 0px;}
.chapterListView ul li + li {border-top: 1px solid #ccc; margin-top: 15px; padding-top: 15px;}
.mt-30 { margin-top: 30px !important;}
.unit-image { background-size: 100%; min-height: 600px; padding: 30px 35px;}
.videoBox { margin-top: 20px; border-radius: 4px;overflow: hidden; text-align: center;}
.videoBox img {height: 80vh;}
.book-item {display: block;}
.button-1,
.button-1:focus { display: inline-flex; font-weight: 600; background: #333333; font-size: 16px; color: #ffffff; height: 50px; width: 400px; border-radius: 30px; justify-content: flex-start;align-items: center; padding: 10px 40px; transition: 0.3s; margin: 15px 0px; border: none; position: relative; outline: 0;}
.buttonBox { text-align: center;}
.button-1 span { position: absolute; left: -30px;width: 60px; height: 60px; border-radius: 50%; overflow: hidden;}
.unit-1,
.unit-1:focus { display: flex; background: #ffffff; font-weight: 600;font-size: 15px; color: #000;height: 45px; width: 300px; border-radius: 4px;justify-content: flex-start; align-items: center;padding: 10px 25px; margin: 16px 0px;transition: 0.3s;border: none;outline: 0;}
.form-color,
.form-color:focus { width: 100%; background: transparent; border: none;box-shadow: none;}
.green-color .dropdown-wrap .dropdown-item h2 {color: #237767;}
.green-color .dropdown-wrap .dropdown-item .sub-dropdown li {color: #5fb2a0;}
.green-color .dropdown-wrap .dropdown-item .sub-dropdown li a:hover {color: #5fb2a0;}
#resourceContent{ transition: .3s; }

/*---Tool Start---*/
/* Score Bar */
.score-wrapper {position: fixed; right: 0px; bottom: 20px;z-index: 9;}
.score-view { display: flex; flex-direction: column; background: #d0cece; padding: 12px; border-radius: 6px 0px 0px 6px; box-shadow: 0px 0px 10px #333333a3; position: relative;}
.score-view #number_picker {  margin-top: 12px;}
.score-view span + span { margin-top: 5px;}
.score-view span {display: flex; width: 80px;cursor: pointer;}
.score-view .score-nav { position: absolute;left: -32px; background: #d0cece; width: 35px; height: 75px; box-shadow: -4px 0px 5px #33333352; top: 50%; margin-top: -38px; border-radius: 10px 0px 0px 10px; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.score-view .score-nav span { width: 2px; height: 45px; display: inline-flex;background: #8b8b8b; position: relative;}
.score-view .score-nav span::before,
.score-view .score-nav span::after { content: ""; width: 2px;height: 45px; display: inline-flex;background: #8b8b8b; position: absolute; left: -6px;}
.score-view .score-nav span::after {left: auto;right: -6px;}
.numberPicker1 { margin-top: 12px;}

/* Score Counter */
.team-icon {position: fixed;right: 0px;top: 130px;border-radius: 4px; overflow: hidden;cursor: pointer;}
.team-wrapper {position: fixed;right: 0px;top: 90px; width: 200px; border: 4px solid #00af4d; background: #fff;border-radius: 4px; padding:5px 10px; height: 430px; z-index: 999;}
.action-div span {line-height: 15px; display: inline-flex;cursor: pointer;}
.action-div img {width: 25px;}
.team-list h2 { font-size: 18px; color: #333; font-weight: 600; margin-bottom: 8px;}
.team-list ul { margin: 0px; padding: 0px; display: flex; flex-wrap: wrap;}
.team-list ul li {display: flex; width: 50%; flex-direction: column; padding: 12px 0px; justify-content: center; align-items: center;}
.team-list ul li label {width: 100%; text-align: center;cursor: pointer;}
.team-list ul li label img {height: 70px;}
.team-list ul li label.start-btn img { height: auto;}
.team-selection ul li {width: 100%;}
.team-selection ul li + li {border-top: 2px solid #ccccccb3;}
.team-selection .item-number { width: 135px; display: flex;justify-content: center;align-items: center;}
.team-selection .form-control { border: 2px solid #ccccccb3;text-align: center; background: #f1f1f1; color: #333; font-weight: 600;border-radius: 8px; width: 70px; font-size: 26px; height: 50px; margin: 0px 4px;}
.team-selection .number-action { margin-left: 2px; margin-top: -5px;}
.team-selection .number-action span {cursor: pointer;display: flex;width: 25px; margin: 3px 0px;}
.team-2 .number-action {margin-top: -7px;}
.team-2 ul li {height: 192px; width: 100%;}
.team-2 ul li > img { height:110px;}
.team {
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  vertical-align: middle;
  border: 2px solid #010101;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;}
.team:checked { background-color: #b4c7e7;}
.team-3 .number-action {margin-left: 2px;margin-top: -5px;}
.team-3 ul li { margin: 0px 0px; padding: 4px 0px; height: 128px;}
.team-3 ul li + li {border-top: 2px solid #ccccccb3;}
.team-3 ul li > img { height: 65px;}
.team-4 ul li {margin: 0px 0px; padding: 8px 0px; height: 97px;}
.team-4 ul li + li {border-top: 2px solid #ccccccb3;}
.team-4 ul li > img {width: 50px;}
.team-4 ul li, .team-5 ul li { width: 100%; flex-direction: revert;}
.team-4 .item-number, .team-5 .item-number { width: 125px;align-items: center; margin-left: 5px;}
.team-4 .form-control, .team-5 .form-control {width: 50%;}
.team-4 .number-action, .team-5 .number-action { margin-left: 2px;margin-top: -2px;}
.team-5 ul li {margin: 0px 0px; padding: 5px 0px;height: 77px;}
.team-5 ul li + li {border-top: 2px solid #ccccccb3;}
.team-5 ul li > img {width: 40px;}

/* Number Picker */
.player-wrapper {background: url(../images/Number-picker-bg.png) no-repeat top center; background-size: auto;position: fixed; right: 0px;top: 90px; width: 268px; border-radius: 4px; padding: 10px 0px; height: 430px;background-size: cover;z-index: 999;}
.close-link,
.close-link:focus { border: none; background: transparent; padding: 0px 10px;outline: 0;}
.top-wrap {display: flex; justify-content: space-between;align-items: flex-start;}
.player-info {padding: 0px 20px; text-align: center; margin-top: 60px;}
.custom-group {display: flex; justify-content: center; align-items: center; min-height: 40px; margin-bottom: 25px;}
.custom-group label { font-size: 17px; font-weight: 600; color: #010101; margin: 0px;text-align: right;line-height: 20px;width: 50%; margin-right: 15px;}
.custom-input {
  background: url("../images/input-bg.png") no-repeat top center;
  background-size: auto;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;width: 66px;height: 45px;padding: 0px 10px;text-align: center; background-size: 100%; margin:0px 5px; font-size: 26px; font-weight: bold;}
.custom-button, .custom-button:focus { border: none; background: transparent; width: 120px; outline: 0; padding: 0px;}
.item-number {display: flex;width: 60%;justify-content: center;align-items: center;}
.numberIcon {width: 22px;display: inline-flex;cursor: pointer;}
.top-wrap.numberWrap {justify-content: flex-end;padding-right: 25px;}
.top-wrap.numberWrap .close-link {width: 30px;margin-top: 15px; padding:0px;}
.pd-30{ padding: 0px 30px;}
.topScroll { background: #fff url('../images/scroll-top.png') no-repeat top right;width: 28px;height: 22px;position: absolute; right: 20px; z-index: 99; background-size: 100%; cursor: pointer;}
.bottomScroll {background: #fff url('../images/scroll-bottom.png') no-repeat bottom right; background-size: auto;width: 28px; height: 22px; position: absolute; right: 20px;z-index: 99;background-size: 100%; bottom: 70px;cursor: pointer;}
.player-info ul { padding: 0px;margin: 0px;text-align: center;height: 275px;overflow: auto;}
.player-info ul li {display: inline-flex; list-style: none; width:81px;justify-content: center; margin: 5px 4px;align-items: center;background: url('../images/number-ball.png') no-repeat top center; height: 81px; color: #fff; font-weight: bold; font-size: 42px;background-size:100%;}
.player-info ul.scrollBar { scrollbar-color: #bfbfbf #fff;}
.scrollBar {overflow-y: auto; overflow-y: scroll;overflow-y: auto; scrollbar-color: #0000005c #00000024;scrollbar-width: thin;}
.scrollBar::-webkit-scrollbar {width: 6px;}
.scrollBar::-webkit-scrollbar-track { background: #00000024;}
.scrollBar::-webkit-scrollbar-thumb {background: #0000005e;}
.scrollBar::-webkit-scrollbar-thumb:hover {background: #0000005e;}
input[type=number] {
  -moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.custom-input:focus {outline: 0;}

/*---Tool End---*/

.loader-popup { position: fixed; width: 100%;height: 100%;background: #00000047;top: 0%;left: 0%;display: flex;justify-content: center;align-items: center; z-index: 99999;}
.loader-popup .loader { width: 320px;height: 220px; background: #fff; border-radius: 6px; display: flex; justify-content: center; align-items: center;font-size: 40px; box-shadow: 0px 0px 10px #6666663d; color: #007bffc9;}
.loader-popup .loader i {
  -webkit-animation: rotation 2s infinite linear;
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
.confirmation-loader { width: 350px; height: 280px;background: #fff; border-radius: 6px; display: flex; justify-content: center; align-items: center; font-size: 40px; box-shadow: 0px 0px 10px #6666663d; color: #007bffc9; padding:20px 20px; flex-direction: column; position:relative;}
.confirmation-loader span { line-height: 40px; font-size: 50px;}
.confirmation-loader h2 { font-size: 22px; color: #333; font-weight: 600;  margin-top: 15px; margin-bottom:0px;}
.confirmation-loader p { font-size: 15px; color: #666; text-align: center; line-height: 22px; margin: 15px 0px;}
.confirmation-loader .btn.btn-cancel, .confirmation-loader .btn.btn-cancel:focus { background: #ccc;color: #333; font-weight: 600; font-size: 15px; min-width: 110px; height: 45px; letter-spacing: .4px;box-shadow:none;transition: 0.5s;}
.confirmation-loader .btn + .btn{ margin-left:5px;}
.confirmation-loader .btn.btn-delete, .confirmation-loader .btn.btn-delete:focus { background: #dc3545 ; color: #fff; font-weight: 600; font-size: 15px; min-width: 110px; height: 45px; letter-spacing: .4px; box-shadow:none;transition: 0.5s;}
.confirmation-loader .btn:hover { transform: translateY(-1px); box-shadow: 4px 4px 10px #3333332e;}
.confirmation-loader .close, .confirmation-loader .close:focus { position: absolute; right: 8px; top: 3px; opacity: 1; color: #666;font-size: 25px; line-height: 20px; font-weight: normal; outline:0;}
.imageBox { display: flex; justify-content: space-between; align-items: center;}
a.smallImage {display: flex; justify-content: center; align-self: center; color: #a4a4a4; font-size: 35px;}
a.smallImage:hover { border-color: #12b2a6; color: #12b2a6;}
.btn.btn-loaderButton {background: #12b2a6; color: #fff; font-size: 15px;min-width: 110px; height: 45px;text-align: center;display: inline-flex;justify-content: center; align-items: center; font-weight: 600; transition:.3s;}
.btn.btn-loaderButton .btn-text {margin-right: 10px;}
.btn.btn-loaderButton .btn-loder { font-size: 20px;}
.btn.btn-loaderButton .btn-loder i {
  -webkit-animation: rotation 2s infinite linear;
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
.courseType .nav-tabs { border-bottom: none;}
.modal {background: rgba(0, 0, 0, 0.3);}
.addPopup {box-shadow: 0px 0px 20px #6666664d;border: none;}
.addPopup .modal-content {border: none;}
.popup-text span {color: #019101;font-size: 50px; line-height: 40px; display: inline-flex;}
.popup-text h5 {color: #333; font-size: 18px;}
.popup-text h2 {font-size: 22px; color: #333;font-weight: 600; margin-top: 15px; margin-bottom: 15px;}
.popup-text p { font-size: 15px;color: #666;text-align: center;line-height: 22px;margin:0px;}
.loader-popup .popup-text {width: 300px; height: 180px; background: #fff; border-radius: 6px; display: flex; justify-content: center;align-items: center;flex-direction: column; font-size: 40px; padding: 20px 20px; box-shadow: 0px 0px 10px #6666663d; color: #007bffc9;}
.right-panel.tab-content { background: #fff; padding: 20px 20px; box-shadow: 4px 4px 10px #cccccc5c; margin: 15px 0px; border: 1px solid #cccccc40; border-radius:4px;}
.imageBox .input-Image { width: 100%;}
.custom-tables {margin-top: 10px;}
.custom-tables .table {background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0px 0px 10px #ccc;}
.custom-tables .table-bordered thead th { border-bottom-width: 2px; background: #666; color: #fff;font-weight: 600; font-size: 15px;}
.custom-tables .table td { font-size: 14px;}
.custom-tables h2 { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px; min-height: 40px; justify-content: flex-start; align-items: center; display: flex; position: relative;}
.custom-tables h2 .add-stage { background: #12b2a6; border: none; color: #fff; position: absolute; right: 0px; font-size: 15px; font-weight: 500; padding: 10px 12px; border-radius: 4px;}
.custom-tables h2 .add-stage i {margin-right: 8px;}
.edit-link { color: #12b2a6; font-size: 14px; border: none;background: transparent;padding: 0px;}
.edit-link i { margin-right: 7px; font-size: 12px;}
.viewImage { display: inline-flex; justify-content: center; align-items: center; border: 1px solid #efefef;border-radius: 4px;position: relative;width: 58px; height: 42px; background: #f2f2f2;}
.viewImage .closeImage {position: absolute; right: -10px; top: -10px; color: #f00;  font-size: 16px; cursor: pointer; display: none;}
.divider {display: flex;width: 100%;border-top: 1px solid #cccccc91;margin: 5px 15px 20px;}
.book-item { margin-bottom: 30px;}
.bookList { height: calc(100vh - 140px); overflow-y: auto; overflow-x: hidden; margin:25px 0px;}
.bookViewList {  margin: 25px 0px;}
.scrollBar { overflow-y: auto; scrollbar-color: #0000005e #00000024; scrollbar-width: thin;}
.scrollBar::-webkit-scrollbar { width: 6px;}
.scrollBar::-webkit-scrollbar-track { background: #00000024;}
.scrollBar::-webkit-scrollbar-thumb { background: #0000005e;}
.scrollBar::-webkit-scrollbar-thumb:hover { background: #0000005e;}
.disabled_arrow { cursor: not-allowed;}
.toolsHide { width: 0px;}
.disabled_arrow { cursor: not-allowed;display: inline-block; position: relative;}
.disabled_arrow::before {  content: ""; background: #00000054;  width: 43px;  height: 42px;  position: absolute; left: 8px; top: 7px; border-radius: 50%;}
.unitList { height: calc(100vh - 270px); overflow-y: auto; overflow-x: hidden; margin-bottom: 15px;}
.term-services a { font-size: 14px;line-height: 20px; display: flex;}
.term-services {display: inline-flex; padding: 15px 30px; justify-content: center; align-items: center; position: absolute; bottom: -235px;left: 50%; min-width: 500px; margin-left: -250px;}
.error-text {font-size: 13px; display: inline-block; margin-left: 5px;}
.colorForm-control { border: none; background: transparent; padding: 0px; width: 100%; border-radius: 5px;}
.editTitle:hover { color: #12b2a6;}
.button-group .btn.btn-cancel { height: 45px; font-weight: 600;} 
.dropdown-wrap .dropdown-item + .dropdown-item { border-top: 2px solid #ccc;}
.dropdown-wrap .dropdown-item { padding: 10px 0px;display: flex; flex-direction: column;}
footer { position: fixed; bottom: 10px; left: 0px; width: 100%; z-index: 99;}
.footer-content {text-align: center;}
.footer-content ul {margin: 0px; padding: 0px;}
.footer-content ul li {display: inline-flex;justify-content: center;align-items: center; padding: 0px 6px; line-height: 14px;}
.footer-content ul li a {display: flex; font-size: 13px; color: #04044d;text-decoration: none; font-weight: 600;}
.footer-content p {font-size: 13px; color: #04044d; margin-bottom: 0px; font-weight: 600;}
.footer-content ul li + li { border-left: 1px solid #04044d;}
.footer-content p a{ color: #04044d; }
.book-button { border: none;background: transparent; padding: 0px;}
 


/*  Responsive CSS  */
@media only screen and (min-width: 1450px) and (max-width: 1920px) {
.container, .container-fluid {max-width: 100%;} 
.bookList { height: calc(100vh - 190px);}
.top-wrapper {padding: 30px 0px;}
.action-button {width: 70px;}
.teacher-button {width: 150px; margin:6px 0px; margin-left: 15px; }
.dropdown-wrap .drop-button .btn.dropdown-toggle {height: 45px;font-size: 18px;}
.player-wrapper {top: 150px;width: 300px;height: 485px;}
.player-info {padding: 0px 20px;text-align: center; margin-top: 65px;}
.custom-group label { font-size: 20px; margin-right: 10px;}
.custom-input { width: 80px; height: 55px;}
.custom-button, .custom-button:focus {width: 150px;}
.numberIcon { width: 25px;}
.top-wrap.numberWrap {padding-right: 30px;}
.top-wrap.numberWrap .close-link { width: 35px;}
.team { width: 22px; height: 22px;}
.team-wrapper {top: 150px;width: 300px;height: 650px; padding: 10px 10px;}
.team-list h2 { font-size: 24px;}
.action-div img {width: 35px;}
.team-list ul li label img {height: 105px;}
.team-list ul li {margin: 0px; padding: 22px 0px;}
.team-2 ul li { height: 294px;}
.team-2 ul li > img {width: auto;height: 115px;}
.team-selection .number-action span {width: 37px;}
.team-2 .item-number, .team-3 .item-number { width: 100px;}
.team-2 .form-control, .team-3 .form-control {width: 100px;height: 75px; font-size: 45px;}
.team-2 .number-action {margin-left: 4px; margin-top: -4px;}
.team-3 ul li > img {width: auto;height: 100px;}
.team-3 .number-action { margin-left: 2px; margin-top: -4px;}
.team-list.team-3 ul li { margin: 0px 0px;padding: 5px 0px; height: 195px;}
.team-list.team-4 ul li, .team-list.team-5 ul li { margin: 0;}
.team-4 ul li{ padding: 5px 0px; height: 147px;}
.team-4 ul li > img { width: 75px;}
.team-4 .item-number, .team-5 .item-number {width: 190px;}
.team-4 .form-control, .team-5 .form-control {width: 100px;height: 75px;font-size: 45px;margin: 0px 5px;}
.team-5 ul li > img { width: 60px;}
.team-5 ul li{ padding: 5px 0px;height: 118px;}
.score-view .score-nav {left: -35px;}
.player-info ul {height: 310px;margin-top:0px;}
.player-info ul li{ width: 90px; height: 90px;  margin:6px 5px;}
.pd-30 {padding: 0px 30px;}
.courseImage {height: 250px;}


}

@media screen and (max-width: 1280px) {
 .videoBox img {height: 80vh;}
}

@media screen and (max-width: 992px) {
  header .nav-logo {height: 35px; }
  header .navbar-collapse ul li + li { margin-left: 20px;}
  header .user-info .nav-link.dropdown-toggle { height: 35px; padding: 0px 12px !important;}
  header .navbar-collapse ul .nav-item .nav-link,
  header .user-info .nav-link.dropdown-toggle { font-size: 14px;}
  .dropdown.user-info { margin-left: 20px;}
  .viewDetailList ul li {flex-direction: column;}
  .viewDetailList ul li span::before { display: none;}
  .viewDetailList ul li span {width: 100%; margin-top: 4px;font-size: 13px;}
  .viewDetailList ul li + li {margin-top: 15px;}
  .topicListView { flex-wrap: wrap;}
  .topicListView ul { width: 100%;}
}

@media screen and (max-width: 767px) {
  .dropdown.user-info { position: absolute; right: 45px; top: 8px;}
  header .user-info .nav-link.dropdown-toggle { height: 30px; padding: 0px 8px !important; font-size: 13px;}
  .navbar-toggler:focus { outline: 0;}
  header .navbar-toggler {padding: 0px 5px; height: 30px; display: flex; justify-content: center; align-items: center;}
  header .navbar-toggler-icon { display: inline-block;  width: 26px; height: 3px;  vertical-align: middle;  background: #161c22;  position: relative;}
  header .navbar-toggler-icon:before,
  .navbar-toggler-icon:after { content: "";  background: #161c22; height: 3px;  width: 26px; position: absolute; left: 0;  top: -9px;}
  header .navbar-toggler-icon:after {top: auto;  bottom: -9px;}
  .courseImage {  height: 160px;}
  header {padding: 6px 0px;}
  header .navbar-expand-md .navbar-collapse { padding: 15px 5px;}
  .main-wrapper { padding: 15px 0px;}
  header .navbar-expand-md .navbar-nav {align-items: flex-start;}
  header .navbar-collapse ul li + li {margin-left: 0px; margin-top: 8px;}
  .right-panel { min-height: auto; }
  .left-paanel,
  .right-panel { padding: 15px 15px;}
  .courseContent h2 { height: auto;}
  .login-page {width: 95%; padding: 35px;}
  .loginBox { height: 195px;}
  .right-panel .title-heading { justify-content: flex-start; align-items: flex-start; flex-direction: column;}
  .addContent { display: flex; justify-content: flex-start;  margin-top: 10px;}
  .right-panel.tab-content { padding: 15px;}
  .editTitle span { display: none;}
  .topic-heading .editTitle {  width: 25px; height: 25px; padding: 0px;  justify-content: center; display: flex;  align-items: center;}
  .topic-heading .editTitle i { margin: 0px;}
  .editTitle + .editTitle { margin-left: 10px;}
  .modal { overflow-x: hidden;overflow-y: auto;}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .login-page { width: 70%; padding: 35px; }
}