#container #content {background:none}
#container #footer {position:relative}
#container #content div.stats-column {bottom:0}
#container #content-box {padding-left:36px;padding-right:10px}
h3 {margin-bottom:6px}
.word-separator {height:10px}
.word-item {height:32px;margin:0;padding:0;border:solid 1px orange;border-radius:3px;position:relative}
.word-item span.word-letter {display:inline-block;width:28px;margin:2px 0 0 0;border:solid 1px orange;background:#fff;text-align:center;font-family:verdana;font-size:18px;font-weight:600;cursor:pointer}
.word-item span.word-letter.first {border-left-width:2px;margin-left:24px}
.word-item span.word-letter:last-child {border-right-width:2px}
.word-item span.word-letter.selected {background:yellow}
#content-box.hide-solution .word-item span.word-letter.selected {background:#fff}
.word-item span.word-letter.edited {background:#ffaa00;border-color:#000}
.word-item.error span.word-letter {background:#f00;border-color:#fff}
.word-item span.word-letter.visibility_hidden {visibility:hidden}
.word-item a.number {display:block;position:absolute;font-weight:600;font-size:10px;color:#000;left:2px}
.question a.sentence {color:#000;text-decoration:none}
.question.strike_through a.sentence {text-decoration:line-through}
input.rev-answer {border:solid 1px #000;border-radius:4px}
input.error {background:#f00;color:#fff}

#virtual-keyboard {display:none;position:absolute;width:420px;height:297px;border:solid 1px #333;border-radius:4px;background:#dfe083 url(/szkola/assets/img/pencil.png) no-repeat 290px 40px;z-index:100;box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.8)}
#virtual-keyboard a.letter {display:block;width:40px;height:40px;line-height:40px;font-weight:600;font-size:18px;color:#000;text-decoration:none;text-align:center;float:left}
#virtual-keyboard a.letter:hover {border:solid 1px #000}
#virtual-keyboard .row {display:block;width:100%;height:30px;line-height:30px;text-align:center;font-weight:600;font-size:12px;color:#000;background:#ff9600}
#virtual-keyboard .word {margin-bottom:5px;color:#000;padding-left:10px}
#virtual-keyboard #input-word {width:200px;font-weight:bold;text-transform:uppercase}
#virtual-keyboard .close {text-decoration:none;position:absolute;left:0;right:0;bottom:0}


.word-item.ui-state-highlight span.word-letter {border-top:solid 1px #090;border-bottom:solid 1px #090;border-left:solid 1px #090;border-right:solid 1px #090}

.exercise-link {display:none;}
.exercise-link a.link {color:#333;background:yellow;display:inline-block;margin-top:5px;margin-left:20px;padding:4px}

#btn_check, #btn_clear {float:left;margin-right:10px;margin-bottom:10px}

.icon-hint-for-question {position:relative;top:4px;margin-left:4px;display:inline-block;width:18px;height:18px;background:url('/img/file_sprite.png') no-repeat 0 -18px}
#hint-div {display:none;position:absolute;width:350px;color:#333;background:#fefefe;border:solid 2px orange;border-radius:5px;padding:8px;line-height:22px}
#hint-div img {display:inline-block;margin-right:0px}


#instruction {position:absolute;width:530px;right:30px;top:65px;font-size:12px;font-weight:600}
.word-item {cursor:pointer}

.word-item span.word-letter {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height:24px;
}

#instruction p {margin-bottom:8px;font-size:10px}

#action-panel {margin-bottom:15px;margin-top:15px}
#action-panel div {padding:3px 0}
#action-panel label {display:inline-block;width:100px}
#action-panel .control {width:300px}
#action-panel #edt_add_word {width:300px}

#action-panel #print-form {display:inline-block}
#action-panel #save-read {margin-left:105px;line-height:30px}

.word-item {width:520px}
.word-item.ui-state-highlight span.word-letter {border-top:solid 1px #090;border-bottom:solid 1px #090;border-left:solid 1px #090;border-right:solid 1px #090}


.solution-dragbar {padding-left:25px}
.solution-thumb {display:inline-block;width:28px;height:28px;border:solid 1px orange;border-radius:8px;cursor:pointer}
.solution-thumb.selected {background-color:#ff0}

.answers-container {width:50%;float:left}
.questions-container {width:50%;float:left}
.questions-container .question {height:32px;padding-top:4px}
.questions-container .question div.control {display:inline-block;width:85%}
.questions-container .question input[type="text"] {width:100%}

.icons {position:relative;display:inline-block;width:63px;height:18px}
.icons > div {cursor:pointer}
.icon-edit {position:absolute;left:0;top:4px;display:inline-block;width:18px;height:18px;background:url('/img/file_sprite.png') no-repeat -326px 0}
.icon-hint {position:absolute;left:21px;top:4px;display:inline-block;width:18px;height:18px;background:url('/img/file_sprite.png') no-repeat 0 -18px}
.icon-remove {position:absolute;left:42px;top:6px;display:inline-block;width:18px;height:18px;background:url('/img/clear-red.png') no-repeat left top}

div.word-separator {background:orange;border-radius:4px;height:32px}
div.word-separator .icon-edit {top:1px}
div.word-separator .icon-remove {top:3px}

div#edit-word-div {display:none;position:absolute;width:300px;background:#fff;border:solid 2px orange;border-radius:5px;padding:8px}
div#edit-word-div div.data {margin-bottom:10px}
div#edit-word-div div.actions {text-align:center;margin-bottom:4px}
div#edit-word-div #input-word {width:175px;height:25px}
div#edit-word-div #apply-word {width:75px;height:25px}
div#edit-word-div #cancel {width:75px;height:25px}

div#read-crossword {display:none;position:absolute;width:500px;background:#fff;border:solid 2px orange;border-radius:5px;padding:8px;overflow:auto}
div#read-crossword .data {margin:10px 0 15px 0}
div#read-crossword .data input {width:420px}
div#read-crossword #tree {max-height:300px;overflow:auto}
div#read-crossword .action {margin:10px 0 5px 0;text-align:center}

div#create-competition {display:none;position:absolute;width:500px;background:#fff;border:solid 2px orange;border-radius:5px;padding:8px;overflow:auto}
div#create-competition .data {margin:10px 0 15px 0}
div#create-competition .data input {width:420px}
div#create-competition .action {margin:10px 0 5px 0;text-align:center}

div#show-competitions {display:none;position:absolute;width:800px;background:#fff;border:solid 2px orange;border-radius:5px;padding:8px;overflow:auto}
div#show-competitions .data {width:100%;display:grid;grid-template-columns:repeat(5, 1fr);margin:10px 0 15px 0;max-height:500px;overflow: auto;}
div#show-competitions .data > span {padding:5px 5px;border-bottom:1px solid #ccc}
div#show-competitions .data input {min-width:75px;display:inline-block;padding:4px 8px}
div#show-competitions .action {margin:10px 0 5px 0;text-align:center}

div#edit-hint-div {display:none;position:absolute;width:350px;background:#fff;border:solid 2px orange;border-radius:5px;padding:8px}
div#edit-hint-div textarea {width:100%;height:125px;padding:5px}
div#edit-hint-div .data .label {display:block;margin-bottom:10px}

#action-panel .crossword-types {width:500px;margin-bottom:15px}
#action-panel .crossword-types a {display:inline-block;background:#123456;border-radius:10px;font-size:16px;padding:15px 20px}
#action-panel .crossword-types a:hover {text-decoration:none;color:#ff0;background:#345678}
#action-panel .crossword-types a.active {background:#345678;border:solid 4px #f90}
input.vh-word {display:inline-block;margin-bottom:5px;width:150px}
input.vh-question {display:inline-block;margin-bottom:5px;width:calc(100% - 250px)}
.words-for-vhcrossword {display:none;margin-bottom:15px}
.words-for-vhcrossword .items {margin-bottom:10px}

.words-for-vhcrossword .headers span {font-weight:600;text-transform:uppercase}
.words-for-vhcrossword .headers .header-lp {text-align:right}
.words-for-vhcrossword .headers .header-word {margin-left:18px}
.words-for-vhcrossword .headers .header-question {margin-left:100px}

.print-colors {display:flex;align-items:center;margin:7px 0}
.print-colors .ColorPickerDiv {display:flex;align-items:center}
.print-colors .color-preview {display:inline-block;margin:2px 5px 0 0;width:70px;height:20px}
.print-colors .spn-color-preview {display:inline-block;margin:2px 0 0 5px;background-color:#fff;border:solid 1px #aaa;border-right:none;width:20px;height:20px}
.print-colors input[type="button"] {padding: 2px 8px}

* {box-sizing:border-box}
.crossword-container {position:relative}
.crossword-container .crossword-row {width:700px;height:35px;clear:both}
.crossword-container .crossword-row .crossword-cell {width:35px;height:35px;float:left;border-right:solid 1px #000;border-bottom:solid 1px #000;font-size:22px;font-weight:600;text-align:center;font-family:Arial;padding:10px 4px 4px 4px;background-color:RGBA(255, 255, 0, 0.1);text-transform:uppercase}
.crossword-container .crossword-row .crossword-cell:first-child {border-left:solid 1px #000}
.crossword-container .crossword-row .crossword-cell:last-child {border-right:solid 1px #000}
.crossword-container .crossword-row:first-child .crossword-cell {border-top:solid 1px #000}
.crossword-container .crossword-row:last-child .crossword-cell {border-bottom:solid 1px #000}

.crossword-container .crossword-row .crossword-cell.letter {background-color:#ff0}
.crossword-container .crossword-row .crossword-cell.solution-letter {background-color:#f90}
.crossword-container .crossword-row .crossword-cell.found {background-color:#fff}
.crossword-container .crossword-row .crossword-cell.error-letter {background-color:#f00}

.crossword-container .number {position:absolute;left:0;top:0;display:inline-block;font-weight:600;font-size:10px}
.crossword-container .solution-number {color:#333}
.crossword-container .vertical-number {color:#00f}
.crossword-container .horizontal-number {color:#090}