/*v4.0*/

/*common*/
html, body {
    margin: 0 !important;
    padding: 0 !important;
    font-family: Helvetica, Verdana, sans-serif !important;
    font-size: 14px !important;
    background: #000 !important;
    color: #404040 !important;
}

a, a:visited, a:hover, a:active {
    text-decoration: none;
    color: inherit;
}

.scrollable {
    overflow-y: auto;
}

.noselect {
	cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* override Bootstrap */
textarea {
	all: revert;
}

.vertical-space-10px {
	height: 10px;
}
.vertical-space-20px {
	height: 20px;
}

.container {
	height: 690px;
	width: 1000px;
	margin: auto;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.container-sample-lesson {
	height: 690px;
	width: 800px;
	margin: auto;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.container-sample-exercise {
	height: 630px;
	width: 800px;
	margin: auto;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.container-left {
	position: relative;
	width: 200px;
	background: #777;
}

.container-left-TabletOrPhone {
	position: relative;
	width: 200px;
	max-width: 200px;
	background: #777;
	display: flex;
    flex-direction: column;
    align-items: center;
}

.container-top-bottom-sd {
	position: relative;
    width: 800px;
    height: 50px;
    background: #777;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container-top-bottom-hd {
	position: relative;
    width: 1067px;
    height: 50px;
    background: #777;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container-flex-row {
	display: flex;
    flex-direction: row;
    align-items: center;
	height: 100%;
}

.container-flex-button {
	display: flex !important;
    flex-direction: row;
    align-items: center;
	justify-content: center;
}

.container-flex-column {
	display: flex;
    flex-direction: column;
    align-items: center;
	width: 100%;
}

.coursename {
	margin-left: 10px;
	margin-top: 5px;
	width: 180px;
	height: 20px;
	border-radius: 5px;
    background: #bbb;
	line-height: 20px;
	text-align: center;
	color: #404040;
	font-size: 12px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.coursename-TabletOrPhone {
	line-height: 20px;
	color: white;
	font-weight: 600;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.container-left-separator {
	height: 10px;
}

.container-left-separator-border {
	height: 10px;
	width: 180px;
	margin: auto;
	border-bottom: 1px solid #ccc;
}

.container-left-button {
	margin-top: 20px;
	width: 200px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	color: white;
	cursor: default;
}

.container-left-button:hover {
	background-color: #999;
}

.playspeed {
	display: table;
	margin: auto;
	height: 24px;
}

.playspeed-label {
	text-align: center;
	line-height: 30px;
	color: white;
}

.speed-label {
	line-height: 30px;
	color: white;
}

.displaytext {
	color: white;
	font-weight: normal;
}

.displaytext input {
    position: relative;
	top: 2px;
}

.center {
	text-align: center;
	margin: auto;
}

.container-left-bottom {
	position: absolute;
    bottom: 10px;
	display: flex;
	flex-direction: column-reverse;
}

.checkbox-large {
    font-size: 16px;
    color: white;
    display: flex;
    align-items: center;
}

.checkbox-large input[type="checkbox"] {
    width: 20px; /* Adjust width */
    height: 20px; /* Adjust height */
}

.checkbox-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0px;
    font-size: 14px;
}

.mac-tip-button {
	width: 200px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	color: lightblue;
	cursor: default;
}

.mac-tip-button:hover {
	color: white;
}

.mac-tip-box {
	margin: 10px;
	width: 180px;
	border: 1px solid #bbb;
	background: #e0e0e0;
}

.mac-tip-box-header {
	height: 15px;
}

.mac-tip-box-close-button {
	margin: 2px;
	width: 11px;
	height: 11px;
	line-height: 11px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	float: right;
	color: red;
}

.mac-tip-box-close-button:hover {
	color: white;
	background: red;
}

.mac-tip-text {
	margin: 0px 5px 10px 5px;
	font-size: 12px;
}

.container-right {
	width: 800px;
	background: #ccc;
}

.header {
	width: 800px;
	height: 30px;
   	display: flex;
	flex-direction: row;
   	background: #CCC;
}
  
 .header-left {
	width: 75px;
}

.header-center {
	width: 650px;
	text-align: center;
	line-height: 30px;
	font-weight: 600;
}

.header-right {
	width: 75px;
}

.header-sample {
	width: 800px;
	height: 30px;
	background: #CCC;
	text-align: center;
	line-height: 30px;
	font-weight: 600;
}

.section-name {
	color: white;
	text-align: center;
	line-height: 20px;
	font-weight: 600;
	padding: 0px 5px;
}

.section-previous-button {
	margin-top: 5px;
	margin-left: 5px;
	width: 70px;
	height: 20px;
	display: flex;
	flex-direction: row;
	background-color: #777;
}

.section-previous-button:hover {
	background-color: #999;
}

.section-previous-text {
	margin-left: 5px;
	line-height: 20px;
	color: white;
}

.section-next-button {
	margin-top: 5px;
	margin-right: 5px;
	width: 70px;
	height: 20px;
	display: flex;
	flex-direction: row-reverse;
	background-color: #777;
}

.section-next-button:hover {
	background-color: #999;
}

.section-next-text {
	margin-right: 5px;
	line-height: 20px;
	color: white;
}

.section-button-TabletOrPhone-portrait {
	display: flex !important;
    align-items: center;
    justify-content: center;
	background-color: #6c757d;
	color: white;
}

.section-button-TabletOrPhone-portrait:hover {
	background-color: #585c60;
}

.section-button-TabletOrPhone-landscape {
	display: flex !important;
    align-items: center;
    justify-content: center;
	background-color: #505050;
	color: white;
}

.section-button-TabletOrPhone-landscape:hover {
	background-color: #404040;
}

.arrow-left {
	display: block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid white;
}

.arrow-right {
	display: block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid white; /* Arrow color */
}

.begin-button-color {
	background-color: rgb(205, 255, 205);
}

.begin-button-color:hover {
	background-color: rgb(116, 190, 116);;
}

.section-button:hover {
	background-color: #585c60;
}

.left-arrow {
	width: 0; 
	height: 0; 
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-right: 5px solid white;
	margin-left: 5px;
	margin-top: 5px;
}

.right-arrow {
	width: 0; 
	height: 0; 
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid white;
	margin-right: 5px;
	margin-top: 5px;
}

.header-sample {
	width: 800px;
	height: 30px;
	margin: auto;
   	background: #CCC;
	text-align: center;
	line-height: 30px;
	color: #404040;
}

.faq-button {
	width: 70px;
}

.faq-button:hover {
	background-color: rgb(122, 194, 218);
}

.continue-button-inactive {
	color: lightgray;
}

.stage {
	width: 800px;
	height: 600px;
	margin: auto;
	padding: 0px;
	position: relative;
	background: #e0e0e0;
	overflow: hidden;
	outline: none;
}

  .stageCanvas {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 800px;
	height: 600px;
}

.content {
   position: absolute;
   left: 0px;
   top: 0px;
}
 
.begin-button {
	position: absolute;
	top: 452px;
	left: 363px;
	width: 74px;
	height: 21px;
}

.auto-start-message {
	position: absolute;
	top: 500px;
	left: 150px;
	width: 500px;
	text-align: center;
	font-weight: 600;
	color: darkorchid;
}

.stage-cover-transparent {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 800px;
	height: 600px;
	background-color: black;
	opacity: .75;
}

.stage-cover-non-transparent {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 800px;
	height: 600px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.stage-cover-non-transparent-new {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.auto-continue-container{
	height: 120px;
	width: 240px;
	border-radius: 10px;
	margin: auto;
	text-align: center;
	background-color: white;
	font-size: 24px;
	font-weight: 600;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.auto-continue-timer {
	color: green;
}

.auto-continue-cancel-button {
	margin: auto;
	width: 70px;
	height: 26px;
	border-radius: 5px;
	background-color: #707070;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	line-height: 26px;
	color: white;
}

.auto-continue-cancel-button:hover {
	background-color: #606060;
}

.error-container{
	height: 200px;
	width: 500px;
	margin: auto;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	color: darkorchid;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.loadingbar {
	position: absolute;
    left: 2px;
    top: 2px;
    height: 6px;
	background: dodgerblue;
}

.footer {
	width: 800px;
	height: 30px;
    margin: auto;
   	background: #e0e0e0;
	display: flex;
	flex-direction: row;
   }

.footer-left-right {
	width: 90px;
}

.footer-button-container {
	width: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer-button {
	margin-left: 5px;
    margin-top: 5px;
	width: 80px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	background-color: #777;
	color: white;
}

.goto-button {
	margin: auto;
	width: 70px;
	height: 20px;
	background-color: #777;
}

.goto-button:hover {
	background-color: #999;
}

.goto-text {
	line-height: 20px;
	color: white;
	text-align: center;
}

.titlebar {
	width: 100%;
	height: 30px;
	background-color: #BADEFC;
    display: flex;
    justify-content: space-between;
}

.titlebar-label {
	margin-left: 5px;
	margin-top: 5px;
	line-height: 20px;
	font-weight: 600;
}

.titlebar-TabletOrPhone {
	width: 100%;
	height: 50px;
	background-color: #BADEFC;
    display: flex;
    justify-content: space-between;
	align-items: center;
}

.close-button {
	margin-top: 5px;
	margin-right: 5px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-weight: 600;
}

.close-button:hover {
	color: white;
	background-color: red;
}

/*shell*/
.container-shell {
	height: 600px;
	width: 1000px;
	margin: auto;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.container-shell-TabletOrPhone-portrait {
	height: 650px;
	width: 800px;
	display: flex;
	flex-direction: column;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.container-shell-TabletOrPhone-landscape {
	height: 600px;
	width: 1000px;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.stage-shell {
	width: 800px;
	height: 600px;
	padding: 0px;
	position: relative;
	background: white;
	overflow: hidden;
	outline: none;
}

.shell-coursename {
	margin-left: auto;
	margin-right: auto;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	color: #404040;
}

.shell-container-right {
	width: 800px;
	height: 690px;
	background: white;
}

.shell-logo {
	text-align: center;
}

.shell-logo-bar {
  width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.shell-logo-bar > div:empty {
  display: none; /* remove the empty div so single image can center */
}

.shell-welcome {
	margin-left: auto;
	margin-right: auto;
	font-size: 14px;
	text-align: center;
	color: #404040;
}

.shell-separator-border {
	height: 20px;
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	border-bottom: 1px solid #ccc;
}

.shell-link-bar {
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	height: 20px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.shell-link-left {
	text-align: left;
	font-size: 14px;
	font-weight: 600;
	color: dodgerblue;
	text-decoration: underline;
	cursor: pointer;
}

.shell-link-right {
	text-align: right;
	font-size: 14px;
	font-weight: 600;
	color: dodgerblue;
	text-decoration: underline;
	cursor: pointer;
}

.shell-link-left-small {
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	color: dodgerblue;
	text-decoration: underline;
	cursor: pointer;
}

/*exercise*/
.container-exercise {
	height: 700px;
	width: 1000px;
	margin: auto;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.container-exercise-TabletOrPhone-portrait {
	height: 800px;
	width: 800px;
	display: flex;
	flex-direction: column;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.container-exercise-TabletOrPhone-landscape {
	height: 650px;
	width: 1000px;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.controlbar {
	position: absolute;
    width: 200px;
	height: 10px;
    left: 300px;
    top: 450px;
	background: #FFF;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
}

.instructionbox {
	width: 620px;
	height: 30px;
   	background: #fff;
   	color: #000;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
	border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    box-sizing: border-box;
}

.instructionboxSmallFont {
	font-size: 13px;
}

/*lesson*/
.loading {
    position: absolute;
    width: 200px;
	height: 100px;
    top: 50%;;
	left: 50%;
	margin-left: -100px;
	margin-top: -50px;
	text-align: center;
    font-size: 24px;
 }

.beginbutton img {
	position: absolute;
    left: 0px;
    top: 0px;
    opacity: .3;
 }
 
.beginbutton:hover img {
	position: absolute;
    left: 0px;
    top: 0px;
    opacity: .5;
 }
 
.footer-lesson {
	width: 800px;
	height: 30px;
    margin: auto;
   	background: #ccc;
	display: flex;
	flex-direction: row;
}

.footer-lesson-cover {
	position: relative;
	top: -30px;
	width: 800px;
	height: 30px;
   	margin: auto;
   	background: #ccc;
}

.control-strip {
	position: relative;
	width: 620px;
	height: 30px;
   	margin: auto;
   	background: #ccc;
}

.control-strip-TabletOrPhone {
	width: 590px;
	margin: 0px 15px;
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
 
.playpause {
	position: absolute;
	left: 16px;
	top: 7px;
	width: 14px;
	height: 16px;
}
   
.rewind {
	position: absolute;
	left: 48px;
	top: 10px;
	width: 20px;
	height: 10px;
}

.video-playtime {
	position: absolute;
	left: 40px;
	top: 5px;
	width: 60px;
	height: 20px;
	line-height: 20px;
	font-size: 12px;
	color: #606060;
	text-align: center;
}

.controlbar-lesson {
	position: absolute;
    width: 498px;
	height: 20px;
    left: 78px;
    top: 5px;
	background: #ccc;
}

.controlbar-lesson-TabletOrPhone {
	position: relative;
    width: 460px;
	height: 100%;
	background: #ccc;
	display: flex;
	align-items: center;
}

.completionbar {
    width: 460px;
    height: 6px;
	background: #ddd;
}

.completionbar-TabletOrPhone {
    width: 460px;
    height: 8px;
	background: #ddd;
}

.loadingbar-lesson {
    height: 6px;
	background: #999;
}

.loadingbar-lesson-TabletOrPhone {
    height: 8px;
	background: #999;
}

.forward {
	position: absolute;
	left: 594px;
	top: 10px;
	width: 20px;
	height: 10px;
}

.cc {
	position: absolute;
	left: 594px;
	top: 7px;
	width: 21px;
	height: 16px;
}

.speedpanel {
	position: absolute;
    height: 64px;
    width: 60px;
    top: -64px;
	left: 680px;
    background: #999;
    font-family: Helvetica, Verdana, sans-serif;
    font-size: 12px;
    color: #d7d7d7;
    vertical-align:middle;
}

.speedlabel {
	position: absolute;
    top: 9px;
	left: 540px;
}

.ccbox {
	position: relative;
	width: 800px;
	height: 30px;
   	margin: auto;
   	background: white;
}

.cctext {
   	color: #000;
    text-align: center;
    line-height: 30px;
}

/*Quiz*/
.container-quiz {
	height: 720px;
	width: 1000px;
	margin: auto;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.container-quiz-TabletOrPhone-portrait {
	height: 820px;
	width: 800px;
	display: flex;
	flex-direction: column;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.container-quiz-TabletOrPhone-landscape {
	height: 670px;
	width: 1000px;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.container-quiz-assess {
	height: 660px;
	width: 1000px;
	margin: auto;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.container-quiz-assess-TabletOrPhone-portrait {
	height: 770px;
	width: 800px;
	display: flex;
	flex-direction: column;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.container-quiz-assess-TabletOrPhone-landscape {
	height: 670px;
	width: 1000px;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.quizstage {
	width: 800px;
	height: 630px;
	margin: auto;
	padding: 0px;
	position: relative;
	overflow: hidden;
	background: #e0e0e0;
}

.quizstage-TabletOrPhone {
	width: 800px;
	height: 670px;
	margin: auto;
	padding: 0px;
	position: relative;
	overflow: hidden;
	background: #e0e0e0;
}

.quiz-canvas {
	width: 800px;
	height: 630px;
}

.quiz-canvas-TabletOrPhone {
	width: 800px;
	height: 670px;
}

.controlbar-quiz {
	position: absolute;
    width: 200px;
	height: 10px;
    left: 300px;
    top: 300px;
	background: #FFF;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
}

.quiz-footer {
	position: absolute;
	width: 800px;
	height: 30px;
    top: 600px;
	display: flex;
	flex-direction: row;
}

.quiz-footer-TabletOrPhone {
	position: absolute;
	width: 800px;
	height: 50px;
    top: 620px;
   	background: #ccc;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.quiz-container-left {
	display: flex;
	width: 200px;
	margin-top: 100px;
}

.quiz-explain-button {
	width: 114px;
	height: 21px;
	margin: auto;
}

.quiz-stage-cover {
	position: absolute;
	top: 30px;
	left: 0px;
	width: 800px;
	height: 570px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.quiz-stage-cover-TabletOrPhone {
	position: absolute;
	top: 50px;
	left: 0px;
	width: 800px;
	height: 600px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.quiz-explain-container {
	height: 150px;
	width: 740px;
	margin-top: 400px;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
}

.quiz-explain-container-TabletOrPhone {
	height: 150px;
	width: 740px;
	margin-top: 360px;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
}

.quiz-explain-toolbar {
	width: 100%;
	height: 30px;
	background-color: lightgray;
	line-height: 30px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-weight: 600;
}

.quiz-explain-toolbar-TabletOrPhone {
	width: 100%;
	height: 40px;
	background-color: #fbbf32;
	border: 1px solid lightgray;
	line-height: 30px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-weight: 600;
	align-items: center;
}

.quiz-explain-text-container {
	width: 100%;
    height: 120px;
	border: 1px solid lightgray;
}

.quiz-explain-text {
	width: 700px;
    height: 80px;
	margin: 15px 20px;
    overflow-y: auto; /* Enables vertical scrolling */
}

.quiz-explain-link {
	color: #006edc;
}

.quiz-explain-link:hover {
	text-decoration: underline;
}

/*TOC*/
.container-toc {
	height: 650px;
	width: 1000px;
	margin: auto;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.container-toc-TabletOrPhone-portrait {
	height: 750px;
	width: 800px;
	display: flex;
	flex-direction: column;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.container-toc-TabletOrPhone-landscape {
	height: 650px;
	width: 1000px;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.toc-container {
	position: absolute;
    height: 100%;
    width: 100%;
	margin: auto;
	display: flex;
	flex-direction: row;
	background-color: #e0e0e0;
}

.toc-container-left {
	position: relative;
	width: 550px;
	margin-left: 25px;
	margin-top: 20px;
}

.toc-container-right {
	position: relative;
	width: 175px;
	margin-left: 25px;
	margin-top: auto;
	margin-bottom: auto;
}

.toc-header-frame {position: relative; border-left:1px solid #e0e0e0; border-right:1px solid #e0e0e0; width: 550px; height: 24px;}

.toc-header {border-collapse: separate; border-spacing: 0; font-weight: 600; text-align: center; table-layout: fixed;}
.toc-header td:nth-child(1) {width: 50px; vertical-align: top; padding: 0px 5px;}
.toc-header td:nth-child(2) {width: 50px; vertical-align: top; padding: 0px 5px;}
.toc-header td:nth-child(3){width: 400px; vertical-align: top; padding: 0px 5px;}

.toc-header td {
    box-sizing: content-box;  /* Ensure padding is added inside the content */
}

.toc-frame-background {position: relative; height: 520px; width: 550px; background-color: white;}
.toc-frame-col1-border {position: absolute; left: 60px; width: 1px; height: 520px; background-color: #bbbbbb;}
.toc-frame-col2-border {position: absolute; left: 120px; width: 1px; height: 520px; background-color: #bbbbbb;}
.toc-frame {position: absolute; overflow-y: auto; height: 520px; width: 550px;}

.toc {
	border-collapse: collapse;
	cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.toc td:nth-child(1) {width: 50px; vertical-align: top; text-align: center; padding: 2px 5px;}
.toc td:nth-child(2) {width: 50px; vertical-align: top; padding: 2px 5px;}
.toc td:nth-child(3){width: 400px; vertical-align: top; padding: 2px 5px;}

.toc-row-normal {background-color: white; color: #404040}
.toc-row-exempt {background-color: white; color: #b0b0b0;}
.toc-row-skip {background-color: white; color: lightsalmon;}
.toc-row-normal-selected {background-color: dodgerblue; color: white;}
.toc-row-exempt-selected {background-color: dodgerblue; color: #b0b0b0;}
.toc-row-skip-selected {background-color: dodgerblue; color: lightsalmon;}

.toc td {
    box-sizing: content-box;  /* Ensure padding is added inside the content */
}

.toc-tablet-skip-message {
	margin-top: 10px;
	font-size: .9rem;
	display: flex;
	flex-direction: row;
}

.toc-tablet-skip-legend {
	width: .9rem;
    height: .9rem;
    background-color: lightsalmon;
	border: solid 1px white;
	margin-right: 5px;
}

.toc-info-box {
	margin-top: 20px;
	width: 175px;
	height: 120px;
	background-color: white;
	border:1px solid #bbbbbb;
}

.toc-info {
	margin-left: 15px;
	margin-top: 15px;
	line-height: 20px;
}

.toc-info-label, .fw-600 {
	font-weight: 600;
}

/*index*/
.container-index {
	height: 650px;
	width: 1000px;
	margin: auto;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.container-index-TabletOrPhone-portrait {
	height: 700px;
	width: 800px;
	display: flex;
	flex-direction: column;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.container-index-TabletOrPhone-landscape {
	height: 650px;
	width: 1000px;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.index-container {
	position: absolute;
    height: 100%;
    width: 100%;
	margin: auto;
	display: flex;
	flex-direction: row;
	background-color: #e0e0e0;
}

.index-container-left {
	position: relative;
	width: 370px;
	margin-left: 20px;
	margin-right: 10px;
	margin-top: 20px;
}

.index-container-right {
	position: relative;
	width: 370px;
	margin-left: 10px;
	margin-right: 20px;
	margin-top: 20px;
}

.index-container-fixed-position {
	position: absolute;
	top: 64px;
}

.index-label {
	height: 20px;
	font-weight: 600;
}

.index-search {
	width: 350px;
	height: 30px;
	resize: none;
	outline: none;
	border: 1px solid #bbbbbb;
	line-height: 30px;
	overflow: hidden;
	font-family: Helvetica, Verdana, sans-serif;
    font-size: 14px;
	padding-left: 2px;
}

.index-search:focus {
	outline: none;
}

.index-search-TabletOrPhone {
	width: 370px;
}

.index-list {
	height: 464px;
	width: 370px;
	background-color: white;
	border: 1px solid #bbbbbb;
	font-family: Helvetica, Verdana, sans-serif;
    font-size: 14px;
	line-height: 20px;
}

.index-list:focus {
	outline: none;
}

.index-list-tablet {
	height: 30px;
	width: 370px;
	background-color: white;
	border: 1px solid #bbbbbb;
	font-family: Helvetica, Verdana, sans-serif;
    font-size: 14px;
	line-height: 30px;
}

.index-list-tablet:focus {
	outline: none;
}

.index-goto-container {
	height: 21px;
	margin-top: 1px;
}

.index-sections-frame-background {position: relative; height: 294px; width: 370px; background-color: white; border: 1px solid #bbbbbb;}
.index-sections-frame-col1-border {position: absolute; left: 60px; width: 1px; height: 294px; background-color: #bbbbbb;}
.index-sections-frame {position: absolute; overflow: auto; height: 294px; width: 370px;}

.index-sections {
	border-collapse: collapse;
	cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.index-sections td {
    box-sizing: content-box;  /* Ensure padding is added inside the content */
}

.index-sections td:nth-child(1) {width: 50px; vertical-align: top; padding: 0px 5px;}
.index-sections td:nth-child(2){width: 300px; vertical-align: top; padding: 0px 5px;}

.index-sections-row-normal {background-color: white; color: #404040}
.index-sections-row-exempt {background-color: white; color: #b0b0b0;}
.index-sections-row-normal-selected {background-color: dodgerblue; color: white;}
.index-sections-row-exempt-selected {background-color: dodgerblue; color: #b0b0b0;}

.index-context {
	width: 370px;
	height: 130px;
	padding: 5px;
	border: 1px solid #bbbbbb;
	overflow: auto;
	font-family: Helvetica, Verdana, sans-serif;
    font-size: 14px;
	line-height: 18px;
	background-color: white;
}

/*faq*/
.faq-container {
	position: absolute;
    height: 100%;
    width: 100%;
	margin: auto;
	display: flex;
	flex-direction: row;
	background-color: #e0e0e0;
}

.faq-container-left {
	position: relative;
	width: 370px;
	margin-left: 20px;
	margin-right: 10px;
	margin-top: 20px;
}

.faq-container-right {
	position: relative;
	width: 370px;
	margin-left: 10px;
	margin-right: 20px;
	margin-top: 20px;
}

.faq-label {
	height: 20px;
	font-weight: 600;
}

.faq-questions-frame-background {position: relative; height: 500px; width: 370px; background-color: white; border: 1px solid #bbbbbb;}
.faq-questions-frame-col1-border {position: absolute; left: 40px; width: 1px; height: 500px; background-color: #bbbbbb;}
.faq-questions-frame {position: absolute; overflow: auto; height: 500px; width: 370px;}

.faq-questions {
	font-family: Helvetica, Verdana, sans-serif;
    font-size: 14px;
	border-collapse: collapse;
	cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.faq-questions td:nth-child(1) {width: 40px; vertical-align: top;}
.faq-questions td:nth-child(2){width: 329px; vertical-align: top;}

.faq-questions-row-normal {background-color: white; color: #404040}
.faq-questions-row-exempt {background-color: white; color: #b0b0b0;}
.faq-questions-row-normal-selected {background-color: dodgerblue; color: white;}
.faq-questions-row-exempt-selected {background-color: dodgerblue; color: #b0b0b0;}

.faq-answer {
	width: 360px;
	height: 500px;
	padding: 5px;
	border: 1px solid #bbbbbb;
	overflow: auto;
	line-height: 18px;
	background-color: white;
}

/*assessment*/
.container-assess {
	height: 660px;
	width: 1000px;
	margin: auto;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.container-assess-TabletOrPhone-portrait {
	height: 750px;
	width: 800px;
	display: flex;
	flex-direction: column;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.container-assess-TabletOrPhone-landscape {
	height: 650px;
	width: 1000px;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.header-assess-TabletOrPhone {
	width: 800px;
	height: 50px;
	padding: 0;
	margin: 0;
	border-top: 1px solid #e0e0e0;
	box-sizing: border-box;
   	display: flex;
	flex-direction: row;
   	background: #777;
	align-items: center;
	justify-content: flex-start;
}

.assess-container {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 800px;
	height: 600px;
	background-color: #e0e0e0;
}

.assess-strip-label {
	text-align: center;
	margin: auto;
	height: 20px;
	line-height: 20px;
	color: white;
}

.assess-strip-text {
	text-align: center;
	margin: auto;
	height: 30px;
	line-height: 30px;
	color: lightgreen;
}

.assess-banner-text {
	color: lightgreen;
}

.assess-title {
	margin-top: 30px;
    font-size: 28px;
	font-weight: bold;
	color: dodgerblue;
	text-align: center;
	height: 30px;
	line-height: 30px;
}

.assess-subtitle {
    font-size: 20px;
	font-weight: 500;
	text-align: center;
	height: 30px;
	line-height: 30px;
}

.assess-info {
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	height: 20px;
	line-height: 20px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.assess-info-label {
	font-weight: 600;
}

.assess-topics-label {
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}

.assess-topics {
	width: 590px;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	background-color: white;
	border: 1px solid #bbbbbb;
	padding: 5px;
	overflow: auto;
}

.assess-start-button {
	width: 62px;
	height: 22px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
}

.assess-start-message {
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	text-align: center;
}

.assess-footer {
	width: 780px;
	padding-left: 10px;
	padding-right: 10px;
	height: 20px;
	line-height: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.assess-footer-TabletOrPhone {
	width: 100%;
	height: 100%;
	line-height: 20px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.assess-exit-resume {
	color: dodgerblue;
	font-weight: bold;
}

.assess-exit-resume:hover {
	color: red;
}

.assess-progress {
	display: flex;
	flex-direction: row;
}

.assess-progress-frame {
	width: 160px;
	height: 20px;
	margin-left: 5px;
	background-color: white;
	display: flex;
	flex-direction: row;
}

.assess-progress-bar {
	position: absolute;
	height: 20px;
	background-color: dodgerblue;
}

.assess-progress-percent-inside {
	line-height: 20px;
	text-align: center;
	font-size: 12px;
	color: white;
}

.assess-progress-percent-outside {
	line-height: 20px;
	font-size: 12px;
}

.assess-cover {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 800px;
	height: 600px;
}

.assess-action-box {
	position: absolute;
	width: 240px;
	height: 120px;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #f8f8f8;
	z-index: 1000;
    }

.assess-action-header {
	color: white;
	text-align: center;
	font-weight: bold;
	padding: 8px;
	font-size: 16px;
}
.assess-action-body {
	height: calc(100% - 40px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #444;
}

.assess-action-flex-container {
	display: flex;
    flex-direction: row;
    align-items: center;
	height: 100%;
	width: 100%;
	justify-content: space-evenly;
}

.assess-action-complete {
    background-color: #666;
}

.assess-action-not-complete {
    background-color: #dc3545;
}

.assess-action-correct {
    background-color: #28a745;
}

.assess-action-correct-container {
	width: 100%;
	height: 56px;
	margin-top: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.assess-next-button {
	position: absolute;
	left: 59px;
	top: 69px;
	width: 67px;
	height: 22px;
}

.assess-retry-submit-container {
	width: 166px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	height: 90px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.assess-retry-submit-button {
	width: 73px;
	height: 22px;
}

.assess-task-number {
	margin: auto;
	line-height: 30px;
	text-align: center;
}

.assess-skip-button {
	margin-left: auto;
	margin-right: auto;
	margin-top: 4px;
	width: 67px;
	height: 22px;
}

.assess-continue-button {
	width: 80px;
	height: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
}

.assess-module-score {
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	text-align: center;
}

.assess-results-header-frame {position: relative; margin-left: auto; margin-right: auto; width: 750px; border-left:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}

.assess-results-header {border-collapse: collapse; font-size: 12px; font-weight: 600}
.assess-results-header td:nth-child(1) {width: 30px; vertical-align: top; text-align: center; padding: 5px;}
.assess-results-header td:nth-child(2) {width: 620px; vertical-align: top; text-align: left; padding: 5px;}
.assess-results-header td:nth-child(3){width: 50px; vertical-align: top; text-align: center; padding: 5px;}

.assess-results-header td {
    box-sizing: content-box;  /* Ensure padding is added inside the content */
}

.assess-results-frame-background {position: relative; margin-left: auto; margin-right: auto; height: 442px; width: 750px; background-color: white; border: 1px solid #bbbbbb;}
.assess-results-frame-col1-border {position: absolute; left: 40px; width: 1px; height: 442px; background-color: #bbbbbb;}
.assess-results-frame-col2-border {position: absolute; left: 670px; width: 1px; height: 442px; background-color: #bbbbbb;}
.assess-results-frame {position: absolute; overflow: auto; height: 442px; width: 750px;}

.assess-results {
	font-size: 12px;
	border-collapse: collapse;
	cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.assess-results tr:nth-child(odd) {background-color: #ffffff;}
.assess-results tr:nth-child(even) {background-color:#e1f0ff;}

.assess-results td:nth-child(1) {width: 30px; vertical-align: top; text-align: center; padding: 5px;}
.assess-results td:nth-child(2) {width: 620px; vertical-align: top; text-align: left; padding: 5px;}
.assess-results td:nth-child(3) {width: 50px; vertical-align: top;text-align: center; padding: 5px;}

.assess-results td {
    box-sizing: content-box;  /* Ensure padding is added inside the content */
}

/*typing test*/
.typing-test-word-to-type {
	color: blue;
}

.typing-test-char-to-type {
	color: blue;
	background-color: lightblue;
}

.typing-test-word-typed {
	color: #a0a0a0;
}

.typing-test-word-normal {
	color: #404040
}

.typing-test-word-error {
	color: red;
	text-decoration: underline;
}

.typing-test-char-error {
	color: red;
}

/*rs*/
.container-rs {
	height: 750px;
	width: 1000px;
	margin: auto;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.container-rs-TabletOrPhone-portrait {
	height: 850px;
	width: 800px;
	display: flex;
	flex-direction: column;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.container-rs-TabletOrPhone-landscape {
	height: 700px;
	width: 1000px;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.rs-container {
	height: 690px;
	width: 1000px;
	margin: auto;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.rs-header {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 800px;
	height: 30px;
   	background: rgb(214,230,248);
	color: #404040;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.rs-header-TabletOrPhone {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 800px;
	height: 50px;
   	background: rgb(214,230,248);
	color: #404040;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.rs-begin-button-TabletOrPhone {
	position: absolute;
	top: 472px;
	width: 100%;
	text-align: center;
}

.rs-footer {
	width: 800px;
	height: 30px;
   	background: rgb(214,230,248);
	color: #404040;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.rs-footer-TabletOrPhone {
	width: 800px;
	height: 50px;
   	background: rgb(214,230,248);
	color: #404040;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
  
.rs-header-footer-left {
	margin: 5px;
	height: 20px;
	width: 150px;
	display: flex;
	flex-direction: row;
}

.rs-header-footer-left-TabletOrPhone {
	margin-left: 10px;
	height: 50px;
	line-height: 50px;
	width: 180px;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.rs-header-footer-center {
    width: 480px;
    height: 30px;
    line-height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	align-items: center;
}

.rs-header-footer-center-TabletOrPhone {
    width: 420px;
    height: 50px;
    line-height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	align-items: center;
}

.rs-header-footer-right {
	margin: 5px;
	height: 20px;
	width: 150px;
	display: flex;
	flex-direction: row-reverse;
}

.rs-header-footer-right-TabletOrPhone {
	margin-right: 10px;
	width: 180px;
	display: flex;
	flex-direction: row-reverse;
}

.rs-header-footer-button {
	margin-left: 3px;
}

.rs-header-footer-button img{
	vertical-align: top;
}

.rs-sound-button {
	height: 24px;
	line-height: 24px;
	font-size: 24px;
	cursor: default;
}

.rs-sound-button:hover {
	opacity: .8;
}

.rs-sound-button-TabletOrPhone {
	height: 30px;
	line-height: 30px;
	font-size: 30px;
	cursor: default;
}

.rs-play-pause-button {
	top: -1px;
	margin-right: 5px;
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	cursor: default;
}

.rs-play-pause-button:hover {
	opacity: .8;
}

.rs-play-button {
  margin-left: 8px;
  margin-bottom: 2px;
  width: 29px;
  height: 19px;
  line-height: 19px;
  font-size: 19px;
  text-align: left;
  cursor: default;
}

.rs-play-button:hover {
	opacity: .8;
}

.rs-play-button-TabletOrPhone {
	margin-left: 10px;
	margin-bottom: 3px;
	width: 36px;
	height: 24px;
	line-height: 24px;
	font-size: 24px;
	text-align: left;
	cursor: default;
}

.rs-pause-button {
  margin-left: 8px;
  margin-bottom: 2px;
  width: 29px;
  height: 21px;
  line-height: 21px;
  font-size: 21px;
  text-align: left;
  cursor: default;
}

.rs-pause-button:hover {
	opacity: .8;
}

.rs-pause-button-TabletOrPhone {
	margin-left: 10px;
	margin-bottom: 2px;
	width: 36px;
	height: 26px;
	line-height: 26px;
	font-size: 26px;
	text-align: left;
	cursor: default;
}

.rs-audio-bar-container {
	position: relative;
    width: 100px;
	height: 20px;
}

.rs-audio-bar-container-TabletOrPhone {
	position: relative;
    width: 100px;
	height: 100%;
	display: flex;
	align-items: center;
}

.rs-audio-bar {
	position: relative;
    width: 100px;
    height: 4px;
	background: #aaa;
}

.rs-audio-bar-TabletOrPhone {
	position: relative;
    width: 100px;
    height: 6px;
	background: #aaa;
}

.rs-audio-slider {
	position: absolute;
	border-radius: 4px;
	width: 7px;
	height: 18px;
	background-color: #404040;
}

.rs-audio-slider:hover {
	opacity: .8;
}

.rs-audio-slider-TabletOrPhone {
	position: absolute;
	border-radius: 5px;
	width: 10px;
	height: 22px;
	background-color: #404040;
}

.rs-audio-disabled {
	opacity: .4;
}

.rs-audio-disabled:hover {
	opacity: .4;
}

.rs-btn-light {
	border-color: #a0a0a0;
}

.rs-btn-light:hover, .rs-btn-light.hover-active {
	border-color: #a0a0a0;
}

.rs-btn-light-disabled {
	border-color: #e0e0e0;
}

.rs-prev-next-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: #404040;
}

.rs-arrow-left {
	display: block;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 15px solid #404040;
}

.rs-arrow-left-disabled {
	display: block;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 15px solid #ccc;
}

.rs-arrow-right {
	display: block;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #404040;
}

.rs-arrow-right-disabled {
	display: block;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #ccc;
}

/* Left Arrow - Large */
.rs-arrow-left-large {
    display: block;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 18px solid #404040;
}

/* Left Arrow Disabled - Large */
.rs-arrow-left-disabled-large {
    display: block;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 18px solid #ccc;
}

/* Right Arrow - Large */
.rs-arrow-right-large {
    display: block;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 18px solid #404040;
}

/* Right Arrow Disabled - Large */
.rs-arrow-right-disabled-large {
    display: block;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 18px solid #ccc;
}

.rs-topic {
	font-size: 16px;
	font-weight: 600;
}

.rs-topics-panel {
	position: absolute;
	left: 500px;
	top: 30px;
	width: 300px;
	max-height: 300px;
	background-color: white;
}

.rs-topics-titlebar {
	width: 100%;
	height: 30px;
	background-color: #e0e0e0;
    display: flex;
	justify-content: space-between;
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
	border-right: 1px solid #aaa;
}

.rs-topics-titlebar-label {
	margin-left: 5px;
	margin-top: 5px;
	line-height: 20px;
	font-weight: 600;
}

.rs-topics-list {
	width: 300px;
	max-height: 570px;
	border: 1px solid #aaa;
}

.rs-topics-list:focus {
	outline: none;
}

.rs-topics-list option:hover {
    background-color: rgb(214,230,248);
}

.rs-topics-panel-TabletOrPhone {
	position: absolute;
	left: 460px;
	top: 50px;
	width: 340px;
	background-color: white;
}

.rs-topics-titlebar-TabletOrPhone {
	width: 100%;
	height: 40px;
	background-color: #e0e0e0;
    display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
	border-right: 1px solid #aaa;
}

/* Topics list - tablet or phone */
.rs-topics-scrolling-container {
    width: 340px; /* Updated width */
    height: 150px; /* Ensures fixed height */
    position: relative;
    overflow: hidden; /* Prevents scrolling outside the area */
	border-bottom: 1px solid #aaa;
	border-left: 1px solid #aaa;
	border-right: 1px solid #aaa;
}

/* Inner scrolling area */
.rs-topics-scrolling-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto !important; /* Forces scrolling */
    -webkit-overflow-scrolling: touch; /* iOS fix */
    touch-action: auto; /* Ensures touch scrolling is allowed */
}

/* Table inside the scrollable container */
.rs-topics-scrolling-table {
    width: 100%;
    border-collapse: collapse;
}

.rs-topics-scrolling-table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.rs-topics-scrolling-table tr {
	background-color: #f8f8f8;
    cursor: pointer;
}

.rs-topics-scrolling-table tr:hover {
    background-color: #f0f0f0;
}

.rs-topics-scrolling-table tr.selected {
    background-color: dodgerblue; /* Highlight selected row */
	color: white;
}

/* AutoPlay */
.rs-autoplay {
	font-weight: 600;
	line-height: 20px;
	margin-right: 5px;
}

.rs-autoplay-setting-button {
	top: 0px;
	margin-right: 3px;
	height: 20px;
	line-height: 20px;
	font-size: 13px;
	cursor: default;
}

.rs-autoplay-setting-button:hover {
	opacity: .8;
}

.rs-autoplay-state {
	font-family: Verdana;
	font-size: 12px;
	line-height: 20px;
	margin-left: 3px;
}

.rs-autoplay-switch {
	position: relative;
	display: inline-block;
	width: 25px;
	height: 14px;
	margin-top: 3px;
}

.rs-autoplay-switch:hover {
	opacity: .8;
}  

.rs-autoplay-switch input {display:none;}
  
.rs-autoplay-slider {
	position: absolute;
	cursor: default;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 14px;
}
  
.rs-autoplay-slider:before {
	position: absolute;
	content: "";
	height: 10px;
	width: 10px;
	left: 3px;
	bottom: 2px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 50%;
}
  
.rs-autoplay-input:checked + .rs-autoplay-slider {
	background-color: dodgerblue;
}
  
.rs-autoplay-input:focus + .rs-autoplay-slider {
	box-shadow: 0 0 1px dodgerblue;
}
  
.rs-autoplay-input:checked + .rs-autoplay-slider:before {
	-webkit-transform: translateX(10px);
	-ms-transform: translateX(10px);
	transform: translateX(10px);
}

/* AutoPlay styles for tablet or phone */
.rs-autoplay-TabletOrPhone {
	font-size: 16px;
	height: 16px;
	line-height: 16px;
}

.rs-autoplay-setting-button-TabletOrPhone {
	height: 24px;
	line-height: 24px;
	font-size: 24px;
	cursor: default;
}

.rs-autoplay-state-TabletOrPhone {
    font-size: 16px;
    line-height: 16px;
    height: 16px;
}

.rs-autoplay-switch-TabletOrPhone {
    position: relative;
    display: inline-block;
    width: 38px; /* 1.5x original width */
    height: 24px; /* Slightly adjusted height to better match the 50px container */
    margin-top: 0; /* Removes unnecessary margin */
    margin-bottom: 0; /* Ensures proper vertical alignment */
}

.rs-autoplay-switch-TabletOrPhone:hover {
    opacity: 0.8;
}

.rs-autoplay-switch-TabletOrPhone input {
    display: none;
}

/* Fix vertical alignment while keeping the blue switch visible */
.rs-autoplay-slider-TabletOrPhone {
    position: absolute;
    cursor: default;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 21px; /* Keeps rounded appearance */
}

/* Center only the toggle (white circle) inside the switch */
.rs-autoplay-slider-TabletOrPhone:before {
    position: absolute;
    content: "";
    height: 15px; /* Adjust for 1.5x size */
    width: 15px;
    left: 4.5px; /* Keeps alignment inside slider */
    top: 50%; /* Center within slider */
    transform: translateY(-50%); /* Ensures exact vertical alignment */
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 50%;
}

/* Change background when switch is toggled */
.rs-autoplay-input-TabletOrPhone:checked + .rs-autoplay-slider-TabletOrPhone {
    background-color: dodgerblue;
}

/* Add focus styling */
.rs-autoplay-input-TabletOrPhone:focus + .rs-autoplay-slider-TabletOrPhone {
    box-shadow: 0 0 2px dodgerblue;
}

/* Move the toggle when switched on */
.rs-autoplay-input-TabletOrPhone:checked + .rs-autoplay-slider-TabletOrPhone:before {
    transform: translate(15px, -50%); /* Moves right while keeping it vertically centered */
}

/* AutoPlay panel */
.rs-autoplay-setting-panel {
	position: absolute;
	left: 0px;
	top: 570px;
	height: 30px;
	background-color: #e0e0e0;
	border: 1px solid #aaa;
	line-height: 28px;
	display: flex;
	flex-direction: row;
}

.rs-autoplay-setting-label {
	margin-left: 5px;
}

.rs-autoplay-delay {
	margin: 6px 0px 6px 10px;
	width: 30px;
	height: 16px;
	text-align: center;
	line-height: 16px;
	background-color: white;
}

.rs-autoplay-delay-container-TabletOrPhone {
	display: flex;
	flex-direction: row;
	border: 1px solid dodgerblue;
}

.rs-autoplay-delay-TabletOrPhone {
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    background-color: white;
}

.rs-autoplay-delay-two-button-container-TabletOrPhone {
	display: flex;
	flex-direction: column;
}

.rs-autoplay-delay-one-button-container {
	height: 8px;
	background-color: white;
	color: dodgerblue;
	text-align: center;
}

.rs-autoplay-delay-one-button-container:hover {
	color: white;
	background-color: dodgerblue;
}

.rs-autoplay-delay-up-button-TabletOrPhone {
	height: 16px;
	width: 20px;
	line-height: 16px;
	font-size: 16px;
	background-color: white;
	color: dodgerblue;
	text-align: center;
}

.rs-autoplay-delay-down-button-TabletOrPhone {
	height: 16px;
	width: 20px;
	line-height: 16px;
	font-size: 16px;
	background-color: white;
	color: dodgerblue;
	text-align: center;
}

.rs-autoplay-delay-button {
	top: 0px;
	vertical-align: top;
	height: 8px;
	text-align: center;
	line-height: 8px;
	font-size: 7px;
}

.rs-autoplay-delay-button-TabletOrPhone {
	font-size: 12px;
}

.rs-panel-close {
	width: 16px;
	height: 16px;
	margin: 6px 5px;
	text-align: center;
}

.rs-panel-close:hover {
	opacity: .8;
}

.rs-panel-close-button {
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	vertical-align: top;
	top: 0px;
}

/* AutoPlay panel - tablet or phone */
.rs-autoplay-setting-panel-TabletOrPhone {
	position: absolute;
	left: 0px;
	top: 600px;
	height: 50px;
	width:460px;
	background-color: #e0e0e0;
	border: 1px solid #aaa;
	padding-left: 10px;
	padding-right: 5px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.rs-autoplay-setting-panel-left-TabletOrPhone {
	position: relative;
	font-size: 16px;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.rs-page-number {
	margin-top: 2px;
	margin-left: 5px;
	margin-right: 5px;
	width: 60px;
	height: 16px;
	text-align: center;
	line-height: 16px;
	background-color: white;
}

.rs-page-number-TabletOrPhone {
    width: 60px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    background-color: white;
    border: 1px solid #aaa; /* Optional: Adds a subtle border */
    font-size: 16px; /* Ensures readability */
    padding: 2px;
    appearance: none; /* Removes default styling */
	color: #404040;

    /* Disable number input spinners */
    -moz-appearance: textfield; /* Firefox */
}

.rs-page-number-TabletOrPhone::-webkit-inner-spin-button,
.rs-page-number-TabletOrPhone::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rs-prev-next-page-button {
	top: 0px;
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	cursor: default;
}

.rs-prev-next-page-button:hover {
	opacity: .8;
}

.rs-intro {
   width: 800px;
   height: 570px;
   margin: auto;
   padding: 0px;
   position: relative;
   background: #fff;
  }   

.rs-introcenter {
	position: absolute;
	width: 600px;
	height: 200px;
	top: 50%;;
	left: 50%;
	margin-left: -300px;
	margin-top: -100px;
	text-align: center;
	font-family: Helvetica, Verdana, sans-serif;
    font-size: 48px;
	font-weight: bold;
	color: rgb(0,0,255);
  }   

.rs-stage {
	width: 800px;
	height: 630px;
	margin: auto;
	padding: 0px;
	position: relative;
	background: #e0e0e0;
	overflow: hidden;
	outline: none;
}

.rs-stage-TabletOrPhone {
	width: 800px;
	height: 650px;
	margin: auto;
	padding: 0px;
	position: relative;
	background: #e0e0e0;
	overflow: visible;
	outline: none;
}

.rs-canvas {
	position: absolute;
	top: 30px;
}

.rs-canvas-TabletOrPhone {
	position: absolute;
	top: 50px;
}

.rs-content {
   position: absolute;
   	left: 0px;
	top: 0px;
} 
 
 .rs-playcontrols {
	position: absolute;
	left: 10px;
	top: 3px;
}

.sample-exit-button {
	margin-top: 5px;
	margin-left: 10px;
	height: 20px;
}

.sample-exit-text {
	line-height: 20px;
	font-weight: 600;
	color: #808080;
}

.sample-exit-text:hover {
	line-height: 20px;
	color: #606060;
}

.flip-horizantal {
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.assess-sample-exit-button {
	width: 200px;
	text-align: center;
	height: 30px;
}

.assess-sample-exit-text {
	line-height: 30px;
	font-weight: 600;
	color: #D0D0D0;
}

.assess-sample-exit-text:hover {
	color: white;
}

.assess-sample-info {
	justify-content: center;
}

.assess-sample-container-left-separator {
	height: 250px;
}

.assess-sample-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #e0e0e0;
}

/*Video Lesson*/
.container-video-sd, .container-videolesson-sd {
	height: 730px;
	width: 1000px;
	margin: auto;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.container-video-hd, .container-videolesson-hd {
	height: 730px;
	width: 1267px;
	margin: auto;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.container-videolesson-sd-TabletOrPhone-portrait {
	width: 800px;
	height: 830px;
	display: flex;
	flex-direction: column;
	background: #e0e0e0;
}

.container-videolesson-hd-TabletOrPhone-portrait {
	width: 1067px;
	height: 830px;
	display: flex;
	flex-direction: column;
	background: #e0e0e0;
}

.container-videolesson-sd-TabletOrPhone-landscape {
	height: 680px;
	width: 1000px;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.container-videolesson-hd-TabletOrPhone-landscape {
	height: 680px;
	width: 1267px;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.container-right-video-sd {
	width: 800px;
	background: #ccc;
}

.container-right-video-hd {
	width: 1067px;
	background: #ccc;
}

.header-video-sd {
	width: 800px;
	height: 30px;
   	display: flex;
	flex-direction: row;
   	background: #CCC;
}

.header-video-hd {
	width: 1067px;
	height: 30px;
   	display: flex;
	flex-direction: row;
   	background: #CCC;
}

.header-video-sd-TabletOrPhone {
	width: 800px;
	height: 50px;
   	display: flex;
	flex-direction: row;
   	background: #CCC;
	align-items: center;
}

.header-video-hd-TabletOrPhone {
	width: 1067px;
	height: 50px;
   	display: flex;
	flex-direction: row;
   	background: #CCC;
	align-items: center;
}

.header-center-video-sd {
	width: 650px;
	text-align: center;
	line-height: 30px;
	font-weight: 600;
}

.header-center-video-hd {
	width: 917px;
	text-align: center;
	line-height: 30px;
	font-weight: 600;
}

.w70 {
	width: 70px !important;
}

.w74 {
	width: 74px !important;
}

.w80 {
	width: 80px !important;
}

.w-one-third {
    width: 33.33%;
}

.stage-video-sd {
	width: 800px;
	height: 600px;
	padding: 0px;
	position: relative;
	background: #e0e0e0;
	overflow: hidden;
	outline: none;
  }

.stage-video-hd {
	width: 1067px;
	height: 600px;
	padding: 0px;
	position: relative;
	background: #e0e0e0;
	overflow: hidden;
	outline: none;
}

.stage-cover-non-transparent-video-sd {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 800px;
	height: 600px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.stage-cover-non-transparent-video-hd {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1067px;
	height: 600px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.stage-cover-transparent-video-sd {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 800px;
	height: 600px;
	background-color: black;
	opacity: .75;
}

.stage-cover-transparent-video-hd {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1067px;
	height: 600px;
	background-color: black;
	opacity: .75;
}

.begin-button-video-sd {
	position: absolute;
	top: 452px;
	width: 100%;
	text-align: center;
}

.begin-button-video-hd {
	position: absolute;
	top: 452px;
	left: 496px;
	width: 74px;
	height: 21px;
}

.auto-start-message-video-sd {
	position: absolute;
	top: 500px;
	left: 150px;
	width: 500px;
	text-align: center;
	font-weight: 600;
	color: darkorchid;
}

.auto-start-message-video-hd {
	position: absolute;
	top: 500px;
	left: 283px;
	width: 500px;
	text-align: center;
	font-weight: 600;
	color: darkorchid;
}

.video-container-sd {
	position: absolute;
	top: 0px;
	left: 0px;
	/*width: 800px;*/
	width: 800px;
	height: 600px;
	background-color: #202020;
}

.video-container-hd {
	position: absolute;
	top: 0px;
	left: 0px;
	/*width: 800px;*/
	width: 1067px;
	height: 600px;
	background-color: #202020;
}

.footer-video-sd {
	width: 800px;
	height: 30px;
    margin: auto;
   	background: #ccc;
	display: flex;
	flex-direction: row;
}

.footer-video-hd {
	width: 1067px;
	height: 30px;
    margin: auto;
   	background: #ccc;
	display: flex;
	flex-direction: row;
}

.footer-video-sd-TabletOrPhone {
	width: 800px;
	height: 50px;
    margin: auto;
   	background: #ccc;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.footer-video-hd-TabletOrPhone {
	width: 1067px;
	height: 50px;
    margin: auto;
   	background: #ccc;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.footer-cover-video-sd {
	position: relative;
	top: -30px;
	width: 800px;
	height: 30px;
   	margin: auto;
   	background: #ccc;
}

.footer-cover-video-hd {
	position: relative;
	top: -30px;
	width: 1067px;
	height: 30px;
   	margin: auto;
   	background: #ccc;
}

.footer-cover-video-sd-TabletOrPhone-portrait {
	position:absolute;
	top: 700px;
	width: 800px;
	height: 130px;
   	background: #ccc;
}

.footer-cover-video-hd-TabletOrPhone-portrait {
	position:absolute;
	top: 700px;
	width: 1067px;
	height: 130px;
   	background: #ccc;
}

.footer-cover-video-sd-TabletOrPhone-landscape {
	position:absolute;
	top: 600px;
	width: 800px;
	height: 80px;
   	background: #ccc;
}

.footer-cover-video-hd-TabletOrPhone-landscape {
	position:absolute;
	top: 600px;
	width: 1067px;
	height: 80px;
   	background: #ccc;
}

.playpause-video {
	width: 14px;
	height: 16px;
}

.playtime-video {
	width: 80px;
	height: 20px;
	line-height: 20px;
	font-size: 12px;
	color: #606060;
	text-align: center;
}

.playtime-video-TabletOrPhone {
	position: relative;
	width: 90px;
	height: 100%;
	line-height: 100%;
	font-size: 16px;
	color: #606060;
	text-align: center;
}

.control-strip-video-sd {
	width: 590px;
	margin: 0px 15px;
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.control-strip-video-hd {
	width: 857px;
	margin: 0px 15px;
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.control-strip-video-sd-nofaq {
	width: 680px;
	margin: 0px 15px;
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.control-strip-video-hd-nofaq {
	width: 947px;
	margin: 0px 15px;
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.controlbar-video-sd {
	position: relative;
    width: 470px;
	height: 100%;
	background: #ccc;
	display: flex;
	align-items: center;
}

.controlbar-video-hd {
	position: relative;
    width: 730px;
	height: 100%;
	background: #ccc;
	display: flex;
	align-items: center;
}

.controlbar-video-sd-nofaq {
	position: relative;
    width: 560px;
	height: 100%;
	background: #ccc;
	display: flex;
	align-items: center;
}

.controlbar-video-hd-nofaq {
	position: relative;
    width: 820px;
	height: 100%;
	background: #ccc;
	display: flex;
	align-items: center;
}

.playbar-video {
	width: 100%;
    height: 6px;
	background: #999;
}

.playbar-video-TabletOrPhone {
	width: 100%;
    height: 8px;
	background: #999;
}

.ccbox-video-sd {
	position: relative;
	width: 800px;
	height: 30px;
   	margin: auto;
   	background: white;
}

.ccbox-video-hd {
	position: relative;
	width: 1067px;
	height: 30px;
   	margin: auto;
   	background: white;
}

.ccbox-video-sd-cover {
	position: relative;
	width: 800px;
	height: 30px;
   	margin: auto;
   	background: #ccc;
}

.ccbox-video-hd-cover {
	position: relative;
	width: 1067px;
	height: 30px;
   	margin: auto;
   	background: #ccc;
}

/* Play button */
.play-button {
    width: 20px;
    height: 100%;
    background-color: transparent;
    border: none;
    position: relative;
    cursor: pointer;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.play-button::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
	margin-left: 4px;
    border-color: transparent transparent transparent #404040;
}

.play-button:hover::before {
    border-color: transparent transparent transparent #ff0000;
}

.play-button-TabletOrPhone {
    width: 20px;
    height: 100%;
    background-color: transparent;
    border: none;
    position: relative;
    cursor: pointer;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.play-button-TabletOrPhone::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px; /* Triangle shape */
    border-color: transparent transparent transparent #404040;
}

.play-button-TabletOrPhone:hover::before {
    border-color: transparent transparent transparent #ff0000;
}

/* Pause button styles */
.pause-button {
    width: 20px;
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.pause-button::before {
    content: "";
    display: block;
	margin-left: 4px;
    width: 6px;
    height: 16px;
    background-color: #404040;
}

.pause-button:after {
    content: "";
    display: block;
    width: 6px;
    height: 16px;
    background-color: #404040;
}

.pause-button:hover {
    border-color: #ff0000;
}

.pause-button:hover::before,
.pause-button:hover::after {
    background-color: #ff0000;
}

.pause-button-TabletOrPhone {
    width: 20px;
    height: 20px;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.pause-button-TabletOrPhone::before {
    content: "";
    display: block;
    width: 8px; /* Width of each bar */
    height: 20px; /* Height of the bars */
    background-color: #404040; /* Bar color */
}

.pause-button-TabletOrPhone::after {
    content: "";
    display: block;
    width: 8px; /* Width of each bar */
    height: 20px; /* Height of the bars */
    background-color: #404040; /* Bar color */
}

/* Shared step back and forward button styles */
.step-back-button, .step-forward-button, .step-back-button-TabletOrPhone, .step-forward-button-TabletOrPhone {
    width: 20px;
    height: 100%;
    background-color: transparent; /* No background */
    border: none;
    position: relative;
    cursor: pointer;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Step back button styles */
.step-back-button::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 15px 9px 0; /* 75% of 12px 20px 12px 0 */
    border-color: transparent #404040 transparent transparent;
    position: relative;
    left: 1px; /* 75% of 4px */
}

.step-back-button::after {
    content: "";
    display: block;
    width: 3px;  /* 75% of 4px */
    height: 18px; /* 75% of 24px */
    background-color: #404040;
    position: absolute;
    left: 0px;
}

/* Step back button hover effect */
.step-back-button:hover::before {
    border-color: transparent #ff0000 transparent transparent; /* Red triangle on hover */
}

.step-back-button:hover::after {
    background-color: #ff0000; /* Red vertical bar on hover */
}

.step-back-button-TabletOrPhone::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 20px 12px 0; /* Triangle shape pointing left */
    border-color: transparent #404040 transparent transparent; /* Black step back icon */
    position: relative;
    left: 4px; /* Adjust positioning */
}

.step-back-button-TabletOrPhone::after {
    content: "";
    display: block;
    width: 4px; /* Width of the vertical bar */
    height: 24px; /* Height of the vertical bar */
    background-color: #404040; /* Black bar */
    position: absolute;
    left: 0px; /* Adjust position relative to triangle */
}

/* Step forward button styles */
.step-forward-button::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 15px; /* 75% of 12px 0 12px 20px */
    border-color: transparent transparent transparent #404040;
    position: relative;
    left: -6px; /* 75% of -4px */
}

.step-forward-button::after {
    content: "";
    display: block;
    width: 3px;  /* 75% of 4px */
    height: 18px; /* 75% of 24px */
    background-color: #404040;
    position: absolute;
    left: 12px; /* 75% of 16px */
}

/* Step forward button hover effect */
.step-forward-button:hover::before {
    border-color: transparent transparent transparent #ff0000; /* Red triangle on hover */
}

.step-forward-button:hover::after {
    background-color: #ff0000; /* Red vertical bar on hover */
}

.step-forward-button-TabletOrPhone::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px; /* Triangle shape pointing right */
    border-color: transparent transparent transparent #404040; /* Black step forward icon */
    position: relative;
    left: -4px; /* Adjust positioning */
}

.step-forward-button-TabletOrPhone::after {
    content: "";
    display: block;
    width: 4px; /* Width of the vertical bar */
    height: 24px; /* Height of the vertical bar */
    background-color: #404040; /* Black bar */
    position: absolute;
    left: 16px; /* Adjust position relative to triangle */
}

/* Slider handle base style */
.slider-handle {
    width: 18px; /* Diameter of the circle */
    height: 18px; /* Diameter of the circle */
    background-color: #404040; /* Default color (black) */
    border-radius: 50%; /* Make it a circle */
    position: absolute; /* Position is controlled by ng-style */
    cursor: pointer; /* Show a hand cursor on hover */
}

/* Hover effect for the slider handle */
.slider-handle:hover {
    background-color: #ff0000;
}

.slider-handle-TabletOrPhone {
    width: 24px;
    height: 24px;
    background-color: #404040;
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
}

/*e-viewer*/
.e-viewer-container {
	height: 780px;
	width: 1250px;
	margin: auto;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.e-viewer-container-right {
	width: 1050px;
	background: #ccc;
}

.e-viewer-header {
	width: 1050px;
	height: 50px;
   	display: flex;
	flex-direction: row;
   	background: #CCC;
	align-items: center;
}

.e-viewer-header-center {
	width: 900px;
	text-align: center;
	line-height: 30px;
	font-weight: 600;
}

.e-viewer-footer {
	width: 1050px;
	height: 50px;
    margin: auto;
   	background: #ccc;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

.e-viewer-stage {
	width: 1050px;
	height: 680px;
	margin: auto;
	padding: 0px;
	position: relative;
	background: #e0e0e0;
	overflow: auto;
	-webkit-overflow-scrolling: auto;
	outline: none;
  }

  .e-viewer-stage-cover-non-transparent {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1050px;
	height: 680px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*tablet skip*/
.container-tablet-skip {
	height: 630px;
	width: 1000px;
	margin: auto;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
}

.container-tablet-skip-landscape {
	height: 600px;
	width: 1000px;
	display: flex;
	flex-direction: row;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.container-tablet-skip-portrait {
	height: 750px;
	width: 800px;
	display: flex;
	flex-direction: column;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;
}

.continue-button-container-tablet-skip {
	position: absolute;
	top: 452px;
	width: 100%;
	text-align: center;
}