.center{
	text-align:center;
}
/**	Match Game Challenge Form	**/
div.match-form-container{
	position:relative;
	margin:0 auto;
	padding:0 10px;
	height:100%;
	overflow-y:auto;
}

.match-form-line{
	position:relative;
}
.match-form-line.title-text{
	position:relative;
	font-size:16px;
	color:#4cafcf;
	border-radius:.5rem;
}/***group score form***/
.match-form-line.gp{
	position: relative;
    padding: 4px 8px;
    margin: 0 0 10px 0;
    border: 1px solid #d1d9e0;
    border-radius: .5rem;
	text-align: left;
}
.match-form-line.gi{
	position:relative;
	padding:0px;
	margin:0 0 10px 0;
	border-left:none;
	border-right:none;
}
.match-form-line .gp-start{
	position:relative;
	font-size:16px;
	height:22px;
	line-height:22px;
	padding-left:5px;
}
.match-form-line .gi-start{
	position:relative;
	font-size:16px;
	padding-left:5px;
	color:#4cafcf;
}
.match-form-line .inner-container{
	position:relative;
	margin-top:10px;
	z-index:10;
	padding-left: 16px;
}
.match-form-line .gp-end{
	position:relative;
	height:22px;
	line-height:22px;
	font-size:13px;
	padding-left:5px;
	color:#9f9f9f;
}
.match-form-line .gi-end{
	position:relative;
	height:22px;
	line-height:22px;
	font-size:13px;
	padding-left:5px;
	color:#9f9f9f;
}
.match-form-line .mask{
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:100%;
	cursor:pointer;
	z-index:3;
}

.inner-container .match-form-line.records{
	cursor:pointer;
	border:1px solid white;
}
.inner-container .match-form-line.records:hover{
	border:1px dashed #9f9f9f;
}

div#detail_record{
	position:relative;
	margin:0 20px 0 27px;
	width:853px;
}
#detail_record .record-board{
	position:relative;
}
.record-board .detail-record-ctn{
	display:inline-block;
	vertical-align:top;
	width:420px;
	font-size:14px;
	color:#4cafcf;
	margin:4px 0;
}
.record-board .detail-record-ctn.correct{
	background-color:#7fba00;
}
.record-board .detail-record-ctn.wrong{
	background-color:#ba4000;
}
.record-board .detail-record-ctn.margin{
	margin-left:13px;
}
.detail-record-ctn span{
	display:inline-block;
	vertical-align:top;
}
.detail-record-ctn .qa-text{
	width:190px;
	height:24px;
	line-height:24px;
	color:white;
}
.detail-record-ctn .vs{
	width:40px;
	height:24px;
	line-height:24px;
	color:#efefef;
}
#detail_record .close-btn{
	position:relative;
	height:15px;
	line-height:15px;
	background-color:#4cafcf;
	font-size:14px;
	color:white;
	cursor:pointer;
}
#detail_record .close-btn:hover{
	background-color:#4ca7c7;
}
/***********************/
.match-form-line span.title{
	display:inline-block;
	margin: 0 0 10px 17px;
	height:20px;
	line-height:20px;
	border:none;
	font-size:16px;
	color:#4cafcf;
}
.match-form-line span.title.timestamp {
	width:230px;
}
.match-form-line span.title.score {
	width:150px;
}
.match-form-line span.title.email {
	width:300px;
}
.match-form-line span.title.map{
	width:80px;
}
.match-form-line.records span{
	display:inline-block;
	color:#333;
	margin:0 0 7px 17px;
	height:18px;
	line-height:18px;
	font-size:13px;
}
.match-form-line.records span.timestamp{
	width:200px;
}
.match-form-line.records span.score{
	width:150px;
	font-weight:bold;
}
.match-form-line.records span.email{
	width:300px;
	font-weight:bold;
}
.match-form-line.records span.map{
	width:80px;
}

/**	Buttons for MG	**/
.mg-common-btn{
	display:inline-block;
	width:126px;
	height:30px;
	line-height:30px;
	vertical-align:bottom;
	padding:0 17px;
	margin: 7px 20px 7px 0;
	font-size:17px;
	color:white;
	background-color:#4cafcf;
	cursor:pointer;
	text-align:center;
}
.mg-common-btn:hover{
	background-color:#4ca7c7;
}
.mg-common-btn.sink{
	background-color:#4ca1bb;
}


