/*
    nonogram "default" theme styles
*/

.nonogram-button {
    border-radius: 0;
    background-color: #485160;
    border: 2px solid #485160;
    vertical-align: middle;
    margin-bottom: 0;
    font-weight: normal;
    font-size: 1.2em;
    color: #fff;
    padding: 0.3em 0.5em;
    cursor: pointer;
    text-transform: lowercase;
}

.nonogram-button.icon {
    padding-left: 2em;
    background-size: auto 50%;
    background-position: 0.6em 50%;
    background-repeat: no-repeat;
}

.nonogram-button:hover {
    background-color: #57606f;
}

.nonogram-switch {
    background: #ddd;
    width: 100px;
    height: 36px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.nonogram-switch .nonogram-switch-paddle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    height: 100%;
    padding: 0 10px;
    cursor: pointer;
}

.nonogram-switch .nonogram-switch-paddle:before {
    content: '';
    width: 28px;
    height: calc(100% - 8px);
    position: absolute;
    left: 4px;
    background: #485160;
    transition: left 0.2s ease;
}

.nonogram-switch .nonogram-switch-paddle.on:before {
    left: calc(100% - 32px);
}

.nonogram-switch .nonogram-switch-paddle span {
    transition: opacity 0.3s;
}

.nonogram-switch .nonogram-switch-paddle .active {
    opacity: 1;
}

.nonogram-switch .nonogram-switch-paddle .inactive {
    opacity: 0;
}

.nonogram-switch .nonogram-switch-input {
    display: none;
}


/*
    template: controls-game.html
*/

[data-nonogram-game-controls] {
    padding: 0 0 20px 0;
}

[data-nonogram-game-controls] .fill-type {
    display: flex;
    justify-content: center;
}

[data-nonogram-game-controls] .shortcuts {
    text-align: center;
    font-size: 0.8em;
    margin: 10px 0;
    color: #aaa;
}


/*
    template: controls-generate.html
*/

.nonogram-generate-controls legend {
    margin: 0 0 5px 0;
}

.nonogram-generate-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.nonogram-generate-controls > * {
    margin: 0 20px 10px 0;
}

.nonogram-generate-controls > :last-child {
    margin-right: 0;
}

.nonogram-generate-controls select {
    width: 100%;
}

.nonogram-generate-controls input,
.nonogram-generate-controls select.width, .nonogram-generate-controls select.height {
    width: auto;
}

label.x {
    line-height: 30px;
}

