option {background: #005b60;}
html{overflow-x: hidden;}


  button, select {
    font-size: 16px;
    color: white;
    border-radius: 50px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background-color: transparent;
  }

.header-left{
	  transition: margin-top 1.4s ease;

}

select#speedControl {
    width: 65;
    margin-left: 40;
}
 

  input[type="range"] {
height: 4px;
  width: 120px;
    accent-color: #e0e0e2;
    position: absolute;
    right: 92; }


  .time-display {
    font-size: 16px;
    margin: 10px 0;
  color: #fff;
    margin-left: 40;}

  .fa {
    margin-left: 6px;
  }
   
  
.header{
background: url(//bayanbox.ir/download/3954096042819921727/lessonBack-copy.png) fixed;
    height: 0;
 }


li.active1,li.active , .nazrefarhangy ,#sedayepayam , .sidebox ,.align,div#pos-article-display-108475,.footer,.dokme-float, .block-sidebar,h2.blog-short-description,.post-title,.post-details.bottom,.header-right{
    display: none;
}

.post-content {
height: 100%;
}
.block-content {
    width: 100%;
    margin: 0;
}
.post.post_detail {
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    margin: 0;
    padding: 0;
}


.neshanx {
    position: sticky;


}
h2{
    font-size: 25px;
    color: #005b60;
    font-weight: bold;
    text-shadow: 2px 2px 0px #fff;
line-height: 50px !important;}

.onvanx{
background: linear-gradient(359deg, #efd3a4, #fff5e4);
}



    .header .header-right {
        top: 0px;
        right: -15vw;
    }

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    margin-right: calc(-.5 * var(--bs-gutter-x))
}

    .d-lg-none {
        display: none!important
    }

:root,[data-bs-theme="light"] {
	--dg-shadow-color: #b0adad;
	--dg-text-shadow-color: rgb(255, 255, 255);
	--dg-active-color: #375e8a;
	--dg-active-bg-color: #eaeaea;
	--dg-auth-color: #0078fe;
	--dg-tab-sides-color: #717171;
	--dg-tab-sides-bg-color: #fff;
	--dg-tab-sides-border-color: #ddd #ddd #ddd;
	--dg-tab-sides-hover-bg-color: #eee;
	--dg-tab-sides-active-border-color: #ddd;
	--dg-taqrirview-rgb1: 0,0,0,.73;
	--dg-taqrirview-rgb2: 0,0,0,.13;
	--dg-taqrirview-bg: #e9e9e9 url(/img/bg-b1.png);
	--dg-taqrirview-back-bg-color: #f8f8f8;
	--dg-taqrirview-border-color: #b0b0b0;
	--dg-taqrirview-divider-bg-color: #e7e7e7;
	--dg-taqrirview-divider-border-color: #c6c1c1;
	--dg-taqrirview-box-mark-bg-color: #ffff8b;
	--dg-taqrirview-box-header-bg-color: #f3f3f3;
	--dg-taqrirview-box-header-border-top-color: #fff;
	--dg-taqrirview-box-header-border-bottom-color: #acacac;
	--dg-taqrirview-box-header-active-color: #3313b3;
	--dg-taqrirview-box-header-active-bg1: -webkit-linear-gradient(top, rgb(214, 231, 255), rgb(170, 194, 227));
	--dg-taqrirview-box-header-active-bg2: linear-gradient(to bottom, rgb(214, 231, 255), rgb(170, 194, 227));
	--dg-taqrirview-box-desc-border-bottom-color: #b5b5b5;
	--dg-taqrirview-box-number-bg-color: #6fb7e0;
	--dg-taqrirview-box-number-border-color: #ebebeb;
	--dg-taqrirview-blockquote-bg-color: #feffe4;
	--dg-taqrirview-blockquote-border-color: #eee;
	--dg-taqrirview-blockquote-shadow-color: #e7e6e6;
	--dg-taqrirview-relate-color: #767676;
	--dg-taqrirview-relate-bg-color: #eaeaea;
	--dg-taqrirview-relate-border-color: #b2b2b2;
	--dg-taqrirview-relate-shadow-color: 2px 2px 0 0 rgb(234, 234, 234), 3px 3px 0 0 #bcbbbb;
	--dg-taqrirview-relate-hover-color: #1f344d;
	--dg-taqrirview-relate-hover-bg-color: #e5eefa;
	--dg-taqrirview-relate-hover-border-color: #b2c2d1;
	--dg-taqrirview-relate-hover-shadow-color: 2px 2px 0 0 rgb(234, 234, 234), 3px 3px 0 0 #9ebedf;
	--dg-taqrirview-relate-list-color: #fffbc5;
	--dg-taqrirview-puls-bg-color: #36c;
	--dg-taqrirview-result-color: #6858a7;
	--dg-taqrirview-result-bg-color: #dbeaff;
	--dg-taqrirview-search-highlight-color: #e8050f;
	--dg-taqrirview-revaya-color: #0571c0;
	--dg-bookview-bg-img: url('/img/bk.svg');
	--dg-bookview-header-bg-color: #f5f5f5;
	--dg-bookview-header-border-color: #d7d7d7;
	--dg-bookview-header-shadow-color: #d7d7d7;
	--dg-filter-invert: 0;
	--dg-player-returntime-color: #fff;
	--dg-player-returntime-bg-color: #82bdfb;
}



