:root {
    --theme-color: #7b1319;
    --theme-secondary-color: #157291;
    --maobadi-symbol-color: #D3241C;
    --yemale-symbol-color: #D7280F;
    --congress-symbol-color: #007D00;
    --rastriya-prajatantra-symbol-color: #F4CA15;
    --yekikrit-samajbadi-symbol-color: #184487;
    --loktantrik-samjabadi-symbol-color: #006400;
    --janata-samjabadi-symbol-color: #019228;
    --ratriya-janamorcha-symbol-color: #F70808;
    --bibekshil-sajha-symbol-color: #124573;
    --other-party-color: #555555;
    --dark-color: #333;
    --light-bg: #f4f4f4;
}

.multi-graph::before {
    content: '';
    width: 100%;
    height: 100%;
    border: 45px solid rgba(0, 0, 0, .15);
    border-bottom: none;
    position: absolute;
    box-sizing: border-box;
    transform-origin: 50% 0%;
    border-radius: 400px 400px 0 0;
    left: 0;
    top: 0;
}

.graph {
    width: 400px;
    height: 200px;
    border: 45px solid var(--fill);
    border-top: none;
    position: absolute;
    transform-origin: 50% 0% 0;
    border-radius: 0 0 400px 400px;
    left: 0;
    top: 100%;
    z-index: 5;
    animation: 1s fillGraphAnimation ease-in;
    transform: rotate(calc(1deg * (var(--percentage) * 1.8)));
    box-sizing: border-box;
    cursor: pointer;
}

@media(max-width:1450px) {
    a {
        font-size: 15px;
        font-weight: 500;
    }

    :root {
        --f-60px: 40px;
    }

    .graph {
        width: 260px;
        height: 130px;
        /* border: 35px solid var(--fill); */

    }

    .multi-graph {
        width: 260px;
        height: 130px;
    }

    .privince-map {
        height: 170px;
    }
}

@media(max-width:1100px) {
    :root {
        --f-60px: 35px;
        --f-40px: 21px;
    }

    .election-members-box {
        height: auto !important;
    }


    /* .graph, .multi-graph {
        width: 180px;
        height: 90px;
        font-size: 16px;
        border-width: 30px;

    }

    .multi-graph::before {
        border-width: 30px;
    } */
}

@media(max-width:992px) {
    .privince-map {
        height: 108px;
    }

    .live_badge_button .h3 {
        font-size: 20px;
    }
}

@media(max-width:768px) {
    .single-party-overall-result::-webkit-scrollbar, .custom-horizonatal-scroll::-webkit-scrollbar, .election-members-box::-webkit-scrollbar {
        display: none;
    }

    .single-party-overall-result, .custom-horizonatal-scroll, .election-members-box {
        overflow-y: hidden;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        display: flex;
        flex-direction: row;
    }

    .single-party-overall-result .col-2, .custom-horizonatal-scroll .col-3, .custom-horizonatal-scroll .col-9 {
        max-width: 100% !important;
        width: 100% !important;
        flex-wrap: nowrap;
        display: inline-block;
    }

    .single-party-overall-result a, .custom-horizonatal-scroll h4, .custom-horizonatal-scroll a {
        white-space: nowrap;
    }


}

@media(max-width:578px) {
    :root {
        --f-60px: 35px;
        --common-button-height: 50px;

    }

    .elected-person-image, .elected-person-image img {
        height: 200px;
    }

    .live_badge_button i {
        font-size: 12px;
    }

    /* .ward_number_listing {
        margin-left: 15px !important;
    }

    .ward_number_listing li {
        list-style-type: decimal !important;

    } */

    /* .ward-election-link {
        padding: 0 !important;
        background-color: transparent;
        color: var(--theme-secondary-color) !important;
        text-decoration: underline;
    }

    

    .ward-election-link:hover {
        background-color: transparent;
        color: var(--theme-color) !important;
    } */
    .ward-election-link::after {
        /* display: none; */
        /* top: 6%; */

    }
}

@media(max-width:400px) {
    :root {
        --f-60px: 30px;
    }

    h4, h5, h6, p, .total_seat_title {
        font-size: 18px;
    }

    .party_seat_number {
        font-size: 25px;
    }

    .total_seat_number {
        font-size: 30px;
    }
}

@media(max-width:370px) {
    .mayor_name_box {
        min-height: 59px;
        display: flex;
        align-items: center;
    }

    .mayor_name_box h6 {
        -webkit-line-clamp: 2;
    }
}

@media(max-width:300px) {
    .graph, .multi-graph {
        width: 190px;
        height: 95px;
    }

    .total_seat_number, .total_seat_title {
        display: none;
    }


}