/* Regular */
@font-face {
    font-family: 'Calibri';
    src: url('../../fonts/calibri_regular.otf');
    src: url('../../fonts/calibri_regular.eot') format('embedded-opentype'), url('../../fonts/calibri_regular.woff') format('woff'), url('../../fonts/calibri_regular.ttf') format('truetype'), url('../../fonts/calibri_regular.svg#AgencyFBRegular') format('svg');
}

/* Bold */
@font-face {
    font-family: 'Calibri Bold';
    src: url('../../fonts/calibri_bold.otf');
    src: url('../../fonts/calibri_bold.eot') format('embedded-opentype'), url('../../fonts/calibri_bold.woff') format('woff'), url('../../fonts/calibri_bold.ttf') format('truetype'), url('../../fonts/calibri_bold.svg#AgencyFBRegular') format('svg');
}

/* Bold Italic */
@font-face {
    font-family: 'Calibri iBold';
    src: url('../../fonts/calibri_ibold.otf');
    src: url('../../fonts/calibri_ibold.eot') format('embedded-opentype'), url('../../fonts/calibri_ibold.woff') format('woff'), url('../../fonts/calibri_ibold.ttf') format('truetype'), url('../../fonts/calibri_ibold.svg#AgencyFBRegular') format('svg');
}

/* Italic */
@font-face {
    font-family: 'Calibri Italic';
    src: url('../../fonts/calibri_italic.otf');
    src: url('../../fonts/calibri_italic.eot') format('embedded-opentype'), url('../../fonts/calibri_italic.woff') format('woff'), url('../../fonts/calibri_italic.ttf') format('truetype'), url('../../fonts/calibri_italic.svg#AgencyFBRegular') format('svg');
}

* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
html,
body {}
body {
    position: absolute;
    font-family: arial;
    background: #ffffff;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
	font-family: Arial;
}

#recordCursor{
	position:absolute;
	display: block;
	width:26px;
	height:35px;
	z-index:4;
	left:682px;
	top:402px;
}

/* This is for activity file path located in file tab - info option panel. */
span.raquo {
    top: -1px;
    position: relative;
}

.recordCursorNormal{
	background-image: url(../images/common/cursors/recArrow.png); 
}

.recordCursorClicked{
	/* background-image: url(../images/common/cursors/recArrowClk.png)!important;  */
}

.browerFailure{
    position: relative;
	 top: 20px;
	margin: 0 auto;
    width: 460px;
    height: 158px;
	display:none;
}

.browerFailure #failureIcon{
	position:absolute;
	width:150px;
	height:150px;
	background-image: url(../../images/attention.png);
}

.browerFailure #failureText{
    position: absolute;
    top: 54px;
    font-size: 24px;
    padding-left: 168px;
}

.opacityShow {
    opacity: 1 !important;
}
.opacityHide {
    opacity: 0 !important;
}
.displayHide {
    display: none !important;
}
.visibilityHide {
    visibility: hidden !important;
}
.showCursor {
    cursor: pointer;
}
.hideCursor {
    cursor: default;
}

.button {
    cursor: pointer;
}
.button * {
    cursor: pointer;
}
#preload {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 99999;
    top: 0px;
}
#preload #spinner {
    position: relative;
    margin: 0 auto;
    top: 55%;
    display: table;
    width: 80px !important;
    height: 50px !important;
    background-image: url(../images/common/preload_spinner.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: -45px;
}
#screen_preloader {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    top: 0px;
}
#screen_preloader #spinner {
    position: relative;
    margin: 0 auto;
    top: 50%;
    display: table;
    width: 80px !important;
    height: 50px !important;
    background-image: url(../images/common/preload_spinner.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: -45px;
}
.spinnerBackground {
    width: 175px !important;
    height: 175px !important;
    background-image: url(../images/common/preload_spinner.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#wrapper_parent {
    position: relative;
    width: 1226px;
    height: 656px;
    overflow: hidden;
	display:none;
    margin: 0 auto;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
	border: 1px rgba(61,61,61,0.5) solid;
	box-sizing: border-box;
}
#wrapper {
    position: relative;
    width: 1226px;
    height: 100%;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    background-color: #fff;
}
#wrapper .visibleNone {
    opacity: 0;
}

#container_wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    overflow: hidden;
}
#task_container {
    position: absolute;
    width: 1026px;
    height: 504px;
    bottom: -2px;
    right: 0px;
	background-color: #E6E6E6;
}

