@media only screen and (min-aspect-ratio: 9/16) {
    html {
        --width: 56.25vh;
        --height: 100vh;
        /* font-size: calc(1/1920*var(--height)); */
        --newPixel: calc(1/1920*(var(--height)));
    }

}
@media only screen and (max-aspect-ratio: 9/16){
    html{
        --width: 100vw;
        --height: calc(16/9*var(--width));
        /* font-size: calc(1/1920*var(--height)); */
        --newPixel: calc(1/1080*(var(--width)));
    }
}

.LO_message {
    /* --width: 56.25vh;
    --height: 100vh; */
    position: relative;
    width: var(--width);
    height: var(--height);
    top: calc(var(--height)*0);
    left: calc(var(--width)*0);
    /* background-color: #0000007C; */
    display: flex;
    justify-content: center;
    flex-direction: column;
    transition: background-color 0.5s;
    z-index: -1;
}

.popup {
    position: absolute;
    width: calc((940/1080)*var(--width));
    height: calc((719/1920)*var(--height));
    left: calc(70/1080*var(--width));
    top: calc(950/1080*var(--width));
    opacity: 1;
    transition: opacity 0.5s linear, top 0.5s linear;
}

.tick_mark_container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: calc(238/1080*var(--width));
    height: calc(238/1920*var(--height));
    left: 50%;
    transform: translate(-50%, 0%);
    top: calc(0*var(--newPixel));
    filter: drop-shadow(calc(0*var(--newPixel)) calc(4*var(--newPixel)) calc(4*var(--newPixel)) rgba(0, 0, 0, 0.25));
    opacity: 1;
}

.tick_mark_container .line1 {
    position: absolute;
    width: calc(73.32/1080*var(--width));
    /* height: calc(0*var(--newPixel)); */
    left: 32%;
    top: 63%;
    border-top: calc(12.5/1080*var(--width)) solid #FFFFFF;
    border-bottom: calc(12.5/1080*var(--width)) solid #FFFFFF;
    box-sizing: content-box;
    border-radius: calc(12.5/1080*var(--width));
    background-color: #ffffff;
    transform: translate(-50%, -50%) rotate(39.89deg);
}

.tick_mark_container .line2 {
    position: absolute;
    width: calc(144.73/1080*var(--width));
    /* height: calc(0*var(--newPixel)); */
    left: 58%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-top: calc(12.5/1080*var(--width)) solid #FFFFFF;
    border-bottom: calc(12.5/1080*var(--width)) solid #FFFFFF;
    border-radius: calc(12.5/1080*var(--width));
    background-color: #ffffff;
    transform: translate(-50%, -50%) rotate(-48.59deg);
}

.tick_mark_container .ellipse1 {
    border-radius: 50%;
    position: absolute;
    width: calc(238/1080*var(--width));
    height: calc(238/1920*var(--height));
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, #10DBA4 0%, #388BFC 153.15%);
    box-shadow: calc(0*var(--newPixel)) calc(5*var(--newPixel)) calc(5*var(--newPixel)) rgba(0, 0, 0, 0.25), inset calc(0*var(--newPixel)) calc(-10*var(--newPixel)) calc(10*var(--newPixel)) rgba(0, 0, 0, 0.25), inset calc(0*var(--newPixel)) calc(10*var(--newPixel)) calc(10*var(--newPixel)) rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.tick_mark_container .ellipse2 {
    border-radius: 50%;
    position: absolute;
    width: calc(238/1080*var(--width));
    height: calc(238/1920*var(--height));
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: calc(10*var(--newPixel)) solid #FFFFFF;
    box-shadow: inset calc(0*var(--newPixel)) calc(-2*var(--newPixel)) calc(-2*var(--newPixel)) rgba(0, 0, 0, 0.25), inset calc(0*var(--newPixel)) calc(-2*var(--newPixel)) calc(-2*var(--newPixel)) rgba(255, 255, 255, 0.5);
    filter: drop-shadow(calc(0*var(--newPixel)) calc(4*var(--newPixel)) calc(4*var(--newPixel)) rgba(0, 0, 0, 0.25));
    display: none;
}

.text_container {
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: calc(940/1080*var(--width));
    height: calc(600/1920*var(--height));
    left: calc(0*var(--newPixel));
    top: calc(120/1920*var(--height));
    background: #FFFFFF;
    border-radius: calc(24/1080*var(--width));
}

.tick_mark_container svg {
    --scaleVal: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    /* transform: translate(-50%, -50%) scale(calc(1.38*var(--width/1080))); property Provided using LO_script*/
    transform: translate(-50%, -50%);
    z-index: 0;
}

.tick_mark_container svg path {
    height: 100%; width: 100%;
    position: absolute;
    fill: none;
    stroke: #b3ff10;
    stroke-width: 6;
    box-shadow: inset calc(0*var(--newPixel)) calc(-2*var(--newPixel)) calc(-2*var(--newPixel)) rgba(0, 0, 0, 0.25), inset calc(0*var(--newPixel)) calc(-2*var(--newPixel)) calc(-2*var(--newPixel)) rgba(255, 255, 255, 0.5);
    filter: drop-shadow (calc(0*var(--newPixel)) calc(4*var(--newPixel)) calc(4*var(--newPixel)) rgba(0, 0, 0, 0.25));
}

.LO_message .text_container p {
    position: relative;
    top: 23%;
    width: 85%;
    font-family: Gotham SSm;
    font-style: normal;
    font-weight: 325;
    font-size: calc(39*var(--newPixel));
    line-height: 120.5%;
    /* or 43px */
    text-align: center;
    /* text-transform: capitalize; */
}

.close_button {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0%);
    top: calc(552*var(--newPixel));
    width: calc(468/1080*var(--width));
    height: calc(128.64/1920*var(--height));
    border: none;
    border-radius: calc(200*var(--newPixel));
    /* border-radius: 0.01vh; */
    background: linear-gradient(90deg, #10dca3, #3988fa);
    color: white;
    font-family: Gotham SSm;
    font-weight: 350;
    font-size: calc(42*var(--newPixel));
    cursor: pointer;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s;
}