<style>
body{
 margin: 0px;
 padding: 0px;
 font-family: Arial;
 font-size: 10px;
 background-color: #777;
}

.top_bar{
 border-bottom: 0.2em solid #ddd;
 position: fixed;
 width: 100%;
 background-color: #999;
 color: #fff;
 z-index: 99;
 text-align: center;
 padding: 1em 0.5em 1em 4em;
 box-sizing: border-box;
}

#header_text, #current_game{
 font-size: 1.5em;
 font-weight: 600;
 color: #fff;
}


.control_panel, .special_control_panel{
 padding-top: 3em;
 padding-bottom: 2em;
 box-sizing: border-box;
 font-size: 1.4em;
 position: fixed;
 overflow: auto;
 color: #fff; 
 text-shadow: 0.2em 0.2em 0.2em #444;
 background-color: #555;
 transition-property: all;
 transition-timing-function: ease-out;
 transition-duration: 0.3s;
 z-index: 90;
}

.control_panel{
 width: 19em;
 height: 100%;
 border-right: 0.3em solid #aaa;
 box-shadow: 0.1em 0em 0.7em 0em #ddd, 0.2em 0em 1.3em 0.3em #333;
}

.control_panel_off{
 left: -300px; 
}

.control_panel_on{
 left: 0px; 
}

.special_control_panel{
 top: 0px;
 left: calc(100% - 301px);
 width: 300px; 
 height: 100%; 
 padding-left: 1em;
 padding-top: 18em;
 border-left: 0.3em solid #aaa;
 box-shadow: -0.1em 0em 0.7em 0em #ddd, -0.2em 0em 1.3em 0.3em #333;
}

.special_control_panel_off{
 display: none; 
}

.special_control_panel_on{
 display: block; 
}

.menu_block{}


.menu_item{
 border: 0px solid #bbb;
 padding: 5px 5px 3px 10px;
 margin: 5px;
 font-size: 1.0em;
 font-weight: 600;
 color: #fff;
 cursor: pointer;
 -moz-user-select : none;
 user-select: none;
 width: auto;
}

.menu_item_on, .menu_block_on{
 display: block;
}

.menu_item_off, .menu_block_off{
 display: none;
}

.on{
 background-color: #aaa;
}

.off{
}

.menu_item:hover{
 color: #ff5;
}

.info_block{
 position: relative;
 background-color: #777;
 font-size: 1.2em;
 font-weight: 600;
 color: #fff;
                
 border-bottom: 0.1em solid #ccc;
 padding: 1em 0.5em 0.5em 0.5em;
 height: 10em;
 text-shadow: 0.2em 0.2em 0.2em rgba(100, 100, 100, 0.5);
}

.captain_device{
 position: absolute;
 top: calc(100% - 2em);
}

.closecross:hover{
 background-color: #ffc;
}

.menu_button_v, .menu_button{
 overflow: hidden;
 border: 3px solid #ddd; 
 border-radius: 50% 50%;
 width: 40px; 
 height: 40px;
 cursor: pointer;
 z-index: 9999;
 position: fixed; 
}

.menu_button_v{
 background-color: #999;
}

.menu_button{
 left: 20px; 
 top: 0px;
 padding: 10px 5px 0px 5px;
 border: 0px solid #fff; 
}

.menu_button_v{
 left: 20px; 
 top: 0px;
 margin: 1px;
}

.menu_draw1, .menu_draw2, .menu_draw3{
 border: 0px solid gray;
 width: 25px;
 height: 3px;
 background: #fff;
 margin: 5px 6px;
 border-radius: 3px 3px;
}

.code_place{
 border: 0px solid #777;
 display: inline-block;
 font-size: 1em;
 width: 75px;
 margin: 0px 0px 0px 20px;
 background-color: #555;
 border-bottom: 1px solid #ccc;
 padding: 5px;
 transition-property: all;
 transition-timing-function: ease-out;
 transition-duration: 0.1s;
}

.code_place:focus{
 background-color: #fff;
 color: #000;
}

.switch_pole{
width: 2.6em;
padding: 0.13em;
border: 0.1em solid #666;
border-radius: 1em;
position: absolute;
top: calc(100% - 2.2em);
left: calc(100% - 4em);
}