#header_container{
	position: absolute;
    width: 1026px;
    height: 152px;
	top: 0px;
	right: 0px;
	cursor: default;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#panel_container{
	position: absolute;
    width: 200px;
    /* height: 100%; */
	height:654px;
	top: 0px;
	left: 0px;
}

#popup_container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0px;
}

#percent {
    position: relative;
    width: 100%;
    text-align: center;
    display: table-cell;
    top: -32px;
    font-size: 25px;
    color: #2F91B8;
    font-family: Calibri;
}

#wrapperdummy {
    position: absolute;
    height: 768px;
    width: 100%;
    left: 0px;
    background-repeat: repeat-x;
    display: none;
}

/* ---------------------Alert View CSS Start --------------------*/

#alert_container{
	position: absolute;
    height: 100%;
    width: 1026px;
    left: 200px;
	top:0px;
	background-color:rgba(0,0,0,0.3);
	z-index:10;
}

#alert_container .alerts{
	position: absolute;
    height: 100%;
    width: 100%;	
}

#alert_container #wrongAlert_bg{
    position: absolute;
    height: 214px;
    width: 384px;
    left: 335px;
    top: 235px;	
	-ms-transform: scale(0); /* IE 9 */
	-moz-transform: scale(0);
	-webkit-transform: scale(0); /* Chrome, Safari, Opera */
	transform: scale(0);
	background-image: url(../images/common/wrong_alert.png);
	box-shadow: 0px 0px 6px 1px rgba(12, 12, 12, 0.5);
	-moz-box-shadow: 0px 0px 6px 1px rgba(12, 12, 12, 0.5);
	-webkit-box-shadow: 0px 0px 6px 1pxrgba(12, 12, 12, 0.5);
  -moz-user-select: none;     /* Firefox all */
	-webkit-user-select: none;  /* Chrome all / Safari all */
    -ms-user-select: none;      /* IE 10+ */
}

#alert_container #wrongTextAttempt_bg{
    position: absolute;
    height: 214px;
    width: 384px;
    left: 335px;
    top: 235px;
	-ms-transform: scale(0); /* IE 9 */
	-moz-transform: scale(0);
	-webkit-transform: scale(0); /* Chrome, Safari, Opera */
	transform: scale(0);
	background-image: url(../images/common/warning_alert.png);
	box-shadow: 0px 0px 6px 1px rgba(12, 12, 12, 0.5);
	-moz-box-shadow: 0px 0px 6px 1px rgba(12, 12, 12, 0.5);
	-webkit-box-shadow: 0px 0px 6px 1pxrgba(12, 12, 12, 0.5);
}

#alert_container #wrongAlertTxt{
    position: absolute;
    height: 40px;
    width: 384px;
    font-family: Myriad Pro;
    font-size: 15px;
    font-style: italic;
    text-align: center;
    color: #f3f3f3;
    top: 102px;
    left: 0px;
    line-height: 1.3;
}

#alert_container #autoCompleteAlert_bg{
    position: absolute;
    height: 214px;
    width: 384px;
    left: 335px;
    top: 235px;
	-ms-transform: scale(0); /* IE 9 */
	-moz-transform: scale(0);
	-webkit-transform: scale(0); /* Chrome, Safari, Opera */
	transform: scale(0);
	background-image: url(../images/common/autoComplete_alert.png);
	box-shadow: 0px 0px 6px 1px rgba(12, 12, 12, 0.5);
	-moz-box-shadow: 0px 0px 6px 1px rgba(12, 12, 12, 0.5);
	-webkit-box-shadow: 0px 0px 6px 1pxrgba(12, 12, 12, 0.5);
}

#alert_container #successAlert_bg{
    position: absolute;
    height: 214px;
    width: 384px;
    left: 335px;
    top: 235px;
	-ms-transform: scale(0); /* IE 9 */
	-moz-transform: scale(0);
	-webkit-transform: scale(0); /* Chrome, Safari, Opera */
	transform: scale(0);
	background-image: url(../images/common/success_alert.png);
	box-shadow: 0px 0px 6px 1px rgba(12, 12, 12, 0.5);
	-moz-box-shadow: 0px 0px 6px 1px rgba(12, 12, 12, 0.5);
	-webkit-box-shadow: 0px 0px 6px 1pxrgba(12, 12, 12, 0.5);
}

#alert_container .okBtns{
    position: absolute;
    height: 40px;
    width: 140px;
    top: 156px;
    left: 128px;
    cursor: pointer;
}