.nonogram-button.generate {
    margin-left: 12px;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='55px' height='49.107px' viewBox='0 0 55 49.107' enable-background='new 0 0 55 49.107' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M20.441,13.781c-1.228,1.882-2.629,4.675-4.205,8.379c-0.45-0.921-0.829-1.663-1.135-2.225 c-0.307-0.563-0.721-1.212-1.243-1.949c-0.521-0.737-1.043-1.315-1.565-1.734c-0.521-0.419-1.166-0.777-1.934-1.074 c-0.767-0.297-1.601-0.445-2.501-0.445H0.982c-0.286,0-0.521-0.092-0.706-0.276S0,14.037,0,13.75V7.857 c0-0.287,0.092-0.522,0.276-0.706s0.419-0.276,0.706-0.276h6.875C12.973,6.875,17.167,9.177,20.441,13.781z M55,38.304 c0,0.286-0.092,0.521-0.276,0.706l-9.821,9.821c-0.185,0.185-0.42,0.276-0.706,0.276c-0.266,0-0.496-0.098-0.69-0.292 s-0.292-0.424-0.292-0.69v-5.893c-0.654,0-1.524,0.005-2.608,0.016c-1.084,0.01-1.913,0.021-2.486,0.03 c-0.572,0.01-1.319,0-2.24-0.03c-0.921-0.031-1.647-0.082-2.179-0.154c-0.532-0.071-1.188-0.179-1.965-0.322 c-0.777-0.143-1.422-0.332-1.934-0.567s-1.104-0.527-1.78-0.875s-1.279-0.757-1.811-1.228c-0.532-0.471-1.095-1.018-1.688-1.642 s-1.167-1.335-1.719-2.134c1.207-1.902,2.599-4.695,4.174-8.379c0.45,0.921,0.829,1.663,1.136,2.226 c0.307,0.563,0.721,1.212,1.243,1.949c0.522,0.736,1.044,1.314,1.565,1.733c0.522,0.42,1.167,0.778,1.934,1.074 c0.768,0.297,1.602,0.445,2.502,0.445h7.856v-5.893c0-0.286,0.093-0.521,0.276-0.706c0.185-0.185,0.42-0.276,0.706-0.276 c0.246,0,0.491,0.103,0.736,0.307l9.791,9.791C54.908,37.782,55,38.018,55,38.304z M55,10.804c0,0.287-0.092,0.522-0.276,0.706 l-9.821,9.821c-0.185,0.184-0.42,0.276-0.706,0.276c-0.266,0-0.496-0.097-0.69-0.292c-0.194-0.195-0.292-0.425-0.292-0.691v-5.893 h-7.856c-0.982,0-1.872,0.153-2.671,0.46c-0.798,0.307-1.504,0.767-2.117,1.381c-0.614,0.614-1.136,1.243-1.565,1.888 s-0.89,1.438-1.381,2.378c-0.655,1.269-1.453,3.018-2.394,5.248c-0.594,1.351-1.1,2.486-1.52,3.407s-0.972,1.995-1.657,3.223 s-1.34,2.251-1.964,3.069s-1.381,1.667-2.271,2.547s-1.811,1.581-2.763,2.103c-0.951,0.522-2.041,0.952-3.269,1.289 c-1.228,0.338-2.537,0.507-3.929,0.507H0.982c-0.286,0-0.521-0.092-0.706-0.276S0,41.536,0,41.25v-5.893 c0-0.286,0.092-0.521,0.276-0.706s0.419-0.276,0.706-0.276h6.875c0.982,0,1.873-0.153,2.67-0.46 c0.798-0.308,1.504-0.768,2.118-1.382c0.614-0.613,1.136-1.242,1.565-1.887s0.89-1.438,1.381-2.379 c0.655-1.269,1.453-3.018,2.394-5.249c0.594-1.35,1.1-2.486,1.52-3.407s0.972-1.995,1.657-3.223s1.34-2.251,1.964-3.069 s1.381-1.667,2.271-2.547s1.811-1.581,2.762-2.103c0.952-0.521,2.042-0.951,3.269-1.289c1.228-0.337,2.537-0.506,3.929-0.506h7.856 V0.982c0-0.287,0.093-0.522,0.276-0.706C43.675,0.092,43.91,0,44.196,0c0.246,0,0.491,0.103,0.736,0.307l9.791,9.791 C54.908,10.282,55,10.517,55,10.804z'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.nonogram-button.reset {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='37.104px' height='42.054px' viewBox='0 0 37.104 42.054' enable-background='new 0 0 37.104 42.054' xml:space='preserve'%3E%3Cpath fill='%23fff' d='M37.104,24.514c0-9.765-8.924-17.71-17.939-17.71l-8.273,0.012V0.984c0-0.267,0.375-0.497,0.182-0.692 C10.877,0.098,10.882,0,10.616,0c-0.287,0-0.402,0.093-0.589,0.277l-9.78,9.839C0.063,10.301,0,10.537,0,10.824 s0.106,0.523,0.292,0.707l9.815,9.809c0.246,0.204,0.495,0.308,0.742,0.308c0.287,0,0.051-0.093,0.235-0.277 c0.185-0.184-0.194-0.42-0.194-0.707v-5.978l8.279-0.009c5.008,0,9.955,4.501,9.955,9.926c0,5.426-4.714,9.926-9.722,9.926h-7.078 c-0.286,0-0.747,0.006-0.933,0.189c-0.182,0.186-0.502,0.333-0.502,0.619v5.903c0,0.287,0.32,0.343,0.502,0.528 c0.186,0.186,0.562,0.286,0.848,0.286l7.102-0.011C28.391,42.042,37.104,34.278,37.104,24.514z'/%3E%3C/svg%3E%0A");
}