div.travel-user-board {
	position:relative;
	z-index:2;
	margin:0px auto;
}
div.travel-user-board div.travel-title-menu {
	z-index:99;
	position:absolute;
	opacity:0.85;
	height:47px;
	line-height:47px;
	background-color:white;
	box-shadow:0 0 5px #0e9200;
	max-width:880px;
	width: 90vw;
	clear:both;
	top:-5px;
	left:50%;
	transform: translate(-50%, 0);
}
div.travel-title-menu div.button-sets {
	float:right;
	margin:15px 10px 15px auto;
}

/**	Game Container & Content Area	**/
div.travel-user-board div.outer-container {
	position:relative;
	max-width:860px;
	padding:40px 10px 15px 10px;
	margin:0px auto;
	border-radius:10px;
	background-color:#f2f2f2;
}
div.outer-container div.great-window{
	position:relative;
	border-radius:7px;
	background-color:white;
	padding:10px 10px 20px 10px;
	margin:0 auto;
	box-shadow:0 0 5px lightGrey;
}
#mapBody {
    position: relative;
    padding: 0px;
    margin: 0px;
	display: flex;
	flex-wrap: wrap;
}
div.great-window #mapBody #mapGameLeft {
	position:relative;
    border: 0px;
	background-color:white;
	width: 100%;
    padding: 0px;
    margin: 0px;
}
div.great-window #mapBody #mapGameRight {
	position:relative;
    border: 0px;
	background-color:white;
	width: 100%;
    padding: 0px;
    margin: 0px;
}
@media (min-width: 992px) {
	div.great-window #mapBody #mapGameLeft {
		width: 220px;
	}
	div.great-window #mapBody #mapGameRight {
		width: 600px;
	}
}
div.great-window div.map-title{
	padding:0px;margin:0px;
	border-bottom:1px solid #d7d7d7;
	height:79px;
}
div.great-window div.map-title span{
	padding:15px 10px;
	margin:0px;
	font-size:20px;
	font-weight:300;
	color:#0e9200;
}
div.great-window div.map-title span.tiny{
	padding:0px 10px;
	font-size:13px;
	font-weight:normal;
	color:#212529;
}

#selected_count {
	margin: 0 12px;
	font-size: 16px;
	font-weight: bold;
}

#selecting_state {
	padding: 4px 8px;
	height: 32px;
	text-align: center;
	border-radius: 4px;
	flex-grow: 1;
}
#selecting_state.active {
	background: #198754;
	color: white;
}

#mapGameRight div#mapContainer {
	position:relative;
	margin:10px 0;
	width:100%;
	height:450px;
	border-radius:5px;
	box-shadow:0px 1px 4px rgba(0,0,0,0.25) inset;
	overflow:hidden;
}

#mapContainer .scroll{
	position:absolute;
	z-index:89;
	background-color:#09e200;
	opacity:0.75;
}
#mapContainer .scroll:hover{
	opacity:0.95;
}
#mapContainer .scroll.top{
	top:0px;
}
#mapContainer .scroll.bottom{
	bottom:0px;
}
#mapContainer .scroll.right{
	right:0px;
	top:29px;
}
#mapContainer .scroll.left{
	left:0px;
	top:29px;
}
#mapContainer .vertical{
	width:39px;
	height:441px;
}
#mapContainer .vertical span{
	display:inline-block;
	color:white;
	padding:100px 0px 100px 1px;
	position:relative;
	margin:0 auto;
}
#mapContainer .horizontal{
	height:29px;
	width:100%;
}
#mapContainer .horizontal span{
	display:inline-block;
	color:white;
	padding:6px 49px 7px 49px;
	position:relative;
	margin:0 auto;
}
#mapContainer #mapSlider{
	position:absolute;
	background-color:#efefef;
	width:2289px;
	height:1744px;
}
#mapContainer .map_button {
	position: absolute;
    width: 40px;
    height: 40px;
    opacity: 0.7;
    cursor: pointer;
    z-index:100000;
}
#mapContainer #zoom_in {
    left: 8px;
    top: 8px;
}
#mapContainer #zoom_out {
    left: 58px;
    top: 8px;
}
#mapContainer #reset_map_pos {
    left: 108px;
    top: 8px;
}

