body
{

}

.definiciones
{
    margin-top: 1rem;
}

.definiciones h4
{
    padding: 0.3rem 0.6rem;
    margin: 0;
    text-transform: uppercase;
}

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

.definicion
{
    cursor: pointer;
    padding: 0.2rem;
    background: #fff;
    padding: 10px;

}


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

.definicion.selected
{
    background: #F1F0E8;
}

.definicion.solved
{
    color: #999;
}

.definicion span
{
    display: block;
    margin-left: 22px;
}

.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: table;
    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: auto;
    max-width: 680px;
    margin: 0 auto;
}

#grid td 
{
    position: relative;
    width: 100px;
    max-width: 100px;
    height: 100px;
    max-height: 100px;
    border: 1px solid black;
    text-align: center;
    cursor: pointer;
    padding: 0;
    border-collapse: collapse;
    white-space:nowrap;
    overflow: hidden;
    background-clip: padding-box;
}

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

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

#grid .block
{
    background: #000;
}

#grid td:focus
{
    outline: none;
    background: #96B9D0;
}

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

.selected
{
    background: #F1F0E8;
}

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

.definicion_caja
{
    background-color: #daeaf0;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 0 1rem;
    margin-bottom: 1px;
    height: 65px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    line-height: 17px;
}

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

#definicion_control
{
    background-color: #daeaf0;
    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: #000;
    color: #fff;
    padding: 10px 0;
    font-size: 20px;
    text-align: center;
    display: flex;
    margin: 2px auto;
}

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

.options > div.timer
{
    flex-grow: 2;
    font-size: 20px;
}

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


.options_mobile
{
    display: none;
}

@media (orientation: portrait) {
    .options_mobile
    {
        display: flex;
    }

    .crucigrama_container
    {
        padding: 0;
    }
}

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

}