.nonogram-button.solve {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='31.104px' height='47.656px' viewBox='0 0 31.104 47.656' enable-background='new 0 0 31.104 47.656' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M17.4,38.656h-3.627c-0.723,0-1.648,0.002-2.17,0.523c-0.52,0.52-1.063,0.904-1.063,1.627v3.627 c0,0.724,0.543,1.645,1.063,2.161c0.52,0.522,1.446,1.062,2.17,1.062H17.4c0.722,0,1.602-0.539,2.123-1.061 c0.52-0.52,1.018-1.441,1.018-2.162v-3.627c0-0.722-0.498-1.105-1.02-1.629C18.998,38.658,18.122,38.656,17.4,38.656z'/%3E%3Cpath fill='%23fff' d='M29.922,7.804c-0.78-1.606-1.884-3.001-3.281-4.147c-1.378-1.127-3.02-2.029-4.878-2.679 C19.904,0.329,17.859,0,15.682,0c-2.537,0-4.805,0.411-6.739,1.221C7.009,2.03,5.373,3.096,4.079,4.39 C2.786,5.683,1.795,7.137,1.134,8.71c-0.655,1.558-1.034,3.111-1.12,4.564c-0.076,0.686,0.167,1.276,0.687,1.758 c0.476,0.442,1.058,0.623,1.686,0.623h2.735c0.538,0,1.067-0.122,1.571-0.469c0.551-0.377,0.912-0.931,1.033-1.6 c0.534-2.21,1.495-3.802,2.857-4.759c1.394-0.98,3.108-1.47,5.099-1.47c1.004,0,1.996,0.141,2.943,0.411 c0.934,0.267,1.769,0.652,2.484,1.14c0.685,0.469,1.239,1.062,1.651,1.759c0.401,0.682,0.597,1.445,0.597,2.335 c0,1.132-0.244,2.122-0.726,2.94c-0.526,0.897-1.202,1.763-2.011,2.571c-0.843,0.842-1.761,1.677-2.732,2.484 c-1.031,0.854-2.009,1.799-2.904,2.806c-0.931,1.043-2.299,2.249-2.91,3.584c-0.627,1.375-1.533,3-1.533,4.828v1.336 c0,0.726,0.861,1.584,1.381,2.102c0.52,0.521,1.764,1.002,2.487,1.002h2.354c0.722,0,1.419-0.48,1.941-1 c0.52-0.521,0.836-1.38,0.836-2.104v-0.89c0-1.269,0.208-2.362,0.695-3.25c0.527-0.955,1.181-1.845,1.98-2.645 c0.846-0.847,1.755-1.682,2.721-2.483c1.032-0.857,2.004-1.801,2.9-2.806c0.932-1.047,1.711-2.253,2.319-3.583 c0.629-1.373,0.947-3.019,0.947-4.893C31.104,11.167,30.706,9.417,29.922,7.804z'/%3E%3C/g%3E%3C/svg%3E%0A");
}


/*
    template: console.html
*/

.nonogram-console {
    background: #eee;
    padding: 20px;
}

.nonogram-console h2 {
    margin: -20px -20px 20px;
    padding: 5px 20px;
    background: #ddd;
}

.nonogram-console code {
    display: block;
    font-family: 'Fira Code Retina', 'Fira Code', 'Courier New', monospace;
    font-size: 12px;
    line-height: 12px;
    margin: 0 0 5px 0;
}

.nonogram-console code:before {
    content: '> '; color: #aaa;
}


/*
    template: puzzle-grid.html
*/

[data-nonogram-puzzle-grid] {
    transition: scale 0.5s ease;
}

table.nonogram-puzzle-grid {
    position: relative;
    width: auto;
    table-layout: fixed;
    transition: transform 1s ease;
    margin: 0 auto;
}

table.nonogram-puzzle-grid:after {
    transition: opacity;
}

table.nonogram-puzzle-grid th {
    max-width: 100px;
    max-height: 100px;
    transition: max-width 0.5s ease, max-height 0.5s ease, padding 0.5s ease;
}

table.nonogram-puzzle-grid tbody {
    border: none;
}

table.nonogram-puzzle-grid td {
    vertical-align: middle;
    padding: 0;
    border: 0;
    border-radius: 0;
}

table.nonogram-puzzle-grid td .fill {
    border: 2px solid #ccc;
    text-align: center;
    border-radius: 10px;
    background-color: #fff;
    transition: border-width 0.5s ease, border-color 0.5s ease, background-color 0.5s ease;
}

table.nonogram-puzzle-grid td.flippable .fill {
    transition: transform 0.3s ease;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
}

table.nonogram-puzzle-grid td.flippable.flipped .fill {
    transform: rotateY(180deg);
}

table.nonogram-puzzle-grid td.highlight .fill {
    opacity: 0.5;
}

table.nonogram-puzzle-grid td.preview {
    padding: 10px;
    transition: opacity 1s ease;
}

table.nonogram-puzzle-grid td.puzzle-cell {
    background: #ccc;
}

