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

.title{
	font-size: 50px;  /* change for 1_1_20 title */
	font-family: 'swissReSansOtLight', sans-serif, Arial, Helvetica;
	font-weight: normal;
	margin-bottom: 25px;
	
}
.sub-title,
.modal-title,
.pop-title{
	font-size: 40px; 
	font-family: 'swissReSansOtLight', sans-serif, Arial, Helvetica;
	font-weight: normal;
	/* letter-spacing: 1.8px; */
	margin-bottom: 25px;
}
.color1{color:#FA8CFF}
.color2{color:#D241C8}
.color-white {color: #fff;}
.color-black {color: #000;}
.color-green {color: #8FE376;}
.color-red {color: #FF8383;}
.color-yellow {color: #FAC832;}

strong,
.strong,
.bold,
.system-fail-msg strong,
.system-fail-msg .bold {
	font-weight: normal;
	font-family: 'SwissReSansOtBold', sans-serif, Arial, Helvetica;
}
i, .italic {	
	font-family: 'swissReSansOtItalic', sans-serif, Arial, Helvetica;
}
strong i,
.strong i,
.bold i,
i strong,
i .strong,
i .bold {		
	font-style:normal;
	font-weight: normal;
	font-family: 'swissReSansOtBoldItalic', sans-serif, Arial, Helvetica;
}

.font-0{	
	font-weight: normal;
	font-family: 'swissReSansOtRegular', sans-serif, Arial, Helvetica;
}
.font-light {
	font-weight: normal;
	font-family: 'swissReSansOtLight', sans-serif, Arial, Helvetica;
}

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:2px solid #fff;
	box-sizing:border-box;
	position: relative;
	padding: 0.5em 1em;
	color: #fff;
	background-color:#000;
}
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 #001c4a;
	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:#001c4a;
	box-sizing: border-box;*/
	word-break: break-all;
	color:#001c4a;
	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: left;
}
.display-block.left{text-align: left;}
.display-block.right{text-align: right;}
.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: left;
}
.display-cell.center {
	text-align: center;
}
.display-cell.right {
	text-align: right;
}
.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: left;
}
.visibility-hidden {
	visibility: hidden;
}
.visibility-visible {
	visibility: visible;
}
u {
	text-decoration: underline;
}
p {
	margin-bottom: 1em;
}
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-left: 1em;}
.margin-right {margin-right: 1em;}

.small-margin {margin: 0.5em;}
.small-margin-bottom {margin-bottom: 0.5em;}
.small-margin-top {margin-top: 0.5em;}
.small-margin-left {margin-left: 0.5em;}
.small-margin-right {margin-right: 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-left: 1.5em;}
.medium-margin-right {margin-right: 1.5em;}

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

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

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

.small-padding {padding: 0.5em;}
.small-padding-bottom {padding-bottom: 0.5em;}
.small-padding-top {padding-top: 0.5em;}
.small-padding-left {padding-left: 0.5em;}
.small-padding-right {padding-right: 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-left: 1.5em;}
.medium-padding-right {padding-right: 1.5em;}

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

.no-padding {padding: 0em;}
.no-padding-bottom {padding-bottom: 0em;}
.no-padding-top {padding-top: 0em;}
.no-padding-left {padding-left: 0em;}
.no-padding-right {padding-right: 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-left: 1.15em;list-style: decimal;margin-bottom: 0.28em;}
ul li,
ol ul li{margin-left: 1.15em;list-style: disc;margin-bottom: 0.28em;}


 /* 2 bullets with custom color */
/* ul {list-style: none}
ul li::before {
	content: "•"; 
	color:#001c4a;
	display: inline-block; width: 1em;
	margin-left: -1em
}
ol {list-style: none; counter-reset: li}
ol li::before {
	content: counter(li); color:#001c4a;
	display: inline-block; width: 1em;
	margin-left: -1em
}
ol li {counter-increment: li}
ol li {margin-left: 0.2em; margin-bottom: 0.5em;}
ul li,
ol ul li{margin-left: 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: 2028px;
	height: 1368px;
	background-color: #000;
	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% - 0px);
	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: 150px 130px 100px 130px;
	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: #000;}
.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: #000;	
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.header.trans-bg {box-shadow: none;}
.header.trans-bg .navigation-panel .title-panel{width: 100%;}
.header .navigation-panel{padding: 0em 1.5em; height: 88px;}
.header .navigation-panel .flex-div{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
}
.header .navigation-panel .title-block{
	/* position: relative;
	width: auto;
	max-width: 40%; */
	position: absolute;
	width: 900px;
	left: 0px;
	right: 0px;
	margin: 0 auto;
	text-align: center;
}
.header .navigation-panel .title-block .title{font-size: 34px; color: #fff; margin: 0px;}
.header .navigation-panel .logo-block{
	position: relative; 
	width: 200px;	
}
.header .navigation-panel .nav-block{
	position: relative;
	width: auto;
	display: inline-flex;
	align-items: center;
	flex-flow: row wrap;
	justify-content: flex-end;
}
.header .navigation-panel .btn-panel {
	padding: 0em 0em; 
	padding-inline-start: 15px;
	width: auto; 
	min-width: auto; 
	min-width: auto;
	min-height: auto;
}

.header .btn-panel.progress-cell .btn {cursor: default;}
.header .btn-panel .btn{
	min-width: auto;
	width: 56px;
	padding: 0em;
	height: 56px;
	color: #FA8CFF;
	border-radius: 0%;
	background-color: transparent;
	
}

.header .progress-cell .btn-txt{ font-size: 19px; }
.header .btn-panel .btn .btn-txt{ font-size: 19px; }
.header .btn-panel .btn .btn-icon{font-size: 40px;}

.header .btn-panel .btn.exit-btn { margin-right: 0px; }
.header .btn-panel .btn.hover{
	background-color: transparent;
	color: #fff;
}

.header .btn-panel .btn.hover .btn-icon,
.header .btn-panel .btn.hover .btn-txt {
	color: #fff;
}

/* .header .btn-panel .home-btn.type-1{
	width: 30px; height: 30px;
} */

.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{
	width: 100%;
	z-index: 1;
	bottom: 0px;
	position: absolute;
	right: 0px;

}
.footer .nav-btn-panel{
	position: relative;
	display: flex;	
	top: 0em;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;

}
.footer .nav-btn-panel .btn{
	min-width: auto;
	width: 58px;
	height: 58px;
	margin-left: 0em;
	border-radius: 50%;
}
.footer .nav-btn-panel .btn-next{}

.footer .img-baner{
	position: relative;
	width: 456px;
	height: auto;
	margin: 28px auto;
	text-align: center;
}

.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:#001c4a;
    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.6);
	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.9);
	padding: 1.8em;
	box-sizing: border-box;
	width: 100%;
	border-radius: 0em;
	/* border: 0.1em solid #C6C6C6; */
}
.white-bg {
	position: relative;
	background: #fff;
	padding: 1.8em;
	box-sizing: border-box;
	width: 100%;
	border-radius: 0em;
}
.black-bg {
	position: relative;
	background: #000000;
	padding: 1.8em;
	box-sizing: border-box;
	width: 100%;
	border-radius: 0em;
}
.white-alpha-bg-border {
	display: flex;
    flex-direction: column;
    align-items: center;
	position: relative;
	background: transparent;
	padding: 1em;
	box-sizing: border-box;
	width: 100%;
	border-radius: 0em;
}
.white-alpha-bg-border.small-padding {padding: 1em;}
.white-transparent-border {
	background-color: rgba(255, 255, 255, 0.9);
    position: relative;
    padding: 1em;
    border: 2px solid #001c4a;
}
.white-alpha-bg-border .pop-title{
	padding: 0em;
	text-align: center;
	margin: 0.8em auto;
}
.color-alpha-bg {
	position: relative;
	background-color: rgba(82, 145, 221, 0.8);
	padding: 2em;
	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 1.5em;
}
.white-alpha-bg.large-padding,
.white-bg.large-padding,
.color-alpha-bg.large-padding{
	padding: 2em 2em;
}

