body{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}
/*FOR NOW*/
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
.bookarea{
    display: block;
    margin: auto;
    width: auto;
    max-width: 100vw;
    height: 100vh;
}
.bookarea h1{
    text-align: center;
    font-size: 20px;
    display: none;
}
.flipbook{
    width: 100%;
    /* max-width: 1450px; */
    height:100%;
    max-height: 100vh;
    justify-content: center;
    margin: auto;
    /* max-height: 98.1vh;*/
}

.flipbook img{
    height: 100%;
    width: 100%;
    position: absolute;
}

.accessible .flipbook img:focus{
    outline: 1px;
    border: 2px solid orange;
}

#pageTxt{
    display: none;
}

.page.stf__item[pos="0"]{
    background-image: url(images/Blank.png);
    background-repeat: no-repeat;
    background-position: center;
}
.page.stf__item[pos="0"] img{
    opacity: 0;
}

/* COVERS STYLES */
.fch{
    /* background: linear-gradient(90deg, rgba(2, 0, 36, .2) 0%, rgba(0, 0, 0, .3) 1%, rgba(255, 255, 255, .2) 2%, rgba(247, 254, 255, .3) 4%, rgba(0, 0, 0, .3) 6%, rgba(255, 255, 255, .2) 12%, rgba(255, 255, 255, .1) 100%); */
    box-shadow: -10px 10px 11px grey;
    box-sizing: border-box;
}
.bch{
    /* background: linear-gradient(270deg, rgba(2, 0, 36, .2) 0%, rgba(0, 0, 0, .3) 1%, rgba(255, 255, 255, .2) 2%, rgba(247, 254, 255, .3) 4%, rgba(0, 0, 0, .3) 6%, rgba(255, 255, 255, .2) 12%, rgba(255, 255, 255, .1) 100%); */
    box-shadow: 10px 10px 11px grey;
    box-sizing: border-box;
}
.fc, .bc{
    z-index: -1;
    position: relative;
}

.animate{transition:all .5s ease-in-out;
    transition-delay:.1s;}

.zoom{
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    overflow: auto;
    overflow: hidden;
    transform: scale(1);
    cursor: url(/images/Cursors/Magnifier-minus.png), grab !important;
}

.zoom.active{
    cursor: url(/images/Cursors/Magnifier-minus.png), grabbing !important;
}

.zoomDiv.ToFull{
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 100% !important;
    max-height: 100vh;
    display: block;
    /* opacity: 1; */
    /* margin: auto auto; */
    /* overflow: auto; */
}

.zoomDiv {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0 !important;
    left: 0 !important;
    display: none;
    z-index: 1001;
}

.zImg {
    height: 100%;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}
#zImg1{
    display:none;
}
#zImg2{
    display:none;
}

#zoomImg1::-webkit-scrollbar {
    display: none;
}

#zoomImg1 {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

div#zoomImg1.active {
    cursor: grabbing;
}

#zoomImg2::-webkit-scrollbar {
    display: none;
}

#zoomImg2 {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

div#zoomImg2.active {
    cursor: grabbing;
}

/* Flipper Buttons */
/* .btn {
    background-color: red;
    height: 50px;
    width: 40px;
    position: fixed;
    display: flex;
    top: 50%;
    align-content: space-around;
    justify-content: center;
    align-items: center;
}

.divbtn {
    height: auto;
}

#prebtn1 {
    left: 0;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
} */

#nxtbtn2 {
    right: 0;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
}
div#pageturn > .flipbtn {
    position: fixed;
    font-size: 40px;
    font-weight: bold;
    border: 1px solid gray;
    border-radius: 60px;
    width: 65px;
    height: 65px;
    text-align: center;
    color: #434242;
    background: none;
    border: none;
    font-family: serif;
}
#pageturn > .flipbtn:hover{
    color: black;
    cursor: pointer;
    border-color: black;
    box-shadow: 1px 3px 4px 1px grey;
}
.accessible div#pageturn > .flipbtn:focus{
    border: 2px solid orange;
    outline: 1px;
}
#pageturn > .flipbtn#anxt:hover{
    box-shadow: -1px 3px 4px 1px grey;
}
#aprev {
    left: 0;
    top: 50%;
    padding-right: 0px !important;
    transform: translateY(-50%);
    display:none;
}
#anxt {
    right: 0;
    top: 50%;
    padding-left: 0px !important;
    transform: translateY(-50%);
}
#alastp {
    right: 0;
    top: 90%;
    padding-left: 0px !important;
    transform: translateY(-50%);
}
#afirstp {
    left: 0;
    top: 90%;
    padding-right: 0px !important;
    transform: translateY(-50%);
    display:none;
}

