/* ==========================================================
   MAHAL JEWELS GOLD RATE CHART
========================================================== */

.mj-gold-chart{
    width:100%;
    margin:70px auto;
}

/* ==========================================================
   Header
========================================================== */

.mj-chart-header{
    margin-bottom:40px;
}

.mj-chart-title{
    margin:0;
    font-family:'PT Serif',serif;
    font-size:42px;
    font-weight:600;
    color:#800004;
    line-height:1.2;
}

.mj-chart-description{
    margin:14px 0 0;
    max-width:720px;
    font-family:'Lora',serif;
    font-size:18px;
    line-height:1.8;
    color:#4A3F35;
}

/* ==========================================================
   Legend
========================================================== */

.mj-chart-legend{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:35px;
}

.mj-gold-chart .mj-legend-btn{

    appearance:none;
    -webkit-appearance:none;

    display:flex;
    align-items:center;
    gap:10px;

    padding:14px 24px;

    background:#ffffff;

    border:1px solid #DDCFC6;

    border-radius:999px;

    cursor:pointer;

    transition:all .30s ease;

    font-family:'Lora',serif;

    font-size:17px;

    color:#4A3F35 !important;

    text-decoration:none;

    outline:none;

    box-shadow:none;

}

.mj-gold-chart .mj-legend-btn:hover{

    background:#FBF5F2;

    border-color:#800004;

    color:#800004 !important;

}

.mj-gold-chart .mj-legend-btn.active{

    background:#F9ECE7;

    border-color:#800004;

    color:#800004 !important;

}

.mj-gold-chart .mj-legend-btn:focus,
.mj-gold-chart .mj-legend-btn:focus-visible,
.mj-gold-chart .mj-legend-btn:active,
.mj-gold-chart .mj-legend-btn:visited{

    color:#800004 !important;

    outline:none;

    box-shadow:none;

}

.mj-dot{
    width:14px;
    height:14px;
    border-radius:50%;
    display:inline-block;
    flex-shrink:0;
}

.mj-dot-24{
    background:#D6674C;
}

.mj-dot-22{
    background:#4B972D;
}

.mj-dot-18{
    background:#D8D320;
}

/* ==========================================================
   Chart
========================================================== */

.mj-chart-wrapper{
    position:relative;
    width:100%;
    margin-bottom:45px;
}

/* ==========================================================
   Time Filters
========================================================== */

.mj-chart-periods{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.mj-gold-chart .mj-chart-filter{

    appearance:none;
    -webkit-appearance:none;

    padding:14px 28px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #DDCFC6;

    cursor:pointer;

    transition:all .30s ease;

    font-family:'Lora',serif;

    font-size:17px;

    color:#4A3F35 !important;

    text-decoration:none;

    outline:none;

    box-shadow:none;

}

.mj-gold-chart .mj-chart-filter:hover{

    background:#FBF5F2;

    border-color:#800004;

    color:#800004 !important;

}

.mj-gold-chart .mj-chart-filter.active{

    background:#F9ECE7;

    border-color:#800004;

    color:#800004 !important;

}

.mj-gold-chart .mj-chart-filter:focus,
.mj-gold-chart .mj-chart-filter:focus-visible,
.mj-gold-chart .mj-chart-filter:active,
.mj-gold-chart .mj-chart-filter:visited{

    color:#800004 !important;

    outline:none;

    box-shadow:none;

}

/* ==========================================================
   Remove Browser Styles
========================================================== */

.mj-gold-chart button{

    appearance:none;
    -webkit-appearance:none;

    outline:none;

    -webkit-tap-highlight-color:transparent;

}

.mj-gold-chart button::-moz-focus-inner{

    border:0;

}

/* ==========================================================
   Chart Canvas
========================================================== */

.mj-rate-chart{
    width:100%!important;
    height:100%!important;
}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:1024px){

    .mj-chart-title{
        font-size:36px;
    }

    .mj-chart-description{
        font-size:17px;
    }

}

@media(max-width:767px){

    .mj-gold-chart{
        margin:50px auto;
    }

    .mj-chart-title{
        font-size:28px;
        text-align:center;
    }

    .mj-chart-description{
        font-size:16px;
        text-align:center;
        margin-left:auto;
        margin-right:auto;
    }

    .mj-chart-legend{
        justify-content:center;
    }

    .mj-chart-periods{
        justify-content:center;
    }

    .mj-gold-chart .mj-legend-btn{
        padding:12px 18px;
        font-size:15px;
    }

    .mj-gold-chart .mj-chart-filter{
        padding:12px 20px;
        font-size:15px;
    }

}