div#mapNames{
	position:relative;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	margin: 12px 0;
	width: 100%;
}
@media (min-width: 992px) {
	div#mapNames{
		display: block;
		overflow: hidden;
		margin: 0;
	}
}
div.easy-info {
	position:relative;
	background:url(/legacy/img/bar-sets.png) no-repeat;
	background-position:0px -380px;
	height:32px;
    width: 210px;
	padding: 0px;
	margin:7px 0px 0px 0px;
}
div.easy-info span.out {
	float:right;
    margin: 0px;
    padding: 0px;
	height:inherit;width:5px;
	background:#ffffff url(/legacy/img/bar-sets.png) no-repeat;
	background-position:right -380px;
}
div.easy-info a.tiny-mentions {
	background-position:right -512px;
	margin:4px 0px 4px 5px;
	height:23px;
	line-height:23px;
	color:#6b6b6b;
	font-size:12px;
	float:left;
}
div.easy-info a.tiny-mentions span {
	background-position:0px -512px;
	margin:0px 11px 0px 0px;
	padding:2px 4px 2px 15px;
	height:19px;
    width: 170px;
    text-align: center;
}
div.easy-info a.tiny-mentions span em {
	font-style:normal;
	font-weight:bold;
	padding:0px 5px;
	border-radius:5px;
	background-color:#dedede;
}
div.easy-info a.complete span em,div.easy-info a.destination span em {
	background-color:#c9f7c5;
	color:#095e00;
}
div.easy-info a.going span em,div.easy-info a.stop span em {
	background-color:#f7efc5;
	color:#cc5600;
}
div.easy-info a.prepare span em,div.easy-info a.share span em {
	background-color:#c5e2f7;
	color:#0085e2;
}
div.easy-info a.total:hover,div.easy-info a.pass-through:hover  {
	background-position:right -420px;
}
div.easy-info a.total:hover span,div.easy-info a.pass-through:hover span{
	background-position:0px -420px;
}
div.easy-info a.complete:hover {
	background-position:right -443px;
}
div.easy-info a.destination:hover {
	background-position:right -443px;
}
div.easy-info a.complete:hover span{
	background-position:0px -443px;
}
div.easy-info a.destination:hover span{
	background-position:0px -443px;
}
div.easy-info a.select_0 {
	background-position:right -0px;
}
div.easy-info a.select_0 span{
	background-position:0px -0px;
}
div.easy-info a.select_0:hover {
	background-position:right -240px;
}
div.easy-info a.select_0:hover span{
	background-position:0px -240px;
}
div.easy-info a.select_1 {
	background-position:right -24px;
}
div.easy-info a.select_1 span{
	background-position:0px -24px;
}
div.easy-info a.select_1:hover {
	background-position:right -264px;
}
div.easy-info a.select_1:hover span{
	background-position:0px -264px;
}
div.easy-info a.select_2 {
	background-position:right -48px;
}
div.easy-info a.select_2 span{
	background-position:0px -48px;
}
div.easy-info a.select_2:hover {
	background-position:right -288px;
}
div.easy-info a.select_2:hover span{
	background-position:0px -288px;
}
div.easy-info a.select_3 {
	background-position:right -72px;
}
div.easy-info a.select_3 span{
	background-position:0px -72px;
}
div.easy-info a.select_3:hover {
	background-position:right -312px;
}
div.easy-info a.select_3:hover span{
	background-position:0px -312px;
}
div.easy-info a.select_4 {
	background-position:right -96px;
}
div.easy-info a.select_4 span{
	background-position:0px -96px;
}
div.easy-info a.select_4:hover {
	background-position:right -336px;
}
div.easy-info a.select_4:hover span{
	background-position:0px -336px;
}
div.easy-info a.select_5 {
	background-position:right -120px;
}
div.easy-info a.select_5 span{
	background-position:0px -120px;
}
div.easy-info a.select_5:hover {
	background-position:right -360px;
}
div.easy-info a.select_5:hover span{
	background-position:0px -360px;
}
div.easy-info a.select_6 {
	background-position:right -144px;
}
div.easy-info a.select_6 span{
	background-position:0px -144px;
}
div.easy-info a.select_6:hover {
	background-position:right -384px;
}
div.easy-info a.select_6:hover span{
	background-position:0px -384px;
}
div.easy-info a.select_7 {
	background-position:right -168px;
}
div.easy-info a.select_7 span{
	background-position:0px -168px;
}
div.easy-info a.select_7:hover {
	background-position:right -408px;
}
div.easy-info a.select_7:hover span{
	background-position:0px -408px;
}
div.easy-info a.select_8 {
	background-position:right -192px;
}
div.easy-info a.select_8 span{
	background-position:0px -192px;
}
div.easy-info a.select_8:hover {
	background-position:right -432px;
}
div.easy-info a.select_8:hover span{
	background-position:0px -432px;
}
div.easy-info a.select_9 {
	background-position:right -216px;
}
div.easy-info a.select_9 span{
	background-position:0px -216px;
}
div.easy-info a.select_9:hover {
	background-position:right -456px;
}
div.easy-info a.select_9:hover span{
	background-position:0px -456px;
}
div.easy-info a.select_ready {
	background-position:right -480px;
}
div.easy-info a.select_ready span{
	background-position:0px -480px;
}
div.easy-info a.select_ready:hover {
	background-position:right -504px;
}
div.easy-info a.select_ready:hover span{
	background-position:0px -504px;
}
div.easy-info a.going:hover,div.easy-info a.stop:hover {
	background-position:right -466px;
}
div.easy-info a.going:hover span,div.easy-info a.stop:hover span {
	background-position:0px -466px;
}
div.easy-info a.prepare:hover,div.easy-info a.share:hover {
	background-position:right -489px;
}
div.easy-info a.prepare:hover span,div.easy-info a.share:hover span {
	background-position:0px -489px;
}
.author-info {
	font-size:14px;
	color:#0e9200;
	line-height:20px;
	padding:0px;margin:0px;
}
div.main_map {
    z-index: 1;
}
img.state_map_img {
    position: absolute;
    opacity: 0.5;
    padding: 0px;
    margin: 0px;
    z-index: 2;
    left: 0px;
    top: 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.map_box {
    position: absolute;
    z-index: 11;
    border: 0px;
    background-image: url('../img/no_such_img');
}
.pointer_cursor {
    cursor: pointer;
}
.hand_cursor {
    cursor: url('../img/cursor_hand.cur'), url('img/cursor_hand.cur'), default;
}
.hand_drag_cursor {
    cursor: url('../img/cursor_drag_hand.cur'), url('img/cursor_drag_hand.cur'), default;
}
div.map_times {
    position: absolute;
    z-index: 10;
    font-family: "Times New Roman", Serif;
    font-size: 20px;
    font-weight: bold;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
img.map_times_bg {
    position: absolute;
    display: none;
    z-index: 8;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
img.map_times_angle {
    position: absolute;
    display: none;
    z-index: 9;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
div.button_times {
    font-family: "Times New Roman", Serif;
    font-size: 10px;
    font-weight: bold;
}
div.score {
	font-size:16px;
	color:#000000;
	line-height:20px;
	padding:0px;margin:0px;
}
table.score_table {
	width: 100%;
    text-align: center;
    color:#000000;
    margin:3px;
    font-family: "Times New Roman", Serif;
}
tr.header_row {
    font-size: 17px;
    font-style: bold;
	color:#0e9200;
}
tr.row {
	display: table-row;
    font-size: 17px;
	color:#000000;
}
div.popup_container {
    overflow: auto;
    height: 100%;
    width: 100%;
    float: center;
	text-align: left;
	padding: 20px 12px;
}
@media (min-width: 992px) {
	div.popup_container {
		padding: 20px 30px;
	}
}
div.make_challenge_container {
    position: relative;
    overflow: auto;
    height: 100%;
}
/*div.page_no_set {
    float:right;
}
a.page_no {
}
*/

/*************************************************
/**	CSS Style of Sign Up Form		**
/*************************************************/

select {
	-webkit-appearance:none;
}


div#pre_game_container {
	display: flex;
	position:relative;
	text-align:left;
	margin:0px auto;
}

#j2game {
	margin: auto;
}

div.form-div {
	position:relative;
	margin:40px 20px;
}


div.form-div div.form-container {
	padding:20px 30px;
}
div.form-container div.form-row {
	display: flex;
	clear:both;
	margin-bottom:12px;
	text-align: left;
}
div.form-container div.text-row {
	clear:both;
	margin:5px 0px;
	height:30px;
	color:#5cc300;
	line-height:30px;

}
div.form-container div#info-text, div.status {
	clear:both;
	font-size:16px;
	margin:12px 0px;
	min-height:18px;
	color:#ff5c00;
	line-height:18px;
}
div.form-container div.form-row div.inner-row label{
	margin-right:20px;
	text-align:left;
	padding:4px 0px;
	font-size:14px;
	font-weight:bold;
	color:#4cafcf;
	margin-bottom: 0;
}
div.form-container div.form-row div.inner-row label span{
	color:#0e9200;
}
div.form-container div.form-row div.full-row {
	clear:both;
}
div.form-container div.form-row div.inner-row div#preview-img {
	height:60px;
	width:300px;
	overflow:hidden;
	line-height:30px;
	font-size:14px;
	color:#0e9200;
}
div.form-container div.form-row div.inner-row div#preview-img img {
	height:60px;
}
div.form-container div.form-row div.inner-row input,select {
	width:274px;
	font-size:16px;
	margin:2px 10px 2px 0px;
	padding:4px 8px 4px 8px;
	border:1px solid #d8d8d8;
	border-radius:.375rem;
}
div.form-container div.form-row div.full-row input {
	width:400px;
}
div.form-row div.full-row select#country {
	width:400px;
}
div.form-container div.form-row div.inner-row div.inner-selector {
	width:630px;
}
div.form-container div.form-row div.inner-row div.inner-selector a {
	float:left;
	min-width:70px;
	height:26px;
	padding:2px 4px;
	margin:0px 1px;
	background-color:#ffffff;
	color:#0e9200;
	line-height:26px;
	text-align:center;
}
div.form-container div.form-row div.inner-row div.inner-selector a.selected {
	outline:1px solid #25b000;
}
div.form-container div.form-row div.left-row{
}
div.form-container div.form-row div.right-row{
	margin-left: auto;
}
.form-button-row {
	width:240px;
	height:42px;
	line-height:42px;
	font-size:18px;
	color:white;
	text-align:center;
	margin:5px 0;
	clear:both;
	cursor:pointer;
	border-radius: .375rem;
	background-color: #4cafcf;
}
.form-button-row:hover{
	background-color:#4ca7c7;
}
.form-button-row.disabled{
	cursor: not-allowed;
	opacity: 0.7;
}
div.form-row div.inner-row a {
	text-align:center;
	float:right;
	width:80px;
	height:30px;
	margin-right:60px;
	line-height:30px;
	font-size:14px;
	color:#0e9200;
}
div.form-row div.inner-row a:hover{
	color:white;
	background-color:#25b000;
}

