body
{
    position: relative;
    min-height: 100vh;
}

.content-wrap 
{
    padding-bottom: 250px; 
}

footer
{
    margin-top: 3rem;
    font-size: 80%;
    background-color: #eee;
    padding: 30px 0;

    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;   
}

a
{
    color: #41a1ba;
}

a.btn
{
    color: #fff !important;
}

a.btn.btn-play 
{
    color: #fff;
    background-color: #ED561B;
    border-color: #ED561B;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.btn-play i
{
    font-size: 1.7rem;
}


a.btn-sm.btn-play 
{
    color: #fff;
    background-color: #ED561B;
    border-color: #ED561B;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
}

.btn-sm.btn-play i
{
    font-size: 1rem;
}

.archivos a.btn.btn-play 
{
    color: #fff;
    background-color: #ED561B;
    border-color: #ED561B;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.8rem;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    margin-bottom: 0;
    border-radius: 0;
    margin-left: 3px;
}



.navbar
{
    background-color: #0A4160;
    justify-content: flex-start;
    color: #fff;
}

.navbar .container
{
    flex-wrap: nowrap;
}

.navbar-brand
{
    padding: 0.3rem 0 0.3rem 0.4rem;
    display: inline-block;
    vertical-align: top;
    flex-grow: 1;
    text-align: center;
}

.navbar-collapse .navbar-brand
{
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    margin-right: 0;
    max-width: 100%;
}

.navbar-brand img
{
    height: 40px;
}

.page-logo
{
    margin-right: 10px;
    text-transform: uppercase;
    font-family: 'Fira Sans Extra Condensed', sans-serif;
    font-size: 30px;
    color: #fff;
}

@media (max-width: 991px) {
    .content-wrap 
    {
        padding-bottom: 0; 
    }

    .navbar-brand
    {
        flex-grow: 1;
        text-align: right;
    }

    .navbar .container
    {
        max-width: none !important;
    }


    .navbar-mobile .navbar-collapse
    {
        position: absolute;
        top: 40px;
        left: 0;
        z-index: 100000;
    }

}






h4
{
    font-size: 1rem;
}

.definiciones
{
    margin-top: 1rem;
}

.definiciones h4
{
    background-color: #3B8686;
    color: #fff;
    padding: 0.3rem 0.6rem;
    margin: 0;
    text-transform: uppercase;
    font-family: 'Roboto Slab', serif;
}

.definiciones_content
{
    height: 290px;
    overflow-y: scroll;
    position: relative;
}

.definicion
{
    cursor: pointer;
    padding: 0.2rem;
    font-family: 'Roboto Slab', serif;
    font-size: 0.9rem;
}

.definicion
{
    background-color: #e8e8e8;
}

.definicion:nth-child(odd)
{
    background-color: #f5f5f5;
}

.definicion.selected.word
{
    background: #A7DBD8;
}

.definicion.selected
{
    background: #E0E4CC;
}

.definicion.solved
{
    color: #999;
}

.definicion span
{
    display: block;
    margin-left: 1.3rem;
}

.definicion span.definicion_number
{
    display: block;
    float: left;
    width: 1rem;
    margin-left: 0;
    text-align: right;
}

.definicion.solved span.definicion_number, .definicion_caja i
{
    color: #009633;
}

#gridcontainer
{
    margin-bottom: 10px;
}

#grid 
{
    display: block;
    border-spacing: 0;
    color: black;
    background: white;
    transition: background 2s, box-shadow 2s;
    -webkit-transition: background 2s, box-shadow 2s;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
}

#grid td 
{
    position: relative;
    width: 45px;
    max-width: 45px;
    height: 45px;
    max-height: 45px;
    border: 1px solid black;
    text-align: center;
    cursor: pointer;
    padding: 0;
    border-collapse: collapse;
    white-space:nowrap;
    overflow: hidden;
    font-family: 'Roboto Slab', serif;
}

#grid .number 
{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.6rem;
    margin-top: -0.01rem;
    margin-left: 0.03rem;
}

#grid .letter 
{     
    text-transform: uppercase;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    line-height: normal;
    font-size: 1rem;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
    color: #A20021
}

#grid .block
{
    background: #000;
}

#grid td:focus
{
    outline: none;
    background: #4d9e9a;
}

#grid td:focus div.letter
{
    outline: none;
}

.selected
{
    background: #E0E4CC;
}

.selected.word
{
    background-color: #A7DBD8;
}

.definicion_caja
{
    background-color: #A7DBD8;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 0 1rem;
    margin-bottom: 1px;
    font-family: 'Roboto Slab', serif;
    height: 65px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 0.95rem;
    line-height: 1.1rem;
}

#controles_mobile .definicion_caja
{
    max-width: none;
}

#definicion_control
{
    background-color: #A7DBD8;
    display: table;
}

#definicion_control div
{
    display: table-cell;
    vertical-align: middle;
}

#definicion_control div.arrow
{
    vertical-align: middle;
    padding: 0 10px;
}

.definicion_caja span
{
    display: inline;
    width: auto;
}

.definicion_caja span.definicion_number
{
    font-weight: bold;
}

.options
{
    background-color: #0A4160;
    color: #fff;
    padding: 0.2rem 0;
    font-size: 1.5rem;
    text-align: center;
    display: flex;
    margin-bottom: 2px;
}

.options > div
{
    cursor: pointer;
    padding: 0.1rem 0;
    flex-grow: 1;
}

.options > div.timer
{
    flex-grow: 2;
    font-size: 1.3rem;
}

#controles_mobile
{
    /*
    position:fixed;bottom:0;width:100%;background:#000;z-index:9997;transform-origin:bottom;
    */
}

.modal-backdrop
{
    z-index: 10040;
}

.modal {
    z-index: 10050;
}

#modal_msg
{
    z-index: 11000;
}


#game_container
{
    height: 100%;
}

#game_container.pause
{
    opacity: 0.04;
    -moz-opacity: 0.04; 
    -webkit-opacity: 0.04;
    filter: alpha(opacity=0.04);
}

#game_container.novisible
{
    visibility: hidden;
}

.pista_letter, .pista_word
{
    cursor: pointer;
}


#keyboard {}
#keyboard #keyboard_content {text-align:center;width:100%; background-color: rgba(0,0,0,.1); padding: 1vw; display: flex; flex-wrap: wrap; justify-content: center;}
#keyboard, #keyboard * {cursor:default;padding:0;margin:0;outline:0;border:0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:none;}

#keyboard span.key
{ 
    padding: 5vw 0;
    color: #333;
    background: #fff;
    font-size: 5vw;
    line-height: 2vw; 
    border-bottom: 1px solid #b5b5b5; 
    text-transform: uppercase; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 0 3px -1px rgba(0,0,0,.3);
    box-shadow: 0 0 3px -1px rgba(0,0,0,.3);
    margin: 0.5vw 1px;
    width: calc(10% - 2px);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#keyboard span.key:active, #keyboard span.key.active { background-color: #ddd !important; }
#keyboard span.key.supr  {text-transform: none !important; padding: 0 !important;} 
#keyboard span.key i#backspace {
    background-image: url(data:image/png;base64,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);
        width: 32px;
        height: 20px;
        background-repeat: no-repeat;
        display: block;
        vertical-align: middle;
        background-size: contain;
 } 

 @media (min-width: 1920px) {

    #grid 
    {
        width: 100%;
        max-width: 730px;
    }

    #grid td 
    {
        position: relative;
        width: 50px;
        max-width: 50px;
        height: 50px;
        max-height: 50px;
        border: 1px solid black;
        text-align: center;
        cursor: pointer;
        padding: 0;
        border-collapse: collapse;
        white-space:nowrap;
        overflow: hidden;
        font-family: 'Roboto Slab', serif;
    }

    .definicion_caja
    {
        width: 100%;
        max-width: 730px;
    }

    .definiciones_content
    {
        height: 330px;
    }
 }

@media (max-width: 767px) {
    #grid .letter
    {
        font-size: 10px;
    }

    #keyboard span.key
    { 
        padding: 6vw 0;
    }
}

@media (max-width: 575px) {

    #grid .number 
    {
        font-size: 1.9vw;
    }

    .definicion_caja
    {
        font-size: 0.8rem;
    }
}


#definicion_focused_mobile
{
    padding: 0;
}

.cell_solved_animation {
  animation: highlight_h 1800ms !important;
  -webkit-animation: highlight_h 1800ms !important; 
}


#grid .cell_solved_h div.letter, #grid .cell_solved_v div.letter {
  color: #114b9c;
}


