<style>
    .text_percentage{
        font-size: 1.5rem;
        color: #192d4b;
        font-weight: bold;
    }
    .circle-percentage {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: #fbe9e7;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: #e57353;
        font-weight: bold;
        margin: auto;
    }
    .legend {
        display: flex;
        gap: 1.5rem;

        align-items: center;
    }
    .legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 6px;
    }
    .dot-incomplete {
        background: #e57353;
    }
    .dot-complete {
        background: #00bfae;
    }
    .pred-card-title {
        font-size: 1.6rem;
        font-weight: bold;
        color: #192d4b;
        margin-bottom: 5px;
        letter-spacing: -0.5px;
    }
    .pred-row {
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        margin-bottom: 18px;
    }
    .pred-label {
        color: #545454;
        font-size: 2rem;
        margin-right: 25px;
        font-weight: 400;

    }
    .pred-time {
        font-size: 3rem;
        font-weight: bold;
        color: #192d4b;
        margin-right: 40px;
        min-width: 120px;
        letter-spacing: 1px;
    }
    .pred-unit {
        color: #444;
        font-size: 2rem;
        font-weight: 400;
        /* margin-left: 10px; */
    }
    .pred-time-2 {
        font-size: 3rem;
        font-weight: bold;
        color: #F06548;
        /* margin-right: 18px; */
        /* min-width: 170px; */
        letter-spacing: 1px;
    }
    .pred-note {
        color: #F06548;
        font-size: 1.5rem;
        font-weight: 400;
        /* align-self: flex-end; */
    }
    .pred-card {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(25,45,75,0.04);
        border: 1px solid #e0e0e0;
        background-color: #FFFFFF;
        padding: 20px 10px 15px 10px;
    }

</style>

<div class="pred-card h-charts">
    <div class="pred-card-title">
        Predication &amp; Average Time
    </div>
    <div style="border-bottom: 1px solid #E9EBEC;"></div>
    <div class="pred-row" style="padding-left: 15px; padding-top: 35px;">
        <div class="pred-label">Time</div>
        <div class="pred-time " style="margin-right: 10px;">{{$average_timeuse}}</div>
        <div class="pred-unit " style="margin-left: 80px;">min/case</div>
    </div>
    <div class="pred-row" style="padding-left: 15px;">
        <div class="pred-label">Time</div>
        <div class="pred-time-2 me-3">{{@$today_timefinish}}</div>
        <div class="pred-note ms-2" style="padding-top: 10px;">*เวลาที่คาดว่าจะเสร็จ</div>
    </div>
</div>
