html, body {padding: 0;  margin: 0; font-family: Arial, Helvetica, sans-serif; background: #E7E7E7;}
.flex {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}
#headerWrap {position: fixed; top: 0; z-index: 99; width: 100%; max-height: 92px;}
#headerWrap header { background: #f8f9fa; align-items: center; overflow-x: auto;}
#headerWrap h1 {font-weight: 400; display: inline-block; margin: 0 20px 0 0; font-size: 150%; padding: 10px; white-space: nowrap;}
nav.actions {padding: 3px 10px; background: #FFF; color: #7A7A7A; border-bottom: 2px solid #EAEAEA;}
nav.actions ul { list-style: none;padding: 0; margin: 0; align-items: center;}
nav.actions ul > li {position: relative;}
nav.actions ul > li.group-end {margin: 0 20px 0 0;}
nav.actions ul > li.srch-page { display: none;}
nav.actions .pager-wrap {padding: 7px 10px; font-weight: 700;}
nav.actions .fa-solid {font-size: 20px; padding: 7px 10px; cursor: pointer; border: 1px solid transparent; border-radius: 5px;}
nav.actions .fa-solid:hover {border: 1px solid rgba(128,128,128,.3); background: #F1F8FF; color: #333;}

#pagesWrap {width: 50%; margin: 112px auto 20px;}
#pagesWrap > .page-wrap {background: #FFF; padding: 40px; margin: 0 0 20px;  overflow: hidden; overflow-x: auto; -webkit-box-shadow: 0px 4px 12px -4px rgba(0,0,0,.38); -moz-box-shadow: 0px 4px 12px -4px rgba(0,0,0,.38); box-shadow: 0px 4px 12px -4px rgba(0,0,0,.38);}
#pagesWrap > .page-wrap:last-child {margin: 0;}
#pagesWrap > .page-wrap > .page-body { position: relative;}
/* Aspose emits Word's hanging indent as negative text-indent, which shifts text over <ol> markers and pulls images outside their paragraphs. */
#pagesWrap [style*="text-indent: -"], #pagesWrap [style*="text-indent:-"] { text-indent: 0 !important;}
#pagesWrap div[style*="-aw-headerfooter-type:footer-primary"] { margin-top: 10px;}

.cp-html-srch-pager .pager-status {margin: 0 5px;}
.cp-html-srch-pager .pager-actions a {color: #7A7A7A;}
.cp-html-srch-pager .pager-actions .fa-solid { font-size: 15px;}
.cp-highlight {background: yellow;}
.cp-highlight.current {background: orange;}
.cp-html-srch-ctrls-wrap {border: 2px solid #EAEAEA; border-radius: 5px; white-space: nowrap;}
.cp-html-srch-ctrls-wrap input {border: 0; padding: 8px; outline: none;}
.cp-html-srch-ctrls-wrap .cp-html-srch-pager {margin: 0; padding: 0 0 0 8px;}
.cp-html-srch-ctrls-wrap .cp-html-srch-pager .pager-status {padding: 4px 8px 4px 0; border-right: 2px solid #CCC;}

#zoomStatus {font-weight: 700; font-size: 100%;}
#zoomStatus::before {display: none;}
#zoomStatus::after {content: "\f078"; font-size: 12px; top: -2px; position: relative; padding: 0 0 0 5px;}
#zoomList {display: none;position: absolute;min-width: 100px; padding: 0; list-style: none; font-size: 13px; background-color: rgb(255, 255, 255);  border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px; background-clip: padding-box;}
#zoomList > li {padding: 5px 10px; cursor: pointer; border-bottom: 1px solid #EAEAEA;}
#zoomList > li:last-child {border-bottom: 0;}

a[name^="_Toc"] {scroll-margin-top: 92px;}

#navWrap {max-width: 280px; width: 100%; z-index: 2; transition: margin-left .3s; margin-left: -280px; position: relative;}
#navWrap.active {margin: 0;}

#navToggler {display: none;position: fixed; top: 0; left: 0; bottom: 0; margin: auto; background: #333; color: #FFF; padding: 10px 6px 4px 8px; cursor: pointer; border-radius: 0 5px 5px 0; height: 60px; width: 15px; transition: margin-left .3s;}
#navToggler .fa-solid {position: absolute; top: 0; bottom: 0; margin: auto; height: 23px; font-size: 25px;}
#navWrap.active #navToggler {display: block; margin-left: 280px;}
#navWrap.off #navToggler {display: block; margin-left: 0;}
#navWrap .contents {position: fixed; top: 90px; bottom: 0; padding: 10px; max-width: 260px; overflow-y: auto; background: #F5F5F5;}

#tableOfContents a {text-decoration: none; color: #0000FF;}
#tableOfContents ul.cp-toc {list-style: none; margin: 0; padding: 0; font-size: 90%; line-height: 110%;}
#tableOfContents ul > li {margin: 0 0 5px; position: relative;}
#tableOfContents li.toc-parent {margin: 0 0 10px; padding: 0 0 0 12px;}
#tableOfContents li.toc-parent > a { font-weight: 700;}
#tableOfContents ul.toc-children {display: none; margin: 3px 0 0; font-size: 90%; padding: 0; list-style: none; background-color: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px; background-clip: padding-box;}
#tableOfContents ul.toc-children > li {margin: 0; padding: 5px; border-bottom: 2px solid #EAEAEA;}
#tableOfContents .fa-solid {cursor: pointer; position: absolute; left: 0; font-size: 17px;}
#tableOfContents .fa-caret-down {left: -4px;}

@media only screen and (max-width: 768px) {
    #pagesWrap {width: 80%;}
}

@media only screen and (max-width: 620px) {
    #zoomStatus, #zoomIn, #zoomOut {display: none;} /* no zoom on mobile.  will be a real pain*/
    nav.actions {overflow-x: auto;}
    nav.actions ul > li.group-end.zoom {display: none;}
    #pagesWrap {width: 96%;}
    #headerWrap h1 {margin: 0; visibility: hidden;  width: 0;}
}

@media print {
    #headerWrap, #navWrap {display: none !important;}
    #pagesWrap {width: 100% !important; margin: 0; zoom: normal !important;}
    #pagesWrap > .page-wrap {padding: 20px 0; margin: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
}