.post-content img {
    max-width: 100%;
}


main-menu ul {
height: 40px;
    display: flex;
    align-items: center;
margin-top: 0px;
}


nav#main-menu ul li a {
    padding-top: 12;
    padding-bottom: 10;
}

.main-menu ul ul {
    right: -35%;
left: 6;}

.main-menu {
    margin-left: 25;
}

@media only screen and (max-width: 800px) {

.post-content {margin-top: -25;}

	.main-menu{top: 0px;}
	
	.main-menu-wrp nav ul ,.main-menu.resp {
    margin: 0;
}	
.header-left,.main-menu ul .active1,.main-menu ul .active

{display: none;}

.main-menu ul .active5
{
position: absolute;
    left: 0;
}

.main-menu ul .active6
{
position: absolute;
    left: 100;
}

.main-menu-wrp nav ul{
margin-left: -10;
}
    .main-menu.resp {
					transition: top 1.4s ease;
        display: block;
position: absolute;
    width: 100%;
height: 55;
z-index: 77;
     box-shadow: inset 0px -2px 5px -2px rgb(0 0 0 / 64%);
    background: #40c0c3;
    }
.content-wrp {
    margin: 0;
}
}

@media only screen and (max-width: 526px) {

input[type="range"] {
    width: 84px !important;
right: 75px !important;
}

label {
    right: 54px !important;
}
 .main-menu ul .active5 {
        display: none;
	}
    .main-menu ul .active6 {
        left: 6px;
}
}



@media only screen and (max-width: 600px) {

nav#WEBO {
    display: block !important;
}
}



.matnetaqrir {
    direction: rtl;
 font-family: 'AdobeArabic', sans-serif;
font-size: 30;
    text-align: justify;
    margin: 40;
    text-indent: 1em;
    line-height: 45px;}

.matnetaqrir p
{margin: 0;}

