.center{
    text-align: center;
    /* margin: auto; */
    /* align-items: center; */
    display: flex;
    justify-content: center;
}

.text{
    font-family: "Arbutus Slab", serif;
    color: teal;
    font-size: 15px;
}
.elegant-text{
    font-family: "Pinyon Script", cursive;
    color: teal;
    font-size: 15px;
}
.glowing-box{
    box-shadow: 
        1px 1px 9px #ffffff, 
        1px 1px 1px #ffffff, 
        0px 1px 1px #00ccff;
}
.glowing-text{
    text-shadow: 
        1px 1px 9px #ffffff, 
        1px 1px 1px #ffffff, 
        0px 1px 1px #00ccff;
}

.Crystal{
    height: 40px;
    width: 40px;
    transform: rotate(45deg);
    /* outline: 1px solid white; */
    /* box-shadow: 
        1px 1px 9px #ffffff, 
        1px 1px 1px #ffffff, 
        0px 1px 1px #00ccff; */
}
.Little-Crystal{
    height: 10px;
    width: 10px;
    transform: rotate(45deg);
}
.Star-Line{
    height: 100px;
    width: 10px;
    transform: rotate(180deg);
}


/* crystal window */
.LC-1{position: absolute;   background-color: rgb(255, 255, 255, 0.8); top: -2%;}
.LC-2{position: absolute;   background-color: white; top: -1%; height: 6px; width: 6px;}
#Line-for-LC1and2{position: absolute; outline:1px double rgb(255, 255, 255, 0.7); top: -0.5%; height: 2px; width: 100%; transform: rotate(0deg);}
.LC-3{position: absolute;   background-color: rgb(255, 255, 255, 0.7); top: 64%;}
.LC-4{position: absolute;   background-color: white; top: 64.5%; height: 6px; width: 6px;}
#Line-for-LC3and4{position: absolute; outline:1px double rgb(255, 255, 255, 0.6); z-index: 102; top: 65%; height: 2px; width: 100%; transform: rotate(0deg);}

.LC-5{position: absolute; outline: 1px double rgb(20, 0, 69, 0.6);  background-color: rgb(20, 0, 69, 0.8); left: 46px;}
.LC-6{position: absolute; outline: 1px double rgb(20, 0, 69, 0.6);  background-color: rgb(20, 0, 69); left: 394px; height: 6px; width: 6px;}
#Line-for-LC5and6{position: absolute; z-index: 103; left: 4px; height: 2px; width: 392px;top: 150px; transform: rotate(0deg); outline: 1px double rgb(20, 0, 69, 0.6);}
.LC-7{position: absolute; outline: 1px double rgb(20, 0, 69, 0.6);   background-color: rgb(20, 0, 69, 0.7); top: 166px;}
.LC-8{position: absolute; outline: 1px double rgb(20, 0, 69, 0.6);   background-color: rgb(20, 0, 69); top: 168px; height: 6px; width: 6px;}
#Line-for-LC7and8{position: absolute; outline: 1px double rgb(20, 0, 69, 0.6); z-index: 102;left: 170px; height: 2px; width: 370px;top: 130px; transform: rotate(90deg);}




/* --- */
.star-cross {
  position: absolute;
    /* top: 80px; */
    /* left: 50%; */
    width: 70px;
    height: 70px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.star-cross::before {
  content: "";
  position: absolute;
    top: 35px;
    left: 0;
    width: 70px;
    height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(120, 80, 255, 0.0),
    rgba(90, 60, 200, 0.8),
    rgba(120, 80, 255, 0.0),
    transparent
  );
  filter: blur(0px);
}
.star-cross::after {
  content: "";
  position: absolute;
    left: 35px;
    top: 0;
    width: 2px;
    height: 70px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent,
    rgba(120, 80, 255, 0.0),
    rgba(90, 60, 200, 0.8),
    rgba(120, 80, 255, 0.0),
    transparent
  );
  filter: blur(0px);
}



    /* -- */

