/* ==================================================
   RESET
================================================== */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

body{
    min-height:100vh;

    background:#432c32;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* ==================================================
   PAGE
   Desktop dibuat lebar seperti contoh.
================================================== */

.page-wrap{
    width:calc(100% - 40px);

    margin:20px auto;

    background:#071522;

    border:1px solid #d7d7d7;
}


/* ==================================================
   TABLE
================================================== */

.table-responsive{
    width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;
}

.macau-table{
    width:100%;

    min-width:760px;

    margin:0;

    border-collapse:collapse;

    table-layout:fixed;

    text-align:center;

    --bs-table-bg:transparent;
    --bs-table-color:inherit;
}

.macau-table > :not(caption) > * > *{
    box-shadow:none;

    vertical-align:middle;
}

.macau-table .col-date{
    width:18%;
}


/* ==================================================
   LOGO
================================================== */

.logo-cell{
    padding:0 !important;

    background:
        linear-gradient(
            180deg,
            #0f1925 0%,
            #30495f 100%
        ) !important;

    border:1px solid #e0e0e0 !important;
}

.logo-image{
    display:block;

    width:100%;

    height:auto;
}

.logo-text{
    min-height:250px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:20px;

    color:#ff2117;

    font-size:clamp(58px,7vw,125px);

    font-weight:900;

    font-style:italic;

    line-height:1;

    white-space:nowrap;

    text-shadow:
        4px 4px 0 #ddd,
        8px 8px 0 rgba(0,0,0,.45);
}


/* ==================================================
   BANNER
================================================== */

.banner-cell{
    padding:0 !important;

    background:#000 !important;

    border:1px solid #e0e0e0 !important;
}

.banner-link{
    display:block;

    width:100%;

    margin:0;

    padding:0;

    text-decoration:none;

    line-height:0;
}

.banner-image{
    display:block;

    width:100%;

    height:auto;

    margin:0;

    padding:0;
}


/* ==================================================
   TITLE
================================================== */

.result-title{
    padding:10px 6px !important;

    background:#ca0808 !important;

    color:#fff !important;

    border:1px solid #fff !important;

    font-size:21px;

    font-weight:800;

    text-align:center;
}


/* ==================================================
   HEADER / JAM
================================================== */

.schedule-row th{
    padding:10px 5px !important;

    background:#d00909 !important;

    color:#fff !important;

    border:1px solid #e7e7e7 !important;

    font-size:20px;

    font-weight:800;

    white-space:nowrap;
}


/* ==================================================
   DATA
================================================== */

.macau-table tbody td{
    padding:9px 5px !important;

    background:
        linear-gradient(
            135deg,
            #07131e 0%,
            #1e354a 100%
        ) !important;

    color:#60ffd2 !important;

    border:1px solid #c8d0d5 !important;

    font-size:20px;

    font-weight:800;

    white-space:nowrap;

    text-shadow:
        0 0 6px rgba(80,255,210,.35);
}

.macau-table tbody tr:hover td{
    background:#183247 !important;
}

.macau-table .empty-row{
    height:70px;

    color:#fff !important;
}


/* ==================================================
   UPDATE
================================================== */

.updated{
    padding:10px 12px;

    background:#111;

    color:#bbb;

    text-align:center;

    font-size:12px;
}


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

@media(max-width:992px){

    .page-wrap{
        width:calc(100% - 20px);

        margin:10px auto;
    }

    .logo-text{
        min-height:180px;

        font-size:clamp(44px,8vw,80px);
    }

    .schedule-row th{
        font-size:18px;
    }

    .macau-table tbody td{
        font-size:18px;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media(max-width:600px){

    body{
        background:#432c32;
    }

    .page-wrap{
        width:100%;

        margin:0;

        border-left:1px solid #fff;
        border-right:1px solid #fff;
    }

    .macau-table{
        min-width:455px;
    }

    .macau-table .col-date{
        width:85px;
    }

    .logo-text{
        min-height:100px;

        padding:10px;

        font-size:34px;
    }

    .result-title{
        font-size:20px;
    }

    .schedule-row th{
        padding:9px 2px !important;

        font-size:17px;
    }

    .macau-table tbody td{
        padding:9px 3px !important;

        font-size:18px;
    }

}