.instructorBooklet{
    
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    /*max-width:572px;*/
    /*max-width:468px;*/
    /*max-width:468px;*/
    /*max-width:416px;*/
    /*max-width:1508px;*/
    /*height:100vh;*/
    /*height:calc(100vh - 52px);*/
    /*max-height:50%;*/
    /*overflow:hidden;*/
    z-index:9998;
    display:none;
    
    /*transform: none !important*/
    
}

.instructorBooklet.bottom{
    top:40%;
    /*bottom:26px;*/
}

.instructorBooklet.center{
    top:20%;
    /*transform:translateY(-50%);*/
    /*bottom:26px;*/
}

.instructorBooklet.open{
    display:block;
}


.instructorBooklet.drag {
  /*position:fixed !important;*/
  /*border-color: white;*/
  /*box-shadow: 3px 6px 24px rgba(0, 0, 0, 0.5);*/
  /*z-index:10001;*/
  transform: scale(1);
}



.nextPage{
    position:absolute;
    border-radius:12px;
    /*border:1px solid black;*/
    bottom:0px;
    right:0px;    
    display:flex;
}
.nextPage .tile{
    width: var(--block2);
    height: var(--block2);
    /*background-image: url(/assets/icons/instruction/flip-right.svg);*/
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;    
    display:none;
}
.nextPage .icon{
    position:absolute;
    bottom: 7px;
    right: 7px;
    width: var(--block1);
    height: var(--block1);
    background-image: url(/assets/icons/instruction/flip-right-black.svg);
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;    
    display:none;
}

.page:hover .nextPage .icon{display:block;}

.prevPage{
    position:absolute;
    border-radius:12px;
    /*border:1px solid black;*/
    bottom:0px;
    left:0px;    
    display:flex;
}
.prevPage .tile{
    width:var(--block2);
    height:var(--block2);
    background-image:url(/assets/icons/instruction/flip-left.svg);
    background-position: center;
    background-size:70%;
    background-repeat:no-repeat;    
    display:none;
}
.prevPage .icon{
    position:absolute;
    bottom: 7px;
    left: 7px;
    width: var(--block1);
    height: var(--block1);
    background-image: url(/assets/icons/instruction/flip-left-black.svg);
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    display:none;
}



.page:hover .prevPage .icon{display:block;}
/*Global*/
.stick16x8{
    width:var(--block16);
    height:var(--block8);
}
.sticky{
    position:sticky;
}
.lgrey{
    background-color:grey;
}