html {
	-ms-touch-action: none;
	-ms-scroll-chaining: none;
	-ms-content-zooming: none;
	cursor: default;
}

body {
	overflow: hidden;
	-ms-touch-action: none;
	-ms-content-zooming: none;
	/*background-image: url('bg.jpg');*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/*color: #FFFFFF;*/
	overflow-x: hidden;
	/*font-family: "Segoe UI", "Segoe UI Web Regular", "Segoe UI Symbol",
		"Helvetica Neue", "BBAlpha Sans", "S60 Sans", Arial, "sans-serif";
	font-weight: normal;*/
	text-overflow: ellipsis;
}

h1 {
	font-weight: 200;
}

#startScreen {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: inherit;
}

#startScreen #startProgress {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	margin-top: -20px;
}

div[role=main] {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 140px;
	bottom: 0px;
	/*height: 80vh;*/
	-ms-scroll-chaining: none;
	-ms-content-zooming: none;
}

#TopView {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;

	/*-ms-scroll-snap-type: mandatory;
    -ms-scroll-snap-points-x: snapInterval(0%, 100%);*/
	/*background-color: rgb(0, 0, 127);
        */
}

.win-flyout button, .dlm-flyout button {
    /*color: white;*/
    border:0px;
}

.win-flyout input, .dlm-flyout input {
    border-width:1px;
    border-style:solid;
    /*padding-left:4px;
	padding-right: 4px;*/
}

/*
-----------------------------------------------------------------------------
 Page View rules
-----------------------------------------------------------------------------
*/

.controlStyle, button.controlStyle, .reader-thm .controlStyle {
    background-color: rgba(127, 127, 127, 0.65);
    color: white;
    outline: none !important;
}

.controlStyle .win-commandimage.win-commandglyph {
    color: white !important;
}

.controlStyle[disable] {
	color: rgba(127, 127, 127, 0.35) !important;
}

body.hoverable .controlStyle:hover {
    background-color: rgba(127, 127, 127, 0.75) !important;
}

body.hoverable .controlStyle:hover[disable] {
    background-color: rgba(127, 127, 127, 0.35) !important;
}

/*
-----------------------------------------------------------------------------
 Page View rules
-----------------------------------------------------------------------------
*/
#pageViewListTemplate {
	overflow-y: hidden;
	/*overflow-x: hidden;*/
}

#PageViewListContent {
    position:relative;
    margin-left: auto;
    margin-right: auto;
}

/* pseudo class */ 
.PageViewListLayout {
	padding-top:20px;
	padding-left:120px;
	padding-bottom:80px;
	padding-right:60px;
}

/* pseudo class */
.ThumbnailViewLayout {
	padding-top:20px;
	padding-left:30px;
	padding-bottom:80px;
	padding-right:30px;
}

#PageTemplate {
    /* removed for gateFold to be able to drop shadow*/
	/*overflow: hidden;*/
}

div[dir=ltr].DLM_UI_ScrollView div.DoublePageView div#PageTemplate.leftPage,
div[dir=rtl].DLM_UI_ScrollView div.DoublePageView div#PageTemplate.rightPage,
div[dir=ltr].PageChooserView .leftPage,
div[dir=rtl].PageChooserView .rightPage {
	position: absolute;
	left: 0%;
	right: 50%;
	top: 0px;
	bottom: 0px;
}

div[dir=ltr].DLM_UI_ScrollView div.DoublePageView div#PageTemplate.rightPage,
div[dir=rtl].DLM_UI_ScrollView div.DoublePageView div#PageTemplate.leftPage,
div[dir=ltr].PageChooserView .rightPage,
div[dir=rtl].PageChooserView .leftPage {
	position: absolute;
	left: 50%;
	right: 0%;
	top: 0px;
	bottom: 0px;
}

.pageView {
	background-color: rgba(127,127,127,0.75);
}


    .pageView.gateFold {
        background-color: rgb(127,127,127);
    }

.pageView .imageView {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	overflow:hidden;
}

.pageView .pageNumber {
	position: absolute;
	margin-left: -2em;
	bottom: 0px;
	left: 50%;
	width: 4em;
	height: 1.75em;
	color: #FFFFFF;
	background-color: rgb(100, 100, 100);
	font-size: 0.5em;
	padding-top: 0.5em;
	text-align: center;
}

/*
-----------------------------------------------------------------------------
 Thumbnail View rules
-----------------------------------------------------------------------------
*/
#ThumbnailViewTemplate {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	/*overflow-y:hidden;
	overflow-x:hidden;*/
}

.thumbnailView {
	
}

/*
-----------------------------------------------------------------------------
 Book View rules
-----------------------------------------------------------------------------
*/
#BookViewTemplate {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	overflow-y: hidden;
	overflow-x: hidden;
}

#BookViewTemplate .pageView .pageNumber {
	opacity:0;
	font-size: 0.75em;
	pointer-events:none;
	z-index:20;
}

