/**login start**/

.page-id-2 .entry-header {
    max-width: 400px;
    margin: 0 auto;
    padding-top: 100px;
}

.cleanlogin-container {
    margin: 0 auto;
    max-width: 400px;
    position: relative;
    overflow: hidden;
    padding: 15px 0;
    -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, .25);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, .25);
    border-radius: 5px;
    border: 0px solid #ddd;
}

.cleanlogin-field[type=submit] {
    border: 1px solid #a6ce39;
    background: #a6ce39;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px !important;
    display: block;
    height: auto !important;
    max-height: auto;
}

.cleanlogin-container fieldset:first-child .cleanlogin-field input {
    border: 1px solid #bfbfbf;
    padding: 10px 10px 10px 35px !important;
    background-position: 0px 3px !important;
    display: block;
    height: auto !important;
    max-height: auto;
}

/**login end**/

button#start {
    display: block;
    margin: 0 auto;
    border: 1px solid #c30954;
    background: #e60c63;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 40px;
    padding: 10px 40px !important;
    cursor: pointer;
}

#letsgo {
    display: inline-block;
    margin: 0 auto;
    border: 1px solid #c30954;
    background: #e60c63;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 40px;
    padding: 10px 40px !important;
    cursor: pointer;
}

#done {
    display: none;
}

#quiz #score {
    font-weight: bold;
    font-size: 22px;
    position: absolute;
    top: 30px;
}

#quiz #score:before {
    content: 'Πόντοι: '
}

#quiz .question .counter {
    position: absolute;
    top: 30px;
    right: 0;
    font-weight: bold;
    font-size: 22px;
}

#quiz {
    position: relative;
    text-align: center;
    padding-top: 100px;
}

#quiz .question {
    display: block;
    /* position: absolute; */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
}

.question h3 {
    position: relative;
    display: block;
    margin-bottom: 35px;
}

.question h3 .progressbar {
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    display: block;
    height: 5px;
    background: #f1f1f1;
}

.puzzle {
    position: relative
}

.puzzle .progressbar {
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    display: block;
    height: 5px;
    background: #f1f1f1;
}

#cw.progressbar {
    position: relative;
    margin: 100px auto 0;
    width: 800px;
    display: block;
    height: 5px;
    background: #f1f1f1;
}

#blanks .progressbar {
    margin: 100px auto !important;
}

#ws.progressbar {
    position: relative;
    margin: 50px auto;
    width: 800px;
    display: block;
    height: 5px;
    background: #f1f1f1;
}

#wm.progressbar {
    position: relative;
    margin: 50px auto;
    width: 1080px;
    max-width: 100%;
    display: block;
    height: 5px;
    background: #f1f1f1;
}

.notimer .progressbar {
    display: none;
    opacity: 0
}

#wm span,
#ws span,
#cw span,
.question h3 span,
.puzzle .progressbar span {
    position: absolute;
    bottom: 0px;
    left: 0;
    top: 0;
    width: 50%;
    display: block;
    background: #53e269;
}

#quiz ul {
    display: block;
    position: relative;
}

#quiz li {
    display: block;
    list-style: none;
    padding: 15px;
    background: #e6e6e6;
    margin-bottom: 25px;
    border: 1px solid #e6e6e6;
    transition: all cubic-bezier(0.03, 0.79, 0.58, 1) .25s;
}

#quiz.photo li {
    display: inline-block;
    list-style: none;
    padding: 15px;
    width: 32%;
    margin-right: 1%;
    margin-bottom: 25px;
    transition: all cubic-bezier(0.03, 0.79, 0.58, 1) .25s;
}

#quiz .correct {
    background: #00d253;
    border: 1px solid #019e3f;
    color: white;
}

#quiz .wrong {
    background: #d20000;
    border: 1px solid #9e0000;
    color: white;
}

#quiz .blocked {
    pointer-events: none;
}

/* crossword start */

.cwright {
    width: 856px;
    margin: 0 auto
}

#check {
    display: block;
    margin-top: 25px;
    padding: 10px 85px;
    text-transform: uppercase;
    border: 1px solid #c30954;
    background: #e60c63;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 40px;
    cursor: pointer;
    width: 300px;
}