.taqrirviewTopLink{
background: linear-gradient(359deg, #ffebc9, #efd3a4, #efd3a4);
 padding-top: 50px;
margin-top: -55;
	z-index: 1;
   top: -20;}
	
button.playFromTimeBtn{
display: flex;
z-index: 1;
align-items: center;
top: 94;
direction: rtl;
background: linear-gradient(45deg, #c8f3f4, #f8ffff); 
	position: sticky;
    border-radius: 0;
    width: 100%;
    height: 50;
padding: 0 15 0 0;
    font-size: 20;
    border: 2px solid #000;
    margin: 0 1 0 0;
    text-align: right;
    color: #000;
    font-family: "yekan", "tahoma", "arial", "Times New Roman", Times, Arial, serif;
}



.playFromTimeBtn.active{
background: linear-gradient(45deg, #54a7a9, #c6fdfd, #c6fdfd);}

div#waveform {
	direction: ltr;
    cursor: crosshair;
	height: 10px;
    background: #dafeff;
}

a.btn.btn-outline-primary {
box-shadow: 0 10px 6px rgba(0, 0, 0, 0.2), inset 0 0 10px 2px rgb(144 144 144 / 50%);    
	box-shadow: 0 10px 6px rgba(0, 0, 0, 0.2);
    color: #040400;
    background: #c8f3f4;
    border: 1px solid #ffb100;
    width: 100%;
    text-align: center;
    text-decoration: none;
    border-top-width: 3px;
  line-height: 19px;
    margin-top: 10;
    margin-right: -1;
    height: 33;
	display: flex;
align-items: center;
    justify-content: space-evenly;}

.btn-group.btn-group-flex {
    display: flex
;padding-bottom: 15;
flex-direction: row-reverse;
justify-content: center;
	font-size: 20px;
	margin: 0 5% 0 5%;
}

.balapenhan{ width: 100%;
    height: 70;
margin-right: 10px;
    position: sticky;
    top: 0;
    background-image: url(https://bayanbox.ir/download/5168480340612289994/image.png) !important;
    background-color: #fffded;
    background-size: 100px 50px !important;
    margin-bottom: -70;
}

.neonvanx.fixed h2{
    font-size: 23;

}


.neonvanx.fixed {
 animation: bounceIn 0.5s ease-out forwards;
position: fixed;
    top: -10;
    right: 40;
}

.neonvanx.fixed.vidio {
    top: -4;
	
}
.zamandashed{
	border: 1.5pt dashed #f69a00;
    background: #fff;
font-size: 21px;
}

.zamandashed.active {
  background: yellow;
}
.zamandashed.active {
  background:#fff3bf;
  transition:background .25s;
}

.select-container {
top: 180px;
    direction: rtl;
    font-size: 13px;
    margin-bottom: -60px;
    z-index: 10;
    position: relative;
    float: left;
    margin-left: 43px !important;
    display: flex
;
    flex-wrap: nowrap;

}

.select-container.fixed {
    position: fixed;
    top: 6px;
    animation: bounceIn 0.5s ease-out;
}

.select-container.fixed.vidio {
    top: 12px;

}
.safehaylayt {
  position: relative;
  display: inline-block;
  opacity: 0;
  transition: opacity 0.3s ease;
  overflow: hidden;
}

.safehaylayt.active-shine::after {
  content: "";
  position: absolute;
  top: 0;
  right: -75%;   /* ✅ شروع از راست */
  width: 50%;
  height: 100%;
  background: linear-gradient(
    -120deg,  /* ✅ جهت برعکس شد */
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: shineRTL 2s ease-in-out 2; /* ✅ سه بار */
}

.flex-anim {
  transition: flex-basis 2s ease-in-out;
}

@keyframes shineRTL {
  0%   { right: -75%; }
  100% { right: 125%; }
}
.select-container select{
font-size: 14px;
    font-family: 'yekan';
    width: 107px;
    margin-top: -1px;
    margin-right: 5px;
    text-shadow: 1px 1px 0px #000000;
    background: #005b60;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25), -2px -2px 5px rgba(255, 255, 255, 0.8);
    border: 1px solid #ccc;
    color: #ffe19e;
    transition: top 1.4s ease;
}

       
        .info-dayere {
           width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #ffe19e;
    display: flex
;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: -46px;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 0px #000000;
        }
        
        .info-dayere:hover {
           background-color: #005b60;
    transform: scale(1.1);
    text-shadow: none;
    box-shadow: 0 0 1px 3px #6fff00a6;
        }
        
.info-dayere:hover i {
    font-size: 21px;
    margin-top: 2px;
}

        .tooltip {
position: absolute;
    top: 50px;
    left: 10px;
    width: 165px;
background-color: #025055;
	color: white;
    padding: 6px 9 9 9px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgb(0 0 0 / 36%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
    text-align: right;
    font-size: 12px;
    text-align: justify;
    line-height: 1.6;
        }
        
        .info-dayere:hover .tooltip {
            opacity: 1;
            visibility: visible;
            top: 40px;
        }
        
        .tooltip:after {
            content: '';
            position: absolute;
            top: -6px;
            left: 20px;
            width: 12px;
            height: 12px;
            background-color: #025055;
            transform: rotate(45deg);
        }

#tab-book,#tab-taqrir{transition: all 0.4s ease;}
@keyframes bounceIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}



.manba {
    background: #FFF;
    margin: 30 20 0;
    height: 50;
    font-size: 23;
padding: 3 2% 3 5;
position: sticky;
    top: 0;
    border: 2px solid #fffbdd;
z-index: 100;}

.manba.margin{
    margin-top: 30;
}

.nameketab {
	line-height: 45px;
color: #005b60 !important;
	text-decoration: none !important;
	display: flex;
    justify-content: space-between;
}

.nameketab:hover{
color: #000 !important;
}

.nameketab span {
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10;
	font-size: 18;
}

.manbaspan{ 
	font-size: 23px !important;
	float: left;
    margin-top: 13;
}


.row .scroll ,div#tab-book
{
    overflow-y: auto;
max-height: calc(100vh - 52px);
        overflow-x: hidden;
}

div#tab-book {
 background-color: #fffded;
    background-image: url(https://bayanbox.ir/download/5168480340612289994/image.png) !important;
    background-size: 100px 50px !important;
    overflow-y: auto;
left: 0px;
    position: absolute;}

.audio-container {
	border-top: 1px solid #14414f;
	z-index: 1000;
width: 100%;
    position: fixed;
    bottom: 0;
    margin-top: 0;
    background: linear-gradient(45deg, #074b4e, #04292a);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    direction: rtl;
    font-family: sans-serif;
    text-align: center;
  }

 #waveform {
    height: 30px;
}

  .controls {
   display: flex
;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    flex-direction: row-reverse;
  }

.marker-zard{
	transform: translateY(0);
position: absolute;
    left: -5;
    top: 0;
height: 10;
    width: 2;
    padding: 0;
    border-radius: 0;
    border: none;
    background: #fb94eb;
    z-index: 30000;
}

.wavesurfer-marker {
position: absolute;
    width: 100%;
}

#downloadBtn{position: absolute;
    right: 14;}

 .nameostad h2 {
overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;
line-height: 65px !important;
}

.circle {
flex-shrink: 0;
    width: 90px;
   margin: -45 15 0 0;
}
.nameostad {
    display: flex;
    justify-content: flex-start;
flex-direction: row-reverse;}

.circle img {
transform: scalex(-1) scaley(1);}


.onvanspanadad{background: #005b60;
    color: #fff;
    width: 40;
    margin-top: 3;
    height: 40;
    display: flex
;
    border-radius: 50px;
    justify-content: space-around;}

.onvanspanmatn{
margin-right: 10;}

div#tab-taqrir {
direction: ltr;
    text-align: right;

    right: 0px;
    position: absolute;
background: #fdfcf3;
}
.circlesadr{ 
flex-shrink: 0;
   height: 75;
    margin: 15 30 15 15;
    background: url(https://bayanbox.ir/download/1341027009862886258/lessonBack.png) fixed right;
    z-index: 1;
width: 219px;
    border-radius: 50px;
    display: flex
;box-shadow: 0 10px 6px rgba(0, 0, 0, 0.2);
    flex-direction: row-reverse;
    justify-content: flex-start;}

.sarsafe 
{z-index: 2;
    position: relative;
overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}

.circlesadr img{
filter: brightness(0.94);
margin: 0 0 0 20;
width: 75;
filter: brightness(1.12);
}
.ara:hover {
    background: none;
    color: #fff !important;
    text-shadow: 1px 2px 1px #000;
}

.neonvanx {
transition: top 1.4s;
	position: absolute;
    top: 25;
    right: 320;
display: flex;
    flex-direction: row-reverse;}

.neonvanx h2 {
    font-size: 35;
overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;
}

.namekelas {
   margin: 0 105 0 0;
}

.namekelas h1 {
overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;
margin: 0;
    line-height: 1.5;
    font-size: 35px;
    color: #005b60;
    font-weight: bold;
    text-shadow: 2px 2px 0px #fff;
}

.ara {
color: #7d5700  !important;
text-shadow: 2px 2px 0px #fff;
margin-top: -10;
    font: 70px / 1.1em "IranNastaliq", "yekan", "tahoma", "arial", "Times New Roman", Times, Arial, serif;
    display: block;
    line-height: 100px;
    text-decoration: none !important;
}



a.btn.btn-outline-primary:hover {
    background: url(https://bayanbox.ir/download/1341027009862886258/lessonBack.png) fixed right !important;
border-color: #00b9bd !important;
    z-index: 1 !important;
    box-shadow: 0 10px 6px rgb(0 0 0 / 44%);}


.tabbtn-controls {
	height: 55;
	display: none;
z-index:100;
position: relative;
width: 220;
}
	

.pakhseFilm {
  display: flex;
  justify-content: center; 
  align-items: center;     
}

.pakhseFilm video {
  max-width: 95%;  
min-width: 180px;
  max-height: 92%; 
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.6);
}
			


.pakhsheFilmBtn {
position: sticky;
top: 102;
 display: inline-flex;
flex-direction: row-reverse;
align-items: center;
justify-content: flex-start;
color: #005b60;
    background: #ffe19e;
border: 1px solid #999;
	text-shadow: 1px 1px 0px #fff;
    border-radius: 5px;
margin: -41px 92% 0 15px;
    z-index: 1;
    cursor: pointer;
font-family: "yekan";
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.3s ease;
    width: 32px;
}

.pakhsheFilmBtn i {
  font-size: 18px;
  transition: color 0.3s ease;
}

.pakhsheFilmBtn::after {
  content: "پخش ویدیو از این بخش";
  font-size: 0;
  color: #333;
  transition: opacity 0.3s ease;
}

.pakhsheFilmBtn:hover {
    width: 171px;
  background: #faebd1;
}

.pakhsheFilmBtn:hover::after {
  font-size: 14px;
margin-right: 7px
}



.navareVidio {
  height: 100%;
  width: 0%;
background: #ffe19e;
	transition: width 0.1s linear;
}

.video-marker {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: #fb94eb;
  transform: translateX(-50%);
  cursor: pointer;
}

.video-marker::before {
  content: "";
  position: absolute;
  top: 137%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 8px;
  height: 6px;
  background: #fb94eb; 
box-shadow: inset 0 0 4px 0.5px #c033aa;}

 .marker-zard::before {
  content: "";
  position: absolute;
top: 95%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 8px;
    height: 5px;
  background: #fb94eb; 
box-shadow: inset 0 0 4px 0.5px #c033aa;}
			
.video-marker::after, .marker-zard::after {
  content: "";
  position: absolute;
 top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 7px solid #fb94eb;
}
.video-control-button i{
margin: 0
}
.convert-numbers.row {
  transition: padding-top 1.4s ease;
}
	
	.convert-numbers.row {
 margin-right: 10px;
	width: 1px;
}

	.convert-numbers.row.vidio {
  transition: padding-top 1.4s ease;
  padding-top: 6px;
 
}

.basteNavareVidio {
 position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
background: rgb(163 227 227 / 53%);
z-index: 2000;
  cursor: crosshair;
  direction: ltr;
	border-bottom: 1px solid #00000078;
  opacity: 0;
  visibility: hidden;
transition: opacity 1.5s ease-in-out;
			}

.basteNavareVidio.faal {
	transition: opacity 1.5s ease-in-out;
  opacity: 1;
  visibility: visible;
}
			
			.pip-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.5);
  border: none;
  color: white;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.pip-btn:hover {
  background: rgba(0,0,0,0.8);
}
.vidio-kolly {
	direction: rtl;
	justify-content: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #005b60;
  border-radius: 35px;
  color: #ffe19e;
  font-family: "yekan";
  font-size: 18px;
  cursor: pointer;
  width: 50px;  
    position: absolute;
	left: 25px;
        top: 125px;
	height: 50px;
  overflow: hidden;     
  white-space: nowrap;  
  transition: width 0.4s ease, background 0.3s ease;
}

.vidio-kolly i {
    text-shadow: 1px 1px 0px #000000;
margin-right: 5px;
font-size: 24px;
  margin-left: 0; 
	transition: all 0.3s ease;
}

.vidio-kolly span {
  opacity: 0;
  transition: opacity 0.3s ease;
	    margin-right: 5px;
}

.vidio-kolly:hover {
        width: 108px;
	background: #265c5e;
  justify-content: flex-start; 
  padding-left: 15px;
}

.vidio-kolly:hover span {
font-size: 16px;
    margin-top: -5px;
	opacity: 1;
color: #ffe19d;
    text-shadow: 1px 1px 0px #000000;
    font-weight: bold;}

.vidio-kolly:hover i {
	    color: #ffe19d;
  margin-left: 0px; 
transform: scale(1.2);}

#video-progress-tooltip::before {
  content: "";
  position: absolute;
top: -9px;
left: 20px; 
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent rgb(239 211 164 / 92%) transparent;
}

.basteNavareVidio.faal:hover {
    box-shadow: 0 0 0 3px #ffffff;
}



#divider
{
box-shadow: -1px 0px 8px 0px #00000073;
}
.taqrirview #divider {
	height: calc(100vh - 53px);
	float: left;
position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
}

.taqrirview {
    -webkit-box-shadow: 0 1px 3px 0 rgba(var(--dg-taqrirview-rgb1)), 0 0 18px 0 rgba(var(--dg-taqrirview-rgb2));
    -moz-box-shadow: 0 1px 3px 0 rgba(var(--dg-taqrirview-rgb1)), 0 0 18px 0 rgba(var(--dg-taqrirview-rgb2));
    box-shadow: 0 1px 3px 0 rgba(var(--dg-taqrirview-rgb1)), 0 0 18px 0 rgba(var(--dg-taqrirview-rgb2));
    background-color: var(--dg-taqrirview-back-bg-color);
}
#tab-taqrir #divider {
	width: 5px;
	background: var(--dg-taqrirview-divider-bg-color);
	cursor: col-resize;
	position: relative;
	z-index: 121;
}
#tab-taqrir #divider:before {
	width: 4px;
	content: '';
	display: block;
	position: relative;
	border-right: 2px solid var(--dg-taqrirview-divider-border-color);
	height: 30px;
	top: calc(50vh - 45px);
}


.safecontainer {
    margin: 20 20 0;
border-radius: 7px;
    border: 3px solid #005b60;
}

.safecontainer img {
border-radius: 7px;
}
.content-wrp {
    background: #fdfae2;
}
.safecontainer img{
    width:100%;
}

@media only screen and (min-width: 800px) {
	
	.header-left.vidio{
	margin-top: 15px;	
	}
	.vidio-kolly{
	display: none	
	}

#tab-book {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#tab-book .scroll {
  flex-basis: 46%;
}

#tab-book .book-bottom {
  flex-basis: 64%;
  overflow-y: auto;
background-color: #fffded;
    background-image: url(https://bayanbox.ir/download/5168480340612289994/image.png) !important;
    background-size: 100px 50px;}

													
.overlay-docs {
  position: absolute;
  inset: 0;
  backdrop-filter: grayscale(0.6) blur(6px);
    cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  opacity: 1;
  transition: opacity 0.4s ease; /* انیمیشن ناپدید شدن */
}
.overlay-docs.fade-out {
  opacity: 0;
}
.overlay-docs .box {
  background: #ecd1a2c7;
padding: 6px 8px;
  border-radius: 12px;
  text-align: center;
  max-width: 80%;
text-shadow: 1px 1px 0px #fff;
}
.overlay-docs .title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: .6rem;
}
.overlay-docs .subtitle {
  font-size: 0.9rem;
  line-height: 1.6;
}
.scroll.book-top {
  position: relative; 
}
#book-divider {
  height: 5px;
  cursor: row-resize;
  position: relative;
  z-index: 10000;
	box-shadow: -1px 0px 8px 0px #00000073;
  background: var(--dg-taqrirview-divider-bg-color);
}