#BookViewTemplate .progressWheel
{
	z-index:20;	
}

.Pointer #BookViewTemplate .pageView .pageNumber {
	display: block;
	opacity:1;
}

.rootPageComponent .bookPageLinkComponent {
	opacity:0;
	z-index:20;
	pointer-events:none;
}

.MouseHalf .rootPageComponent .bookPageLinkComponent:not(.mouseoveronly), 
.rootPageComponent .bookPageLinkComponent:hover, 
.Pointer .rootPageComponent .bookPageLinkComponent:not(.mouseoveronly),
.Touch .rootPageComponent .bookPageLinkComponent,
.PageSetAsCurrent .rootPageComponent .bookPageLinkComponent:not(.mouseoveronly) {
	display: block;
	opacity:1;
	pointer-events:auto;
}

#BookViewScroll {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	overflow-y: hidden;
}

#BookPageViewTemplate {
	/*	--ms-overflow-style: -ms-autohiding-scrollbar;
	-ms-overflow-x: auto;
	--ms-overflow-y: auto;
	-ms-content-zooming: zoom;
	-ms-content-zoom-limit-min: 100%;
	-ms-content-zoom-limit-max: 200%;
	-ms-scroll-chaining: chained;
	--ms-touch-action: manipulation;*/
	
}

#BookPageViewTemplate[dir=ltr] .leftContent {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 50%;
	height: 100%;
	/*background-color: red;
	overflow: hidden;*/
}

#BookPageViewTemplate[dir=rtl] .leftContent {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 50%;
	height: 100%;
}

#BookPageViewTemplate[dir=ltr] .rightContent {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 50%;
	height: 100%;
	/*background-color: yellow;
	overflow: hidden;*/
}

#BookPageViewTemplate[dir=rtl] .rightContent {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 50%;
	height: 100%;
}

#PageTemplate.centerPage {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

#BookPageViewTemplate .DoublePageView {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

.pageCommandPanel {
    position:absolute;
    top:0px;
    left:0px;
    /*right:0px;*/
   /* display:flex;
    display:-webkit-flex;*/
    margin-top:32px;
    padding-left:48px;
    padding-right:32px;
    z-index:22;
    box-sizing: border-box;

    display:none;
}

#leftPageOverlay .pageCommandPanel {
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
}
#rightPageOverlay .pageCommandPanel {
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
}

.Mouse .pageCommandPanel, .Pointer .pageCommandPanel, .pageCommandPanel:hover {
    display:flex;
    display:-webkit-flex;
}

.BookViewArrow {
	height: 4em;
	width: 3em;
	/*color: #FFFFFF;*/
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
    display:flex;
    display:-webkit-flex;
	opacity:0;
	pointer-events:none;
}

.PageFoldTrigger {
    display:none;
    position: absolute;
    right: 60px;
    top: 60px;
    min-width: 48px;
    max-width: 48px;
    min-height: 48px;
    max-height: 48px;
    border-radius: 24px;
    line-height: 48px;
    box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.25);
    opacity:0;
}

.hasPageFold .PageFoldTrigger {
    display: flex;
    display: -webkit-flex;
}

.Mouse .PageFoldTrigger, .PageFoldTrigger:hover, .Pointer .PageFoldTrigger {
	pointer-events:auto;
	opacity:1;
}

.PageFoldTrigger .dlm-ui-svg {
    width:24px;
    height:24px;
    margin: auto;
    color: white !important;
}

.PageFoldTrigger .dlm-ui-svg svg {
    width: 24px;
    height: 24px;
}


.Mouse .BookViewArrow, .BookViewArrow:hover, .Pointer .BookViewArrow {
/* 	display: block; */
	pointer-events:auto;
	opacity:1;
}

.BookViewArrow[role=left] {
	position: absolute;
	top: 50%;
	left: 0px;
}

.BookViewArrow[role=right] {
	position: absolute;
	top: 50%;
	right: 0px;
}

.BookViewArrow .dlm-ui-svg {
    width:24px;
    height:24px;
    margin: auto;
}

.BookViewArrow .dlm-ui-svg polyline {
   stroke-width: 16 !important;
   stroke-miterlimit: 16 !important;
}

.BookViewRead
{
	position: absolute;
	top: 66%;
	right: 0px;
	
	height: 100px;
	width: 3em;
	color: #FFFFFF;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
/* 	display: none; */
	opacity:0;
	pointer-events:none;	
}

.Mouse .BookViewRead, .BookViewRead:hover, .Pointer .BookViewRead {
/* 	display: block; */
	pointer-events:auto;
	opacity:1;
}

.BookViewReadPrevious
{
	display:flex;
    display:-webkit-flex;
	height: 50px;
	width: 3em;
}

.BookViewReadPrevious .dlm-ui-svg {
    width:24px;
    height:24px;
    margin: auto;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: rotate(180deg);
    transform-origin: 50% 50%;
    transform: rotate(180deg);
}

