/* ==========================================
   BLOOD TABLE
   ?????????? ????? ? ?????
========================================== */

.blood-table-wrapper{
    width:100%;
    margin:30px auto;
}


.blood-table-title{

    text-align:center;
    font-size:20px;
    font-weight:bold;
    margin-bottom:20px;

}


.blood-table{

    width:100%;
    border-collapse:collapse;
    background:#fff;

}


.blood-table th,
.blood-table td{

    border:1px solid #d5d5d5;
    padding:10px;
    text-align:center;
    vertical-align:middle;

}


.blood-table th{

    background:#f3f3f3;

}


.blood-table td:first-child,
.blood-table th:first-child{

    text-align:left;

}


/* ===============================
   ????????? ??????
================================ */


@media(max-width:768px){


.blood-table thead{

    display:none;

}


.blood-table,
.blood-table tbody,
.blood-table tr,
.blood-table td{

    display:block;
    width:100%;

}



.blood-table tr{

    margin-bottom:20px;

    border:1px solid #ddd;

    border-radius:10px;

    overflow:hidden;

}


.blood-table td{

    display:flex;

    justify-content:space-between;

    gap:15px;

    padding:10px;

    text-align:right;

    border:none;

    border-bottom:1px solid #eee;

}



.blood-table td:last-child{

    border-bottom:none;

}



.blood-table td::before{

    content:attr(data-label);

    font-weight:bold;

    color:#666;

    text-align:left;

}



}