/* Add this to your existing CSS file */

.graph-column {
    width: 250px;
    position: absolute;
    top: 146px;
    left: 50px;
}

#Column-graph {
    height: 168px !important;
    margin-top: 20px;
}

#line-graph {
    height: 250px !important;
}

#pie-chart {
    height: 160px;
}


.highcharts-figure {
    width: 220px !important;
    background: #fff;
    box-shadow: 0px 9.17px 45.28px -2.29px #060C3B14;
    border-radius: 15px;
    padding-bottom: 20px !important;
}

/* Chart container styling */
.highcharts-figure {
    margin: 0;
    padding: 0;
}

#Column-graph {
    height: 300px;
    margin-top: 20px;
}

/* Custom Highcharts theme to match your design */
.highcharts-background {
    fill: transparent;
}

.highcharts-title {
    font-family: 'Arial', sans-serif !important;
    font-size: 16px !important;
    font-weight: bold !important;
    fill: #333 !important;
}

.highcharts-axis-title {
    font-family: 'Arial', sans-serif !important;
}

.highcharts-axis-labels {
    font-family: 'Arial', sans-serif !important;
    font-size: 12px !important;
}

.highcharts-data-label {
    font-family: 'Arial', sans-serif !important;
    font-weight: bold !important;
    font-size: 12px !important;
}

/* Custom colors for the columns */
.highcharts-color-0 {
    fill: #4A90E2;
    stroke: #4A90E2;
}

.highcharts-color-1 {
    fill: #50E3C2;
    stroke: #50E3C2;
}

.highcharts-color-2 {
    fill: #F5A623;
    stroke: #F5A623;
}

.highcharts-color-3 {
    fill: #BD10E0;
    stroke: #BD10E0;
}

.highcharts-color-4 {
    fill: #7ED321;
    stroke: #7ED321;
}

.highcharts-color-5 {
    fill: #D0021B;
    stroke: #D0021B;
}

.highcharts-color-6 {
    fill: #8B572A;
    stroke: #8B572A;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #Column-graph {
        height: 250px;
    }

    .highcharts-title {
        font-size: 14px !important;
    }

    .highcharts-data-label {
        font-size: 10px !important;
    }
}

/* Ensure the chart has no borders or extra elements */
.highcharts-container {
    border: none !important;
}

.highcharts-background {
    fill: transparent !important;
    stroke: none !important;
}

/* .highcharts-point {
    fill: inherit !important;
    stroke: inherit !important;
} */
.highcharts-color-0 {
    fill: #9374FF !important;
}

.highcharts-color-1 {
    fill: #FFDC60 !important;
}

.highcharts-color-2 {
    fill: #FF80AD !important;
}

.highcharts-color-3 {
    fill: #508AFF !important;
}

.highcharts-color-4 {
    fill: #FFDC60 !important;
}

.highcharts-color-5 {
    fill: #9374FF !important;
}

rect.highcharts-button-box {
    display: none !important;
}

path.highcharts-button-symbol {
    display: none !important;
}

.highcharts-credits {
    display: none;
}

/* line graph */
.garph-box-line {
    background: #9585F30D;
    padding: 20px;
    border-radius: 20px;
    width: 410px;
    position: absolute;
    top: 43%;
    left: 30%;
}

.line-graphs {
    width: 370px;
    background: #FFFFFF;
    box-shadow: 0px 8.16px 43px -2.6px #060C3B14;
    padding: 20px;
    border-radius: 20px;
    height: 250px;
}

/* pie-chart */
.Pie-chart {
    background: #FFFFFF;
    box-shadow: 0px 7.49px 37.9px -1.89px #060C3B14;
    width: 30%;
    border-radius: 14px;
    padding: 15px;
    position: absolute;
    right: 0;
    top: 35%;
}

/* progress-bar */
.progress-bar-view .progress {
    margin-bottom: 15px;
}

.daily.visitor {
    background: #fff;
    box-shadow: 0px 9.17px 45.28px -2.29px #060C3B14;
    position: absolute;
    padding: 10px;
    border-radius: 9px;
    top: -47px;
    right: 0px;
}

.daily.visitor h3 {
    font-weight: 800;
    font-size: 25px;
}

.daily.visitor h2 {
    font-size: 25px;
    font-weight: 700;
}

.avail-able-point {
    background: #fff;
    width: auto;
    box-shadow: 0px 8px 44px -2.3px #060C3B14;
    position: absolute;
    top: 50px;
    left: 36px;
    border-radius: 8px;
    text-align: left;
    display: flex;
    align-items: center;
    padding: 5px;
}