.BookViewReadNext
{
	display:flex;
    display:-webkit-flex;
	height: 50px;
	width: 3em;
}

.BookViewReadNext .dlm-ui-svg {
    width:24px;
    height:24px;
    margin: auto;
}

#ZoomMouseView {
	position: absolute;
	right: 4.5em;
	bottom: 40px;
	width: 4em;
	height: 2em;
    line-height: 1.5em;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	opacity:0;
	pointer-events:none;	
}

@media only screen and (max-width: 640px) and (orientation:portrait) {
    #ZoomMouseView {
        right:1.5em;
    }
}

.Mouse #ZoomMouseView, #ZoomMouseView:hover, .Pointer #ZoomMouseView {
	opacity:1;
	pointer-events:auto;
}

.ZoomMouseControl {
	position: absolute;
	width: 2em;
	height: 1.8em;
	margin-top: 0.75em;
	text-align: center;
    font-weight:800;
}

/* .ZoomMouseControl[disable]
{
	opacity:0.5;	
} */
#ZoomMouseControlMinus {
	left: 0px;
	top: 0px;
}

#ZoomMouseControlPlus {
	left: 2.2em;
	top: 0px;
}


/*body:not(.Mouse) .BookViewArrow*/
#BookReadAppBarTrigger {
	display: none;
	opacity:0;
	position: absolute;
	bottom: 24px;
	left: 20px;
	width: 40px;
	height: 40px;

	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#BookReadAppBarTrigger .dlm-ui-svg {
    width:24px;
    height:24px;
    margin: auto;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: rotate(90deg) translate(-2px,0);
    transform-origin: 50% 50%;
    transform: rotate(90deg) translate(-2px,0);
    margin:8px;
}

#BookReadAppBarTrigger .dlm-ui-svg polyline {
   stroke-width: 24 !important;
   stroke-miterlimit: 24 !important;
   stroke-linecap: square !important;
   stroke-linejoin: round !important;
}

.Mouse #BookReadAppBarTrigger, .Pointer #BookReadAppBarTrigger, body.hoverable #BookReadAppBarTrigger:hover {
	/*display: block;*/
	opacity:1;
}

#BookReaderView {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#BookReaderView #PageViewListTemplate {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow-y: hidden;
	/*overflow-x:hidden;*/
}

#BookReaderView #BookViewTemplate {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.bookReaderViewLayer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#PageAndThumbnailListView {
    display:flex;
    display:-webkit-flex;
    flex-direction:column;
    -webkit-flex-direction: column;
    align-items:stretch;
    -webkit-align-items:stretch;
    position:absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
}

#PageAndThumbnailListLayers {
    position:relative;
    left:0px;
    top:0px;
    bottom:0px;
    right:0px;
    flex-grow:1;
    -webkit-flex-grow:1;
    order:1;
    -webkit-order:1;
}

#BookHeader {
    order: 0;
    -webkit-order:0;
    display:none;
}

@media screen and (orientation:landscape) {
    body.SmallDevice #BookReaderView.layer-pagelist #BookHeader,
    body.SmallDevice #BookReaderView.layer-thumbnaillist #BookHeader,
    body.SmallDevice #BookReaderView.layer-transition #BookHeader {
        display: none;
    }
}

/*body.SmallDevice #BookReaderView.layer-pagelist .controlStyle,
body.SmallDevice #BookReaderView.layer-thumbnaillist .controlStyle,*/
body.SmallDevice #BookReaderView.layer-transition .controlStyle {
    display: none;
}

.PageListElementView {
	border-style: solid;
	border-color: transparent;
	background-clip:padding-box;
	
	-webkit-user-select:none;
}

.PageListElementView[selected] {
	border-style: solid;
	background-clip:padding-box;
	border-color:	rgb(0,122,204);
	box-shadow: 0px 0px 6px 1px;
    color: rgb(0,122,204);
}

.ThumbnailListElementView {
	border-style: solid;
	border-color: transparent;
	background-clip:padding-box;
	
	-webkit-user-select:none; 
}

.ThumbnailListElementView[selected] {
	border-style: solid;
	background-clip:padding-box;
    color: rgb(0,122,204);
	border-color:	rgb(0,122,204);
	box-shadow: 0px 0px 6px 1px;
	transform:scale(1.15,1.15);
	z-index:10;
	
	-webkit-transform:scale(1.15,1.15);
	-ms-transform: scale(1.15,1.15);
	-moz-transform: scale(1.15,1.15);
	-o-transform: scale(1.15,1.15);
	transform: scale(1.15,1.15);
	
	
}

#pageChooser {
	border-color: transparent;
	background-color: black;
	background-clip: padding-box;
	margin-bottom: 20px;
	overflow: hidden;
}

#pageChooser .pageView .pageNumber {
	font-size: 0.75em;
}