.crossword {
    float: left;
    width: 520px;
    margin-right: 15px;
    /*    border: 1px solid #000;
    border-collapse: collapse;
    counter-reset: req;*/
    background-color: #ccc;
    border-collapse: separate;
    border-left: 1px solid #aaa;
    border-spacing: 0;
    border-top: 1px solid #aaa;
    counter-reset: req;
    /*     empty-cells: hide; */
}

.crossword caption h1 {
    display: inline;
    font-size: 2em;
    margin: 0;
    padding: 0;
}

.crossword caption h2 {
    display: inline;
    font-size: 1em;
    font-style: italic;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

.crossword td {
    /*    background-color: #000;
    border: 1px solid #000;
    height: 30px;
    padding: 6px;
    text-align:left;
    vertical-align:top;
    width: 30px;*/
    background-color: #FFF;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
    height: 20px;
    padding: 6px;
    text-align: left;
    vertical-align: top;
    width: 20px;
}

.crossword td:empty {
    background: #ccc;
}

/*.err:after {
    content: "!";
    color: #000;
    font-size: 10px;
    font-weight: bold;
    margin: 23px -5px 0 0;
    position: absolute;
}*/

.crossword td[id],
.crossword td[data-hor],
.crossword td[data-ver] {
    /*    background-color: #FFF;*/
}

.crossword td.sel {
    background-color: #FF9;
}

.crossword td.err {
    background-color: #ffdada;
}

.crossword td[id] {
    counter-increment: req;
}

.crossword td[id]:before {
    content: counter(req);
    font-size: 10px;
    margin: -5px;
    position: absolute;
}

.crossword td input {
    background-color: transparent;
    border: 0 none;
    font-size: 15px;
    height: 100%;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

#definitions {
    background-color: #f4f4f4;
    float: left;
    padding: 15px 0;
    margin: none;
    width: 300px;
    margin-bottom: 15px;
}

#definitions h3 {
    font-size: 1.5em;
    padding-left: 15px;
}

#definitions ul {
    background-color: #f4f4f4;
    padding: 0;
    list-style: none;
    margin: none;
}

#definitions li {
    padding: 5px 15px;
}

#definitions .pointer li {
    cursor: pointer;
}

#definitions .pointer li:hover {
    background-color: #e60c63;
    color: white;
}

#tooltip {
    background-color: #0FF;
    border: 2px solid #00F;
    color: #000;
    /*    cursor: move;*/
    display: none;
    opacity: 0.7;
    padding: 5px;
    position: absolute;
    width: 200px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

#create:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

#create fieldset {
    float: left;
    margin: 0;
    padding: 0;
}

/* crossword end */

/* puzzle start */

.welcome {
    font-size: 220%;
    margin: 2px;
    margin-bottom: 20px;
}

.explanation {
    margin: 5px;
}

.outer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    margin: 0px;
}

;
.inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    max-width: 900px;
    min-width: 300px;
    height: 100%;
    margin: 0px;
}

.intro {
    height: 150px;
    width: 100%;
    margin-top: 3%;
}

.level-container {
    margin-top: 8%;
}

.level-title {
    display: inline-block;
    font-weight: bold;
}

.game {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    margin: 0px;
    margin-top: 100px;
}

.puzzle {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    margin: 0px;
    background-color: #707070;
}

.puzzle-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    height: 150px;
    width: 450px;
    flex: 0 0 150px;
    margin: 0px;
}

.tile {
    position: relative;
    height: 150px;
    width: 150px;
    flex: 0 0 150px;
    margin: 0px;
    cursor: pointer;
}

.puzzle-row-0 .tile[tile-row="0"] {
    top: 0px !important;
}

.puzzle-row-0 .tile[tile-row="1"] {
    top: 150px !important;
}

.puzzle-row-0 .tile[tile-row="2"] {
    top: 300px !important;
}

.puzzle-row-1 .tile[tile-row="0"] {
    top: -150px !important;
}

.puzzle-row-1 .tile[tile-row="1"] {
    top: 0px !important;
}

.puzzle-row-1 .tile[tile-row="2"] {
    top: 150px !important;
}

.puzzle-row-2 .tile[tile-row="0"] {
    top: -300px !important;
}

.puzzle-row-2 .tile[tile-row="1"] {
    top: -150px !important;
}

.puzzle-row-2 .tile[tile-row="2"] {
    top: 0px !important;
}

[tile-col="0"]:first-child {
    left: 0px !important;
}

[tile-col="0"]:nth-child(2) {
    left: -150px !important;
}

