.floatNone {
	float: none !important;
	margin: 0 auto;
}

.paddingNone {
	padding: 0;
}
body{
	overflow:auto;
}

.customPlayer {
	background-color: #2c3a45;
	display: -webkit-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	float: left;
	padding: 0px 5px;
	color: #fff;
	height: 40px;
	background: transparent;
}

.customPlayer>div {
	display: inline-block;
	padding: 6px 5px;
	text-align: center;
}

.customPlayer .iconHeader {
	cursor: pointer;
}
.checkDeviceMode{
	display:none;
	position: absolute;
	top: 0px;
	z-index: 99999;
	background: #2c3a45;
	padding: 10px 20px;
	font-size: 12px;
	width: 99%;
    color: #000;
	height:40px;
	
}
.textMessageDevice{
	float: left;
    font-size: 16px !important;
	font-style: italic;

}
.deviceClose{
	
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: 1px solid white;
	position: absolute;
    right: 2px;
    top: 2px;
	color: white;
    background: black;
	
}
.customPlayer div.progress {
	padding: 0;
	width: auto;
	margin-top: 10px;
	margin-bottom: 5px;
	height: 10px;
	background-color: #333;
	border-radius: 0;
	-webkit-flex: 1;
	/* Safari 6.1+ */
	-ms-flex: 1;
	/* IE 10 */
	flex: 1;
}

.customPlayer .progressBar {
	width: 100%;
	position: relative;
	height: 2px;
	background-color: #ccc;
	margin-top: 12px;
}

.questionIndicator {
	position: relative;
	height: 10px;
	padding: 0;
	margin: -5px 0px 0px 0px;
}

.queCircle {
	height: 35px;
	width: 11px;
	border-left: 2px dotted #76818a;
	position: absolute;
	left: calc(100% - 10px);
	z-index: 1;
	margin: 2px 0px 0px 0px;
}

.queCircle span {
	width: 12px;
	height: 12px;
	background-color: #2c3a45;
	display: inline-block;
	border-radius: 50%;
	top: -7px;
	position: relative;
	left: -7px;
	border: 2px solid #3ca0ff;
}

.queCircle.filled {
	height: 10px;
	width: 10px;
	border-radius: 5px;
	border: 2px solid #de1a22;
	background-color: #de1a22;
	position: absolute;
	left: calc(100% - 10px);
}

.queCircle.completed span {
	background-color: #3ca0ff;
}

.playPauseButton {
	width: 40px;
}

.timer {
	width: 160px;
	padding: 11px 0px !important;
	font-size: 13px;
}

.volumeButton {
	width: 30px;
}

.fullscreen {
	width: 50px;
}

video#videoPlayer {
	max-width: 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#interactivityHolder {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #1c2935;		
	/*overflow-y: auto;*/
	overflow: hidden;
	padding: 5px;
	background-repeat: no-repeat;
    background-size: cover;
	/*opacity: 0.9;*/
	/*color: #fff;*/
	 z-index: 1; 
	 
}

.optionHolder li {
	text-align: left;
}

#hotspotBackDrop {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}

#clonedElm {
	clear: both;
    float: none !important;
    width: 82%;
    height: 100%;
    position: relative;
    top: 1%;
    left: 9%;
}
.fullscreenVideo #clonedElm{
	clear: both;
    float: none !important;
    width: 100%;
    height: 80%;
    position: relative;
    top: 15%;
    left: 0;
}


.hotspotPopupContent .clsbtn {
	
	color: #fff;
	width: 28px;
	height: 28px;
	display: inline-block;
	text-align: center;
	line-height: 28px;
	position: absolute;
	right: 0px;
	top: 0px;
	font-weight: bold;
	cursor:pointer;
    /* border-top-right-radius:6px; */
}

.hotspotPopupContent {
	position: absolute;
	top: 15%;
	left:30%;
	left:
	opacity: 0;
	max-width: 280px;
	background: rgba(255, 255, 255, 1);
	color: #666;
	padding: 15px 10px;
	margin-right: 10px;
	border-radius: 8px;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
	padding-top: 15px;
	display:none;
	min-width: 280px;
    min-height: 220px;
	padding-right: 0;
	/*transition: top ease-out 100ms;*/
}
.datascroll{    max-height: 220px; overflow: auto;}
.hotspotPopupContent .jsonContent {
	/*max-height: 170px;
	overflow-y: auto;
	padding-left: 8px;
	padding-right: 5px;*/
}
.fullscreenVideo .hotspotContinue{bottom: 60px;}
.hotspotContinue {
	/*float: right;*/
	cursor: pointer;
	bottom: 40px;
	right: 2px;
	position: absolute;
	display: inline-block;
	background: #fff;
	border-radius: 50%;
	width: 45px;
    height: 45px;
    line-height: 45px;
	z-index: 999;
	text-align: center;
	border:2px solid;
}
div.hotspotContinue, div.plybg {   
 animation: shadow-pulse 1.5s infinite;
}



.hotspotCloseButton {
	cursor: pointer;
}

