:root {
    --tileHeadColor: #fbd1a2;
    --tileTopColor: #7dcfb6;
    --tileMidColor: #00b2ca;
    --tileBotColor: #e0a5b1;
    --tileTextColor: #000000;
    --tileSelectedColor: #ff0000;
    --textSelectedColor: #ffffff;
    --tileUnSelectedColor: #b4b4b4;
    --textUnSelectedColor: #000000;
    --tileHoverColor: #657179;
    --textHoverColor: #ffffff;
}

.at_gameBodyCol {
    background-color: #f7f7f7;

    /* background-color: #fffb00 */
    /* outline: solid 5px rgb(46, 0, 250) */
    margin: 0 auto;
    height: 100%;
    width: 100%;
    padding: 0 20px;
}

@media (min-width: 576px) {
    .at_gameBodyCol {
        /* background-color: #f81111 */
        margin: 0 auto;
        height: 480px;
        width: 320px;
        padding: 10px;
    }
}

@media (min-width: 768px) {
    .at_gameBodyCol {
        /* background-color: #8900f8 */
        margin: 0 auto;
        height: 700px;
        width: 466px;

        /* padding: 20px 20px 40px */
    }
}

.at_container {
    /* background-color: #6a9924;
    outline: solid 1px black; */
    /* position: relative */
    padding: 0;
}

@media (min-width: 1200px) {
    .at_container {
        padding-top: 4%;
    }
}

a:hover {
    cursor: pointer;
}