body.SmallDevice #GotoPageMenu {
    overflow:hidden;
}

    body.SmallDevice #GotoPageMenu .content {
        position:absolute;
        bottom:0px;
        left:0px;
        right:0px;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        justify-content: flex-end;
        -webkit-justify-content: flex-end;
    }

body.SmallDevice .PageChooserView .pageNumber {
    line-height:normal;
}

.PageChooserView #singlePage {
    position:relative;
    left:0px;
    top:0px;
    overflow:hidden;
}

.PageChooserView #doublePage {
    position:relative;
    left:0px;
    top:0px;
    overflow:hidden;
}

.PageChooserView #slider {
	width: 100%;
}

#BookTitleLabel {
	/*white-space: nowrap;*/
}

#PageNumberLabel {
	white-space: nowrap;
	font-size: 50%;
	font-weight: lighter;
}

.pageOverlayComponent {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 10;

	/*background-color: rgba(255,255,0,0.0);*/
}

body.ext-safari .pageOverlayComponent {                                                                                                                                                                                                                                       
	-webkit-transform: translate3d(0px, 0px, 1px);
}

.textOverlay {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

.textElement {
	position:absolute;
	background-color:rgba(255,255,0,0.5);
    opacity: 0.5;
}

.rootPageComponent {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	/*background-color: rgba(0,255,0,0.10);*/
}

.bookPageLinkComponent {
	background-color: rgba(0, 255, 0, 0.25);
	border-color: rgb(127, 127, 127);
	border-style: solid;
	border-width: 0px;
	cursor:pointer;
}

.bookPageLinkComponent.big {
    background-color: transparent;
    border-style: dashed;
    border-width:2px !important;

}

@media screen and (max-width:1025px) {
    .bookPageLinkComponent.big {
        border-width: 1px !important;
    }
}

.bookPageComponentHilight {
	background-clip:padding-box;
	border-color:	rgb(0,122,204);
	box-shadow: 0px 0px 10px 2px rgb(0,122,204) inset;
}

.Pointer .interactiveHTML, .Mouse .interactiveHTML, .PageSetAsCurrent .interactiveHTML {
	background-repeat: no-repeat; 
	background-position: 20px 90%;
	background-image: url('../DVL/images/interactiveIcon.png');
	background-size: 48px 48px;	
}

.slideOverlay {
    visibility:hidden;
	position: absolute;
	width: 64px;
	height: 64px;
	bottom: 0px;
	right: 0px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	background-position: bottom right;
	background-image: url('../DVL/images/photo.png');
	background-size: 64px 64px;
}

.Pointer .rootPageComponent .slideOverlay,
.Touch .rootPageComponent .slideOverlay,
.rootPageComponent .PageSetAsCurrent .slideOverlay {
    visibility:inherit;
}

.imageOverlay {
    visibility:hidden;
	background-repeat: no-repeat;
	background-position: bottom right;
	background-image: url('../DVL/images/photo.png');
	background-size: 64px 64px
}

.Pointer .rootPageComponent .imageOverlay,
.Touch .rootPageComponent .imageOverlay,
.rootPageComponent .PageSetAsCurrent .imageOverlay {
    visibility:inherit;
}

.bookPageLinkComponent.big {
    background-repeat: no-repeat;
	background-position: calc(100% - 16px) calc(100% - 16px);
	background-image: url('../DVL/images/link.png');
	background-size: 48px 48px
}

@media screen and (max-width:1025px) {
    .bookPageLinkComponent.big {
        background-position: calc(100% - 8px) calc(100% - 8px);
        background-size: 28px 28px;
    }
}

.htmlLeaveInteractiveButton {
	position: absolute;
	width:64px; 
	height:64px; 
	top:0px; 
	right:0px;
	background-repeat: no-repeat;
	background-position: bottom left;
	background-image: url('../DVL/images/leaveinteractiveIcon.png');
	background-size: 64px 64px
}

.videoPlayButton {
	position: absolute;
	width: 64px;
	height: 64px;
	left: 50%;
	top: 50%;
	margin-left: -32px;
	margin-top: -32px;
	background-size: 100% 100%;
	/*background-position: center center;*/
	background-repeat: no-repeat;
	background-image: url('../DVL/images/videoPlayIcon.png');
	cursor:pointer;
}

.videoPlayButton.paused {
	background-image: url('../DVL/images/videoPauseIcon.png');
}

.videoPreview {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.audioPlayButton {
	position: absolute;
	width: 48px;
	height: 48px;
	left: 50%;
	top: 50%;
	margin-left: -24px;
	margin-top: -24px;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	cursor:pointer;
}

.audioPlayButton:not(.playing) {
	background-image: url('../DVL/images/speakerIconMute.png');
}

.audioPlayButton.playing {
	background-image: url('../DVL/images/speakerIcon.png');
}

.audioPlayButton.paused {
	background-image: url('../DVL/images/speakerIconPause.png');
}

.audioPreview {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.bookPageComponentButton
{
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	cursor:pointer;
}

#DVLComponentBrowser {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    outline:0;
}

    #DVLComponentBrowser .browserFrame {
        position: absolute;
        height: 100%;
        width: 100%;
    }

.bookPageHtmlComponent.noInteraction {
	pointer-events:none;
}

div.bookPageHTMLComponent {
    display:flex;
    display:-webkit-flex;
    flex-direction:column;
    -webkit-flex-direction:column;
}

.bookPageHTMLComponent .bar {
    flex-shrink:0;
    -webkit-flex-shrink:0;
    display:flex;
    display:-webkit-flex;
}

body.has-back-button .bookPageHTMLComponent.setAsFullscreen .bar {
    display:none;
}

.bookPageHTMLComponent .frame {
    /*flex: 1 0 100%;
    -webkit-flex: 1 0 100%;*/
    position:absolute;
    width:100%;
    height:100%;
}

.bookPageHTMLComponent.fullscreen .browserContent {
    overflow:hidden;
}

#InputPageNumberView
{
	white-space: nowrap;
}

#InputPageNumber
{
	-webkit-appearance: none;
	text-align:right;
}

#InputPageNumberOk
{
	border:0px;
	color:white;
	min-width:60px;
}

body.SmallDevice #InputPageNumberView {
    display: flex;
    display:-webkit-flex;
    flex-direction: column;
    -webkit-flex-direction:column;
}

