/*********************/

.instructorOverlay{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    z-index:9998;
    /*background-color:var(--modeColor);*/
    /*background-color:var(--overlayColor) !important;*/
    /*background-color:rgba(255,255,255,0.8) !important;*/
    /*background-image: url(/assets/texture/overlay_TEXTURE.png);*/
    /*background-image: url(/assets/texture/overlay_TEXTURE_white.png);*/
    /*background-repeat: repeat;*/
}
.instructorBooklet{
    
}
.instructorBooklet .close-button{
    position: absolute;
    /*top: 2px;*/
    bottom: -26px;
    left: 50%;
    /*transform:translate(-50%,0);*/
    width: 52px;
    height: 52px;   
    border-radius: 12px;
    border: 1px solid black;    
    overflow:hidden;
}
.instructorIcon{
    border-radius:12px;
    border:1px solid black;
}
/**/
/**/
.instructorPagebackground{
    width:100%;
    height:100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
}
.instructorPagebackground.contain{
    background-size: contain;
}

.instructorBooklet{
	--instructoColor:black;
}


.dark-mode .instructorBooklet.auto-theme{
	--instructoColor:var(--primary-text);
    --instructorBgColor: #131313;
    --instructorCulrColor: #131313;
}
.dark-mode .auto-theme .nextPage .icon{    
    background-image: url(/assets/icons/instruction/flip-right-white.svg);
}
.dark-mode .auto-theme .prevPage .icon{    
    background-image: url(/assets/icons/instruction/flip-left-white.svg);
}
/*.instructorBooklet.dark-themed{*/
/*    --instructorBgColor: #131313;*/
/*    --instructorCulrColor: #131313;*/
/*}*/
/*.dark-mode .dark-themed .nextPage .icon{    */
/*    background-image: url(/assets/icons/instruction/flip-right-white.svg);*/
/*}*/
/*.dark-mode .dark-themed .prevPage .icon{    */
/*    background-image: url(/assets/icons/instruction/flip-left-white.svg);*/
/*}*/
/*.dark-mode .dark-themed .pagenum{color:white;}*/


.halignLeft{
    background-position-x: left;
}
.valignCenter{
    background-position-y: center;
}
.color-red{
    color:red !important;
}
.color-white{
    color:white !important;
}
/*.color-mode{*/
/*    color:black;*/
/*}*/
/*.dark-mode .color-mode{*/
/*    color:white;*/
/*}*/
.instructorBooklet h1{
    font-weight:400;
}
.instructorBooklet p{
    margin:0;
    padding:0;
    color: var(--instructoColor);
}
.textbox1{
    padding:12px 0px;
}
.p16{
    font-size:16px;
    font-weight:500;
    line-height:18px;
}
.p20{
    font-size:20px;
    font-weight:500;
    line-height:22px;
}

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


/*************/
.flipbook .page {
    position: relative;
    z-index: 2; /* vagy magasabb */
    pointer-events: auto !important;
}

.flipbook .page {
    backface-visibility: hidden;
}

.page{
	pointer-events:auto;
}

.page.front{
}
.page.front:after{
    /*content:'';*/
    /*position:absolute;*/
    /*bottom:0;*/
    /*right:0;*/
}
.page.front:before{
    content:'';
    position:absolute;
    bottom:0;
    right:0;
    opacity:0;
    border-width:0px;
    border:solid;
    border-color:var(--instructorCulrColor) var(--instructorBgColor) var(--instructorBgColor) var(--instructorCulrColor);
    /*border-color:var(--instructorBgColor) var(--instructorCulrColor) var(--instructorCulrColor) var(--instructorBgColor);*/
    border-top-left-radius:0px;
    border-bottom-right-radius: none;
    box-shadow:1px 1px 5px rgba(0,0,0,.4);
    box-shadow:1px 1px 8px rgba(0,0,0,.4);
    transition: .2s ease-out;
}
.page.front:hover:before{
    border-width:28px;
    opacity:1;
}

.page.back{
}
.page.back:before{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    border-width:0px;
    border:solid;
    border-color:var(--instructorCulrColor) var(--instructorBgColor) var(--instructorBgColor) var(--instructorCulrColor);
    transform:rotate(90deg);
    border-bottom-right-radius:5px;
    box-shadow:1px 1px 5px rgba(0,0,0,.4);
    transition: .2s ease-out;
}
.page.back:hover:before{
    border-width:28px;
}
/*.turned .page.front:before,*/
/*.turned .page.back:before{*/
/*    display:none;*/
/*}*/
/**/
.instructionWrap{
    padding:26px 26px 52px 26px;
}
.instructionWrap.full{
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index:-1;
}
.sticker-img.valign{
    height:100% !important;
    width:auto !important;
}


/**************/

.pagenum{
    position:absolute;
    bottom:16px;
    font-weight:600;
    width:52px;
    display:flex;
    justify-content:center;
    color: var(--instructoColor);

}

.page.front .pagenum{
    right:13px;
}
.page.back .pagenum{
    left:13px;
}

.page:hover .pagenum{
    display:none;
    
}