/*  .bhashini-dropdown-btn {
            display: none !important;
        }*/
.boxFormMain {
    all: unset;
}



.custom-background {
    background-image: url('<%=Page.ResolveClientUrl("~/images/poster/bg_imagefull.png") %>');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

hr {
    position: absolute;
    width: 95%;
    top: 28%;
}



.lavetheme {
    margin-top: -3%;
    margin-left: -3%;
    font-size: 15px;
    font-weight: bold;
    color: darkred;
    max-width: 97%;
}

.progress-container {
    width: 63%;
    max-width: 500px;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 0px;
    overflow: hidden;
    margin: auto;
    position: absolute;
    left: 0%;
    top: 155%;
}


.gpnamecard {
    font-size: 14px;
    color: darkred;
    font-weight: 800;
    position: absolute;
    top: 82.5%;
    left: 0%;
}

.theme1name {
    position: absolute;
    top: 2%;
    left: 6.5%;
}

.theme2name {
}

.theme3name {
}

.theme4name {
}


.score-container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px #ccc;
    display: inline-block;
}

.gauge-wrapper {
    position: relative;
    width: 200px;
    height: 100px;
    margin: 0 auto 20px;
}

.gauge {
    width: 109%;
    height: 125%;
    background: conic-gradient(#004080 0% 10%, #40c4ff 10% 25%, #4caf50 25% 50%, #ffeb3b 50% 75%, #ff9800 75% 90%, #f44336 90% 100%);
    border-top-left-radius: 134px;
    border-top-right-radius: 137px;
    overflow: hidden;
}


.imagespeedmeter {
    width: 300px;
    height: 150px;
}


.needle {
    position: absolute;
    bottom: -64px;
    left: 49%;
    width: 13px;
    height: 106px;
    background: black;
    transform-origin: bottom center;
    transform: rotate(-90deg);
    transition: transform 1s ease-out;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.needle-center {
    position: absolute;
    bottom: -74px;
    left: 53%;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    background: black;
    border-radius: 50%;
    z-index: 2;
}



.score-value {
    font-size: 60px;
    font-weight: bold;
    margin: 10px 0;
    display: flex;
    justify-content: center;
    margin-top: 13%;
}

.grade {
    font-size: 24px;
    background: #002f52;
    color: white;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    width: 60%;
    margin: 5%;
}

.population {
    font-size: 18px;
    margin-top: 10px;
}

.population-value {
    width: 50%;
    font-size: 36px;
    background: #c62828;
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 5px;
    display: flex;
    justify-content: center;
}

.legend {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;
    flex-wrap: wrap;
}

.legend-item {
    text-align: center;
}

.legend-box {
    width: 76px;
    height: 46px;
    border-radius: 5px;
    margin: 0 auto 5px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.Aplus {
    background: #5B9BD5;
}

.A {
    background: #A8D08D;
}

.B {
    background: #FFD966;
    color: #000;
}

.C {
    background: #FF9933;
}

.D {
    background: #FF0000;
}

.label {
    font-size: 16px;
    font-weight: 700;
}


.cardImage {
    width: 100%;
}




.progress-containercard2 {
    width: 18%;
    max-width: 500px;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 0px;
    overflow: hidden;
    margin: auto;
    position: absolute;
    left: 41%;
    top: 12%;
}

.progress-containercard4 {
    width: 18%;
    max-width: 500px;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 0px;
    overflow: hidden;
    margin: auto;
    position: absolute;
    left: 7%;
    top: 46%;
}


.progress-containercard5 {
    width: 18%;
    max-width: 500px;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 0px;
    overflow: hidden;
    margin: auto;
    position: absolute;
    left: 41%;
    top: 46%;
}



.progress-containercard7 {
    width: 18%;
    max-width: 500px;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 0px;
    overflow: hidden;
    margin: auto;
    position: absolute;
    left: 7%;
    bottom: 16%;
}


.progress-containercard8 {
    width: 18%;
    max-width: 500px;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 0px;
    overflow: hidden;
    margin: auto;
    position: absolute;
    left: 41%;
    bottom: 17%;
}


.progress-container2 {
    width: 18%;
    max-width: 500px;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 0px;
    overflow: hidden;
    margin: auto;
    position: absolute;
    top: 12%;
    right: 8%;
}


.progress-container6 {
    width: 18%;
    max-width: 500px;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 0px;
    overflow: hidden;
    margin: auto;
    position: absolute;
    top: 46%;
    right: 8%;
}

.progress-container4 {
    width: 19%;
    max-width: 500px;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 0px;
    position: absolute;
    bottom: 17%;
    width: 17%;
    right: 8%;
}


.progress-bar {
    height: 100%;
    width: 0;
    border-radius: 0px;
    transition: width 0.6s ease-in-out;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #765055;
    font-weight: bold;
}

.blue {
    background-color: #5B9BD5;
}

.green {
    background-color: #ADD08D;
}

.yellow {
    background-color: #FFD966;
    color: black;
}

.orange {
    background-color: #FF9933;
}

.red {
    background-color: #FF0000;
}

.gpname {
    font-size: 31px;
    font-weight: 800;
    justify-self: anchor-center;
    color: darkred;
    margin: 5%
}

.lavetheme1 {
    margin-top: -51%;
    margin-left: 22%;
    font-size: 18px;
    font-weight: bold;
    color: #23B67A;
}

.lavethemecard2 {
    margin-top: -68%;
    margin-left: 21%;
    font-size: 18px;
    font-weight: bold;
    color: darkred;
}

.lavethemecard4 {
    margin-top: -69%;
    margin-left: 21%;
    font-size: 17px;
    font-weight: bold;
    color: #47BFE8;
}

.lavethemecard5 {
    margin-top: -68%;
    margin-left: 22%;
    font-size: 17px;
    font-weight: bold;
    color: #7B9B39;
}

.lavethemecard7 {
    margin-top: -68%;
    margin-left: 22%;
    font-size: 17px;
    font-weight: bold;
    color: #044B79;
}


.lavethemecard8 {
    margin-top: -67%;
    margin-left: 19%;
    font-size: 17px;
    font-weight: bold;
    color: #7B64AC;
}

.lavetheme2 {
    position: absolute;
    top: 2%;
    right: 9%;
    font-size: 17px;
    font-weight: bold;
    color: #ffbf00;
}

.lavetheme3 {
    position: absolute;
    top: 36%;
    right: -1%;
    font-size: 15px;
    font-weight: bold;
    color: orange;
    max-width: 250px;
}

.lavetheme4 {
    position: absolute;
    bottom: 29.5%;
    right: 6%;
    font-size: 18px;
    font-weight: bold;
    color: red;
}

.textslogan {
    font-size: 45px;
    display: flex;
    justify-content: start !important;
    position: relative;
    left: 15%;
    color: darkred;
    max-width: 80%;
}



.gpnamecard2 {
    font-size: 14px;
    color: darkred;
    font-weight: 800;
    position: absolute;
    top: 6%;
    left: 41%;
}


.gpnamecard4 {
    font-size: 14px;
    color: darkred;
    font-weight: 800;
    position: absolute;
    top: 40%;
    left: 7%;
}



.gpnamecard5 {
    font-size: 14px;
    color: darkred;
    font-weight: 800;
    position: absolute;
    top: 40%;
    left: 41.5%;
}



.gpnamecard7 {
    font-size: 14px;
    color: darkred;
    font-weight: 800;
    position: absolute;
    bottom: 22.5%;
    left: 7%;
}



.gpnamecard8 {
    font-size: 14px;
    color: darkred;
    font-weight: 800;
    position: absolute;
    bottom: 22.5%;
    left: 41%;
}


.gpnamecard3 {
    font-size: 16px;
    color: darkred;
    font-weight: 800;
    position: absolute;
    margin-top: -18%;
    margin-left: 7%;
}

.gpnamecard6 {
    font-size: 16px;
    color: darkred;
    font-weight: 800;
    position: absolute;
    margin-top: -17.5%;
    margin-left: 7.5%;
}



.gpnamecard9 {
    font-size: 16px;
    color: darkred;
    font-weight: 800;
    position: absolute;
    margin-top: -16%;
    margin-left: 7%;
}

.lavetheme3 {
    position: absolute;
    top: 35%;
    right: 4%;
    font-size: 15px;
    font-weight: bold;
    color: orange;
    max-width: 250px;
}

.imagespeedmeter {
    width: 325px;
    height: 168px;
    margin-left: -19%;
}

@media print {
    .non-printable {
        display: none !important;
    }

    .breadcrumb {
        display: none !important;
    }

    .footer-bs1 {
        display: none !important;
    }

    .NRA1 {
        display: none !important;
    }

    .state-logo {
        display: none !important;
    }
}


@media (min-width: 1600px) and (max-width:1800px ) {
    .lavetheme {
        margin-top: -3%;
        margin-left: -3%;
        font-size: 15px;
        font-weight: bold;
        color: darkred;
        max-width: 97%;
    }

    .imagespeedmeter {
        width: 300px;
        height: 150px;
        margin-left: 15%;
    }

    .gpnamecard {
        font-size: 14px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 82.5%;
        left: 0%;
    }




    .gpnamecard2 {
        font-size: 14px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 7%;
        left: 41%;
    }


    .gpnamecard4 {
        font-size: 14px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 40%;
        left: 7%;
    }


    .gpnamecard5 {
        font-size: 14px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 40%;
        left: 41.5%;
    }



    .gpnamecard7 {
        font-size: 14px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        bottom: 22.5%;
        left: 7%;
    }



    .gpnamecard8 {
        font-size: 14px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        bottom: 22.5%;
        left: 41%;
    }

    .lavethemecard2 {
        margin-top: -68%;
        margin-left: 21%;
        font-size: 18px;
        font-weight: bold;
        color: darkred;
    }

    .progress-containercard2 {
        width: 18%;
        max-width: 500px;
        height: 30px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        top: 12%;
    }

    .lavetheme2 {
        position: absolute;
        top: 2%;
        right: 6%;
        font-size: 17px;
        font-weight: bold;
        color: #ffbf00;
    }

    .gpnamecard3 {
        font-size: 16px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -18%;
        margin-left: 7%;
    }

    .progress-container2 {
        width: 18%;
        max-width: 500px;
        height: 30px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 12%;
        right: 8%;
    }

    .progress-containercard4 {
        width: 18%;
        max-width: 500px;
        height: 30px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 7%;
        top: 46%;
    }

    .lavethemecard4 {
        margin-top: -69%;
        margin-left: 21%;
        font-size: 17px;
        font-weight: bold;
        color: #47BFE8;
    }

    .lavethemecard5 {
        margin-top: -68%;
        margin-left: 22%;
        font-size: 17px;
        font-weight: bold;
        color: #7B9B39;
    }

    .progress-containercard5 {
        width: 18%;
        max-width: 500px;
        height: 30px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        top: 46%;
    }

    .lavetheme3 {
        position: absolute;
        top: 35%;
        right: 1%;
        font-size: 15px;
        font-weight: bold;
        color: orange;
        max-width: 250px;
    }

    .gpnamecard6 {
        font-size: 16px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -17.5%;
        margin-left: 6%;
    }

    .progress-container6 {
        width: 18%;
        max-width: 500px;
        height: 30px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 46%;
        right: 8%;
    }

    .lavethemecard7 {
        margin-top: -68%;
        margin-left: 22%;
        font-size: 17px;
        font-weight: bold;
        color: #044B79;
    }

    .progress-containercard7 {
        width: 18%;
        max-width: 500px;
        height: 30px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 7%;
        bottom: 16%;
    }

    .progress-containercard8 {
        width: 18%;
        max-width: 500px;
        height: 30px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        bottom: 17%;
    }

    .lavetheme4 {
        position: absolute;
        bottom: 29.5%;
        right: 3%;
        font-size: 18px;
        font-weight: bold;
        color: red;
    }

    .gpnamecard9 {
        font-size: 16px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -16%;
        margin-left: 7%;
    }

    .progress-container4 {
        width: 19%;
        max-width: 500px;
        height: 30px;
        background-color: #e0e0e0;
        border-radius: 0px;
        position: absolute;
        bottom: 17%;
        width: 17%;
        right: 8%;
    }

    .lavethemecard8 {
        margin-top: -68%;
        margin-left: 22%;
        font-size: 17px;
        font-weight: bold;
        color: #7B64AC;
    }

    .progress-container {
        width: 63%;
        max-width: 500px;
        height: 30px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 0%;
        top: 155%;
    }

    .gauge {
        width: 99%;
        height: 99%;
        background: conic-gradient(#004080 0% 10%, #40c4ff 10% 25%, #4caf50 25% 50%, #ffeb3b 50% 75%, #ff9800 75% 90%, #f44336 90% 100%);
        border-top-left-radius: 134px;
        border-top-right-radius: 137px;
        overflow: hidden;
    }

    .score-value {
        font-size: 33px;
        font-weight: bold;
        margin: 0px 0;
        display: flex;
        justify-content: center;
        margin-top: 19%;
    }


    .imagespeedmeter {
        width: 325px;
        height: 168px;
        margin-left: -19%;
    }


    .needle-center {
        position: absolute;
        bottom: -72px;
        left: 56%;
        transform: translateX(-50%);
        width: 26px;
        height: 26px;
        background: black;
        border-radius: 50%;
        z-index: 2;
    }

    .needle {
        position: absolute;
        bottom: -56px;
        left: 52%;
        width: 15px;
        height: 102px;
        background: black;
        transform-origin: bottom center;
        transform: rotate(-90deg);
        transition: transform 1s ease-out;
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }




    .textslogan {
        font-size: 35px;
        display: flex;
        justify-content: start !important;
        position: relative;
        left: 16%;
        color: darkred;
        max-width: 80%;
    }



    .grade {
        font-size: 12px;
        background: #002f52;
        color: white;
        display: inline-block;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        width: 60%;
        margin: 5%;
    }

    .legend {
        display: flex;
        justify-content: center;
        margin-top: 0px;
        gap: 10px;
        flex-wrap: wrap;
    }


    .legend-box {
        width: 74px;
        height: 43px;
        border-radius: 5px;
        margin: 0 auto 5px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }
}


@media (min-width: 1400px) and (max-width:1600px ) {
    .lavetheme {
        margin-top: -3%;
        margin-left: -3%;
        font-size: 14px;
        font-weight: bold;
        color: darkred;
        max-width: 97%;
    }

    .imagespeedmeter {
        width: 300px;
        height: 150px;
        margin-left: 15%;
    }

    .gpnamecard {
        font-size: 14px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 82.5%;
        left: 0%;
    }




    .gpnamecard2 {
        font-size: 14px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 7%;
        left: 41%;
    }


    .gpnamecard4 {
        font-size: 14px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 40%;
        left: 7%;
    }


    .gpnamecard5 {
        font-size: 14px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 40%;
        left: 41.5%;
    }



    .gpnamecard7 {
        font-size: 14px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        bottom: 22.5%;
        left: 7%;
    }



    .gpnamecard8 {
        font-size: 14px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        bottom: 22.5%;
        left: 41%;
    }

    .lavethemecard2 {
        margin-top: -68%;
        margin-left: 21%;
        font-size: 18px;
        font-weight: bold;
        color: darkred;
    }

    .progress-containercard2 {
        width: 18%;
        max-width: 500px;
        height: 25px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        top: 12%;
    }

    .lavetheme2 {
        position: absolute;
        top: 2%;
        right: 6.5%;
        font-size: 15px;
        font-weight: bold;
        color: #ffbf00;
    }

    .gpnamecard3 {
        font-size: 16px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -18%;
        margin-left: 7%;
    }

    .progress-container2 {
        width: 18%;
        max-width: 500px;
        height: 25px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 12%;
        /* left: 3%; */
        right: 8%;
    }

    .progress-containercard4 {
        width: 18%;
        max-width: 500px;
        height: 25px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 7%;
        top: 46%;
    }

    .lavethemecard4 {
        margin-top: -69%;
        margin-left: 18%;
        font-size: 15px;
        font-weight: bold;
        color: #47BFE8;
    }

    .lavethemecard5 {
        margin-top: -68%;
        margin-left: 20%;
        font-size: 15px;
        font-weight: bold;
        color: #7B9B39;
    }

    .progress-containercard5 {
        width: 18%;
        max-width: 500px;
        height: 25px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        top: 46%;
    }

    .lavetheme3 {
        position: absolute;
        top: 35%;
        right: -0.5%;
        font-size: 13px;
        font-weight: bold;
        color: orange;
        max-width: 250px;
    }

    .gpnamecard6 {
        font-size: 16px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -17.5%;
        margin-left: 6%;
    }

    .progress-container6 {
        width: 18%;
        max-width: 500px;
        height: 25px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 46%;
        right: 8%;
    }

    .lavethemecard7 {
        margin-top: -68%;
        margin-left: 22%;
        font-size: 15px;
        font-weight: bold;
        color: #044B79;
        max-width: 75%;
    }

    .progress-containercard7 {
        width: 18%;
        max-width: 500px;
        height: 25px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 7%;
        bottom: 16%;
    }

    .progress-containercard8 {
        width: 18%;
        max-width: 500px;
        height: 25px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        bottom: 17%;
    }

    .lavetheme4 {
        position: absolute;
        bottom: 29.5%;
        right: 4%;
        font-size: 15px;
        font-weight: bold;
        color: red;
    }

    .gpnamecard9 {
        font-size: 16px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -16%;
        margin-left: 7%;
    }

    .progress-container4 {
        width: 19%;
        max-width: 500px;
        height: 25px;
        background-color: #e0e0e0;
        border-radius: 0px;
        position: absolute;
        bottom: 17%;
        width: 17%;
        right: 8%;
    }

    .lavethemecard8 {
        margin-top: -68%;
        margin-left: 22%;
        font-size: 15px;
        font-weight: bold;
        color: #7B64AC;
        max-width: 75%;
    }

    .progress-container {
        width: 63%;
        max-width: 500px;
        height: 25px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 0%;
        top: 138%;
    }

    /* this is speedo meter*/
    .gauge {
        width: 99%;
        height: 99%;
        background: conic-gradient(#004080 0% 10%, #40c4ff 10% 25%, #4caf50 25% 50%, #ffeb3b 50% 75%, #ff9800 75% 90%, #f44336 90% 100%);
        border-top-left-radius: 134px;
        border-top-right-radius: 137px;
        overflow: hidden;
    }

    .score-value {
        font-size: 33px;
        font-weight: bold;
        margin: 0px 0;
        display: flex;
        justify-content: center;
        margin-top: 19%;
    }


    .imagespeedmeter {
        width: 325px;
        height: 168px;
        margin-left: -19%;
    }


    .needle-center {
        position: absolute;
        bottom: -72px;
        left: 56%;
        transform: translateX(-50%);
        width: 26px;
        height: 26px;
        background: black;
        border-radius: 50%;
        z-index: 2;
    }

    .needle {
        position: absolute;
        bottom: -56px;
        left: 52%;
        width: 15px;
        height: 102px;
        background: black;
        transform-origin: bottom center;
        transform: rotate(-90deg);
        transition: transform 1s ease-out;
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }




    .textslogan {
        font-size: 30px;
        display: flex;
        justify-content: start !important;
        position: relative;
        left: 16%;
        color: darkred;
        max-width: 80%;
    }



    .grade {
        font-size: 12px;
        background: #002f52;
        color: white;
        display: inline-block;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        width: 60%;
        margin: 3%;
    }

    .legend {
        display: flex;
        justify-content: center;
        margin-top: 0px;
        gap: 10px;
        flex-wrap: wrap;
    }


    .legend-box {
        width: 74px;
        height: 43px;
        border-radius: 5px;
        margin: 0 auto 5px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }
}

@media (max-width: 1400px) {

    .lavetheme {
        margin-top: -51%;
        margin-left: 22%;
        font-size: 12px;
        font-weight: bold;
        color: darkred;
    }

    .gpnamecard {
        font-size: 12px;
        color: darkred;
        font-weight: 800;
        margin-top: -1%;
        margin-left: 23%;
    }

    .lavethemecard2 {
        margin-top: -51%;
        margin-left: 22%;
        font-size: 12px;
        font-weight: bold;
        color: darkred;
    }

    .progress-containercard2 {
        width: 18%;
        max-width: 500px;
        height: 18px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        top: 11%;
    }

    .lavetheme2 {
        position: absolute;
        top: 3%;
        right: 9%;
        font-size: 12px;
        font-weight: bold;
        color: #ffbf00;
    }

    .gpnamecard3 {
        font-size: 12px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -15%;
        margin-left: 7%;
    }

    .progress-container2 {
        width: 18%;
        max-width: 500px;
        height: 19px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 11%;
        /* left: 3%; */
        right: 8%;
    }

    .progress-containercard4 {
        width: 18%;
        max-width: 500px;
        height: 19px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 8%;
        top: 45%;
    }

    .lavethemecard4 {
        margin-top: -50%;
        margin-left: 22%;
        font-size: 12px;
        font-weight: bold;
        color: #47BFE8;
    }

    .lavethemecard5 {
        margin-top: -50%;
        margin-left: 22%;
        font-size: 12px;
        font-weight: bold;
        color: #7B9B39;
    }

    .progress-containercard5 {
        width: 18%;
        max-width: 500px;
        height: 19px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        top: 45%;
    }

    .lavetheme3 {
        position: absolute;
        top: 36%;
        right: -4%;
        font-size: 12px;
        font-weight: bold;
        color: orange;
        max-width: 250px;
    }

    .gpnamecard6 {
        font-size: 12px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -13%;
        margin-left: 7%;
    }

    .progress-container6 {
        width: 18%;
        max-width: 500px;
        height: 19px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 47%;
        right: 8%;
    }

    .lavethemecard7 {
        margin-top: -54%;
        margin-left: 22%;
        font-size: 12px;
        font-weight: bold;
        color: #044B79;
    }

    .progress-containercard7 {
        width: 18%;
        max-width: 500px;
        height: 19px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 8%;
        bottom: 15%;
    }

    .progress-containercard8 {
        width: 18%;
        max-width: 500px;
        height: 19px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 42%;
        bottom: 15%;
    }

    .lavetheme4 {
        position: absolute;
        bottom: 26%;
        right: 7%;
        font-size: 12px;
        font-weight: bold;
        color: red;
    }

    .gpnamecard9 {
        font-size: 12px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -15%;
        margin-left: 7.5%;
    }

    .progress-container4 {
        width: 19%;
        max-width: 500px;
        height: 19px;
        background-color: #e0e0e0;
        border-radius: 0px;
        position: absolute;
        bottom: 15%;
        width: 17%;
        right: 9%;
    }

    .lavethemecard8 {
        margin-top: -50%;
        margin-left: 22%;
        font-size: 12px;
        font-weight: bold;
        color: #7B64AC;
    }

    .progress-container {
        width: 53%;
        max-width: 500px;
        height: 19px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: relative;
    }


    .gauge {
        width: 95%;
        height: 95%;
        background: conic-gradient(#004080 0% 10%, #40c4ff 10% 25%, #4caf50 25% 50%, #ffeb3b 50% 75%, #ff9800 75% 90%, #f44336 90% 100%);
        border-top-left-radius: 134px;
        border-top-right-radius: 137px;
        overflow: hidden;
    }

    .score-value {
        font-size: 33px;
        font-weight: bold;
        margin: 5px 0;
        display: flex;
        justify-content: center;
    }

    .needle {
        position: absolute;
        bottom: -2px;
        left: 44%;
        width: 13px;
        height: 80px;
        background: black;
        transform-origin: bottom center;
        transform: rotate(-90deg);
        transition: transform 1s ease-out;
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }

    .textslogan {
        font-size: 21px;
        display: flex;
        justify-content: start !important;
        position: relative;
        left: 16%;
        color: darkred;
    }



    .grade {
        font-size: 12px;
        background: #002f52;
        color: white;
        display: inline-block;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        width: 60%;
        margin: 0%;
    }

    .legend {
        display: flex;
        justify-content: center;
        margin-top: 0px;
        gap: 10px;
        flex-wrap: wrap;
    }


    .legend-box {
        width: 66px;
        height: 19px;
        border-radius: 5px;
        margin: 0 auto 5px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    .gpname {
        font-size: 20px;
        font-weight: 800;
        justify-self: anchor-center;
        color: darkred;
        margin: 3%;
    }

    .label {
        font-size: 9px;
        font-weight: 700;
    }
}

@media (min-width: 1200px) and (max-width:1399px ) {

    .lavetheme {
        margin-top: -3%;
        margin-left: -3%;
        font-size: 11px;
        font-weight: bold;
        color: darkred;
        max-width: 97%;
    }

    .imagespeedmeter {
        width: 300px;
        height: 150px;
        margin-left: 15%;
    }

    .gpnamecard {
        font-size: 10px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 82.5%;
        left: -22%;
    }




    .gpnamecard2 {
        font-size: 14px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 7%;
        left: 41%;
    }


    .gpnamecard4 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 40%;
        left: 6%;
    }


    .gpnamecard5 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 40%;
        left: 41.5%;
    }



    .gpnamecard7 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        bottom: 22.5%;
        left: 7%;
    }



    .gpnamecard8 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        bottom: 22.5%;
        left: 41%;
    }

    .lavethemecard2 {
        margin-top: -68%;
        margin-left: 21%;
        font-size: 11px;
        font-weight: bold;
        color: darkred;
    }

    .progress-containercard2 {
        width: 18%;
        max-width: 500px;
        height: 20px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        top: 12%;
    }

    .lavetheme2 {
        position: absolute;
        top: 2%;
        right: 8.5%;
        font-size: 11px;
        font-weight: bold;
        color: #ffbf00;
    }

    .gpnamecard3 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -18%;
        margin-left: 6%;
    }

    .progress-container2 {
        width: 18%;
        max-width: 500px;
        height: 20px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 12%;
        /* left: 3%; */
        right: 8%;
    }

    .progress-containercard4 {
        width: 18%;
        max-width: 500px;
        height: 20px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 6%;
        top: 46%;
    }

    .lavethemecard4 {
        margin-top: -69%;
        margin-left: 18%;
        font-size: 11px;
        font-weight: bold;
        color: #47BFE8;
    }

    .lavethemecard5 {
        margin-top: -68%;
        margin-left: 20%;
        font-size: 11px;
        font-weight: bold;
        color: #7B9B39;
    }

    .progress-containercard5 {
        width: 18%;
        max-width: 500px;
        height: 20px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        top: 46%;
    }

    .lavetheme3 {
        position: absolute;
        top: 34%;
        right: -1%;
        font-size: 11px;
        font-weight: bold;
        color: orange;
        max-width: 26%;
    }

    .gpnamecard6 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -17.5%;
        margin-left: 6%;
    }

    .progress-container6 {
        width: 18%;
        max-width: 500px;
        height: 20px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 46%;
        right: 8%;
    }

    .lavethemecard7 {
        margin-top: -68%;
        margin-left: 22%;
        font-size: 11px;
        font-weight: bold;
        color: #044B79;
        max-width: 75%;
    }

    .progress-containercard7 {
        width: 18%;
        max-width: 500px;
        height: 20px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 7%;
        bottom: 16%;
    }

    .progress-containercard8 {
        width: 18%;
        max-width: 500px;
        height: 20px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        bottom: 17%;
    }

    .lavetheme4 {
        position: absolute;
        bottom: 29.5%;
        right: 7%;
        font-size: 11px;
        font-weight: bold;
        color: red;
    }

    .gpnamecard9 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -16%;
        margin-left: 7%;
    }

    .progress-container4 {
        width: 19%;
        max-width: 500px;
        height: 20px;
        background-color: #e0e0e0;
        border-radius: 0px;
        position: absolute;
        bottom: 17%;
        width: 17%;
        right: 8%;
    }

    .lavethemecard8 {
        margin-top: -68%;
        margin-left: 22%;
        font-size: 12px;
        font-weight: bold;
        color: #7B64AC;
        max-width: 74%;
    }

    .progress-container {
        width: 63%;
        max-width: 500px;
        height: 20px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 0%;
        top: 138%;
    }

    /* this is speedo meter*/
    .gauge {
        width: 99%;
        height: 99%;
        background: conic-gradient(#004080 0% 10%, #40c4ff 10% 25%, #4caf50 25% 50%, #ffeb3b 50% 75%, #ff9800 75% 90%, #f44336 90% 100%);
        border-top-left-radius: 134px;
        border-top-right-radius: 137px;
        overflow: hidden;
    }

    .score-value {
        font-size: 33px;
        font-weight: bold;
        margin: 0px 0;
        display: flex;
        justify-content: center;
        margin-top: 19%;
    }
    .imagespeedmeter {
        width: 325px;
        height: 168px;
        margin-left: -19%;
    }


    .needle-center {
        position: absolute;
        bottom: -72px;
        left: 56%;
        transform: translateX(-50%);
        width: 26px;
        height: 26px;
        background: black;
        border-radius: 50%;
        z-index: 2;
    }

    .needle {
        position: absolute;
        bottom: -56px;
        left: 52%;
        width: 15px;
        height: 102px;
        background: black;
        transform-origin: bottom center;
        transform: rotate(-90deg);
        transition: transform 1s ease-out;
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }
    .textslogan {
        font-size: 20px;
        display: flex;
        justify-content: start !important;
        position: relative;
        left: 16%;
        color: darkred;
        max-width: 80%;
    }
    .grade {
        font-size: 12px;
        background: #002f52;
        color: white;
        display: inline-block;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        width: 60%;
        margin: 2%;
    }

    .legend {
        display: flex;
        justify-content: center;
        margin-top: 0px;
        gap: 10px;
        flex-wrap: wrap;
    }
    .legend-box {
        width: 65px;
        height: 29px;
        border-radius: 5px;
        margin: 0 auto 5px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }
}
@media (min-width: 991.98px) and (max-width:1199px ) {
    .lavetheme {
        margin-top: -3%;
        margin-left: -3%;
        font-size: 8px;
        font-weight: bold;
        color: darkred;
        max-width: 97%;
    }

    .imagespeedmeter {
        width: 300px;
        height: 150px;
        margin-left: 15%;
    }

    .gpnamecard {
        font-size: 9px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 82.5%;
        left: -21%;
    }
    .gpnamecard2 {
        font-size: 9px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 7%;
        left: 41%;
    }
    .gpnamecard4 {
        font-size: 9px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 40%;
        left: 6%;
    }


    .gpnamecard5 {
        font-size: 9px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 40%;
        left: 41.5%;
    }
    .gpnamecard7 {
        font-size: 9px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        bottom: 22.5%;
        left: 7%;
    }
    .gpnamecard8 {
        font-size: 10px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        bottom: 22.5%;
        left: 41%;
    }

    .lavethemecard2 {
        margin-top: -68%;
        margin-left: 21%;
        font-size: 9px;
        font-weight: bold;
        color: darkred;
    }

    .progress-containercard2 {
        width: 18%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        top: 12%;
    }

    .lavetheme2 {
        position: absolute;
        top: 2%;
        right: 8.5%;
        font-size: 9px;
        font-weight: bold;
        color: #ffbf00;
    }

    .gpnamecard3 {
        font-size: 9px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -18%;
        margin-left: 6%;
    }

    .progress-container2 {
        width: 18%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 12%;
       
        right: 8%;
    }

    .progress-containercard4 {
        width: 18%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 6%;
        top: 46%;
    }

    .lavethemecard4 {
        margin-top: -69%;
        margin-left: 18%;
        font-size: 9px;
        font-weight: bold;
        color: #47BFE8;
    }

    .lavethemecard5 {
        margin-top: -68%;
        margin-left: 20%;
        font-size: 9px;
        font-weight: bold;
        color: #7B9B39;
    }

    .progress-containercard5 {
        width: 18%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        top: 46%;
    }


    .lavetheme3 {
        position: absolute;
        top: 34%;
        right: -1%;
        font-size: 9px;
        font-weight: bold;
        color: orange;
        max-width: 25%;
    }

    .gpnamecard6 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -16.5%;
        margin-left: 6%;
    }

    .progress-container6 {
        width: 18%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 46%;
        right: 8%;
    }

    .lavethemecard7 {
        margin-top: -68%;
        margin-left: 22%;
        font-size: 10px;
        font-weight: bold;
        color: #044B79;
        max-width: 75%;
    }

    .progress-containercard7 {
        width: 18%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 7%;
        bottom: 16%;
    }

    .progress-containercard8 {
        width: 18%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        bottom: 17%;
    }

    .lavetheme4 {
        position: absolute;
        bottom: 30.5%;
        right: 2%;
        font-size: 11px;
        font-weight: bold;
        color: red;
    }

    .gpnamecard9 {
        font-size: 10px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -15%;
        margin-left: 7%;
    }

    .progress-container4 {
        width: 19%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        position: absolute;
        bottom: 17%;
        width: 17%;
        right: 8%;
    }

    .lavethemecard8 {
        margin-top: -68%;
        margin-left: 22%;
        font-size: 10px;
        font-weight: bold;
        color: #7B64AC;
        max-width: 76%;
    }

    .progress-container {
        width: 63%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 0%;
        top: 138%;
    }

   
    .gauge {
        width: 99%;
        height: 99%;
        background: conic-gradient(#004080 0% 10%, #40c4ff 10% 25%, #4caf50 25% 50%, #ffeb3b 50% 75%, #ff9800 75% 90%, #f44336 90% 100%);
        border-top-left-radius: 134px;
        border-top-right-radius: 137px;
        overflow: hidden;
    }

    .score-value {
        font-size: 33px;
        font-weight: bold;
        margin: 0px 0;
        display: flex;
        justify-content: center;
        margin-top: 19%;
    }


    .imagespeedmeter {
        width: 325px;
        height: 168px;
        margin-left: -19%;
    }


    .needle-center {
        position: absolute;
        bottom: -72px;
        left: 56%;
        transform: translateX(-50%);
        width: 26px;
        height: 26px;
        background: black;
        border-radius: 50%;
        z-index: 2;
    }

    .needle {
        position: absolute;
        bottom: -56px;
        left: 52%;
        width: 15px;
        height: 102px;
        background: black;
        transform-origin: bottom center;
        transform: rotate(-90deg);
        transition: transform 1s ease-out;
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }




    .textslogan {
        font-size: 19px;
        display: flex;
        justify-content: start !important;
        position: relative;
        left: 16%;
        color: darkred;
        max-width: 80%;
    }



    .grade {
        font-size: 12px;
        background: #002f52;
        color: white;
        display: inline-block;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        width: 60%;
        margin: 1%;
    }

    .legend {
        display: flex;
        justify-content: center;
        margin-top: 0px;
        gap: 10px;
        flex-wrap: wrap;
    }


    .legend-box {
        width: 47px;
        height: 20px;
        border-radius: 5px;
        margin: 0 auto 5px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }
}


@media (min-width: 768px) and (max-width: 991.98px) {

    .lavetheme {
        margin-top: -3%;
        margin-left: -3%;
        font-size: 8px;
        font-weight: bold;
        color: darkred;
        max-width: 97%;
    }

    .imagespeedmeter {
        width: 300px;
        height: 150px;
        margin-left: 15%;
    }

    .gpnamecard {
        font-size: 9px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 82.5%;
        left: -21%;
    }




    .gpnamecard2 {
        font-size: 9px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 7%;
        left: 41%;
    }


    .gpnamecard4 {
        font-size: 9px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 40%;
        left: 6%;
    }


    .gpnamecard5 {
        font-size: 9px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 40%;
        left: 41.5%;
    }



    .gpnamecard7 {
        font-size: 9px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        bottom: 22.5%;
        left: 7%;
    }



    .gpnamecard8 {
        font-size: 10px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        bottom: 22.5%;
        left: 41%;
    }

    .lavethemecard2 {
        margin-top: -68%;
        margin-left: 21%;
        font-size: 9px;
        font-weight: bold;
        color: darkred;
    }

    .progress-containercard2 {
        width: 18%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        top: 12%;
    }

    .lavetheme2 {
        position: absolute;
        top: 2%;
        right: 6.5%;
        font-size: 9px;
        font-weight: bold;
        color: #ffbf00;
    }

    .gpnamecard3 {
        font-size: 9px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -18%;
        margin-left: 6%;
    }

    .progress-container2 {
        width: 18%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 12%;
        /* left: 3%; */
        right: 8%;
    }

    .progress-containercard4 {
        width: 18%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 6%;
        top: 46%;
    }

    .lavethemecard4 {
        margin-top: -69%;
        margin-left: 18%;
        font-size: 9px;
        font-weight: bold;
        color: #47BFE8;
    }

    .lavethemecard5 {
        margin-top: -68%;
        margin-left: 20%;
        font-size: 9px;
        font-weight: bold;
        color: #7B9B39;
    }

    .progress-containercard5 {
        width: 18%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        top: 46%;
    }


    .lavetheme3 {
        position: absolute;
        top: 34%;
        right: 3%;
        font-size: 9px;
        font-weight: bold;
        color: orange;
        max-width: 21%;
    }

    .gpnamecard6 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -16.5%;
        margin-left: 6%;
    }

    .progress-container6 {
        width: 18%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 46%;
        right: 8%;
    }

    .lavethemecard7 {
        margin-top: -68%;
        margin-left: 22%;
        font-size: 10px;
        font-weight: bold;
        color: #044B79;
    }

    .progress-containercard7 {
        width: 18%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 7%;
        bottom: 16%;
    }

    .progress-containercard8 {
        width: 18%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        bottom: 17%;
    }

    .lavetheme4 {
        position: absolute;
        bottom: 26.5%;
        right: 0%;
        font-size: 11px;
        font-weight: bold;
        color: red;
        max-width: 24%;
    }

    .gpnamecard9 {
        font-size: 10px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -15%;
        margin-left: 7%;
    }

    .progress-container4 {
        width: 19%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        position: absolute;
        bottom: 17%;
        width: 17%;
        right: 8%;
    }

    .lavethemecard8 {
        margin-top: -68%;
        margin-left: 22%;
        font-size: 10px;
        font-weight: bold;
        color: #7B64AC;
    }

    .progress-container {
        width: 63%;
        max-width: 500px;
        height: 15px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 0%;
        top: 138%;
    }

  
    .gauge {
        width: 99%;
        height: 99%;
        background: conic-gradient(#004080 0% 10%, #40c4ff 10% 25%, #4caf50 25% 50%, #ffeb3b 50% 75%, #ff9800 75% 90%, #f44336 90% 100%);
        border-top-left-radius: 134px;
        border-top-right-radius: 137px;
        overflow: hidden;
    }

    .score-value {
        font-size: 33px;
        font-weight: bold;
        margin: 0px 0;
        display: flex;
        justify-content: center;
        margin-top: 19%;
    }


    .imagespeedmeter {
        width: 325px;
        height: 168px;
        margin-left: -19%;
    }


    .needle-center {
        position: absolute;
        bottom: -72px;
        left: 56%;
        transform: translateX(-50%);
        width: 26px;
        height: 26px;
        background: black;
        border-radius: 50%;
        z-index: 2;
    }

    .needle {
        position: absolute;
        bottom: -56px;
        left: 52%;
        width: 15px;
        height: 102px;
        background: black;
        transform-origin: bottom center;
        transform: rotate(-90deg);
        transition: transform 1s ease-out;
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }

    .textslogan {
        font-size: 19px;
        display: flex;
        justify-content: start !important;
        position: relative;
        left: 16%;
        color: darkred;
        max-width: 80%;
    }



    .grade {
        font-size: 12px;
        background: #002f52;
        color: white;
        display: inline-block;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        width: 60%;
        margin: 1%;
    }

    .legend {
        display: flex;
        justify-content: center;
        margin-top: 0px;
        gap: 10px;
        flex-wrap: wrap;
    }


    .legend-box {
        width: 38px;
        height: 20px;
        border-radius: 5px;
        margin: 0 auto 5px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
}

@media (max-width: 575.98px) {

    .lavetheme {
        margin-top: -15%;
        margin-left: 13%;
    }
    .gpnamecard {
        font-size: 10px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 77.5%;
        left: -8%;
    }


    .gpnamecard2 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 14%;
        left: 20%;
    }


    .gpnamecard4 {
        font-size: 12px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 35.5%;
        left: 19%;
    }


    .gpnamecard5 {
        font-size: 12px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 47%;
        left: 19%;
    }



    .gpnamecard7 {
        font-size: 12px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        bottom: 30%;
        left: 19%;
    }



    .gpnamecard8 {
        font-size: 12px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        bottom: 19.5%;
        left: 19%;
    }

    .lavethemecard2 {
        position: absolute;
        top: 20%;
        left: -2%;
    }

    .progress-containercard2 {
        width: 60%;
        max-width: 500px;
        height: 18px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 21%;
        top: 15%;
    }

    .lavetheme2 {
        position: absolute;
        top: 23%;
        right: 34%;
        color: #ffbf00;
    }

    .gpnamecard3 {
        font-size: 12px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 26.5%;
        left: 13%;
    }


    .progress-container2 {
        width: 60%;
        max-width: 500px;
        height: 19px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 26%;
        left: 13%;
        right: 13%;
    }

    .progress-containercard4 {
        width: 60%;
        max-width: 500px;
        height: 19px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 23%;
        top: 37%;
    }

    .lavethemecard4 {
        position: absolute;
        top: 41.5%;
        left: -4%;
    }

    .lavethemecard5 {
        position: absolute;
        top: 53%;
        left: -3%;
    }

    .progress-containercard5 {
        width: 60%;
        max-width: 500px;
        height: 19px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 19%;
        top: 49%;
    }

    .lavetheme3 {
        position: absolute;
        top: 56%;
        right: -4%;
        font-size: 12px;
        font-weight: bold;
        color: orange;
        max-width: 250px;
    }

    .gpnamecard6 {
        font-size: 12px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        bottom: 41%;
        left: 12%;
    }

    .progress-container6 {
        width: 60%;
        max-width: 500px;
        height: 19px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 60%;
        right: 21%;
    }

    .lavethemecard7 {
        position: absolute;
        top: 75%;
        left: -3%;
    }

    .progress-containercard7 {
        width: 60%;
        max-width: 500px;
        height: 19px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 19%;
        bottom: 28.5%;
    }

    .progress-containercard8 {
        width: 60%;
        max-width: 500px;
        height: 19px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 19%;
        bottom: 18%;
    }

    .lavetheme4 {
        position: absolute;
        bottom: 10%;
        right: 29%;
        font-size: 12px;
        font-weight: bold;
        color: red;
    }


    .gpnamecard9 {
        font-size: 12px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        bottom: 8%;
        left: 12%;
    }

    .progress-container4 {
        max-width: 500px;
        height: 19px;
        background-color: #e0e0e0;
        border-radius: 0px;
        position: absolute;
        bottom: 6%;
        width: 60%;
        right: 22%;
    }

    .lavethemecard8 {
        position: absolute;
        top: 85.7%;
        left: -3%;
    }

    .progress-container {
        width: 60%;
        max-width: 500px;
        height: 18px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 14%;
        top: 205%;
    }


    .gauge {
        display: none;
    }

    .score-value {
        display: none;
    }
    .textslogan {
        font-size: 21px;
        display: flex;
        justify-content: start !important;
        position: relative;
        left: 16%;
        color: darkred;
        max-width: 80%;
    }
    .grade {
        font-size: 12px;
        background: #002f52;
        color: white;
        display: inline-block;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        width: 60%;
        margin: 0%;
      
    }

    .legend {
        display: flex;
        justify-content: center;
        margin-top: 0px;
        gap: 10px;
        flex-wrap: wrap;
    }


    .legend-box {
        width: 66px;
        height: 22px;
        border-radius: 5px;
        margin: 0 auto 5px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    .printmargin {
        margin-top: -5% !important;
        margin-left: -3% !important;
        
    }
}


@media print {

    .bhashini-dropdown-btn {
        display: none !important;
    }

    @page {
        size: A4 landscape;
    }

    .score-container {
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px #ccc;
        display: inline-block;
    }

    .gauge-wrapper {
        position: relative;
        width: 200px;
        height: 100px;
        margin: -17px auto -5px;
    }

    .gauge {
        width: 109%;
        height: 125%;
        background: conic-gradient(#004080 0% 10%, #40c4ff 10% 25%, #4caf50 25% 50%, #ffeb3b 50% 75%, #ff9800 75% 90%, #f44336 90% 100%);
        border-top-left-radius: 134px;
        border-top-right-radius: 137px;
        overflow: hidden;
    }

    .needle {
        position: absolute;
        bottom: -24px;
        left: 50%;
        width: 13px;
        height: 110px;
        background: black;
        transform-origin: bottom center;
        transform: rotate(-90deg);
        transition: transform 1s ease-out;
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }

    .score-value {
        font-size: 60px;
        font-weight: bold;
        margin: 10px 0;
        display: flex;
        justify-content: center;
    }

    .grade {
        font-size: 24px;
        background: #002f52;
        color: white;
        display: inline-block;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        width: 60%;
        margin: 5%;
    }

    .population {
        font-size: 18px;
        margin-top: 10px;
    }

    .population-value {
        width: 50%;
        font-size: 36px;
        background: #c62828;
        color: white;
        padding: 5px 15px;
        border-radius: 10px;
        display: inline-block;
        margin-top: 5px;
        display: flex;
        justify-content: center;
    }

    .legend {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .legend-item {
        text-align: center;
    }

    .legend-box {
        width: 50px;
        height: 30px;
        border-radius: 5px;
        margin: 10px auto 5px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    .Aplus {
        background: #5B9BD5;
    }

    .A {
        background: #A8D08D;
    }

    .B {
        background: #FFD966;
        color: #000;
    }

    .C {
        background: #FF9933;
    }

    .D {
        background: #FF0000;
    }

    .label {
        font-size: 12px;
        font-weight: 700;
    }


    .cardImage {
        width: 100%;
    }


    .progress-container {
        width: 63%;
        max-width: 500px;
        height: 16px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 0%;
        top: 134%;
    }


    .progress-containercard2 {
        width: 18%;
        max-width: 500px;
        height: 16px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        top: 12%;
    }


    .progress-containercard4 {
        width: 18%;
        max-width: 500px;
        height: 16px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 7%;
        top: 45%;
    }


    .progress-containercard5 {
        width: 18%;
        max-width: 500px;
        height: 16px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        top: 45%;
    }



    .progress-containercard7 {
        width: 18%;
        max-width: 500px;
        height: 16px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 7%;
        bottom: 16%;
    }



    .progress-containercard8 {
        width: 18%;
        max-width: 500px;
        height: 16px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        left: 41%;
        bottom: 17%;
    }



    .progress-container2 {
        width: 18%;
        max-width: 500px;
        height: 16px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 12%;
        right: 8%;
    }


    .progress-container6 {
        width: 18%;
        max-width: 500px;
        height: 16px;
        background-color: #e0e0e0;
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 45%;
        right: 6%;
    }

    .progress-container4 {
        width: 19%;
        max-width: 500px;
        height: 16px;
        background-color: #e0e0e0;
        border-radius: 0px;
        position: absolute;
        bottom: 17%;
        width: 17%;
        right: 7%;
    }


    .progress-bar {
        height: 100%;
        width: 0;
        border-radius: 0px;
        transition: width 0.6s ease-in-out;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #765055;
        font-weight: bold;
    }

    .blue {
        background-color: #5B9BD5;
    }

    .green {
        background-color: #A8D08D;
    }

    .yellow {
        background-color: #FFD966;
        color: black;
    }

    .orange {
        background-color: #FF9933;
    }

    .red {
        background-color: #FF0000;
    }

    .gpname {
        font-size: 35px;
        font-weight: 800;
        color: darkred;
        margin: 5%;
    }

    .lavetheme {
        margin-top: -4%;
        margin-left: -4%;
        max-width: 80%;
        font-size: 11px;
        font-weight: bold;
        color: darkred;
    }


    .lavetheme1 {
        margin-top: -51%;
        margin-left: 22%;
        font-size: 18px;
        font-weight: bold;
        color: #23B67A;
    }

    .lavethemecard2 {
        margin-top: -69%;
        margin-left: 21%;
        font-size: 12px;
        font-weight: bold;
        color: darkred;
    }

    .lavethemecard4 {
        margin-top: -68%;
        margin-left: 21%;
        font-size: 11px;
        font-weight: bold;
        color: #47BFE8;
    }

    .lavethemecard5 {
        margin-top: -68%;
        margin-left: 21%;
        font-size: 11px;
        font-weight: bold;
        color: #7B9B39;
    }

    .lavethemecard7 {
        margin-top: -68%;
        margin-left: 22%;
        font-size: 11px;
        font-weight: bold;
        color: #044B79;
    }


    .lavethemecard8 {
        margin-top: -67%;
        margin-left: 19%;
        font-size: 11px;
        font-weight: bold;
        color: #7B64AC;
    }

    .lavetheme2 {
        position: absolute;
        top: 1.5%;
        right: 3%;
        font-size: 12px;
        font-weight: bold;
        color: #ffbf00;
    }

    .lavetheme3 {
        position: absolute;
        top: 34%;
        right: 0%;
        font-size: 11px;
        font-weight: bold;
        color: orange;
        max-width: 24%;
    }

    .lavetheme4 {
        position: absolute;
        bottom: 30%;
        right: 3%;
        font-size: 11px;
        font-weight: bold;
        color: red;
    }

    .gpnamecard5 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 40%;
        left: 41.5%;
    }

    .gpnamecard6 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -16.5%;
        margin-left: 7.5%;
    }

    .hr {
        width: 71%;
        margin-left: 21%;
        margin-top: -5%;
    }
    .gpnamecard {
        font-size: 11px;
        max-width: 70% !important;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 95%;
        left: -22%;
    }

    .gpnamecard2 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 8%;
        left: 41%;
    }


    .gpnamecard3 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -17%;
        margin-left: 7%;
    }

    .gpnamecard4 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        top: 40%;
        left: 7%;
    }

    .gauge {
        width: 96%;
        height: 96%;
        background: conic-gradient(#004080 0% 10%, #40c4ff 10% 25%, #4caf50 25% 50%, #ffeb3b 50% 75%, #ff9800 75% 90%, #f44336 90% 100%);
        border-top-left-radius: 134px;
        border-top-right-radius: 137px;
        overflow: hidden;
    }

    .needle {
        position: absolute;
        bottom: 3px;
        left: 44%;
        width: 13px;
        height: 83px;
        background: black;
        transform-origin: bottom center;
        transform: rotate(-90deg);
        transition: transform 1s ease-out;
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }

    .score-value {
        font-size: 29px;
        font-weight: bold;
        margin: 0px 0;
        display: flex;
        justify-content: center;
    }

    .textslogan {
        font-size: 19px;
        display: flex;
        justify-content: start !important;
        position: relative;
        left: 11%;
        color: darkred;
        max-width: 80%;
        margin-top: -10% !important;
    }

    .grade {
        font-size: 18px;
        background: #002f52;
        color: white;
        display: inline-block;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        width: 63%;
        margin: 1%;
    }

    .gpname {
        font-size: 22px;
        font-weight: 800;
        color: darkred;
        margin: 1%;
    }

    .legend {
        display: flex;
        justify-content: center;
        margin-top: 3px;
        gap: 3px;
        flex-wrap: wrap;
    }

    .gauge-wrapper {
        position: relative;
        width: 200px;
        height: 100px;
        margin: -14px auto -5px;
    }

    .gpnamecard7 {
        font-size: 12px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        bottom: 22.5%;
    }

    .gpnamecard8 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        bottom: 22.5%;
    }

    .gpnamecard9 {
        font-size: 11px;
        color: darkred;
        font-weight: 800;
        position: absolute;
        margin-top: -16%;
        margin-left: 7%;
    }
    .grade {
        font-size: 9px;
        background: #002f52;
        color: white;
        display: inline-block;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        width: 60%;
        margin: 2%;
    }
    .gpname {
        font-size: 14px;
        font-weight: 800;
        color: darkred;
        margin: 1%;
    }

    .printmargin {
        margin-top: -0% !important;
        margin-left: 5% !important;
    }

    .postertext {
        margin-top: 0px !important;
        margin: 6px auto !important;
        padding: 3px !important;
        width: 98%;
        border: none;
        display: block;
    }

    .autopadding {
        padding: 0px !important;
    }

   .disclaimer {
        font-size: 10px;
    }
}

.printpage {
    margin-top: 0.3% !important;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 500px;
    margin: 1em auto;
}
.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tbody tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

.highcharts-description {
    margin: 0.3rem 10px;
}