@charset "utf-8";

/* CSS Document */

html, body {
    margin: 0;
    padding: 0;
	height: 100%;
	overflow: hidden;
	font-family: Lato, Arial, Helvetica;
}

 #wrapper {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 365px auto;
    grid-template-rows: 55px auto;
    grid-template-areas: 
		"header header" 
		"sidebar epub";
    grid-gap:0;
}

#navigation-bar-wrapper {
    grid-area: header;
	align-self: start;    
}

#sidebar {
  grid-area: sidebar;
	height: calc(100vh - 50px);
	height: calc(100svh - 50px);
	background-color: #FFF;
}

#epub {
	grid-area: epub;
	height: calc(100vh - 50px);
	height: calc(100svh - 50px);
	padding-left: 50px;
	overflow: auto;
	
	/*smooth scroll for ios*/
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	
	/*scroll bar hide*/
	-ms-overflow-style: none;  
    scrollbar-width: thin;  
	padding-right: 20px;
}
/*scroll bar hide*/
#epub::-webkit-scrollbar { 
    /*display: none; */ 
	width:.5vw;
}

#epub::-webkit-scrollbar-track { 
	background-color: #fff;
}

#epub::-webkit-scrollbar-track:hover { 
	background-color: #f5f5f5;
}

#epub::-webkit-scrollbar-thumb { 
	background-color: #ccc;
	border-radius: 25px;
	height:2vw;
}

#epub::-webkit-scrollbar-thumb:hover { 
	background-color: #545454;
}

/*body.fullReader #sidebar, body.fullReader #navigation-bar-wrapper{
	display:none;
}

body.fullReader #wrapper{
	display: block;
}

body.fullReader #epub{
	padding: 0 1in;
	height: calc(100vh);
}*/

/*mobile view*/

body.mobileView #wrapper {
	display: block;
}

body.mobileView #epub{
	/*background-color: green;*/
	margin-left: 10px;
	padding-right: 10px;
	height: calc(100vh - 101px);
	height: calc(100svh - 101px);
	padding-left: 0;
}

 body.mobileView #sidebar{
	display: none;
	position: absolute;
	width: 100%;
	bottom: 0;
	height: 100vh;
	height: 100svh; 
	z-index: 999999;
}

body.mobileView #tabIcon{
	display: block;
	z-index: 9999999;
}

body.mobileView #tocUL{
	height: calc(100vh - 136px);	
	height: calc(100svh - 136px);	
}


/* END mobile view*/


.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}