.hotspotClick {
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	
	background-color: #3ca0ff;
	display: inline-block;
	border-radius: 50%;
    width: 30px;
    height: 30px;
    border: 2px solid white;	
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}

.hotspotClick .title {
	color: #fff;
	font-size: 18px;
}

.hotspotClick .iconHeader {
	width: 20px;
	height: 20px;	
    border-radius: 50%;
    padding: 13px;
	animation: shadow-pulse 1.5s infinite;
	fill: #3ca0ff !important;
}

#slider {
	height: 4px;
	top: 13px;
	z-index: 1;
}

#slider .ui-slider-range {
	background-color: #fff;
	cursor: pointer;
}

#slider .ui-slider-handle {
	background: #fff;
	top: -6px;
	cursor: pointer;
	/*-moz-transition: left .4s ease;
	 -ms-transition: left .4s ease;
		 transition: left .4s ease;*/
}

 

.fullScreenThis {
	width: 100% !important;
	height: 100%;
	margin: 0 auto !important;
	padding: 0;
}

.playIcon {
	display: block;
	width: 100px;
	height: 82px;
	background: url(../assets/icons/Play.svg);
	background-size: 100px 82px;
}
    .quizbg, .custom-syavv{
	background: #fff;
    border-radius: 0px;
    
    padding: 10px;
    display: inline-block;
	border-radius:7px;
	/* z-index:111; */
	
	 top: 50%;
transform: translateY(-55%);
position: absolute;
	
	}
.quizbg{margin: 15px 16%;}	
	.firsttitlebx {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -40px;
	 z-index:1111; 
}
.firsttitlebx .title {
    font-size: 26px;
    color: #fff;
    font-weight: 300;
    margin: 10px 20px;
    background: rgba(60,160,255,.75);
    -webkit-transition: background .2s ease-in;
    transition: background .2s ease-in;
	border-radius: 50%;
}
.hvr-wobble-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-animation-name: hvr-wobble-horizontal;
    animation-name: hvr-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