.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: 220px;
	height: 70px;
	color: #3C4150;	
	box-sizing: border-box;
	background-color:#fff;
	padding: 0.3em 0.5em;
	display: table;
	border: none;
	font-weight: inherit;
	font-size: 30px;
	line-height: normal;
	white-space: normal;
	border-radius: 0px;
	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 */
.btn.color-1{
	background-color: #D241C8;
	color: #fff;
}
.visibility-hidden .btn,
.btn.visibility-hidden{transition:none;}
.btn.with-radius,
.modal-btn.with-radius .ui-button {
	border-radius: 35px;
	border: 2px solid #fff;
}

.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; line-height: 1;}
.btn-panel.circle .btn{
	background-color:#D241C8;
	color: #fff;
}
.btn-panel.border-btn .btn{
	background-color: transparent;
	border:0.1em solid #fff;
}
.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;
	border: none;
}
.circle.btn{
	min-width: auto;
	font-size: 1.1em;
	width: 36px;
	padding: 0em;
	height: 36px;
	color: #fff;
	border-radius: 50%;
	background-color: #D241C8;
}
.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; width: 0px;}
.header .nav-desktop .btn-icon-row {
    display: flex;
    flex-direction: column;
    height: 44px;
    justify-content: space-between;
}
.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: 0em;background-color: #e5e5e5a1;}
.header .navbar-nav.mob-dropdown > li > a{color:#fff;}
.header .navbar-nav.mob-dropdown {
	position: absolute;
	right: 0em;
	padding: 0em 0em;
	top:0px;
}
.header .navbar-nav.mob-dropdown .dropdown-btn{
    width: 2em;
    padding: 0.4em;
    min-width: auto;
    text-align: center;
    display: table;
    position: absolute;
    right: 0em;
	margin: 0em;
	background-color: transparent;
	color:#FA8CFF;
}


.header .navbar-nav > .dropdown.open > a, 
.header .navbar-nav > .dropdown.open > a:focus{
    background-color:#D241C8;
    color: #fff;
    outline: none;
}
.header .navbar-nav.mob-dropdown  .open .dropdown-btn,
.header .navbar-nav.mob-dropdown .dropdown-btn.hover{
	background-color: transparent;
	color:#fff;
}
.navbar-nav .main-dd.dropdown-menu{
	transition: all 500ms ease-out;
}
.dropdown-menu .dropdown-menu-header {
	display: flex;
	justify-content: space-between;
	padding: 0 0em;
	align-items: center;
	margin-bottom: 1em;
	color: #FA8CFF;
}
.dropdown-menu .dropdown-menu-header .menu-title {font-size: 26px;}
.dropdown-menu .dropdown-menu-header .img-cell {cursor: pointer; font-size: 30px;}

.navbar-nav .open .dropdown-menu{
    width: 250px;
    background-color: #000;
    min-width: auto;
    box-sizing: border-box;
    position: absolute;
    top: 70px;
    border-radius: 0em;
    color:#fff;
	padding: 15px 20px;
	border: 2px solid #fff;
	z-index: 9999;
		
}
.navbar-nav .open .dropdown-menu .btn-panel{
	min-height: auto;
	width: 100%;
	padding-inline-start: 0px;
}
.navbar-nav .open .dropdown-menu .btn{
    border-color:#D241C8;
    color:#fff;
	width: 100%;
	font-size: 1.2em;
	justify-content: flex-start;
	display: table;
	height: 45px;
}
.navbar-nav .open .dropdown-menu .btn .img-cell{width: 40px; padding-left: 0.5em;}
.navbar-nav .open .dropdown-menu .btn .btn-txt{ text-align: left;}
.navbar-nav .open .dropdown-menu .btn .btn-icon{ font-size: 24px;}

.navbar-nav .open .dropdown-menu .exit-btn .img-cell{width: 42px; padding-left: 0.8em;}

.navbar-nav .open .dropdown-menu .btn.hover{
    background-color:#D241C8;
	color: #fff;
}
.navbar-nav .open .dropdown-menu .btn.hover .btn-icon,
.navbar-nav .open .dropdown-menu .btn.hover .btn-txt {
	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: #D241C8;
    outline: none;
}
.mobile-titlebar{
	position: relative; 
	width:100%; 
	background-color: #D241C8;
	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-back .btn-icon{font-size: 1.0em; z-index: 1;}
.btn-next .btn-icon{font-size: 1.0em; z-index: 1;}

.btn.icon-only .btn-icon{font-size: 2em;}
.common .btn .btn-txt{
	vertical-align: middle;
	text-align:left;
}
.common .btn .btn-icon{
	vertical-align: bottom;
	text-align:right;
}
.common .btn .btn-icon.extra-icon{
	vertical-align: middle;
	padding-left: 0.5em;
	text-align:left;
}
.header .exit-div .btn .btn-icon{font-size: 1.0em; }
.header .exit-div .btn{
	background-color:#D241C8;
	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:#D241C8;
    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:#D241C8; 
	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:#E5E5E5;
	font-size: 1em;
}
.font-icon.triangle-bottom{
	position: absolute;
	bottom: -26px;
	left: 0px;
	color: #E5E5E5;
	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:#E5E5E5;
	font-size: 1em;
}
.font-icon.triangle-left{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: -14px;
	color: #e5e5e5;
	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: -8px;
	right: 0px;
	margin: 0 auto;
	top: auto;
	bottom: 110px;
}
.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-right: 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-right: 50px solid #D241C8;
	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-left: 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-left: 50px solid #D241C8;
	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 #E5E5E5;
	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 #E5E5E5;
	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 #E5E5E5;
	border-left: 20px solid transparent;
	left: 4px;	
	right: auto;    
    bottom: auto;
	top:-2px;
}
.css-triangle.bottom:before {
	border: none;
	border-right: 34px solid transparent;
	border-top: 50px solid #E5E5E5;
	border-left: 34px solid transparent;
	left: -10px;	
	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:#D241C8;
	background-clip: border-box;
	color: #fff;
}
.btn-panel.circle .btn.hover{
	background-color:#D241C8;
	color: #fff;
}
.clickable.current .btn,
.btn.current{
	background-color:#D241C8;
	color: #fff;
}

.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:#D241C8;
	background: linear-gradient(90deg,  rgba(0,169,224,1) 0%, rgba(0,169,224,1) 100%);
}
.btn-panel.border-btn .btn.hover{
	background-color: #D241C8;
	border-color:#fff;
	color:#fff;
}
.btn.btn.with-radius.hover {
	background-color: #D241C8;
	border-color: #fff;
	color: #fff;
}
.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;
	color: #000;
}
.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: #D241C8; }
.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:#001c4a; */
opacity: 0.5;
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.6);
    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: 2028px;
	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: #000000;    
    border-radius: 0px;
	border: 2px solid #fff;
    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: left; min-height: 4em;}
