/*==================================================
Trade Value Card
==================================================*/
.mg-header{
    margin-bottom:20px;
}
.mg-badge{
    display:inline-block;
    /*background:#e8f8ec;*/
    color:#2e7d32;
    font-size:14px;
    font-weight:600;
    /*padding:4px 12px;*/
    border-radius:20px;
    margin-bottom:0px;
    align-self: flex-start;
    line-height: 1.2;
}
.grph-head-value {
    display: flex;
    gap: 15px;
}
.mg-variation-context {
    margin-top: 0px;
    margin-bottom: 18px;
    font-size: 13px;
    color: #6e6e6e;
    font-weight: 400;
    line-height: 1.2;
}
.mg-header-row {
    display: flex;
    justify-content: end;
    align-items: flex-start;
    gap: 50px;
    flex: 1;
}

.mg-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #666;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.2;
}
.mg-trade-card{
    background:#fff;
    border:1px solid #e8e8e8;
    border-radius:16px;
    padding:24px;
    margin:30px 0;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.mg-card-title{
    font-size:14px;
    color:#666;
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:.5px;
    font-weight:600;
}

.mg-current{
    margin-bottom:0px;
}

.mg-current-price{
    font-size:22px;
    font-weight:700;
    color:#111;
    line-height:1;
    margin:0 !important;
}

.mg-loss{
    font-size:22px;
    font-weight:700;
    color:#f16b24;
    line-height:1;
}
.mg-loss-period{
    margin-top:6px;
    font-size:14px;
    color:#777;
}


/*==================================================
Chart
==================================================*/
.mg-chart-wrapper{
    position:relative;
    width:100%;
    height:260px;
    margin:10px 0 0;
}

.mg-chart-svg{
    width:100%;
    height:260px;
    overflow:visible;
    display:block;
}
.mg-area{

    opacity:1;
    transform-box:fill-box;
    transform-origin: bottom;
    will-change:opacity, transform;

}
.gr-mg-line{

    fill:none;
    stroke:#F58220;
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.mg-dot{

    fill:#fff;

    stroke:#F58220;

    stroke-width:4;

    cursor:pointer;

    transform-box:fill-box;

    transform-origin:center;

    transform:scale(0);

    opacity:0;

    transition:
        transform .35s cubic-bezier(.34,1.56,.64,1),
        opacity .25s ease;

    will-change:transform, opacity;

}
.mg-dot.active{

    fill:#F58220;

    transform:scale(1.3);

    filter:drop-shadow(
        0 0 8px rgba(245,130,32,.45)
    );

}
.mg-price{

    font-size:16px;

    font-weight:700;

    fill:#222;

    user-select:none;

    pointer-events:none;

    paint-order:stroke;

    stroke:#fff;

    stroke-width:4;

    transition: opacity .35s ease, transform .35s ease;

    will-change: opacity, transform;

}

#mgGrid line{

    stroke:#ececec;
    stroke-width:1;

}

/*==================================================
Labels
==================================================*/
.mg-axis-label{
    fill:#666;
    font-size:14px;
    font-weight:500;
    text-anchor:middle;
    user-select:none;
    pointer-events:none;
}

.mg-trade-note {
    margin-top: 18px;
    padding: 16px 18px;
    background: #fbfbfb;
    border-left: 4px solid #f16b24;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}
.mg-trade-note p {
    margin-bottom: 0 !important;
}
.mg-trade-note strong {
    display: block;
    margin-bottom: 8px;
    color: #222;
    font-size: 15px;
}

.mg-trade-note p {
    margin: 0;
}
/*=====================================
Tooltip
=====================================*/


.mg-tooltip{
display:none !important;
    position:absolute;

    width:200px;
    max-width:200px;
    background:#222;

    color:#fff;

    padding:14px 16px;

    border-radius:12px;

    font-size:13px;

    pointer-events:none;

    opacity:0;
    
    left:0;

    top:0;

    transition:opacity .2s ease;

    z-index:20;

    box-shadow: 0 14px 34px rgba(0,0,0,.28);

}
.mg-tooltip.bottom:after{

    top:-8px;

    bottom:auto;

    border-width:0 8px 8px;

    border-color:
        transparent
        transparent
        #222;

}
.mg-tooltip-title{

    font-weight:700;

    margin-bottom:4px;

}

.mg-tooltip-price{

    font-size:18px;

    font-weight:700;

    color:#F58220;

}

.mg-tooltip-change{

    color:#ccc;

    margin-top:4px;

}
.mg-tooltip-message {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: #666;
}
/*==================================================
Mobile
==================================================*/

@media (min-width:250px) and (max-width:1000px) {

    .mg-trade-card{
        padding:18px;
        border-radius:12px;
        margin: 2px 0;
    }

    .mg-chart-wrapper{
        height:160px;
    }
    .mg-chart-svg {
     height: 160px;
     }
    .mg-current-price {
        font-size: 20px;
    }
    .mg-chart-labels{
        font-size:12px;
    }
    .mg-label{
        font-size:11px;
    }
    .mg-header-row{
        flex-direction:row;
        gap:15px;
        justify-content: space-between;
    }
.grph-head-value {
        flex-direction: column;
        gap: 5px;
    }
    .mg-loss{
        font-size:20px;
    }
.mg-axis-label {
    font-size: 16px;
}
    
}