@keyframes highlight_h {
      from {
        background-color: yellow;
      }
}

@keyframes highlight_v {
      from {
        background-color: yellow;
      }
}

#intro
{
    font-family: 'Roboto Slab', serif;
    background: #fff;
    display: flex;
    align-items: center; 
    justify-content: center;
    flex-direction: column;
    position: relative;
}

#intro_help
{
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center; 
    color: #555;
}

#intro .arrow
{
    opacity: 0.8;
    animation-name: jump;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    -webkit-animation-name: jump;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
}

.pasatiempo_header
{
    margin-bottom: 1rem;
}

.pasatiempo_header *
{
    margin-bottom: 0;   
}

.crucigrama_dia
{
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    align-items: center;
    background-color: #f1f1f1;
    border-radius: 0;
    text-align: center;
    padding: 2rem 1rem 3rem 1rem;
}

.crucigrama_dia span
{
    font-size: 1rem;
    line-height: 1.4rem;
}

.destacado a
{
    color: #0A4160;
}

.crucigrama_dia h2
{
    margin-top: 0.6rem;
    margin-bottom: 0;
    font-weight: bold;
}

.crucigrama_dia a
{
    color: #0A4160;
}

.sopa_dia
{
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    align-items: center;
    border: 1px solid #f1f1f1;
    border-radius: 0;
    text-align: center;
    padding: 1rem 1rem 3rem 1rem;
}