div#pageturn {
    position: absolute;
}

.zoomSlider {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 1002;
    display: none;
    transform: translate(-50%, 0%);
}

/* MENU */
.menu{
    position: absolute;
    top: 10px;
}
.menu[status="inactive"]{
    left: 0;
    transition: left .5s;
    height: 10px;
}
.menu[status="active"]{
    left: 72px;
    transition: left .5s;
}
.mainbtn{
    width: 40px;
    height: 40px;
    font-size: 18px;
    background-color: darkgrey;
    color: white;
}
ul#mainmenu {
    padding: 0;
    background: #f2f2f2;
    padding: 10px;
    padding-top: 12px;
    position: relative;
    left: -72px;
    box-sizing: border-box;
    top: -56px;
    border: 1px solid black;
}
.menubtns{
    display: block;
    width: 45px;
    height: 45px;
    border-radius: 0px;
    padding: 3px;
    position: relative;
    margin-bottom: 0;
    transition: background-color .5s ease-out;
    cursor: pointer;
}
.menubtns:not(last-child){
    margin-bottom: 3px;
}
/* .zbtn.menubtns.deactive{
    pointer-events: none;
    background-color: grey !important;
    border-style: inset;
    filter: contrast(0.5);
    box-shadow: none;
} */
.menubtns:hover:not(.engaged){
    filter: drop-shadow(2px 4px 6px black);
}
/* THUMBNAILS */
.showThumbs{
    z-index: 5000;
}
.accessible .menubtns:focus{
    border: 2px solid orange;
    outline: 1px;
}
.menubtns:active, .menubtns.engaged{
    box-shadow: -2px -2px 3px;
}
.menubtns img{
    width: 100%;
    box-sizing: border-box;
}
.zbtn{
    font-size: 43px;
    /* padding-bottom: 5px; */
    /* margin-bottom: 0.5em; */
}


.thmDiv {
    /*transform: translate(0px, 0px);*/
    /* transform: translate(0px, 130px); */
    width: 100%;
    height: 230px;
    position: fixed;
    left: 0;
    bottom: -230px;
    transition: all .5s ease-out;
    z-index: 3000;
}
.thmDiv.showThumbs{
    transform: translateY(-113%);
}

/*
#thmb {
    height: 100%;
    align-content: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
*/

.car-thmb {
    height: 100%;
    /* top: -45px; */
    position: relative;
}

#thmb {
    height: 100%;
    width: 70%;
    padding-top: 12px;
}

.thmIcon {
    position: relative;
    top: 1px;
    left: 50%;
    transform: translate(-50%, 0%);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    height: 30px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    cursor: pointer;
    font-size: 18px;
    border: 0;
}

div#customize-controls {
    z-index: 10000;
    position: relative;
    cursor: pointer;
    top: 50%;
}

i.fa-solid.fa-chevron-left.car-left.prev {
    left: 2em;
}

i.fa-solid.fa-chevron-right.car-right.next {
    right: 2em;
}

i.fa-solid.fa-chevron-down {
    display: none;
}
/* Affects all chevron paging icons */
.fa-solid::before {
    color: rgba(0, 0, 0, 0.4);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6);
}
.slider{
    padding: 0;
    box-sizing: border-box;
}
.slider img {
    max-width: 100%;
    max-height: 170px;
}
.accessible .slider:hover, .slider:focus{
    border: 2px solid orange;
    outline: 1px;
    accent-color: orange;
}
button.slider{
    cursor: pointer;
    max-width: 95%;
    max-height: 175px;
}
.sliderDiv.tns-item p.thumbNumbs {
    font-size: 14px;
    font-family: sans-serif;
    margin: 4px auto 0px;
}