.side-navigation{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	max-width: 2028px;
	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: 84px;
		height: 118px;
		top: 50%;
		-ms-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
}
.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%;
	background-color: #fff;
	color: #D241C8;
	
}
.side-navigation .btn-panel.back .btn{border-radius: 0px 12px 12px 0px;}
.side-navigation .btn-panel.next .btn{border-radius: 12px 0px 0px 12px;}
.side-navigation .btn-panel .btn .btn-icon{font-size: 40px; transition: all 200ms ease-out;}
.side-navigation .btn-panel.next .btn.hover{
	color:#fff;
	background-color: #D241C8; 	
}
.side-navigation .btn-panel.back .btn.hover{
	color:#fff;
	background-color: #D241C8; 
}
.side-navigation .screen-counter{
	position: fixed;
	padding: 0.86em;
	bottom:0em;
	z-index: 1;
	color: #fff;
}

.debug-screener{
	position: absolute;
	bottom: 10px;
	left: 10px;
	background-color: rgba(0,0,0,0.8);
	box-shadow: 0px 0px 5px #fff;
	font-size:0.8em;
	z-index: 10000 !important;
	min-height: 3.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: 210px;}
.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: left;
list-style: none; margin: 0.28em 0em;}
 */
.screen-counter {position: relative;
	width: 80px	;
	margin: 0em 0.5em;
	color: #fff;
	background-color: transparent;
	text-align: center;
}
.screen-counter .txt{font-size: 20px; font-style: italic;}

