@import 'https://fonts.googleapis.com/css?family=Lato:100, 300, 400, 700, 900';
@import url("../fonts/fontawesome.css");
@font-face {
  font-family: "HelveticaNeue";
  src: url("../fonts/HelveticaNeue.eot");
  src: local("?"), url("../fonts/HelveticaNeue.woff") format("woff"),
    url("../fonts/HelveticaNeue.ttf") format("truetype"),
    url("../fonts/HelveticaNeue.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "HelveticaNeue-Bold";
  src: url("../fonts/HelveticaNeue-Bold.eot");
  src: local("?"), url("../fonts/HelveticaNeue-Bold.woff") format("woff"),
    url("../fonts/HelveticaNeue-Bold.ttf") format("truetype"),
    url("../fonts/HelveticaNeue-Bold.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "HelveticaNeue";
  background: none;
}
a {
  cursor: pointer !important;
  color: #0f238c !important;
}
.mt5 {
  margin-top: 5px;
}
.mt20 {
  margin-top: 20px;
}
.mt50 {
  margin-top: 50px;
}
.mtb10 {
  margin: 10px 0;
}
.mb5 {
  margin-bottom: 5px;
}
.mb10 {
  margin-bottom: 10px;
}
.ptb5 {
  padding: 5px 0;
}
.navbar-inverse{
  background-image: linear-gradient(to bottom,#0f238c 0,#0f238c 100%) !important;
}
.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav>li>a{
  color: #ffffff !important;
}
.btn-primary{
  background-color: #0f238c !important;
}
html {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
/*---------------------------------------------------------------------------------------------------------------------------------------------add next two id*/
#bg {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}
#bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

.top_band {
  background: rgba(255, 255, 255, 0.9);
  position: relative;
  z-index: 2;
}
.top_band h2 {
  color:#0f238c;
   /* #333333; */
  font-family: "HelveticaNeue";
  font-weight: 400;
  font-size: 35px;
  margin: 10px 0;
}
.top_band h2 a {
  text-decoration: none;
  color: #333333;
}
.top_band h2 a:hover {
  text-decoration: none;
  color: #ef3133;
}
.top_band ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  margin-top: 15px;
  float: right;
  font-family: "HelveticaNeue";
  font-size: 20px;
}
.top_band ul li {
  float: left;
}
.top_band ul li a {
  font-family: "HelveticaNeue";
  font-size: 20px;
  color: #333333;
  text-decoration: none;
  margin: 0 5px;
}
.top_band ul li a:hover {
  color: #ef3133;
}
.user {
  width: 37px;
  height: 37px;
  overflow: hidden;
  border-radius: 50%;
  float: right;
  margin-top: 10px;
}

/**********************************************************************************Collapsible Menu style start*/
#sidebar-wrapper-right {
  margin-right: -350px;
  margin-top: 2px;
  right: 0;
  width: 250px;
  background: rgba(255, 255, 255, 0.9);
  position: fixed;
  height: 100%;
  /*overflow-y: auto;*/
  z-index: 1001;
  transition: all 0.25s ease-in 0s;
  -webkit-transition: all 0.25s ease-in 0s;
  -moz-transition: all 0.25s ease-in 0s;
  -ms-transition: all 0.25s ease-in 0s;
  -o-transition: all 0.25s ease-in 0s;
}
#sidebar-wrapper-left {
  margin-left: -280px;
  margin-top: 2px;
  left: 0;
  width: 250px;
  background: rgba(255, 255, 255, 0.9);
  position: fixed;
  height: 100%;
  /*overflow-y: auto;*/
  z-index: 1001;
  transition: all 0.25s ease-in 0s;
  -webkit-transition: all 0.25s ease-in 0s;
  -moz-transition: all 0.25s ease-in 0s;
  -ms-transition: all 0.25s ease-in 0s;
  -o-transition: all 0.25s ease-in 0s;
}
.bottom_container {
  background: rgb(55, 57, 66);
  height: 114px;
}
.sidebar-wrapper-bottom,
.sidebar-wrapper-bottom_01 {
  margin-bottom: -329px;
  bottom: 0;
  width: 100%;
  position: fixed;
  height: 329px;
  /*overflow-y: auto;*/
  z-index: 999;
  transition: all 0.25s ease-in 0s;
  -webkit-transition: all 0.25s ease-in 0s;
  -moz-transition: all 0.25s ease-in 0s;
  -ms-transition: all 0.25s ease-in 0s;
  -o-transition: all 0.25s ease-in 0s;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav li {
  line-height: 50px;
  text-indent: 20px;
}

.sidebar-nav li a {
  color: #999999;
  display: block;
  text-decoration: none;
}

.sidebar-nav li a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  height: 55px;
  line-height: 55px;
  font-size: 18px;
}

.sidebar-nav > .sidebar-brand a {
  color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}

#menu-toggle-right {
  top: 100px;
  right: -5px;
  position: fixed;
  z-index: 2;
  width: 52px;
  height: 40px;
  border:none;
  background: url(../images/icon_right_menu_normal.png) no-repeat center center rgb(239, 49, 51);
}
#menu-toggle-right:hover {
  background: url(../images/icon_right_menu_normal.png) no-repeat center center rgb(239, 49, 51);
}
#menu-toggle-left {
  top: 100px;
  left: 0;
  position: fixed;
  z-index: 1;
  width: 52px;
  height: 40px;
  background: url(../images/icon_menu_normal.png) no-repeat center center rgb(239, 49, 51);
}
#menu-toggle-left:hover {
  background: url(../images/icon_menu_normal.png) no-repeat center center rgb(239, 49, 51);
}

#sidebar-wrapper-right.active {
  right: 350px;
  width: 350px;
  transition: all 0.25s ease-out 0s;
  -webkit-transition: all 0.25s ease-out 0s;
  -moz-transition: all 0.25s ease-out 0s;
  -ms-transition: all 0.25s ease-out 0s;
  -o-transition: all 0.25s ease-out 0s;
}

#sidebar-wrapper-left.active {
  left: 280px;
  width: 280px;
  transition: all 0.25s ease-out 0s;
  -webkit-transition: all 0.25s ease-out 0s;
  -moz-transition: all 0.25s ease-out 0s;
  -ms-transition: all 0.25s ease-out 0s;
  -o-transition: all 0.25s ease-out 0s;
}

.sidebar-wrapper-bottom.active,
.sidebar-wrapper-bottom_01.active {
  bottom: 329px;
  height: 329px;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.25s ease-out 0s;
  -webkit-transition: all 0.25s ease-out 0s;
  -moz-transition: all 0.25s ease-out 0s;
  -ms-transition: all 0.25s ease-out 0s;
  -o-transition: all 0.25s ease-out 0s;
}

.toggle {
  /*margin: 5px 5px 0 0;*/
}

#menu-close-right {
  width: 52px;
  border:none;
  height: 40px;
  background: url(../images/icon_close.png) no-repeat center rgb(239, 49, 51);
  float: right;
  margin: 15px 0 0 0;
}
#menu-close-left {
  width: 52px;
  height: 40px;
  background: url(../images/icon_close.png) no-repeat center rgb(239, 49, 51);
  float: right;
  margin: 15px 0 0 0;
}

.video_thumbnail_container {
  width: 100%;
  overflow-y: auto;
  height: 100%;
  padding-bottom: 75px;
}
.video_thumbnail_container ul {
  padding: 0 10px;
  list-style-type: none;
}
.video_thumbnail_container ul li {
  padding: 20px 0px;
  float: left;
  width: 100%;
  border-bottom: 1px solid #212e4d;
}
.video_thumbnail_container ul li:nth-child(13) {
  border-bottom: none;
}
.video_thumbnail_container ul li p {
  width: 100%;
  line-height: 20px;
  color: #ffffff;
}
.video_thumbnail_container ul li a {
  padding: 0;
  position: relative;
}
.video_thumbnail_container ul li a img {
  float: left;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}
.video_thumbnail_container ul li a p {
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  margin-bottom: 0;
  float: left;
  position: absolute;
  bottom: 0;
}
.video_thumbnail_container ul li a:hover p {
  color: #d7d7d7;
}
.video_thumbnail_container .left {
  width: 25%;
  float: left;
  margin-left: -20px;
}
.video_thumbnail_container .middle {
  width: 50%;
  float: left;
}
.video_thumbnail_container .right {
  width: 25%;
  float: right;
}

.right_menu_container {
  width: 100%;
  overflow-y: auto;
  height: 100%;
  padding-bottom: 143px;
}
.right_menu_container img {
  margin-left: 10px;
  margin-top: 10px;
}

.circle_tick {
  width: 40px;
  height: 40px;
  background: #65b3fa;
  border-radius: 50%;
  padding: 20%;
}
.circle_tick p {
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  line-height: 16px;
}
.time_label {
  background: #c4ccda;
}
.time_label h5 {
  width: 100%;
  text-align: center;
  padding: 2px 0;
  line-height: 14px;
}
.video_divider {
  border-bottom: 1px solid #bec5d3;
  margin-top: 20px;
}

.icon_play {
  position: absolute;
  z-index: 10001;
  background: url(../images/icon_play.png) no-repeat center center;
  width: 100%;
  height: 100%;
}
.icon_play:hover {
  background: url(../images/icon_play_hover.png) no-repeat center center;
}