[tile-col="0"]:last-child {
    left: -300px !important;
}

[tile-col="1"]:first-child {
    left: 150px !important;
}

[tile-col="1"]:nth-child(2) {
    left: 0px !important;
}

[tile-col="1"]:last-child {
    left: -150px !important;
}

[tile-col="2"]:first-child {
    left: 300px !important;
}

[tile-col="2"]:nth-child(2) {
    left: 150px !important;
}

[tile-col="2"]:last-child {
    left: 0px !important;
}

#move_count {
    font-size: 36px;
}

#emptytile {
    background-color: #707070;
}

.puzzledata {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    margin: 0px;
    margin-left: 10px;
}

.reset_container,
.move_container {
    text-align: center;
    font-weight: bold;
    height: 50%;
    width: 100%;
    margin: 0px;
    max-width: 140px;
}

.move_container span {
    width: 100%;
    display: flex;
    text-align: center;
}

#reset {
    cursor: pointer;
    padding: 10px;
    background-color: #e60c63;
    border-radius: 5px;
    color: white;
}

/* puzzle end */

/* fill in the blanks start */

/*
 CSS for Fill in the blank plugin
 Author: Yane Frenski
*/

/* styles for the draggable answers */

.quizy-fitb-answer {
    cursor: move;
    font-size: 18px;
    font-weight: normal;
    padding: 2px 0px;
    text-align: center;
    color: #fff;
    background: #000;
    position: relative;
    margin-top: 10px;
    margin-right: 10px;
    display: inline-block;
}

/* Droppable elements styles */

.quizy-fitb-droptarget {
    font-size: 19px;
    padding: 5px 15px 0;
}

.quizy-fitb-droptarget-hover {
    color: #000;
    background: #555;
}

.quizy-fitb-dropelement-disabled {
    color: #fff !important;
    cursor: default;
}

.quizy-fitb-dropelement.ui-draggable-dragging,
.ph-dropelement-inline.ui-draggable-dragging {
    background: #eee;
    color: #555;
}

/* results popups*/

.quizy-fitb-res {
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 10000;
    border: 1px solid #000;
    -moz-box-shadow: 2px 2px 2px #aaa;
    -webkit-box-shadow: 2px 2px 2px #aaa;
    box-shadow: 2px 2px 2px #aaa;
    zoom: 1;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.quizy-fitb-res-yes {
    background: #90aa11;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9d62d', endColorstr='#90aa11') progid:DXImageTransform.Microsoft.Shadow(color='#bbbbbb', Direction=135, Strength=3) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#b9d62d), to(#90aa11));
    background: -moz-linear-gradient(top, #b9d62d, #90aa11);
}

.quizy-fitb-res-no {
    background: #b81469;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e84097', endColorstr='#b81469') progid:DXImageTransform.Microsoft.Shadow(color='#bbbbbb', Direction=135, Strength=3) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#e84097), to(#b81469));
    background: -moz-linear-gradient(top, #e84097, #b81469);
}

.quizy-fitb-res-num {
    background: #686868;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#929292', endColorstr='#565656') progid:DXImageTransform.Microsoft.Shadow(color='#bbbbbb', Direction=135, Strength=3) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#929292), to(#565656));
    background: -moz-linear-gradient(top, #929292, #565656);
}

/* fill in the blanks end */

/* wordsearch start */

.ws-area {
    float: left;
    background: #fafafa;
    display: inline-block;
    border-radius: 10px;
    -moz-user-select: 0;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 20px
}

.ws-words {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0 0 0 35px;
    font-size: 20px;
}

.ws-words li {
    padding-bottom: 10px;
}

.ws-row {
    line-height: 0
}

.ws-col {
    cursor: pointer
}

.ws-col.ws-selected {
    background: #eee
}

.ws-found {
    background: #FF0
}

.ws-game-over-outer {
    background: rgba(255, 255, 255, 0.85);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.ws-game-over-inner {
    width: 100%;
    height: 100%;
    display: table;
    margin: 0;
    padding: 0
}

.ws-game-over {
    display: table-cell;
    vertical-align: middle text-align:center;
    color: black;
}

.ws-game-over h2 {
    color: #000;
    font-size: 3em;
    text-transform: uppercase;
    margin: 0 0 9px;
    padding: 250px 0 0 0;
    text-align: center;
}

.ws-game-over p {
    color: #000;
    font-size: 2em;
    display: block;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

/* wordsearch end */

/* wordmatch start */

#canvas {
    position: relative;
}

#canvas>div {
    display: inline-block;
}

#canvas #matchL,
#canvas #matchR {
    width: 24%;
    vertical-align: middle;
}

#canvas #matchC {
    width: 50%;
}

#canvas #matchL div,
#canvas #matchR div {
    background: #f9f9f9;
    margin-bottom: 15px;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    position: relative;
    height: 70px;
    line-height: 38px;
    display: block;
}

.demo {
    /* for IE10+ touch devices */
    touch-action: none;
}

.drag-drop-demo .window {
    cursor: pointer;
}

.drag-drop-demo a,
.drag-drop-demo a:visited {
    color: #057D9F;
}

/** LINKS IN WINDOWS **/

.drag-locked {
    border: 1px solid red;
}

.cmdLink {
    font-size: 0.80em;
}

/** DRAG/DROP CLASSES **/

.dragActive {
    border: 2px dotted orange;
}

.dropHover {
    border: 1px dotted red;
}

/** INFO WINDOW **/

#list {
    text-align: center;
    display: none;
    font-size: 90%;
    position: absolute;
    width: 500px;
    left: 50%;
    margin-left: -250px;
    top: 100px;
    background-color: white;
    padding: 5px;
    border: 1px solid #456;
    opacity: 0.8;
    border-radius: 8px;
    color: #444;
}

