body {
    font-size: 10px;
}

/* I'm sorry for this shit, 
it was made by previous developer 
and I haven't enought time to fix it all*/

/* ---------------- interactive ---------------- */

.book-container,
.interactive-container {
	margin-top: 30px;
	margin-bottom: 30px;
}

.interactive-container {
	display: none;
	height: max-content;
}

.interactive-book {
	margin: 0 auto;
	-webkit-box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.5);
}

.interactive-book div {
	position: relative;
}

.interactive-book > div:not(:last-child) {
	margin-bottom: 30px;
}

.interactive-page {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0
}

/* ---------------- audio ---------------- */

div.button-audio{
	position:absolute;
	width:430px;height:70px;
	cursor: pointer;
}

/* ---------------- bookblock override ---------------- */

.bb-bookblock {
	width: 400px;
	height: 300px;
	margin: 0 auto;
	position: relative;
	z-index: 100;
	-webkit-perspective: 1300px;
	perspective: 1300px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bb-page {
	position: absolute;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition-property: -webkit-transform;
	transition-property: transform;
}

.bb-vertical .bb-page {
	width: 50%;
	height: 100%;
	left: 50%;
	-webkit-transform-origin: left center;
	transform-origin: left center;
}

.bb-horizontal .bb-page {
	width: 100%;
	height: 50%;
	top: 50%;
	-webkit-transform-origin: center top;
	transform-origin: center top;
}

.bb-page > div,
.bb-outer,
.bb-content,
.bb-inner {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bb-vertical .bb-content {width: 200%;}

.bb-horizontal .bb-content {height: 200%;}

.bb-page > div {width: 100%;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}

.bb-vertical .bb-back {-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);}

.bb-horizontal .bb-back {-webkit-transform: rotateX(-180deg);transform: rotateX(-180deg);}

.bb-outer {width: 100%;overflow: hidden;z-index: 800;}

.bb-overlay, 
.bb-flipoverlay {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.bb-flipoverlay {background-color: rgba(0, 0, 0, 0.2);}

.bb-bookblock.bb-vertical > div.bb-page:first-child,
.bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.bb-bookblock.bb-horizontal > div.bb-page:first-child,
.bb-bookblock.bb-horizontal > div.bb-page:first-child .bb-back {
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

/* Content display */

.bb-vertical .bb-front .bb-content {left: -100%;}

.bb-horizontal .bb-front .bb-content {top: -100%;}

/* Flipping classes */
.bb-vertical .bb-flip-next,
.bb-vertical .bb-flip-initial {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.bb-vertical .bb-flip-prev {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.bb-horizontal .bb-flip-next,
.bb-horizontal .bb-flip-initial {
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

.bb-horizontal .bb-flip-prev {
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

.bb-vertical .bb-flip-next-end {
	-webkit-transform: rotateY(-15deg);
	transform: rotateY(-15deg);
}

.bb-vertical .bb-flip-prev-end {
	-webkit-transform: rotateY(-165deg);
	transform: rotateY(-165deg);
}

.bb-horizontal .bb-flip-next-end {
	-webkit-transform: rotateX(15deg);
	transform: rotateX(15deg);
}

.bb-horizontal .bb-flip-prev-end {
	-webkit-transform: rotateX(165deg);
	transform: rotateX(165deg);
}

.bb-item {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	background: transparent;
}

/* custom bb classes */

.book-container {
	height: auto;
}

.bb-custom-wrapper {
	width: 100%;
	height: auto;
	position: relative;
}

.bb-custom-wrapper .bb-bookblock {
	width: 64rem;
	height: auto;
	aspect-ratio: 1.568627 / 1;
	-webkit-perspective: 2000px;
	perspective: 2000px;
	background: 
		url(/application/templates/images/book/bg-book-left.png) 0 0 no-repeat,
	 	url(/application/templates/images/book/bg-book-right.png) 100% 0 no-repeat;
	-webkit-background-size:auto 100%;-o-background-size:auto 100%;-moz-background-size:auto 100%;background-size: auto 100%;
	-webkit-box-shadow: 0px 18px 44px -15px rgba(51,51,51,1);	
	-moz-box-shadow: 0px 18px 44px -15px rgba(0,51,51,1);
	box-shadow: 0px 18px 44px -15px rgba(51,51,51,1);

}
.bb-custom-side img {
	height: 100%;
	width: auto;
	display: inline-block;
}

.bb-custom-side {
	width: 49%;
	float: left;
	height: 100%;
	overflow: hidden;
	background-color: #fff;
}

/* -------------- navigation -------------- */

.bb-custom-wrapper > nav {
	width: 100%;
}

.bb-custom-icon {
	width: 46px;
	height: 93px;
	z-index: 1000;
	display: block;
	position: absolute;
	top: 50%;
	margin: -46px 0 0 0
}

#bb-nav-prev {
	background: url(/application/templates/images/book/page-arrow-left.png) 0 0 no-repeat;
	left:0;
}

#bb-nav-next {
	background: url(/application/templates/images/book/page-arrow-right.png) 0 0 no-repeat;
	right: 0;
}

.bb-custom-icon:hover {
	opacity: 0.7
}

.page-navigation {
	height: 100%;
}
.page-navigation #page-nav-prev,
.page-navigation #page-nav-next {
	background: none;
	width: 50px;
	height: 100%;
	position: absolute;
	z-index: 1000
}

.page-navigation #page-nav-prev{left: 0;}
.page-navigation #page-nav-next{right: 0;}

@media (max-width: 700px) {
    html {
        min-width: 0;
    }

    .book-container {
        box-sizing: border-box;
        width: calc(100% - 10px);
        height: auto !important;
        margin-right: 5px;
        margin-left: 5px;
    }

    .bb-custom-wrapper .bb-bookblock {
        width: calc(100vw - 10px) !important;
    }

    #bb-nav-prev,
    #bb-nav-next {
        display: none;
    }
}

.book-center{
	background: url("/application/templates/images/book/bg-prev-shadow.png") 1.8rem 0 no-repeat;
	position: absolute;
	left:0;right: 0;
	margin: 0 auto;
	z-index: 100;
	height: 100%;
	width: 9.8rem;
	background-size: 7.6rem 100%;
	opacity: 0.6;
}

/* -------------- navigation bottom -------------- */

.nav-thumb {
	text-align: center;
	margin-top: 2.5rem;
}
.nav-thumb .d-prev-modul{
	border: 2px solid #333;
	margin: 0 0 10px;
	-webkit-box-shadow: 0px 8px 13px -7px rgba(51,51,51,1);
	-moz-box-shadow: 0px 8px 13px -7px rgba(51,51,51,1);
	box-shadow: 0px 8px 13px -7px rgba(51,51,51,1);
	display: inline-block;
	vertical-align: top;
	position: relative;
	width: 12%;
	min-width: 12rem;
	max-width: 13rem;
	height: 100%;
	cursor: pointer;
}
.nav-thumb .d-prev-modul:hover {
	border:2px solid rgba(250,240,95,0.8);
}
/* .nav-thumb .d-prev-shadow{
	background: url(../img/bg-prev-shadow.png);width: 26px;
	display: inline-block;
	height: 77px;opacity: 0.7
} */
.thumb-numb{
	position: absolute;
	left:0;
	right:0;
	top:2.7rem;
	margin: 0 auto;
	width: 60%;
	background:rgba(0,0,0,0.7);
	color: #fff;
	font-size: 1.4rem;
	border-radius: .5rem;
	padding: 6px 0 2px;
}
.nav-thumb .d-prev-modul-active .thumb-numb {
	background:rgba(250,240,95,0.8);
	color: #000;
}

.nav-thumb .d-prev-modul-active, .nav-thumb .d-prev-modul-active:hover{
	border:4px solid #faf05f;
	border-radius: 5px;
	width: 12.3%;
	min-width: 12.5rem;
	max-width: 13.5rem;
	margin: -2px -2px;
}

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


.bb-custom-side {
	/* position: relative !important; */
	z-index: 0 !important;
}

.bb-custom-side .img-wrap {
	background-color: transparent;
	position: relative;
	height: 100%;
	z-index: 5 !important;
}

.bb-custom-side.left .img-wrap {
	box-shadow: inset -10px 0 20px -15px rgba(0, 0, 0, .5);
}

.bb-custom-side.right .img-wrap {
	box-shadow: inset 20px 0 20px -15px rgba(0, 0, 0, .5);
}

.bb-custom-side img {
	width: 100%;
	position: relative;
	z-index: 1 !important;
}

.bb-custom-side.left {
	margin-left: 1%;
	/* box-shadow: inset -10px 0 20px -15px rgba(0, 0, 0, .5); */
}

.bb-custom-side.right  {
	margin-right: 1%;
	/* box-shadow: inset 20px 0 20px -15px rgba(0, 0, 0, .5); */
}

.nav-thumb .d-prev-modul {
    height: 100% !important;
    margin-bottom: 10px !important;
    margin-left: 3px !important;
    margin-right: 3px !important;
    background-color: #ffffff !important;
}

.nav-thumb .d-prev-modul-active,
.nav-thumb .d-prev-modul-active:hover {
    margin-left: 3px !important;
    margin-right: 3px !important;
    /* width: 13% !important; */
    box-sizing: border-box !important;
}

.nav-thumb .d-prev-modul .background-wrap {
    position: relative !important;
    width: 100% !important;
}

.nav-thumb .d-prev-modul .background-wrap .img-wrap {
    width: 50% !important;
    float: left !important;
}

.nav-thumb .d-prev-modul .background-wrap img {
    width: 100% !important;
    float: left !important;
}

/* .nav-thumb .d-prev-shadow {
    width: 26px !important;
    display: inline-block !important;
    height: 72px !important;
    opacity: 0.7 !important;
    clear: both !important;
    position: absolute !important;
    left: calc((117px - 26px) / 2);
}

.nav-thumb .d-prev-modul-active .d-prev-shadow {
    height: 75px !important;
    left: calc((122px - 26px) / 2);
} */

.nav-thumb .d-prev-modul .thumb-numb {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc((100% - 24px) / 2);
    margin: 0 auto !important;
    padding: 0 !important;
    width: 60% !important;
    background: rgba(0,0,0,0.7) !important;
    color: #fff !important;
    font-size: 14px !important;
    border-radius: 5px !important;
    line-height: 24px !important;
}

.button-audio {
	/* border: 1px solid red; */
	z-index: 100;
}

/* ================== player ================== */

.player-visible {
	position: fixed;
	z-index: 1000;

	top: -10vh;
	right: -10vw;

	
    /* transform: rotate(90deg); */
}

/* ================== verForPrint ================== */

.verForPrint {
	display: block;
	text-align: center;
	text-decoration: underline;

	font-size: 1.8rem;
}

.verForPrint:hover {
	cursor: pointer;
}

/* ================== to edit data ================== */

.selectFrame{
    width: 0;
    height: 0;
    line-height: 0;
    background-color: #6582c9;
    position: absolute;
    z-index: 100;
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; 
    filter: alpha(opacity=40);
    opacity: .4;

    border: 1px solid red;
}

.editImgBtn i, .editAudioBtn i {
	font-size: 1.5rem;
}

.editImgBtn, .editAudioBtn, .addNewAudioBtn {
	position: absolute;
	width: max-content;
	height: max-content;
	

	cursor: pointer;
	background-color: purple;

	z-index: 100;
}

.bb-custom-side.rigth .editImgBtn {
	right: 0;
	top: 0;
}

.bb-custom-side.left .editImgBtn {
	left: 0;
	top: 0;
}

.bb-custom-side.rigth .editAudioBtn {
	right: 0;
	bottom: 0;
}

.bb-custom-side.left .editAudioBtn {
	left: 0;
	bottom: 0;
}

.addNewAudioBtn {
	top: 0;
	right: 20%;
}

.editForm {
	position: absolute;
	background-color: #fff;
	color: #000;

	padding: .5rem;
	box-shadow: 0 1rem 0.6rem -0.6rem black;
	border: .2rem solid black;

	height: 30vh;
	width: 30vh;

	top: calc((100% - 30vh) / 2);
	left: calc((100% - 30vh) / 2);

	z-index: 100;
}

.editForm div {
	width: max-content;
}

.editForm .closeFormBtn {
	cursor: pointer;
}

.editForm .closeFormBtn i {
	font-size: 2rem;
}

.editForm .closeFormBtn:hover {
	opacity: .8;
}

.editForm input[type="submit"], input[type="file"], button {
	margin-bottom: 1rem;
}

.button-audio.editMode {
	border: 1px solid red;
}

.header .user-options .book-edit-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.book-edit-state {
    position: relative;
    flex: 0 0 auto;
    min-width: 76px;
    padding: 4px 8px 4px 27px;
    border: 1px solid currentColor;
    border-radius: 20px;
    background: #555;
    color: #fff;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
}

.book-edit-state::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
}

.book-edit-toggle[aria-checked="true"] .book-edit-state {
    padding: 4px 27px 4px 8px;
    background: #286c40;
}

.book-edit-toggle[aria-checked="true"] .book-edit-state::before {
    left: auto;
    right: 5px;
}

.book-edit-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
}