/*.table-responsive {*/
    /*overflow-x: auto;*/
/*}*/

.puzzle-wrapper table {
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
}

.puzzle-wrapper table tr{
    width: 100%;
}

.puzzle-wrapper {
    /*display: inline-block*/
}

.puzzle-wrapper table td {
    width: 42px;
    height: 42px;
    /*height: 5em;*/
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    position: relative;
}

.puzzle-wrapper td input {
    width: 97%;
    height: 97%;
    padding: 0;
    border: 1px solid #cdcdcd;
    text-align: center;
    color: #555;
    -webkit-appearance: none;
    border: 1px solid #AAA;
}

.puzzle-wrapper td input:focus {
    background-color: #fff;
}

.puzzle-wrapper td span {
    color: #444;
    font-size: 0.8em !important;
    position: absolute;
    top: 5px;
    text-shadow: -1px 1px 1px rgba(0,0,0,0.2);
}

.puzzle-wrapper input.done {
    /*font-weight: bold;*/
    /*color: #4faf5a;*/
    background-color: #c4e6b7;
}

.active, .clues-active {
    background-color: rgba(174, 213, 232, 0.61);
}
.clue-done {
    color: #999;
    text-decoration: line-through;
    background-color: rgb(186, 226, 188);
}

.puzzle-wrapper {
    padding: 1em;
    /*font: 62.5%/1.3em Helvetica, sans-serif;*/
    /*float: left;*/
    /*width: 54%;*/
    /*margin-right: 3%;*/
}
.puzzle-clues {
    /*float: left;*/
    /*width: 40%;*/
    text-align: center;
}

.puzzle-clues img{
    /*font-size: 1.2em;*/
    padding: 0.3em;
    max-height: 8em;
    margin: 0.2em;
}

#right-vote { color: #ff7878; }
#down-vote { color: #91c6ff; }

.cw-arrows {
    border-bottom: 1px solid rgb(177, 192, 200);
    color: #383838;
    margin: 0 auto;
    max-width: 10em;
    padding-bottom: 4px;
}

.cw-clue-wrapper {
    display: inline-block;
    position: relative;
}

.cw-clue-wrapper .small-jiggle {
    max-width: 2em !important;
    background-color: unset;
}

.cw-clue {
    cursor: pointer;
}

.cw-img {
    display: inline-block !important;
}

.cw-text {
    display: inline-block !important;
    margin: 0.5em 0;
    padding: 0.1em 0.5em;
    border-radius: 3px;
}

.cw-clue-number {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0.5em;
    padding: 0.1em 0.5em;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 1.2em;
    border-radius: 100%;
    box-shadow: 0 1px 3px rgb(154, 154, 154);
}

.cw-options-wrapper {
    text-align: center;
    margin-top: 1em;
}

.cw-char-wrapper {}

.cw-answer-option {
    margin: 0.1em 0.2em;
    padding: 0.2em 0.5em;
    background: #f0f0f0;
    border-radius: 4px;
}


@media (min-width: 768px) {
    .puzzle-wrapper{
        max-width: 30em;
    }

    .puzzle-wrapper td input {
        font-size: 1.85em !important;
    }
}

@media (min-width: 992px) {
    .puzzle-wrapper{
        max-width: 35em;
    }

}

/* MOBILE */


@media (max-width: 767px) {
    .puzzle-clues {
        float: none;
    }

    .puzzle-wrapper table td {
        width: auto;
    }

    .puzzle-wrapper {
        padding: 3px 1em;
        max-width: 25em;
        margin: 0 auto;
        float: none;
    }

    .puzzle-wrapper td input {
        font-size: 1.75em !important;
    }

    .puzzle-clues div {  padding: 1px; }

    .puzzle-clues img {
        margin: 0em;
        padding: 0.05em;
        max-height: 6em;
    }
    .cw-clue-number { margin: 0.25em;  }

    .cw-arrows { max-width: 6em; }
}