.cma-unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}

@font-face {
    font-family: "tk-default-font";
    /* webpackIgnore: true */
    src: url("./cdn/fonts/tk-default-font.woff") format("woff");
}

@font-face {
    font-family: "tk-ja-font";
    /* webpackIgnore: true */
    src: url("./cdn/fonts/tk-ja-font.woff") format("woff");
}

@font-face {
    font-family: "tk-ko-font";
    /* webpackIgnore: true */
    src: url("./cdn/fonts/tk-ko-font.woff") format("woff");
}

@font-face {
    font-family: "tk-el-font";
    /* webpackIgnore: true */
    src: url("./cdn/fonts/tk-el-font.woff") format("woff");
}

@font-face {
    font-family: "tk-zh-font";
    /* webpackIgnore: true */
    src: url("./cdn/fonts/tk-zh-font.woff") format("woff");
}

@font-face {
    font-family: "tk-zht-font";
    /* webpackIgnore: true */
    src: url("./cdn/fonts/tk-zht-font.woff") format("woff");
}

@font-face {
    font-family: "tk-vn-font";
    /* webpackIgnore: true */
    src: url("./cdn/fonts/tk-vn-font.woff") format("woff");
}

@font-face {
    font-family: "tk-th-font";
    /* webpackIgnore: true */
    src: url("./cdn/fonts/tk-th-font.woff") format("woff");
}

:root {
    --tk_font_family_list: tk-default-font, Verdana, Arial
}

* {
    font-family: var(--tk_font_family_list);
}

.growing-item {
    max-width: 100%;
    max-height: 100%;
}

