/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap');
*/
input.text,
input[type="text"],
input[type="button"],
input[type="a"],
input[type="submit"],
a.btn,
button,
.input-checkbox {
    -webkit-appearance: none !important;
}

img {
    max-width: 100%
}

html, body {
    color: #333;
    font: 14px Verdana, Helvetica, sans-serif;
    line-height: 1.5;
}

body {
    background-color: #DFDFDA;
}

.task-container {
    color: #333;
}

body.game {
    font-family: Verdana, Helvetica, sans-serif;
}

body.inline {
    margin: 10px;
}

pre {
    color: #e83e8c;
}

div.login {
    max-width: 600px;
    margin: auto;
}

div.out-login {
    padding: 10px;
}

div.page-links {
    max-width: 800px;
    margin: auto;
}

div#message {
    border: 1px solid #000;
    border-spacing: 20px;
}

#message_time {
    font-weight: 700;
}

a {
    cursor: pointer;
    /*  text-decoration:underline;*/
    /*  color:#333;*/
}

a.url-team, a.game-team-control {
    text-decoration: none;
}

a.btn {
    text-decoration: none;
}

.invis {
    color: #FFF;
}

.dropdown-menu {
    text-align: center;
    z-index: 20000;
    max-height: 400px;
    overflow-y: auto;
}

.dropdown-item {
    display: inline-block;
    width: 100%;
}

table.stat {
    font-size: 12px;
    border: 1px solid #AAA;
    border-collapse: collapse;
    border-spacing: 0;
}

table.stat th {
    border: 1px solid #AAA;
    border-style: none solid none;
}

table.stat td {
    padding: 0.25rem;
    white-space: nowrap;
}

table th.total {
    background-color: #FDFDFF;
    border: 1px solid #AAA;
    border-style: none solid none;
    min-width: 100px;
}

table th.stat-place {
    min-width: 20px;
}

table th.task {
    min-width: 120px;
    border: 1px solid #AAA;
    border-style: none solid none;
}

table th.task-hidden {
    border: 1px solid #AAA;
    min-width: 20px;
}

table.stat a {
    text-decoration: none;
    color: #339;
}

table.stat th {
    text-align: center;
}

table.stat td {
    text-align: center;
    border: #CCC 1px solid;
}

table.stat {
    background-color: WHITE;
    color: #333;
}

span.click_edit {
    border: #AAA 1px solid;
}

table.login {
    border-collapse: collapse;
    border-spacing: 0;
}

table.login td {
    border: #000 2px solid;
    text-align: center;
}

table.login tr:first-child {
    background-color: #DDE5FF;
    border-style: none;
}

table.team {
    border-collapse: collapse;
    border-spacing: 0;
    width: 95%;
}

table.team tr {
    border: #CCF 1px solid;
    border-style: solid none;
    text-align: center;
}

table.team tr:first-child {
    border-style: none;
}

table.team td {
    padding: 5px;
}

form.team-controls .btn {
    margin: 3px;
}

.access-key {
    margin: 10px;
    font-weight: 800;
}

.alert {
    max-width: 800px;
    margin: auto;
}

.out_game_controls {
    /*background-color:#FCFCFA;*/
    border: #CCC 1px solid;
    border-collapse: collapse;
    border-spacing: 0;
    border-style: none none solid none;
    padding: 5px;
    margin: -0.5rem -0.5rem 0 -0.5rem;
}

.out_game_controls form {
    margin: 10px;
    display: inline;
}

div#profile {
    font-size: 9px;
    border: #000 1px solid;
    border-style: solid none none;
}

div#wait_game_out {
    text-align: center;
    font-size: 18px;
    padding-top: 28px;
    padding-bottom: 28px;
}

a#game_title {
    font-size: 18px;
    text-decoration: none;
}

div#task_header, div.task-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    margin: 0px 0px 5px 0px;
    background-color: rgb(250, 250, 240);
    border-radius: 5px;
    box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.20);
}

div#game_over {
    margin: auto;
}

div#answer_format_block, div#answer_limit_block, div#out_limit, span.another-task-comment {
    color: #FFF;
}

.answers_controls {
    background-color: #EDF0F9;
    font-size: 14px;
    font-weight: 700;
    padding-top: 2px;
    padding-bottom: 2px;
}

div#out_answer_frame {
    padding: 0px;
}

form#answer_form {
    /*  max-width:500px;*/
    padding: 0px;
}