.step_menu {
  width: 100%;
  overflow-y: auto;
  height: 100%;
  padding-bottom: 25px;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-button {
  /* 2 */
}
::-webkit-scrollbar-track {
  width: 4px;
  background: #888b9c;
}
::-webkit-scrollbar-track-piece {
  /* 4 */
}
::-webkit-scrollbar-thumb {
  background: #0b5ed7;
  width: 2px;
  border: 2px solid #888b9c;
}
::-webkit-scrollbar-corner {
  /* 6 */
}
::-webkit-resizer {
  /* 7 */
}

.step_menu ul {
  list-style-type: none;
  padding: 40px;
}
.step_menu ul li {
  padding: 0;
  margin: 0;
  font-size: 25px;
  line-height: 50px;
  margin-bottom: 10px;
}
.step_menu ul li:nth-child(1) {
  background: url(../images/step01_bg.png) no-repeat;
  width: 159px;
  height: 96px;
}
.step_menu ul li:nth-child(1) a {
  background: url(../images/icon_generation.png) no-repeat 10px 25px;
}
.step_menu ul li:nth-child(2) {
  background: url(../images/step02_bg.png) no-repeat;
  width: 159px;
  height: 96px;
}
.step_menu ul li:nth-child(2) a {
  background: url(../images/icon_design.png) no-repeat 10px 25px;
}
.step_menu ul li:nth-child(3) {
  background: url(../images/step03_bg.png) no-repeat;
  width: 159px;
  height: 96px;
}
.step_menu ul li:nth-child(3) a {
  background: url(../images/icon_quotation.png) no-repeat 10px 25px;
  padding-top: 30px;
}
.step_menu ul li:nth-child(4) {
  background: url(../images/step04_bg.png) no-repeat;
  width: 159px;
  height: 96px;
}
.step_menu ul li:nth-child(4) a {
  background: url(../images/icon_setting.png) no-repeat 10px 25px;
}
.step_menu ul li:nth-child(5) {
  background: url(../images/step05_bg.png) no-repeat;
  width: 159px;
  height: 96px;
}
.step_menu ul li:nth-child(5) a {
  background: url(../images/icon_installation.png) no-repeat 10px 25px;
}
.step_menu ul li:nth-child(6) {
  background: url(../images/step06_bg.png) no-repeat;
  width: 159px;
  height: 96px;
}
.step_menu ul li:nth-child(6) a {
  background: url(../images/icon_salessupport.png) no-repeat 10px 25px;
}
.step_menu ul li a {
  background: none;
  width: 100%;
  font-size: 14px;
  line-height: 18px;
  text-decoration: none;
  color: #ffffff;
  padding: 20px 0 0 48px;
  height: 96px;
  display: block;
}
/*.step_menu ul li a:hover { text-decoration:none; color:#D4D4D4; background:#2f313a;}*/
.step_menu ul li a:visited,
.step_menu ul li a:active {
  text-decoration: none;
}
.step_menu ul li a:hover {
  color: #ffffff;
}

.topic_menu {
  width: 100%;
  overflow-y: auto;
  height: 100%;
  padding-bottom: 115px;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-button {
  /* 2 */
}
::-webkit-scrollbar-track {
  width: 4px;
  background: #888b9c;
}
::-webkit-scrollbar-track-piece {
  /* 4 */
}
::-webkit-scrollbar-thumb {
  background: #0b5ed7;
  width: 2px;
  border: 2px solid #888b9c;
}
::-webkit-scrollbar-corner {
  /* 6 */
}
::-webkit-resizer {
  /* 7 */
}

.topic_menu ul {
  padding: 0;
  list-style-type: none;
}
.topic_menu ul li {
  padding: 0;
  margin: 0;
  font-size: 25px;
  line-height: 50px;
  margin-bottom: 10px;
}
.topic_menu ul li a {
  background: none;
  width: 100%;
  font-size: 20px;
  line-height: 20px;
  text-decoration: none;
  color: #333333;
  padding: 20px;
  display: block;
  font-weight: 300;
}
/*.step_menu ul li a:hover { text-decoration:none; color:#D4D4D4; background:#2f313a;}*/
.topic_menu ul li a:visited,
.step_menu ul li a:active {
  text-decoration: none;
}
.topic_menu ul li a:hover {
  color: #333333;
  border-right: 5px solid #ef3133;
}

.sidebar_header {
  background: rgb(170, 170, 170);
  float: left;
  width: 100%;
  height: 75px;
}
.sidebar_header h3 {
  float: left;
  color: #ffffff;
  font-weight: normal;
  padding: 0 15px;
  margin: 0;
  font-size: 25px;
  line-height: 75px;
  font-family: "HelveticaNeue";
}
.sidebar_header img {
  float: left;
  margin: 25px 0 0 15px;
}

/**********************************************************************************Collapsible Menu style end*/
/**********************************************************************************bottom carousel style start*/
.carousel-control.left,
.carousel-control.right {
  background: none;
  width: 25px;
}

.carousel-control.left {
  left: -25px;
  background: url(../images/arrow_left.png) no-repeat center;
}
.carousel-control.right {
  right: -25px;
  background: url(../images/arrow_right.png) no-repeat center;
}
.carousel {
  padding: 5px;
  margin-top: 30px;
}
.broun-block {
  /*background: rgb(0, 0, 0);*/
  /*padding-bottom: 5px;*/
}
.block-text {
  border: 1px solid #ffffff;
  /*box-shadow: 0 3px 0 #2c2222;*/
  color: #626262;
  font-size: 14px;
  /*margin-top: 27px;*/
  /*padding: 5px 5px;*/
  padding-bottom: 0px;
  margin: 10px 0;
}
.block-text a {
  color: #001d5a;
  font-size: 14px;
  font-weight: bold;
  line-height: 15px;
  text-decoration: none;
  padding-bottom: 0;
  /*text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);*/
}
.mark {
  padding: 12px 0;
  background: none;
}
.block-text p {
  color: #585858;
  font-family: "HelveticaNeue";
  font-style: italic;
  line-height: 20px;
}
.sprite {
}
.sprite-i-triangle {
  background-position: 0 -1298px;
  height: 44px;
  width: 50px;
}
.block-text ins {
  bottom: -44px;
  left: 50%;
  margin-left: -60px;
}

.block-text {
  position: relative;
}
.block-text .play {
  background: url(../images/tf_icon_play.png) no-repeat center center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.block-text .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(239, 49, 51, 0.8);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: 0.5s ease;
}
.block-text:hover .overlay {
  height: 100%;
}
.block-text .text {
  color: white;
  font-size: 18px;
  font-family: "HelveticaNeue";
  font-weight: 300;
  line-height: 25px;
  position: absolute;
  top: 10%;
  left: 27%;
  transform: translate(-30%, -5%);
  -ms-transform: translate(-30%, -5%);
  text-align: left;
}
.block-text .text2 {
  color: white;
  font-size: 20px;
  font-family: "HelveticaNeue";
  font-weight: 300;
  line-height: 25px;
  position: absolute;
  bottom: 5px;
  right: 10px;
  text-align: left;
}
.img-responsive {
  display: inline;
}

.block {
  display: block;
}
.zmin {
  z-index: 1;
}
.ab {
  position: absolute;
}

.person-text {
  padding: 10px 0 0;
  text-align: center;
  z-index: 2;
}
.person-text a {
  color: #ffcc00;
  display: block;
  font-size: 14px;
  margin-top: 3px;
  text-decoration: underline;
}
.person-text i {
  color: #fff;
  font-family: "HelveticaNeue";
  font-size: 13px;
}
.rel {
  position: relative;
}
/**********************************************************************************botton carousel style end*/
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  top: 10px;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.iframe_close {
  background: #000000;
  width: 30px;
  height: 30px;
  position: absolute;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  font-size: 15px;
  padding: 0;
  border-radius: 50%;
  right: -12px;
  top: -8px;
  border: 1px solid #ffffff;
}
.iframe_close:hover {
  text-decoration: none;
  color: #ffffff;
}
.iframe_close2 {
  background: #000000;
  width: 30px;
  height: 30px;
  position: absolute;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  font-size: 15px;
  padding: 0;
  border-radius: 50%;
  right: 150px;
  top: -8px;
  border: 1px solid #ffffff;
}
.iframe_close2:hover {
  text-decoration: none;
  color: #ffffff;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000;
}
/*.footer_menu{ background: rgba(75,109,185,0.7);}*/
.footer_menu ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  text-align: center;
  color: #ffffff;
}
.footer_menu ul li {
  margin: 0;
  padding: 0;
  display: inline-block;
}
.footer_menu ul li a {
  background: #ef3133;
  padding: 7px 13px 7px 13px;
  display: block;
}
.footer_menu ul li a:link {
  color: #fff;
  text-decoration: none;
}
.footer_menu ul li a:hover {
  color: #fff;
  text-decoration: none;
}
.footer_menu ul li a:visited {
  color: #fff;
  text-decoration: none;
}

/*.footer_menu{ background: rgba(75,109,185,0.7);}*/
.footer_menu2 ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  text-align: center;
  color: #ffffff;
}
.footer_menu2 ul li {
  margin: 0;
  padding: 0;
  display: inline-block;
  margin-left: -3px;
}
.footer_menu2 ul li a {
  background: #ef3133;
  padding: 7px 13px 7px 13px;
  display: block;
  line-height: 25px;
}
.footer_menu2 ul li a span {
  margin-left: 10px;
}
.footer_menu2 ul li a:link {
  color: #fff;
  text-decoration: none;
}
.footer_menu2 ul li a:hover {
  background: #f25859;
  color: #fff;
  text-decoration: none;
}
.footer_menu2 ul li a:visited {
  color: #fff;
  text-decoration: none;
}

.video_playpause {
  width: 35px;
  height: 35px;
  background: rgb(50, 133, 255);
  border-radius: 50%;
  text-align: center;
}

.floating_div01 {
  background: #ffffff;
  position: absolute;
  bottom: 50px;
  right: 350px;
}
.floating_div02 {
  background: #ffffff;
  position: absolute;
  width: 300px;
  height: 200px;
  top: 150px;
  left: 50%;
  margin-left: 250px;
}
.floating_div03 {
  background: #ffffff;
  position: absolute;
  width: 300px;
  height: 200px;
  top: 400px;
}
.floating_div04 {
  background: #ffffff;
  position: absolute;
  width: 300px;
  height: 200px;
  top: 400px;
  left: 50%;
  margin-left: 250px;
}
.floating_div_header {
  width: 100%;
  height: 30px;
  background: rgb(50, 133, 255);
  padding: 0 10px;
  line-height: 30px;
  font-size: 16px;
  color: #ffffff;
}

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  margin: 0 5px;
}
::-webkit-scrollbar:horizontal {
  height: 8px;
}
::-webkit-scrollbar-button {
  /* 2 */
}
::-webkit-scrollbar-track:horizontal {
  height: 4px;
  background: #888b9c;
}
::-webkit-scrollbar-track-piece {
  /* 4 */
}
::-webkit-scrollbar-thumb:horizontal {
  background: #0b5ed7;
  height: 2px;
  border: 2px solid #888b9c;
}
::-webkit-scrollbar-corner {
  /* 6 */
}
::-webkit-resizer {
  /* 7 */
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 5px;
  text-decoration: none;
}
div.scrollmenu a img {
  width: 150px;
}
div.scrollmenu a p {
  font-size: 12px;
  font-weight: normal;
  margin: 0;
}

div.scrollmenu a:hover {
  background-color: #777;
}

/**********************************************************************************resource-section*/

.resource {
  width: 100%;
  background: #395189;
  position: absolute;
  bottom: 0;
  left: 0;
}
.resource-btn {
  background: url(../images/resource-btn.png);
  width: 110px;
  height: 41px;
  margin-left: 50px;
}

.resource-section {
  background: rgba(255, 255, 255, 0.8);
  width: 343px;
  position: absolute;
  margin-top: 50px;
  left: 300px;
}
.resource-section p {
  color: #833a85;
  text-align: center;
  font-size: 14px;
  width: 100%;
}
.resource-section a {
  text-decoration: none;
}

.resource_header {
  background: rgba(142, 44, 126, 0.8);
  float: left;
  width: 100%;
  height: 50px;
}
.resource_body {
  float: left;
  width: 100%;
}
.resource_header h3 {
  float: left;
  color: #ffffff;
  font-weight: normal;
  padding: 0 15px;
  margin: 0;
  font-size: 18px;
  line-height: 50px;
}
.resource_header img {
  float: left;
  margin: 15px 0 0 15px;
}

#menu-close-left-resource {
  width: 36px;
  height: 25px;
  background: url(../images/icon_close.png) no-repeat center rgb(168, 100, 168);
  float: right;
  margin: 10px 0 0 0;
}

@media (max-width: 1199px) {
}
@media (max-width: 990px) {
}
@media (max-width: 766px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 415px) {
}