.tns-nav {
    display: none;
}

.car-wrapper {
    text-align: -webkit-center;
    text-align: -moz-center;
        /* text-align: center; */
    height: 100%;
    /*top: 50%;
    transform: translateY(-50%);*/
}

.car-right {
    right: 10px;
    position: absolute;
    top: 50%;
}

.car-left {
    position: absolute;
    top: 50%;
    left: 10px;
}

#customize-controls i {
    font-size: 25px;
}

.zbtn.menubtns.deactive{
    pointer-events: none;
    background-color: #060606 !important;
    /*border-style: inset;*/
    filter: contrast(0.5);
    box-shadow: none;
}
#zbtnm {
    display: none;
    z-index: 10005;
    font-size: 35px;
    padding-bottom: 5px;
    margin-bottom: 0.5em;
}


/* Hide scrollbar for the entire page */
body {
    overflow: hidden; /* Hide the scrollbar */
}

/* For webkit browsers (Chrome, Safari, etc.) */
body::-webkit-scrollbar {
    display: none; /* Hide scrollbar for webkit browsers */
}

/* For Firefox */
body {
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}


/***SEARCH***/
.searchCanvas, .hzCanvas, .hypsvg{
    position: absolute;
    z-index: 100;
    top: 0;
}
#topCanvasEven, #hypmapEven{
    left: 100% !important;
    transform: translateX(-100%);
}
#topCanvasOdd, #hypmapOdd{
    left: 0% !important;
}

.hypsvg a:hover{
    cursor: pointer;
    opacity: 1;
    animation: none;
}
.hypsvg a{
    opacity: 0;
    animation: svgopac 3s 1 forwards;
}
@keyframes svgopac {
    0% {opacity: 1;}
    100% {opacity: 0.2;}
}


.resultsPage{
    color: #0D5097;
    text-decoration: underline;
    cursor: pointer;
    width: fit-content;
}
.resultsPage:hover{
    color: red;
}

/***ACCCESIBILITY***/
#acsbtn:focus, .acsbtn:focus{
    border: 2px solid orange !important;
    outline: 1px;
    border-width: 5px;
}
.accessMenu{
    position: absolute;
    top: 5px;
    right: 5px;
    font-family: Arial, Tahoma, sans-serif;
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 10000;
}
.acsbtn.menubtns{
    margin-bottom: 0;
    position: absolute;
    right: 0;
    width: 65px;
    height: 65px;
    z-index: 1;
    background-color: #F2F2F2;
    border-radius: 4px;
    box-shadow: 2px 2px 3px;
    border: 2px solid black;
}
.acsbtn.menubtns.engaged{
    background-color: palevioletred;
}
.acsitms{
    background-color: #0D5097;
    color: #F2F2F2;
    list-style-type: none;
    padding: 8px;
    margin: 0px;
    border: 2px double black;
    position: fixed;
    right: 70px;
    top: 6px;
    overflow-x: hidden;
    transition: right .5s ease-out;
    z-index: 0;
    cursor: pointer;
}
.acsitms.hidemenu{
    right: -300px;
    position: fixed;
    transition: right .5s ease-out;
}
.acsitms li{
    border: 2px solid #F2F2F2;
    margin-bottom: 3px;
    margin-top: 3px;
    padding: 6px;
}
.acsitms #onoff.acsoff::after{
    content: " OFF";
    font-weight: bold;
    color: #93F06A;
}
.acsitms #onoff[status="on"]::after{
    content: " ON";
    font-weight: bold;
    color: #93F06A;
    padding-right: 0.5em;
}
.acsitms #highcon.conoff::after{
    content: " OFF";
    font-weight: bold;
    color: #93F06A;
    padding-right: 0.5em;
}
.acsitms #highcon.conon::after{
    content: " ON";
    font-weight: bold;
    color: #93F06A;
}
.acsitms li:focus{
    border-color: orange;
    outline: 1px;
}
body.showhighcon .page img, body.showhighcon .acsitms li, .data-thumbnails img, .menubtns{
    filter: contrast(1.5);
}