.right-side {
    right: 0;
    background: #fff;
    width: auto;
    box-shadow: 0px 8px 44px -2.3px #060C3B14;
    position: absolute;
    top: 40px;
    border-radius: 8px;
    text-align: left;
    display: flex;
    align-items: center;
    padding: 5px;
}

.avail-icon {
    margin-right: 10px;
}

.loyal-graph {
    width: 100%;
    height: 180px;
}

#whyLoyal2 .highcharts-series-0 .highcharts-point:nth-child(1) {
    fill: #4DA3FF !important;
}

#whyLoyal2 .highcharts-series-0 .highcharts-point:nth-child(2) {
    fill: #5BC17F !important;
}

#whyLoyal2 .highcharts-series-0 .highcharts-point:nth-child(3) {
    fill: #FF5F8F !important;
}

#whyLoyal2 .highcharts-series-0 .highcharts-point:nth-child(1) {
    fill: #4DA3FF !important;
}

#whyLoyal2 .highcharts-series-0 .highcharts-point:nth-child(2) {
    fill: #5BC17F !important;
}

#whyLoyal2 .highcharts-series-0 .highcharts-point:nth-child(3) {
    fill: #FF5F8F !important;
}

#whyLoyal2 .highcharts-series-0 .highcharts-point:nth-child(4) {
    fill: #ABDFBF !important;
}

#whyLoyal2 .highcharts-series-0 .highcharts-point:nth-child(5) {
    fill: #27A7FE !important;
}

#whyLoyal2 .highcharts-series-0 .highcharts-point:nth-child(6) {
    fill: #5BC17F80 !important;
}





#whyLoyal .highcharts-series-0 .highcharts-point:nth-child(1) {
    fill: #4DA3FF !important;
}

#whyLoyal .highcharts-series-0 .highcharts-point:nth-child(2) {
    fill: #5BC17F !important;
}

#whyLoyal .highcharts-series-0 .highcharts-point:nth-child(3) {
    fill: #FF5F8F !important;
}

#whyLoyal .highcharts-series-0 .highcharts-point:nth-child(1) {
    fill: #4DA3FF !important;
}

#whyLoyal .highcharts-series-0 .highcharts-point:nth-child(2) {
    fill: #5BC17F !important;
}

#whyLoyal .highcharts-series-0 .highcharts-point:nth-child(3) {
    fill: #FF5F8F !important;
}

#whyLoyal .highcharts-series-0 .highcharts-point:nth-child(4) {
    fill: #ABDFBF !important;
}

#whyLoyal .highcharts-series-0 .highcharts-point:nth-child(5) {
    fill: #27A7FE !important;
}

#whyLoyal .highcharts-series-0 .highcharts-point:nth-child(6) {
    fill: #5BC17F80 !important;
}

.highcharts-legend.highcharts-no-tooltip {
    display: none !important;
}

.highcharts-exit-anchor {
    display: none !important;
}


#aboutloyal .highcharts-series-0 .highcharts-point:nth-child(1) {
    fill: #4DA3FF !important;
}

#aboutloyal .highcharts-series-0 .highcharts-point:nth-child(2) {
    fill: #5BC17F !important;
}

#aboutloyal .highcharts-series-0 .highcharts-point:nth-child(3) {
    fill: #FF5F8F !important;
}

#aboutloyal .highcharts-series-0 .highcharts-point:nth-child(1) {
    fill: #4DA3FF !important;
}

#aboutloyal .highcharts-series-0 .highcharts-point:nth-child(2) {
    fill: #5BC17F !important;
}

#aboutloyal .highcharts-series-0 .highcharts-point:nth-child(3) {
    fill: #FF5F8F !important;
}

#aboutloyal .highcharts-series-0 .highcharts-point:nth-child(4) {
    fill: #ABDFBF !important;
}

#aboutloyal .highcharts-series-0 .highcharts-point:nth-child(5) {
    fill: #27A7FE !important;
}

#aboutloyal .highcharts-series-0 .highcharts-point:nth-child(6) {
    fill: #5BC17F80 !important;
}

.about-graph {
    position: absolute;
    background: #FFFFFFCC;
    border-radius: 14px;
    padding: 15px;
    bottom: -4px;
    right: 136px;
    width: 19%;
}

.about-loyal {
    width: 100%;
    height: 160px;
}