body{
 ackground-color: #f73;
 background: radial-gradient(circle at 75% 30%, #003854 7%, #000000 60%, #000000 100%);
 font-family: tahoma;
 font-size: 20px;
 color: #fff;
 ext-shadow: 0px 0px 7px #fff, 2px 2px 3px #ccc;
 text-shadow: 0px 0px 7px rgba(00,00,00,1), 2px 2px 3px rgba(150,150,150,0.7);
 padding: 0px;
 margin: 0px;
 -moz-user-select : none;
 user-select: none;
 box-sizing: border-box;
}

.header_work_2306{
    --margin: 20vmin;
    position: relative;
    height: 17vmin;
    background-image: url(/images/2306_left.svg), url(/images/2306_right.svg);
    background-position: calc(50% - var(--margin)) center, calc(50% + var(--margin)) center;
    background-repeat: no-repeat;
    background-size: 38vmin;
    ilter: saturate(0) brightness(3);
    margin: 0rem;
}

.header_work{
height: 14%;
background-image: url(/images/holin_strong_w.png);
ackground-image: url(/images/hom1.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
ilter: saturate(0) brightness(3);
margin: 1rem;
}


.header_work_temp1{
height: 14%;
background-image: url(/images/chrk.png);
ackground-image: url(/images/gazprom.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
filter: saturate(0) brightness(3);
margin: 1rem;
}

.header_work_temp{
height: 14%;
background-image: url(/images/fulllogo.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
filter: saturate(0) brightness(3);
margin: 1rem;
}

.team_line, .screens{
 width: 98%;
 max-width: 640px; 
}


.team_line{
 border: 0.1em solid #ccc;
 border-radius: 30px;
 font-size: 1.5em;
 background-color: #222c;
 padding: 0.4em 0.5em;
 margin: auto;
 margin-top: 10px;
 position: relative;
 text-align:center;
 hite-space: nowrap;
 text-overflow: ellipsis;
 box-sizing: border-box;
 overflow: hidden;
 overflow-x: hidden;
 background-image: linear-gradient(325deg, #003854a6, #000c), url(/images/back_ya.png);
 background-size: 100%, 20rem;
;

}


.team_line, .bonus_button, .change_tour_button{
 transition-property: all;
 transition-timing-function: ease-out;
 transition-duration: 0.5s;
}


.team_line_open{
 height: 80%;
}

.team_line_close{
 height: 2.2em;
}

.team_name{
 margin-bottom: 1em;
 overflow: hidden;
 white-space: nowrap;
}

.menu_item{
margin-top: 2em;
}

.code_place{
 display: block;
 border: 1px solid #fff;
 padding: 0.1em;
 margin: auto;
 margin-top: 0.4em;
 font-size: 1.3em;
 width: 4em;
 text-align: center;
}

.change_name_place{
 display: block;
 border: 1px solid #fff;
 padding: 0.1em;
 margin: auto;
 margin-top: 0.4em;
 font-size: 1.3em;
 min-width: 4em;
 max-width: 90%;
 text-align: left;
}


.screens{
 border: 0px solid #fff;
 height: calc(100% - 7% - 5.2em);
 padding: 10px;
 margin: auto;
 margin-top: 10px;
 position: relative;
 box-sizing: border-box;
 overflow: auto;
}


.screen1_off, .screen2_off, .screen3_off, .bonus_div_off, .answers_buttons_off, .minigames_buttons_off, .code_button_off{
 display: none;
}

.code_button_on{
 display: block;
}

.screen1_on, .tour_select_buttons, .answers_buttons_on, .minigames_buttons_on{
 display: -webkit-flex; 
 display: flex;
 -webkit-flex-flow: row wrap; 
 flex-flow: row wrap;
 -webkit-justify-content: space-around;
 justify-content: space-around;
 -webkit-align-content: flex-start;
 align-content: flex-start;
}

.screen2_on{
 display: -webkit-flex; 
 display: flex;
 -webkit-flex-flow: column wrap; 
 flex-flow: column wrap;
 -webkit-justify-content: space-around;
 justify-content: space-around;
 -webkit-align-content: flex-start;
 align-content: flex-start;
}


.answer_button{
 border: 0.05em solid #fff;
 border-radius: 0.3em;
 display: inline-block;
 font-size: 4em;
 width: 40%;
 text-align: center;
 padding: 0.5em 0em;
 background-color: rgba(200,200,200,0.6);
 cursor: pointer;
 margin: 0.1em;
}

.answer_button:hover{
 background-color: rgba(255,255,100,0.6);
}

.code_place, .answer_button, .answer_accept_button_div, .quest_info, .change_tour_button{
 box-shadow: 0px 0px 0.3em rgba(00,00,00,0.5), 0px 0px 0.1em rgba(250,250,250,1);
}

.answer_accept_button_div{
 border: 0.1em solid #fff;
 display: block;
 width: 70%;
 margin: auto;
 text-align: center;
 padding: 1.5em 0em;
 background-color: rgba(100,100,100,0.4);
}

.answer_accept_button{
 font-size: 4em;
 display:block;
}

.bonus_div_on{
 display: -webkit-flex; 
 display: flex;
 -webkit-flex-flow: row wrap; 
 flex-flow: row wrap;
 -webkit-justify-content: space-around;
 justify-content: space-around;
}

.bonus_button{
 border: 0.1em solid #fff;
 border-radius: 10px;
 text-align: center;
 padding: 1em 0em;
 margin: 1em 0.2em;
 cursor: pointer;
}

.bonus_button_main{
 min-width: 3em;
 padding: 1em 0em;
 margin: 0.5em 0.2em;
}

.bonus_button_final{
 min-width: 5em;
 padding: 0.3em 0.5em;
 margin: 0.4em 0.2em;
}

.bonus_button_off{
 display: none;
}

.bonus_button_on{
 isplay: inline-block;
}

.bonus_button_select{
 background-color: rgba(250,250,100,0.8);
 box-shadow: 0px 0px 0.3em rgba(00,00,00,0.5), 0px 0px 3em rgba(250,250,250,1);
}

.bonus_button_noselect{
 background-color: rgba(100,100,100,0.6);
 box-shadow: 0px 0px 0.3em rgba(00,00,00,0.5), 0px 0px 3em rgba(100,100,100,0.4);
}


.confirm_button{
 border: 0.2em solid #fff;
 border-radius: 1em;
 width: 100%;
 text-align: center;
 font-weight: 600;
 padding: 1em 0px;
 background-color: rgba(100,250,100,0.8);
 box-shadow: 0px 0px 0.3em rgba(00,00,00,0.5), 0px 0px 3px rgba(250,250,250,1);
 cursor: pointer;
}

.quest_info{
 border: 0.1em solid #fff;
 min-width: 50%;
 text-align: center;
 padding: 0.3em 0em;
 background-color: rgba(50,50,50,0.5); 
 border-radius: 20px;
}


.message_div{
 border: 1px solid #777;
 display: inline-block;
 width: 100%;
 height: 80%;
 text-align: center;
 padding: 15px 0px;
 background-color: #fff;
 cursor: pointer;
 font-size: 1em;
 position: relative;
}

.breakline{
 clear: both;
}

.fon{
 position: fixed;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 background-color: rgba(00,00,00,0.8);
 z-index: 99;
}

.fon_on{
 display: -webkit-flex; 
 display: flex;
 -webkit-flex-flow: column wrap; 
 flex-flow: column wrap;
 -webkit-justify-content: space-around;
 justify-content: center;
 -webkit-align-content: center;
 align-content: center;
 -webkit-align-items: flex-start;
 align-items : center;
}

.fon_off{
 display: none;
}

.info_message{
 width: 80%;
 background: rgba(100,100,100,0.7);
 max-width: 500px;
 text-align: center;
}

.button_ok{
 background: rgba(100,200,100,0.7);
 cursor: pointer;
}

.button_ok, .info_message{
 border: 0.2em solid #fff;
 box-sizing: border-box;
 margin: 1em 0em;
 border-radius: 1em;
 padding: 1em 2em;
}


.tour_select_buttons{
 width: 100%;
 display: flex;
}

.change_tour_button{
 min-width: 35%;
 border: 0.15em solid #fff;
 text-align: center;
 padding: 0.7em;
 margin: 0em 0em 1em 0em;
 border-radius: 1.0em;
 font-size: 0.8em;
 cursor: pointer;
 max-height: 1.5em;
}

.change_tour_button_select{
 background-color: rgba(255,255,255,0.75);
 color: #fff;
}
.change_tour_button_noselect{
 background-color: rgba(100,100,100,0.6);
 color: #ccc;
}

.answers_buttons{
 width: 100%;
}

.minigames_buttons{
 width: 100%;
}

.minigame_header{
 border: 0.00em solid #fff;
 font-size: 1.3em;
 width: 100%;
 text-align: center;
 padding: 0.2em;
 margin: 0em 0em 0.5em 0em;
 text-decoration: underline;
}

.registration_header{
 border: 0.00em solid #fff;
 font-size: 1em;
 width: 100%;
 text-align: left;
 padding: 0.2em;
 margin: 0em 0em 0.5em 3.0em;
 text-decoration: none;
 width: auto;
}

.input_div{
 width: 100%;
 text-align: center;
 margin: 0.5em 0em;
}

.input_div input{
 font-size: 1.1em;
 width: 80%;
 padding: 0.3em;
 border: 0.2em solid #fff;
 box-shadow: 0px 0px 0.3em rgba(00,00,00,0.5), 0px 0px 0.1em rgba(250,250,250,1);
}

.hline{
 width: 100%;
 height: 4px;
 border: 0px solid #fff;
 border-top: 2px dashed #fff;
 margin: 1em 0em;
}

.yesno_button, .search_word_button{
 border: 0.2em solid #fff;
 box-sizing: border-box;
 margin: 1em 0em;
 border-radius: 1em;
 padding: 0.45em 2em;
 background: rgba(200,200,200,0.7);
 cursor: pointer;
 max-height: 2.5em;
}

.accept_button{
 font-size: 20px;
}

.close_button{
 position: absolute;
 left: calc(100% - 1.90em);
 top: -0.1em;
 border: 0.1em solid #ccc;
 background-color: rgba(170,170,170,0.99);
 box-sizing: border-box;
 border-radius: 30px;
 width: 2em;
 height: 2em;
 padding: 0.3em 0;
 cursor: pointer;
}

.tour_res{
 display: -webkit-flex; 
 display: flex;
 -webkit-flex-flow: row wrap; 
 flex-flow: row wrap;
 -webkit-justify-content: space-around;
 position: relative;
 border: 0.1em solid #fff;
 box-sizing: border-box;
 margin: 1em 0em;
 border-radius: 0.6em;
 padding: 1em 0em 0.2em;
 min-width: 100%;
 background: rgba(200,200,200,0.7);
 overflow: hidden;
}

.tour_res_hr{
 justify-content: space-around;
}

.tour_res_vr{
 flex-direction: column;
}

.quest_res_std, .quest_res_fin{
 display: inline-block;
 font-size: 0.56em;
 border: 0.1em solid #fff;
 box-sizing: border-box;
 border-radius: 1em;
 padding: 0.45em 0em;
 min-width: 2.5em;
 text-align: center;
 background: rgba(225,200,90,0.7);
 max-height: 2.5em;
}

.quest_res_std{
}
.quest_res_fin{
 margin: 0em 0.00em;
}

.tour_res_name{
 position: absolute;
 font-size: 0.6em;
 top: 0em;
 width: 50%;
 background-color: rgba(100,100,100,0.5);
 padding-bottom: 0.2em;
}

.tour_res_name_left{
 left: 0;
}
.tour_res_name_right{
 left: calc(100% - 50%);
}

.code_button_on{
    height: calc(100% - 4.0em);
    overflow: auto;
}

.final_question{
 display: -webkit-flex; 
 display: flex;
 -webkit-flex-flow: row wrap; 
 flex-flow: row wrap;
 -webkit-justify-content: space-around;
 position: relative;
 box-sizing: border-box;
 padding: 0.2em 0em;
 min-width: 100%;
 overflow: hidden;
}

.cell1{
flex-grow : 1;
}

.cell2{
flex-grow : 2;
}

.cell3{
flex-grow : 1;
}

.cell4{
flex-grow : 2;
}



.tb_double{
 box-shadow: inset 0px 0px 0px 0px #fff, 0px 0px 0.5em 2px #00f;
}

.tb_triple{
 box-shadow: inset 0px 0px 0px 0px #fff, 0px 0px 0.5em 2px #f0f;
}

.tb_series{
 box-shadow: inset 0px 0px 0px 0px #fff, 0px 0px 0.5em 2px #0f0;
}