#book-divider:before {
  content: '';
  display: block;
  position: absolute;
  left: calc(50% - 15px); /* وسط افقی */
  width: 30px;           
  height: 4px;
  border-top: 2px solid var(--dg-taqrirview-divider-border-color);
  top: calc(50% - 2px);  
}

#book-divider .hint-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 40px;
  color: #fb94eb;
  opacity: 0;
  pointer-events: none;
}

#book-divider .hint-arrow.up {
  bottom: 50%;
  animation: arrow-up 2s ease forwards;
}

#book-divider .hint-arrow.down {
  top: 50%;
  animation: arrow-down 2s ease forwards;
}

@keyframes arrow-up {
  0%   { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, -100px); opacity: 0; }
}

@keyframes arrow-down {
  0%   { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, 100px); opacity: 0; }
}

#divider {
  position: relative;
}

#divider .hint-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  color: #fb94eb;
  opacity: 0;
  pointer-events: none;
}

#divider .hint-arrow.left {
  right: 50%;
  animation: arrow-left 2s ease forwards;
}

#divider .hint-arrow.right {
  left: 50%;
  animation: arrow-right 2s ease forwards;
}

@keyframes arrow-left {
  0%   { transform: translate(0, -50%); opacity: 1; }
  100% { transform: translate(-130px, -50%); opacity: 0; }
}

