.predict-line{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:14px;
}

.predict-left{
    width:120px;
    font-size:22px;
    font-weight:bold;
    text-align:left;
    line-height:1.1;
}

.predict-right{
    display:flex;
    gap:12px;
}

.predict-square{
    width:42px;
    height:42px;
    border:2px solid #666;
    box-sizing:border-box;
}

.green-box{
    background:#00ffae;
    border-color:#00ffae;
    box-shadow:
    0 0 10px #00ffae,
    0 0 18px #00ffae;
}

.red-box{
    background:#ff2a6d;
    border-color:#ff2a6d;
    box-shadow:
    0 0 10px #ff2a6d,
    0 0 18px #ff2a6d;
}

.up-text{
    color:#00ffae;
}

.down-text{
    color:#ff2a6d;
}

#leftPrediction,
#rightPrediction{
    margin-top:18px;
    font-size:28px;
    font-weight:bold;
    color:#ffffff;
    text-align:center;
}

#leftInfo,
#rightInfo{
    margin-top:18px;
    font-size:15px;
    line-height:1.55;
    color:#cccccc;
    text-align:center;
    white-space:pre-line;
}

.macro-main-title{
    font-size:72px;
    color:#00f7ff;
    text-align:center;
    font-weight:bold;
    margin-top:40px;
}

.macro-status-row{
    margin-top:30px;
    text-align:center;
}

.macro-dot{
    font-size:64px;
    vertical-align:middle;
}

.macro-status{
    font-size:64px;
    font-weight:bold;
    color:#ffee00;
    vertical-align:middle;
    margin-left:12px;
}

.macro-price{
    margin-top:16px;
    text-align:center;
    color:#ffffff;
    font-size:34px;
}

@media(max-width:900px){

    .predict-left{
        width:88px;
        font-size:14px;
    }

    .predict-square{
        width:26px;
        height:26px;
    }

    #leftPrediction,
    #rightPrediction{
        font-size:16px;
    }

    #leftInfo,
    #rightInfo{
        font-size:11px;
    }

    .macro-main-title{
        font-size:34px;
    }

    .macro-status{
        font-size:34px;
    }

    .macro-dot{
        font-size:34px;
    }

    .macro-price{
        font-size:18px;
    }

}