* {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
input,textarea {
	-webkit-user-select: auto;
}

label {
	cursor: pointer;
}

#contents {
	position: relative;
	background-image: url(img/bg_mji_schedule.png);
}

td, th {
	text-shadow: none;
}
select#workshop_rank,input#groove {
	background-color: rgba(0,0,0,.1);
	border: 1px solid #400;
	color: #400;
	margin: 2px;
	padding: 2px;
	padding-right: 0;
	font-size: 1em;
	text-align: right;
	border-radius: 5px;
}
input#groove:focus {
	color: #000;
}
select#workshop_rank {
	text-align: left;
	margin-right: 1em;
}

.list th, .list td {
	padding: 2px 4px;
}
.list th {
	color: #e0e0e0;
	font-weight: normal;
}

#mij {
	width: 100%;
}

.tab th {
	position: relative;
	padding: .2em 0;
	font-size: 1.5em;
	border: 2px solid rgba(0,0,0,.5);
	border-bottom: none;
	border-radius: 1em 1em 0 0;
	background-color: rgba(0,0,0,.2);
	color: rgba(0,0,0,.5);
	text-shadow: none;
	white-space: nowrap;
	cursor: pointer;
}
.tab th.current {
	background-color: rgba(255,255,255,.5);
	color: #fff;
	text-shadow: -1px 1px 1px #400,1px -1px 1px #400,-1px -1px 1px #400,1px 1px 1px #400;
}
.tab .icons {
	display: inline-block;
	position: absolute;
	right: .5em;
	top: 50%;
	transform: translateY(-50%);
}
.tab .material-icons {
	font-size: 1.2em !important;
	color: rgba(120,0,0,.5);
	text-shadow: none;
	border-radius: .2em;
}
.tab .material-icons:hover {
	background-color: rgba(255,255,255,.5);
	box-shadow: 0 0 4px #fff;
}

#sort_craft.on {
	color: #fff;
	background: rgba(120,0,0,.5);;
}

.tab_main {
	width: 100%;
	vertical-align: top;
}
[data-block]:not(.current) .omit {
	display: none;
}

#craft table {
	margin: 0;
}
#craft th {
	background-color: rgba(192,192,192,.1);
	border: none;
	color: #444;
	text-shadow: 0 0 2px white;
}
#craft th[data-sort] {
	position: relative;
	border: rgba(96,80,80,.4) 1px solid;
	border-radius: 3px;
	box-shadow: 0 0 4px white inset;
}
#craft th[data-sort]:hover {
	background-color: rgba(255,255,255,.2);
	cursor: pointer;
}
#craft th[data-sort].current {
	background-color: rgba(255,240,240,.2);
	box-shadow: 0 0 4px #ca8 inset;
	color: #a76;
	font-weight: bold;
}
#craft th[data-sort].current:after {
	content: '';
	display: inline-block;
	position: absolute;
	width: 12px;
	height: 12px;
	bottom: 0;
	right: 0;
	vertical-align: middle;
	background-image: url(img/toggle1.png);
	background-size: cover;
	opacity: .5;
	transition: transform .1s linear;
	transform-origin: center center;
}
#craft th[data-sort].current.desc:after {
	transform: rotate(180deg);
}
#craft th .material-icons {
	float: right;
	margin-left: .5em;
	color: #c88;
	cursor: pointer;
}
#craft th .material-icons:hover {
	color: #fcc;
}
.craft .object_name:hover {
	text-shadow: 0 0 2px #fff;
}
.craft [data-type]:hover {
	cursor: pointer;
	background-color: rgba(0,128,255,.3) !important;
}
.craft .mark {
	position: relative;
}
.mark:hover .note {
	display: block;
}
.craft .note {
	position: absolute;
	left: 100%;
	color: #fff;
	white-space: nowrap;
	z-index: 1;
}
.craft .note table {
	float: left;
	margin-top: 1em;
}
.note th,.note td {
	white-space: nowrap;
}
.list .craft.bonus>td {
	background-color: #252;
	text-shadow: 0 0 4px #000;
}
.list .craft.bonus.disabled>td {
	background-color: #242;
}
.craft.disabled>td {
	color: #666;
	text-shadow: none;
}
.craft.bonus:not(.disabled) .object_name {
	color: #8f8;
	text-shadow: 0 0 4px #fff;
}
.craft.bonus .object_name:after {
	content: 'Bonus!';
	display: inline-block;
	position: absolute;
	font-size: .5em;
	font-weight: bold;
	padding: .2em;
	color: #f80;
	text-shadow: none;
	background-color: #800;
	border-radius: .8em;
	box-shadow: 0 0 4px #fff;
	transform-origin: right top;
	transform: rotate(10deg);
	z-index: 1;
}
.craft .price {
	padding-right: 24px;
}
.craft.bonus .price:after {
	content: 'x2';
	display: inline-block;
	position: absolute;
	font-size: .5em;
	font-weight: bold;
	padding: .2em;
	color: #f80;
	text-shadow: 0 0 2px #f00;
	transform-origin: right top;
	transform:  translateX(-2px) translateY(1em);
}

[data-type] img {
	width: 2em;
	height: 2em;
}
[data-type=supply] img {
	margin-left: -1em;
}