.switch_pole_on{
background-color: #9f9;
}
.switch_pole_off{
background-color: #ddd;
}
.switch_pole_err{
background-color: #f99;
}

.switch_button{
font-size: 1em;
width: 1em;
height: 1em;
border: 0.1em solid #999;
background-color: #ff5;
border-radius: 50%;
margin: 0px;
cursor: pointer;
position: relative;
background: radial-gradient(circle at 35% 35%, #fff, #aaa);
}

.switch_comment{
color: #f55;
font-size: 0.56em;
position: absolute;
padding: 0em 0.5em;
border: 0.13em dotted #999;
background-color: #fff;
border-radius: 26em;
top: calc(100% - 1.6em);
}


.sw_off {
left: 0px;
}

.sw_on {
left: 21px;
}

.sw_netral {
left: 10px;
}

.switch_button, .switch_pole, .tour_button{
transition-property: all;
transition-timing-function: linear;
transition-duration: 0.2s;
}


@media (min-width: 480px){
	.work_place{
	 font-size: 1.8em;
	 border: 0px solid red;
	 position: relative;
	 z-index: 1;
	 padding: 3em 0.3em;
	 transition-property: padding;
	 transition-timing-function: ease-out;
	 transition-duration: 0.3s;
	 overflow: auto;
	 color: #fff;
	 box-sizing: border-box;
	}
	.work_place_menu_on{
	 padding-left: 300px;
	}
	.work_place_menu_off{
	 padding-left: 0.3em;
	}
	.apel_div, .apel_textarea{
	  font-size: 1.2em;
	}

}

@media (max-width: 479px){
	.work_place{
	 height: 100%;
	 font-size: 1.4em;
	 border: 0px solid red;
	 position: relative;
	 z-index: 1;
	 padding: 3.5em 0.7em 1em;
	 transition-property: padding;
	 transition-timing-function: ease-out;
	 transition-duration: 0.3s;
	 overflow: auto;
	 box-sizing: border-box;
	 color: #fff;
	 box-sizing: border-box;
	}
	.work_place_menu_on{
	 adding-left: 300px;
	}
	.work_place_menu_off{
	 adding-left: 0.3em;
	}

	.apel_div, .apel_textarea{
	  font-size: 1.4em;
	}

}


.dop{
	display: inline-block;
	border: 1px solid #ccc;
	width: 1.1em;
	height: 1em;
	margin: 0.3em 0.7em;
	cursor: pointer;
}

.dop:hover{
 box-shadow: 0em 0em 0.8em #ccc;
 -moz-user-select : none;
 user-select: none;
}

.dop_sel{
 background-color: #9f9;
}

.dop_nosel{
 background-color: #aaa;
}

.dop_warning{
 background-color: #f66;
}

.menu_warning{
 color: #ff0;
}

.menu_shadow{
 color: #aaa;
}



















.button, .apel_save_button{
 border: 1px solid #999;
 isplay: inline-block;
 cursor: pointer;
 padding : 3px 15px;
 margin : 1px 2px;
 box-shadow: 3px 3px 6px #bbb;
 background-color: #eee;
}


.button, .apel_save_button_on{
 display: inline-block;
}
.apel_save_button_off{
 display: none;
}

.lusminus_button{
 border: 1px solid #ccc;
 text-align:center;
 display: inline-block;
 padding: 5px 10px;
 cursor: pointer;
 margin: 0px;
 overflow: hidden;
}

.del_button, .gamedate{
 border-bottom: 1px solid #ccc;
 text-align:center;
 display: inline-block;
 padding: 5px 30px;
 cursor: pointer;
 overflow: hidden;
 margin: 5px 5px;
 color: #fff;
 text-shadow: 1px 1px 5px #333;
}

.normal_cursor{
 cursor: default;
}

.del_button_team, .team_number_button, .team_name_button, .sel_team, .cap_device{
 border: 0px solid #ccc;
 text-align:center;
 display: inline-block;
 padding: 0.2em 0.5em 0.2em 0.5em;
 cursor: pointer;
 margin: 0em 0.2em;
 overflow: hidden;
 color: #fff;
 font-size: 1.1em;
 text-shadow: 1px 1px 5px #333;
}

.del_button_team{
 loat: right;
}

.del_button:hover, .gamedate:hover{
}

.team_number_button{
 width: 20px;
 text-align: right;
}

.team_name_button{
 width: 15em;
 text-align: left;
 white-space: nowrap;
 text-overflow: ellipsis;
}

.sel_team{
 text-align: center;
 padding: 0.2em 0em 0.2em 0em;
 width: 2em;
}

.cap_device{
 padding: 0.2em 0.3em;
 width: 5em;
}

.team_line{
 font-size: 0.8em;
 border-bottom: 1px solid #aaa;
 padding: 0.2em 0.2em;
 max-width: 550px;
}

.team_line:hover{
 background-color: #666;
}

.calendar_div{
 border:  0px solid red;
 padding: 10px;
 position: relative;
}

.setting_data_date{
 font-weight: 600;
 font-size: 1em;
 color: #444;
 border: 1px solid #aaa;
 padding : 0.2em 0.3em;
 argin : 1px 2px;
 loat : left;
 width: 4em;
 text-align : center;
 argin-right : 30px;
}

.team_button{
 border: 0.05em solid #999;
 width: 1.5em;
 text-align:center;
 display: inline-block;
 padding: 0.25em;
 cursor: pointer;
 margin: 0.15em;
 border-radius: 0.4em;
 user-select: none;
 -moz-user-select : none;
 transition-property: all;
 transition-timing-function: ease-out;
 transition-duration: 0.2s;
 color: #222;
 text-shadow: 0px 0px 0px #000;
}

.tb_true{
 background-color: #6f6;
}

.tb_false{
 background-color: #fff;
}

.tb_district{
 background-color: #a06;
}

.tb_wait{
 background-color: #ff6;
}

.tb_error{
 background-color: #f66;
}

.tb_example{
margin: 0.3em;
}

.tb_true:hover, .tb_false:hover, .tb_false:hover, .tb_error:hover, .tb_wait:hover, .tb_district:hover{
 box-shadow: inset 0px 0px 10px 0px #777;
}

.tb_nobonus{
 box-shadow: inset 0px 0px 0px 0px #fff, 0px 0px 0px 0px #fff;
}
.tb_nobonus:hover{
 box-shadow: inset 0px 0px 10px 0px #777, 0px 0px 0px 0px #fff;
}

.tb_rwait{
 box-shadow: inset 0px 0px 0px 0px #fff, 0px 0px 0.5em 0.2em #ff0;
}

.tb_rwait:hover{
 box-shadow: inset 0px 0px 10px 0px #777, 0px 0px 0.5em 0.2em #ff0;
}

.tb_reject{
 box-shadow: inset 0px 0px 0px 0px #fff, 0px 0px 0.5em 0.1em #a00;
}
.tb_reject:hover{
 box-shadow: inset 0px 0px 10px 0px #777, 0px 0px 0.5em 0.1em #a00;;
}

.tb_accept{
 box-shadow: inset 0px 0px 0px 0px #fff, 0px 0px 0.5em 0.1em #0a0;
}
.tb_accept:hover{
 box-shadow: inset 0px 0px 10px 0px #777, 0px 0px 0.5em 0.1em #0a0;
}

.results_legend{
border: 0px solid red;
font-size: 0.7em;
display: inline-block; 
width: 48%; 
box-sizing: border-box;
vertical-align: top;
}

.teams_field{
 border: 2px solid #fff;
 background-color: #ccc;
 max-width: 24.5em;
 box-shadow: inset 0px 0px 1.5em 0px #999, 0px 0px 0.4em 0em #666;
 color: #000;
}

.teams_field_legend{
 border: 0.1em solid #999;
 background-color: #fff;
 font-weight: 600;
 padding: 0.2em 0.5em;
 border-radius: 0.6em;
 box-shadow: 1px 1px 4px #999;
 -moz-user-select : none;
 user-select: none;
 color: #000;
}

.change_question_field_div, .change_question_field_apel_div{
 font-size: 0.7em;
 border: 1px solid #fff;
 background-color: #eee;
 display: inline-block;
 float: left;
 padding: 10px 10px 20px 10px;
 margin-bottom: 20px;
 margin-right: 15px;
 text-align:center;
 box-shadow: inset 0px 0px 10px 0px #999, 0px 0px 15px 2px #666;
 color: #000;
 eight: 6.5em;
}

.change_question_field_div{
 max-height: 170px;
}
.change_question_field_apel_div{
width: 90%;
max-width: 1000px;
}

.change_question_input_div{
 border: 0px solid #999;
 background-color: #eee;
 display: inline-block;
 padding: 0px 0.1em;
 text-align:center;
 overflow: hidden;
}

.plusminus_button{
 font-size: 1.5em;
 border: 1px solid #ccc;
 text-align:center;
 display: inline-block;
 padding: 0.34em 0.5em;
 cursor: pointer;
 margin: 0px;
 font-weight: 600;
 width: 1em;
 eight: 1.5em;
 user-select: none;
 -moz-user-select : none;
 overflow: hidden;
}

.change_question_field{
 border: 1px solid #ccc;
 font-size: 1.5em;
 text-align: center;
 width: 3em;
 height: 2em;

}


.type_answer{
 border: 1px solid #777;
 width: auto;
 position: fixed;
 background-color: #fff;
}

.ta_off{
 display: none;
}
.ta_on{
 display: block;
 z-index: 999;
}

.setbonus{
 padding: 7px 10px;
 background-color: #fff;
 user-select: none;
 -moz-user-select : none;
}

.setbonus:hover{
 background-color: #ddd;
}

.pole1_field, .pole2_field{
 border: 0px solid red;
 display: inline-block;
 height: 1.3em;
 margin: 1px;
 padding: 0.2em;
}

.pole1_field{
 text-align: right; 
 width: 6em;
}

.pole2_field{
 text-align: left; 
 width: 15em;
}

.flash_fon{
 position: fixed;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.6);
 display: none;
 z-index: 80;
}