table.nonogram-puzzle-grid td.puzzle-cell.playable {
    cursor: pointer;
}

table.nonogram-puzzle-grid .fill {
    min-width: 30px;
    min-height: 30px;
    padding: 5px;
}

table.nonogram-puzzle-grid.tiny .fill {
    min-width: 10px;
    min-height: 10px;
    border-radius: 5px;
}

table.nonogram-puzzle-grid.small .fill {
    min-width: 20px;
    min-height: 20px;
}

table.nonogram-puzzle-grid.medium .fill {
    min-width: 30px;
    min-height: 30px;
}

table.nonogram-puzzle-grid.large .fill {
    min-width: 50px;
    min-height: 50px;
}

table.nonogram-puzzle-grid td.puzzle-cell .fill {}

table.nonogram-puzzle-grid td.puzzle-cell.user-positive .fill {
    background: #424242;
}

table.nonogram-puzzle-grid td.puzzle-cell.user-negative .fill,
table.nonogram-puzzle-grid td.puzzle-cell.solution-negative .fill {
    background-color: #fff;
    background-size: 100% auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'%3E%3Cpolygon fill='%23ACACAC' points='26.104,9.521 22.479,5.897 16,12.376 9.522,5.897 5.896,9.522 12.375,16 5.898,22.478 9.522,26.103 16,19.625 22.479,26.103 26.103,22.478 19.625,16 '/%3E%3C/svg%3E%0A");
}

table.nonogram-puzzle-grid .hint {
    vertical-align: bottom;
    transition: opacity 1s ease;
    background-color: #fff;
    color: #444;
    border: 2px solid #fff;
    border-radius: 10px;
}

table.nonogram-puzzle-grid.tiny .hint {
    font-size: 10px;
    letter-spacing: -2px;
}

table.nonogram-puzzle-grid.large .hint {
    font-size: 20px;
    line-height: 25px;
}

table.nonogram-puzzle-grid .hint {
    font-size: 14px;
    line-height: 23px;
}

table.nonogram-puzzle-grid .hint .fill {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

table.nonogram-puzzle-grid.tiny .hint .fill {
    padding: 1px;
}

table.nonogram-puzzle-grid .hint.top .fill {
    flex-direction: column;
}

table.nonogram-puzzle-grid .hint.top {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

table.nonogram-puzzle-grid .hint.left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

table.nonogram-puzzle-grid .hint.left .fill {
    padding-right: 10px;
}
table.nonogram-puzzle-grid .hint.left span {
    margin: 0 0 0 5px;
}
table.nonogram-puzzle-grid td.row-column-highlight:not(.user-positive):not(.solution-positive) .fill {
    background-color: #ddeef7;
}

/* solved */

table.nonogram-puzzle-grid.solved {
    transform: scale(0.9, 0.9);
}

table.nonogram-puzzle-grid.solved .preview { opacity: 0; }

table.nonogram-puzzle-grid.solved td.puzzle-cell {
    background-color: #fff;
}

table.nonogram-puzzle-grid.solved td.puzzle-cell .fill {
    border-radius: 0;
    transform: rotateY(180deg);
}

table.nonogram-puzzle-grid.solved td.puzzle-cell.solution-positive .fill,
table.nonogram-puzzle-grid.solved td.puzzle-cell.user-positive:not(.solution-negative) .fill {
    background-color: #73ba6c;
    border-color: #68af61;
    background-image: none;
}

table.nonogram-puzzle-grid.solved td.puzzle-cell.solution-negative .fill,
table.nonogram-puzzle-grid.solved td.puzzle-cell.user-negative:not(.solution-positive),
table.nonogram-puzzle-grid.solved td.puzzle-cell:not(.solution-positive):not(.solution-negative):not(.user-positive) {
    opacity: 0.2;
}


table.nonogram-puzzle-grid.solved .hint {
    opacity: 0;
}

table.nonogram-puzzle-grid.solved th {
    padding: 0;
    max-width: 0;
    max-height: 0;
}

[data-nonogram-puzzle-grid-solved] {
    color: #73ba6c;
    text-align: center;
    line-height: 2em;
    font-size: 1.5em;
}


/*
    template: preview-grid.html
*/

[data-nonogram-preview-grid-container] {
    vertical-align: middle;
    padding: 5px;
}

[data-nonogram-preview-canvas] {
    background: #eee;
}

footer{
            text-align: center;
            padding: 14px;
            font-size: 10pt;
        }