@media (min-width: 553px) and (max-width: 991px) {
}
@media (max-width: 1366px) {
  .top_band ul {
    margin-top: 10px;
  }
  .top_band h2 {
    font-size: 30px;
    margin: 10px 0;
  }
  .sidebar-wrapper-bottom.active,
  .sidebar-wrapper-bottom_01.active {
    bottom: 200px;
  }
  .top_band ul li a {
    font-size: 18px;
  }
  .carousel {
    margin-top: 15px;
  }
  .block-text .text {
    font-size: 15px;
    line-height: 20px;
  }
  .block-text .text2 {
    font-size: 15px;
    line-height: 20px;
    bottom: 0px;
    right: 5px;
  }
}
@media (max-width: 1024px) {
  .top_band ul {
    margin-top: 7px;
  }
  .top_band h2 {
    font-size: 20px;
    margin: 10px 0;
  }
  .sidebar-wrapper-bottom.active,
  .sidebar-wrapper-bottom_01.active {
    bottom: 200px;
  }
  .carousel {
    margin-top: 15px;
  }
  .block-text .text {
    font-size: 15px;
    line-height: 20px;
  }
  .block-text .text2 {
    font-size: 15px;
    line-height: 20px;
    bottom: 0px;
    right: 5px;
  }
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}

.text-left-not-xs,
.text-left-not-sm,
.text-left-not-md,
.text-left-not-lg {
  text-align: left;
}
.text-center-not-xs,
.text-center-not-sm,
.text-center-not-md,
.text-center-not-lg {
  text-align: center;
}
.text-right-not-xs,
.text-right-not-sm,
.text-right-not-md,
.text-right-not-lg {
  text-align: right;
}
.text-justify-not-xs,
.text-justify-not-sm,
.text-justify-not-md,
.text-justify-not-lg {
  text-align: justify;
}

.ml5 {
  margin-left: 5px;
}
.ml40 {
  margin-left: 20px;
}

