html,
body {
	width: 100%;
	height: 100%;
	background-color: #E6E6E6;
}
body {
	font-family: 'voltaModernDisplay55Roman',sans-serif, Arial, Helvetica;
	color: #000;
	font-size: 14px;
	min-height: 100%;
	overflow: hidden;	
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	
}

.title{
	font-size: 1.33em; 
	font-family: 'voltaModernDisplay75Bold',sans-serif, Arial, Helvetica;
	font-weight: normal;
}
.sub-title,
.modal-title,
.pop-title{
	font-size: 1.20em; 
	font-family: 'voltaModernDisplay75Bold',sans-serif, Arial, Helvetica;
	font-weight: normal;
	/* letter-spacing: 1.8px; */
}
.color1{color:#023761}
.color2{color:#0460A9}
.color-white {color: #fff;}
.color-green {color: #0460A9;}
.color-red {color: #0460A9;}
strong,
.strong,
.bold,
.system-fail-msg strong,
.system-fail-msg .bold {
	font-weight: normal;
	font-family: 'voltaModernDisplay65Medium',sans-serif, Arial, Helvetica;
}
i {	
	font-style:italic;
}
strong i,
.strong i,
.bold i,
i strong,
i .strong,
i .bold {	
	font-weight: normal;
	font-style:italic;
	font-family: 'voltaModernDisplay65Medium',sans-serif, Arial, Helvetica;
}
.font-light{
	font-weight: normal;	
}
.font-1{
	font-weight: normal;
	font-family: 'voltaModernDisplay55Roman',sans-serif, Arial, Helvetica;
}
.font-2{
	font-weight: normal;
	font-family: 'voltaModernDisplay65Medium',sans-serif, Arial, Helvetica;
}
.font-3{
	font-family: 'voltaModernDisplay75Bold',sans-serif, Arial, Helvetica;
	font-weight: normal;
}
sup {
  vertical-align: super;
  font-size: smaller;
  top: 0em;
}
sub {
  vertical-align: sub;
  font-size: smaller;
  bottom: 0em;
}
img{width: 100%;}
*{box-sizing: border-box;}
/* *:not(.input-box){
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
} */
/* for remove input box inner shadows */
textarea, 
input,
input[type="range"],  
input[type="password"], 
input[type="search"],
input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
	appearance: none;
}
textarea,
input{
	resize: none; 
	width:100%; 
	height:auto; 
	border:0.13em solid #707070;
	box-sizing:border-box;
	position: relative;
	padding: 0.5em 1em;
	color: #000;
	background-color:#F2F2F2;
}
textarea{min-height: 4.9em;}
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #999;
}
textarea::-moz-placeholder,
input::-moz-placeholder { /* Firefox 19+ */
  color: #999;
}
textarea:-ms-input-placeholder,
input:-ms-input-placeholder { /* IE 10+ */
  color: #999;
}
textarea:-moz-placeholder,
input:-moz-placeholder { /* Firefox 18- */
  color: #999;
}
textarea::placeholder,
input::placeholder {
  color: #999;
}
input::-ms-clear, input::-ms-reveal {
    display: none;
}

.table-div{width: 100%;position: relative;}
table {
	border-collapse: collapse;
	width: 100%;
	/* table-layout: fixed; */
	overflow-x: auto;
}

.bg-video video {object-fit: cover;}

table, th, td {		  
	box-sizing: border-box;
	word-wrap: normal;
	word-break: keep-all;
}
th, td {
	padding: 0.15em;
	border: 0.15em solid #0460A9;
	vertical-align: middle;
	text-align: center;			
	position: relative;
}
.copy-all{
	-webkit-touch-callout:all;
	-webkit-user-select: all;  /* Chrome all / Safari all */
	-moz-user-select: all;     /* Firefox all */
	-ms-user-select: all;      /* IE 10+ */
	user-select: all; 
	/*padding: 0.57em;
	border-radius: 0.28em;
	
	height: auto;
	background-color:#0460A9;
	box-sizing: border-box;*/
	word-break: break-all;
	color:#0460A9;
	text-decoration: underline;
}
.copy-all::selection{
	background-color: #fff;	
}

.ui-widget {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}
.ui-widget-content {
	color: inherit;
}
.ui-button:hover {
	color: inherit;
}
.ui-widget-overlay {
    background: #000;
}
.ui-widget-content a {
    color: inherit;
}


.clearfix::after {
	content: "";
  clear: both;
  display: table;
}
.clearfix {
	display: inline-block
}
.clearfix[class] {
	display: block
}
html[xmlns] .clearfix {
	display: block
}
* html .clearfix {
	height: 1%
}

a {
	outline: 0;
}
p:focus,
td:focus,
div:focus,
img:focus,
span:focus,
button:focus {
	outline: 0!important;
	outline-style: none!important;
}
a:focus{
	outline: 0!important;
	outline-style: none!important;
}
button:focus {
	outline: 0!important;
	outline-style: none!important;
}
img,
div,
span {
	border: none;
}
img.map,
map area {
	outline: none;
}
.screen .hide {
	display: none;
}
.screen .show {
	display: block;
}
.display-block{
	display: block;
	text-align: start;
}
.display-block.left{text-align: start;}
.display-block.right{text-align: end;}
.display-block.center{text-align: center;}
.display-inline-block{
vertical-align: top;
display: inline-block;
}
.display-table {
	display: table;
	width: 100%;
	height: 100%;
	border-collapse: collapse;
}
.display-cell {
	display: table-cell;
}
.display-cell.left {
	text-align: start;
}
.display-cell.center {
	text-align: center;
}
.display-cell.right {
	text-align: end;
}
.display-cell.v-top {
	vertical-align: top;
} 
.display-cell.v-center {
	vertical-align: middle;
} 
.display-cell.v-bottom {
	vertical-align: bottom;
}
.display-row {
	display: table-row;
}
.display-table.inline-table {
	width: auto;
}
.display-table.inline-table .display-cell {
	vertical-align: top;
	text-align: start;
}
.visibility-hidden {
	visibility: hidden;
}
.visibility-visible {
	visibility: visible;
}
u {
	text-decoration: underline;
}
p {
	margin-bottom: 0.70em;
}
div p:last-child {
	margin-bottom: 0em
}
a {
	text-decoration: none;
}
p.margin-bottom-0,
.margin-bottom-0 {
	margin-bottom: 0em;
}
.margin {margin: 1em;}
.margin-bottom {margin-bottom: 1em;}
.margin-top {margin-top: 1em;}
.margin-left {margin-inline-start: 1em;}
.margin-right {margin-inline-end: 1em;}

.small-margin {margin: 0.5em;}
.small-margin-bottom {margin-bottom: 0.5em;}
.small-margin-top {margin-top: 0.5em;}
.small-margin-left {margin-inline-start: 0.5em;}
.small-margin-right {margin-inline-end: 0.5em;}


.medium-margin {margin: 1.5em;}
.medium-margin-bottom {margin-bottom: 1.5em;}
.medium-margin-top {margin-top: 1.5em;}
.medium-margin-left {margin-inline-start: 1.5em;}
.medium-margin-right {margin-inline-end: 1.5em;}

.large-margin {margin: 2em;}
.large-margin-bottom {margin-bottom: 2em;}
.large-margin-top {margin-top: 2em;}
.large-margin-left {margin-inline-start: 2em;}
.large-margin-right {margin-inline-end: 2em;}

.no-margin {margin: 0em;}
.no-margin-bottom {margin-bottom: 0em;}
.no-margin-top {margin-top: 0em;}
.no-margin-left {margin-inline-start: 0em;}
.no-margin-right {margin-inline-end: 0em;}

.padding {padding: 1em;}
.padding-bottom {padding-bottom: 1em;}
.padding-top {padding-top: 1em;}
.padding-left {padding-inline-start: 1em;}
.padding-right {padding-inline-end: 1em;}

.small-padding {padding: 0.5em;}
.small-padding-bottom {padding-bottom: 0.5em;}
.small-padding-top {padding-top: 0.5em;}
.small-padding-left {padding-inline-start: 0.5em;}
.small-padding-right {padding-inline-end: 0.5em;}

.medium-padding {padding: 1.5em;}
.medium-padding-bottom {padding-bottom: 1.5em;}
.medium-padding-top {padding-top: 1.5em;}
.medium-padding-left {padding-inline-start: 1.5em;}
.medium-padding-right {padding-inline-end: 1.5em;}

.large-padding {padding: 2em;}
.large-padding-bottom {padding-bottom: 2em;}
.large-padding-top {padding-top: 2em;}
.large-padding-left {padding-inline-start: 2em;}
.large-padding-right {padding-inline-end: 2em;}

.no-padding {padding: 0em;}
.no-padding-bottom {padding-bottom: 0em;}
.no-padding-top {padding-top: 0em;}
.no-padding-left {padding-inline-start: 0em;}
.no-padding-right {padding-inline-end: 0em;}

.mobile-padding { padding: 1.9em 1em; }


ol,ul{margin:0.86em 0em 0.86em 0.86em}

ol ul{margin-bottom: 0em;}
ul ol{margin-bottom: 0em;}

/* 1 generic bullets */
ol li {margin-inline-start: 1.15em;list-style: decimal;margin-bottom: 0.28em;}
ul li,
ol ul li{margin-inline-start: 1.15em;list-style: disc;margin-bottom: 0.28em;}


 /* 2 bullets with custom color */
/* ul {list-style: none}
ul li::before {
	content: "•"; 
	color:#0460A9;
	display: inline-block; width: 1em;
	margin-inline-start: -1em
}
ol {list-style: none; counter-reset: li}
ol li::before {
	content: counter(li); color:#0460A9;
	display: inline-block; width: 1em;
	margin-inline-start: -1em
}
ol li {counter-increment: li}
ol li {margin-inline-start: 0.2em; margin-bottom: 0.5em;}
ul li,
ol ul li{margin-inline-start: 0.2em; margin-bottom: 0.3em;} */
/* 2 bullets end */
.centered{
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
/* apply overflow: hidden; for main-div side menu animation */
.app-body {
	position: absolute;
	width: 1014px;
	height: 684px;
	background-color: #fff;
	border: none;
	overflow: hidden;
}

.main-div{
	position: relative;
	width: 100%;
	height: 100%;
}
/* height should be header and footer minus */
.content-master{
	position: absolute;
	width: 100%;
	height: calc(100% - 48px);
	overflow: hidden;
	top: 0px;
}

.content-master.full-height{height: 100%;}
.screen-container {
	margin: 0;
	position: relative;
	top: 0em;
	width: 100%;
	height: 100%;
}
.content-master.full-height .screen-container{padding-top: 0px;}
.screen-container.zindex{
	z-index: 999;
}
.screen {
	height: 100%;
	min-height: auto;
	position: relative;
	width: 100%;
	display: block;
}
.screen .screen-panel,
.screen .screen-panel1 {
	height: 100%;
	min-height: auto;
	margin: 0 auto;
	position: relative;
	width: 100%;
	padding: 0em;
	box-sizing: border-box;
}
.screen .screen-padding{
	padding: 60px 30px 10px 30px;
	position: relative;
	width: 100%;
	height: 100%;
}
.screen .screen-background{position: absolute; }
.app-body #global-bg{position: absolute; }
.app-body #global-bg-0,
.app-body #global-bg-1{position: absolute; background-color: #fff;}
.app-body .bg-video{position: absolute;
	top: 0em;
	left: 0em;
}
.bg-blur{
	-webkit-filter: blur(4px);
	-ms-filter: blur(4px);
	filter: blur(4px);
}
.blank-div {
	position: relative;
	height: 1px;
}
.image-icon{
	background: url("../../../../framework/images/ltr/image_sprite.png") no-repeat 0em 0em scroll transparent;
	width:1.15em;
	height:1.15em;
}

.header {
	width: 100%;	
	padding: 0em;
	z-index: 9999;
	position:relative;
	margin: 0 auto;
	height:auto;
	box-sizing: border-box;	
	background-color: #fff;	
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}
.header.trans-bg {box-shadow: none;}
.header.trans-bg .navigation-panel .title-panel{width: 100%;}
.header .navigation-panel{padding: 0em 1.5em; height:50px;}

.header .navigation-panel .course-logo {
	padding: 0.0em 1.2em;
	position: relative;
	color: #627D77;
	width: 5em;
}
.header .navigation-panel .course-logo .font-icon{
	font-size: 2.2em;
}
.header .navigation-panel .gap-cell{
	position: relative;
	padding: 1em 1.5em;
}
.header .navigation-panel .title-panel {
	padding: 0em 0.5em 0em 0.5em;
	width: 90%;
	text-align: start;
	color: #023761;
}
.header .navigation-panel .title-panel span{vertical-align: middle; display: inline-block;}
.header .navigation-panel .title-panel .topic-icon{margin-inline-end: 0.4em; font-size: 1.5em;}

.header .navigation-panel .title-panel .splitter{
	text-align: center;
	width: 30px;
}
.header .btn-panel {
	padding: 0em 0.2em; 
	width: 1.7em; 
	min-width: auto; 
	min-width: auto;
	min-height: auto;
}
/* .header .display-cell:first-child{padding-inline-start: 0em;}  */
.header .display-cell:last-child{padding-inline-end: 0em;} 
.header .btn-panel.progress-cell{padding: 0em 0.5em;}

.header .btn-panel.progress-cell .btn {cursor: default;}
.header .btn-panel .btn{
	min-width: auto;
	font-size: 1.1em;
	width: 40px;
	padding: 0em;
	height: 40px;
	color: #fff;
	border-radius: 50%;
	background-color: #0460A9;
	
}
.header .btn-panel .btn.hover{
	background-color: #023761;
}
.header .btn-panel .btn .btn-txt{
	font-size: 0.8em;
	line-height: 0.5;
}
.header .btn-panel .btn .btn-icon{font-size: 1em;}

.header .btn-panel .menu-btn .line{
	display: block;
	width: 100%;
	height: 0.15em;
	text-align: center;
	background-color:#000;
	margin: 0.35em 0em;
	box-sizing: border-box;
	border-radius: 1em;
}
.footer{
	height: 48px;
	width: 100%;
	padding: 0.5em 1.5em 0.5em 1.5em;
	z-index: 1;
	bottom: 0px;
	position: absolute;
}
.footer .nav-btn-panel{
	position: relative;
	display: flex;
	float: right;
	top: 0em;
	flex-direction: row;
	align-items: center;

}
.footer .nav-btn-panel .btn{
	min-width: auto;
	width: 35px;
	height: 30px;
	margin-inline-start: 0em;
}
.footer .title-band{
	position: absolute;
	display: table;
	height: 100%;
	width: 60%;
	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
	top: 0em;
	left: 0em;
	padding: 0.5em 1.5em;
}
.footer .title-band > span{display: table-cell; vertical-align: middle; text-align: start;}
.footer .title-band .logo-cell{	position: relative;	width: 95px;}
.footer .title-band .logo-cell .logo{width: 100%; vertical-align: middle;}
.footer .title-band .splitter{position: relative; width: 20px; text-align: center;}

.footer .title-band.intro-band > span{color: #023761; font-size: 1.33em;}

.footer .title-band.regular-band{width: 78%;}
.footer .title-band.regular-band .logo-cell{width:105px;}
.footer .title-band.regular-band .splitter{width: 30px;}

.btn-next.hover .btn-icon{
	-webkit-transform: translate3d(+10%, 0, 0);
	-ms-transform: translate3d(+10%, 0, 0);
	transform: translate3d(+10%, 0, 0);	 
}
.btn-back.hover .btn-icon{
	-webkit-transform: translate3d(-10%, 0, 0);
	-ms-transform: translate3d(-10%, 0, 0);
	transform: translate3d(-10%, 0, 0);	 
}
.global-modal-pop .close-modal-btn,
.app-body .close-popup-btn{
    position: relative;
    float: right;
    z-index: 1;
    min-width: auto;
    width: auto;
    height: auto;
    margin: 0em;
    background-color:#0460A9;
    font-size: 1em;
    padding: 1em;
    border-radius: 0em;
}

.header .btn-panel .btn.hover .btn-icon{
	/* -ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1); */
	
}
.alpha-bg {
	background: rgba(0, 0, 0, 0.5);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 20000;
	display: none;
}
.white-alpha-bg {
	position: relative;
	background: rgba(255, 255, 255, 0.8);
	padding: 0.5em 1em;
	box-sizing: border-box;
	width: 100%;
	border-radius: 0em;
	/* border: 0.1em solid #C6C6C6; */
}
.white-bg {
	position: relative;
	background: #fff;
	padding: 0.5em 1em;
	box-sizing: border-box;
	width: 100%;
	border-radius: 0em;
}
.color-alpha-bg {
	position: relative;
	background-color: rgba(82, 145, 221, 0.8);
	padding: 0.5em 1em;
	box-sizing: border-box;
	width: 100%;
	border-radius: 0em;
	color:#fff;
}
.white-alpha-bg.padding,
.white-bg.padding,
.color-alpha-bg.padding{
	padding: 1em 1em;
}
.white-alpha-bg.medium-padding,
.white-bg.medium-padding,
.color-alpha-bg.medium-padding{
	padding: 1.5em 1em;
}
.white-alpha-bg.large-padding,
.white-bg.large-padding,
.color-alpha-bg.large-padding{
	padding: 2em 1em;
}

.btn-panel,
.modal-btn{
	position: relative;
	min-width: 4.61em;
	width: auto;
	min-height: 1.44em;
	height: auto;
}
.btn,
.modal-btn .ui-button{
	transition: all 200ms ease-in;
	position: relative;
	width: auto;
	min-width: 6em;
	height: 2.5em;
	color: #fff;	
	box-sizing: border-box;
	background-color:#0460A9;
	padding: 0.3em 0.5em;
	display: table;
	border: none;
	font-weight: inherit;
	font-size: 1em;
	line-height: normal;
	white-space: normal;
	border-radius: 1.2px;
	display: inline-flex;
    align-items: center;
    justify-content: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* for tween animation error */
.visibility-hidden .btn,
.btn.visibility-hidden{transition:none;}
.btn.with-radius,
.modal-btn.with-radius .ui-button{
	border-radius: 2em;
}
.btn.color-gradient,
.modal-btn.color-gradient .ui-button.color-gradient{
	background: rgb(15,77,188);
	background: linear-gradient(90deg, rgba(15,77,188,0.9) 0%, rgba(0,169,224,0.9) 100%);
	color: #fff;
}
.btn.display-table,
.modal-btn.display-table .ui-button.display-table{
	display: table;
	border-collapse: separate;
}

.btn.icon-only{background-color: transparent; color:#5291DD; min-width: auto;height: auto;}
.btn-panel .btn .btn-txt{padding: 0.0em 0.5em}
.btn-panel.circle .btn{
	background-color:#0460A9;
	color: #fff;
}
.border-btn.btn,
.btn-panel.border-btn .btn{
	background-color: #0460A9;
	border:1.2px solid #fff;
	border-radius:1.2px;
}
.modal-btn .ui-button{display: inline-block;
	vertical-align: middle;
	font-size: inherit;
	font-family: inherit;
}
.modal-btn .ui-button .ui-button-icon{display:none;}
.modal-btn .ui-button .ui-button-icon-space{display:none;}

.btn-panel.circle {
	min-width: auto;
	width: 3em;
	min-height: auto;
	height: 3em;
	
}
.btn-panel.circle .btn {
	border-radius: 50%;
	width: 100%;
	height: 100%;
	min-width: auto;
	padding: 0em;
}
.circle.btn{
	min-width: auto;
	font-size: 1.1em;
	width: 36px;
	padding: 0em;
	height: 36px;
	color: #fff;
	border-radius: 50%;
	background-color: #0073AE;
}
.btn.with-img{
	background-color: transparent;
	border: none;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 34px;
	height: 34px;
}
.btn.with-img .img-tag{
	width: 100%;
	position: absolute;
	text-align: center;
	left: 0px;
	top: 0px;
}
.header .audio-btn.on .on-img,
.header .audio-btn.off .off-img { display: block;}
.header .audio-btn.on .off-img,
.header .audio-btn.off .on-img { display: none;}

.btn.with-img .img-tag.hover-img{
	display: none;
}
.header .exit-div{
	width: 2em;
}
.header .exit-div .static-txt{
	color:#fff;
	display: inline-block;
	vertical-align: middle;
	padding: 0em 0.57em 0em 0em;
}
.header .exit-div .btn-panel{
	display: inline-block;
    vertical-align: middle;
    margin: 0em;
    width: 3em;
    height: 3em;
	padding: 0em;
}
/* dropdown menu */
.header .nav-desktop{display: table-cell; vertical-align: middle;}
.header .mob-dropdown {margin: 0em;}
.header .navbar-nav.mob-dropdown li::before{content: ''; display: none;}
.header .navbar-nav.mob-dropdown li{margin: 0em; list-style: none;}
.header .navbar-nav.mob-dropdown li.divider{margin: 0.2em 0em;}
.header .navbar-nav.mob-dropdown > li > a{color:#fff;}
.header .navbar-nav.mob-dropdown {
	position: absolute;
	right: 0em;
	padding: 0em 1em;
}
.header .navbar-nav.mob-dropdown .dropdown-btn{
    width: 3em;
    padding: 0.4em;
    min-width: auto;
    text-align: center;
    display: table;
    position: absolute;
    right: 0em;
	margin: 0.8em 0em;
	background-color: transparent;
	color:#0460A9;
}

.header .navbar-nav.mob-dropdown .dropdown-btn.hover,
.header .navbar-nav > .dropdown.open > a, 
.header .navbar-nav > .dropdown.open > a:focus{
    background-color:#0460A9;
    color: #fff;
    outline: none;
}

.navbar-nav .open .dropdown-menu{
    width: 290px;
    background-color: #fff;
    min-width: auto;
    box-sizing: border-box;
    position: absolute;
    top: 60px;
    border-radius: 0em;
    color:#0460A9;
	padding: 0.5em;
	border: 0.1em solid #0460A9;
	z-index: 9999;
}
.navbar-nav .open .dropdown-menu .btn-panel{
	min-height: auto;
	width: 100%;
}
.navbar-nav .open .dropdown-menu .btn{
    border-color:#0460A9;
    color:#0460A9;
	width: 100%;
	font-size: 1.2em;
	justify-content: flex-start;
}
.navbar-nav .open .dropdown-menu .btn .btn-icon{
	width: 35px;
}
.navbar-nav .open .dropdown-menu .btn .btn-txt{
 text-align: start;
}

.navbar-nav .open .dropdown-menu .btn.hover{
    background-color:#0460A9;
    color:#fff;
}

.navbar-nav .open .dropdown-submenu .dropdown-menu{
    border: none;
    background-color: transparent;
    width:100%;
}

.navbar-nav .open .dropdown-menu > li > a:focus{
    color: #fff;
    text-decoration: none;
    background-color: #003594;
    outline: none;
}
.mobile-titlebar{
	position: relative; 
	width:100%; 
	background-color: #5291DD;
	display: none;
	color:#fff;
	min-height: 2.5em;
	padding: 0.7em 1em;
}

.btn .btn-bg{position: absolute;}
.btn .btn-txt{position: relative; padding: 0em 0.5em;}
.btn .btn-icon{
	font-size: 1.5em;
	vertical-align: middle;
}
.btn.icon-only .btn-icon{font-size: 2em;}
.common .btn .btn-txt{
	vertical-align: middle;
	text-align:start;
}
.common .btn .btn-icon{
	vertical-align: bottom;
	text-align:end;
}
.common .btn .btn-icon.extra-icon{
	vertical-align: middle;
	padding-inline-start: 0.5em;
	text-align:start;
}
.header .exit-div .btn .btn-icon{font-size: 1.0em; }
.header .exit-div .btn{
	background-color:#0460A9;
	padding: 0em;
	color: #fff;
}
.btn.thought-bouble{
    position: absolute;    
    border-radius: 50%;
    height: auto;
    min-width: auto;
    
}
.btn.thought-bouble::before,
.btn.thought-bouble::after{
    content: '';
    position: absolute;
    background-color:#0460A9;
    width: 1.2em;
    height: 1.2em;
    display: block;
    bottom: 0.5em;
    left: -0.5em;
    border-radius: 50%;
}
.btn.thought-bouble::after{
    bottom: 0em;
	left: -1.8em;
    width: 0.8em;
    height: 0.8em;
}
.speech-bouble{
	background-color:#0460A9; 
	padding: 1em;
	position: relative;
	color:#fff;
	border-radius: 0.2em;
}
.font-icon.triangle-top{
	position: absolute;
	top: -16px;
	left: 0px;
	right: 0px;
	margin: 0 auto;
	color:#FAC833;
	font-size: 1em;
}
.font-icon.triangle-bottom{
	position: absolute;
	bottom: -16px;
	left: 0px;
	color: #FAC833;
	font-size: 1em;
	right: 0px;
	margin: 0 auto;
}
.font-icon.triangle-right{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: auto;
	right: -16px;
	color:#FAC833;
	font-size: 1em;
}
.font-icon.triangle-left{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: -10px;
	color:#FAC833;
	font-size: 1em;
}
/* this CS forms the triangles */
.css-triangle{position: absolute; width: 50px; height: 50px;}
.css-triangle.top{
	left: 0px;
	right: 0px;
	margin: 0 auto;
	top: -51px;
}
.css-triangle.bottom{
	left: 0px;
	right: 0px;
	margin: 0 auto;
	top:auto;
	bottom: -51px;
}
.css-triangle.left{	
	right: auto;
	left: -51px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.css-triangle.right{	
	left: auto;
	right: -51px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.css-triangle:after,
.css-triangle:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
}
/* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
.css-triangle:after {
	border: none;
    border-top: 20px solid transparent;
	border-inline-end: 42px solid #fff;
	border-bottom: 20px solid transparent;
	position: absolute;
	left: auto;	
	bottom: 4px;
	right: -2px;
}

/* this border color controlls the outside, thin border */
.css-triangle:before {
	border: none;
    border-top: 24px solid transparent;
	border-inline-end: 50px solid #141E55;
	border-bottom: 24px solid transparent;
	position: absolute;
	left: auto;	
	right: 0px;    
    bottom: 0px;
}
.css-triangle.right:after{
	border: none;
    border-top: 20px solid transparent;
	border-inline-start: 42px solid #fff;
	border-bottom: 20px solid transparent;
	left: -2px;	
	right: auto;    
    bottom: 4px;
}
.css-triangle.right:before {
	border: none;
    border-top: 24px solid transparent;
	border-inline-start: 50px solid #141E55;
	border-bottom: 24px solid transparent;
	left: 0px;	
	right: auto;    
    bottom: 0px;
}
.css-triangle.top:after{
	border: none;
    border-right: 20px solid transparent;
	border-bottom: 42px solid #fff;
	border-left: 20px solid transparent;
	left: 4px;	
	right: auto;    
    bottom: -2px;
}
.css-triangle.top:before {
	border: none;
	border-right: 24px solid transparent;
	border-bottom: 50px solid #141E55;
	border-left: 24px solid transparent;
	left: 0px;	
	right: auto;    
    bottom: 0px;
}
.css-triangle.bottom:after{
	border: none;
    border-right: 20px solid transparent;
	border-top: 42px solid #fff;
	border-left: 20px solid transparent;
	left: 4px;	
	right: auto;    
    bottom: auto;
	top:-2px;
}
.css-triangle.bottom:before {
	border: none;
	border-right: 24px solid transparent;
	border-top: 50px solid #141E55;
	border-left: 24px solid transparent;
	left: 0px;	
	right: auto;    
    bottom: auto;
	top:0px;
}

.header .line-div{display: none;}
.btn.hover,
.modal-btn .ui-button.hover,
.modal-btn .ui-button:hover {
	background-color:#023761;
	background-clip: border-box;
}
.btn-panel.circle .btn.hover{
	background-color:#023761;
}
.clickable.current .btn,
.btn.current{
	background-color:#023761;
}

.btn.color-gradient.hover,
.modal-btn .ui-button.color-gradient.hover,
.modal-btn .ui-button.color-gradient:hover,
.clickable.current .btn.color-gradient,
.btn.color-gradient.current {
	background:#0460A9;
	background: linear-gradient(90deg,  rgba(0,169,224,1) 0%, rgba(0,169,224,1) 100%);
}
.border-btn.btn.hover,
.btn-panel.border-btn .btn.hover{
	background-color: #fff;
	border-color:#fff;
	color:#0460A9;
}
.clickable.current .btn.thought-bouble,
.clickable.current .btn.thought-bouble::before,
.clickable.current .btn.thought-bouble::after,
.btn.thought-bouble.hover,
.btn.thought-bouble.hover::before,
.btn.thought-bouble.hover::after,
.btn.thought-bouble.current,
.btn.thought-bouble.current::before,
.btn.thought-bouble.current::after{
	background-color: #fff;
	color:#0F4DBC;
}
.btn.transBg{
	background-color: transparent;
	padding: 0em;
	min-width: auto;
	border-radius: 0em;
}
.btn.with-img.hover,
.btn.transBg.hover,
.clickable.current .btn.transBg,
.btn.transBg.current{
	background-color: transparent;
}

.btn.icon-only.hover{background-color: transparent; color: #023761; }
.btn.icon-only.hover .btn-icon{
	-ms-transform: scale(0.9);
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}
.btn.with-img.selected .img-tag.normal-img,
.btn.with-img.hover .img-tag.normal-img{display: none;}
.btn.with-img.selected .img-tag.hover-img,
.btn.with-img.hover .img-tag.hover-img{display: block;}
.clickable.current .btn.with-img .img-tag.normal-img{display: none;}
.clickable.current .btn.with-img .img-tag.hover-img{display: block;}

.header .audio-btn.off .on-img, .btn.with-img.off.hover .img-tag.hover-img.on-img {
    display: none;
}
.disabled {
	cursor: default;
}
.btn.disabled,
.btn.disabled:hover,
.swiper-btn.swiper-button-disabled,
.swiper-btn.swiper-button-disabled:hover,
.swiper-btn.swiper-button-disabled:focus,
.modal-btn .ui-button.disabled,
.modal-btn .ui-button.disabled:hover,
.btn-panel.circle .btn.disabled,
.btn-panel.circle .btn.disabled:hover
{
color: #fff;
background-color:#0460A9;
opacity: 0.2;
cursor: default;
}
.btn.transBg.disabled {
	opacity:1;
	background-color: transparent;
}
.btn.icon-only.disabled{background-color: transparent; color:#5291DD; opacity: 0.5;}
.btn.with-img.disabled{background-color: transparent; opacity: 0.5;}
.header .btn-panel .btn.disabled{
	background-color: transparent;
}
.btn.close-trans-btn{min-width: auto;}
.btn.close-trans-btn .btn-txt{padding: 0.4em 0.5em;}
.btn.close-trans-btn .btn-icon{font-size: 1em;}
.screen-modal-pop,
.global-modal-pop {
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    z-index: 30000;
    width: 100%;
    height: 100%;
    display:none;
    padding: 1em;
    box-sizing: border-box;
    top: 0em;
	left: 0em;
	overflow-x: hidden;
	overflow-y: hidden;
}

.panel-group .panel{box-shadow: none; border:none;}
/* IE hack for position: fixed */
.screen-modal-pop{
	position: absolute;
	z-index: 29000;
	background-color: transparent;
}

.screen-modal-pop .modal-box,
.global-modal-pop .modal-box{
	height: auto;
	position: absolute;
	top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
	width:auto;
	max-width: 1014px;
	z-index: 33334;
	border: none;
	padding: 0em;
	display: block;
	background-clip: padding-box;
	box-sizing: border-box;
}
.screen-modal-pop .modal-box.top,
.global-modal-pop .modal-box.top{
	width: 100%;
	position: relative;
	margin: 0em auto 1em auto;
	top: 0em;
	left: 0em;
	-ms-transform: translateX(0%) translateY(0%);
	-webkit-transform: translate(0%,0%);
	transform: translate(0%,0%);
}
.screen-modal-pop .modal-alert,
.global-modal-pop .modal-alert{
    position: relative;
    background-color: transparent;    
    border-radius: 0px;
    min-width: 400px;
    overflow: hidden;
    box-shadow: 0px 0px 60px #000;
}
.screen-modal-pop .modal-alert .modal-content-box,
.global-modal-pop .modal-alert .modal-content-box{padding: 1.5em 1.73em 0.86em 1.73em; text-align: start; min-height: 4em;}
.side-navigation{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	max-width: 1014px;
	margin: 0 auto;
}
.side-navigation .btn-panel.back,
.side-navigation .btn-panel.next{
		position: absolute;
		padding: 0em;
		z-index: 1;
		min-width: auto;
		min-height: auto;
		width: 50px;
		height: 50px;
		margin: 0em 20px;
		top: 50%;
		margin-top: -25px;
	}
.side-navigation .btn-panel.back{left: 0px;}
.side-navigation .btn-panel.next{right: 0px;}	
.side-navigation .btn-panel .btn{
	min-width: auto;
	height: 100%;	
	padding: 0em;
	width: 100%;
}

.side-navigation .btn-panel.next .btn.hover{
	color:#fff; 	
}
.side-navigation .btn-panel.back .btn.hover{
	color:#fff;
}
.side-navigation .screen-counter{
	position: fixed;
	padding: 0.86em;
	bottom:0em;
	z-index: 1;
	color: #fff;
}
.bottom-navigation{
	text-align: center; 
	display:none; 
	position: relative;
	padding: 4.88em 0em 2em 0em;
	box-sizing: border-box;
	
	width: 100%;
}
.bottom-navigation >div{
	display: inline-block;
	vertical-align: middle;
	color: #fff;
	position: relative;
	padding: 0em;
	box-sizing:border-box;
	width: auto;
}
.bottom-navigation .btn{
	width: 8em;
	box-sizing:border-box;
	background-color:#0460A9;
}
.bottom-navigation .btn.hover{background-color: #0083AE;}
.bottom-navigation .btn.disabled{background-color:#0460A9; opacity: 0.5;}
.bottom-navigation .page-counter{
	/*padding: 0em 1.5em;*/
	box-sizing: border-box;
	width: 65px;
	position: relative;
	text-align: center;
	
	left:0em;
}
.bottom-navigation .gap-div {width: 1em;
	height: 1em; float: none;}
.debug-screener{
	position: absolute;
	bottom: 10px;
	left: 350px;
	background-color: rgba(255,255,255,0.8);
	box-shadow: 0px 0px 5px #000;
	font-size:0.8em;
	z-index: 10000 !important;
	height: 2.5em;
}
.debug-screener *{
	-webkit-touch-callout:text;
	-webkit-user-select: text;  /* Chrome all / Safari all */
	-moz-user-select: text;     /* Firefox all */
	-ms-user-select: text;      /* IE 10+ */
	user-select: text; 
}

.debug-screener > *{
	display: inline-block;
	width: auto;
	vertical-align: middle;
	margin: 0.2em;
}
.debug-screener .txt{
	padding: 0.2em 0.5em;
}
.debug-screener input{padding: 0.2em 0.5em; width: 110px;}
.debug-screener .btn{
	min-width: 2em;
	height: auto;
	z-index: 1;
}
/* .menu-dropdown-panel{
	float: right;
	height: 100%;
	display: table;
	position: relative;
}
.dropdown-menu>li>a {
    word-wrap: normal;
    word-break: keep-all;
    white-space: normal;
}
.dropdown-menu>li>a {
    padding: 5px 20px;
    cursor: pointer;
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #00425E;
    outline: none;
}

.dropdown-menu{margin: 0em 2em; font-size: 1em; width: 250px; 
border-radius: 0em; box-sizing: border-box;}
.ie .dropdown-menu{width: 360px;}
.dropdown-menu .divider {
    margin: 0px 2px;
    width: calc(100% - 4px);
}
.dropdown-menu li{text-align: start;
list-style: none; margin: 0.28em 0em;}
 */
.screen-counter {position: relative;
	width: 60px;
	margin: 0em 0.5em;
	background: transparent;
	text-align: center;
}
.screen-counter .txt{
	font-size: 0.9em;
	text-shadow: 0px 0px 4px #fff;
}

.screen-counter.black{color: #616161;}
.screen-counter.white{color: #fff; }
.screen-counter.white .txt{text-shadow: 0px 0px 4px #000;}
.bottom-navigation{
	text-align: center; 
	display:none; 
	position: relative;
	padding: 4.0em 0em 2em 0em;
	box-sizing: border-box;
	
	width: 100%;
}
.bottom-navigation >div{
	display: inline-block;
	vertical-align: middle;
	color: #fff;
	position: relative;
	padding: 0em;
	box-sizing:border-box;
	width: 50%;
}

.bottom-navigation .btn{
	width: 100%;
	box-sizing:border-box;
	border-radius: 0px;
	height: 55px;
	border: none;
}
.bottom-navigation .btn.hover{background-color: #888;}
.bottom-navigation .btn .btn-icon{font-size:22px;}
.bottom-navigation .btn span:first-child{padding-inline-start:1em;}
.bottom-navigation .btn span:last-child{padding-inline-end:1em;}
.bottom-navigation .btn-next .btn-txt{text-align: end;}
.bottom-navigation .btn-back .btn-txt{text-align: start;}

.bottom-navigation .screen-counter{
	/*padding: 0em 1.5em;*/
	box-sizing: border-box;
	width: 65px;
	position: relative;
	text-align: center;
	
	left:0em;
}

.screen .screen-logo {
	width: 12.7em;
	position: relative;
}
.screen .screen-logo img{
	width: 10.7em;
	display: block;
	position: relative;
	top: 0em;
}

.footer-box{width: 100%;
height: 2em;
background-color: #FAC832;
position: relative;
max-width: 1014px;
margin: 0 auto; margin-top:5em;}


.screen .no-padding,
.screen .screen-panel.no-padding {
	padding:0em;
}
.screen .no-padding-top,
.screen .screen-panel.no-padding-top {
	padding-top:0em;
}
.screen .no-padding-bottom,
.screen .screen-panel.no-padding-bottom {
	padding-bottom:0em;
}
.screen .header-padding {
	padding-top: 4.71em;
}
.screen .full-height-panel {
	position: relative;
	height: auto;
}
.screen .screen-panel.full-width {
	max-width: 1014px;
	width: 100%;
}

.screen .screen-panel.full-width-panel {
	width: 100%;
	max-width: none;
	padding: 0.84em 0em;
}
.screen .side-margin {
	margin: 0em 4em;
	box-sizing: border-box;
}
.screen .screen-data {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0em;
	box-sizing: border-box;
	border-radius: 0em;
	overflow: auto;
	display: table;
	height: 100%;
}
.screen .screen-data.display-flex{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	
}
.screen .screen-data.height-auto {height: auto;}
.screen .screen-data.overflow-hidden {overflow: hidden;}
.screen .screen-data.overflow-auto {overflow: auto;}
.screen .screen-padding.full{padding: 50px 0px 0px 0px;}
.screen .screen-padding.full .screen-data {	width: 100%;}
.screen .screen-padding.no-padding-left{padding-inline-start: 0em;}
.screen .screen-padding.no-padding-right{padding-inline-end: 0em;}
.screen .screen-padding.no-padding-top{padding-top: 0em;}
.screen .screen-data .col-text,
.screen .screen-data .col-blank,
.screen .screen-data .col-img{
	min-height: 100%;
	display: table-cell;
	vertical-align: top;
}
.screen .screen-data .col-text,
.screen .screen-data .col-img,
.screen .pop-col,
.main-div > .screen-modal-pop .pop-col{
	display: table-cell;
	vertical-align: top;
}
.screen .screen-data .col-text,
.screen .pop-col-text,
.main-div > .screen-modal-pop .pop-col-text{
	width: 55%;	
	padding: 1.5em 1.5em 1.5em 1.5em;
	margin:0em;
	position: relative;
	background-color: #fff;
}
.screen .screen-data .col-text{
	background-color: transparent;
	padding:0em;
}
.screen .feedback-container .pop-col-text{
	display:block;
	background-color: #023761;
}
.screen .screen-data .col-text.trans-bg,
.screen .pop-col-text.trans-bg,
.main-div > .screen-modal-pop .pop-col-text.trans-bg{
	background-color: transparent;	
}
.screen .screen-data .col-text.white-alpha-bg,
.screen .pop-col-text.white-alpha-bg,
.main-div > .screen-modal-pop .pop-col-text.white-alpha-bg{
	background: rgba(255,255,255,0.9);	
}
.screen .screen-data .col-text.color-alpha-bg,
.screen .pop-col-text.color-alpha-bg,
.main-div > .screen-modal-pop .pop-col-text.color-alpha-bg{
	background: rgb(15,77,188);
	background: linear-gradient(90deg, rgba(15,77,188,0.9) 0%, rgba(0,169,224,0.9) 100%);
}
.col-blank{
	width:auto;
}
/* .screen .screen-data .col-text{
	padding: 0em 1.5em 0em 0em;
} */
.screen .screen-data .col-text.no-padding,
.screen .pop-col-text.no-padding,
.main-div > .screen-modal-pop .pop-col-text.no-padding{
	padding: 0em;
}
.screen .screen-data .col-text.no-padding-top,
.screen .pop-col-text.no-padding-top,
.main-div > .screen-modal-pop .pop-col-text.no-padding-top{
	padding-top: 0em;
}
.screen .pop-col-text{
	background-color: #5291DD;
}
.screen .screen-data .col-text.full,
.screen .screen-data .col-img.full,
.screen .pop-col.full,
.main-div > .screen-modal-pop .pop-col.full{
	width: 100%;	
	/* padding: 0em; */
}
.screen .screen-data .col-text.right,
.screen .pop-col.right,
.main-div > .screen-modal-pop .pop-col.right{
	float: right;
}
.screen .screen-data .col-img,
.screen .pop-col-img,
.main-div > .screen-modal-pop .pop-col-img{
	position: relative;
	width: auto;
	height: auto;
	top: 0em;
	min-height: 100%;
}
.screen .screen-data .col-img .text-block{
	position: absolute;
	bottom: 0em;
	background-color: rgba(0, 79, 159,0.9);
	color: #fff;
	padding: 2em 2em;
}
.screen .center-panel {
	background-color: rgba(80, 128, 182, 0.95);
	width: 65%;
	margin: 0em auto;
	text-align: center;
	padding: 1em;
	color: #fff;
	border-radius: 0.3em;
}
.screen .center-panel .instr-txt {
	color: #fff;
}
.global-modal-pop .instr-panel,
.screen .instr-panel{position: relative;margin: 1em 0em; color: #0460A9; }
.screen .instr-txt,
.screen .que-instr{color: #0460A9; }

.app-body .color-black,
.app-body .instr-panel.color-black,
.app-body .instr-txt.color-black{
	color: #000;
}
.app-body .color-white,
.app-body .instr-panel.color-white,
.app-body .instr-txt.color-white{
	color: #fff;
}
.background {
	background-size: cover;
	background-attachment: scroll;
	height: auto;
	width: 100%;
	position: relative;
	background-position: center;
	min-height: 100%;
	background-image: url("../../../../framework/images/blank.png");
	background-repeat: no-repeat;
	-webkit-transform:translate3d(0);
	transform:translate3d(0);
	

}
.screen-alpha-bg{
	position: absolute;
	width: 100%;
	height: 100%;
	transition: 200ms all ease-in;
}
.black-alpha-bg{background-color: rgba(0, 28, 43, 0.6);}
.black-alpha-bg-1{background-color: rgba(0, 0, 0, 0.2);}
.scroll-parent{
	position: relative;
	max-height: 480px;
	overflow: auto;
}
.scroll-parent.height-auto{
	height: auto;
	max-height: none;
}
.scroll-parent .scrollable{
	position: relative;
	height: auto;
	padding-inline-end: 15px;
}
.screen .col.col-10 {width: 10%;}
.screen .col.col-20 {width: 20%;}
.screen .col.col-30 {width: 30%;}
.screen .col.col-35 {width: 35%;}
.screen .col.col-40 {width: 40%;}
.screen .col.col-43 {width: 43%;}
.screen .col.col-45 {width: 45%;}
.screen .col.col-50 {width: 50%;}
.screen .col.col-54 {width: 54%;}
.screen .col.col-55 {width: 55%;}
.screen .col.col-60 {width: 60%;}
.screen .col.col-62 {width: 62%;}
.screen .col.col-65 {width: 65%;}
.screen .col.col-70 {width: 70%;}
.screen .col.col-75 {width: 70%;}
.screen .col.col-80 {width: 80%;}
.screen .col.col-85 {width: 85%;}
.screen .col.col-90 {width: 90%;}

.screen .border-line {
	position: relative;
	width: 80%;
	max-width: 600px;
	height: 0.13em;
	margin: 0.57em 0em 0.86em;	
	background: #fff;	
	left: -1.44em;
}
.screen .alpha-bg{z-index: 99; position: absolute;}

.screen .activity-pop{
    display: none;
    position: absolute;
    width: 100%;
    top: 5em;
    z-index: 21100;
}
.screen .activity-pop .activity-panel{
    margin: 5em auto 1em;
    width: 60%;
    background-color: rgba(80, 128, 182, 0.95);
    padding: 1.5em;
    color:#fff;
    border-radius: 0.3em;
    height: auto;
    min-height: 25em;
    text-align: start;
}

.screen .activity-pop .activity-panel .pop-title{
    font-size: 1.5em;
}
.screen .activity-pop .popup-content-box.with-img .ost-panel {
    color: #4C433D;
    display: inline-block;
    vertical-align: top;
    width: 60%;
    padding: 4em;
}
.screen .activity-pop .activity-panel .right-side-img{
    display: inline-block;
    vertical-align: top;
    margin: 4em 1em;
}
.screen .ani-box{ 
	position: absolute;
	top: 0em;
	width: 100%;
	height: 100%;
}
.screen-line-spacer {
    position: relative;
    width: 100%;
    height: 0.06em;
    box-sizing: border-box;
    padding: 0em 0em;
    margin: 1em 0em;
}
.screen-line-spacer span {
    background-color: #707070;
    width: 100%;
    height: 100%;
    display: block;
}
.app-body .popup{display: none;}
.app-body .popup:not(.screen-modal-pop){
    display:none; 
    position: relative;
    background-color:rgba(80, 128, 182, 0.95);
    color:#fff;
    width: 100%;
    margin: 1.5em;
    box-sizing: border-box;

}
.app-body .modal-box{width:90%; max-width: 750px;}
.app-body .screen-modal-pop.magnify-pop .modal-box{max-width: 870px;}
.app-body .screen-modal-pop.magnify-pop .popup-content-box,
.app-body .screen-modal-pop.magnify-pop .pop-col-text{display: block;}

.app-body .screen-modal-pop.magnify-pop .svg-img-box{min-width: 600px; margin: 0 auto;}

.app-body .global-modal-pop .modal-box{width:auto;}
.app-body .popup .popup-titlebar{
	background-color: #5291DD;
    min-height: 3.5em;
	color:#fff;
	position: relative;
	top: 0em;
	width: 100%;
	height: auto;
	z-index: 22;
}
.app-body .popup .close-popup-btn{
	position: relative;
    background-color: transparent;

}
.global-modal-pop .close-modal-btn.hover,
.app-body .popup .close-popup-btn.hover{
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
.global-modal-pop .close-modal-btn.with-txt,
.app-body .popup .close-popup-btn.with-txt{font-size: 1.0em; width: 120px; margin: 1.2em 0.5em;}
.global-modal-pop .close-modal-btn.with-txt .btn-txt,
.app-body .popup .close-popup-btn.with-txt .btn-txt{font-size: 1em; padding: 0em 0.2em;}
.global-modal-pop .close-modal-btn.with-txt .font-icon,
.app-body .popup .close-popup-btn.with-txt .font-icon{ font-size: 1em; transition: all 200ms ease-out; padding: 0em 0.2em;}
.global-modal-pop .close-modal-btn.with-txt.hover,
.app-body .popup .close-popup-btn.with-txt.hover{
    -webkit-transform: none;
	-ms-transform: none;
	transform: none;
}
.global-modal-pop .close-modal-btn.with-txt.hover .font-icon,
.app-body .popup .close-popup-btn.with-txt.hover .font-icon{
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.app-body .popup .popup-content-box .close-popup-btn.with-txt{font-size: 1.0em; float: none; width: 110px;}
.app-body .popup .popup-content-box .close-popup-btn.with-txt.size-3{font-size: 1.0em; float: none; width: 180px;}
.app-body .popup .pop-title {
	padding: 0.75em 3em 0.75em 0.86em;
	position: relative;
	display: block;
	font-size: 1.2em;
	
}
.app-body .popup .pop-title .icon {
	padding-inline-end: 0.3em;
	font-size: 1.5em;
}
.app-body .popup .popup-content-box{
	position: relative; 
	display: block;
	width: 102%;
	height: 100%;}
.app-body .popup .popup-content-box.display-table{display: table;}
.app-body .popup .popup-content-box .titlebar-space{padding-top:3.55em;}
.app-body .popup .pop-col{padding: 0em; height: auto;}

.app-body .popup .pop-col.padding-left{padding-inline-start: 1.5em;}
.app-body .popup .pop-col.padding-right{padding-inline-end: 1.5em;}
.app-body .popup.screen-modal-pop .pop-col-text{min-height: auto;
	padding: 1.5em 1.5em; display: block;}
.app-body .popup .pop-col-img{position: relative; min-height: 100%; height: auto; width: auto;} 
.app-body .popup .popup-content-box.display-table .pop-col{display: table-cell;}
.app-body .popup .text-box{padding: 1.5em;}

.app-body .desktop{	display:block;}
.app-body .desktop.display-cell{display:table-cell;}
.app-body .mobile{
	display:none !important;
}
.app-body .line-spacer {
    position: relative;
    width: 100%;
    height: 0.09em;
    box-sizing: border-box;
    padding: 0em 2em;
	margin: 2em 0em;
}
.app-body .line-spacer .line {
    background-color: #4C433D;
    width: 100%;
    height: 100%;
    display: block;
}
a.web-link{color:#0460A9; text-decoration: underline;}
a.web-link.white{color: #fff;}
a.web-link:hover{color:#023761;}
a.web-link.white:hover{color:#5291DD;}
.system-fail-msg .bold {
	font-weight: bold;
}
.system-fail-msg{

position: fixed;
width: 100%;
height: 100%;
padding:0.57em;
box-sizing: border-box;
overflow: auto;
}
.system-fail-msg .panel{position: relative;max-width: 600px;margin: 0 auto;}
.system-fail-msg .display-cell{text-align: start; }
.system-fail-msg .right-panel {width: 11.82em;padding-inline-start: 1.73em; vertical-align: top;}
.svg-img-icon{
	width: 1.03em;
	height: 1.03em;
	background-repeat: no-repeat;
	background-color: transparent;
}
.screen .complete-instr{display:none;}

.screen .screen-instruction.display-none{display:none !important;}
.screen .screen-instruction.display-inlineblock{display:inline-block !important;}

.screen .screen-l-r-padding{padding-inline-start: 4.5em; padding-inline-end: 4.5em;}
.screen .screen-left-padding{padding-inline-start: 4.5em; }
.screen .screen-right-padding{padding-inline-end: 4.5em;}

.screen-instr-txt.mobile-instr{display: none;}
.screen-instr-txt.desktop-instr{display: block;}
:-webkit-full-screen {
  background-color: #000;
}

/* Firefox syntax */
:-moz-full-screen {
  background-color: #000;
}

/* IE/Edge syntax */
:-ms-fullscreen {
  background-color: #000;
}

/* Standard syntax */
:fullscreen {
  background-color: #000;
}

.bottom-navigation .gap-div {
	width: 1px;
	height: 1px; 
	float: none;
}

.font-icon.icon-video{font-size: 1.1em;}
.flex-panel{
	display: flex;
	align-items: center;
	height: 100%;
	position: relative;
	align-content: center;
	justify-content: space-between;
	padding: 1.5em;
}
.flex-panel .flex-box{
	flex-grow: 1; 
	flex-basis: 0; 
	align-self:center;
}
body.responsive{
	overflow-x: hidden;
	overflow-y: auto;
	font-size: 14px;
}
body.modal-open{
	overflow: hidden;
}
.responsive .app-body{
	border: none;
	width: 100%;
	height: 100%;
	overflow: initial;
}
.blinkNext {
	-webkit-animation-name: blinkNext;
	-ms-animation-name: blinkNext;
	animation-name: blinkNext;

	-webkit-animation-duration: 2s;
	-ms-animation-duration: 2s;
	animation-duration: 2s;

	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;

	-webkit-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	animation-iteration-count: infinite;

	-webkit-animation-direction:alternate;
	-ms-animation-direction:alternate;
	animation-direction:alternate;

	-webkit-transition-timing-function: linear;
	-ms-transition-timing-function: linear;
	transition-timing-function: linear;
}
.blinkNext.ani-fast{
	-webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
}
@-webkit-keyframes blinkNext {
	0% {
		-webkit-transform: translate3d(-10%, 0, 0);
		-ms-transform: translate3d(-10%, 0, 0);
		transform: translate3d(-10%, 0, 0);	 
	}
	
	100% {
		-webkit-transform: translate3d(10%, 0, 0);
		-ms-transform: translate3d(10%, 0, 0);
		transform: translate3d(10%, 0, 0);
	}
}
@-ms-keyframes blinkNext {
	0% {
		-webkit-transform: translate3d(-10%, 0, 0);
		-ms-transform: translate3d(-10%, 0, 0);
		transform: translate3d(-10%, 0, 0);	 
	}
	
	100% {
		-webkit-transform: translate3d(10%, 0, 0);
		-ms-transform: translate3d(10%, 0, 0);
		transform: translate3d(10%, 0, 0);
	}
}
@-keyframes blinkNext {
	0% {
		-webkit-transform: translate3d(-10%, 0, 0);
		-ms-transform: translate3d(-10%, 0, 0);
		transform: translate3d(-10%, 0, 0);	 
	}
	
	100% {
		-webkit-transform: translate3d(10%, 0, 0);
		-ms-transform: translate3d(10%, 0, 0);
		transform: translate3d(10%, 0, 0);
	}
}
/* assessment-result-pop common css start */
.app-body .screen-modal-pop.assessment-result-pop .modal-box{max-width: 870px;}
.app-body .screen-modal-pop.assessment-result-pop .screen-title-div .title{color:#023761;}

.app-body .screen-modal-pop.assessment-result-pop .question-div {margin-top: 3em;}
.app-body .screen-modal-pop.assessment-result-pop .question-div:first-child {margin-top: 0em;}
.app-body .screen-modal-pop.assessment-result-pop .question {margin-top: 0em;}
.app-body .screen-modal-pop.assessment-result-pop .question .instr-txt,
.app-body .screen-modal-pop.assessment-result-pop .question .que-instr{display: none;}
.app-body .screen-modal-pop.assessment-result-pop .question .que-txt-panel{margin-top: 0.5em;}
.app-body .screen-modal-pop.assessment-result-pop .question.image-option,
.app-body .screen-modal-pop.assessment-result-pop .question .que-options {min-height: auto;}
.app-body .screen-modal-pop.assessment-result-pop .question.image-option .que-options {margin: 0em auto;}
/* assessment-result-pop common css end */
/* --Common screens start-- */

.uppercase{text-transform: uppercase;}
.assessment-result-screen .bottom-btn-panel{margin-top: 2em;}

.certificate-screen .logo-div{
	margin: 0em;
	position: relative;
	text-align: end;
	width: 100%;
	display: block;
	max-width: none;
	margin-bottom: 6em;
}
.certificate-screen .logo-div .logo{width: 120px; margin-bottom: 1em;}
.certificate-screen .center-box{
	position: relative;
	text-align: start;
	width: 100%;
	
}
.certificate-screen .center-box .large-font{
	font-size: 1.78em;
}
.certificate-screen .center-box .title{
	font-size: 2em;
	color: #627D77;
	text-transform: uppercase;
	margin-bottom: 0em;
	line-height: 1.2;
	letter-spacing: 2.4px;
}
.certificate-screen .center-box .logo-div .line{position: relative;
	width: 28%;
	height: 0.15em;
	background-color: #627D77;
	margin: 0.5em 0em 0.5em 72%;
}
.certificate-screen .center-box .student-name,
.certificate-screen .center-box .course-title{font-size: 2em; margin-bottom: 0.2em;}
.certificate-screen .center-box .course-title{width: 65%;}

.certificate-screen .print-btn-panel,
.certificate-screen .download-btn-panel{margin: 3em 1em 1em;}
.certificate-screen .print-btn-panel{margin-inline-start: 0em;}

.flag-panel{
	position: absolute;
	right: 0.5em;
	top: 1.0em;
	width: 22%;
}
.col-img .flag-panel{width: 90%;}
.inline-qz-point-panel{
	position: relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	align-items: center;
}
.inline-qz-point-panel .q-div{
	position: relative;
	padding: 0.5em;
}
.inline-qz-point-panel .q-div .flag{width:2.5em}

.inline-qz-point-panel .q-div .status-div{
	position: absolute;
	top: 60px;
	text-align: center;
	right: 10px;
	width: 30px;
	color: #fff;
}
.header .nav-mobile{display: none;}
.show-on-print{display: none;}

.custom-scroll::-webkit-scrollbar,
.scroll-parent::-webkit-scrollbar {
	width: 6px;
}

.firefox .custom-scroll,
.firefox .scroll-parent {
	scrollbar-width: 6px;
	scrollbar-color: #4E8FC2 #CFD8DC;
}
.firefox .custom-scroll.color-1,
.firefox .scroll-parent.color-1 {
	scrollbar-width: 6px;
	scrollbar-color: #fff #CFD8DC;
}
/* width */
.custom-scroll::-webkit-scrollbar,
.scroll-parent::-webkit-scrollbar {
	width: 6px;
	height: 5px;
}
  
  /* Track */
.custom-scroll::-webkit-scrollbar-track,
.scroll-parent::-webkit-scrollbar-track {
	background: #FFF; 
	border-radius: 6px;
}
   
  /* Handle */
.custom-scroll::-webkit-scrollbar-thumb,
.scroll-parent::-webkit-scrollbar-thumb {
	background: #4E8FC2; 
	border-radius: 6px;
}
.custom-scroll.color-1::-webkit-scrollbar-thumb,
.scroll-parent.color-1::-webkit-scrollbar-thumb {
	background: #fff; 
	border-radius: 6px;
}
   /* arrows */

.custom-scroll::-webkit-scrollbar-button,
.scroll-parent::-webkit-scrollbar-button {
	display: none;
}
  /* Handle on hover */
.custom-scroll::-webkit-scrollbar-thumb:hover,
.scroll-parent::-webkit-scrollbar-thumb:hover {
	background: #4E8FC2; 
}
.disabled-patch{
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: default;
	top: 0em;
	left: 0em;
	display: block;
	z-index: 99;
}

@page {
	size: A4 landscape;
}
/* @page {
	size: A4 portrait;
} */
@media print {
	* {
        color-adjust: exact;
		-webkit-print-color-adjust: exact;
    }
	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 15px;
		overflow:visible;
		
	}
	body,
	.app-body{overflow:visible;
		transform: none !important;
		top:0px;
		left: 0px;	
	}
	strong {
		font-family: Arial, Helvetica, sans-serif;
		font-weight:bold;
	}
	i {
		font-family: Arial, Helvetica, sans-serif;
		font-style:italic;
	}
	strong i,
	i strong {
		font-family: Arial, Helvetica, sans-serif;
		font-style:italic;
		font-weight:bold;
	}
	.show-on-print{display: block;}
	.hide-on-print,
	.print-btn,
	.download-btn{
		display: none;
	}
	.app-body{border: none; background-color: #fff;}
	
	#debug-screener,
	.print-btn-panel{display: none;}

	.header,
	#side-navigation,
	#footer,
	.print-btn-panel{display: none;}
}
/* --Common screens end-- */
/* --mediaQuery Start-- */