#autoComplete_alert #okBtn{
	background-image: url(../images/common/autoCompleteNext_normal.png);
}
#autoComplete_alert #okBtn:hover{
	background-image: url(../images/common/autoCompleteNext_over.png);
}

#wrongAttempt_alert #okBtn{
	background-image: url(../images/common/wrongAlertCon_normal.png);
}
#wrongAttempt_alert #okBtn:hover{	
	background-image: url(../images/common/wrongAlertCon_over.png);
}

#success_alert #okBtn{
	background-image: url(../images/common/successSubmit_normal.png);
}
#success_alert #okBtn:hover{	
	background-image: url(../images/common/successSubmit_over.png);
}

#wrongTextAttempt_alert #okBtn{
	background-image: url(../images/common/wroningNext_normal.png);
}
#wrongTextAttempt_alert #okBtn:hover{	
	background-image: url(../images/common/wroningNext_over.png);
}


/* ---------------------Alert View CSS End --------------------*/

.red_wrong_btn{
	background: rgba(255, 0, 0, 0.48) !important;
}

.green_right_btn{
	background: rgba(0, 255, 0, 0.48) !important;
}

.nutral_btn{
	background: rgba(0, 0, 255, 0.48) !important;
}

/* --------------Playback View CSS Starts---------------- */

#playback_container {
    position: absolute;
    top: 0px;
    left: 200px;
    width: 1026px;
    height: 100%;
	z-index:5;
}

.playback_container #playback_warning {
    top: 50px;
    left: 15px;
    position: absolute;
    font-size: 15px;
}

.playback_container #playback_header{
	position: absolute;
    font-size: 20px;
    top: 19px;
    left: 14px;
    color: #D3D3D3;
    font-family: Arial;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 1px 2px 2px rgb(14, 13, 13);
}

.playback_container .playback_wrapper {
/*     position: absolute;
    width: 455px;
    height: 175px;
    background-color: rgba(42,46,48,0.9);
    top: 504px;
    left: 550px;
	color: rgb(191, 190, 190);
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 4px solid #7C7979;
	box-shadow: 0px 0px 4px 1px rgba(5, 5, 5, 0.4);
    -moz-box-shadow: 0px 0px 4px 1px rgba(5, 5, 5, 0.4);
    -webkit-box-shadow: 0px 0px 4px 1pxrgba(5, 5, 5, 0.4); */
	position: absolute;
    width: 446px;
    height: 175px;
    background-color: rgba(71, 77, 80, 0.8);
    left: 540px;
    top: 442px;
    color: rgb(236, 236, 236);
    border: 4px solid rgb(88, 86, 86);
    box-shadow: 0px 0px 4px 1px rgba(10, 10, 10, 0.6);
    -moz-box-shadow: 0px 0px 4px 1px rgba(10, 10, 10, 0.6);
    -webkit-box-shadow: 0px 0px 4px 1px rgba(10, 10, 10, 0.6);
	opacity:0;
}

.playback_container #playback_controller_bar{
	position: absolute;
    width: 252px;
    height: 52px;
    top: -2px;
    left: 188px;
}

.playback_container .playback_nav_btns {
    position: absolute;
    width: 37px;
    height: 38px;
    top: 11px;
	cursor: pointer;
}

.playback_container #playback_prev_btn {
    top: 11px;
    left: 58px;
	background-image: url(../images/common/playback_prev.png);
}

.playback_container #playback_next_btn {
	top:11px;
    left: 156px;
	background-image: url(../images/common/playback_next.png);
}

.playback_container #playback_pnp_btn {
    left: 108px;
	background-image: url(../images/common/playback_play.png);
}

.playback_container #playback_print_btn {
	top:11px;
    left: 206px;
	background-image: url(../images/common/playback_print.png);
}

.playback_container #playback_rec_btn {
	top:11px;
    left: 10px;
	background-image: url(../images/common/playback_replay.png);
}

.playback_container #playback_panel_handle1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 52px;
	cursor: all-scroll;
}

.playback_container #playback_panel_handle2 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
	cursor: all-scroll;
}

.playback_container #playback_msg_container{
    list-style-type: none;
    height: 110px;
    overflow-y: auto;
    top: 41px;
    position: absolute;
    width: 95%;
    padding-left: 15px;
}

.playback_container #playback_msg_container li{
	float: left;
	clear: both;
	padding-bottom: 2px;
    font-size: 17px;
    font-family: Arial;
}