.at_tileBtn {
    width: 100%;
    height: 100%;
    border-width: 0;
    border-radius: 0;
    font-size: 0.9em;
    font-weight: bold;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

.at_btn_mask {
    -webkit-mask-image: url('../imgs/img_tileBtn_head_white.png') !important;
    mask-image: url('../imgs/img_tileBtn_head_white.png') !important;
    mask-size: cover;
}

.at_btn_head_color {

    background-color: var(--tileHeadColor);
    color: var(--tileTextColor);
}

.at_btn_head_selected {
    background-color: var(--tileSelectedColor);
    color: var(--textSelectedColor);
}

.at_btn_head_unSelected {
    background-color: var(--tileUnSelectedColor);
    color: var(--textUnSelectedColor);
}

.at_btn_color_rowTop {
    background-color: var(--tileTopColor);
    background-size: contain;
    color: var(--tileTextColor);
}

.at_btn_color_rowMid {
    background-color: var(--tileMidColor);
    background-size: contain;
    color: var(--tileTextColor);
}

.at_btn_color_rowBottom {
    background-color: var(--tileBotColor);
    background-size: contain;
    color: var(--tileTextColor);
}

.at_btn_selected {
    background-color: var(--tileSelectedColor);
    background-size: contain;
    color: var(--textSelectedColor);
}

.at_btn_unSelected {
    background-color: var(--tileUnSelectedColor);
    background-size: contain;
    color: var(--textUnSelectedColor);
}

@media (hover: hover) 
{
    /* HOVERING - COLORED TILES */
    .at_btn_head_color:hover {
        cursor: pointer;
        color: var(--textHoverColor);
    }

    .at_btn_color_rowTop:hover {
        cursor: pointer;
        color: var(--textHoverColor);
    }

    .at_btn_color_rowMid:hover {
        cursor: pointer;
        color: var(--textHoverColor);
    }

    .at_btn_color_rowBottom:hover {
        cursor: pointer;
        color: var(--textHoverColor);
    }

    /* HOVERING - SELECTED TILES */
    .at_btn_head_selected:hover {
        color: var(--textHoverColor);
    }

    .at_btn_selected:hover {
        color: var(--textHoverColor);
    }

    /* HOVERING - UNSELECTED TILES */
    .at_btn_head_unSelected:hover {
        color: var(--textHoverColor);
        background-color: var(--tileHoverColor);
        background-size: cover;
    }

    .at_btn_unSelected:hover {
        color: var(--textHoverColor);
        background-color: var(--tileHoverColor);
        background-size: contain;
    }
}

@media (min-width: 576px) {
}

@media (min-width: 768px) {
}

.at_answerDescText {
    font-size: 4vmax;
    margin-top: 0;
    margin-bottom: 0;
    height: 87%;
    text-align: left;
}

@media (min-width: 576px) {
    .at_answerDescText {
        font-size: 16pt;
        height: 82%;
    }
}

@media (min-width: 768px) {
    .at_answerDescText {
        font-size: 18.5pt;
        height: 88%;
    }
}

.at_headingDescText {
    font-size: 2.5vmax;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
}

@media (min-width: 576px) {
    .at_headingDescText {
        font-size: 0.9em;
        padding-left: 30px;
    }
}

@media (min-width: 768px) {
    .at_headingDescText {
        font-size: 1.3em;
    }
}

.at_titleDescText {
    font-size: 2vmax;
    text-align: left;
}

@media (min-width: 576px) {
    .at_titleDescText {
        font-size: 0.7em;
    }
}

@media (min-width: 768px) {
    .at_titleDescText {
        font-size: 1em;
    }
}

.at_kbilleDescText {
    font-size: 9pt;
}

@media (min-width: 576px) {
    .at_kbilleDescText {
        font-size: 9pt;
    }
}

@media (min-width: 768px) {
    .at_kbilleDescText {
        font-size: 14pt;
    }
}

.at_tilesetHTP {
    margin-top: 20px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .at_tilesetHTP {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

.at_row_shareBtns {
    margin-top: 10px;
}

@media (min-width: 768px) {
    .at_row_shareBtns {
        margin-top: 40px;
        margin-bottom: 10px;
    }
}

.at_chkboxQuestions {
    font-size: 8vw;
}

@media (min-width: 576px) {
    .at_chkboxQuestions {
        font-size: 4vw;
    }
}

@media (min-width: 768px) {
    .at_chkboxQuestions {
        font-size: 20pt;
    }
}

.at_chkboxChkBox {
    font-size: 8vw;
}

@media (min-width: 576px) {
    .at_chkboxChkBox {
        font-size: 4vw;
    }
}

@media (min-width: 768px) {
    .at_chkboxChkBox {
        font-size: 30pt;
    }
}

.at_checkBoxLabels {
    font-size: 0.85em;
}

@media (min-width: 576px) {
    .at_checkBoxLabels {
        font-size: 0.75em;
    }
}

@media (min-width: 768px) {
    .at_checkBoxLabels {
        font-size: 1.05em;
    }
}

.at_archiveRow {
    height: 80%;
    overflow: auto;
    margin-left: 10px;
    width: 95%;
    display: block;
}

@media (min-width: 768px) {
}

.at_kbille_desc {
    font-size: 2.1vmax;
}

@media (min-width: 576px) {
    .at_kbille_desc {
        font-size: 9pt;
    }
}

@media (min-width: 768px) {
    .at_kbille_desc {
        font-size: 12.6pt;
        font-weight: normal;
    }
}

.at_row_medium {
    height: 40%;
}

@media (min-width: 768px) {
    .at_row_medium {
        height: 40%;
    }
}

.at_row_bottom {
    height: 40%;
}

@media (min-width: 768px) {
    .at_row_bottom {
        height: 40%;
    }
}

.at_row_big {
    height: 83%;
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 20px;
}

.at_comeTomorrowLabel {
    font-size: 0.7em;
    text-align: center;
    margin-bottom: 0px;
}

.at_tileSet_forPlay {
    height: 68%;
    padding-bottom: 20px;
}

@media (min-width: 576px) {
}

.at_options_bkgColor_lightGreen {
    background-color: #aff8cc;
}

.at_options_bkgColor_orange {
    background-color: #f3b35f;
}

.at_options_bkgColor_turquoise {
    background-color: #49b5c1;
}

.at_options_bkgColor_beige {
    background-color: #e6ddb8;
}

.at_row_tileSet_head {
    height: 20%;
    padding-top: 1px;
}

.at_row_tileSet {
    height: 12%;
    padding-top: 1px;
}

.at_row_tileSet_foot {
    height: 20%;
    padding-top: 1px;
}

.at_col_tileSet {
    height: 100%;
    padding-left: 1px;
    padding-right: 1px;
}

.at_top_label {
    font-weight: bold;
    font-size: 0.7em;
}

.at_scaleText {
    font-size: 100%;
}

.at_titleText {
    font-size: 20pt;
    color: #0b0b0b;
    font-weight: bold;
}

.at_titleText_red {
    font-size: 25pt;
    font-weight: bold;
    color: #ff0000;
}

.at_kb_playLives {
    width: 20%;
    margin-top: auto;
    content: url('../imgs/img_live.png') !important;
}

.at_kb_logo_small {
    height: 2vh;
    content: url('../imgs/kb_logo.png') !important;
}

.at_kb_logo_big {
    content: url('../imgs/kb_logo_big.png') !important;
    height: 13vh;
}

@media (min-width: 576px) {
    .at_kb_logo_big {
        height: 13vh;
    }
}

@media (min-width: 768px) {
    .at_kb_logo_big {
        height: 20vh;
    }
}

.at_kb_pauseImg {
    content: url('../imgs/pause.png') !important;
    width: 8%;
}