@keyframes arrow-right {
  0%   { transform: translate(0, -50%); opacity: 1; }
  100% { transform: translate(130px, -50%); opacity: 0; }
}	
					
	
}
	@media only screen and (max-width: 800px) {

				.select-container.fixed {
    top: 61px;
}
		
				.select-container.fixed.vidio {
    top: 71px;
}

#floating-video-window {
  transform: scale(0);
  opacity: 0.3;
transition: opacity 0.15s ease, transform 0.2s ease;
				}
				
#floating-video-window.show {
  transform: scale(1);
  opacity: 1;
}

			.tabbtn-controls{
				transition: top 1.4s ease;
					top: 0;
				}
				
		.video-marker::before{
			top: 99%;
	}
				.main-menu.resp.vidio,.tabbtn-controls.vidio{
				top: 10px;	
				}
				.convert-numbers.row.vidio{
				  padding-top: 10px;
	
				}
				.circlesadr.vidio{
					top: 15px;
				}
				.namekelas{
				display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;	
				}

				.basteNavareVidio{
				height: 10px;
			}
				
	.neonvanx.fixed{
	top: 47;	
	}
				
.neonvanx.fixed.vidio{
	top: 57;	
	}
	
																#bookBtn {
  position: relative; /* تا بتونیم دایره رو داخلش بچسبونیم */
  overflow: visible;
}