.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,iVBORw0KGgoAAAANSUhEUgAAAJUAAABfCAYAAADh0YWdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAB4JJREFUeNrsnXuoVFUUxtek9tDsYWKpmWgPTbKy0kIrweqG2IPMR6aESYEhZQWBhRJYGZRYqJFUFvaXRQS9qOhhRUaUUlL2UsooNbu3d9nD8rY+zpkazqw9zhzPnMfs74PvH525c+bs35yz91prr1Pq7OwUikpSJUJFESqKUFGEiqKaB1WpVMrbsU5T36juo/5HzV9Dipyou6g3qecpM+tqvhpQWc6ZrlB/F4JEZ+u3XMyUXYQr1QT1CvWRvGDkQu3KTJ8i3/5Gq1eqh3Isc6Ptyky/okJ1gvph9cjIv28Ir1w71ftwjJumv9W71VPV49Xd6oUqr3OqAeqXjPv5ZvUIjneqWhD+gMtjsG1Pc6o8QtVbvdoA6hv1OI5x6lqo/r3IUB2kXm4A9bN6CseXUDWq/cNLbRSoP9VzOLaEqlF1Vc+W/4OalV5YMUmkCFVdwjJzovpXAyis8rpzXAlVoxqr3mEA9YS6F8eUUMWJRW02gFqj7s/xJFSNaqB6vQHU+8IIOqGKoUMkCG7ujgC1RT2K40ioGtW+EgQ3oyu9DgnSARShalhL1X9FgPpFgvIWilA1rPnq36Q6uHkTx45QxRGCmz9GgMIt8G6OG6GKo0vV242VHkpbunLcCFWjOlv9uQHUUxIkkClC1ZBODuNOUaDeEJYHE6oYOkb9ugHUh+rhHCtC1aj6qp80gPpaglxfXoWgbJsEJcxdcnA8B6rPU49R7+czVBiYhwygsPKbmGOgkDZ6LTzWXerF6h4ZHs8g9QsV5++ejI4nc6gOUN9hAIVg59U5Bgr1WnON435QfXAGx4Pc59uRY8G+x9G+QYWBuV7sDYg3S753vuDYZqj/MI59lfqwFI8FlRvrjOP4VH2ST1CVB2W3cTKWSJDvy7t6SpBCsn4UqO06IoVjOC1cyEQ/H4M6M6N5XiZQoXITieCfHL/yngVa6WDOcpcDrOeaHAbBZHyT8bmoiJ0enmdvJupnqL9yDEKfAi6hsQHjNgdYr6qPasJnjnWcw3b1JN9CCsc5Ltdr1UcXODaD2/k8CZLdVQ0qwhhcEsLV53yxU1hb1Rf4FqdCLMoKbm5Un9oigb+5Ym/IeE89LAGgLlH/YPx9pLXysnE2Nah6hJPXaKHdl2GwrpV0jVRXV8Af7+Vq7HIHsFjlnZmj758aVCvCAGE0jtKqu4ix8upwAHB6jL93pQS7rqN/7wOpbkjiBVTRDykveVt9F/FkCfo5REHYIkElRr2a47hCrQtjVOIbVNdJUPpbeTLQcuZW8UOYOO9wTKrb6ng/Klx3Gu9/J8HJf6Ggmi52i8Rlkl2yMwud61j+A7aLa7xvvgMoLHYG5vj7Ng2qNseJxK4YHwvtxohdeAiwphmrvDulOgWE7MOL6sNz/l2bAtWocKUTPYGvqPuJvzolnKhHz8v36qvC1yA9tTScIliVr4cW4HsmDtUQqc6Wl+M0xwp1Yrhisxq0XStBucou4/8fKwhQiUOFPNfzjtXOSPL0n44Xu6rA5Uckm3KaXEC1yjghHXWucnzTYPWbdQB1n2Rb+Jc5VFa2fBL5cQqlMc/WAGqRFLPXVsNQsWV0csIqr9b59Odc8/aXiFCRsbaO29/9vt/+OFGvT8ManKg/KsHmEC+hYkhhz8Jm2Y3G+UF9FHJ8SxwhhcelOK0nGfxMUagnt8p/kcqaFb4Gm0HuFTv4+XRBwGKaJiWh3ukLsdM0U43XY+VnpWnQTbCvr1BBTCgHQhHiVrGj6BfWeJ8roYz41iBfoYJ8L325SP2t2Nv566l4dZW+vJvjOSqL9JqoqWLXUuE2mESRHjo1D/cVKsi3cuJZjlv/JzHDK65y4o2Sv+7M3PjQBOHKYm2U/UiCKoW4cm18+Ex9lo9QifixResGqW58W75V7e0DBPa0RescH6GChjiCf0XfTIqeBbdIdWvu8mptcEKfU2sz6bZwYeAdVFArbnu/XewUy8vSnH4Krm3vmMdN9hGqVmrQgc51ix1APSPZNOjA7XeGeNagA2qFVkLIDCxzAIVcXRobFFythBCNnyketRIqi03PkhGbnkWE9oyLpHXaMz4gbM/IRrJ7IWzoXCP5aiRbWc/mbSPZyhgWW14ns3Bgy+sKsTl/a4iPEaFaHyqIDzwiVHw0G1UMqCA+RJJQNUV83C2haor4YG5ClbiQB1wt1QV+2P08nmNIqOIKQUZsT4omoLdI/sppCVVBoIKQFllvrAgR1xrKsSRUcYWM/GYDLOTg+nM8CVVcIRdobX3CxopeHFNCFUeoaET1grWzBFvBunNcCVUcIao+21gRdoZfqhvHllDFETYcLDCgQnB0DseWUMUVEszLDbCwm3cKx5dQxVVvCYKjVleVcRxjQhVXAyQIjkbBQvhhBMc5VWFKsrMRqEougEqlUtZfBjEslMZEG2BsCFeF+KLsrtw8oUUUMh7odjO+YrG0XZmp2UExz1BB2D2yUhhhz5MKDxU0Ibwysfw4H2pXZmq3M8jpnCoqlMVY/aHo9L22yHOqqC6ToLUPHtdRDpJS6aj8NAv0epinzKyPdfujqNgEEiqKUFGEivJP/wowAM5wfbujgTZPAAAAAElFTkSuQmCC);
        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: 100px;
        max-width: 100px;
        height: 100px;
        max-height: 100px;
        border: 1px solid black;
        text-align: center;
        cursor: pointer;
        padding: 0;
        border-collapse: collapse;
        white-space:nowrap;
        overflow: hidden;
    }

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

    .definiciones_content
    {
    }
 }

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

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

@media (max-width: 575px) {

    #grid .number 
    {
        font-size: 7px;
        margin-top: -0.4rem;
        margin-left: 0.2rem;
    }

    .definicion_caja
    {
        font-size: 14px;
    }
}


#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;
      }
}

.modal-header .close {
    margin-top: -21px;
}

.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;
}

@-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: 991px) {
    #definicion_focused
    {
        display: none;
    }

 
}