.playback_container .playbackWrongIcon{
    position: relative;
    width: 12px;
    height: 10px;
    float: right;
	background-image: url(../images/common/wrong.png);
    top: 4px;
    left: 4px;
}

	@-moz-document url-prefix() {
		.playback_container .playbackWrongIcon{
			position: relative;
			width: 12px;
			height: 10px;
			float: right;
			background-image: url(../images/common/wrong.png);
			top: 6px;
			left: 4px;
		}
	}

.disablePlaybackNext{
	background-image: url(../images/common/playback_next_disable.png) !important;
	cursor: default !important;
}

.disablePlaybackPrev{
	background-image: url(../images/common/playback_prev_disable.png) !important;
	cursor: default !important;
}

.disablePlaybackPnP{
	background-image: url(../images/common/playback_play_disable.png) !important;
	cursor: default !important;
}

.pausePlaybackBtn{
	background-image: url(../images/common/playback_pause.png) !important;
}

.replayDisableBtn{
	background-image: url(../images/common/playback_replay_disable.png) !important;
	cursor: default !important;
}

.printDisableBtn{
	background-image: url(../images/common/playback_print_disable.png) !important;
	cursor: default !important;
}

.playback_container #playbackViewPlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    top: 0px;
    left: 0px;
    color: #ffffff;
}

#playbackViewPlay #mainPlaybackPlay{
    position: absolute;
    width: 170px;
    height: 56px;
    top: 290px;
    left: 440px;
    cursor: pointer;
	background-image: url(../images/common/playPlayback.png)
}

#playback_container .playbackTooltips{
	position:absolute;
	width: auto;
    height: 20px;
	background-color:#ffffff;
	border: 1px solid rgb(190,190,190);
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	text-align: center;
    font-size: 14px;
    font-family: Arial;
    padding-top: 3px;
	padding-left: 12px;
    padding-right: 12px;
	color: rgb(93, 93, 93);
	opacity:0;
	line-height: 16px;
	box-shadow: 0px 0px 1px 1px rgba(2, 2, 2, 0.1);
	-moz-box-shadow: 0px 0px 1px 1px rgba(2, 2, 2, 0.1);
	-webkit-box-shadow: 0px 0px 1px 1px rgba(2, 2, 2, 0.1);
}

#playback_container #playback_rec_tooltip{
    top: -25px;
    left: 182px;
}

#playback_container #playback_prev_tooltip{
    top: -25px;
    left: 224px;
}

#playback_container #playback_next_tooltip{
    top: -25px;
    left: 335px;
}

#playback_container #playback_pnp_tooltip{
    top: -25px;
    left: 282px;
    min-width: 40px;
}

#playback_container #playback_print_tooltip{
	top: -25px;
    left: 385px;
}

/* --------------Playback View CSS Ends---------------- */

/*-------------------------------START SPASH SCREEN START----------------------*/	
	
#startSplash{
	position: absolute;
    height: 100%;
    width: 1026px;
    left: 200px;
	top:0px;
	background-color:rgba(0,0,0,0.5);
	z-index:10;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
}

.startSplash #startSplashStartBtn{
	position: absolute;
    height: 65px;
    width: 198px;
    top: 300px;
    left: 428px;
	cursor:pointer;
	background-image: url(../images/common/splashStartBtn.png);
}

.startSplash #startSplashStartBtn:hover{
	background-image: url(../images/common/splashStartBtn.png);
}

.startSplash #startSplashNotePanel{
    position: absolute;
    height: 214px;
    width: 384px;
    left: 335px;
    top: 235px;
	display:table;
	background-image: url(../images/common/startSplash.png);
	box-shadow: 0px 0px 6px 1px rgba(12, 12, 12, 0.5);
	-moz-box-shadow: 0px 0px 6px 1px rgba(12, 12, 12, 0.5);
	-webkit-box-shadow: 0px 0px 6px 1pxrgba(12, 12, 12, 0.5);
}

.startSplash #startSplashBtn{
	position: absolute;
    height: 40px;
    width: 140px;
    top: 156px;
    left: 128px;
	cursor:pointer;
	background-image: url(../images/common/startSplashBtn_over.png);
}

.startSplash #startSplashBtn:hover{
	background-image: url(../images/common/startSplashBtn_normal.png);
}

.startSplash #startSplashNoteTxt{
	position: relative;
    font-size: 17px;
    font-family: Arial;
    color: #f3f3f3;
    text-align: center;
    height: 70px;
    line-height: 1.3;
    display: table-cell;
    vertical-align: middle;
    padding-right: 25px;
    padding-left: 25px;
    padding-top: 5px;
}