body.SmallDevice #InputPageNumberView h1 {
	margin-bottom: 0.33em;
    -webkit-margin-after:0.33em;
}

.inputArea {
    display: flex;
    display:-webkit-flex;
    align-items:stretch;
    -webkit-align-items:stretch;
}

    .inputArea .label {
        align-self: center;
        -webkit-align-self: center;
        padding-bottom:4px;
    }

body.SmallDevice #InputPageNumber, body.SmallDevice #NumberOfPageInBook, body.SmallDevice #InputPageNumberOk {
    margin-left:8px;
}

.bookPageMouseOverOpacity {
	opacity: 1;
}

#BookHeader {
		pointer-events:none;
}

@media screen and (orientation:landscape) {

    /* Portrait styles */
    #BookHeader h1 {
    	left:120px;
    }
}

@media screen and (orientation:portrait) {

    /* Portrait styles */
    #BookHeader h1 {
    	left:20px;
    }
}

/* text search css */

#TextSearchResultFlyout .content
{
    display: flex;
    display:-webkit-flex;
    flex-direction: column;
    -webkit-flex-direction:column;
    align-items: stretch;
    -weblit-align-items:stretch;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
}

#TextSearchResultFlyout #TextSearchResultView
{
    overflow: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.topelement #TextSearchResultFlyout #TextSearchResultView {
    -webkit-overflow-scrolling: touch;
}

#textSearchTopBar {
    padding:8px;
    -webkit-flex-shrink:0;
}

#textSearchTopBarContent {
    display: flex;
    display:-webkit-flex;
}

    #textSearchTopBarContent #searchTextEditor {
        display:flex;
        flex-grow:2;
        align-self:center;

        display:-webkit-flex;
        -webkit-flex-grow:2;
        -webkit-align-self:center;

        margin-left:0px;
    }

    #textSearchTopBarContent #InputTextSearch {
        flex-grow:1;
        -webkit-flex-grow:1;
    }

    #textSearchTopBarContent #searchTextStatus {
    	display:flex;
        align-self:center;

    	display:-webkit-flex;
        -webkit-align-self:center;

        vertical-align: baseline;
	    min-height:0px;
    }

     #textSearchTopBarContent #searchTextMessage {
        align-self:center;
        -webkit-align-self:center;
    }

    #textSearchTopBarContent #searchTextProgress {
        position: relative;
        display:flex;
        display:-webkit-flex;
        align-items:center;
        -webkit-align-items:center;
    }

/*#textSearchTopBar #searchTextEditor, #textSearchTopBar #searchTextMessage {
    margin-top:12px;
}*/

#InputTextSearch, #InputTextSearch:focus {
	width: 10em;
	border-width: 0px;
	padding:0px 8px 0px 8px;
	margin:0px;
	outline-width:0px;
}

#cmdSearch {
	padding: 0px;
	margin: 0px;
	vertical-align: top;
	border-width: 0px;
	display: inline-block;
	min-width: 32px;
	/*min-height: 32px;*/
	background-color: orange;
	background-image: url('../DVL/images/searchText.png');
	background-repeat: no-repeat;
	background-position: center center;
}

#searchTextEditor {
	vertical-align: top;
	/*top: 6px;*/
	margin-left: 8px;
	display: flex;
	-webkit-display:flex;
	position: relative;
	background-color: white;
	white-space: nowrap;
	/*max-height: 32px*/
}

#textSeachAppBar #searchTextEditor {
    top:6px;
}

#TextSearchResultView {
	min-width: 200px;
	min-height: 100px;
}