div.challenge_container {
    height: 100%;
    width: 100%;
}
table.challenge_cab {
    height: 100%;
    width: 100%;
}
.challenge_container_osc, .challenge_container_osp, .challenge_container_dnc, .challenge_container_dnp {
    overflow: auto;
    height: 25%;
    width: 100%;
}
.challenge_box_osc {
    height: 100px;
    width: 500px;
    background-image: url('/map_game/img/osc.png');
}
.challenge_box_osp {
    height: 100px;
    width: 500px;
    background-image: url('/map_game/img/osp.png');
}
.challenge_box_dnc {
    height: 100px;
    width: 500px;
    background-image: url('/map_game/img/dnc.png');
}
.challenge_box_dnp {
    height: 100px;
    width: 500px;
    background-image: url('/map_game/img/dnp.png');
}
span.general_answer {
    color: #000000;
}
span.wrong_answer {
    color: #FF0000;
}
#ctry_selector {
	background-color: #fff3cd;
	font-weight: bold;
}
#ctry_selector_info {
	display: none;
	background-color: #f8d7da;
	border-radius: .375rem;
	border: 1px solid #f1aeb5;
	color: #58151c;
	padding: 1rem;
	margin-bottom: 8px;
}

/**	Map Game Challenge Form	**/
div.map-form-container{
	position:relative;
	margin:0 auto;
	height:600px;
	overflow-y:auto;
}
div.map-form-container .inner-map-form-container{
	position:relative;
	margin:0 0 30px 0;
	padding:10px 0 0 0;
	border:1px solid #d1d9e0;
	border-radius:.5rem;
}
.map-form-line{
	position:relative;
}
.map-form-line.title-text{
	position:relative;
	font-size:16px;
	margin-bottom:8px;
}

.map-form-line span.title{
	display:inline-block;
	margin: 0 0 10px 17px;
	height:20px;
	line-height:20px;
	border:none;
	font-size:16px;
	color:#4cafcf;
}
.map-form-line span.title.timestamp {
	width:250px;
}
.map-form-line span.title.score {
	width:100px;
}
.map-form-line span.title.email {
	width:350px;
}
.map-form-line span.title.nickname{
	width:350px;
}
.map-form-line.records span{
	display:inline-block;
	color:#333;
	margin:0 0 7px 17px;
	height:18px;
	line-height:18px;
	font-size:13px;
}
.map-form-line.records span.timestamp{
	width:250px;
}
.map-form-line.records span.score{
	width:100px;
}
.map-form-line.records span.email{
	width:350px;
}
.map-form-line.records span.nickname{
	width:350px;
}