#bookBtn .notify-circle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background-color: #057a81;
  border-radius: 50%;
  z-index: 10;
}

#bookBtn .notify-circle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(5, 122, 129, 0.6);
  transform: translate(-50%, -50%) scale(0);
  animation: ripplePulse 3s ease-out;
  animation-iteration-count: 4; 
}

@keyframes ripplePulse {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(6); opacity: 0; }
}
	#bookBtn.active span {
    z-index: 3;
    position: relative;
}
button#bookBtn.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fffded;
    z-index: 1;
    border-radius: 4px;
}

button#bookBtn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #fffded;
    background-image: url(https://bayanbox.ir/download/5168480340612289994/image.png) !important;
    background-size: 100px 50px !important;
    z-index: 1;
    mask-image: linear-gradient(to bottom, transparent 30%, #000 80%);
}

	.row .scroll,div#tab-book
{max-height: calc(100vh - 47px - 55px);
	}
	
	.sarsafe{
	    padding-top: 81px;	
	}
	.neonvanx
	{top: 148px;
    right: 20;}
	
	.namekelas h1, .nameostad h2{
	font-size: 30px;
	}
	.sarsafe{
	padding-bottom: 70px;
    padding-top: 20px;	
	}
	.namekelas{
	padding-bottom: 10px;
	}
	
	div#divider,#book-divider,.book-bottom.pakhseFilm {
    display: none;
}
	#tab-taqrir{
	            z-index: 2;
