/*.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 880px;
}*/
    /* Style for the Quran box */
    .quran-box {
      width: 100%;
      height: 100px;
      background-color: lightblue;
      text-align: center;
      line-height: 100px;
      cursor: pointer;
    }
.center-wrapper {
    background-color: white;
    width: 590px;
    overflow: hidden;
    padding: 40px;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid black;
}
.celestial-container {
    margin: 0 auto;
    text-align: center;
    position: relative;
}
#celestial-map {
    position: relative;
    margin-top: 35px;
}
.notes { text-align: center; margin-top: 25px; }

.moon-shape {
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle at 75% 50%, #0000 33%, #000 0);
}

/*.moon-shape {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: yellow;
  -webkit-mask: radial-gradient(circle at 75% 50%, #3219 33%, #3219 0);
  mask: radial-gradient(circle at 75% 50%, #3219 33%, #3219 0);
}

.moon-shape::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid red; /* یا هر رنگ و ضخامت مرزی که نیاز دارید */
  -webkit-mask: radial-gradient(circle at 75% 50%, #3219 33%, #3219 0);
  mask: radial-gradient(circle at 75% 50%, #3219 33%, #3219 0);
}*/


.celestial-map canvas.star {
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}
.celestial-map canvas.star ::before{
  content: '';
  background-color: red;
  width: 1000px;
  height: 1000px;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}


#prevButton, #nextButton{
  width: 100%;
  display: block;
  background-color: #344c5f;
  margin-bottom: 5px;
  color: white;
  border: none;
}

#show-product-id-btn{
  width: 100%;
  height: 70px;
  font-size: 20px;
  display: block;
  background-color: #344c5f;
  margin-bottom: 5px;
  color: white;
  background-color: #28a745;
  border: none;
}
#show-product-id-btn:hover{
  background-color: #218838;
}

#city-selector{ margin-bottom: 5px; color: white; }

canvas{
  pointer-events: none;
  width: 460px !important;
  height: 460px !important;
}

@media screen and (max-width: 525px){
	canvas{ width: 320px!important;height: 320px!important; }
}
@media screen and (max-width: 426px){
  	canvas{ width: 210px!important;height: 210px!important; }
}

.elementor-tabs-wrapper div{
  text-align: center;
}

#toggleMW, #toggleGraticule ,#toggleDSOS , #toggleConstellationLines{
  width: 100%;
  margin-top: 5px;
  background-color: #FFF;
  color: #000;
}
#toggleMW:hover, #toggleGraticule:hover, #toggleDSOS:hover, #toggleConstellationLines:hover{
  background-color: #CECECE;
}
#toggleConstellationLines{
  margin-bottom: 5px;
}