.transp-widget {
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    margin: 20px 0;
}

    .transp-widget table {
        width: 100%;
        border-spacing: 12px;
        border-collapse: separate;
        margin: 0 auto;
        table-layout: fixed;
    }

    .transp-widget td {
        background-color: #FAF8F7;
        color: #2b2b2b;
        text-align: center;
        border-radius: 15px;
        font-size: 15px;
        cursor: pointer;
        vertical-align: middle;
        padding: 15px 10px;
        height: 110px;
        transition: all 0.2s ease;
        word-wrap: break-word;
        border: 1px solid #ddd;
    }

        .transp-widget td:hover {
            background-color: #bb2649;
            color: #ffff;
            transform: scale(1.02);
        }

    .transp-widget .titleCol {
        font-weight: 500;
    }

    .transp-widget .myContentsDiv {
        display: none;
        border: 1.5px solid #2e68aa;
        border-radius: 15px;
        background-color: #f7e3e3;
        margin: 25px auto 0 auto;
        padding: 20px 25px;
        font-size: 14px;
        width: 100%;
        max-width: 1005px;
        box-sizing: border-box;
    }

    .transp-widget .hyperLink {
        color: #045e7a;
        text-decoration: underline;
        cursor: pointer;
    }

    .transp-widget ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

        .transp-widget ul li::before {
            content: "\2022"; 
            color: #045e7a;
            padding-right: 8px;
        }

    .transp-widget p {
        margin: 5px 0;
    }

@media (max-width: 768px) {
    .transp-widget table,
    .transp-widget tbody,
    .transp-widget tr,
    .transp-widget td {
        display: block;
        width: 100% !important;
    }

    .transp-widget td {
        height: auto;
        margin-bottom: 10px;
    }

    .transp-widget .myContentsDiv {
        width: 100%;
        max-width: none;
    }
}