#schedule table {
	width: 100%;
	padding: 12px 8px;
}
#schedule td {
	padding: .2em .5em;
	border-bottom: 1.5px dashed rgba(0,0,0,.5);
}
#schedule:not(.current) td.schedule {
	text-align: center;
}
#schedule:not(.current) .object_name {
	display: none;
}
.hour {
	font-size: 2em;
	text-shadow: -1px -1px 1px rgba(0,0,0,.5),-1px 1px 1px rgba(0,0,0,.5),1px -1px 1px rgba(0,0,0,.5),1px 1px 1px rgba(0,0,0,.5);
}

.schedule {
	position: relative;
	font-size: 1.4em;
	font-weight: bold;
	color: #844;
	text-shadow: none;
	vertical-align: top;
}
.schedule * {
	position: relative;
	z-index: 1;
}
.schedule:before {
	content: '';
	position: absolute;
	background-color: #ddd;
	border: 2px solid #866;
	border-radius: 8px;
}
#schedule td.schedule {
	width: 100%;
	padding: .5em 2em .5em 1em;
}
#schedule td.schedule:before {
	left: 8px;
	top: 4px;
	right: 0;
	bottom: 4px;
}
#schedule td.schedule:hover:before {
	box-shadow: 0 0 12px #fff inset,0 0 12px #fff inset;
}
.delete {
	position: absolute;
	top: .5em;
	right: .5em;
}
.delete:hover {
	cursor: pointer;
}
.schedule:not(:hover) .delete {
	display: none;
}

.msg_bonus {
	font-size: .8em;
	text-align: center;
	margin-top: .5em;
	padding: .1em .5em;
	background-color: #eb9;
	border: 1px solid #974;
	border-radius: 1em;
}
.schedule:not(.bonus) .msg_bonus {
	display: none;
}

#info {
	padding: 8px 8px;
	color: #400;
	text-shadow: none;
}
.info_form {
	float: right;
	padding: .4em 2em;
	background-color: rgba(0,0,0,.1);
	box-shadow: 0 1px 2px rgba(0,0,0,.5) inset,0 0 2px #fff,0 0 2px #fff;
	border-radius: .5em;
}
.sales_forecast {
	margin-left: 1em;
	font-size: 1.5em;
	font-weight: bold;
}
#recommend {
	float: right;
	margin-right: 1em;
}

.add {
	color: #88f;
	visibility: hidden;
}
.add:hover {
	color: #ddf;
	text-shadow: 0 0 8px #88f;
	visibility: hidden;
	cursor: pointer;
}
.craft:not(.disabled):hover .add {
	visibility: visible;
}

#progress_area {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.4);
	z-index: 1;
}
#progress {
	position: absolute;
	font-size: 2em;
	width: 40%;
	height: 2em;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0,0,64,.5);
	border-radius: .5em;
	border: 3px solid #ccf;
	box-shadow: 2px 2px 8px #000, 0 0 4px #000 inset;
	overflow: hidden;
}
#progress:after {
	content: attr(title);
	display: block;
	position: relative;
	text-shadow: 0 0 4px #000;
	width: 100%;
	height: 100%;
	line-height: 2em;
	text-align: center;
	z-index: 1;
}

#recommend.busy .recommend {
	display: none;
}
#recommend:not(.busy) .recommend_busy {
	display: none;
}

#recommend_result_area {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.5);
	z-index: 1;
}
#recommend_result_area .material-icons {
	background-image: url(img/bg_mji_schedule.png);
	border-radius: 50%;
	padding: .2em;
	transform: translate(50%, -50%);
	color: #400;
	font-size: 2em;
	font-weight: bold;
	cursor: pointer;
}
#recommend_result_area .material-icons:hover {
	color: #c00;
	box-shadow: 0 0 8px #fff;
}

#recommend_result {
	position: relative;
	background-image: url(img/bg_mji_schedule.png);
	margin-top: 4em;
	padding: 1em 1em;
	width: 90%;
	border-radius: 1em;
	box-shadow: 0 0 4px #000;
	font-size: 1em;
}
#recommend_result .close {
	display: inline-block;
	position: absolute;
	right: 0;
	top: 0;
}
#recommend_result .schedule {
	padding: .5em;
	font-size: 1em;
}
#recommend_result .schedule:before {
	left: 0;
	top: 0;
	right: 2px;
	bottom: 2px;
}
#recommend_result .schedule:not(.current) {
	text-align: center;
}
#recommend_result th {
	padding: 0 .5em;
	background-image: url(img/bg_mji_schedule.png);
	position: sticky;
	left: 0;
	z-index: 2;
}
#recommend_result td {
	white-space: nowrap;
}
#recommend_result .hour {
	margin-left: 1em;
	font-size: 1em;
}
#recommend_result td:not(.current) {
	cursor: pointer;
}
.recommend_total {
	font-size: 1em;
	color: #400;
	text-align: center;
	text-shadow: none;
}
.recommend_total.current {
	font-size: 1.4em;
	font-weight: bold;
	cursor: default;
}
#recommend_result td:not(.current) .object_name {
	display: none;
}
#recommend_material {
	color: #400;
}
#recommend_material td {
	vertical-align: top;
}
#recommend_material td:not(.current) .omit {
	display: none;
}
#recommend_material img {
	width: 24px;
	height: 24px;
	vertical-align: middle;
	margin-right: 4px;
}