body{margin: 0; padding: 0; background-color: #101018; font-size: calc(100vw / 32);}
table{width: 100%; border-collapse: collapse; border-spacing: 0;}
th,td{padding:.1em .25em; word-wrap: normal; word-break: keep-all;}
img{width:1em; height:1em;}

.categoly-banner{margin: 1px 1px .5em;background-color: #444; color: white;}
.categoly-banner::before{content: '◆';}
.episode-cell{width: 3em; box-sizing: border-box; text-align: right;}
.mission-name-cell{width: 10em;}
.time-required-cell{width: 5em; text-align: center;}
.resource-cell{width:52px; text-align: right;}
.extra-cell{text-align: right;}
.verbose{display: none;}

.selected{background-color: pink;}
.total-item{text-align: right;}

#main-content{display: block; flex-direction: row; justify-content: center; width: 100%; margin: 0 auto; padding: .5em; box-sizing: border-box;}
#list{position: relative; width: 100%;}
#view{position: fixed; width: 100%; bottom: 0; background-color: #202030; filter: drop-shadow(0 0 4px black); z-index: 1000;}

#mission-list{position: relative; margin-bottom: 12em; background-color: white;}
#mission-list tr:hover{background-color: silver;}
#mission-list .header:hover{background-color: white;}
#mission-list th{border-bottom: 1px solid black; cursor:pointer;}
#mission-list td{border-bottom: 1px solid silver; cursor:pointer;}

#open-option{position: relative; padding-right: 1em; text-align: right; font-size: 1.5em; font-weight: bold; color: white; background: linear-gradient(0.6turn, #555 25%, #101014 30%); cursor: pointer; z-index: 2000;}
#options{position: absolute; right: 0; top: 2em; display: flex; flex-direction: column; width: 140px; margin: 0 0 0 .25em; z-index: 1000; filter: drop-shadow(2px 2px 4px black); font-size: 14px; transition: all .15s ease-in-out; opacity: 0; transform: translateY(-100%);}
#options.open {opacity: 1; transform: translateY(0);}
#options>div{margin:0 0 1em; padding: 0; background: linear-gradient(0.3turn, #ccc 0%, #fff 70%, #ccc 75%, #888);}
#resource-filter>label,#item-filter>label{display: block; word-wrap: normal;}

#selected-missions{position: relative; margin: 0 auto; width: auto; color: white;}
#selected-missions tr:hover{background-color: #404060;}
#selected-missions .header:hover{background-color: transparent;}
#selected-missions th{border-bottom: 1px solid silver;}
#selected-missions td{border-bottom: 1px solid silver; cursor:pointer;}
#selected-missions .total-data{border-top: 2px #8080d0 solid;}
#selected-missions .total-data:hover{background-color: transparent;  cursor: none;}

#group-tab{display: flex; flex-direction: row; justify-items: center;}
.tab{width: 100%; transition: all .15s ease-in-out; color: white; text-align: center; cursor: pointer;}
.selected-tab{background-color: #8080d0; color: black;}

@media screen and (min-width: 384px) {
	body{font-size: 12px;}
}

@media screen and (min-width: 640px) {
	.verbose{display: table-cell;}
}

@media screen and (min-width: 820px) {
	.resource-cell{width:64px;}

	#main-content{display: flex; width: 800px;}
	#open-option{display: none;}
	#options{position: relative; right: auto; top: auto; opacity: 1; transform: translateY(0); z-index: auto;}
	#selected-missions{width: 800px;}
}

@media screen and (min-width: 1000px) {
	body{font-size: 16px;}

	#main-content{width: 980px;}
	#options{width: 168px; margin-left: 1em;}
	#selected-missions{width: 980px;}
}