#list table {
    width: 100%;
}

#list table th,
#list strong {
    color: black;
    font-size: 12px;
    text-align: center;
}

path,
.jtk-endpoint {
    cursor: pointer;
}

.word {
    opacity: 0.5
}

.word.jtk-connected {
    border: 2px solid #d8d8d8;
    opacity: 1
}

#checkconn {
    cursor: pointer;
    text-align: center;
    background: #e60c63;
    width: 180px;
    margin: 0 auto;
    padding: 15px;
    font-weight: bold;
    color: white;
}

#checkconn.disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* wordmatch end */

#homeweeks {
    display: flex;
    flex: 0 1 100%;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-top: 35px;
    padding-bottom: 45px;
}

#homeweeks>div {
    padding: 1px 0;
    font-weight: bold;
    text-transform: uppercase;
    color: #a6ce39;
    position: relative;
    border-bottom: 3px solid #a6ce39;
}

#homeweeks>div.locked {
    color: #5d5d5d;
    border-bottom: 3px solid #cecece;
}

#homeweeks>div.locked strong {
    opacity: 0.4
}

#homeweeks>div>span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    opacity: 1
}

#homeweeks .locked>span {
    opacity: 1
}

.home .entry-content {
    display: flex;
    flex: 0 1 100%;
    flex-wrap: wrap;
    /* justify-content: left; */
    justify-content: space-between;
}

.home .entry-content p {
    display: block;
    padding: 65px 25px;
    font-size: 18px;
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 45px;
    flex: 0 1 30%;
    text-align: center;
    background: whitesmoke;
    border-radius: 3px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.06), 0 2px 2px rgba(0, 0, 0, 0.1);
    transition: all ease 0.2s
}

.home .entry-content p.done {
    opacity: 0.5;
    pointer-events: none;
}

.home .entry-content .done:after {
    position: absolute;
    display: block;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../img/done.png') no-repeat 95% 15px;
    z-index: 100;
}

.home .entry-content p a {
    color: #5d5d5d;
}

#wrapper-navbar .navbar {
    background-color: #a6ce39 !important;
}

#wrapper-navbar .navbar .container {
    max-width: 1100px;
}

.page-id-2 #headerScore {
    display: none;
}

#headerScore {
    color: white;
    font-weight: bold;
}

#headerScore p {
    display: inline;
}

#headerScore a {
    display: inline-block;
    color: white;
    font-size: 18px;
    padding: 0px 0px 0px 5px
}

#headerScore a .fa-sign-out-alt {
    transform: translateY(3px)
}

.notimer #blanks {
    padding-top: 100px;
}

#blanks * {
    box-sizing: content-box;
}

#fillblank-text {
    font-size: 19px;
}

#fillblank-ph {
    padding-top: 35px;
}

#tbody tr td {
    padding-top: 6px;
    padding-bottom: 6px;
}

