/* Applied only when the selected page has its game catalog enabled. */
@font-face {
    font-family: "TTPP Native Thai";
    src: url("fonts/NotoSansThai.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0E00-0E7F;
}
#top.ttpp-catalog-layout {
    font-family: "Ubuntu", "TTPP Native Thai", sans-serif;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "marquee"
        "header"
        "devider"
        "contentdata"
        "togel-desktop"
        "widget-kupon"
        "game-catalog"
        "widget-sbo"
        "provider"
        "transaksi"
        "guidelines"
        "bantuan"
        "footer";
}
#top.ttpp-catalog-layout > #ttpp-game-hub > .ttgc-shell {
    max-width: 100%;
}
#top.ttpp-catalog-layout > #ttpp-game-hub {
    grid-area: game-catalog;
    min-width: 0;
    background: var(--primary-background, #000);
}
#top.ttpp-catalog-layout .ttpp-lottery-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0 10px;
    border-bottom: 1px solid #303030;
    color: #fff;
}
#top.ttpp-catalog-layout .ttpp-lottery-heading h2 {
    margin: 0;
    padding: 0 0 0 10px;
    border-left: 3px solid var(--primary-color, #00afff);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
}
#top.ttpp-catalog-layout .ttpp-lottery-heading > span {
    font-size: 12px;
    color: #b8b8b8;
}
/* Keep the native side controls in their own gutters on smaller desktops. */
@media (min-width: 1001px) and (max-width: 1175px) {
    #top.ttpp-catalog-layout {
        --ttpp-desktop-content-width: calc(100vw - 176px);
    }
    #top.ttpp-catalog-layout > #ttpp-game-hub > .ttgc-shell,
    #top.ttpp-catalog-layout > .togel-desktop > .togel-content,
    #top.ttpp-catalog-layout > .togel-desktop > .ttpp-lottery-heading,
    #top.ttpp-catalog-layout > .widget-kupon > *,
    #top.ttpp-catalog-layout > .transaksi > *,
    #top.ttpp-catalog-layout > .bantuan > *,
    #top.ttpp-catalog-layout > .guidelines > *,
    #top.ttpp-catalog-layout > .footer > * {
        width: var(--ttpp-desktop-content-width);
        max-width: var(--ttpp-desktop-content-width);
    }
    #top.ttpp-catalog-layout > .transaksi img {
        max-width: 100%;
    }
}
@media (max-width: 1000px) {
    #top.ttpp-catalog-layout {
        grid-template-areas:
            "appbar"
            "marquee"
            "header"
            "contentdata"
            "togel-mobile"
            "widget-kupon"
            "game-catalog"
            "widget-sbo"
            "devider"
            "provider"
            "transaksi"
            "bantuan"
            "footer"
            "guidelines";
    }
    #top.ttpp-catalog-layout > .togel-mobile {
        min-width: 0;
        padding: 20px 20px 12px;
    }
    #top.ttpp-catalog-layout .togel-mobile > .togel-title {
        width: 100%;
        margin: 0 0 14px;
        padding: 0 0 10px;
        border-bottom: 1px solid #303030;
        color: #fff;
        font-size: 20px;
        line-height: 1.5;
    }
}