div#out_answer {
    border-radius: 5px;
    box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.80);
    background-color: rgba(48, 48, 64, 0.75);
    padding: 8px 8px 4px 8px;
    z-index: 10000;
}

div#out_answer {
    color: #FFF;
}

div#out_answer .repeat-answer {
    color: #AAF;
    font-weight: 400;
}

div#out_answer .wrong-answer, div#out_answer .nonsubmit-answer {
    color: #FAA;
    font-weight: 400;
}

div#out_answer .unknown-answer {
    color: #FFF;
}

div#out_answer .right-answer, div#out_answer .bonus-answer {
    color: #AFA;
    font-weight: 400;
}

.closed-level {
    font-size: 18px;
    border-radius: 5px;
    color: #FFF;
    margin: 5px;
    font-weight: 700;
    background-color: #080;
    display: flex;
    align-items: center;
    justify-content: center;
}

.out_hint {
    border: silver 1px solid;
    padding-top: 4px;
    padding-bottom: 8px;
    padding-left: 8px;
    border-style: solid none none;
}

.hint_title {
    color: #606060;
}

.hint {
    margin: 4px 0px 0px 0px;
    display: block;
    border: 1px;
    padding: 0px 0px 0px 8px;
    border-style: none none none solid;
    border-color: #DDD;
}

div#out_task, div.out-task {
    border: #000 1px solid;
    padding: 8px;
    border-style: none;
}

div#task_title, div.task-title {
    font-weight: bolder;
    font-size: 14px;
    display: inline-block;
    padding-right: 24px;
}

div.openid_login {
    font-size: 15px;
    background-color: #DDE5FF;
    padding-top: 8px;
    padding-bottom: 8px;
}

div#out_refresh {
    display: inline;
}

.stat_first {
    background-color: #FFFFE0;
}

.stat_second {
    background-color: #FFFFE8;
}

.stat_third {
    background-color: #FFFFF0;
}

.repeat-answer {
    color: #005;
    font-weight: 700;
}

.wrong-answer, .nonsubmit-answer {
    color: #B00;
    font-weight: 700;
}

.right-answer, .bonus-answer {
    color: #050;
    font-weight: 700;
}

#usp {
    width: 90%;
    margin-left: 50px;
}

#header {
    width: 100%;
    padding-bottom: 0px;
}

.header {
    width: 100%;
}

#header .logo {
    max-width: 800px;
}

div.out {
    float: left;
    display: inline;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 500;
}

div.out a {
    color: #b2b2b2;
    font-size: 14px;
}

#header .out a:hover {
    color: #79b9f9;
    font-size: 14px;
}

#header .menu {
    width: 600px;
    height: 13px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    display: block;
}

#header .menu ul {
    list-style: none;
    margin-top: 10px;
    margin-bottom: 10px;
}

#header .menu ul li {
    background-color: #DDE5FF;
    float: left;
    border: #000 2px solid;
    border-left: none;
    line-height: 20px;
    font-size: 13px;
    padding: 3px 10px;
}

#header .menu ul li.first {
    border-left: #000 2px solid;
}

#header .menu ul li a {
}

#header .menu ul li a:hover {
    color: #F22;
}

.page-container {
    background-color: #FFF;
    color: #333;
    display: block;
    text-align: start;
    border: #C9D7F1 1px solid;
    border-radius: 5px;
    box-shadow: 1px 1px 9px #AAB;
    padding: 1rem;
}

.game-container {
    background-color: #FFF;
    min-height: 600px;
    border: #C9D7F1 1px solid;
    border-radius: 5px;
    box-shadow: 1px 1px 9px #AAB;
    padding: 10px;
}

.task-container {
    background-color: #FFF;
    min-height: 600px;
    display: block;
    text-align: start;
    border: #C9D7F1 1px solid;
    border-radius: 5px;
    box-shadow: 1px 1px 9px #AAB;
    margin: 0 0 15px 0;
    padding: 1.0rem;
}

div.register-container {
    max-width: 400px;
}

.description {
    margin-left: 20px;
    margin-right: 20px;
}

.linkspan {
    cursor: pointer;
}

.sp-wrap {
    box-shadow: 1px 1px 9px #CCD;
    border-radius: 4px;
    margin: 12px auto;
}

.sp-wrap {
    /*width:98%;*/
    clear: both;
}

.sp-wrap, .sp-head, .sp-body {
    color: #333;
    clear: both;
    border-width: 1px;
}