.screen-counter.black{
	color: #000;
}
.bottom-navigation{
	text-align: center; 
	display:none; 
	position: relative;
	padding: 2.0em 1em 1em 1em;
	box-sizing: border-box;
	
	width: 100%;
}
.bottom-navigation .btn-block{
	display: flex;	
	position: relative;
	padding: 0em;
	justify-content: space-between;
	align-items: center;
	min-width: auto;	
}

.bottom-navigation .btn{
	width: 58px;
	box-sizing: border-box;
	border-radius: 50%;
	height: 58px;
	border: none;
	position: relative;
	min-width: auto;
	color: #FA8CFF;
}
.bottom-navigation .btn.hover{color: #fff;}
.bottom-navigation .btn .btn-icon{font-size:22px;}

.bottom-navigation .btn-next .btn-txt{text-align: right;}
.bottom-navigation .btn-back .btn-txt{text-align: left;}

.bottom-navigation .screen-counter{
	/*padding: 0em 1.5em;*/
	box-sizing: border-box;
	width: 65px;
	position: relative;
	text-align: center;
	
	left:0em;
}
.bottom-navigation .img-baner{
	position: relative;
	width: 50%;
	min-width: 250px;
	margin: 30px auto;
}

.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: 2028px;
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: 2028px;
	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: 70px 0px 0px 0px;}