.gameoverlay {
    position: fixed;
    top: 103px;
    right: 0%;
    left: 0%;
    bottom: 0%;
    background: #ffffffc4;
    z-index: 5000000;
    text-align: center;
}

.gameoverlay .content {
    padding-top: 150px;
    max-width: 500px;
    margin: 0 auto;
}

#content.blur {
    filter: blur(5px);
}

.gameoverlay p {
    font-size: 18px;
}

.gameoverlay p:nth-child(2) {
    padding-top: 25px;
}

.navbar {
    padding: 0rem 1rem;
}

.navbar-brand {
    display: inline-block;
    padding-top: 0;
    padding-bottom: 0;
}

/***** new wordsearch start ***/

.puzzleWrap {
    width: 768px;
    margin: 50px auto 0;
}

.puzzleWrap p {
    font: 22pt sans-serif;
    margin: 20px 20px 0px 45px;
    color: #6891ad;
}

/**
* Styles for the puzzle
*/

#puzzle {
    float: left;
    width: 525px;
}

#puzzle div {
    width: 100%;
    margin: 0 auto;
}

/* style for each square in the puzzle */

#puzzle .puzzleSquare {
    height: 35px;
    width: 35px;
    text-transform: uppercase;
    background-color: #f3f3f3;
    border: 0;
    outline: none;
    font: 1em sans-serif;
    color: #5d5d5d;
}

button::-moz-focus-inner {
    border: none;
    outline: none;
}

/* indicates when a square has been selected */

#puzzle .selected {
    outline: none;
    background: #e60c63;
    color: white;
}

#puzzle .selected:focus {
    border: none;
}

/* indicates that the square is part of a word that has been found */

#puzzle .found {
    color: #e60c63;
    font-weight: bold;
}

#puzzle .complete {
    color: #c1c1c1 !important;
}

#puzzle .complete.found {
    color: #fff !important;
}

#puzzle .solved {
    color: #ee5426;
}

/* indicates that all words have been found */

#puzzle .complete {
    background-color: #e60c63;
    color: white;
}

/**
* Styles for the word list
*/

#words {
    width: 230px;
    color: #6891ad;
    float: left;
}

#words ul {
    margin-top: 15px;
    list-style-type: none;
}

#words li {
    padding: 0 0 15px;
    font: 1em sans-serif;
    display: inline-block;
    width: 100%;
}

/* indicates that the word has been found */

#words .wordFound {
    text-decoration: line-through;
    color: #ee5426;
}

/**
* Styles for the button
*/

#solve {
    margin: 30px 30px 0 40px;
    background: transparent;
    color: #ee5426;
    padding: 10px 20px;
    border: 2px solid #ee5426;
    border-radius: 25px;
    opacity: .5;
    transition: opacity .25s ease-in;
}

#solve:hover,
#solve.gameSolved {
    opacity: 1;
}

/***** new wordsearch end ***/

@media (hover: hover) {
    .cleanlogin-field[type=submit]:hover {
        cursor: pointer;
        background: #ec2f7b;
    }
    #letsgo:hover {
        background: #ff2e81;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.17);
    }
    #quiz li:hover {
        cursor: pointer;
        border: 1px solid #e6e6e6;
        background: #f7f7f7;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1)
    }
    .controls button:hover {
        background-color: #ff438f;
    }
    #reset:hover {
        background-color: #ff3485;
    }
    .drag-drop-demo a:hover {
        color: orange;
    }
    .home .entry-content p:hover {
        cursor: pointer;
        border: 1px solid #a6ce39;
        box-shadow: 0 10px 50px rgba(0, 0, 0, 0.06), 0 0px 20px rgba(230, 14, 99, 0.4), 0 2px 2px rgba(0, 0, 0, 0.1);
    }
}

@media screen and (max-width: 1024px) {
    .wrapper.ipad {
        padding: 0px;
    }
    html.fixed,
    .fixed body {
        width: 100vw;
        height: 100vh;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    .fixed body {}
    .ipad #cw.progressbar,
    .ipad #ws.progressbar {
        position: relative;
        margin: 10px auto;
        width: 100%;
        display: block;
        height: 5px;
        background: #f1f1f1;
    }
    #words {
        width: 190px;
        color: #6891ad;
        float: left;
    }
}

.img-fluid {
    max-width: 100%;
    height: auto;
    background-color: #fff;
    padding: 5px 10px 5px 10px;
}