.sp-wrap {
    background-color: rgb(250, 250, 240);
    padding: 0;
}

.sp-head {
    font-size: 14px;
    /*margin-left:6px;*/
    line-height: 15px;
    cursor: pointer;
    border-width: 0;
    padding: 5px 14px 5px;
}

.sp-body .sp-wrap {
    box-shadow: 1px 1px 6px #CCD;
}

.sp-body {
    display: none;
    font-weight: 400;
    background-color: #FFF;
    border-width: 1px 0 0;
    padding: 0.5rem;
}

.sp-body.unfolded {
    display: block;
}

.game.active .sp-wrap {
    background-color: rgb(255, 245, 235);
}

.game.active .sp-wrap .sp-head {
    color: #333;
}

.game.active .sp-wrap .sp-head a {
    color: #333;
}

.sp-head.folded {
    display: block;
    /*  background:transparent url(https://qeng.org/img/icon_plus_1.gif) no-repeat left center; */
    background: transparent url(https://qeng.org/img/wrap-closed.png?v=3) no-repeat left center;
    background-position: 6px;
    padding-left: 24px;
}

.sp-head.unfolded {
    display: block;
    /*  background:transparent url(https://qeng.org/img/icon_minus_1.gif) no-repeat left center;*/
    background: transparent url(https://qeng.org/img/wrap-open.png) no-repeat left center;
    background-position: 6px;
    padding-left: 24px;
}

#stat a {
    color: #CCC;
}

img.rm {
    float: right;
    border: none;
}

img.lm {
    float: left;
    border: none;
}

.inn {
    font-size: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
}

#usp .inn td {
    border: #7f7f7f 1px solid;
    text-align: center;
}

.profile-edit input {
    width: 100%;
    text-align: center;
}

.profile-edit input:disabled {
    border: 0;
    background-color: #FFF;
}

.log {
    text-decoration: underline;
    cursor: pointer;
}

input.game_control_button {
    font-size: 24px;
}

tr.stat_task_numbers {
    background-color: #EFEFFF;
}

.bonus {
    display: block;
    border: #D0D0D0 1px solid;
    margin: 8px;
    border-style: solid none none none;
}

.bonus-hint, .bonus-description {
    margin: 4px 0px 0px 0px;
    display: block;
    border: 1px;
    padding: 0px 0px 0px 8px;
    border-style: none none none solid;
    border-color: #DDD;
}

.bonus-solved {
    background-color: #EFE;
}

.bonus-solved-penalty {
    background-color: #FEE;
}

.bonus-timed-out {
    background-color: #EEE;
}

.bonus-result-out, .bonus-answer-out {
    margin: 0px 0px 0px 8px;
}

.bonus-result-positive {
    color: #050;
    font-weight: 700;
}

.bonus-result-negative {
    color: #500;
    font-weight: 700;
}

div#out_codes, div#out_bonuses, div#out_global_bonuses {
    border: #C9D7F1 1px solid;
    padding: 8px;
    border-style: solid;
    border-radius: 4px;
    margin: 8px;
}

span#out_end_time, div#out_end_time {
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
    padding-right: 24px;
}

a#game_stat, a#game_monitoring, a#refresh {
    color: #00C;
}

span.email_warning, .login_error, .team_action_result {
    font-size: 15px;
    background-color: #000;
    color: red;
    font-weight: 700;
    padding-right: 24px;
    padding-left: 24px;
}

a.email_warning, a.login_error, a.team_action_result {
    color: #AAAAFF;
}

div.hint-title-open {
    color: #333;
}

@keyframes hint-title-open-fresh {
    from {
        color: #FFF;
    }
    to {
        color: #333;
    }
}

div.hint-title-open-fresh .hint_name {
    animation-name: hint-title-open-fresh;
    animation-duration: 0.5s;
    animation-iteration-count: 5;
    animation-fill-mode: forwards;
}

div.out_game_stat {
    display: inline-block;
    padding-right: 16px;
}

div#answer_form {
    padding-right: 8px;
    max-width: 100%;
}

#usp table, #usp .inn table {
    border: none;
}

div#test_warning {
    background-color: #000;
    color: red;
}

div#test_warning a {
    background-color: #000;
    color: #FF0;
}

.admin-control a {
    color: #FF0;
}

.admin-control {
    padding: 5px 8px;
    background-color: rgba(0, 0, 0, 0.75);
    color: #FFF;
    /*margin: 0px auto 10px auto;*/
    position: relative;
}