.edit_team_field{
 font-size: 0.8em;
 position: fixed;
 width: 400px;
 left: calc(50% - 200px);
 top: calc(50% - 150px);
 border: 2px solid #999;
 background-color: #ddd;
 color: #000;
 display: none;
 text-align: center;
 padding: 1em 1em;
 z-index: 81;
}

.edit_team_info{
 position: fixed;
 max-width: 200px;
 width: 200px;
 left: calc(50% - 200px);
 top: calc(50% - 250px);
 border: 2px solid #999;
 background-color: #ddd;
 display: none;
 text-align: center;
 padding: 10px 0px;
 z-index: 81;
 color: #000;
}

.closecross{
 border: 2px solid #999;
 width: 17px;
 height: 17px;
 text-align: center;
 padding: 3px;
 font-weight: 600;
 border-radius: 50%;
 background-color: #fff;
 font-size: 0.8em;
 position: absolute;
 top: 0px;
 left: calc(100% - 30px);
 cursor: pointer;
 color: #000;
}

div.instruction .closecross{
 top: 5px;
 left: calc(100% - 30px);
 box-shadow: 0px 0px 10px 0px #555;
}

.team_list_area{
 width: 270px;
 height: 100px;
 margin: 5px;
}

.req_field::after{
 content: "*"; 
 color: #f55; 
 font-weight: 600;
 font-size: 1.1em;
}

