:root{
    --bg-color: #2b2b2b;
}


#game-root{
    overflow: hidden; 
}


body {
    background-color: var(--bg-color);
}

html, body, .game-root {
    width: 100%;
    height: 100%;
}

.game-root{
    background-color: var(--bg-color);
}

.container {
    padding: 5px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.main-cont {
    padding-top: 15px;
    padding-bottom: 15px;
}

.header {
    margin-bottom: 10px;
}

.header-cont {
    align-self: start;
    flex: 0;
}

.title{
    color: white;
    margin: 0;
}

/*.header-cont {
    height: 10%;
}

.game-cont {
    height: 50%;
}

.keyboard-cont {
    height: 40%;
}*/

.senha-button {
    padding: 3px 15px 3px 15px;
    border: 0;
    color: black;
    background-color: white;
    border-radius: 4px;
    font-family: "Roboto";
    font-weight: 500;
    font-size: 14px;
}

i {
    font-size: 20px;
    cursor: pointer;
}

.senha-logo {
    width: 60%;
}

@media (max-width: 1024px)
{
    .senha-logo {
        width: 100%;
    }
}

.tile {
    width: 45px;
    height: 45px;
    margin: 2px;
    background-color: #F3F4F4;
    cursor: pointer;
    font-family: 'Roboto';
    font-size: 28px;
    text-align: center;
    transition: transform 0.8s, background-color 0.15s ease-in-out 0.05s;
}

.board {
    margin-bottom: 10px;
}

.secret_word {
    font-size: 12px;
    margin-bottom: 0;
    padding: 0;
    line-height: 0;
    letter-spacing: .1rem;
}

.game-cont {
    flex: 1;
}

.keyboard {
    margin-bottom: 10px;
}

.keyboard-cont {
    flex: 0;
}

#ENTER {
    padding-left: 40px;
    padding-right: 40px;
}

.keyboard-button {
    border: 1px solid rgba(0,0,0,0.2);
    margin: 2px;
    min-width: 30px;
    padding: 6px 7px 6px 7px;
    border-radius: 3px;
    font-family: 'Roboto';
    font-size: 18px;
    background-color: #F3F4F4;
    /*transition: transform 0.8s, background-color 0.3s ease-in-out 0.1s;*/
    transition: background-color 0.3s ease-in-out 0.1s;
    color: #443501;
    filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.18));
}

.keyboard-button:hover {
    background-color: rgb(225, 225, 225);
}

.special-button {
    background-color: #F9F3D3;
    color: #443501;
    border: 1px solid #A6A6A6;
}

.special-button:hover {
    background-color: rgb(230, 224, 192);
}

.selected {
    -moz-box-shadow:    inset 0 3px 4px #a5a5a5;
    -webkit-box-shadow: inset 0 3px 4px #a5a5a5;
    box-shadow:         inset 0 3px 4px #a5a5a5;
    background-color: white;
}

.errado {
    background-color: #D8D1AE;
    /*transform: rotateY(180deg);*/
}

.existente {
    background-color: #FFC700;
    /*transform: rotateY(180deg);*/
}

.correto {
    background-color: #76C117;
    /*transform: rotateY(180deg);*/
}

.shake-effect {
    background-color: #FF6B00;
    color: white;
}

/*.correto p, .errado p, .existente p {
    transform: rotateY(180deg);
}*/

.keyboard-button p {
    margin: 0;
}

.modal-body {
    font-family: 'Roboto', sans-serif;
}

.yes-button {
    padding: 8px 15px 8px 15px;
    border: 0;
    color: white;
    background-color: black;
    border-radius: 4px;
    font-family: "Roboto";
    font-weight: 500;
    font-size: 14px;
    width: 100%;
}

.no-button {
    padding: 8px 15px 8px 15px;
    border: 0;
    background-color: rgb(249, 243, 211);
    color: black;
    border-radius: 4px;
    font-family: "Roboto";
    font-weight: 500;
    font-size: 14px;
    width: 100%;
}

.ads {
    min-height: 80px;
    background-color: #a5a5a5;
    font-family: 'Roboto';
    font-weight: 400;
    bottom: 0;
    opacity: 0.5;
}

.toast {
    background-color: #FF6B00;
    color: white;
}

.modal-header {
    border: none;
    margin: 0;
}

.language-selector {
    font-family: 'Roboto', sans-serif;
    padding: 4px;
}

.modal, .modal-dialog, .modal-content {
    border-radius: 6px;
}

.countdown-div p {
    margin: 0;
    font-size: 12px;
}

.configuracoes-show, .onboarding-show {
    height: 25px;
    width: auto;
    cursor: pointer;
}

.stats-fill {
    background-color: #FFC700;
    background-image: url('General-Card-Stats.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.stats .col-12 {
    padding: 5px;
}

.stats .col-6 p {
    font-weight: 300;
    font-size: 14px;
    margin-bottom: 0;
}

#ep_banner1, #ep_banner2, #ep_banner {
    width: 100%;
}

.hide {
    display: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
    background-color: white;
    color: black;
}

.accordion-button {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
    background-color: white;
    color: black;
}

.panel-body {background-color:white !important;}

.accordion-button:not(.collapsed) {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
    background-color: white;
    color: black;
}

.play_more_button {
    padding: 3px 15px 3px 15px;
    border: 0;
    color: #443501;
    background-color: #FFC700;
    background-image: url('General-Card-Stats.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
    font-family: "Roboto";
    font-weight: 800;
}

.logo h2 {
    font-family: 'Roboto';
}

#copiado {
    z-index: 99999;
}

#onboarding-1 .modal-content,
#onboarding-2 .modal-content,
#onboarding-3 .modal-content,
#onboarding-4 .modal-content,
#onboarding-5 .modal-content,
#onboarding-6 .modal-content {
    height: 85vh;
}

@media (max-width: 768px) {
    #game-root{
        overflow: hidden; 
        overflow-y: auto;
    }
}