.top-right {
    position: absolute;
    top: 0;
    right: 0;
}

.bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
}

.stat-admin-control {
    padding: 20px;
    background-color: #000;
    color: #FFF;
    margin: 10px 0px 10px 0px;
}

.game-admin-control {
    padding: 8px;
    background-color: #000;
    color: #FFF;
    margin: 10px 0px 10px 0px;
}

.ui-timepicker-div .ui-widget-header {
    margin-bottom: 8px;
}

.ui-timepicker-div dl {
    text-align: left;
}

.ui-timepicker-div dl dt {
    height: 25px;
    margin-bottom: -25px;
}

.ui-timepicker-div dl dd {
    margin: 0 10px 10px 65px;
}

.ui-timepicker-div td {
    font-size: 90%;
}

.ui-tpicker-grid-label {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

img.zoom {
    cursor: pointer;
}

#img_zoom_img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    display: inline-block;
}

#img_zoom_vcenter {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

#img_zoom {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

/****** Style Star Rating Widget *****/
/*fieldset, label { margin: 0; padding: 0; }*/

.star-rating > input {
    display: none;
}

label.full:before {
    margin: 5px;
    font-size: 3.0em;
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    content: "\f005";
}

label.half:before {
    margin: 5px;
    font-size: 3.0em;
    font-family: "Font Awesome 5 Free";
    content: "\f089";
    position: absolute;
}

.star-rating > label {
    color: #AAA;
    float: right;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.star-rating > input:checked ~ label, /* show gold star when clicked */
.star-rating:not(:checked) > label:hover, /* hover current star */
.star-rating:not(:checked) > label:hover ~ label {
    color: #1FA71F;
}

/* hover previous stars in list */

.star-rating > input:checked + label:hover, /* hover current star when changing rating */
.star-rating > input:checked ~ label:hover,
.star-rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.star-rating > input:checked ~ label:hover ~ label {
    color: #3FA77F;
}

/* Bootstrap4 missing default button */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-default:focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #8c8c8c;
}

.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-default:active {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

a.answers-monitoring {
    font-size: 12px;
    border: #333 1px solid;
    border-collapse: collapse;
    border-spacing: 0;
    border-style: solid none none none;
    text-align: center;
    width: 100%;
    color: #ccc;
    padding: 4px 0px 0px 0px;
}

a.answers-monitoring:hover {
    color: #eee;
}

span.answers-queue-text {
    color: #ff0;
}

div#test_answers_out {
    align-items: center;
}

div#test_answers {
    max-width: 800px;
    margin: auto;
}

a.test-answer-click {
    color: #ccc;
    text-decoration: none;
}

a.test-answer-click:hover {
    color: #eee;
}

a.test-answers {
    font-size: 12px;
    border: #333 1px solid;
    border-collapse: collapse;
    border-spacing: 0;
    border-style: solid none solid none;
    text-align: center;
    width: 100%;
    color: #ccc;
    padding: 4px 0px 0px 0px;
}

a.test-answers:hover {
    color: #eee;
}

#monitoring_window_out {
    text-align: center;
    width: 100%;
}

div.answers-monitoring-body {
    background-color: rgba(48, 48, 64, 0.75);

    text-align: left;
    font-size: 12px;
    padding: 8px;
    color: #CCC;
    max-height: 200px;
    overflow-y: auto;
    orphans: 4;
    widows: 4;
}

ul.list-unstyled {
    margin: 0px;
}

div.answers-monitoring-body ul {
    margin: 0;
}

div.answers-monitoring-body span.answer-right {
    color: #33FF33;
}

div.answers-monitoring-body span.answer-wrong {
    color: #CCC;
}

div.answers-monitoring-body span.answer-repeat {
    color: #AA88FF;
}

div.answers-monitoring-body span.answer-user {
    color: #FC5;
}

div.answers-monitoring-body .bonus-result-positive {
    color: #AFA;
    font-weight: 100;
}

div.answers-monitoring-body .bonus-result-negative {
    color: #FAA;
    font-weight: 100;
}

span.answers-sending {
    color: #FFA;
    font-weight: 400;
    word-break: break-all;
}

div.answers-send-error {
    color: #FAA;
    font-weight: 400;
}

a#game_menu_button {
    color: #333;
    font-size: 22px;
    text-decoration: none;
}

a#game_menu_button:hover {
    color: #000;
}