/***POPUPS AND MISC/MENU ITEMS***/
#sbx, #sharepop, #helpme{
    position: fixed;
    top: 20%;
    left: 50%;
    border: 4px ridge red;
    padding: 10px;
    background: white;
    border-radius: 8px;
    min-width: 15%;
    width: fit-content;
    min-height: 15%;
    height: fit-content;
    transform: translateX(-50%);
    max-height: 50%;
    display: flex;
    flex-direction: column;
}
#helpme h3{
    text-align: center;
    color: #0D5097;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    margin-bottom: 6%;
}
#sharepop{
    max-width: 400px;
    width: fit-content;
}
#sharepop p{
    font-size: 16px;
    margin: 3px;
}
#sharepop h3{
    font-family: Arial, Helvetica, sans-serif;
    color: #2297e0;
    margin: 5px;
}
.hreflink{
    cursor: pointer;
    border: 1px solid rgb(53, 53, 53);
    padding: 3px;
    font-weight: 600;
    color: #434242;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    font-size: 18px;
    box-sizing: border-box;
    display: block;
}
#tocdiv{
    display: block;
    max-width: 250px;
    padding: 6px;
    left: 85px;
    position: fixed;
    top: 50px;
    width: fit-content;
    min-width: 10%;
    border-radius: 2px;
    height: fit-content;
    max-height: 50%;
}
#tocdiv ul {
    padding: 0;
    list-style: none;
    text-align: left;
    padding: 0 10px;
    line-height: 1.5;
    line-break: anywhere;
}
#tocdiv ul li[onclick]{
    cursor: pointer;
}
#tocdiv ul li{
    cursor: default;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: end;
    font-family: Arial, Helvetica, sans-serif;
}
.toc2{
    overflow: hidden;
    white-space: nowrap;
}
span.toc2::after {
    content: "...................................";
    overflow: hidden;
    white-space: nowrap;
}
span.toc1 {
    line-break: normal;
    flex: 1 0 fit-content;
    max-width: 70%;
}
span.toc3 {
    flex: 1 0 fit-content;
    width: max-content;
}
div#bktobtn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: red;
    padding: 10px;
    color: white;
    border: 3px outset black;
}
div#bktobtn:hover{
    filter: invert(1);
    cursor: pointer;
}
div#bktobtn:active{
    border-style: inset;
}
div#closeTOC, #closeSearch, #closeshare, #closehelp {
    position: relative;
    width: fit-content;
    display: block;
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 2px 6px;
    top: -10px;
    margin-right: -6px;
    cursor: pointer;
    float: right;
}
#closeSearch, #closeshare, #closehelp{
    right: 0;
    border: none;
}
div#closeshare, #closehelp {
    position: absolute;
    top: 3px;
    right: 5px;
}
#closeshare:hover, #closehelp:hover{
    color: red;
}

div#srslts {overflow-y: scroll;display: block;}
#sbx input{
    margin: auto;
    display: block;
    font-size: 20px;
}
div#dragHandle {
    text-align: center;
    color: #0D5097;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    cursor: move;
    margin-bottom: 6%;
}
button#sinbtn {
    margin: 8px auto;
    display: block;
    padding: 18px;
    font-size: 18px;
}

.menubtns {
    background-color: var(--buttonBkg, blue);
}

.car-first {
    position: absolute;
    top: 50%;
    left: 5px;
    font-size: 26px;
}

.car-last {
    right: 5px;
    position: absolute;
    top: 50%;
    font-size: 26px;
}

#car-ff {
    z-index: 10000;
    position: relative;
    cursor: pointer;
    top: 50%;
}

div#tocHeader {
    display: flex;
    justify-content: space-between;
    list-style: none;
    text-align: left;
    padding: 0 10px;
    line-height: 1.5;
    line-break: anywhere;
    color: white;
    cursor: move;
}

/*** TOUCHSCREEN ***/
.zImg, .flipbook{
    touch-action: pinch-zoom;
}