/* ---------------------------------------------------------------------- */
/*
/*	Site Colors
/*
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/*
/*	color1 - Orange
/*
/* ---------------------------------------------------------------------- */
.color1, .color1Hover:hover					        {color: 			#EB7737  ;}
.color1Bg, .color1BgHover:hover				        {background-color: 	#EB7737  ;}
.color1Border, .color1BorderHover:hover		        {border-color: 		#EB7737  ;}
.orange, .orangeHover:hover					        {color: 			#EB7737  ;}
.orangeBg, .orangeBgHover:hover				        {background-color: 	#EB7737  ;}
.orangeBorder, .orangeBorderHover:hover		        {border-color: 		#EB7737  ;}
/* ---------------------------------------------------------------------- */
/*
/*	color1 - green
/*
/* ---------------------------------------------------------------------- */
.color2, .color2Hover:hover					                    {color: 			#A35738  ;}
.color2Bg, .color2BgHover:hover				                    {background-color: 	#A35738  ;}
.color2Border, .color2BorderHover:hover		                    {border-color: 		#A35738  ;}
.orangeDarken, .orangeDarkenHover:hover					        {color: 			#A35738  ;}
.orangeDarkenBg, .orangeDarkenBgHover:hover				        {background-color: 	#A35738  ;}
.orangeDarkenBorder, .orangeDarkenBorderHover:hover		        {border-color: 		#A35738  ;}
/* ---------------------------------------------------------------------- */
/*
/*	color1 - green
/*
/* ---------------------------------------------------------------------- */
.color3, .color3Hover:hover					                        {color: 			#A14D23  ;}
.color3Bg, .color3BgHover:hover				                        {background-color: 	#A14D23  ;}
.color3Border, .color3BorderHover:hover		                        {border-color: 		#A14D23  ;}
.orangeDarken2, .orangeDarken2Hover:hover					        {color: 			#A14D23  ;}
.orangeDarken2Bg, .orangeDarken2BgHover:hover				        {background-color: 	#A14D23  ;}
.orangeDarken2Border, .orangeDarken2BorderHover:hover		        {border-color: 		#A14D23  ;}

/* ---------------------------------------------------------------------- */
/*
/*	color1 - green
/*
/* ---------------------------------------------------------------------- */
.color4, .color4Hover:hover					                        {color: 			#FBF6EC  ;}
.color4Bg, .color4BgHover:hover				                        {background-color: 	#FBF6EC  ;}
.color4Border, .color4BorderHover:hover		                        {border-color: 		#FBF6EC  ;}
.orangeLighten2, .orangeLighten2Hover:hover					        {color: 			#FBF6EC  ;}
.orangeLighten2Bg, .orangeLighten2BgHover:hover				        {background-color: 	#FBF6EC  ;}
.orangeLighten2Border, .orangeLighten2BorderHover:hover		        {border-color: 		#FBF6EC  ;}

/* ---------------------------------------------------------------------- */
/*
/*	color1 - green
/*
/* ---------------------------------------------------------------------- */
.color2, .color2Hover:hover					        {color: 			#000000  ;}
.color2Bg, .color2BgHover:hover				        {background-color: 	#000000  ;}
.color2Border, .color2BorderHover:hover		        {border-color: 		#000000  ;}
/* ---------------------------------------------------------------------- */
/*
/*	color1 - green
/*
/* ---------------------------------------------------------------------- */
.color2, .color2Hover:hover					        {color: 			#606060  ;}
.color2Bg, .color2BgHover:hover				        {background-color: 	#606060  ;}
.color2Border, .color2BorderHover:hover		        {border-color: 		#606060  ;}
/* ---------------------------------------------------------------------- */
/*
/*	Default Sizes
/*
/* ---------------------------------------------------------------------- */
h1, h2, h3, h4, h5{
    font-weight: normal;
}
 
body {font-family: 'Montserrat';}
.Philosopher{ font-family: Philosopher;}

a                        {color: #000000; font-style: none;}
.Bold                    {font-family: MontserratBold;}
.SemiBold                {font-weight: 700;}
.Regular                 {font-weight: 400;}


.h1, h1                  {font-size: 47px}
.h2, h2                  {font-size: 44px}
.h3, h3                  {font-size: 26px}
.h4, h4                  {font-size: 24px}
.h5, h5                  {font-size: 20px;}

.p1                      {font-size: 16px;}
.p2                      {font-size: 12px;}
.p3                      {font-size: 14px;}
.a1                      {font-size: 16px;}  


.LineLarge               {line-height: 1.8;}
.LineXLarge              {line-height: 2.2;}
.icon20                  {width: 40px;}

.w400                    {width: 385px;}

.displayBlock {
    display: inline-block;
}

.transparent10px{transform: translateY(10px);}


.BorderNone{
  border: none;
}

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

.TopHeader{
    height: 150px;
    display: flex;
    align-items: center;
}

.BottonHeader{
    height: 60px;
}

.BottonHeader1{
  display: flex;
  justify-content: space-between;
}

@media (max-width : 992px) {
  .BottonHeader1{
    display: flex;
    justify-content: center;
  }
}

.HeaderLogo{
    width: 100%;
    max-width: 140px;
}

.LoginSignup{
    color: #ffffff;
    font-weight: bold;
    width: 170px;
    margin-left: 10px;
}

.BtnSubmit{
    background-color: #006FB7;
    width: 100%;
    width: 135px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    align-items: center;
    padding: 13px;
    border: none;
    font-size: 16px;
    transition: ease-in-out 0.35s;
}

.BtnSubmit:hover{
    background-color: #008ce9;
    color: #000000;
}

.leftNav{
    width: 450px;
}

.leftNav a{
    color: #ffffff;
    transition: ease-in-out 0.35s;
}

.leftNav a:hover{
    color: #000000;
}

.studies{
    width: 190px;
    padding: 11px;
    transform: translateY(8px);
    text-align: center;
    align-items: center;
}

.searchBar{
    padding: 11px;
    width: 100%;
    max-width: 250px;
    color: #111111;
    padding-left: 10px;
    font-size: 12px;
}

.search{
    position: relative;
}

.searchIcon{
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
}

.SecDiv{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    border: 1px solid #E8EAEE;
    height: 297px;
    width: 100%;
    max-width: 240px;
}

.SecDiv a{
    color: #006FB7;
    text-decoration: underline;
}

.Connect{
    filter: brightness(70%); /* تاریک‌تر کردن عکس */
    width: 516px;
}

.image-box-slider {
  display: inline-block;   /* نمایش به صورت inline-block */
  vertical-align: top;     /* هم‌تراز شدن با آیتم‌های کناری */
  width: 100%;             /* یا مقدار مشخص مثل 500px */
  max-width: 600px;        /* حداکثر عرض */
}

.image-box {
  position: relative; /* مرجع برای content */
  display: inline-block;
}

.image-box img {
  display: block;
  width: 100%;  /* تصویر واکنش‌گرا */
}

.image-box .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 290px;
  max-width: 516px;

  display: flex;
  flex-direction: column;
  justify-content: center;   /* متن وسط عمودی */
  align-items: flex-start;   /* متن سمت چپ */
  color: white;
  text-align: left;
  padding: 10px;
  box-sizing: border-box;     /* تا padding اندازه رو به‌هم نریزه */
}

.swiper{
  margin: 0;
  padding: 0;
}

  
  .image-box .content a {
    color: #ffffff;
    text-align: left;
  }

  .content h2{
    text-align: left;
  }

  .content p{
    font-size: 14px;
  }

.VoiceBox{
    background-color: #ffffff;
    display: inline-block;
    padding: 20px;
}

.VoiceBoxLinked{
    color: #008ce9;
    border-bottom: #008ce9 1px solid;
}

.underLineRed{
    border-bottom: #D01F3C 5px solid;
    padding-bottom: 5px;
}

.underLineDashesd{
    border-bottom: 1px dashed #E8EAEE;
    padding-bottom: 20px;
    padding-top: 10px;
}

.underLineDashesdSilver{
    border-bottom: 1px dashed #9CA2AE;
    padding-bottom: 20px;
    padding-top: 10px;
}

.underLineWhite{
    border-bottom: 1px solid #ffffff;
    padding-bottom: 10x;
}

.borderButtomSilver{
    border-bottom: #9CA2AE solid 1px;
}

.borderButtomSilverLight{
    border-bottom: #E8EAEE solid 1px;
}

.BoxReailist{
  margin-left: 35px;
}

.LastesBox{
    display: inline-block;
    padding: 20px;
    border: #E8EAEE 1px solid;
}

.LastesImg{
    width: 100%;
    max-width: 298px;
    height: 168px;
}

.BoxLastNews{
    display: inline-block;
    background-color: #ffffff;
}

.RelatedTitles{
    text-align: center;
}

.PodcastIndex{
  width: 370px;
}

.ShortUnderline{
    position: relative;
    display: inline-block;
}

.ShortUnderline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 55px;
    height: 5px;
    background: #D01F3C;
}

.ShortUnderlineWhite{
    position: relative;
    display: inline-block;
}

.ShortUnderlineWhite::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 55px;
  height: 5px;
  background: white;
}

.ShortUnderlineWhite{
  position: relative;
  display: inline-block;
}

.ShortUnderlineWhite::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 50px;
    height: 5px;
    background: #ffffff;
}

.PodBox{
    display: inline-block;
    background-color: #ffffff;
}

.Podimg{
    width: 100%;
    max-width: 390px;
}

.podcast-player {
    display: flex;
    gap: 20px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  .cover {
    width: 140px;
    height: 140px;
    border-radius: 8px;
    object-fit: cover;
  }
  .content {
    flex: 1;
  }
  #waveform {
    height: 80px;
    margin: 10px 0;
  }
  .controls {
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(-30px) translateX(-80px);
  }

.controls p{
    transform: translateY(10px);
}
  
#playPause{
    border: none;
    background-color: #fff;
    transform: translateY(-55px) translateX(85px);
}

#backward , #forward{
    border: none;
    background-color: #fff;
}

#speed{
    border: none;
}

.LastVideo{
    width: 625px;
    max-width: 100%;
}

.LastVideos{
    width: 100%;
    max-width: 297px;
}

.LastVideoBox{
    border: 1px solid #E8EAEE;
    display: inline-block;
}

.BoxPodcast{
    background-color: #ffffff; 
    display: inline-block;
}

.LastLancetImg{
    width: 100%;
    max-width: 160px;
}

.OtherMultimediaBox{
    display: inline-block;
}

.AsideBox{
    display: inline-block;
    width: 288px;
    height: 1450px;
}

.VideosSearchBar{
    color: #000000;
    border: 1px solid #fff;
    padding: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 345px;
}

.SubmitManuscript{
    background-color: #006FB7;
    border: none;
    padding: 10px;
    color: #ffffff;
    font-weight: 400;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    width: 220px;
}

.SubmitManuscriptIcon{
    width: 100%;
    max-width: 24px;
}

.secondiv{
    display: flex;
    flex-direction: column;
}

.AsidNav{
    display: inline-block;
}


.chart-container {
    width: 300px;
    height: 300px;
  }

.AboutImage{
    width: 100%;
    max-width: 150px;
}

.MainAboutPage{
    display: inline-block;
}

.HSM{
    width: 100%;
    max-width: 160px;
    border: 3px #ffffff solid;
}

.SubmitBTN{
    background-color: #fff;
    padding: 15px;
    margin-top: 30px;
    display: inline-block;
    border: none;
}

.BorderRight{
    border-right: 1px #ffffff solid;
    padding-right: 25px;
}

.BorderRightWBlack{
    border-right: #000000 1px solid;
    padding-right: 25px;
}

.BorderRightWhite{
    border-right: #ffffff 1px solid;
    padding-right: 25px;
}

.BorderRightSilver{
    border-right: #E8EAEE 1px solid;
    padding-right: 40px;
}

.linedecourtions{
    text-decoration: underline;
}

.PdfDownloadBTN{
    background-color: #fff;
    display: inline-block;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    width: 220px;
}

.EditFileBTN{
    background-color: #F26C19;
    width: 62px;
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 5px;
}

.HeaderFF{
    display: flex;
    justify-content: space-between;
    border: #E8EAEE 1px solid;
    padding: 10px;
    background-color: #E8EAEE;
}

.ScorlAbleDiv{
    display: flex;
    flex-direction: column;
    border: #E8EAEE 1px solid;
    padding: 10px;
    gap: 20px;
}

.RelatedSubjects{
    background-color: #DDF1FF;
    color: #006FB7;
    padding: 10px 30px;
    font-size: 16px;
    font-weight: 700;
}

.divleft{
    display: inline-block;
    width: 100%;
    max-width: 935px;
}

.Btn-ShareLink{
    background-color: #006FB7;
    border: none;
    padding: 15px 40px;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
}

.Btn-LoginPage{
    background-color: #006FB7;
    color: #ffffff;
    font-size: 16px;
    width: 200px;
    text-align: center;
    align-items: center;
    padding: 10px;
}

.right-div{
    display: inline-block;
    padding: 10px 60px;
}

.input-UserPass{
    width: 200px;
    padding: 5px;
    text-align: left;
    padding-left: 10px;
    font-size: 14px;
}

.CountryRegion{
    width: 45px;
    padding: 5px;
    text-align: center;
}

.Login-Btn{
    border: 1px #00558C solid;
    font-size: 14px;
    background-color: #F3F4F6;
    color: #00558C;
    width: 134px;
    padding: 10px;
    font-weight: 500;
}

.Register-Btn{
    border: 1px #00558C solid;
    font-size: 14px;
    background-color: #F3F4F6;
    color: #00558C;
    width: 230px;
    padding: 10px;
    font-weight: 500;
}

.Forget-Btn{
    border: 1px #00558C solid;
    font-size: 14px;
    background-color: #F3F4F6;
    color: #00558C;
    width: 241px;
    padding: 10px;
    font-weight: 500;
}

.Cancel-Btn{
    background-color: #F3F4F6;
    box-shadow: 0 0 5px #D7DAE2; /* x=0 , y=0 , blur=5 */
    border: none;
    width: 105px;
    padding: 10px;
}

.borderButtomRed{
    border-bottom: #D01F3C 1px solid;
    padding-bottom: 25px;
}

.borderTopRed{
    border-top: #D01F3C 1px solid;
    padding-top: 25px;
}

.BoxingShadow{
    box-shadow: 0 0 5px #D7DAE2; /* x=0 , y=0 , blur=5 */
}

.fill{
    display: inline-block;
    width: 100%;
    max-width: 280px;
    font-size: 20px;
    padding: 10px;
    text-align: center;
    border: 1px solid #E8EAEE;
    transform: translateY(-30px);
    background-color: #ffffff;
}

.fill2{
    display: inline-block;
    width: 100%;
    max-width: 157px;
    font-size: 20px;
    padding: 10px;
    text-align: center;
    border: 1px solid #E8EAEE;
    transform: translateY(-30px);
}

.fill3{
    display: inline-block;
    width: 100%;
    max-width: 227px;
    font-size: 20px;
    padding: 10px;
    text-align: center;
    border: 1px solid #E8EAEE;
    transform: translateY(-30px);
}


.fill4{
    display: inline-block;
    width: 100%;
    max-width: 314px;
    font-size: 20px;
    padding: 10px;
    text-align: center;
    border: 1px solid #E8EAEE;
    transform: translateY(-30px);
    background-color: #ffffff;
}

.fill5{
    display: inline-block;
    width: 100%;
    max-width: 557px;
    font-size: 20px;
    padding: 10px;
    text-align: center;
    border: 1px solid #E8EAEE;
    transform: translateY(-30px);
    background-color: #ffffff;
}

.fill6{
    display: inline-block;
    width: 100%;
    max-width: 800px;
    font-size: 20px;
    padding: 10px;
    text-align: center;
    border: 1px solid #E8EAEE;
    transform: translateY(-25px);
    background-color: #ffffff;
}


.DivLeftRegister{
    display: inline-block;
}


.suggestion-box {
  position: relative;
  display: inline-block;
  width: 100px;
  transform: translateX(40px);
}

.CountryRegion {
  width: 40px;
  text-align: center;
  font-size: 14px;
}

.suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  max-height: 250px;
  font-size: 14px;
  overflow-y: auto;
  z-index: 9999; /* بالاتر از بقیه عناصر */
  width: 250px;
}

.suggestions div {
  padding: 6px;
  cursor: pointer;
}

.suggestions div:hover {
  background: #f0f0f0;
}


.transfer40{
    transform: translateX(40px);
}

.country-suggestion-box {
  position: relative;
  display: inline-block;
  width: 200px; /* بزرگتر از input عادی */
}

.country-input {
  width: 300px;
  padding: 6px;
  box-sizing: border-box;
}

.country-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  max-height: 150px;
  overflow-y: auto;
  z-index: 9999;
  width: 100%;
}

.country-suggestions div {
  padding: 6px;
  cursor: pointer;
}

.country-suggestions div:hover {
  background: #f0f0f0;
}

.SelectClassification{
    width: 263px;
    text-align: center;
    padding: 10px;
    background-color: #F3F4F6;
    border: 1px solid #00558C;
    color: #006FB7;
}

.BtnRegisterPage{
    background-color: #006FB7;
    color: #ffffff;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 160px;
    padding: 10px;
    border: none;
}


.Btn_Actions{
    background-color: #F3F4F6;
    padding: 5px;
    text-align: center;
    font-size: 14px;
    color: #006FB7;
    border: #00558C solid 1px;
}

.boxSelect {
  width: 500px;
  background-color: white;
  padding: 10px;
  height: 700px;
  overflow-y: auto;
}

.actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

#available-list > li {
  display: block;
  position: relative;
  margin-bottom: 15px;
}

.li-content {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.sub-list {
  display: none;
  list-style-type: disc;
  margin: 5px 0 0 30px;
}

.sub-list li {
  align-items: center;
  padding: 2px;
  font-weight: normal;
}

/* برای هر checkbox در sub-list */
.sub-list li input[type="checkbox"],
#selected-list li input[type="checkbox"] {
  margin-right: 8px; /* فاصله بین checkbox و متن */
}

/* برای لیست آیتم‌ها */
.sub-list li, #selected-list li {
  align-items: center;
  padding: 2px 0;
}

.SearchClassifications{
    width: 290px;
    padding: 5px;
    font-size: 14px;
    height: 40px;
}

.SearchClassificationsBTN{
    height: 40px;
    border: #00558C 1px solid;
    background-color: #F3F4F6;
    color: #006FB7;
    width: 130px;
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.SearchClassificationsBTN:disabled {
  cursor: pointer;
  opacity: 0.6;
}


.w300{
    width: 300px;
    text-align: right;
}

.w150{
    width: 200px;
    text-align: left;
}

.w300Right{
    width: 300px;
    text-align: left;
}

.LinerFlex{
    display: flex;
    justify-content: center;
    gap: 20px;
}

.ColumnFlexisve{
    display: flex;
    flex-direction: column;
}

.gap-10{
    gap: 10px;
}

.gap-25{
    gap: 25px;
}

.borderButtomRedLight{
    border-bottom: #D01F3C 1px solid;
    padding-bottom: 30px;
}

.CheckboxConfirm{
    width: 20px;
    height: 20px;
}

.PreviousBtn{
    width: 175px;
    padding: 8px;
    border: #00558C 1px solid;
    background-color: #F3F4F6;
    color: #006FB7;
    font-size: 14px;
}




.HeadTable{
    background-color: #D01F3C;
    color: #ffffff;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: start;
    padding-top: 40px;
    padding-bottom: 40px;
}

.HeadTable th{
    width: 600px;
    text-align: center;
}

.TableBody{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.TableBody td{
    width: 600px;
    text-align: center;
    border: 1px solid #E8EAEE;
    padding-top: 10px;
    padding-bottom: 10px;
}

.TableIncompletedSubmissins{
    display: flex;
    flex-direction: column;
}

.TableBody tr:nth-child(even) {
  background-color: #fafafa; /* طوسی روشن برای ردیف‌های زوج */
}
.TableBody tr:nth-child(odd) {
  background-color: #ffffff; /* سفید برای ردیف‌های فرد */
}



.HeadTable2 {
  background-color: #D01F3C;
  color: #ffffff;
  width: 100%;
  display: table-header-group; /* یا table-row برای ردیف */
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

.HeadTable2 th {
  display: table-cell;
  width: 600px; /* هر ستون */
  text-align: left;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  vertical-align: top; /* متن از بالا تراز می‌شود */
}

.TableBody2 {
  width: 100%;
  display: table-row-group; /* بدنه جدول */
}

.TableBody2 tr {
  display: table-row;
}

.TableBody2 td {
  display: table-cell;
  width: 600px;
  text-align: left;
  border: 1px solid #E8EAEE;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  vertical-align: top; /* متن از بالا تراز می‌شود */
}

.TableBody2 tr:nth-child(even) {
  background-color: #fafafa;
}

.TableBody2 tr:nth-child(odd) {
  background-color: #ffffff;
}




.HeadTable3 {
    background-color: #0F5054;
    color: #ffffff;
    width: 100%;
    display: table-header-group; /* یا table-row برای ردیف */
    text-align: center;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  
  .HeadTable3 th {
    display: table-cell;
    width: 600px; /* هر ستون */
    text-align: left;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: top; /* متن از بالا تراز می‌شود */
  }
  
  .TableBody3 {
    width: 100%;
    display: table-row-group; /* بدنه جدول */
  }
  
  .TableBody2 tr {
    display: table-row;
  }
  
  .TableBody3 td {
    display: table-cell;
    width: 600px;
    text-align: left;
    border: 1px solid #E8EAEE;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: top; /* متن از بالا تراز می‌شود */
  }
  
  .TableBody3 tr:nth-child(even) {
    background-color: #fafafa;
  }
  
  .TableBody3 tr:nth-child(odd) {
    background-color: #ffffff;
  }



.custom-dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background-color: #DDF1FF;
  color: #fff;
  user-select: none;
  font-size: 16px;
  color: #000000;
  width: 78px;
  text-align: center;
  padding: 10px;
}

.custom-dropdown-menu {
    display: none; 
    position: absolute;
    bottom: 100%; /* به جای margin-top، از پایین عنصر شروع می‌کنه */
    left: 0;       /* یا right: 0; بسته به جهت */
    background-color: #f9f9f9;
    min-width: 120px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
    border-radius: 5px;
    z-index: 1;
    margin-bottom: 5px; /* فاصله بین دکمه و لیست */
  }
  

.custom-dropdown-menu div {
  padding: 8px 12px;
  cursor: pointer;
}

.custom-dropdown-menu div:hover {
  background-color: #e6f2ff;
}

.custom-dropdown-menu.show {
  display: block;
}

.RecommendationDiv {
  position: relative; /* بسیار مهم */
  background-color: #EBF7FF;
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  padding: 20px;
  font-size: 14px;
}

.RecommendationInput {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  width: 100%;
}

.DownList {
  width: 20px;
}

.RecommendationDropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 2px;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.RecommendationDropdown div {
  padding: 8px 10px;
  cursor: pointer;
}

.RecommendationDropdown div:hover {
  background-color: #f2f2f2;
}

.RecommendationDropdown.show {
  display: block;
}


.BtnUpload{
    color: #006FB7;
    border: #00558C 1px solid;
    padding: 10px 20px;
    text-align: center;
    font-size: 14px;
    background-color: #F3F4F6;
    font-weight: bold;
    box-shadow: 1px #D7DAE2;
}

.CommentsReviewer{
    width: 100%;
}







.stepper {
  display: flex;
  justify-content: space-between;
  align-items: start;
  max-width: 100%;
}

.step {
  text-align: center;
  position: relative;
  flex: 1;
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20px;
  right: -50%;
  width: 100%;
  height: 2px;
  background-color: #ccc;
  z-index: 0;
}

.step.done:not(:last-child)::after {
  background-color: #00c853;
}

.circle {
  width: 50px;
  height: 50px;
  line-height: 30px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background-color: #e0e0e0;
  color: #000;
  font-size: 30px;
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.step.completed .circle {
  background-color: #28a745; /* سبز */
  color: white; /* برای آیکون */
}

.step.active .circle {
  background-color: #1565c0;
  color: #fff;
}

.step.active p{
  font-weight: bold;
}

.step p {
  font-size: 12px;
}

@media (max-width: 768px) {
  .stepper {
    flex-direction: column; /* عمودی بشه */
    align-items: center;
    gap: 20px;
  }

  .step {
    width: 100%;
    text-align: center;
  }

  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: auto;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 30px; /* خط عمودی بین مراحل */
    background-color: #ccc;
  }

  .step.done:not(:last-child)::after {
    background-color: #00c853;
  }

  .circle {
    width: 45px;
    height: 45px;
    font-size: 22px;
  }

  .step p {
    font-size: 13px;
  }
}

/* 📱 اگر بخوای به‌جای حالت ستونی، در موبایل اسکرول افقی باشه: */
@media (max-width: 600px) {
  .stepper {
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    gap: 25px;
    justify-content: flex-start;
    padding-bottom: 10px;
  }

  .step {
    flex: 0 0 auto;
    position: relative;
    min-width: 90px;
  }

  .step:not(:last-child)::after {
    width: 60px;
    height: 2px;
    top: 25px;
    left: calc(100% + 10px);
    transform: none;
  }
}


.UploadBtn{
  font-size: 16px;
  text-align: center;
  align-items: center;
  background-color: #006FB7;
  border: none;
  color: #ffffff;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.myDropdownContainer {
  position: relative;
  width: 200px;
  cursor: pointer;
}

.myDropdownInput {
  width: 100%;
  max-width: 500px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
}

.myDropdownList {
  position: absolute;
  bottom: 100%; /* به جای top: 100% */
  left: 0;
  width: 100%;
  max-width: 500px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ccc;
  background-color: #fff;
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 1000;
}

.myDropdownList li {
  padding: 8px 12px;
}

.myDropdownList li:hover {
  background-color: #f0f0f0;
}


.input-AttachFiles{
  border: #000000 1px solid;
  padding: 10px;
  font-size: 14px;
  width: 80px;
}

.ChangeNowBtn{
  background-color: #00558C;
  color: #ffffff;
  font-size: 14px;
  padding: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border: none;
  border-radius: 100px;
}





.AttachFilesTabel {
  width: 100%;
  margin-top: 20px;
  text-align: center;
  align-items: center;
}

.AttachFilesTabel th,
.AttachFilesTabel td {
  padding: 10px 12px;
  text-align: center;
  vertical-align: middle;
}

.AttachFilesTbody{
  border: #000 1px solid;
}

.AttachFilesTabel tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.AttachFilesTabel tbody tr:hover {
  background-color: #f1f1f1;
}

.AttachFilesTabel input[type="text"] {
  width: 100px;
  padding: 6px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.AttachFilesTabel input[type="checkbox"] {
  transform: scale(1.2);
  cursor: pointer;
}


.AfterUpload {
  display: none;
}

/* ✅ ریسپانسیو کردن جدول بدون تغییر ظاهر */
.AttachFilesTabel {
  width: 100%;
  margin-top: 20px;
  text-align: center;
  align-items: center;
  border-collapse: collapse;
}

/* ✅ اضافه کردن یک کانتینر برای اسکرول در عرض */
.AttachFilesTabel-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* برای اسکرول نرم در موبایل */
}

.AttachFilesTabel-wrapper::-webkit-scrollbar {
  height: 6px;
}

.AttachFilesTabel-wrapper::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}






/* 🔹 استایل مودال */
.modal {
  display: none; /* پنهان در حالت عادی */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}

/* محتوای مودال */
.modal-content {
  background-color: #E8EAEE;
  width: 800px;
  max-width: 90%;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  animation: fadeIn 0.3s ease;
}

/* دکمه بستن (×) */
.close {
  float: right;
  font-size: 22px;
  cursor: pointer;
  color: #333;
}

.close:hover {
  color: red;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.ModalActionBtn{
  border: none;
  background-color: #E8EAEE;
  width: 20px;
}

.inputModal{
  width: 100%;
  max-width: 290px;
  border: 1px solid #D7DAE2;
  padding-left: 10px;
  padding-right: 10px;
}

.TextAreaModal{
  width: 100%;
  max-width: 290px;
  border: 1px solid #D7DAE2;
  height: 80px;
  padding-left: 10px;
  padding-right: 10px;
}

.top-bar {
  background: #E8EAEE; /* آبی پیش‌فرض */
  color: #006FB7;
  cursor: pointer;
  transition: background 0.3s ease;
}

.top-bar.open {
  background: #006FB7; /* خاکستری وقتی باز است */
  color: white;
}

.section-header {
  background: #e5e7eb; /* نقره‌ای پیش‌فرض */
  color: #006FB7;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.3s ease;
}

.section-header.open {
  background: #006FB7; /* خاکستری وقتی باز است */
  color: white;
}

.section-panel {
  display: none; /* از اول بسته */
  padding: 16px;
}

.GuestImg{
  width: 100%;
  max-width: 200px;
}

.MultimediaImage1{
  width: 100%;
  max-width: 600px;
}


/***************************** responsive *****************************/

/* دکمه همبرگری */
.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 40px;
  color: white;
  cursor: pointer;
  z-index: 1001;
  position: absolute;
  top: 10px;
  left: 10px;
}

/* حالت دسکتاپ */
.leftNav {
  display: flex;
  gap: 20px;
}

/* Dropdown دسکتاپ */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #fff;
  border-radius: 6px;
  display: none;
  flex-direction: column;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  overflow: hidden;
  z-index: 999;
}

.dropdown-menu li {
  list-style: none;
  border-bottom: 1px solid #eee;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 15px;
  color: #000;
  text-decoration: none;
}

.dropdown-menu li a:hover {
  background: #f5f5f5;
}

/* hover در دسکتاپ */
.dropdown:hover .dropdown-menu {
  display: flex;
}

/* موبایل */
@media (max-width: 992px) {
  /* دکمه همبرگری فقط در موبایل */
  .hamburger {
    display: block;
  }

  /* منوی موبایل پیش‌فرض مخفی */
  .leftNav {
    position: absolute;
    top: 210px;       /* فاصله از هدر */
    left: 0;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    background: #8b0000;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0;
    gap: 0;
    z-index: 999;
  }

  /* وقتی منو باز میشه */
  .leftNav.active {
    max-height: 600px; /* ارتفاع کافی */
    padding: 10px 0;
  }

  /* آیتم‌های داخل منو */
  .leftNav > a,
  .leftNav > div {
    width: 100%;
    padding: 12px 20px;
    display: block;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    text-decoration: none;
  }

  /* هاور روی لینک‌ها */
  .leftNav > a:hover,
  .leftNav > div:hover {
    background: rgba(255,255,255,0.1);
  }

  /* دراپ‌داون موبایل */
  .dropdown-menu {
    position: static;
    background: rgba(255,255,255,0.1);
    width: 100%;
    display: none;
    flex-direction: column;
  }

  .dropdown-menu.active {
    display: flex;
  }

  .dropdown-menu li a {
    color: #fff;
    padding: 10px 40px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .dropdown-toggle::after {
    content: " ▼";
    font-size: 14px;
  }

  /* کلاس‌های قبلی */
  .AiPolicy{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .AiPolicyRevers{
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
  }

  .AiPolicyNotAligen{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: start;
  }
}

@media (max-width: 1400px) {
  .MakeCenter25{
    display: flex;
    justify-content: center;
    gap: 25px;
  }
  
  .PodcastIndex{
    width: 330px;
  }
}


.Step1Div{
  width: 100%;
  max-width: 1000px;
}

.Step2Div{
  width: 100%;
  max-width: 400px;
}