width: 100% !important;
}
	

	  .tabbtn-controls {
            display: flex;
            gap: 10px;
        margin: 25px 150px 0 0;
	}
	
	button#taqrirBtn.active.actived {
    background: #efd3a4;
}
	 .tab-btn:hover{
		background-color: #c8f3f4;
		color: #029093;
	}

	.tab-btnactive:hover {
  all: unset !important; 
}
	  .tab-btn {
		box-shadow: inset 0px -2px 5px -2px rgb(0 0 0 / 41%);
		position: relative;
		font-family: "yekan";
        color: #000000;
	font-size: 19px;
        height: 45;
	width: 100;
	margin-top: 10;
	background-color: #fffff8;
            border: none;
            border-radius: 5px 5px 0 0;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }
        
        .tab-btn.active {
        border-bottom: none !important;
	background-color: #fef3e0;
        color: #000000;
        box-shadow: none;}
        
	#tab-book{
	display: none;
            z-index: 3;
width: 100% !important;
        }
	
	 .tab-active {
display: block !important;     
		
	}
	
	#taqrirBtn{
	 transition: background-color 0.3s ease;
	}
	 .circlesadr {
					transition: top 1.4s ease;
    position: fixed;
		display: block !important;
		    z-index: 2000;
		justify-content: flex-end;
    top: 5;
    right: 10;
	box-shadow: -5px -2px 6px rgba(0, 0, 0, 0.2);
		margin: 0 !important;
        width: 115px !important;
        height: 45 !important;
}
	
	.circlesadr img {
    height: 45;
width: 45 !important;
	}
	
	
	a.ara {
    font-size: 40;
    top: -16;
    position: absolute;
    right: 50;
}
	
				.video-control-button{
				position: static !important;
				width: 34px !important;
			   	 height: 25px !important;
				box-shadow: none !important;
				}
				
				.video-control-button .speed-options{
					top: 24px;
					margin-right: 0 !important;
    					position: absolute;
   					 background: rgb(0, 91, 96);
   					 border-bottom-right-radius: 10px;
   					 border-bottom-left-radius: 10px;
   					 padding: 0px 3px 7px;
   					 flex-direction: column;

				}
}
			
			
@media only screen and (max-width: 600px) {
		

		
		.pakhsheFilmBtn{
					top: 49px;
					z-index: 3;
					
				}
				
				
	select#speedControl {
    margin-left: 10px !important;
}
	
	button#rewind {
    margin-left: 13px !important;
}
	
	.time-display {
    font-size: 12px !important;
    margin-left: 13px !important;
    margin-top: 2px !important;
	}
	
	button#forward {
    margin-left: -8px !important;
}
	
	button.playFromTimeBtn {
    top: 39px !important;
		z-index: 3;
	}
	.taqrirviewTopLink {
    padding-top: 59px !important;
	}

	.btn-group.btn-group-flex {
    transition: margin-top 0.5s ease-in-out;
z-index: 0;
    position: relative;
	}
	.btn-group.fixkon {
		transition: margin-top 0.5s ease-in-out;
    margin-top: -120px;
}
	.neonvanx.fixed h2 {
    font-size: 23;
}
	.neonvanx.fixed {
    top: 46px;
	}
	    .namekelas h1, .nameostad h2 {
        font-size: 25px;
    }
	
	.neonvanx h2 {
		font-size: 29;}
	
	    .neonvanx {
        top: 132px;
    }