.star-cross-gray {
  position: absolute;
    /* top: 80px; */
    /* left: 50%; */
    width: 70px;
    height: 70px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.star-cross-gray::before {
  content: "";
  position: absolute;
    top: 35px;
    left: 0;
    width: 70px;
    height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0),
    rgba(193, 193, 193, 0.85),
    rgba(255, 255, 255, 0),
    transparent
  );
  filter: blur(0px);
}
.star-cross-gray::after {
  content: "";
  position: absolute;
    left: 35px;
    top: 0;
    width: 2px;
    height: 70px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0),
    rgba(193, 193, 193, 0.85),
    rgba(255, 255, 255, 0),
    transparent
  );
  filter: blur(0px);
}

    /* -- */

.star {
position: absolute;
  width: 30px;
  aspect-ratio: 1;
  background: #000000;
  clip-path: polygon(
    50% 0%,
    55% 45%,
    100% 50%,
    55% 55%,
    50% 100%,
    45% 55%,
    0% 50%,
    45% 45%
  );
}
.star-color-purple{
    background: linear-gradient(
    135deg,
    #0d0046,
    #6b00dd,
    #4f64ff
  );
}
.star-color-gray{
    background: linear-gradient(
    135deg,
    #838383
  );
}
.star-color-star{
    background-image: url("../Assets/Graphics/Pictures/Astro/noao-ngc7023.jpg");
        background-size: 50px;
}
/* --- */

.common-Top-Box{
  position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 100%;
    outline: 1px solid purple;
}
.common-Top-Title{
    /* position: sticky;
        top: 0;
        z-index: 10; */
    position: absolute;
        /* left: 4%; */
        top: -3%;
        
    height: 10%;
    width: 30%;
    min-width: 70px;
    min-height: 25px;
    outline: 1px solid white;
    background-color: white;
}


.box-content{
    position: absolute;
        right: 12px;
        top: 40px;
    width: 200px;
    height: 150px;
    outline: 1px solid white;
    overflow-y: auto;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: rgb(255, 255, 255) transparent;
}
.box-content::-webkit-scrollbar { width: 6px;}
.box-content::-webkit-scrollbar-track { background: transparent;}
.box-content::-webkit-scrollbar-thumb {background: white; border-radius: 3px; }
.box-content::-webkit-scrollbar-thumb:hover { background: #ccc;}



.common-box{
    position: relative;
        width: 100%;
        height: 200px;
}
.common-left-box{
    position: absolute;
        left: 0;
        width: 50%;
        height: 100%;
}
.common-right-box{
    position: absolute;
        right: 0;
        width: 50%;
        height: 100%;
}
.common-line{
    position: absolute;
        width: 100%;
}




.retro-hr-double {
    border: none;
    border-top: 3px double var(--text-primary, #14171A);
    margin: 18px 0;
    width: 100%;
    opacity: 0.85;
}
.retro-vr-double {
    align-self: stretch;
    border-left: 3px double var(--text-primary, #14171A);
    margin: 0 16px;
    opacity: 0.85;
}

.retro-hr-symbol {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 16px 0;
}
.retro-hr-symbol .line {
    flex: 1;
    border-top: 1px dashed var(--text-secondary, #657786);
}
.retro-hr-symbol .symbol {
    padding: 0 10px;
    font-family: "Georgia", serif;
    font-size: 11px;
    color: var(--text-primary, #14171A);
}
.retro-vr-dashed {
    align-self: stretch;
    border-left: 1px dashed var(--text-secondary, #657786);
    margin: 0 14px;
}


.frost-divider {
    margin: 40px auto;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(100, 120, 140, 0.1) 20%, 
        rgba(160, 180, 200, 0.4) 50%, 
        rgba(100, 120, 140, 0.1) 80%, 
        transparent 100%
    );
}
.whisper-divider {
    border: none;
      border-top: 1px dashed rgba(176, 181, 192, 0.4); 
    margin: 0em 0; 
    width: 100%;
    height: 0;
    pointer-events: none;
}


.ordered-whisper-block {
    position: relative;
    border-left: 1px dashed rgba(176, 181, 192, 0.4);
    padding-left: 0.3em;
    margin: 0.3em 0;
    font-size: 0.88rem;
    line-height: 1.3;
}
.ordered-whisper-block .whisper-item {
    margin-bottom: 0.3em;
    color: #4a505a;
}
.ordered-whisper-block .whisper-item:last-child {margin-bottom: 0;}
.ordered-whisper-block .whisper-num {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #b0b5c0;
    margin-right: 4px;
    display: inline-block;
}


.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {display: none;}