.cuadro_dia
{
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    align-items: center;
    border: 1px solid #f1f1f1;
    border-radius: 0;
    text-align: center;
    padding: 1rem 1rem 3rem 1rem;
}


.sudoku_dia
{
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    align-items: center;
    border: 1px solid #f1f1f1;
    border-radius: 0;
    text-align: center;
    padding: 1rem 1rem 3rem 1rem;
}

.destacado h2
{
    margin-bottom: 0;
}

.destacado h2 a
{
    font-size: 2rem;
    line-height: 3.4rem;
    font-family: 'Fira Sans Extra Condensed', sans-serif;
    font-weight: bold;
}

.destacado span 
{
    font-size: 0.8rem;
    line-height: 1rem;
    color: #333;
}

.destacado img
{
    max-width: 100%;
}

.btn.mas
{
    font-weight: bold;
    font-size: 0.95rem;
    
    background-color: #17a2b8;
    border: 0;
    border-radius: 0;
    
    position: relative;
    top: 32px;
    right: 10px;
}

h1
{
    font-size: 2rem;
    font-family: 'Fira Sans Extra Condensed', sans-serif;
}

h2
{
    font-size: 1.2rem;
    font-family: 'Roboto Slab', serif;
}

h3
{
    font-size: 1rem;
    font-family: 'Roboto Slab', serif;
    font-weight: bold;
}

.destacado
{
    background: #f7f7f7;
    border: 0;
    margin-bottom: 1rem;
    padding: 1rem 0;
}

.crucigrama_dia.destacado
{
}

.crucigrama_dia.destacado .juego_img a
{
    perspective: 500px;
    max-height: 300px;
    width: 200px;
}

.crucigrama_dia.destacado img
{
    max-width: 100%;
    transform: rotateY( 32deg );     
    margin: 2.5rem -1.5rem 2.5rem 1rem;

}

@media (max-width: 767px)  {
.crucigrama_dia.destacado img
{
    max-width: 85%;
}
}


.crucigrama_dia.destacado h2 a
{
    font-size: 2.6rem;
    line-height: 2.9rem;
}


h1 > span
{
    font-size: 1.2rem;
    text-align: center;
}

h1 > span a
{
    font-weight: bold;
}

#intro_info
{
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 2rem 1rem;
    margin: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fafafa;
    position: relative;
    top: -10%;

}

#intro_info span
{
    display: block;
    text-align: center;
}