.controls {
    padding-top: 6px;
	}
}

@media only screen and (max-width: 526px) {

																
#waveform > div:nth-of-type(2) {
    bottom: 64px !important;																	
}
.vidio-kolly {
  font-size: 18px;
        width: 108px;
        height: 46px;
        direction: ltr;
        border-radius: 21px;
padding-left: 15px;}

.vidio-kolly span {
	opacity: 1;
    font-size: 15px;
transition: all 0.3s ease;}
	
#total-time , #current-time {
	display: block
	}
	.ara,.time-display :nth-child(2){
	display: none
}
	.tab-btn{
	font-size: 17px;
        width: 80px;
	}

	select#speedControl {
    font-size: 12;
    width: 53px !important;
}
	
.btn-group.btn-group-flex {
    font-size: 17px;
	}

	.circlesadr{
	width: 48px !important;
    height: 48 !important;
    top: 4px;
    box-shadow: -5px -2px 6px -3px rgb(0 0 0 / 24%);
    display: flex !important
;
    align-items: center;
	justify-content: center;}

	.circlesadr img {
     margin: 0 ;
}

	    .tabbtn-controls {
	margin: 25px 68px 0 0;
	}
	.row .scroll,div#tab-book{
max-height: calc(100vh - 52px - 60px);
	}
	
	
}

.controls button{
border: none;	
}

			
.safecontainer,.manba{
box-shadow: -1px -1px 9px 2px rgba(0, 0, 0, 0.2);	
}
@media (max-width: 450px) {
  #tab-taqrir .scroll::-webkit-scrollbar {
    display: none;
  }

  #tab-taqrir .scroll {
    -ms-overflow-style: none;  /* برای IE و Edge */
    scrollbar-width: none;     /* برای Firefox */
  }
}

.pavaraqy {
    direction: rtl;
	margin: 15;
display: flex
;
    flex-wrap: wrap;}

.pavaraqy a{
	margin: 10 10 10 0;
	text-decoration: none;
color:#00696f;
}

.pavaraqy span {
		margin-top: 15px;
    margin-right: 15;
}

.pavaraqy span p {
	margin-left: 26px;
    font-size: 23px;
	font-family: 'AdobeArabic';
	text-align: justify;
}

[id^="pavaraqy"] {
color: #00696f !important;
    scroll-margin-top: 250px;
    text-decoration: none !important;
}

        
[id^="pavaraqyb"] {
            vertical-align: super;
        }
        
[id^="pavaraqyb"]:hover,.pavaraqy a:hover{
	color:rgb(255 0 132 / 80%) !important;}

.haylayt {background: #ffd60063;}
#pishnmayshZman{
z-index: 10000;																
}