#contentBlock .plybg.videoPoster svg{fill:#fff}
.plybg {
    background: none;
    width: 60px;
    height: 60px;
    text-align: center;
    border-radius: 50%;
    line-height: 56px;
    cursor: pointer;
	padding: 15%;
}
.hotspotClick .title p{margin: 0;}
.hvr-pulse {
   display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-animation-name: hvr-pulse;
    animation-name: hvr-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
#playPauseButton svg {
    width: 22px;
    margin-top: 0;
    height: 22px;
}
.iconHeader.icon-play_new,.iconHeader.icon-fullscreen_new,.iconHeader.icon-down{
	width: 24px;
   /*  height: 40px; */
    
}
.iconHeader.icon-audio_on_new,.iconHeader.icon-audio_mute_new{
	width: 24px;
    height: 28px;
}
.quizbg div[data-component="Question"] h4 li{
	margin-left:10px;
	margin-top:2px;
}
.quizbg div[data-component="Question"] h4 p{
	margin-bottom: 5px !important;
}
.quizbg{
 overflow:auto;
 top: 50%;
transform: translateY(-55%);
position: absolute;
overflow-x: hidden;
padding: 0;

}
.hotspotClick .iconHeader::before {
    content: " ";
    position: absolute;
    display: block;
    background-color: #fff;
    width: 2px;
    left: 12px;
    top: 5px;
    bottom: 5px;
    z-index: 9;
    border-radius: 2px;
}
.hotspotClick .iconHeader::after {
    content: " ";
    position: absolute;
    display: block;
    background-color: #fff;
    height: 2px;
    top: 12px;
    left: 5px;
    right: 5px;
    z-index: 9;
    border-radius: 2px;
}
 .hotspotPopupContent.arrowLeftTop {
	border: 1px solid #ccc;
}
.hotspotPopupContent.arrowLeftTop:after, .hotspotPopupContent.arrowLeftTop:before {
	
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.hotspotPopupContent.arrowLeftTop:after {
    left: -24px;
    top: 16px;
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #fff;
	border-width: 14px;
	margin-top: -14px;
}
.hotspotPopupContent.arrowLeftTop:before {
left: -24px;
top: 23px;
border-width: 12px;
margin-top: -19px;
border-color: rgba(245, 64, 64, 0);
border-right-color: #ccc;
	
}

.hotspotPopupContent.arrowLeftBottom {
	border: 1px solid #ccc;
}
.hotspotPopupContent.arrowLeftBottom:after, .hotspotPopupContent.arrowLeftBottom:before {
	
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	z-index: -9;
}

.hotspotPopupContent.arrowLeftBottom:after {
    left: -24px;
    bottom: 6px;
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #fff;
	border-width: 14px;
	margin-top: -14px;
}
.hotspotPopupContent.arrowLeftBottom:before {
left: -24px;
bottom: 8px;
border-width: 12px;
margin-top: -19px;
border-color: rgba(245, 64, 64, 0);
border-right-color: #ccc;
	
}
.hotspotPopupContent.arrowRightTop {
	border: 1px solid #ccc;
}
.hotspotPopupContent.arrowRightTop:after, .hotspotPopupContent.arrowRightTop:before {
	
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	z-index: -9;
}

.hotspotPopupContent.arrowRightTop:after {
    right: -26px;
    top: 30px;
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #fff;
	border-width: 16px;
	margin-top: -30px;
}
.arrowRightTop:before {
    right: -20px;
	top: 40px;
	border-color: rgba(245, 64, 64, 0);
	border-left-color: #ccc;
	border-width: 12px;
	margin-top: -36px;
}


.hotspotPopupContent.arrowRightBottom {
	border: 1px solid #ccc;
}
.hotspotPopupContent.arrowRightBottom:after, .hotspotPopupContent.arrowRightBottom:before {
	
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	z-index: -9;
}

.hotspotPopupContent.arrowRightBottom:after {

right: -26px;
bottom: 6px;
border-color: rgba(80, 80, 80, 0);
border-left-color: rgba(80, 80, 80, 0);
border-left-color: #fff;
border-width: 16px;
margin-top: -30px;
}
.hotspotPopupContent.arrowRightBottom:before {
  
	border-color: rgba(245, 64, 64, 0);	   
    right: -24px;
    bottom: 10px;
    border-left-color: #ccc;
    border-width: 12px;
    margin-top: -36px;
}
.current_video_description ul{color:#fff}
.current_video_description {
    color: white;
    /* background: lightgray; */
}
.videoCntTitleAndDescr{
	position: absolute;
    left: 20px;
    z-index: 99;
    top: 20px;	
	right: 20px;
}
.hotspotClick.visited .iconHeader{
	background:silver;
}
.firsttitlebx .title{opacity: 0.8;}
#interactivityHolder:hover > .firsttitlebx .title{opacity: 1}

/* portarit message css start */
.Deviceoverlay{
    display:none;
	position:absolute;
	top:0;
	background-color: silver;
    width: 100%;
    height: 118%;
    opacity: 1;
	bottom:0;
}

.iconContainer{
    width: 230px;
	height:200px;
	position:absolute;
	left:50%;
	top:40%;
	margin-left:-115px;
	margin-top:-100px;
	& p{
		display:inline-block;
		width:100%;
		text-align:center;
		margin:0;
		font-size:24px;
		opacity:0;
		margin-left: -115px;
	}
}

.phone{
	position:relative;
	left:50%;
	margin-left:-50px;
	width:0;
	height:0;
	text-align:center;
	border:0 solid #000;
	background:#a9a9a9;
	border-radius:10px;
	box-sizing:border-box;
	& i{
		text-align:center;
		width:100%;
		line-height:120px;
		font-size:50px;
		color:#454545;
		opacity:0;
	}
}

.phone svg,.phone img{
	    top: 28%;
    position: absolute;
    left: 20%;
    fill: black !important;
    transform: rotate(45deg);
    width: 50px;
    height: 50px;
}
.iconContainer p {
    font-size: 22px;
	text-align: center;
}

@media only screen and (max-width : 1020px) and (orientation: portrait){
	.Deviceoverlay{display:block; z-index: 99999; }
	.checkDeviceMode{display:none;top:0px;}
	.interactive-video-quiz .quizbg, #interactivityHolder .custom-syavv{
		display:none;
	}

	.Deviceoverlay .phone{
		animation:
			sizeIncrease .5s forwards ease, 
			borderIncrease .5s .5s forwards ease, 
			rotateRight .7s 1s forwards ease;
	}

	.Deviceoverlay .phone i{
		animation:
			fadeIn .5s .8s forwards ease;
	}

	.Deviceoverlay .iconContainer p{
		animation:
			fadeIn .5s 1.3s forwards ease;
	}
}
@media only screen and (min-width : 320px) and (max-width : 767px){
		#clonedElm {
			clear: both !important;
			float: none !important;
			width: 100% !important;
			height: 100% !important;
			position: relative !important;
			top: 0 !important;
			left: 0 !important;
		  }
}
/* KEYFRAMES
------------------------------------------- */
/* Animate width + height */
@keyframes sizeIncrease {
  0%   { width: 0; height:10px; }
	50%  { width: 100px; height: 10px; }
  100% { width: 100px; height:160px; }
}
/* Add borders */
@keyframes borderIncrease { 
	100% { border-width:20px 10px; } 
}

/* fade-in  */
@keyframes fadeIn { 
	100% { color:#000; opacity:1; } 
}

/* Rotate device */
@keyframes rotateRight { 
	100% { transform: rotate(90deg); } 
}
/* portarit message css end */


.videoOnly div, .videoOnly p, .videoOnly span {
    line-height: 1.42857143;
}

.videoPoster .iconHeader {
    margin-top: 0px;
}
.interactive-video-quiz .options{padding-right: 15px;padding-left: 15px;}
.interactive-video-quiz .quizbg .text-left.marginBottom20{margin: 15px;}
.interactive-video-quiz #submitBtn.noPadding{padding:15px !important;} 

#interactivityHolder .custom-syavv {padding:0}
#interactivityHolder .custom-syavv h3.text-FeedBack{margin-top: 15px;}