.message{
 color: #f55;
 border: 1px solid #999;
 padding: 5px 10px;
 margin: 0px 0px 15px 2px;
 font-weight: 600;
 font-size: 0.8em;
 background-color: #eee;
 width: 500px;
 display: none;
}

.monitorsetting_field{
 border-top: 2px dashed #aaa;
 padding: 15px 0px 5px 20px;
 margin: 15px 0px;
 font-size: .85em;
 color: #fff;
}

.instruction{
 border: 0px solid #ccc;
 width: 850px;
 height: 700px;
 position: fixed;
 left: calc(50% - 450px);
 top: calc(50% - 350px);
 padding: 20px 20px;
 font-size: 1.1em;
 overflow: hidden;
 z-index: 100; 
}

.instruction_text{
 border: 2px solid #ccc;
 overflow: auto;
 height: 95%;
 color: #ddd;
 background-color: #555;
 padding: 10px 30px;
 margin: 10px 10px;
 text-shadow: 1px 1px 6px #333;
 box-shadow: inset 0px 0px 10px 3px #444, 0px 0px 15px 3px #555;
}

.instruction p{
 text-indent: 30px;
 text-align: justify;
 line-height: 1.5;
}                 

.instruction li{
 list-style: disc; 
 margin-left: 50px;
 list-style-position: outside;
}