#bottom {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* small phones */
@media only screen and (min-width: 300px) and (max-width: 667px) {
    .cma-grid-container {
        display: grid;
        max-width:100%;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .cma-container {
        height: min(14px, 2.4vh);
        display: flex;
        justify-content: flex-start;
        margin-left: 2vw;
        flex-grow: 1;
    }

    .cma-centered {
        margin:auto;
    }

    .cma-real {
        white-space: nowrap;
        color: #919191;
        background-color: black;
        font-size: min(12px, 2vh);
        padding:0px 10px 0px 0px;
    }

    .cma-bonus {
        white-space: nowrap;
        color: #919191;
        background-color: black;
        font-size: min(12px, 2vh);
        padding:0px 10px 0px 0px;
    }

    .cma-pending-on {
        display: table-cell;
        width: min(14px, 2.4vh);
        height: min(14px, 2.4vh);
        background-repeat: no-repeat;
        background-size: cover;
        /* webpackIgnore: true */
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAALVBMVEX/////qAD/qAD/qAD/qAD/qAD/qAD/qAD/qAD/qAD/qAD/qAD/qAD/qAD/qABoc4mUAAAADnRSTlMAESIzRFVmd4iZu8zd7hkznE4AAAA3SURBVHgB1cHBAYQgDADBvRwhirD9l+sLe2CGk/zrB5WQxWd60zVCO5sOSlvTYrtWEmvAM4ODvA6BAU+IvdYrAAAAAElFTkSuQmCC);
    }

    .cma-pending-off {
        display: table-cell;
        width: min(14px, 2.4vh);
        height: min(14px, 2.4vh);
        background-repeat: no-repeat;
        background-size: cover;
        /* webpackIgnore: true */
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAANlBMVEX///85tUo5tUo5tUo5tUo5tUo5tUo5tUo5tUo5tUo6t0tW3F5W3V5X319Y319r+mxr+m1v/297mrNAAAAACXRSTlMATE1OhL7y8/SXEj+YAAAAT0lEQVR42r3OQQ6AIAxEUagMMKgU739Z0VUbXfOXL2mmYXWCUhC9Jb4la5Gtq/ZGMQie12wnDGbqg8r8h+V7frhzmUNjmCH/kmtDrZCwuBvSNgNybosEEQAAAABJRU5ErkJggg==);
    }

    .deib-container {
        height: 20vh;
        height: max(62px, min(5vw, 3vh));
        /*max-width: 100%;*/
        display:flex;
        flex-direction: column;
		justify-content: center;
		align-items: center;
        /*display: table;*/
    }

    .deib-centered {
        margin:auto;
    }

    .deib-title {
        white-space: nowrap;
        color: #919191;
        background-color: black;
        padding:0px 4px 0px 0px;
    }

    .deib-value {
        white-space: nowrap;
        color: #919191;
        background-color: black;
        padding:0px 14px 0px 0px;
    }

    .sd-container {
        color: #919191;
        background-color: black;
        display: flex;
        justify-content: flex-end;
        margin-right: 2vw;
        flex-grow: 1;
        flex-direction: row;
        white-space: pre;
        height: min(14px, 2.4vh);
    }

    .sd-container div {
        font-size: min(12px, 2vh);
        white-space: pre;
        padding-right: 3px;
        height: 100%;
    }
}

/* big phones */
@media only screen and (min-width: 668px) {

    .cma-grid-container {
        display: grid;
        max-width:100%;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .cma-container {
        height: min(16px, 2.4vh);
        display: flex;
        flex-grow: 1;
        margin-left: 2vw;
    }

    .cma-centered {
        margin:auto;
    }

    .cma-real {
        white-space: nowrap;
        color: #919191;
        background-color: black;
        font-size: min(14px, 2vh);
        padding:0px 10px 0px 0px;
    }

    .cma-bonus {
        white-space: nowrap;
        color: #919191;
        background-color: black;
        font-size: min(14px, 2vh);
        padding:0px 10px 0px 0px;
    }

    .cma-pending-on {
        display: table-cell;
        width: min(14px, 2.4vh);
        height: min(14px, 2.4vh);
        background-repeat: no-repeat;
        background-size: cover;
        /* webpackIgnore: true */
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAALVBMVEX/////qAD/qAD/qAD/qAD/qAD/qAD/qAD/qAD/qAD/qAD/qAD/qAD/qAD/qABoc4mUAAAADnRSTlMAESIzRFVmd4iZu8zd7hkznE4AAAA3SURBVHgB1cHBAYQgDADBvRwhirD9l+sLe2CGk/zrB5WQxWd60zVCO5sOSlvTYrtWEmvAM4ODvA6BAU+IvdYrAAAAAElFTkSuQmCC);
    }

    .cma-pending-off {
        display: table-cell;
        width: min(14px, 2.4vh);
        height: min(14px, 2.4vh);
        background-repeat: no-repeat;
        background-size: cover;
        /* webpackIgnore: true */
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAANlBMVEX///85tUo5tUo5tUo5tUo5tUo5tUo5tUo5tUo5tUo6t0tW3F5W3V5X319Y319r+mxr+m1v/297mrNAAAAACXRSTlMATE1OhL7y8/SXEj+YAAAAT0lEQVR42r3OQQ6AIAxEUagMMKgU739Z0VUbXfOXL2mmYXWCUhC9Jb4la5Gtq/ZGMQie12wnDGbqg8r8h+V7frhzmUNjmCH/kmtDrZCwuBvSNgNybosEEQAAAABJRU5ErkJggg==);
    }

    .deib-container {
        height: 20vh;
        height: max(42px, min(5vw, 3vh));
        display: flex;
        flex-direction: row;
		justify-content: center;
		align-items: center;
        /*max-width: 100%;*/
        /*display: table;*/
    }

    .deib-centered {
        margin:auto;
    }

    .deib-title {
        white-space: nowrap;
        color: #919191;
        background-color: black;
        padding:0px 4px 0px 0px;
    }

    .deib-value {
        white-space: nowrap;
        color: #919191;
        background-color: black;
        padding:0px 14px 0px 0px;
    }

    .sd-container {
        color: #919191;
        background-color: black;
        display: flex;
        flex-grow: 1;
        flex-direction: row;
        justify-content: flex-end;
        white-space: pre;
        height: min(16px, 2.4vh);
        margin-right: 2vw;
    }

    .sd-container div {
        font-size: min(14px, 2vh);
        white-space: pre;
        padding-right: 3px;
        height: 100%;
    }
}

@media (orientation: landscape) {
    .deib-container {
        flex-direction: row;
        height: max(22px, 3vh);
        font-size: max(15px, 2.4vh);
    }
}

@media (orientation: portrait) {
    .deib-container {
        flex-direction: column;
        height: max(42px, 9vh);
        font-size: max(14px, 2.0vh);
    }
}

/* desktop */