span.game-list-time {
    float: right;
}

span.game-list-title {
    display: block;
}

a.game-list-id span {
    float: left;
    font-size: 75%;
}

@keyframes show-on-load {
    from {
        opacity: 0.0;
    }
    to {
        opacity: 1.0;
    }
}

.show-on-load {
    animation-name: show-on-load;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.navbar-light .nav-link, .navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, .5); /* цвет кнопок в меню */
}

.navbar-light .nav-item:hover {
    background-color: rgba(255, 255, 255, .85); /* цвет подсветки кнопок в меню */
}

.navbar-light .nav-link:hover, .navbar-light .navbar-nav .nav-link:hover {
    color: rgba(0, 0, 0, .75); /* цвет активны кнопок в меню */
}

.navbar-dark .nav-link, .navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .5); /* цвет кнопок в меню */
}

.navbar-dark .nav-item:hover {
    background-color: rgba(255, 255, 255, .85); /* цвет подсветки кнопок в меню */
}

.navbar-dark .nav-link:hover, .navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(0, 0, 0, .75); /* цвет активны кнопок в меню */
}

.nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
}

.nav-item.list-inline-item {
    margin-right: 0;
}

/* анимированная кнопка-гамбургер для меню*/
.navbar-toggler span {
    display: block;
    background-color: #4f4f4f;
    height: 3px;
    width: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    left: 0;
    transition: all 0.35s ease-out;
    transform-origin: center left;
}

.navbar-light .navbar-toggler span {
    background-color: rgba(0, 0, 0, .5);
}

.navbar-dark .navbar-toggler span {
    background-color: rgba(255, 255, 255, .5);
}

/* top line needs a little padding */
.navbar-toggler span:nth-child(1) {
    margin-top: 0.3em;
}

/* Animate collapse into X */
/* top line rotates 45 degrees clockwise and moves up and in a bit to close the center of the X in the center of the button */
.navbar-toggler[aria-expanded="true"] span:nth-child(1) {
    transform: translate(15%, -33%) rotate(45deg);
}

/* center line goes transparent */
.navbar-toggler[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

/* bottom line rotates 45 degrees counter clockwise, in, and down a bit to close the center of the X in the center of the button  */
.navbar-toggler[aria-expanded="true"] span:nth-child(3) {
    transform: translate(15%, 33%) rotate(-45deg);
}

/* Animate collapse open into hamburger menu*/
/* top line moves back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(1) {
    transform: translate(0%, 0%) rotate(0deg);
}

/* middle line goes back to regular color and opacity */
.navbar-toggler span:nth-child(2) {
    opacity: 1;
}

/* bottom line goes back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(3) {
    transform: translate(0%, 0%) rotate(0deg);
}

/*Прогресс игры в менюшке игры*/
#game_progress_out {
    background-color: #000;
}

#game_progress_text {
    color: #FFF;
}

.task-drag-spot {
    background-color: #888;
    color: #FFF;
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 5px;
}

.badge-awards {
    background: #FFBF00;
    background: linear-gradient(157deg, rgba(255, 255, 255, 1) 0%, rgba(255, 191, 0, 1) 100%);
    color: #55F;
    border-radius: 10px;
}

table.codemap th.vertical {
    width: 10px;
    padding: 0px 6px 0px 6px;
    vertical-align: bottom;
}

.vertical-text {
    writing-mode: vertical-rl;
    line-height: 0;
    transform: rotate(-180deg);
}

table.codemap th {
    white-space: nowrap;
    text-align: left;
}

table.codemap td {
    white-space: nowrap;
}

.task-status-timeout, .task-status-surrender, .task-status-game-over {
    color: #930;
    font-weight: 800;
    font-size: 10px;
}

.copy-on-click {
    cursor: copy;
}

.copy-on-click:active {
    font-weight: 800;
}

table.inventory {
    border: 1px solid;
    border-spacing: 3px
}

table.inventory td {
    padding: 5px;
}

table.inventory td.selected {
    box-shadow: 0 0 0 10px green inset;
}

table.inventory img {
    border: 1px solid;
}

.send-spinner-error {
    color: #F00;
}

.send-spinner-offline-unknown {
    color: #FF0;
}

.send-spinner-offline-correct {
    color: #0F0;
}

.send-spinner-normal {
}

.rounded-30px {
    border-radius: 30px;
}

.rounded-5px {
    border-radius: 5px;
}