/*-------------------------------START SPASH SCREEN END----------------------*/	

.editableText{
	outline: none;
	-khtml-user-select: text;	
	-webkit-user-select: text;/*none  /* Chrome all / Safari all */
	-moz-user-select: text;     /* Firefox all */
	-o-user-select: text;
	-ms-user-select:text;  /* IE 10+ */	
}

#wrapper .customCursor{
	position:absolute;
	display:none;
	pointer-events:none;
}

/* -----------------------FOOTER BUTTONS------------------------  */

#task_container #totalPgs_btn{
    position: absolute;
    width: 72px;
    height: 20px;
    top: 594px;
    left: 0px;
}
	#task_container #totalPgs_btn:hover{
		background-color: rgba(61, 61, 61, 0.1);
	}
	#task_container #totalPgs_btn:active{
		background-color: rgba(61, 61, 61, 0.2);
	}

#task_container #totalWrds_btn{
    position: absolute;
    width: 102px;
    height: 20px;
    top: 594px;
    left: 74px;
}
	#task_container #totalWrds_btn:hover{
		background-color: rgba(61, 61, 61, 0.1);
	}
	#task_container #totalWrds_btn:active{
		background-color: rgba(61, 61, 61, 0.2);
	}

#task_container #wrdProffing_btn{
	position: absolute;
    width: 28px;
    height: 20px;
    top: 594px;
    left: 184px;
}
	#task_container #wrdProffing_btn:hover{
		background-color: rgba(61, 61, 61, 0.1);
	}
	#task_container #wrdProffing_btn:active{
		background-color: rgba(61, 61, 61, 0.2);
	}	
	
#task_container #readMode_btn{
    position: absolute;
    width: 38px;
    height: 20px;
    top: 594px;
    left: 732px;
}
	#task_container #readMode_btn:hover{
		background-color: rgba(61, 61, 61, 0.1);
	}
	#task_container #readMode_btn:active{
		background-color: rgba(61, 61, 61, 0.2);
	}	

#task_container #printLayout_btn{
    position: absolute;
    width: 38px;
    height: 20px;
    top: 594px;
    left: 770px;
}
	#task_container #printLayout_btn:hover{
		background-color: rgba(61, 61, 61, 0.1);
	}
	#task_container #printLayout_btn:active{
		background-color: rgba(61, 61, 61, 0.2);
	}	

#task_container #pageLayout_btn{
    position: absolute;
    width: 38px;
    height: 20px;
    top: 594px;
    left: 808px;
}
	#task_container #pageLayout_btn:hover{
		background-color: rgba(61, 61, 61, 0.1);
	}
	#task_container #pageLayout_btn:active{
		background-color: rgba(61, 61, 61, 0.2);
	}		
	
#task_container #zoomPercent_btn{
    position: absolute;
    width: 42px;
    height: 20px;
    top: 594px;
    left: 980px;
}
	#task_container #zoomPercent_btn:hover{
		background-color: rgba(61, 61, 61, 0.1);
	}
	#task_container #zoomPercent_btn:active{
		background-color: rgba(61, 61, 61, 0.2);
	}			
	
#task_container .pageZoomContainer{
    position: absolute;
    width: 128px;
    height: 20px;
    top: 594px;
    left: 848px;
}

#task_container .pageZoomContainer #zoomMinus_btn{
	position: absolute;
    width: 12px;
    height: 100%;
    top: 0px;
    left: 0px;
	background-color:rgba(0,0,0,0);
}
	#task_container .pageZoomContainer #zoomMinus_btn:hover{
		background-image:url(../images/common/zoomMinus.png);
		background-repeat: no-repeat;
		background-position: 2px 8px;
	}

#task_container .pageZoomContainer #zoomNob_btn{
	position: absolute;
    width: 102px;
    height: 100%;
    top: 0px;
    left: 12px;
	background-color:rgba(0,0,0,0);
}
	#task_container .pageZoomContainer #zoomNob_btn:hover{
		background-image:url(../images/common/zoomMidNob.png);
		background-repeat: no-repeat;
		background-position: 0px 3px;
	}

#task_container .pageZoomContainer #zoomPlus_btn{
	position: absolute;
    width: 12px;
    height: 100%;
    top: 0px;
    left: 115px;
	background-color:rgba(0,0,0,0);
}
	#task_container .pageZoomContainer #zoomPlus_btn:hover{
		background-image:url(../images/common/zoomPlus.png);
		background-repeat: no-repeat;
		background-position: 1px 5px;
	}