body:not(.SmallDevice) #TextSearchResultView {
	max-width:450px;
}

#TextSearchResultFlyout {
	padding: 0px;
}

#searchTextStatus {
	position:relative;
	vertical-align: top;
	min-height:32px;
}

/*#searchTextMessage
{
	padding-left:8px;
	padding-right:8px;
	vertical-align: middle;
}*/

/*#textSeachAppBar #searchTextMessage {
    padding-top:12px;
}*/



/*-----------------------------------------------------------------------------
 rule for text selection animation
-----------------------------------------------------------------------------
*/

 @-ms-keyframes textSelectionAnimationRight {

	0%  { -ms-transform:translate(0,0); }
	50% { -ms-transform:translate(-20px,0); }
	100% { -ms-transform:translate(0,0); }
}
    
@-moz-keyframes textSelectionAnimationRight {

	0%  { -moz-transform: translate(0,0); }
	50% { -moz-transform:translate(-20px,0); }
	100% { -moz-transform:translate(0,0); }
}
    
@keyframes textSelectionAnimationRight {

	0%  { transform:translate(0,0); }
	50% { transform:translate(-20px,0); }
	100% { transform:translate(0,0); }
}

@-webkit-keyframes textSelectionAnimationRight /* Safari and Chrome */
{
 0%   {-webkit-transform: translate(0,0); }
 50%  {-webkit-transform:translate(-20px,0); }
 100% {-webkit-transform:translate(0,0); }
}
 
@-ms-keyframes textSelectionAnimationLeft {

	0%  { -ms-transform:translate(0,0); }
	50% { -ms-transform:translate(-20px,0); }
	100% { -ms-transform:translate(0,0); }
}
    
@-moz-keyframes textSelectionAnimationLeft {

	0%  { -moz-transform: translate(0,0); }
	50% { -moz-transform:translate(-20px,0); }
	100% { -moz-transform:translate(0,0); }
}
    
@keyframes textSelectionAnimationLeft {

	0%  { transform:translate(0,0); }
	50% { transform:translate(20px,0); }
	100% { transform:translate(0,0); }
}

@-webkit-keyframes textSelectionAnimationLeft /* Safari and Chrome */
{
 0%   {-webkit-transform: translate(0,0); }
 50%  {-webkit-transform:translate(20px,0); }
 100% {-webkit-transform:translate(0,0); }
}
 
.textSelectedPointerRight {
    position:absolute;
    /*background-color:red;*/
    background-image:url('../DVL/images/fingerRight.png');
    background-size: 71px 40px;
    width:71px;
    height:40px;
    z-index:21;

    -webkit-animation: textSelectionAnimationRight 1.0s ease-out 0.2s 5;
	-webkit-animation-fill-mode:forwards;
	-ms-animation: textSelectionAnimationRight 1.0s ease-out 0.2s 5;	
	-ms-animation-fill-mode:forwards;
	-moz-animation: textSelectionAnimationRight 1.0s ease-out 0.2s 5;		
	-moz-animation-moz-animation:forwards;
	animation: textSelectionAnimationRight 1.0s ease-out 0.2s 5;	
	animation-fill-mode:forwards;
}

.textSelectedPointerLeft {
    position:absolute;
    /*background-color:red;*/
    background-image:url('../DVL/images/fingerLeft.png');
    background-size: 71px 40px;
    width:71px;
    height:40px;
    z-index:21;

    -webkit-animation: textSelectionAnimationLeft 1.0s ease-out 0.2s 5;
	-webkit-animation-fill-mode:forwards;
	-ms-animation: textSelectionAnimationLeft 1.0s ease-out 0.2s 5;	
	-ms-animation-fill-mode:forwards;
	-moz-animation: textSelectionAnimationLeft 1.0s ease-out 0.2s 5;		
	-moz-animation-moz-animation:forwards;
	animation: textSelectionAnimationLeft 1.0s ease-out 0.2s 5;	
	animation-fill-mode:forwards;
}

.textElement[selected] {
    background-color: rgb(91,46,197);
}

#BookHeader {
    height: auto;
    line-height: normal;
    padding:8px;
}

#BookHeader h2,  #BookHeader h1 {
    display: flex;
    display: -webkit-flex;
    background-color: inherit;
    position:relative;
}

#BookTitleLabel {
    flex-shrink: 100;
    -webkit-flex-shrink: 100;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right:0.25em;
}

#PageNumberLabel {
    align-self:flex-end;
    -webkit-align-self:flex-end;
    padding-bottom: 0.2em;
}

body.has-back-button .FullScreenView .topBar {
    display: none;
}

.FullScreenView .videoContent {
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: relative;
    margin:10%;
}

    .FullScreenView .videoContent video {
        position: absolute;
        height: 100%;
        width: 100%;
    }

.FullScreenView button.win-command .win-label,  .FullScreenView button.dlm-command .dlm-label {
    display: none;
}