#intro_info h1
{
    text-align: center;
}

.crucigrama_dia .premium
{
    position: absolute; 
    right: -15px; 
    bottom: 0;
}

.premium
{
    position: absolute; 
    right: -15px; 
    bottom: -15px;
}

.premium img
{
    -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
}

@keyframes jump
{
    0%{transform:translatey(0)}
    10%{transform:translatey(-15px)}
    20%{transform:translatey(0px)}
    30%{transform:translatey(0px)}
    40%{transform:translatey(-15px)}
    50%{transform:translatey(0px)}
    100%{transform:translatey(0px)}
}

nav.navbar-mobile i
{
    text-align: center; 
    width: 19%; 
    font-size: 1.5rem; 
    padding: 0.65rem 0;
}

.navbar-mobile
{
    color: #fff;
    z-index: 100000;
    padding: 0;
}

.navbar-collapse
{
    background: #0A4160;
    flex-grow: 0;
}

.navbar-nav .nav-link
{
    color: #fff;
    display: block;
    padding: 0.2rem 0.5rem;
    font-size: 1.3rem;
    text-transform: uppercase;
    font-family: 'Fira Sans Extra Condensed', sans-serif;
    text-align: left;
}

.navbar a
{
    color: #fff;
    text-decoration: none;
}

.navbar-dark .navbar-nav .nav-link
{
    color: #fff;
}

.navbar-dark .navbar-toggler
{
    color: #fff;
    border: 0;
}

.menu-juegos-mobile
{
    background-color: #11547a;
    margin: 1rem 0;
    border-radius: 5px;
    padding: 1rem;
}

.menu-juegos-mobile a.nav-link
{
    font-size: 1rem;
}

.users
{
    padding: 0.4rem;
}

.user-info
{
    padding: 0.2rem 0;
    
}

.user-info a
{
    color: #65bfd6;
    font-size: 0.8rem;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
}

.user-info a.btn:hover
{
    color: #222 !important;
}


@media (min-width: 992px) and (orientation: landscape) {
    #controles_mobile
    {
        display: none;
    }

}

.splash-screen
{
    display: none;
}

.options_mobile
{
    display: none;
}

@media (orientation: portrait) {
    nav.navbar-mobile i
    {
        text-align: center; 
        width: auto; 
        padding: 0.65rem 1rem;
    }

    .page-logo
    {
        margin-left: 0;
    }

    .splash-screen
    {
        display: block;
    }

    .pasatiempos_extra
    {
        display: none;
    }

    .options_mobile
    {
        display: flex;
    }

    .options_desktop
    {
        display: none;
    }

    .pasatiempo_title
    {
        display: none;
    }

    div.navbar-mobile .navbar-collapse
    {
        padding: 1rem;
        width: 100%;
    }

    nav.navbar-mobile
    {
        background: #0A4160;
        z-index: 10000;
    }

    .navbar .navbar-collapse .navbar-nav
    {
        padding-top: 1rem;
        padding-left: 1rem;
    }


    div.navbar-mobile .navbar-collapse
    {
        position: absolute;
        top: 40px;
        left: 0;
        z-index: 100000;
    }



}



.modal-content
{
    border: 0;
    border-radius: 0;
    background-clip: border-box;
}

.modal-header
{
    border: 0;
}

.modal-footer
{
    border: 0;
    background: #F5F5F5;
}

.modal .btn-primary
{
    background-color: #222;
    border: 0;
    border-radius: 0;
}

.modal .btn-success
{
    background-color: #46A049;
    border: 0;
    border-radius: 0;
}


/** Sopas **/

#board_container
{ 
    margin: 0 auto; 
    position: relative;
}

#canvas_container 
{
    position: relative;
    float: right; 
    top: 0;
    border: 2px solid #333;
    margin: 0 auto;
}

#canvas_container canvas 
{
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}

#canvas_container canvas#letters
{
    z-index: 100;
}

#canvas_container canvas#lines
{
    z-index: 200;
}


#tools
{
    position: relative;
    width: 220px;
    z-index: 1;
    float: left;
}

.words_list
{

}

