.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: cma_font_default;
    src: url('./cdn/fonts/cma/verlagcombined-webfont.woff') format('woff');
}

@font-face {
    font-family: cma_font_zhs;
    src: url('./cdn/fonts/cma/zh/zh.woff') format('woff');
}

@font-face {
    font-family: cma_font_zht;
    src: url('./cdn/fonts/cma/zht/zht.woff') format('woff');
}

@font-face {
    font-family: cma_font_ko;
    src: url('./cdn/fonts/cma/ko/ko.woff') format('woff');
}

@font-face {
    font-family: cma_font_ja;
    src: url('./cdn/fonts/cma/ja/ja.woff') format('woff');
}

.cma-font {
    font-family: cma_font_default;
}

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

    .cma-container {
        height:16px;
        font-family: cma_font_default;
        /*display: table;*/
    }

    .cma-centered {
        margin:auto;
    }

    .cma-real {
        display: table-cell;
        white-space: nowrap;
        color: #919191;
        background-color: black;
        font-size: 12px;
        padding:0px 10px 0px 0px;
    }

    .cma-bonus {
        display: table-cell;
        white-space: nowrap;
        color: #919191;
        background-color: black;
        font-size: 12px;
        padding:0px 10px 0px 0px;
    }

    .cma-pending-on {
        display: table-cell;
        width:16px;
        height:16px;
        background-repeat: no-repeat;
        background-size: cover;
        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:16px;
        height:16px;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAANlBMVEX///85tUo5tUo5tUo5tUo5tUo5tUo5tUo5tUo5tUo6t0tW3F5W3V5X319Y319r+mxr+m1v/297mrNAAAAACXRSTlMATE1OhL7y8/SXEj+YAAAAT0lEQVR42r3OQQ6AIAxEUagMMKgU739Z0VUbXfOXL2mmYXWCUhC9Jb4la5Gtq/ZGMQie12wnDGbqg8r8h+V7frhzmUNjmCH/kmtDrZCwuBvSNgNybosEEQAAAABJRU5ErkJggg==);
    }
}

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

    .cma-grid-container {
        display: grid;
        width:600px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .cma-container {
        height:16px;
        font-family: cma_font_default;
        /*display: table;*/
    }

    .cma-centered {
        margin:auto;
    }

    .cma-real {
        display: table-cell;
        white-space: nowrap;
        color: #919191;
        background-color: black;
        font-size: 14px;
        padding:0px 10px 0px 0px;
    }

    .cma-bonus {
        display: table-cell;
        white-space: nowrap;
        color: #919191;
        background-color: black;
        font-size: 14px;
        padding:0px 10px 0px 0px;
    }

    .cma-pending-on {
        display: table-cell;
        width:16px;
        height:16px;
        background-repeat: no-repeat;
        background-size: cover;
        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:16px;
        height:16px;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAANlBMVEX///85tUo5tUo5tUo5tUo5tUo5tUo5tUo5tUo5tUo6t0tW3F5W3V5X319Y319r+mxr+m1v/297mrNAAAAACXRSTlMATE1OhL7y8/SXEj+YAAAAT0lEQVR42r3OQQ6AIAxEUagMMKgU739Z0VUbXfOXL2mmYXWCUhC9Jb4la5Gtq/ZGMQie12wnDGbqg8r8h+V7frhzmUNjmCH/kmtDrZCwuBvSNgNybosEEQAAAABJRU5ErkJggg==);
    }
}

/* desktop */