.instruction li.comment{
 list-style: none; 
 margin-left: 50px;
 list-style-position: outside;
 text-align: justify;
}

li.ins_simple{
 list-style-position: outside;
 text-align: justify;
}

.instruction_on{
 display: block;
}

.instruction_off{
 display: none;
}

.sel{
 font-size: 1.1em;
 font-weight: 600;
 color: #fff
}

.AllAnswersDoneButton{
 margin-top: 12px;
 font-size: 1.3em;
}


.double_dot{
font-size: 1.2em;
margin: 0 0.2em; 
width: 2.5em; 
border: 0px dotted gray; 
text-align: center; 
display: inline-block;
}

.schedule{
border: 0px solid #fff;
width: 100%;
max-width: 600px;
min-width: 320px;
color: #fff;
text-align: left;
display: block;
}

.schedule_date{
border: 0px solid #fff;
text-align: center;
margin: 2em 0em 1em 0em;
font-size: 1.1em;
}

.schedule_time_left, .schedule_time_right{
position: absolute;
border: 0px solid #fff;
display: inline-block;
padding: 0.2em;
vertical-align: top;
}

.schedule_time_left{
text-align: left;
left: 3.4em;
width: 3.4em;
}
.schedule_time_right{
text-align: right;
left: 0em;
width: 2.8em;
}

.schedule_position{
border: 0px solid #fff;
display: inline-block;
padding: 0.2em;
max-width: 70%;
min-width: 120px;
position: relative;
vertical-align: top;
margin-left: 9.0em;
text-indent: -1.6em;
}

.schedule_line{
border: 0px solid #0ff;
width: 100%;
height: auto;
position: relative;
}

.questions_list{
 text-shadow: 1px 1px 3px #222;
 font-size: 0.9em;
}

.good_add_question{
 color: #6f6;
}

.release_question_button{
 cursor: pointer;
 text-decoration: underline;
}

.release_question_button:hover{
 background-color: #666;
 color: #fff;
 cursor: pointer;
 text-decoration: underline;
}

.tour_button, .info_button{
 display: inline-block;
 border: 2px solid #fff;
 box-shadow: inset 0px 0px 1.5em 0px #999, 0px 0px 0.4em 0em #666;
 border-radius: 0.4em;
 color: #000;
 margin: 0.5em 0.3em;
 padding: 0.3em 0.7em;
 cursor: pointer;
}

.tour_button:hover, .info_button:hover{
 box-shadow: inset 0px 0px 1.5em 0px #555, 0px 0px .4em 0px #555;
}

.tour_button{
 background-color: #ccc;
}

.info_button{
 font-size: 0.7em;
 font-weight: 600;
 background-color: #ccc;
}

.apel_button{
 display: inline-block;
 margin: 0em 0em 0em 0.7em;
 padding: 0em 1em;
 border: 1px solid #ccc;
}


.apel_textarea{
 width: 100%;
 height: 10em;
}

.apel_info{
 padding: 0.5em 1em;
 text-shadow: 0em 0em 0.1em #333;
 color: #fff;
}

.apel_info_show{
 display: block;
}

.apel_info_hidden{
 display: none;
}

.apel_info_good{
 background-color: #070;
}
.apel_info_warning{
 background-color: #900;
}

#lookwindow{
border: 1px solid #fff;
position: fixed; 
left: 0px;
top: 0;
z-index: 99999;
font-weight: 800;
font-size: 12px;
color: #fff;
text-shadow: 2px 2px 5px #555;
padding: 10px;
background-color: rgba(100,100,100,0.7);
box-shadow: inset 0px 0px 10px #aaa, inset -13px -5px 5px rgba(200,200,200,0.2), 2px 2px 40px 10px rgba(0,0,0,.5);
border-radius: 5px;
display: block;
}

</style>