html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/* ============================= */
/* CARD */
/* ============================= */

.mobile-card {
    width: 100%;
    max-width: 1200px;
    margin: 10px auto;
    box-sizing: border-box;
}



/* ============================= */
/* IMAGE */
/* ============================= */

.image-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 15px;
}



.responsive-image {
    max-width: 100%;
    max-height: 45vh;
    object-fit: contain;
}



/* ============================= */
/* PICKER */
/* ============================= */

.picker-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}



/* ============================= */
/* GRID */
/* ============================= */


.grid-container {
    width: 100%;
    overflow: hidden;
}


.responsive-grid {
    width: 100%;
}



    .responsive-grid table {
        width: 100% !important;
        table-layout: fixed !important;
    }



    .responsive-grid th,
    .responsive-grid td {
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 6px;
    }



/* ============================= */
/* DESCRIPTION WITH BREAK LINE */
/* ============================= */


.description-cell {
    white-space: pre-line;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.1;
}



/* ============================= */
/* LAPTOP */
/* ============================= */


@media(min-width:768px) {


    .responsive-grid th,
    .responsive-grid td {
        font-size: 14px;
    }


    .description-cell {
        font-size: 14px;
    }
}



/* ============================= */
/* TABLET */
/* ============================= */


@media(max-width:767px) {


    .responsive-grid th,
    .responsive-grid td {
        padding: 4px;
        font-size: 12px;
    }
}



/* ============================= */
/* PHONE */
/* 320px - 600px */
/* ============================= */


@media(max-width:600px) {


    .mobile-card {
        margin: 5px 0;
        padding: 3px;
    }



    .responsive-grid table {
        width: 100% !important;
        table-layout: fixed !important;
    }



    .responsive-grid th,
    .responsive-grid td {
        padding: 2px !important;
        font-size: 11px !important;
    }



        /* Item */

        .responsive-grid th:nth-child(1),
        .responsive-grid td:nth-child(1) {
            width: 65px !important;
            max-width: 65px !important;
        }



        /* Description */

        .responsive-grid th:nth-child(2),
        .responsive-grid td:nth-child(2) {
            width: calc(100% - 110px) !important;
            max-width: calc(100% - 110px) !important;
        }



        /* Status */

        .responsive-grid th:nth-child(3),
        .responsive-grid td:nth-child(3) {
            width: 45px !important;
            max-width: 45px !important;
            text-align: center;
        }



    .description-cell {
        white-space: pre-line;
        overflow-wrap: break-word;
        word-break: break-word;
        line-height: 1.1;
        font-size: 11px;
    }



    .responsive-grid .rz-icon {
        font-size: 18px;
    }
}



/* ============================= */
/* SMALL PHONE */
/* BELOW 320px */
/* ============================= */


@media(max-width:320px) {


    .responsive-grid th,
    .responsive-grid td {
        font-size: 10px !important;
        padding: 1px !important;
    }



        .responsive-grid th:nth-child(1),
        .responsive-grid td:nth-child(1) {
            width: 55px !important;
        }



        .responsive-grid th:nth-child(3),
        .responsive-grid td:nth-child(3) {
            width: 35px !important;
        }



    .description-cell {
        font-size: 10px;
        line-height: 1;
    }
}