body:not(.SmallDevice) #BookReadAppBar {
    display:flex;
    display:-webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap:wrap;
    justify-content: center;
    -webkit-justify-content: center;
}

    body:not(.SmallDevice) #BookReadAppBar #centerArea {
        flex-grow: 1;
        -webkit-flex-grow:1;
        min-width:100px;
        padding-left:12px;
        padding-right:12px;
    }

    body:not(.SmallDevice) #BookReadAppBar .dlm-slider {
        display:block;
        width:auto;
        min-width:100px;
        max-width:640px;
        margin-left:auto;
        margin-right:auto;
    }

body.SmallDevice #pageSlider {
    margin-bottom:8px;
}

@media only screen and (max-width: 640px) {
    body:not(.SmallDevice) #BookReadAppBar #leftArea {
        order:1;
        -webkit-order:1;
    }
    body:not(.SmallDevice) #BookReadAppBar #centerArea {
        order:0;
        -webkit-order:0;
        padding-left:24px;
        padding-right:24px;
        flex-basis: 90%;
        -webkit-flex-basis:90%;
    }
    body:not(.SmallDevice) #BookReadAppBar #rightArea {
        order:2;
        -webkit-order:2;
    }
}

#BookReadAppBar.disabled, body:not(.SmallDevice) #BookReadAppBar.disabled {
    display: none;
}

.DoublePageView, .SinglePageView, #singlePage, #doublePage
{
    border-style: solid;
    border-color: rgba(127,127,127,0.3);
    border-left-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-right-width: 1px;
    box-sizing: border-box;
}

#PageTemplate.SinglePageView {
	overflow:inherit;
}

/*.UIZoomViewContent.centerContent .pageView {
    border-style: solid;
    border-color: rgba(0,0,0,0.05);
    border-left-width: 1.25px;
    border-top-width: 1.25px;
    border-bottom-width: 1.25px;
    border-right-width: 1.25px;
    box-sizing: border-box;
    background-clip:border-box;
}

.UIZoomViewContent .leftContent .pageView {
    border-style: solid;
    border-color: rgba(0,0,0,0.05);
    border-left-width: 1.25px;
    border-top-width: 1.25px;
    border-bottom-width: 1.25px;
    border-right-width: 0px;
    box-sizing: border-box;
    background-clip:border-box;
}
.UIZoomViewContent .rightContent .pageView {
    border-style: solid;
    border-color: rgba(0,0,0,0.05);
    border-left-width: 0px;
    border-top-width: 1.25px;
    border-bottom-width: 1.25px;
    border-right-width: 1.25px;
    box-sizing: border-box;
    background-clip:border-box;
}*/

#TurningReaderTemplate:focus, #BookViewTemplate:focus, #PageViewListTemplate:focus,  #ThumbnailViewTemplate:focus {
    outline-color:transparent;
}

.luceneSearchPanel {
}

.luceneSearchPanelBackground {
    opacity:0.75;
}

.luceneSearchMessagePanel {
    background-color: rgba(127, 127, 127, 1);
    padding: 8px;
    margin: 8px;
    min-width: 150px;
    text-align: center;
    border-radius: 8px;
    color: white;

    position:relative;
    margin-right:28px;

    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16), 0px 2px 10px 0px rgba(0,0,0,0.12);

    position:relative;
}

.luceneSearchMessage {

}

.luceneSearchMessageProgress {
    position:relative;
    min-width:20px;
    min-height:20px;
    margin-left: 8px;
    margin-right: 2px;
}

.luceneSearchMessageProgress .win-ring {
    color:white;
}

/* for customizer */
#PageViewListTemplate .PageListElementView {
}
#PageViewListTemplate div[selected] {
}
#ThumbnailViewTemplate .ThumbnailListElementView {
}
#ThumbnailViewTemplate div[selected] {
}

/* for gateFold */

.pageView .gateFold {
    /* in front of pageoverlay div */
    z-index:11;
}
.gateFold.left {
    box-shadow: 4px 2px 6px 0px rgba(0,0,0,0.1), 16px 2px 30px rgba(0,0,0,0.33)
}
.gateFold.right {
    box-shadow: -4px 2px 6px 0px rgba(0,0,0,0.1), -16px 2px 30px rgba(0,0,0,0.33)
}
.gateFold.top {
    box-shadow: 2px 4px 6px 0px rgba(0,0,0,0.1), 2px 16px 30px rgba(0,0,0,0.33)
}
.gateFold.bottom {
    box-shadow: 2px -4px 6px 0px rgba(0,0,0,0.1), 2px -16px 30px rgba(0,0,0,0.33)
}

.pageView.gateFold .pageNumber {
    display:none !important;
}

.pageView.gateFold .progressWheel, .pageView.gateFold progress {
    display: none !important;
}

.pageView.disableGateShadow .gateFold {
    box-shadow: none !important;
}

.gateFoldOpenOverlay {
    position:absolute;
    z-index:2;
    overflow:visible;
    opacity:0;
}