@media (max-width: 768px) {
  .text-left-not-xs,
  .text-center-not-xs,
  .text-right-not-xs,
  .text-justify-not-xs {
    text-align: inherit;
  }
  .text-left-xs {
    text-align: left;
  }
  .text-center-xs {
    text-align: center;
  }
  .text-right-xs {
    text-align: right;
  }
  .text-justify-xs {
    text-align: justify;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .text-left-not-sm,
  .text-center-not-sm,
  .text-right-not-sm,
  .text-justify-not-sm {
    text-align: inherit;
  }
  .text-left-sm {
    text-align: left;
  }
  .text-center-sm {
    text-align: center;
  }
  .text-right-sm {
    text-align: right;
  }
  .text-justify-sm {
    text-align: justify;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .text-left-not-md,
  .text-center-not-md,
  .text-right-not-md,
  .text-justify-not-md {
    text-align: inherit;
  }
  .text-left-md {
    text-align: left;
  }
  .text-center-md {
    text-align: center;
  }
  .text-right-md {
    text-align: right;
  }
  .text-justify-md {
    text-align: justify;
  }
}
@media (min-width: 1200px) {
  .text-left-not-lg,
  .text-center-not-lg,
  .text-right-not-lg,
  .text-justify-not-lg {
    text-align: inherit;
  }
  .text-left-lg {
    text-align: left;
  }
  .text-center-lg {
    text-align: center;
  }
  .text-right-lg {
    text-align: right;
  }
  .text-justify-lg {
    text-align: justify;
  }
}

@media (max-width: 768px) {
  .block-text a {
    font-size: 10px;
  }
  .footer_menu ul li:nth-child(3) {
    padding: 0;
  }
  .footer_menu ul li:nth-child(4) {
    padding: 0;
  }
  .footer_menu ul li:nth-child(5) {
    padding: 0;
  }
  .footer_menu ul li {
    height: 30px;
  }
  .footer_menu ul li a {
    padding: 4px 8px;
  }
  .top_band h2 {
    font-size: 20px;
    margin: 10px 0;
  }
  .top_band ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    margin-top: 10px;
    float: right;
    font-family: "HelveticaNeue";
    font-size: 15px;
  }
  .top_band ul li a {
    font-family: "HelveticaNeue";
    font-size: 15px;
    color: #333333;
    text-decoration: none;
    margin: 0 3px;
  }
  .sidebar-wrapper-bottom.active,
  .sidebar-wrapper-bottom_01.active {
    bottom: 140px;
  }
  .carousel {
    margin-top: 0px;
  }
  .block-text .play {
    background: url(../images/tf_icon_play_small.png) no-repeat center center;
  }
  .block-text .text {
    font-size: 12px;
    line-height: 15px;
  }
  .block-text .text2 {
    font-size: 12px;
    line-height: 15px;
    bottom: 0px;
    right: 5px;
  }
}
/*------------------------------------------------for you tube video background------------------------------------------------*/
* {
  box-sizing: border-box;
}
.video-background {
  background: #000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
  .video-foreground {
    height: 300%;
    top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground {
    width: 300%;
    left: -100%;
  }
}
/*------------------------------------------------for you tube video background------------------------------------------------*/

/*------------------------------------------------for choose category------------------------------------------------*/
.category_container_bg01 {
  background: url(../images/tf_choose_category_1000_img01.png) center center no-repeat;
  min-height: 890px;
}
.category_container_bg02 {
  background: url(../images/tf_choose_category_1000_img02.png) center center no-repeat;
  min-height: 890px;
}
.category_content {
  margin-top: 380px;
  margin-left: 200px;
}
.category_content a {
  width: 180px;
  height: 60px;
  border: 1px solid #ffffff;
  color: #ffffff;
  text-align: center;
  line-height: 60px;
  font-size: 25px;
  font-family: "HelveticaNeue";
  text-decoration: none;
  padding: 10px;
}
.category_content a:hover {
  background: #ef3133;
  text-decoration: none;
}
.category_content p {
  font-size: 20px;
  color: #ffffff;
  font-family: "HelveticaNeue";
  margin-top: 20px;
  line-height: 20px;
}
@media (max-width: 1366px) {
  .category_container_bg01 {
    background: url(../images/tf_choose_category_1366_img01.png) center center no-repeat;
    min-height: 584px;
  }
  .category_container_bg02 {
    background: url(../images/tf_choose_category_1366_img02.png) center center no-repeat;
    min-height: 584px;
  }
  .category_content {
    margin-top: 350px;
    margin-left: 70px;
  }
  .category_content a {
    width: 150px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
  }
  .category_content p {
    font-size: 18px;
    line-height: 18px;
  }
}
/****************************************************************************************************************************Change this media with full css*/
@media (max-width: 1024px) {
  .category_container_bg01 {
    background: url(../images/tf_choose_category_1000_img01.png) center center no-repeat;
    min-height: 725px;
  }
  .category_container_bg02 {
    background: url(../images/tf_choose_category_1000_img02.png) center center no-repeat;
    min-height: 725px;
  }
  .category_content {
    margin-top: 350px;
    margin-left: 70px;
  }
  .category_content a {
    width: 150px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
  }
  .category_content p {
    font-size: 18px;
    line-height: 18px;
  }
}
/****************************************************************************************************************************Change this media with full css*/
@media (max-width: 991px) {
  .category_container_bg01 {
    background: url(../images/tf_choose_category_1000_img01.png) center center no-repeat;
    height: auto;
    min-height: 500px;
  }
  .category_container_bg02 {
    background: url(../images/tf_choose_category_1000_img02.png) center center no-repeat;
    height: auto;
    min-height: 500px;
  }
  .category_content {
    margin-top: 200px;
    margin-left: 50px;
  }
  .category_content a {
    width: 120px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
  }
  .category_content p {
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 20px;
  }
}
/****************************************************************************************************************************Change this media with full css*/
@media (max-width: 768px) {
  .category_container_bg01 {
    background: url(../images/tf_choose_category_768_img01.png) center center no-repeat;
    height: auto;
    min-height: 400px;
  }
  .category_container_bg02 {
    background: url(../images/tf_choose_category_768_img02.png) center center no-repeat;
    height: auto;
    min-height: 400px;
  }
  .category_content {
    margin-top: 200px;
    margin-left: 50px;
  }
  .category_content a {
    width: 120px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
  }
  .category_content p {
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 20px;
  }
}
/*------------------------------------------------for choose category------------------------------------------------*/
/*------------------------------------------------for choose video------------------------------------------------*/
.choose_video_bg01 {
  position: relative;
  z-index: 2;
}
.choose_video_gallery {
  width: 100%;
  margin-top: 150px;
  margin-bottom: 150px;
}
.choose_video_gallery ul {
  margin: 0;
  padding: 0;
  text-align: center;
}
.choose_video_gallery ul li {
  display: inline-block;
  width: 244px;
  height: 187px;
  margin: 0 2px;
}
.choose_video_gallery ul li:nth-child(1) {
  background: url(../images/tf_video_thumbnail_img01.png) no-repeat center center;
}
.choose_video_gallery ul li:nth-child(2) {
  background: url(../images/tf_video_thumbnail_img02.png) no-repeat center center;
}
.choose_video_gallery ul li:nth-child(3) {
  background: url(../images/tf_video_thumbnail_img03.png) no-repeat center center;
}
.choose_video_gallery ul li:nth-child(4) {
  background: url(../images/tf_video_thumbnail_img04.png) no-repeat center center;
}
.choose_video_gallery ul li:nth-child(5) {
  background: url(../images/tf_video_thumbnail_img05.png) no-repeat center center;
}
.choose_video_gallery ul li:nth-child(6) {
  background: url(../images/tf_video_thumbnail_img06.png) no-repeat center center;
}
.choose_video_gallery ul li:nth-child(7) {
  background: url(../images/tf_video_thumbnail_img07.png) no-repeat center center;
}
.choose_video_gallery ul li:nth-child(8) {
  background: url(../images/tf_video_thumbnail_img08.png) no-repeat center center;
}
.choose_video_gallery ul li:nth-child(9) {
  background: url(../images/tf_video_thumbnail_img09.png) no-repeat center center;
}
.choose_video_gallery ul li:nth-child(10) {
  background: url(../images/tf_video_thumbnail_img10.png) no-repeat center center;
}
.choose_video_gallery ul li:nth-child(11) {
  background: url(../images/tf_video_thumbnail_img11.png) no-repeat center center;
}
.choose_video_gallery ul li:nth-child(12) {
  background: url(../images/tf_video_thumbnail_img12.png) no-repeat center center;
}
.choose_video_gallery ul li a {
  height: 187px;
  width: 244px;
  display: inline-flex;
  position: relative;
  font-family: "HelveticaNeue";
  font-weight: 400;
  font-size: 16px;
  border: 1px solid #ffffff;
  color: #ffffff;
}
.choose_video_gallery ul li a:hover {
  background: rgba(196, 35, 47, 0.5);
  color: #ffffff;
  height: 187px;
  width: 244px;
}
.choose_video_gallery ul li a p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
}
@media (max-width: 1366px) {
  .choose_video_bg01 {
    height: 768px;
  }
  .choose_video_gallery {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
@media (max-width: 1024px) {
  .choose_video_bg01 {
    height: 715px;
  }
  .choose_video_gallery {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
@media (max-width: 768px) {
  .choose_video_bg01 {
    height: 372px;
  }
  .choose_video_gallery {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .choose_video_gallery ul li {
    width: 193px;
    height: 148px;
  }
  .choose_video_gallery ul li a {
    height: 148px;
    width: 193px;
    font-size: 14px;
  }
  .choose_video_gallery ul li a:hover {
    height: 148px;
    width: 193px;
  }
}
/*------------------------------------------------for choose video------------------------------------------------*/
/*------------------------------------------------for workflow------------------------------------------------*/
.workflow_menu {
  width: 100%;
  overflow-y: auto;
  height: 100%;
  padding-bottom: 115px;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-button {
  /* 2 */
}
::-webkit-scrollbar-track {
  width: 4px;
  background: #888b9c;
}
::-webkit-scrollbar-track-piece {
  /* 4 */
}
::-webkit-scrollbar-thumb {
  background: #0b5ed7;
  width: 2px;
  border: 2px solid #888b9c;
}
::-webkit-scrollbar-corner {
  /* 6 */
}
::-webkit-resizer {
  /* 7 */
}

.workflow_menu ul {
  padding: 0;
  list-style-type: none;
  margin-bottom: 70px;
  margin-left: 50px;
  margin-top: 20px;
  position: relative;
}
.workflow_menu ul li {
  padding: 0;
  margin: 0;
  width: 159px;
  height: 159px;
  border-radius: 50%;
  font-size: 25px;
  line-height: 50px;
  overflow: hidden;
  margin-bottom: 40px;
}
.workflow_menu ul li:nth-child(1) {
  background: url(../images/tf_workflow_menu_img01.png) no-repeat center center;
}
.workflow_menu ul li:nth-child(3) {
  background: url(../images/tf_workflow_menu_img02.png) no-repeat center center;
}
.workflow_menu ul li:nth-child(5) {
  background: url(../images/tf_workflow_menu_img03.png) no-repeat center center;
}
.workflow_menu ul li:nth-child(7) {
  background: url(../images/tf_workflow_menu_img04.png) no-repeat center center;
}
.workflow_menu ul li:nth-child(9) {
  background: url(../images/tf_workflow_menu_img01.png) no-repeat center center;
}
.workflow_menu ul li:nth-child(11) {
  background: url(../images/tf_workflow_menu_img02.png) no-repeat center center;
}
.workflow_menu ul li:nth-child(13) {
  background: url(../images/tf_workflow_menu_img03.png) no-repeat center center;
}
.workflow_menu ul li:nth-child(15) {
  background: url(../images/tf_workflow_menu_img04.png) no-repeat center center;
}
.workflow_menu ul li a {
  width: 159px;
  height: 159px;
  border-radius: 50%;
  overflow: hidden;
  background: none;
  font-size: 20px;
  line-height: 20px;
  text-decoration: none;
  color: #fff;
  padding: 20px;
  display: inline-flex;
  font-weight: 300;
  position: relative;
  text-align: center;
}
/*.step_menu ul li a:hover { text-decoration:none; color:#D4D4D4; background:#2f313a;}*/
.workflow_menu ul li a:visited,
.step_menu ul li a:active {
  width: 159px;
  height: 159px;
  color: #fff;
  border: 4px solid #ff0004;
  border-radius: 50%;
  overflow: hidden;
}
.workflow_menu ul li a:hover {
  width: 159px;
  height: 159px;
  color: #fff;
  border: 4px solid #ff0004;
  border-radius: 50%;
  overflow: hidden;
}
.workflow_menu ul li a p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.workflow_menu ul img {
  position: absolute;
}
.workflow_menu ul img:nth-child(2) {
  top: 95px;
  left: -40px;
}
.workflow_menu ul img:nth-child(4) {
  top: 300px;
  right: 25px;
}
.workflow_menu ul img:nth-child(6) {
  top: 495px;
  left: -40px;
}
.workflow_menu ul img:nth-child(8) {
  top: 700px;
  right: 25px;
}
.workflow_menu ul img:nth-child(10) {
  top: 895px;
  left: -40px;
}
.workflow_menu ul img:nth-child(12) {
  top: 1100px;
  right: 25px;
}
.workflow_menu ul img:nth-child(14) {
  top: 1295px;
  left: -40px;
}
/*------------------------------------------------for workflow------------------------------------------------*/
/*------------------------------------------------for login------------------------------------------------*/
.login_bg {
  position: relative;
  z-index: 2;
}
.login_text {
  width: 100%;
  text-align: center;
  margin-top: 50px;
}
.login_text h3 {
  font-size: 40px;
  font-weight: 400;
  color: #0f238c;
  /* color:#ffffff !important; */
}
.login_text h2 {
  font-size: 80px;
  font-weight: 300;
  color: #0f238c;
  /* color:#ffffff !important; */
}
.login_text h2 span, .login_text h3 span {
  font-weight: 900;
}
.panel {
  background: none;
  border-radius: 0px;
  color: #fff;
}
.panel-heading {
  border-radius: 0px;
}
.panel-body {
  background: rgba(0, 0, 0, 0.5);
}
.input-group-addon {
  border-radius: 0px;
}
.form-control {
  border-radius: 0px;
}

.card-container.card {
  max-width: 350px;
  padding: 40px 40px;
}

.btn {
  /* font-weight: 700; */
  height: 36px;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

/*
 * Card component
 */
.login_bg .card {
  background-color: rgba(255, 255, 255, 0.5);
  /* just in case there no content*/
  padding: 20px 25px 30px;
  margin: 0 auto 25px;
  margin-top: 50px;
  /* shadows and rounded borders */
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

.profile-img-card {
  width: 96px;
  height: 96px;
  margin: 0 auto 10px;
  display: block;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

/*
 * Form styles
 */
.profile-name-card {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 10px 0 0;
  min-height: 1em;
}

.reauth-email {
  display: block;
  color: #404040;
  line-height: 2;
  margin-bottom: 10px;
  font-size: 14px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.form-signin #inputEmail,
.form-signin #inputPassword,
.form-signin #inputName,
.form-signin #inputSignupEmail,
.form-signin #inputCountry,
.form-signin #inputState,
.form-signin #inputSignupPassword,
.form-signin #inputConPassword {
  direction: ltr;
  height: 44px;
  font-size: 16px;
}

.form-signin input[type="email"],
.form-signin input[type="password"],
.form-signin input[type="text"],
.form-signin button {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  z-index: 1;
  position: relative;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.form-signin .form-control:focus {
  border-color: rgb(104, 145, 162);
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgb(104, 145, 162);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgb(104, 145, 162);
}

.btn.btn-signin {
  /*background-color: #4d90fe; */
  background-color: rgb(7, 48, 85); 
   /* rgb(104, 145, 162); */
  /* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/
  font-weight: 700;
  font-size: 14px;
  height: 36px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: none;
  -o-transition: all 0.218s;
  -moz-transition: all 0.218s;
  -webkit-transition: all 0.218s;
  transition: all 0.218s;
  color:white !important;
}

.btn.btn-signin:hover,
.btn.btn-signin:active,
.btn.btn-signin:focus {
  background-color: rgb(7, 48, 85);
}

.forgot-password {
  color: rgb(104, 145, 162);
}

.forgot-password:hover,
.forgot-password:active,
.forgot-password:focus {
  color: rgb(7, 48, 85);
}
.btn-primary {
  background-image: none;
}

@media (max-width: 768px) {
  .login_text {
    margin-top: 10px;
  }
  .login_text h3 {
    font-size: 20px;
    font-weight: 400;
    color: #073055;
  }
  .login_text h2 {
    font-size: 40px;
    font-weight: 300;
    color: #073055;
    margin: 10px;
  }
  .login_text h2 span {
    font-weight: 900;
  }
  .card-container.card {
    padding: 10px;
  }
  .card {
    margin-top: 10px;
  }
  .form-signin #inputEmail,
  .form-signin #inputPassword,
  .form-signin #inputName,
  .form-signin #inputSignupEmail,
  .form-signin #inputCountry,
  .form-signin #inputState,
  .form-signin #inputSignupPassword,
  .form-signin #inputConPassword {
    height: 30px;
    font-size: 14px;
  }
  .card-container.card {
    max-width: 300px;
  }
}
/*------------------------------------------------for login------------------------------------------------*/
/*------------------------------------------------for learning nodule menu------------------------------------------------*/
.learning_nodule_menu {
  margin-top: 150px;
}
.learning_nodule_menu h2 {
  color: white;
}

@media (max-width: 1366px) {
  .learning_nodule_menu {
    margin-top: 200px;
  }
}
@media (max-width: 1024px) {
  .learning_nodule_menu {
    margin-top: 180px;
  }
}
@media (max-width: 768px) {
  .learning_nodule_menu {
    margin-top: 50px;
  }
  .learning_nodule_menu h2 {
    font-size: 20px;
  }
}
/*------------------------------------------------for learning nodule menu------------------------------------------------*/
/*------------------------------------------------for knowledge check------------------------------------------------*/
.knowledge_check_bg01 {
  position: relative;
  z-index: 2;
}
.knowledge_check_img_holder {
  width: 100%;
  margin-top: 150px;
}
.quiz_box {
  width: 100%;
  margin-top: 160px;
  margin-bottom: 20px;
}
.quiz_box h3 {
  font-size: 30px;
  color: #fff;
}
.quiz_box p {
  font-size: 24px;
  color: #fff;
  font-family: "HelveticaNeue";
  margin-top: 50px;
  margin-bottom: 50px;
}
.knowledge_check_bg01 a {
  font-size: 20px;
  color: #fff;
  border: 1px solid #fff;
  text-transform: uppercase;
  text-decoration: none;
  padding: 3px 10px;
  border-radius: 5px;
}
.knowledge_check_bg01 a:hover {
  background: #ee2e36;
  color: #fff;
}
label {
  font-weight: normal;
}

/* The container */
.knowledge_check {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 24px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.knowledge_check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 5px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
  border: 2px solid #ee2e36;
}

/* On mouse-over, add a grey background color */
.knowledge_check:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.knowledge_check input:checked ~ .checkmark {
  background-color: #fff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.knowledge_check input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.knowledge_check .checkmark:after {
  top: 5px;
  left: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ee2e36;
}

/*-----------------------------------------*/
/* Create a custom checkbox */
.checkmark2 {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border: 2px solid #ee2e36;
}

/* On mouse-over, add a grey background color */
.knowledge_check:hover input ~ .checkmark2 {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.knowledge_check input:checked ~ .checkmark2 {
  background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark2:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.knowledge_check input:checked ~ .checkmark2:after {
  display: block;
}

/* Style the checkmark/indicator */
.knowledge_check .checkmark2:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #ee2e36;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*-----------------------------------------*/

@media (max-width: 1366px) {
  .knowledge_check_bg01 {
    height: 584px;
  }
  .knowledge_check_img_holder {
    margin-top: 80px;
  }
  .quiz_box {
    margin-top: 80px;
    padding-left: 200px;
  }
  .quiz_box h3 {
    font-size: 25px;
  }
  .quiz_box p {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .knowledge_check {
    font-size: 20px;
  }
}
@media (max-width: 1024px) {
  .knowledge_check_bg01 {
    height: 715px;
  }
  .knowledge_check_img_holder {
    margin-top: 200px;
  }
  .quiz_box {
    margin-top: 190px;
    padding-left: 0;
  }
  .quiz_box p {
    font-size: 16px;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
@media (max-width: 768px) {
  .knowledge_check_bg01 {
    height: 50px;
  }
  .knowledge_check_img_holder {
    margin-top: 20px;
  }
  .quiz_box {
    margin-top: 60px;
    padding-left: 0;
  }
  .quiz_box h3 {
    font-size: 20px;
  }
  .quiz_box p {
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .knowledge_check {
    font-size: 14px;
  }
}
/*------------------------------------------------for knowledge check------------------------------------------------*/
/*------------------------------------------------for result------------------------------------------------*/
.result_bg {
  background: url(../images/result_bg01.png) center center no-repeat;
  height: 793px;
  margin-top: 50px;
}
.result_bg h2 {
  font-size: 60px;
  text-align: center;
  color: #646464;
  font-weight: 300;
  margin-top: 120px;
  margin-bottom: 30px;
}
.result_bg h3 {
  font-size: 30px;
  text-align: right;
  color: #646464;
  font-weight: 400;
  margin-top: 100px;
}
.result_bg p {
  font-size: 24px;
  text-align: center;
  color: #646464;
  font-weight: 400;
  margin-top: 30px;
}
@media (max-width: 1366px) {
  .result_bg {
    background: url(../images/result_bg03.png) center center no-repeat;
    height: 516px;
    margin-top: 35px;
  }
  .result_bg h2 {
    font-size: 50px;
    margin-top: 70px;
  }
  .result_bg h3 {
    font-size: 25px;
    margin-top: 45px;
  }
}
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
  .result_bg {
    background: url(../images/result_bg02.png) center center no-repeat;
    height: 333px;
    margin-top: 20px;
  }
  .result_bg h2 {
    font-size: 30px;
    margin-top: 50px;
  }
  .result_bg h3 {
    font-size: 14px;
    margin-top: 30px;
  }
  .result_bg p {
    font-size: 14px;
    text-align: center;
    margin-top: 30px;
  }
}
@media (max-width: 480px) {
  .result_bg {
    background: url(../images/result_bg04.png) center top no-repeat;
    height: 330px;
    margin-top: 20px;
  }
  .result_bg h2 {
    font-size: 20px;
    margin-top: 50px;
  }
  .result_bg h3 {
    font-size: 14px;
    margin-top: 30px;
  }
  .result_bg p {
    font-size: 14px;
    text-align: center;
    margin-top: 30px;
  }
}
/*------------------------------------------------for result------------------------------------------------*/

@media (min-width: 1500px) {
  .container {
    width: 1470px;
  }
}

select.form-control {
  margin-bottom: 10px;
}

/*------------------------------------------------video left menu tab------------------------------------------------*/
.video_left_menu {
  width: 100%;
  height: 100vh;
  background: #555555;
}
.video_left_menu h5 {
  color: white;
  padding: 10px;
  margin: 0;
  font-size: 17px;
  border-bottom: 1px solid #333333;
}
.nav-tabs {
  border-bottom: 1px solid #333333;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  border-width: 0;
  background: none;
}
.nav-tabs > li > a {
  border: none;
  color: #aaaaaa;
  font-size: 14px;
}
.nav-tabs > li.active > a,
.nav-tabs > li > a:hover {
  border: none;
  color: #ffffff !important;
  font-weight: 400;
  background: none;
}
.nav-tabs > li > a::after {
  content: "";
  background: #ef3133;
  height: 4px;
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 1px;
  transition: all 250ms ease 0s;
  transform: scale(0);
}
.nav-tabs > li.active > a::after,
.nav-tabs > li:hover > a::after {
  transform: scale(1);
}
.tab-nav > li > a::after {
  background: #21527d none repeat scroll 0% 0%;
  color: #fff;
}
.tab-pane {
}
.tab-content {
	height: 80vh;
	overflow-y: scroll;
}
/* .nav > li > a {
  padding: 20px 0;
  margin-left: 20px;
} */

@media (max-width: 768px) {
  .video_left_menu {
    height: auto;
    background: #555555;
    float: left;
  }
.tab-content {
	height: auto;
	overflow-y: inherit;
}
}
/*------------------------------------------------video left menu tab------------------------------------------------*/

.accordion-toggle:after {
  font-family: "FontAwesome";
  content: "\f078";
  float: right;
}
.accordion-opened .accordion-toggle:after {
  font-family: "FontAwesome";
  content: "\f054";
  float: right;
}
.accordion-group {
  border-bottom: 1px solid #333333;
}
.accordion-toggle {
  background: #555555;
  width: 100%;
  display: block;
  padding: 20px;
  color: white;
}
.accordion-toggle:hover {
  background: #555555;
  color: white;
  text-decoration: none;
}
.accordion-toggle:focus {
  color: white;
  text-decoration: none;
}
.accordion-inner {
  background: #222222;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
}
#accordion .panel {
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #333333;
}
#accordion .panel-heading {
  padding: 0;
  border: none;
  border-radius: 0;
  z-index: 1;
  position: relative;
}
#accordion .panel-heading:before,
#accordion .panel-heading:after {
  content: "";
  width: 50%;
  height: 20%;
  position: absolute;
  bottom: 15px;
  left: 10px;
  transform: rotate(-3deg);
  z-index: -1;
}
#accordion .panel-heading:after {
  left: auto;
  right: 10px;
  transform: rotate(3deg);
}
#accordion .panel-title a {
  display: block;
  padding: 18px 45px 18px 45px;
  margin: 0;
  background: #555555;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  border-radius: 0;
  position: relative;
}
#accordion .panel-title a:hover {
  background: #555555;
}
#accordion .panel-title a:before,
#accordion .panel-title a.collapsed:before {
  content: "\f106";
  font-family: "FontAwesome";
  width: 55px;
  height: 100%;
  text-align: center;
  line-height: 58px;
  position: absolute;
  top: 0;
  right: 0;
}
#accordion .panel-title a.collapsed:before {
  content: "\f107";
}
#accordion .panel-title a .icon {
  display: inline-block;
  width: 55px;
  height: 100%;
  border-right: 2px solid #d11149;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 50px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}
#accordion .panel-body {
  border-top: none;
  background: #fff;
  font-size: 15px;
  color: #333;
  line-height: 27px;
}
#accordion .panel-body ul li h3 {
  line-height: 27px;
}
#accordion .panel-title a .numbercircle {
  display: inline-block;
  width: 20px;
  height: 20px;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  position: absolute;
  top: 20px;
  left: 15px;
  border-radius: 50%;
  background: #333333;
}
.panel-group .panel + .panel {
  margin-top: 0px;
}
#accordion .panel-title a h2 {
  font-size: 12px;
  margin: 0;
}
#accordion .panel-title a .headersubline {
  font-size: 9px;
  color: #aaa;
}

.p-0 {
  padding: 0 0 !important;
}
.m-0 {
  margin: 0 0 !important;
}
#accordion .panel-body .clips {
  height: auto;
}
.side-menu-clip {
  cursor: pointer;
  background-image: url(/player/client/images/clip-bg.svg);
  background-repeat: repeat-y;
  outline: none;
}
.ps-color-bg-gray-05 {
  background-color: #222;
}
.ps-color-gray-02 {
  color: #aaa;
}
.pr-lg {
  padding-right: 1.5rem !important;
}

.py-sm {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}
.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.d-flex {
  display: flex !important;
}
.side-menu-clip-progress,
.side-menu-module-progress {
  width: 4rem;
}
.align-items-center {
  align-items: center !important;
}
.justify-content-center {
  justify-content: center !important;
}
.side-menu-clip-unwatched-icon {
  width: 10px;
  height: 10px;
}
.side-menu-clip:hover:not(.selected) {
  color: #fff;
}
.side-menu-clip:hover {
  background-color: #333333;
  transition: all 0.2s;
}
.ps-color-bg-gray-04 {
  background-color: #555555;
}
.rounded-circle {
  border-radius: 50%;
}
.side-menu-clip-title {
  flex: 1;
}

.ps-type-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-type-xs {
  font-size: 10px;
}
.ps-type-weight-book {
  font-weight: 400;
}
.pl-tiny {
  padding-left: 0.25rem !important;
}
.panel-body {
  padding: 0px;
}

/* Circle CSS */

.rect-auto,
.c100.p51 .slice,
.c100.p52 .slice,
.c100.p53 .slice,
.c100.p54 .slice,
.c100.p55 .slice,
.c100.p56 .slice,
.c100.p57 .slice,
.c100.p58 .slice,
.c100.p59 .slice,
.c100.p60 .slice,
.c100.p61 .slice,
.c100.p62 .slice,
.c100.p63 .slice,
.c100.p64 .slice,
.c100.p65 .slice,
.c100.p66 .slice,
.c100.p67 .slice,
.c100.p68 .slice,
.c100.p69 .slice,
.c100.p70 .slice,
.c100.p71 .slice,
.c100.p72 .slice,
.c100.p73 .slice,
.c100.p74 .slice,
.c100.p75 .slice,
.c100.p76 .slice,
.c100.p77 .slice,
.c100.p78 .slice,
.c100.p79 .slice,
.c100.p80 .slice,
.c100.p81 .slice,
.c100.p82 .slice,
.c100.p83 .slice,
.c100.p84 .slice,
.c100.p85 .slice,
.c100.p86 .slice,
.c100.p87 .slice,
.c100.p88 .slice,
.c100.p89 .slice,
.c100.p90 .slice,
.c100.p91 .slice,
.c100.p92 .slice,
.c100.p93 .slice,
.c100.p94 .slice,
.c100.p95 .slice,
.c100.p96 .slice,
.c100.p97 .slice,
.c100.p98 .slice,
.c100.p99 .slice,
.c100.p100 .slice {
  clip: rect(auto, auto, auto, auto);
}
.pie,
.c100 .bar,
.c100.p51 .fill,
.c100.p52 .fill,
.c100.p53 .fill,
.c100.p54 .fill,
.c100.p55 .fill,
.c100.p56 .fill,
.c100.p57 .fill,
.c100.p58 .fill,
.c100.p59 .fill,
.c100.p60 .fill,
.c100.p61 .fill,
.c100.p62 .fill,
.c100.p63 .fill,
.c100.p64 .fill,
.c100.p65 .fill,
.c100.p66 .fill,
.c100.p67 .fill,
.c100.p68 .fill,
.c100.p69 .fill,
.c100.p70 .fill,
.c100.p71 .fill,
.c100.p72 .fill,
.c100.p73 .fill,
.c100.p74 .fill,
.c100.p75 .fill,
.c100.p76 .fill,
.c100.p77 .fill,
.c100.p78 .fill,
.c100.p79 .fill,
.c100.p80 .fill,
.c100.p81 .fill,
.c100.p82 .fill,
.c100.p83 .fill,
.c100.p84 .fill,
.c100.p85 .fill,
.c100.p86 .fill,
.c100.p87 .fill,
.c100.p88 .fill,
.c100.p89 .fill,
.c100.p90 .fill,
.c100.p91 .fill,
.c100.p92 .fill,
.c100.p93 .fill,
.c100.p94 .fill,
.c100.p95 .fill,
.c100.p96 .fill,
.c100.p97 .fill,
.c100.p98 .fill,
.c100.p99 .fill,
.c100.p100 .fill {
  position: absolute;
  border: 0.08em solid #307bbb;
  width: 0.84em;
  height: 0.84em;
  clip: rect(0em, 0.5em, 1em, 0em);
  border-radius: 50%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.pie-fill,
.c100.p51 .bar:after,
.c100.p51 .fill,
.c100.p52 .bar:after,
.c100.p52 .fill,
.c100.p53 .bar:after,
.c100.p53 .fill,
.c100.p54 .bar:after,
.c100.p54 .fill,
.c100.p55 .bar:after,
.c100.p55 .fill,
.c100.p56 .bar:after,
.c100.p56 .fill,
.c100.p57 .bar:after,
.c100.p57 .fill,
.c100.p58 .bar:after,
.c100.p58 .fill,
.c100.p59 .bar:after,
.c100.p59 .fill,
.c100.p60 .bar:after,
.c100.p60 .fill,
.c100.p61 .bar:after,
.c100.p61 .fill,
.c100.p62 .bar:after,
.c100.p62 .fill,
.c100.p63 .bar:after,
.c100.p63 .fill,
.c100.p64 .bar:after,
.c100.p64 .fill,
.c100.p65 .bar:after,
.c100.p65 .fill,
.c100.p66 .bar:after,
.c100.p66 .fill,
.c100.p67 .bar:after,
.c100.p67 .fill,
.c100.p68 .bar:after,
.c100.p68 .fill,
.c100.p69 .bar:after,
.c100.p69 .fill,
.c100.p70 .bar:after,
.c100.p70 .fill,
.c100.p71 .bar:after,
.c100.p71 .fill,
.c100.p72 .bar:after,
.c100.p72 .fill,
.c100.p73 .bar:after,
.c100.p73 .fill,
.c100.p74 .bar:after,
.c100.p74 .fill,
.c100.p75 .bar:after,
.c100.p75 .fill,
.c100.p76 .bar:after,
.c100.p76 .fill,
.c100.p77 .bar:after,
.c100.p77 .fill,
.c100.p78 .bar:after,
.c100.p78 .fill,
.c100.p79 .bar:after,
.c100.p79 .fill,
.c100.p80 .bar:after,
.c100.p80 .fill,
.c100.p81 .bar:after,
.c100.p81 .fill,
.c100.p82 .bar:after,
.c100.p82 .fill,
.c100.p83 .bar:after,
.c100.p83 .fill,
.c100.p84 .bar:after,
.c100.p84 .fill,
.c100.p85 .bar:after,
.c100.p85 .fill,
.c100.p86 .bar:after,
.c100.p86 .fill,
.c100.p87 .bar:after,
.c100.p87 .fill,
.c100.p88 .bar:after,
.c100.p88 .fill,
.c100.p89 .bar:after,
.c100.p89 .fill,
.c100.p90 .bar:after,
.c100.p90 .fill,
.c100.p91 .bar:after,
.c100.p91 .fill,
.c100.p92 .bar:after,
.c100.p92 .fill,
.c100.p93 .bar:after,
.c100.p93 .fill,
.c100.p94 .bar:after,
.c100.p94 .fill,
.c100.p95 .bar:after,
.c100.p95 .fill,
.c100.p96 .bar:after,
.c100.p96 .fill,
.c100.p97 .bar:after,
.c100.p97 .fill,
.c100.p98 .bar:after,
.c100.p98 .fill,
.c100.p99 .bar:after,
.c100.p99 .fill,
.c100.p100 .bar:after,
.c100.p100 .fill {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.c100 {
  position: relative;
  font-size: 120px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  float: left;
  margin: 0 0.1em 0.1em 0;
  background-color: #cccccc;
}
.c100 *,
.c100 *:before,
.c100 *:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.c100.center {
  float: none;
  margin: 0 auto;
}
.c100.big {
  font-size: 240px;
}
.c100.small {
  font-size: 80px;
}
.c100 > span {
  position: absolute;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  width: 5em;
  line-height: 5em;
  font-size: 0.2em;
  color: #cccccc;
  display: block;
  text-align: center;
  white-space: nowrap;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.c100:after {
  position: absolute;
  top: 0.08em;
  left: 0.08em;
  display: block;
  content: " ";
  border-radius: 50%;
  background-color: #f5f5f5;
  width: 0.84em;
  height: 0.84em;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}
.c100 .slice {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0em, 1em, 1em, 0.5em);
}
.c100.p1 .bar {
  -webkit-transform: rotate(3.6deg);
  -moz-transform: rotate(3.6deg);
  -ms-transform: rotate(3.6deg);
  -o-transform: rotate(3.6deg);
  transform: rotate(3.6deg);
}
.c100.p2 .bar {
  -webkit-transform: rotate(7.2deg);
  -moz-transform: rotate(7.2deg);
  -ms-transform: rotate(7.2deg);
  -o-transform: rotate(7.2deg);
  transform: rotate(7.2deg);
}
.c100.p3 .bar {
  -webkit-transform: rotate(10.8deg);
  -moz-transform: rotate(10.8deg);
  -ms-transform: rotate(10.8deg);
  -o-transform: rotate(10.8deg);
  transform: rotate(10.8deg);
}
.c100.p4 .bar {
  -webkit-transform: rotate(14.4deg);
  -moz-transform: rotate(14.4deg);
  -ms-transform: rotate(14.4deg);
  -o-transform: rotate(14.4deg);
  transform: rotate(14.4deg);
}
.c100.p5 .bar {
  -webkit-transform: rotate(18deg);
  -moz-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -o-transform: rotate(18deg);
  transform: rotate(18deg);
}
.c100.p6 .bar {
  -webkit-transform: rotate(21.6deg);
  -moz-transform: rotate(21.6deg);
  -ms-transform: rotate(21.6deg);
  -o-transform: rotate(21.6deg);
  transform: rotate(21.6deg);
}
.c100.p7 .bar {
  -webkit-transform: rotate(25.2deg);
  -moz-transform: rotate(25.2deg);
  -ms-transform: rotate(25.2deg);
  -o-transform: rotate(25.2deg);
  transform: rotate(25.2deg);
}
.c100.p8 .bar {
  -webkit-transform: rotate(28.8deg);
  -moz-transform: rotate(28.8deg);
  -ms-transform: rotate(28.8deg);
  -o-transform: rotate(28.8deg);
  transform: rotate(28.8deg);
}
.c100.p9 .bar {
  -webkit-transform: rotate(32.4deg);
  -moz-transform: rotate(32.4deg);
  -ms-transform: rotate(32.4deg);
  -o-transform: rotate(32.4deg);
  transform: rotate(32.4deg);
}
.c100.p10 .bar {
  -webkit-transform: rotate(36deg);
  -moz-transform: rotate(36deg);
  -ms-transform: rotate(36deg);
  -o-transform: rotate(36deg);
  transform: rotate(36deg);
}
.c100.p11 .bar {
  -webkit-transform: rotate(39.6deg);
  -moz-transform: rotate(39.6deg);
  -ms-transform: rotate(39.6deg);
  -o-transform: rotate(39.6deg);
  transform: rotate(39.6deg);
}
.c100.p12 .bar {
  -webkit-transform: rotate(43.2deg);
  -moz-transform: rotate(43.2deg);
  -ms-transform: rotate(43.2deg);
  -o-transform: rotate(43.2deg);
  transform: rotate(43.2deg);
}
.c100.p13 .bar {
  -webkit-transform: rotate(46.800000000000004deg);
  -moz-transform: rotate(46.800000000000004deg);
  -ms-transform: rotate(46.800000000000004deg);
  -o-transform: rotate(46.800000000000004deg);
  transform: rotate(46.800000000000004deg);
}
.c100.p14 .bar {
  -webkit-transform: rotate(50.4deg);
  -moz-transform: rotate(50.4deg);
  -ms-transform: rotate(50.4deg);
  -o-transform: rotate(50.4deg);
  transform: rotate(50.4deg);
}
.c100.p15 .bar {
  -webkit-transform: rotate(54deg);
  -moz-transform: rotate(54deg);
  -ms-transform: rotate(54deg);
  -o-transform: rotate(54deg);
  transform: rotate(54deg);
}
.c100.p16 .bar {
  -webkit-transform: rotate(57.6deg);
  -moz-transform: rotate(57.6deg);
  -ms-transform: rotate(57.6deg);
  -o-transform: rotate(57.6deg);
  transform: rotate(57.6deg);
}
.c100.p17 .bar {
  -webkit-transform: rotate(61.2deg);
  -moz-transform: rotate(61.2deg);
  -ms-transform: rotate(61.2deg);
  -o-transform: rotate(61.2deg);
  transform: rotate(61.2deg);
}
.c100.p18 .bar {
  -webkit-transform: rotate(64.8deg);
  -moz-transform: rotate(64.8deg);
  -ms-transform: rotate(64.8deg);
  -o-transform: rotate(64.8deg);
  transform: rotate(64.8deg);
}
.c100.p19 .bar {
  -webkit-transform: rotate(68.4deg);
  -moz-transform: rotate(68.4deg);
  -ms-transform: rotate(68.4deg);
  -o-transform: rotate(68.4deg);
  transform: rotate(68.4deg);
}
.c100.p20 .bar {
  -webkit-transform: rotate(72deg);
  -moz-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  -o-transform: rotate(72deg);
  transform: rotate(72deg);
}
.c100.p21 .bar {
  -webkit-transform: rotate(75.60000000000001deg);
  -moz-transform: rotate(75.60000000000001deg);
  -ms-transform: rotate(75.60000000000001deg);
  -o-transform: rotate(75.60000000000001deg);
  transform: rotate(75.60000000000001deg);
}
.c100.p22 .bar {
  -webkit-transform: rotate(79.2deg);
  -moz-transform: rotate(79.2deg);
  -ms-transform: rotate(79.2deg);
  -o-transform: rotate(79.2deg);
  transform: rotate(79.2deg);
}
.c100.p23 .bar {
  -webkit-transform: rotate(82.8deg);
  -moz-transform: rotate(82.8deg);
  -ms-transform: rotate(82.8deg);
  -o-transform: rotate(82.8deg);
  transform: rotate(82.8deg);
}
.c100.p24 .bar {
  -webkit-transform: rotate(86.4deg);
  -moz-transform: rotate(86.4deg);
  -ms-transform: rotate(86.4deg);
  -o-transform: rotate(86.4deg);
  transform: rotate(86.4deg);
}
.c100.p25 .bar {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.c100.p26 .bar {
  -webkit-transform: rotate(93.60000000000001deg);
  -moz-transform: rotate(93.60000000000001deg);
  -ms-transform: rotate(93.60000000000001deg);
  -o-transform: rotate(93.60000000000001deg);
  transform: rotate(93.60000000000001deg);
}
.c100.p27 .bar {
  -webkit-transform: rotate(97.2deg);
  -moz-transform: rotate(97.2deg);
  -ms-transform: rotate(97.2deg);
  -o-transform: rotate(97.2deg);
  transform: rotate(97.2deg);
}
.c100.p28 .bar {
  -webkit-transform: rotate(100.8deg);
  -moz-transform: rotate(100.8deg);
  -ms-transform: rotate(100.8deg);
  -o-transform: rotate(100.8deg);
  transform: rotate(100.8deg);
}
.c100.p29 .bar {
  -webkit-transform: rotate(104.4deg);
  -moz-transform: rotate(104.4deg);
  -ms-transform: rotate(104.4deg);
  -o-transform: rotate(104.4deg);
  transform: rotate(104.4deg);
}
.c100.p30 .bar {
  -webkit-transform: rotate(108deg);
  -moz-transform: rotate(108deg);
  -ms-transform: rotate(108deg);
  -o-transform: rotate(108deg);
  transform: rotate(108deg);
}
.c100.p31 .bar {
  -webkit-transform: rotate(111.60000000000001deg);
  -moz-transform: rotate(111.60000000000001deg);
  -ms-transform: rotate(111.60000000000001deg);
  -o-transform: rotate(111.60000000000001deg);
  transform: rotate(111.60000000000001deg);
}
.c100.p32 .bar {
  -webkit-transform: rotate(115.2deg);
  -moz-transform: rotate(115.2deg);
  -ms-transform: rotate(115.2deg);
  -o-transform: rotate(115.2deg);
  transform: rotate(115.2deg);
}
.c100.p33 .bar {
  -webkit-transform: rotate(118.8deg);
  -moz-transform: rotate(118.8deg);
  -ms-transform: rotate(118.8deg);
  -o-transform: rotate(118.8deg);
  transform: rotate(118.8deg);
}
.c100.p34 .bar {
  -webkit-transform: rotate(122.4deg);
  -moz-transform: rotate(122.4deg);
  -ms-transform: rotate(122.4deg);
  -o-transform: rotate(122.4deg);
  transform: rotate(122.4deg);
}
.c100.p35 .bar {
  -webkit-transform: rotate(126deg);
  -moz-transform: rotate(126deg);
  -ms-transform: rotate(126deg);
  -o-transform: rotate(126deg);
  transform: rotate(126deg);
}
.c100.p36 .bar {
  -webkit-transform: rotate(129.6deg);
  -moz-transform: rotate(129.6deg);
  -ms-transform: rotate(129.6deg);
  -o-transform: rotate(129.6deg);
  transform: rotate(129.6deg);
}
.c100.p37 .bar {
  -webkit-transform: rotate(133.20000000000002deg);
  -moz-transform: rotate(133.20000000000002deg);
  -ms-transform: rotate(133.20000000000002deg);
  -o-transform: rotate(133.20000000000002deg);
  transform: rotate(133.20000000000002deg);
}
.c100.p38 .bar {
  -webkit-transform: rotate(136.8deg);
  -moz-transform: rotate(136.8deg);
  -ms-transform: rotate(136.8deg);
  -o-transform: rotate(136.8deg);
  transform: rotate(136.8deg);
}
.c100.p39 .bar {
  -webkit-transform: rotate(140.4deg);
  -moz-transform: rotate(140.4deg);
  -ms-transform: rotate(140.4deg);
  -o-transform: rotate(140.4deg);
  transform: rotate(140.4deg);
}
.c100.p40 .bar {
  -webkit-transform: rotate(144deg);
  -moz-transform: rotate(144deg);
  -ms-transform: rotate(144deg);
  -o-transform: rotate(144deg);
  transform: rotate(144deg);
}
.c100.p41 .bar {
  -webkit-transform: rotate(147.6deg);
  -moz-transform: rotate(147.6deg);
  -ms-transform: rotate(147.6deg);
  -o-transform: rotate(147.6deg);
  transform: rotate(147.6deg);
}
.c100.p42 .bar {
  -webkit-transform: rotate(151.20000000000002deg);
  -moz-transform: rotate(151.20000000000002deg);
  -ms-transform: rotate(151.20000000000002deg);
  -o-transform: rotate(151.20000000000002deg);
  transform: rotate(151.20000000000002deg);
}
.c100.p43 .bar {
  -webkit-transform: rotate(154.8deg);
  -moz-transform: rotate(154.8deg);
  -ms-transform: rotate(154.8deg);
  -o-transform: rotate(154.8deg);
  transform: rotate(154.8deg);
}
.c100.p44 .bar {
  -webkit-transform: rotate(158.4deg);
  -moz-transform: rotate(158.4deg);
  -ms-transform: rotate(158.4deg);
  -o-transform: rotate(158.4deg);
  transform: rotate(158.4deg);
}
.c100.p45 .bar {
  -webkit-transform: rotate(162deg);
  -moz-transform: rotate(162deg);
  -ms-transform: rotate(162deg);
  -o-transform: rotate(162deg);
  transform: rotate(162deg);
}
.c100.p46 .bar {
  -webkit-transform: rotate(165.6deg);
  -moz-transform: rotate(165.6deg);
  -ms-transform: rotate(165.6deg);
  -o-transform: rotate(165.6deg);
  transform: rotate(165.6deg);
}
.c100.p47 .bar {
  -webkit-transform: rotate(169.20000000000002deg);
  -moz-transform: rotate(169.20000000000002deg);
  -ms-transform: rotate(169.20000000000002deg);
  -o-transform: rotate(169.20000000000002deg);
  transform: rotate(169.20000000000002deg);
}
.c100.p48 .bar {
  -webkit-transform: rotate(172.8deg);
  -moz-transform: rotate(172.8deg);
  -ms-transform: rotate(172.8deg);
  -o-transform: rotate(172.8deg);
  transform: rotate(172.8deg);
}
.c100.p49 .bar {
  -webkit-transform: rotate(176.4deg);
  -moz-transform: rotate(176.4deg);
  -ms-transform: rotate(176.4deg);
  -o-transform: rotate(176.4deg);
  transform: rotate(176.4deg);
}
.c100.p50 .bar {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.c100.p51 .bar {
  -webkit-transform: rotate(183.6deg);
  -moz-transform: rotate(183.6deg);
  -ms-transform: rotate(183.6deg);
  -o-transform: rotate(183.6deg);
  transform: rotate(183.6deg);
}
.c100.p52 .bar {
  -webkit-transform: rotate(187.20000000000002deg);
  -moz-transform: rotate(187.20000000000002deg);
  -ms-transform: rotate(187.20000000000002deg);
  -o-transform: rotate(187.20000000000002deg);
  transform: rotate(187.20000000000002deg);
}
.c100.p53 .bar {
  -webkit-transform: rotate(190.8deg);
  -moz-transform: rotate(190.8deg);
  -ms-transform: rotate(190.8deg);
  -o-transform: rotate(190.8deg);
  transform: rotate(190.8deg);
}
.c100.p54 .bar {
  -webkit-transform: rotate(194.4deg);
  -moz-transform: rotate(194.4deg);
  -ms-transform: rotate(194.4deg);
  -o-transform: rotate(194.4deg);
  transform: rotate(194.4deg);
}
.c100.p55 .bar {
  -webkit-transform: rotate(198deg);
  -moz-transform: rotate(198deg);
  -ms-transform: rotate(198deg);
  -o-transform: rotate(198deg);
  transform: rotate(198deg);
}
.c100.p56 .bar {
  -webkit-transform: rotate(201.6deg);
  -moz-transform: rotate(201.6deg);
  -ms-transform: rotate(201.6deg);
  -o-transform: rotate(201.6deg);
  transform: rotate(201.6deg);
}
.c100.p57 .bar {
  -webkit-transform: rotate(205.20000000000002deg);
  -moz-transform: rotate(205.20000000000002deg);
  -ms-transform: rotate(205.20000000000002deg);
  -o-transform: rotate(205.20000000000002deg);
  transform: rotate(205.20000000000002deg);
}
.c100.p58 .bar {
  -webkit-transform: rotate(208.8deg);
  -moz-transform: rotate(208.8deg);
  -ms-transform: rotate(208.8deg);
  -o-transform: rotate(208.8deg);
  transform: rotate(208.8deg);
}
.c100.p59 .bar {
  -webkit-transform: rotate(212.4deg);
  -moz-transform: rotate(212.4deg);
  -ms-transform: rotate(212.4deg);
  -o-transform: rotate(212.4deg);
  transform: rotate(212.4deg);
}
.c100.p60 .bar {
  -webkit-transform: rotate(216deg);
  -moz-transform: rotate(216deg);
  -ms-transform: rotate(216deg);
  -o-transform: rotate(216deg);
  transform: rotate(216deg);
}
.c100.p61 .bar {
  -webkit-transform: rotate(219.6deg);
  -moz-transform: rotate(219.6deg);
  -ms-transform: rotate(219.6deg);
  -o-transform: rotate(219.6deg);
  transform: rotate(219.6deg);
}
.c100.p62 .bar {
  -webkit-transform: rotate(223.20000000000002deg);
  -moz-transform: rotate(223.20000000000002deg);
  -ms-transform: rotate(223.20000000000002deg);
  -o-transform: rotate(223.20000000000002deg);
  transform: rotate(223.20000000000002deg);
}
.c100.p63 .bar {
  -webkit-transform: rotate(226.8deg);
  -moz-transform: rotate(226.8deg);
  -ms-transform: rotate(226.8deg);
  -o-transform: rotate(226.8deg);
  transform: rotate(226.8deg);
}
.c100.p64 .bar {
  -webkit-transform: rotate(230.4deg);
  -moz-transform: rotate(230.4deg);
  -ms-transform: rotate(230.4deg);
  -o-transform: rotate(230.4deg);
  transform: rotate(230.4deg);
}
.c100.p65 .bar {
  -webkit-transform: rotate(234deg);
  -moz-transform: rotate(234deg);
  -ms-transform: rotate(234deg);
  -o-transform: rotate(234deg);
  transform: rotate(234deg);
}
.c100.p66 .bar {
  -webkit-transform: rotate(237.6deg);
  -moz-transform: rotate(237.6deg);
  -ms-transform: rotate(237.6deg);
  -o-transform: rotate(237.6deg);
  transform: rotate(237.6deg);
}
.c100.p67 .bar {
  -webkit-transform: rotate(241.20000000000002deg);
  -moz-transform: rotate(241.20000000000002deg);
  -ms-transform: rotate(241.20000000000002deg);
  -o-transform: rotate(241.20000000000002deg);
  transform: rotate(241.20000000000002deg);
}
.c100.p68 .bar {
  -webkit-transform: rotate(244.8deg);
  -moz-transform: rotate(244.8deg);
  -ms-transform: rotate(244.8deg);
  -o-transform: rotate(244.8deg);
  transform: rotate(244.8deg);
}
.c100.p69 .bar {
  -webkit-transform: rotate(248.4deg);
  -moz-transform: rotate(248.4deg);
  -ms-transform: rotate(248.4deg);
  -o-transform: rotate(248.4deg);
  transform: rotate(248.4deg);
}
.c100.p70 .bar {
  -webkit-transform: rotate(252deg);
  -moz-transform: rotate(252deg);
  -ms-transform: rotate(252deg);
  -o-transform: rotate(252deg);
  transform: rotate(252deg);
}
.c100.p71 .bar {
  -webkit-transform: rotate(255.6deg);
  -moz-transform: rotate(255.6deg);
  -ms-transform: rotate(255.6deg);
  -o-transform: rotate(255.6deg);
  transform: rotate(255.6deg);
}
.c100.p72 .bar {
  -webkit-transform: rotate(259.2deg);
  -moz-transform: rotate(259.2deg);
  -ms-transform: rotate(259.2deg);
  -o-transform: rotate(259.2deg);
  transform: rotate(259.2deg);
}
.c100.p73 .bar {
  -webkit-transform: rotate(262.8deg);
  -moz-transform: rotate(262.8deg);
  -ms-transform: rotate(262.8deg);
  -o-transform: rotate(262.8deg);
  transform: rotate(262.8deg);
}
.c100.p74 .bar {
  -webkit-transform: rotate(266.40000000000003deg);
  -moz-transform: rotate(266.40000000000003deg);
  -ms-transform: rotate(266.40000000000003deg);
  -o-transform: rotate(266.40000000000003deg);
  transform: rotate(266.40000000000003deg);
}
.c100.p75 .bar {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
.c100.p76 .bar {
  -webkit-transform: rotate(273.6deg);
  -moz-transform: rotate(273.6deg);
  -ms-transform: rotate(273.6deg);
  -o-transform: rotate(273.6deg);
  transform: rotate(273.6deg);
}
.c100.p77 .bar {
  -webkit-transform: rotate(277.2deg);
  -moz-transform: rotate(277.2deg);
  -ms-transform: rotate(277.2deg);
  -o-transform: rotate(277.2deg);
  transform: rotate(277.2deg);
}
.c100.p78 .bar {
  -webkit-transform: rotate(280.8deg);
  -moz-transform: rotate(280.8deg);
  -ms-transform: rotate(280.8deg);
  -o-transform: rotate(280.8deg);
  transform: rotate(280.8deg);
}
.c100.p79 .bar {
  -webkit-transform: rotate(284.40000000000003deg);
  -moz-transform: rotate(284.40000000000003deg);
  -ms-transform: rotate(284.40000000000003deg);
  -o-transform: rotate(284.40000000000003deg);
  transform: rotate(284.40000000000003deg);
}
.c100.p80 .bar {
  -webkit-transform: rotate(288deg);
  -moz-transform: rotate(288deg);
  -ms-transform: rotate(288deg);
  -o-transform: rotate(288deg);
  transform: rotate(288deg);
}
.c100.p81 .bar {
  -webkit-transform: rotate(291.6deg);
  -moz-transform: rotate(291.6deg);
  -ms-transform: rotate(291.6deg);
  -o-transform: rotate(291.6deg);
  transform: rotate(291.6deg);
}
.c100.p82 .bar {
  -webkit-transform: rotate(295.2deg);
  -moz-transform: rotate(295.2deg);
  -ms-transform: rotate(295.2deg);
  -o-transform: rotate(295.2deg);
  transform: rotate(295.2deg);
}
.c100.p83 .bar {
  -webkit-transform: rotate(298.8deg);
  -moz-transform: rotate(298.8deg);
  -ms-transform: rotate(298.8deg);
  -o-transform: rotate(298.8deg);
  transform: rotate(298.8deg);
}
.c100.p84 .bar {
  -webkit-transform: rotate(302.40000000000003deg);
  -moz-transform: rotate(302.40000000000003deg);
  -ms-transform: rotate(302.40000000000003deg);
  -o-transform: rotate(302.40000000000003deg);
  transform: rotate(302.40000000000003deg);
}
.c100.p85 .bar {
  -webkit-transform: rotate(306deg);
  -moz-transform: rotate(306deg);
  -ms-transform: rotate(306deg);
  -o-transform: rotate(306deg);
  transform: rotate(306deg);
}
.c100.p86 .bar {
  -webkit-transform: rotate(309.6deg);
  -moz-transform: rotate(309.6deg);
  -ms-transform: rotate(309.6deg);
  -o-transform: rotate(309.6deg);
  transform: rotate(309.6deg);
}
.c100.p87 .bar {
  -webkit-transform: rotate(313.2deg);
  -moz-transform: rotate(313.2deg);
  -ms-transform: rotate(313.2deg);
  -o-transform: rotate(313.2deg);
  transform: rotate(313.2deg);
}
.c100.p88 .bar {
  -webkit-transform: rotate(316.8deg);
  -moz-transform: rotate(316.8deg);
  -ms-transform: rotate(316.8deg);
  -o-transform: rotate(316.8deg);
  transform: rotate(316.8deg);
}
.c100.p89 .bar {
  -webkit-transform: rotate(320.40000000000003deg);
  -moz-transform: rotate(320.40000000000003deg);
  -ms-transform: rotate(320.40000000000003deg);
  -o-transform: rotate(320.40000000000003deg);
  transform: rotate(320.40000000000003deg);
}
.c100.p90 .bar {
  -webkit-transform: rotate(324deg);
  -moz-transform: rotate(324deg);
  -ms-transform: rotate(324deg);
  -o-transform: rotate(324deg);
  transform: rotate(324deg);
}
.c100.p91 .bar {
  -webkit-transform: rotate(327.6deg);
  -moz-transform: rotate(327.6deg);
  -ms-transform: rotate(327.6deg);
  -o-transform: rotate(327.6deg);
  transform: rotate(327.6deg);
}
.c100.p92 .bar {
  -webkit-transform: rotate(331.2deg);
  -moz-transform: rotate(331.2deg);
  -ms-transform: rotate(331.2deg);
  -o-transform: rotate(331.2deg);
  transform: rotate(331.2deg);
}
.c100.p93 .bar {
  -webkit-transform: rotate(334.8deg);
  -moz-transform: rotate(334.8deg);
  -ms-transform: rotate(334.8deg);
  -o-transform: rotate(334.8deg);
  transform: rotate(334.8deg);
}
.c100.p94 .bar {
  -webkit-transform: rotate(338.40000000000003deg);
  -moz-transform: rotate(338.40000000000003deg);
  -ms-transform: rotate(338.40000000000003deg);
  -o-transform: rotate(338.40000000000003deg);
  transform: rotate(338.40000000000003deg);
}
.c100.p95 .bar {
  -webkit-transform: rotate(342deg);
  -moz-transform: rotate(342deg);
  -ms-transform: rotate(342deg);
  -o-transform: rotate(342deg);
  transform: rotate(342deg);
}
.c100.p96 .bar {
  -webkit-transform: rotate(345.6deg);
  -moz-transform: rotate(345.6deg);
  -ms-transform: rotate(345.6deg);
  -o-transform: rotate(345.6deg);
  transform: rotate(345.6deg);
}
.c100.p97 .bar {
  -webkit-transform: rotate(349.2deg);
  -moz-transform: rotate(349.2deg);
  -ms-transform: rotate(349.2deg);
  -o-transform: rotate(349.2deg);
  transform: rotate(349.2deg);
}
.c100.p98 .bar {
  -webkit-transform: rotate(352.8deg);
  -moz-transform: rotate(352.8deg);
  -ms-transform: rotate(352.8deg);
  -o-transform: rotate(352.8deg);
  transform: rotate(352.8deg);
}
.c100.p99 .bar {
  -webkit-transform: rotate(356.40000000000003deg);
  -moz-transform: rotate(356.40000000000003deg);
  -ms-transform: rotate(356.40000000000003deg);
  -o-transform: rotate(356.40000000000003deg);
  transform: rotate(356.40000000000003deg);
}
.c100.p100 .bar {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
.c100:hover {
  cursor: default;
}
.c100:hover > span {
  width: 3.33em;
  line-height: 3.33em;
  font-size: 0.3em;
  color: #307bbb;
}
.c100:hover:after {
  top: 0.04em;
  left: 0.04em;
  width: 0.92em;
  height: 0.92em;
}
.c100.dark {
  background-color: #777777;
}
.c100.dark .bar,
.c100.dark .fill {
  border-color: #c6ff00 !important;
}
.c100.dark > span {
  color: #777777;
}
.c100.dark:after {
  background-color: #666666;
}
.c100.dark:hover > span {
  color: #c6ff00;
}
.c100.green .bar,
.c100.green .fill {
  border-color: #4db53c !important;
}
.c100.green:hover > span {
  color: #4db53c;
}
.c100.green.dark .bar,
.c100.green.dark .fill {
  border-color: #5fd400 !important;
}
.c100.green.dark:hover > span {
  color: #5fd400;
}
.c100.orange .bar,
.c100.orange .fill {
  border-color: #dd9d22 !important;
}
.c100.orange:hover > span {
  color: #dd9d22;
}
.c100.orange.dark .bar,
.c100.orange.dark .fill {
  border-color: #e08833 !important;
}
.c100.orange.dark:hover > span {
  color: #e08833;
}

.pic{ width:68px; height:68px; margin:6px 0 0 6px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
overflow:hidden;}

/* End of circle */

/* Custom css */
@media (min-width: 767px){
  .padrightzero{
    padding-right:0px;
  }
}
.side-menu-clip-watched-icon{
  background-color:green;
  width: 10px;
  height: 10px;
}
.side-menu-clip.active {
  background-color: #333333;
  transition: all 0.2s;
}
.correctanswer{
  border:1px solid green;
  box-shadow: 1px 1px 5px rgba(0,0,0,.2) !important;
}
.wronganswer{
  border:1px solid red;
  box-shadow: 1px 1px 5px rgba(0,0,0,.2) !important;
}
.assessment .badge{
  cursor: pointer;
}
/* Spinner CSS */

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ellipsis div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  /* background:rgb(104, 145, 162); */
  background: #073055;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}
.lds-roller {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 32px 32px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #073055;
  margin: -3px 0 0 -3px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 50px;
  left: 50px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 54px;
  left: 45px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 57px;
  left: 39px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 58px;
  left: 32px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 57px;
  left: 25px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 54px;
  left: 19px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 50px;
  left: 14px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 45px;
  left: 10px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner-modal{
  margin: 0px auto !important;
  top:35%;
}
.spinner-backdrop{
  z-index: 2000;
}
.spinner-modal .modal-content {
  box-shadow: none;
  background-color: transparent;
  border: none;
}

.mar-bot-10{
  margin-bottom:10px !important;
}
.assessment-modal .modal-dialog {
  width: 100%;
  margin: 0px !important;
  padding: 0px !important;
}
.assessment-modal .modal-content {
  height: 100vh;
  overflow-y: scroll;
  border-radius: 0px !important;
  background-color:#f9f9f9;
}
.assessment-modal .modal-body {
  margin: 20px auto;
  max-width: 600px;
  border: 1px solid lightgray;
  padding-bottom: 60px;
  -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.05);
   box-shadow: 0 2px 3px rgba(0,0,0,.05);
}
.customans{
  padding-top:5px;
  padding-bottom: 5px;
  padding-left:5px;
}
.customans:hover{
  box-shadow: 1px 1px 5px rgba(0,0,0,.2);
}
.feedback,.question{
  box-shadow: 1px 1px 5px rgba(0,0,0,.2);
  padding:20px;
  margin-bottom: 20px;
}
.feedback{
  background-color:#d3d3d321;
}
.self-assessment-right{
  top: 60px;
  right: -5px;
  position: fixed;
  z-index: 2;
  width: 130px;
  height: 30px;
  border: none;
  background:   rgb(239, 49, 51);
  color:white;
}
.reference-video{
  width:100% !important;
  height:200px !important;
}
.four-h1{
  font-size:15rem;
}
.four-text{
  font-size:5rem;
}
.mb-10{
  margin-bottom: 10px !important;
}
a.disabled {
  opacity: 0.2;
  pointer-events: none;
}
.width93per{
  width:93%;
}
.mb-10{
  margin-bottom: 15px !important;
}
.itext{
  color:red;
  font-style: italic;
  font-size:0.9em;
}