html,body{
    margin: 0;
    padding: 0;
    background: #feffb8;
    height:100%;
}
.khp-wrapper{
    max-width: 95vh;
    user-select: none;
    max-height: 100vh;
}
.khp-bingo-mobile-preview{
    height: 20vh; 
    background: #feffb9;
    display: flex;
    justify-content: space-evenly;
}
.khp-bingo-mini-card{
    width:20vh;
}

.khp-bingo-mini-card div{
    background: white;
    outline: 1px black solid;
}.khp-bingo-mini-card[data-khp-mini-card-size="5"] div{
    width:20%;
    padding:0 0 20% 0;
}
.khp-bingo-mini-card div[data-khp-bingo-square-checked='true']{
    background:#30ff00 ;
}


.khp-bingo-card,
.khp-bingo-mobile-preview .khp-bingo-mini-card{
    display: flex;
    flex-wrap: wrap;
}
.khp-bingo-card{
    margin:auto;
}
.khp-bingo-card{
    overflow: auto;
    height: 80vh;
}
.khp-bingo-card .khp-bingo-square{
    position: relative;
    background: #3d1e8e;
    
    outline: black;
    height:0;

    cursor: pointer;
    user-select: none;
}

.khp-bingo-card .khp-bingo-square{
    width:99%;
    padding: 0 0 85px 0;
    margin: 1px auto;
}

.khp-bingo-card .khp-bingo-square:nth-child(odd){
    background:#f22f7f;
}


.khp-bingo-card .khp-bingo-square[data-khp-bingo-square-checked='true']{
    background: #30ff00 !important;
}
.khp-bingo-card .khp-bingo-square[data-khp-bingo-square-checked='true'] p{
    color: #f22f7f !important;
}





.khp-bingo-card .khp-bingo-square div{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-around;

    outline:#feffb8 1px solid;
    overflow: auto;

    
}
.khp-bingo-card .khp-bingo-square div p{
    margin:0;
    padding:0;
    width:85%;
    max-height: 100%;
    
    color:white;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.25em;
}
.khp-bingo-card .khp-bingo-square:nth-child(odd) div p{
    color:black;
}
.khp-bingo,
.khp-bingo-card .khp-bingo-square,
.khp-bingo-card .khp-bingo-square p{
    transition: 500ms !important;
}


.khp-extralife-wrapper-mobile{
    width: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.khp-extralife-link-mobile{
    display: block;
    text-align: center;
    font-family: furore-webfont,sans-serif;
    background-color: #7fd836;
    background-image: linear-gradient(#7ae522,#47b200);
    background-size: 200% auto;
    color: white;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
}


.khp-extralife-wrapper-desktop {
    display: none;
}

@media only screen and (min-width: 750px) {
    .khp-extralife-wrapper-desktop {
        height: 10vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .khp-bingo-mobile-preview{
        display:none;
    }
    .khp-bingo-card{
        height: auto;
        max-width: 95vh;
        max-width: 85vh;
    }
    /* .khp-bingo-card .khp-bingo-square:nth-of-type(odd){ */
        /* background: inherit; */
    /* } */
    .khp-bingo-card[data-khp-card-size="5"] .khp-bingo-square:nth-of-type(odd){
        background:#f22f7f;
    }
    .khp-bingo-card[data-khp-card-size="5"] .khp-bingo-square{
        width:20%;
        padding:0 0 20% 0;
        border-radius: 20px;
        /* overflow: hidden; */
    }

    .khp-bingo-card .khp-bingo-square[data-khp-bingo-square-checked='false']:hover{
        background: #fdff00 !important;
    }
    .khp-bingo-card .khp-bingo-square[data-khp-bingo-square-checked='false']:hover p{
        color: #3d1e8e !important;
    }
    .khp-bingo-card .khp-bingo-square[data-khp-bingo-square-checked='true']:hover{
        background: lightgreen !important;
    }
    
}


@font-face {
    font-family:furore-webfont;
    src:url(https://assets.donordrive.com/themes/extralife/fonts/Furore-webfont.eot);
    src:url(https://assets.donordrive.com/themes/extralife/fonts/Furore-webfont.eot?iefix) format('eot'),
    url(https://assets.donordrive.com/themes/extralife/fonts/Furore-webfont.woff) format('woff'),
    url(https://assets.donordrive.com/themes/extralife/fonts/Furore-webfont.ttf) format('truetype'),
    url(https://assets.donordrive.com/themes/extralife/fonts/Furore-webfont.svg#webfont) format('svg');
    unicode-range:U+0000-009F,
    U+00A1-00FF
}