<style>
.nav-page, .single_column_view, .double_column_view, .toc, .resource, .zoom, .toggle_highlight, .bookmark, .add-note, .list, .navbar-left, .zoomcontrol, .mydata-panel, .search-panel, .toc-panel, .thumbnail-panel, .pagenavigation-bar, .pen-container,.print, .jump-select, .jump-back, .jump-next, .settings, .smilContainer,.navbar-fixed-bottom { display: none; } 

.signin {
	margin-left: 40px;
	background-color: #18afa3;
	color: white;
	height: 34px;
	width: 357px;
	font-size: 18px;
	margin-bottom: 30px;
	outline: none;
	border: none;
	-webkit-appearance: none;
	cursor: default;
}
.signin[disabled] {
	color: #62d5cc;
	cursor: pointer;
}
</style>
<div ng-controller="LoginCtrl">
	<div style="position:absolute;width:100%;background-color:lightgray;height:100%;display: table;top: 0;left: 0">
		<div style="padding: 0;vertical-align: middle;display: table-cell;margin: 0">
			<div style="position:relative;width:437px;height:auto; margin:0 auto; background-color: #e6ebeb; border-radius: 10px">
				<!-- <img src="themes/kitaboo/images/login_pop.png" /> -->
				<div class="header">
					<div style="height: 60px; display: inline-block">
						<label bo-text="'signIn' | translate : 'buttons'" style="font-size:26px; padding: 20px 0px 0px 40px"></label>
					</div>
					<div class="close" style="display: inline-block; margin-right: 20px; margin-top: 20px"> X </div>					
				</div>
				<div class="body">
					<div class="loginErrorMsg" style="background-color: #f9d7d7;border: 1px solid #f87f7f; margin-left:40px; margin-right: 40px; height: 68px" ng-show="status != 200">
						<span bo-text="'oops' | translate : 'messages'" style="display: block; padding-top: 13px; color: red; font-weight: bold; padding-left: 7px; font-size: 15px"></span>
						<span bo-text="'invalidIdPass' | translate : 'messages'" style="padding-left: 7px"></span>
					</div>
					<div style="height:58px">
						<label bo-text="'emailId' | translate : 'labels'" style="color:#3d4f58; float: left; margin-bottom: 0px; font-size: 13px; margin-left: 40px; margin-top: 8px"></label> 
						<input type="text" placeholder="{{'mailId' | translate : 'labels'}}" ng-model="username" style="margin-left: 40px; width: 344px">
					</div>		
					<div style="height:70px">
						<label bo-text="'password' | translate : 'labels'" style="color:#3d4f58; float: left; margin-bottom: 0px; font-size: 13px; margin-left: 40px; margin-top: 8px"></label> 
						<input type="password" placeholder="{{'password' | translate : 'labels'}}" ng-model="password" style="margin-left: 40px; width: 344px">
					</div>	
					<button class="signin" bo-text="'signIn' | translate : 'buttons'" ng-click="loginAuth()" ng-disabled="!password || !username"></button>
					<div class="access" style="height: 126px; background-color: #eae5c0; border-radius: 0px 0px 5px 5px;  display:none">
						<span bo-text="'accessCode' | translate : 'messages'" style="font-size: 16px;  font-weight: bold; position: absolute; padding: 15px 0px 0px 40px"></span> 
						<span bo-text="'enterCode' | translate : 'messages'" style="font-size: 14px; font-weight: normal; position: absolute; padding: 15px 0px 0px 40px"></span>
						<input type="text" placeholder="Enter access code" style="position: absolute; margin-top: 45px; height: 30px; margin-left: 40px; width:275px; border-radius: 0px">
						<button bo-text="'go' | translate : 'buttons'" style="-webkit-appearance: none; height:40px; width: 70px; float: right; margin-top: 45px; margin-right: 39px; outline: none; border: none; background-color: #ffc168; color: #ffffff"></button>
					</div>
				</div>				
			</div>
		</div>
	</div>
</div>