.Mouse .gateFoldOpenOverlay, .gateFoldOpenOverlay:hover, .Pointer .gateFoldOpenOverlay {
	pointer-events:auto;
	opacity:1;
}

.gateFold.left .gateFoldOpenOverlay {
    right:0px;
    top:0px;
    bottom:0px;
    max-width:4px;
    min-width:4px;
}

.gateFold.right .gateFoldOpenOverlay {
    left:0px;
    top:0px;
    bottom:0px;
    max-width:4px;
    min-width:4px;
}

.gateFold.top .gateFoldOpenOverlay {
    left:0px;
    right:0px;
    bottom:0px;
    max-height:4px;
    min-height:4px;
}

.gateFold.bottom .gateFoldOpenOverlay {
    left:0px;
    right:0px;
    top:0px;
    max-height:4px;
    min-height:4px;
}

.gateFoldOpenOverlay .openButton  .dlm-ui-svg {
    width:24px;
    height:24px;
    margin: auto;
    color: white !important;
}

.gateFoldOpenOverlay .openButton {
    position:absolute;
    min-width:32px;
    min-height:64px;
    max-width:32px;
    max-height:64px;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items:center;
    color: white !important;
}

    .gateFoldOpenOverlay .openButton svg {
        width: 24px;
        height: 24px;
    }


.gateFold.left .openButton {
    right:0px;
    border-top-left-radius:32px;
    border-bottom-left-radius:32px;
    top:35%;
}

.gateFold.right .openButton {
    left:0px;
    border-top-right-radius:32px;
    border-bottom-right-radius:32px;
    top:35%;
}

.gateFold.top .openButton {
    bottom:0px;
    border-top-left-radius:32px;
    border-bottom-left-radius:32px;
}

.gateFold.bottom .openButton {
    top:0px;
    border-top-left-radius:32px;
    border-bottom-left-radius:32px;
}

.gateFoldOpenOverlay .openButton svg {
    transform-origin:50% 50%;
    -webkit-transform-origin:50% 50%;
}

.gateFold.right .openButton svg {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.gateFold.top .openButton  {
    transform: translate(0px, 16px) rotate(90deg);
    -webkit-transform: translate(0px, 16px) rotate(90deg);
}

.gateFold.bottom .openButton  {
    transform: translate(0px, -16px) rotate(-90deg);
    -webkit-transform: translate(0px, -16px) rotate(-90deg);
}

/* Precreate rule for customizer to optimize start speed */
.reader-thm {}
.reader-thm .viewStyle {}
.reader-thm .thm-window {}
.reader-thm .thm-colorAccentBorder {}
.reader-thm .win-textbox {}
.reader-thm .thm-textColor {}
.reader-thm button.thm-textColor .win-commandimage.win-commandglyph {}
.reader-thm .thm-textColor .win-label {}
.reader-thm input {}
.reader-thm input:focus {}
.reader-thm .win-textbox:focus {}
.reader-thm button.dlm-menu-command .win-label {}
.reader-thm button {}
.reader-thm .win-commandimage {}
.reader-thm .win-commandimage.win-commandglyph {}
.reader-thm button .win-label {}
.reader-thm button.win-button {}
.reader-thm .thm-colorAccent {}
.reader-thm html.win-hoverable button:enabled:hover .win-commandimage.win-commandglyph {}
.reader-thm button:enabled:active win-commandimage {}
.reader-thm .win-link {}
.reader-thm .win-progress-bar {}
.reader-thm .win-progress-ring {}
.reader-thm .win-ring {}
.reader-thm .progressWheel.dlm-ui-svg {}
.reader-thm .thm-colorAccentBorder:focus {}
.reader-thm .thm-colorAccentAsBackground {}
.reader-thm ::-ms-input-placeholder {}
.reader-thm .thm-bar {}
.reader-thm .thm-bar .viewStyle {}
.reader-thm .thm-bar .thm-window {}
.reader-thm .thm-bar .thm-colorAccentBorder {}
.reader-thm .thm-bar .win-textbox {}
.reader-thm .thm-bar .thm-textColor {}
.reader-thm .thm-bar button.thm-textColor .win-commandimage.win-commandglyph {}
.reader-thm .thm-bar .thm-textColor .win-label {}
.reader-thm .thm-bar input {}
.reader-thm .thm-bar input:focus {}
.reader-thm .thm-bar .win-textbox:focus {}
.reader-thm .thm-bar button.dlm-menu-command .win-label {}
.reader-thm .thm-bar ::-ms-input-placeholder {}
.PageListElementView.selected {}
.ThumbnailListElementView.selected {}
.reader-thm .controlStyle {}
.reader-thm .controlStyle .win-commandimage.win-commandglyph {}
body.hoverable .reader-thm .controlStyle:hover {}
#startPanel .progressWheelAnimated > svg {}
.reader-thm .progressWheelAnimated > svg {}