.screen .screen-padding.full .screen-data {	width: 100%;}
.screen .screen-padding.no-padding-left{padding-left: 0em;}
.screen .screen-padding.no-padding-right{padding-right: 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: transparent;
}
.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: #5291DD; }

.instr-txt,
.screen .instr-txt,
.screen .que-instr{
	color: #fff; 
}

.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: 922px;
	overflow: auto;
}
.scroll-parent.height-auto{
	height: auto;
	max-height: none;
}
.scroll-parent .scrollable{
	position: relative;
	height: auto;
	padding-right: 1em;
}
.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-45 {width: 45%;}
.screen .col.col-50 {width: 50%;}
.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: left;
}

.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(255, 255,255, 1);
	border: 3px solid #001c4a;
	border-radius: 20px;
	padding: 50px;
	color: #000;   
    width: 100%;
    margin: 1.5em;
    box-sizing: border-box;

}
.app-body .popup:not(.screen-modal-pop) .instr-txt{color: #001c4a;}
.app-body .modal-box{width:90%; max-width: 1580px;}
.app-body .screen-modal-pop.magnify-pop .modal-box{max-width: 1580px;}
.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: transparent;
	position: relative;
	top: 0em;
	width: 100%;
	height: auto;
	z-index: 22;
	color: #FA8CFF;
    min-height: 105px;
    border-bottom: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 50px;
}
.app-body .popup .close-popup-btn{
	position: relative;
    background-color: transparent;
	color: #FA8CFF;
	padding: 0px;
	float: none;
}
.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: auto; margin: 0; padding: 30px 50px;}
.global-modal-pop .close-modal-btn.with-txt .btn-txt,
.app-body .popup .close-popup-btn.with-txt .btn-txt{font-size: 1em; padding: 0px 5px 4px 5px;}
.global-modal-pop .close-modal-btn.with-txt .font-icon,
.app-body .popup .close-popup-btn.with-txt .font-icon{ font-size: 0.9em; 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 {	
	position: relative;	
	margin-bottom: 0px;
    /* border-bottom: 2px solid #ccc; */
	max-width: 80%;
}
.app-body .popup .pop-title .icon {
	padding-right: 0.3em;
	font-size: 1.5em;
}
.app-body .popup .popup-content-box{
	position: relative; 
	display: block;
	width: 100%;
	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-left: 1.5em;}
.app-body .popup .pop-col.padding-right{padding-right: 1.5em;}
.app-body .popup.screen-modal-pop .pop-col-text{min-height: auto; padding: 50px; display: block; background-color: #000;}
.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:#FA8CFF; text-decoration: underline;}
a.web-link.white{color: #fff;}
a.web-link:hover{color:#fff;}

.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: left; }
.system-fail-msg .right-panel {width: 11.82em;padding-left: 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-left: 4.5em; padding-right: 4.5em;}
.screen .screen-left-padding{padding-left: 4.5em; }
.screen .screen-right-padding{padding-right: 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: 19px;
}
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:#a8d5ff;}

.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: right;
	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: left;
	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-left: 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: 12px;
}

.firefox .custom-scroll,
.firefox .scroll-parent {
	scrollbar-width: 12px;
	scrollbar-color: #D241C8 #CFD8DC;
}
.firefox .custom-scroll.color-1,
.firefox .scroll-parent.color-1 {
	scrollbar-width: 12px;
	scrollbar-color: #fff #CFD8DC;
}
/* width */
.custom-scroll::-webkit-scrollbar,
.scroll-parent::-webkit-scrollbar {
	width: 12px;
	height: 5px;
}
  
  /* Track */
.custom-scroll::-webkit-scrollbar-track,
.scroll-parent::-webkit-scrollbar-track {
	background: #CFD8DC; 
	border-radius:10px;
}
   
  /* Handle */
.custom-scroll::-webkit-scrollbar-thumb,
.scroll-parent::-webkit-scrollbar-thumb {
	background: #D241C8; 
	border-radius: 10px;
}
.custom-scroll.color-1::-webkit-scrollbar-thumb,
.scroll-parent.color-1::-webkit-scrollbar-thumb {
	background: #fff; 
	border-radius: 10px;
}
   /* 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: #FA8CFF; 
}
.disabled-patch{
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: default;
	top: 0em;
	left: 0em;
	display: block;
	z-index: 99;
}
.float-clear {
	clear: both;
}
@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,
	#debug-screener,
	#footer,
	.print-btn-panel{display: none;}
	/* edge certificate get cut */
	.chrome #screen_certificate .bg-img{width: 77%;}
	.chrome #screen_certificate .screen-data .col-img1 .text-box{width: 1060px; left: 700px;}
}
/* .main-div > .plyr--video{position: absolute; width: 100%; top: 0px; left: 0px;} */
/* --Common screens end-- */
/* --mediaQuery Start-- */
@media screen and (max-width: 834px) {
	html, body {
		background-color: #000;
	}
	.title {
		font-size: 36px; /* change */
		margin-bottom: 15px;
	}
	.white-bg-title { font-size: 20px; line-height: 20px; }
	.main-div > .plyr--video{position: relative; width: 100%; height: auto; top: 0px; left: 0px;}
	.sub-title,
	.pop-title,
	.modal-title {
		font-size: 30px; 
		margin-bottom: 15px;		
	}
	.mobile-strong,
	.mobile-bold {
		font-weight: bold;
		
	}
	.margin-top-14 {
		margin-top: 14px !important;
	}
	.debug-screener{font-size: 0.9em;}
	.debug-screener input{width: 120px;}
	.app-body .desktop{
		display:none !important;
	}
	.app-body .mobile{
		display:block !important;
		position: relative;
	}
	.app-body .mobile.display-cell{
		display:table-cell !important;
	}
	.app-body .mobile.hide{
		display:none !important;
	}
	.main-div{height: auto;}
	.app-body #global-bg{position: fixed; display: none !important;}
	.app-body #global-bg-0,
	.app-body #global-bg-1{display: none;}

	.app-body .mob-img-panel{position: relative; overflow: hidden; width: 100%; min-height: 1px;}
	.app-body .mob-img-panel > div{position: absolute;}
	.app-body .mob-img-panel.bottom-line, .video-panel.bottom-line {border-bottom: 4px solid #1E31F8;}
	.app-body .popup .pop-title {padding: 0.7em 5em 0.7em 0.7em;}
    .app-body .popup .close-popup-btn {padding: 15px 15px 15px 15px;}
	.app-body .popup .close-popup-btn.with-txt{font-size: 1.0em; width: 90px; margin: 0.2em 0em; padding: 1em 0.5em;}

	.app-body .global-modal-pop .modal-box{width:95%;}
	.app-body .popup.screen-modal-pop .pop-col-text{padding: 1.5em; }
	.global-modal-pop .close-modal-btn {right: 1em; top: 1em; }

	.header {position: fixed; }	
	.header.bg-color-1 {background-color: #00a9e0;}
	.header.bg-color-2 {background-color: #4d5eae;}

	.header {box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);}
	.header .navigation-panel .logo-block{width: 30px;}
	.header .navigation-panel .gap-cell{width: auto; padding: 0em 0em; display: none;}
	.header .navigation-panel{padding: 0em 1em; height: 60px;}
	.header .navigation-panel > .gap-cell,
	.header .navigation-panel > .title-panel,
	.header .navigation-panel .nav-desktop{display: none;}
	.header .navigation-panel .title-block{width: auto; padding: 0px 50px;}
	.header .navigation-panel .title-block .title{font-size: 1em;}
	.header .btn-panel.progress-cell {
		padding: 0em 0.5em;
		top: auto;
		padding-right: initial;
	}
	.header .btn-panel.progress-cell .btn-txt {
		padding-left: 10px;
	}
	.dropdown-menu .dropdown-menu-header img {
		width: 16px;
	}
	

	.header .nav-mobile{
		display: table;
		position: relative;
		min-height: 55px;
		background-color: #37C6B0;
		padding: 0em 15px;
	}
	.header .nav-mobile .btn-panel .btn .btn-icon{font-size: 1.1em;}
	.header .nav-mobile .title-cell{width: 100%;}
	.header .nav-mobile .title-cell .title-panel{padding: 0em; text-align: left;}
	.header .nav-mobile .title-cell .span-txt{
		background: transparent;
		padding: 0em;
		border-radius: 0px;
		color: #fff;
	}
	.header .nav-all{
		display: table;
		position: relative;
		min-height: 55px;
		background-color: transparent;
		padding: 0em 15px;
		width: 100%;
		right: auto;
		top: 0px;
		left: 0px;
	}
	.header .nav-all .btn-panel .btn .btn-icon{font-size: 1.1em;}
	.header .btn-panel .btn.audio-btn .icon-pause {font-size: 0.9em;}
	.header .nav-all .title-cell{width: 100%;}
	.header .nav-all .title-cell .title-panel{padding: 0em; text-align: left;}
	.header .nav-all .title-cell .span-txt{
		background: transparent;
		padding: 0em;
		border-radius: 0px;
		color: #fff;
	}
	.header .btn-panel .btn{width: 35px; height: 35px;margin: auto;}
	.header .navigation-panel .course-logo img { width: 26px; margin-right: 0px; }
	.header .navigation-panel .title-panel span.module-txt { font-size: 16px; padding-left: 20px; display: flex; align-items: center; margin-left: -24px; height: 30px; }
	.main-div .transcript-btn{display: none;}
	.mobile-titlebar{display:block;}
	.btn, .modal-btn .ui-button{font-size: 24px; height: 60px;}
	.side-navigation{display:none;}
	.screen .bottom-navigation{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-flow: column nowrap;
	}

	.footer .img-baner{
		position: relative;
		width: 50%;
		min-width: 250px;
		margin: 30px auto;
	}

	.alpha-bg{position: fixed;}
	.screen-modal-pop, 
	.global-modal-pop{position: fixed; overflow-y: hidden;}
	.scroll-parent{height: auto; max-height: none; width: 100%;}
	.global-modal-pop .scroll-parent,
	.screen-modal-pop .scroll-parent{max-height: calc(100vh - 150px);}
	
	.app-body .m-color-white,
	.app-body .instr-panel.m-color-white,
	.app-body .instr-txt.m-color-white{color: #fff; }

	.content-master{
		margin:0em 0em 0em 0em;
		overflow: initial;
		height: auto;
		position: relative;
	}
	.content-master.full-height {
		height: auto;
	}
	.title-box{
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		margin: 0em auto;
		padding: 1em;
		width: 50%;
		min-width: 250px;
	}
	.title-box .inner-panel{
		justify-content: center;
		text-align: center;
	}
	.btn.with-img{
		width: 35px; height: 35px;
	}
 	.debug-screener{
		position: relative;
		width: auto;
		bottom: 0%;
		left: 0%;
		right: auto;
		margin: 0.5em 0.5em;
		display: inline-block;
	}

	.display-block.mobile-block-center{text-align: center;}
	
	.screen.m-bg-color-1 {background-color: #00a9e0;}
	.screen.m-bg-color-2 {background-color: #4d5eae;}
	.screen .screen-background {
		height: 100%;
	}
	.screen .screen-background.mobile-no-bg{
		background-color: #000 !important;
		background-image: none !important;
	}
	.screen .screen-background.mobile-white-bg{background-color: #fff !important;}

	.screen .screen-l-r-padding{padding-left: 1.15em; padding-right: 1.15em;}
	.screen .screen-left-padding{padding-left: 1.15em; }
	.screen .screen-right-padding{padding-right: 1.15em;}
	
	.screen-container{height: auto;	min-height: 100%;background-color: transparent;}
	.screen-container .screen,
	.screen-container .screen-panel,
	.screen-container .screen-padding,
	.screen-container .screen-data{height: auto; overflow: initial; width: 100%; }
	.screen-container .screen-data{display: block;}
	.screen .screen-data.overflow-hidden {overflow: initial;}
	.screen .screen-data .col-text, 
	.screen .pop-col-text, 
	.main-div > .screen-modal-pop .pop-col-text{padding: 1em; width: 100%; display: block;}

	.screen .col.col-10,
	.screen .col.col-20,
	.screen .col.col-30,
	.screen .col.col-35,
	.screen .col.col-40,
	.screen .col.col-45,
	.screen .col.col-50,
	.screen .col.col-55,
	.screen .col.col-60,
	.screen .col.col-62,
	.screen .col.col-65,
	.screen .col.col-70,
	.screen .col.col-75,
	.screen .col.col-80,
	.screen .col.col-85,
	.screen .col.col-90 {width: 100%;}
	.screen .screen-data .text-box.margin-top{margin-top:0em;}
	.screen .mobile-color-bg{
		background: rgb(15,77,188) !important;
		background: linear-gradient(90deg, rgba(15,77,188,0.9) 0%, rgba(0,169,224,0.9) 100%) !important;
		color: #fff;
	}
	.screen .mobile-white-bg{
		background: none !important;
		background-color: #fff !important;
		color:#000;
	}
	.screen .mobile-trans-bg{
		background: none !important;
		background-color: transparent !important;		
	}
	.screen-instr-txt.mobile-instr{display: block;}
	.screen-instr-txt.desktop-instr{display: none;}

	.app-body .mobile-white-bg .color-white, 
	.app-body .mobile-white-bg .instr-panel.color-white, 
	.app-body .mobile-white-bg .instr-txt.color-white {
		color: #761092;
	}
	.app-body .mobile-color-bg .color-black, 
	.app-body .mobile-color-bg .instr-panel, 
	.app-body .mobile-color-bg .instr-txt {
		color: #fff;
	}
	.mobile-white-bg .btn-panel.border-btn .btn {		
		border: 0.1em solid #00A9E0;
		color: #00A9E0;
	}
	.mobile-white-bg .btn-panel.border-btn .btn.hover{
		background-color: #00A9E0;
		border-color:#00A9E0;
		color:#fff;
	}
	.screen .screen-padding{padding:0em;}
	.screen .screen-padding.full {padding: 0em;}	
	.screen .col-img{
		position: relative;
		width: 100%;
	}
	.screen .screen-data .col-text,
	.screen .screen-data .col-blank,
	.screen .screen-data .col-img{		
		display: block;
		width: 100%;
		height: auto;
	}
	.screen .screen-data .col-img.mobile{		
		display: block;
		margin: 0 auto;
	}
	.white-transparent-border {
		border: none; padding: 0em;
	}
	.white-alpha-bg-border {
		align-items: flex-start;
		border: none;
		padding: 0em 0em 1em 0em;
	}
	.white-alpha-bg-border.small-padding{padding: 0em 0em 1em 0em;}
	.white-transparent-border .white-alpha-bg-border .pop-title{
		padding: 0em;
		text-align: center;
		margin: 0.1em auto 0.5em;
	}
	.white-alpha-bg {padding: 15px;	}
	
}

@media screen and (max-width: 480px) {
	.app-body .global-modal-pop .modal-box {width: 90%;}
	.app-body .global-modal-pop .modal-box.top {width: 100%;}
	.header .navigation-panel .title-panel span.module-txt {
		font-size: 14px;
		padding-left: 10px;
		margin-left: -24px;
	  }
}
@media screen and (max-width: 380px) {
	.screen .screen-data .col-text, 
	.screen .pop-col-text, 
	.main-div > .screen-modal-pop .pop-col-text {padding: 1.0em 1.0em 1.0em 1.0em;}

	.header .navbar-nav.mob-dropdown {width: 100%;}
    .navbar-nav .open .dropdown-menu{width: 100%;}
	.header .btn-panel.progress-cell .btn-txt {
		padding-left: 0.7em;
	}
	
}

/* Portrait orientation */
@media screen and (orientation: portrait) {

}
/* Landscape orientation */
@media screen and (orientation: landscape) {

}