.words_list ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.words_list li
{
    padding: 8px 6px;
    margin: 0;
    cursor: pointer;
    font-family: 'Roboto Slab', serif;
}

.words_list li.solved div
{
    text-decoration: line-through;    
}

.words_list div
{
    display: inline-block;

}

.words_list span
{
    display: inline-block;
    margin-left: 4px;
    padding: 1px 10px;
    background-color: #88b5b5;
    font-size: 11px;
    border-radius: 10px;
    cursor: pointer;
    color: #fff;
}

.words_list li:nth-child(odd) {
    background-color: #f5f5f5;
}
.words_list li {
    background-color: #e8e8e8;
}


@media (max-width: 767px) {
    #tools
    {
        position: static;
        width: auto;
        float: none;
    }

    #canvas_container 
    {
        position: relative;
        float: none; 
        top: 0;
    }

    .words_list ul
    {
        display: flex;
        flex-wrap: wrap;
    }

    .words_list li
    {
        flex-grow: 1;
        flex-basis: 50%;
    }

    .words_list div
    {
        display: block;
        
    }



}

/********** cuadro ************/

#cuadro 
{
    display: block;
    border-spacing: 0;
    color: black;
    background: white;
    transition: background 2s, box-shadow 2s;
    -webkit-transition: background 2s, box-shadow 2s;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

#keys_number 
{
    display: block;
    border-spacing: 0;
    color: black;
    background: white;
    transition: background 2s, box-shadow 2s;
    -webkit-transition: background 2s, box-shadow 2s;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    margin-top: 20px;
}

#cuadro td 
{
    position: relative;
    width: 80px;
    max-width: 80px;
    height: 80px;
    max-height: 80px;
    border: 1px solid black;
    text-align: center;
    cursor: pointer;
    padding: 0;
    border-collapse: collapse;
    white-space:nowrap;
    overflow: hidden;
    font-family: 'Roboto Slab', serif;
}

#keys_number td 
{
    position: relative;
    width: 80px;
    max-width: 80px;
    height: 80px;
    max-height: 80px;
    border: 1px solid black;
    text-align: center;
    cursor: pointer;
    padding: 0;
    border-collapse: collapse;
    white-space:nowrap;
    overflow: hidden;
    font-family: 'Roboto Slab', serif;
    font-weight: bold;
    color: #004f9e;
    position: relative;
}

#cuadro td div
{     
    text-transform: uppercase;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    line-height: normal;
    font-size: 1.8rem;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

#cuadro td div.number
{
    color: #3d7cd4;
}

#cuadro .block
{
    background: #212121;
}

#cuadro td:focus
{
    outline: none;
    background: #C7EFCF;
}

#cuadro td:focus div.number
{
    outline: none;
}

#cuadro_container .options
{
    width: 100%;
    max-width: 480px;
    margin: 4px auto;
}

.cuadro_header h1
{
    text-align: center;
}

#keys_number div.number
{
    text-align: center;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#keys_number div.number:active { background-color: #ddd !important; }

#keys_number div.number i#backspace
{
    background-image: url(data:image/png;base64,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);
    width: 30px;
    height: 20px;
    background-repeat: no-repeat;
    display: block;
    vertical-align: middle;
    background-size: contain;
    margin: 0 auto;
} 



/********** sudoku ************/

#sudoku 
{
    display: block;
    border-spacing: 0;
    color: black;
    background: white;
    transition: background 2s, box-shadow 2s;
    -webkit-transition: background 2s, box-shadow 2s;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    max-width: 486px;
    margin: 0 auto;
    border: 2px solid black;

    background: 
         linear-gradient(to top left,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.8px),
             rgba(0,0,0,0.06) 50%,
             rgba(0,0,0,0) calc(50% + 0.8px),
             rgba(0,0,0,0) 100%),
         linear-gradient(to top right,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.8px),
             rgba(0,0,0,0.06) 50%,
             rgba(0,0,0,0) calc(50% + 0.8px),
             rgba(0,0,0,0) 100%);
}

#sudoku_container #keys_number 
{
    max-width: 486px;
}

#sudoku_container #keys_number td
{
    width: 100px;
    max-width: 100px;
    height: 100px;
    max-height: 100px;
}

#sudoku_container #keys_number div.number
{
    font-size: 1.4rem;
}

#sudoku_container #keys_number div.number.selected
{
    background-color: #C7EFCF;
}

#sudoku td 
{
    position: relative;
    width: 54px;
    max-width: 54px;
    height: 54px;
    max-height: 54px;
    border-left: 1px solid #bbb;
    border-top: 1px solid #bbb;
    text-align: center;
    cursor: pointer;
    padding: 0;
    border-collapse: collapse;
    overflow: hidden;
    font-family: 'Roboto Slab', serif;
}


#sudoku td.border_i
{
    border-left: 2px solid #000;
}

#sudoku td.border_t
{
    border-top: 2px solid #000;
}

#sudoku td div
{     
    text-transform: uppercase;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    line-height: normal;
    font-size: 1.8rem;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

#sudoku td.many div
{
    font-size: 0.9rem;
    padding: 1px;
}

#sudoku td div.number
{
    color: #3d7cd4;
}

#sudoku td:focus div.number
{
    outline: none;
}

#sudoku_container .options
{
    width: 100%;
    max-width: 486px;
    margin: 4px auto;
}

.sudoku_header h1
{
    text-align: center;
}

#sudoku td.highlight
{
    background-color: rgba(220, 220, 220, 0.4);
}

#sudoku td:focus, #sudoku td.selected
{
    outline: none;
    background: #C7EFCF !important;
}

#sudoku td.error
{
    color: #fff !important;
    background-color: #ED5A77;
    -webkit-animation: blinkerror 1s ease;  
    -moz-animation: blinkerror 1s ease;  
    -o-animation: blinkerror 1s ease;
    animation: blinkerror 1s ease; 
}



#sudoku td.error div.number
{
    color: #fff !important;
}


@-webkit-keyframes blinkerror {
  0%, 25% {
    background-color: #ED5A77;
  }

  26%, 50% {
    background-color: #d64561;
  }

  51%, 75% {
    background-color: #ED5A77;
  }

  76%, 100% {
    background-color: #d64561;
  }

}

@media (max-width: 767px) {
    #sudoku td.many div {
        font-size: 0.65rem;
    }
}


    .juego_img
    {
        text-align: center;
        position: relative;
        margin-bottom: 20px;
    }



    .juego_img a
    {
        display: block;
    }


.ui-widget-header 
{
    border: 1px solid #0A4160;
    background: #0A4160;
    color: #fff;
    font-weight: bold;
}

.ui-datepicker table 
{
    font-size: 1.4rem;
    margin: 0;
}

.ui-datepicker 
{
    width: auto;
    padding: 1rem;
    border: 0;
    border-radius: 0;
    margin-top: 1rem;

}

.ui-corner-all
{
    border-radius: 0;
}

.ui-datepicker td span, .ui-datepicker td a
{
    text-align: center;
    border: 0;
}

.ui-widget.ui-widget-content
{
    border: 0;
}

.ui-datepicker td
{
    padding: 0;
}

.ui-datepicker td a.ui-state-default
{
    border: 1px solid #fff;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    background: #dfeffc;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #fad42e;
    background: #fbec88;
    color: #363636;
}

.ui-datepicker-prev,
.ui-datepicker-next, .ui-datepicker-prev:hover,
.ui-datepicker-next:hover
{
    font-family: "Font Awesome 5 Free";
}

.ui-datepicker-prev span,
.ui-datepicker-next span 
{
    background-image: none !important;
    font-family: "Font Awesome 5 Free";
    cursor: pointer;
}

.ui-datepicker-prev:before,
.ui-datepicker-next:before {
    font-family: "Font Awesome 5 Free";
    display: flex;
    font-weight: inherit;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.ui-datepicker-prev:before {
  content: "\f137";
}

.ui-datepicker-next:before {
  content: "\f138";
}

.ui-datepicker .ui-datepicker-prev {
    left: 2px;
    bottom: 2px;
    top: 2px;
    height: auto;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    right: 2px;
    bottom: 2px;
    top: 2px;
    height: auto;
    cursor: pointer;
}


.ui-state-hover.ui-datepicker-prev-hover, .ui-state-hover.ui-datepicker-next-hover
{
    background: transparent;
    border: 0;
}

@media (max-width: 767px) {
    h1.date_title
    {
        font-size: 1.35rem;
    }

    h1 > span
    {
        font-size: 0.9rem;
    }

    .juego_img
    {
        text-align: center;
    }

    .destacado 
    {
        text-align: center;
    }

    .premium
    {
        position: absolute;  
        bottom: -8px;
        width: 35px;
        right: -8px;
    }

    .btn.mas
    {
        top: 15px;
    }

    #intro_info span
    {
        text-align: center;
    }

    .destacado h2 a
    {
        font-size: 1.7rem;
    }

    .btn-sm.btn-play i 
    {
        font-size: 1rem;
    }

    .destacado .img_container
    {
        display: flex;
        justify-content: center;
    }

    .crucigrama_dia .premium
    {
        position: absolute; 
        right: -15px; 
        bottom: 26px;
    }

    .play
    {
        text-align: center;
        margin-top: 15px;
    }

    .archivos .fecha_anio
    {
        display: none;
    }

    .options > div.timer
    {
        flex-grow: 2;
        font-size: 1.1rem;
    }

    .ui-datepicker table {
        font-size: 1.3rem;
        margin: 0;
    }
}

.text-muted 
{
    color: #6c757d !important;
}

.premium-pr690
{
    border-bottom: none !important;
}

.login-bar
{
    margin-top: 60px;
    border-top: solid 1px #c3c3c3;
    text-align: center;
}

.login-bar span, .free span
{
    color: #cd9c17;
    font-family: 'Roboto Slab', Georgia, 'Times New Roman', Times, serif;
    font-size: 25px;
    line-height: normal;
    text-transform: uppercase;
    display: block;
}

.login-bar a, .free a
{
    display: block;
    cursor: pointer;
    font-family: 'Roboto Slab', Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
    border: solid 1px #41a1ba;
    background-color: #41a1ba;
    color: #fff;
    padding: 15px 30px;
    transition: 0.5s;
    margin: 10px auto 20px auto;
    display: inline-block;
}

.login-bar a:hover, .free a:hover
{
    background-color:#fff; color:#41a1ba;
}

.login-bar .login-suscriptor
{
    margin-top: -17px;
    margin-left: 10px;
    text-align: left;
}

.login-bar .login-suscriptor span
{
    display: inline-block;
    background-color: #fff;
    padding: 0 10px;
}

.free
{
    margin-top: 60px;
    border-top: solid 1px #c3c3c3;
    text-align: center;
    background-color: 
}

.free .probar
{
    margin-top: -17px;
    margin-left: 10px;
    text-align: left;
}

.free .probar span
{
    display: inline-block;
    background-color: #fff;
    padding: 0 10px;
    font-size: 18.2px;
}


.bg-info
{
    background-color: #6eb6c2 !important;
    border-radius: 4px;
}


.bg-info a
{
    color: #fff;
}

.calendario
{
    background-color: #efefef;
}

.archivos
{
    background-color: #0A4160;   
    color: #fff; 
}

.archivos a
{   
    color: #fff; 
}

.archivos ul
{
    list-style-type: none;
    margin: 0;
    padding-left: 10px;
}

.archivos li
{   
    margin: 0;
    padding: 0;
    display: flex;
}

.archivos li i
{   
    font-size: .6rem;
    line-height: 1.6rem;
    margin-right: 5px;
}

.archivos .link_dia
{
    flex-grow: 1;
}

.crucigramas_semana
{
    background-color: #f7f7f7;
    color: #212529;
}

.crucigramas_semana a
{
    color: #0A4160;
}

.crucigramas_semana ul
{
    padding-left: 2px !important;
    margin-top: 2rem !important;
}

.crucigramas_semana ul li
{
    border-bottom: 1px solid #dedede;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

@media (max-width: 991px) {
    #definicion_focused
    {
        display: none;
    }

    .users
    {
        padding: 0 1rem 1rem 1rem;
    }

    .crucigrama_dia, .cuadro_dia, .sopa_dia, .sudoku_dia
    {
        padding: 1rem 0.5rem 1.5rem 0.5rem;
    }

    .btn.mas 
    {
        top: 15px;
    }

}

@media (min-width: 992px) {
    .crucigrama_dia, .cuadro_dia, .sopa_dia, .sudoku_dia
    {
        padding: 1rem 0rem 2.5rem 0rem;
    }
}

.compartir .share-buttons
{
    text-align: right;
    color: #0A4160;
    font-size: 1.5rem;
    margin-bottom: .5rem;
}

.compartir a
{
    text-decoration: none;
    color: #0A4160;
}

@media (max-width: 767px) {
    .compartir .share-buttons
    {
        font-size: 1rem;
    }
}

.redes
{
    text-align: center;
}

.redes i
{
    font-size: 2rem;
    margin: 0 2px;
}

.modal .share-buttons
{
    text-align: center;
    color: #0A4160;
    font-size: 2rem;
}

.modal .share-buttons a
{
    margin: 0 5px;
}

.pasatiempos_extra
{
    margin-top: 4rem;
}

.mas_pasatiempos h3
{
    font-size: 0.9rem;
}

.mas_pasatiempos .col:first-child, .mas_pasatiempos .col:nth-child(2), .mas_pasatiempos .col:nth-child(3)
{
    border-right: 1px solid #ccc;
}

.mas_pasatiempos .col:first-child
{
    border-right: 1px solid #ccc;
}

.mas_pasatiempos a 
{
    color: #0A4160;
}

.mas_pasatiempos img
{
    max-width: 120px !important;
}


.Row,
.Row-letter {
    display: flex;
    justify-content: center
}

.Row-letter {
    align-items: center;
    border: 2px solid rgba(0, 0, 0, .4);
    font-size: 28px;
    font-weight: 700;
    height: 40px;
    margin: 2px;
    text-transform: uppercase;
    width: 40px;
    background-color: #efefef;
}

.App-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    max-width: 500px;
    position: relative
}

.game_container h2
{
    margin: 0;
}


.App-container p {
    text-align: center;
    margin: 10px 0;
}


.App-container h1 {
    margin-top: 0
}

.Game {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.Game,
.Game-keyboard {
    display: flex;
    flex-direction: column
}

.Game-keyboard-row {
    display: flex;
    flex-direction: row;
    justify-content: stretch
}

.Game-keyboard-button {
    align-items: center;
    background-color: #cdcdcd;
    border: 2px solid transparent;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex: 1 1;
    font-size: 20px;
    justify-content: center;
    margin: 2px;
    min-height: 40px;
    padding: 2px;
    text-decoration: inherit;
    text-transform: capitalize
}

.Game-keyboard-button-wide {
    flex: 2 1
}

.Game-keyboard-button:focus {
    outline: none
}

.letter-correct {
    background-color: #57ac57;
    border: 2px solid rgba(0, 0, 0, .3);
    color: #fff
}

.letter-elsewhere {
    background-color: #e9c601;
    border: 2px dotted rgba(0, 0, 0, .3);
    color: #fff
}

.letter-absent {
    background-color: #a2a2a2;
    border: 2px solid transparent;
    color: #fff
}

@media (prefers-color-scheme:dark) {


    .Game-keyboard-button {
        color: #404040
    }
    .Row-letter {
        border: 2px solid hsla(0, 0%, 100%, .4)
    }
    .letter-correct {
        border: 2px solid rgba(0, 0, 0, .3);
        color: #fff
    }
    .letter-elsewhere {
        border: 2px dotted rgba(0, 0, 0, .3);
        color: #fff
    }
    .letter-absent {
        background-color: #8e8e8e;
        border: 2px solid transparent;
        color: #fff
    }
}

.Game-options {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 1rem
}

.Game-options>*+* {
    -webkit-margin-start: .5rem;
    margin-inline-start: .5rem
}

.Game-options button {
    min-width: 4rem
}

.App-footer {
    font-size: 80%;
    line-height: 1.5;
    margin: -1rem 0 2rem
}

.wordle-ayuda {
    margin-top:  1rem;
    line-height: 1.4;
    background-color: #f7f7f7;
    padding: 1rem;
}