/**
 * Panels CSS file
 *
 * @author Guangcong Luo
 */

/* Global layout */

html,
body,
div,
form {
	padding: 0;
	margin: 0;
	color: #f8f8f2;
}

body,
textarea,
.textbox {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 11pt;
}

a {
	color: #B38CFF;
}
a:hover {
	color: #B38CFF;
}

button {
	cursor: pointer;
	font-size: 9pt;
	padding: 3px 6px;
	background: none;
	color: #f8f8f2;
	border: 1px solid rgba(255,255,255,0.3);
}

a img {
	border: 0;
}

.sep {
	display: none;
}

.textbox {
	border: 1px solid #A6BBD4;
	margin: 0;
	padding: 2px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10pt;
	border: 1px solid #AAAAAA;
	border-radius: 3px;
	color: #f8f8f2;
	background: none;
}





/* header layout */

.userbar {
	float: right;
}

.nav,
.nav li,
.nav-play,
.nav-play li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
}

.nav {
	padding: 15px 6px 15px 6px;
}

.header .nav {
	padding: 15px 0 15px 155px;
}

.header .nav-play {
	padding: 15px 0 15px 10px;
}

.nav .button {
	position: relative;
	padding: 5px 10px;
	margin: 0 -1px 0 0;
	border-radius: 0;
}

.nav .button img {
	position: absolute;
	top: -8px;
	left: -150px;
}

.nav .button:hover {
	z-index: 10;
}

.nav li:first-child .button {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.nav li:last-child .button {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

a.button {
	padding: 5px 10px;
	display: inline-block;
}
.nav a.button {
	display: inline;
}

.evo-desc {
	display: inline-block;
    font-size: 12px;
    margin-left: 10px;
}

.button.cur,
.button.cur:hover,
.button:disabled,
.button:disabled:hover {
	color: #888888;
	background: #f8f8f8;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button.cur:hover {
	border-color: #888888;
}
.button:disabled {
	cursor: default;
}

.button:hover {
	background: #cfcfcf;
	background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#cfcfcf));
	background: -moz-linear-gradient(top,  #f2f2f2,  #cfcfcf);
	background: linear-gradient(top,  #f2f2f2,  #cfcfcf);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#cfcfcf');
	border-color: #606060;
	color: #222222;
}

.button:active {
	background: -webkit-gradient(linear, left top, left bottom, from(#cfcfcf), to(#f2f2f2));
	background: -moz-linear-gradient(top,  #cfcfcf,  #f2f2f2);
	background: linear-gradient(top,  #cfcfcf,  #f2f2f2);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfcfcf', endColorstr='#f2f2f2');
}

.greenbutton {
	background: hsl(100,30%,93%);
	background: -webkit-gradient(linear, left top, left bottom, from(hsl(100,30%,97%)), to(hsl(100,30%,84%)));
	background: -moz-linear-gradient(top,  hsl(100,30%,97%),  hsl(100,30%,84%));
	background: linear-gradient(top,  hsl(100,30%,97%),  hsl(100,30%,84%));
	border-color: hsl(100,30%,70%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#e3e3e3');
}

.greenbutton:hover {
	background: hsl(100,30%,87%);
	background: -webkit-gradient(linear, left top, left bottom, from(hsl(100,30%,94%)), to(hsl(100,30%,77%)));
	background: -moz-linear-gradient(top,  hsl(100,30%,94%),  hsl(100,30%,77%));
	background: linear-gradient(top,  hsl(100,30%,94%),  hsl(100,30%,77%));
	border-color: hsl(100,30%,41%);
}

.greenbutton:active {
	background: hsl(100,30%,77%);
	background: -webkit-gradient(linear, left top, left bottom, from(hsl(100,30%,77%)), to(hsl(100,30%,83%)));
	background: -moz-linear-gradient(top,  hsl(100,30%,77%),  hsl(100,30%,83%));
	background: linear-gradient(top,  hsl(100,30%,77%),  hsl(100,30%,83%));
	border-color: hsl(100,30%,41%);
}

.footer {
	font-size: 9pt;
	color: #999999;
	margin-top: 40px;
	text-align: center;
}

/* panel layout */

.pfx-topbar {
	padding: 0;
	margin: 0;
	text-align: center;

	height: 50px;
	background: #181818;
	
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8EEFC', endColorstr='#D7DEEA');
	border-bottom: 1px solid rgb(118, 118, 118);
}
.pfx-topbar .userbar {
	padding: 12px 15px 0 10px;
}
.titlebar.pfx-title {
	border-top: 0;
	border-left: 0;
}
.pfx-panel {
	margin-left: -1px;
	border-left: 1px solid rgb(118, 118, 118);
	background: #181818;
}
.pfx-go-left, .pfx-go-right {
	position: absolute;
	display: block;
	top: 0px;
	bottom: 0;
	width:35px;
	background: #181818;
	margin: 0 0 0 -1px;
	padding: 0;
}
.pfx-go-left {
	left: 0;
	/*background: #FFFFFF url(go-left.png) no-repeat scroll left 20px center;*/
}
.pfx-go-right {
	right: 0;
	/*background: #FFFFFF url(go-right.png) no-repeat scroll right 20px center;*/

	border-left: 1px solid rgb(118, 118, 118);
}
.pfx-go-left:hover, .pfx-go-right:hover {
	/*background-color: #DEE6F5;*/
}
.pfx-go-left:active, .pfx-go-right:active {
	/*background: #C9CFD6;*/
}

#reset-cache {
	text-align: center;
    width: 120px;
    border: 1px solid #B38CFF;
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    cursor: pointer;
}	

#rom-upload-panel {
	position: absolute;
	bottom: 10px;
	left: 150px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	border: 1px solid #B38CFF;
	border-radius: 5px;
	background: #2b2b2b;
	color: #e8e8e8;
}

#rom-upload-panel label {
	font-size: 12px;
}

#rom-upload-panel input[type="file"] {
	font-size: 12px;
	color: #e8e8e8;
	background: #2b2b2b;
	border: 1px solid #444;
	border-radius: 4px;
	padding: 2px 6px;
}

#rom-upload-panel input[type="file"]::file-selector-button {
	border: 1px solid #B38CFF;
	background: #2b2b2b;
	color: #e8e8e8;
	border-radius: 4px;
	padding: 2px 8px;
	margin-right: 8px;
	cursor: pointer;
}

#rom-upload-panel input[type="file"]::-webkit-file-upload-button {
	border: 1px solid #B38CFF;
	background: #2b2b2b;
	color: #e8e8e8;
	border-radius: 4px;
	padding: 2px 8px;
	margin-right: 8px;
	cursor: pointer;
}

#rom-status {
	margin-left: 6px;
	font-size: 11px;
	color: #cfcfcf;
	max-width: 260px;
	white-space: pre-wrap;
}

@media (max-width: 520px) {
	#rom-upload-panel {
		left: 10px;
		right: 10px;
		bottom: 60px;
		flex-wrap: wrap;
	}
	#rom-status {
		width: 100%;
		margin-left: 0;
	}
}

.pfx-body, h2.pfx-body {
	max-width: 720px;
	margin: 0 auto;
	box-sizing: border-box;
	background: rgba(255,255,255,0.1);
	min-height: 100vh;
	position: relative;
}

.pfx-loading {
	position: absolute;
	top: 20px;
	left: 50%;
	margin: 0 0 0 -80px;
	width: 160px;
	text-align: center;

	border: 1px solid #acb6e7;
	color: #9ca6d7;
	background: #EEF0FA none;
	padding: 5px 0;
	border-radius: 5px;
	font-size: 18pt;
}

.pfx-backbutton {
	display: block;
	padding: 2px 4px;
	margin: 3px 8px 0 5px;
	background: #F0F5FC none;
	border: 1px solid #A6BBD4;
	text-decoration: none;
	font-size: 9pt;
	float: left;
	white-space: nowrap;
	border-radius: 6px;
}
.pfx-backbutton:first-letter {
	position: relative;
	font-size: 8pt;
	vertical-align: top;
}
.pfx-backbutton:hover {
	background: #E1E8F0 none;
	border: 1px solid #889EBC;
	text-decoration: none;
	color: #2A3A56;
}
.pfx-backbutton:active {
	padding: 3px 4px 1px 4px;
	background: #C9CFD6;
	color: #000000;
	border-color: #7689A3;
}

/* popup */

.pfx-popup-bg {
	position: fixed;
	top: 0; bottom: 0; left: 0; right: 0;
	height: 100%;
	width: 100%;
	background: #d1dceb none;
	z-index: 10;
	opacity: 0.3;
	filter: alpha(opacity=30);
}

.pfx-popup {
	position: absolute;
	padding: 15px;
	background: #F5F7FE;
	border: 1px solid #a6bbd4;
	z-index: 11;

	margin: -1px 0;

	border-radius: 6px;
}

/* topbar */

.pfx-topbar .header {
	margin: 0;
	width: auto;
	min-height: 48px;
}
@media all and (min-width: 900px) {
	.pfx-topbar .header {
		margin: 0 auto;
		max-width: 605px;
	}
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

p {
	line-height: 130%;
}

.desc-diff {
  color: #1abc9c;      
  font-weight: 600; 
}

.new-text, .vanilla-text {
  display: flex;
  align-items: flex-start;
}

.vanilla-text .desc-body {
	text-decoration: line-through;
}

.desc-label {
  width: 40px;
  margin-right: 4px;
  flex-shrink: 0; /* never collapse */
}

.desc-body {
  flex: 1;
}

h1 {
	text-align: center;
	margin: 0;
	padding: 15px;
	font-size: 16pt;
}
.pfx-backbutton {
	margin-top: 22px;
	background: none;
}

.ladderlist {
	max-width: 240px;
}
.ladder {
	padding: 0 15px 15px 15px;
	max-width: 600px;
}
.ladder table {
	margin: 0 auto;
}
.ladder table, .ladder td, .ladder th {
	border-collapse: collapse;
	border: 1px solid #BBBBBB;
}
.ladder td, th {
	padding: 3px 5px;
}
.ladder th {
	text-align: left;
	font-size: 9pt;
	background: #EEEEEE;
}

.laddernav, .laddernav li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.laddernav {
	margin: 0 15px 15px 15px;
}

a.subtle {
	text-decoration: none;
}
a.subtle:hover {
	text-decoration: underline;
}

.laddernav .button {
	display: block;
	position: relative;
	padding: 5px 10px;
	margin: 0 0 -1px 0;
	border-radius: 0;
}
.laddernav .button:hover {
	z-index: 10;
}
.laddernav .button.nav-first {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.laddernav .button.nav-last {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

/* replay */

.linklist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.linklist a {
	display: block;
	margin: 2px 0px 8px 0px;
	padding: 3px 7px 4px 7px;
	border: 1px solid #BBCCDD;
	background: #F8FBFD;

	border-radius: 4px;
	text-decoration: none;
	color: #336699;
	text-shadow: #ffffff 0px -1px 0;
	box-shadow: 1px 1px 1px #D5D5D5;
	cursor: pointer;

	overflow: hidden;
	white-space: nowrap;
}
.linklist a small {
	font-size: 9pt;
	color: #6699CC;
}
.linklist a:hover {
	border: 1px solid #8899AA;
	background: #F1F4F9;
	color: #224466;
}
.utilichart, .utilichart li {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: block;
	clear: both;
	word-wrap: normal;
}

.utilichart li > a, .utilitychart li > div {
	display: block;
	height: 30px;
	padding: 0 0 0 4px;
	border: 1px solid transparent;
	margin: 0 5px 1px 5px;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

ul {
	padding: 0;
}


.utilichart .filter,
.searchboxwrapper .filter {
	padding:1px 3px;
	border-radius: 3px;
	border: 1px solid #777;
	background: #EEE;
	color: black;
	font-size: 9pt;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	cursor: pointer;
}
.utilichart .filter:hover,
.searchboxwrapper .filter:hover {
	color: #f8f8f2;
	text-decoration: line-through;
}
.searchboxwrapper .filter.noclear:hover {
	color: black;
	text-decoration: none;
	cursor: default;
}
.utilichart .filter i,
.searchboxwrapper .filter i {
	color: #f8f8f2;
}
.utilichart .filter:hover i,
.searchboxwrapper .filter:hover i {
	color: #BB2222;
}
.resultheader,
.utilichart li.resultheader,
.utilichart .result {
	height: 36px;
	padding: 1px 0 0 0;
	contain: strict;
}
.message .utilichart .result, .chat .utilichart .result, .notice .utilichart .result {
	height: auto;
	contain: none;
}
.result p,
.resultheader p,
.utilichart .result p {
	padding: 7px 0 0 8px;
	margin: 0;
}
.utilichart h3,
.dexentry h3,
.resultheader h3 {
	margin: 5px 0 0 -1px;
	padding: 3px 8px;
	font-family: Verdana, sans-serif;
	font-size: 10pt;
	background: none;
	color: #f8f8f2;
	border: 1px solid #AAAAAA;
	border-left: none;
	border-right: none;
}
.utilichart li > em {
	display: block;
	padding: 0 8px;
	font-size: 10pt;
}
.utilichart .col {
	float: left;
	padding-top: 7px;
	height: 22px;
	font-size: 9pt;
	color: #f8f8f2;
}
.utilichart .iconcol {
	padding-top: 0px;
	width: 40px;
	height: 30px;
}
.utilichart .iconcol span {
	display: block;
	width: 40px;
	height: 30px;
	background: transparent none no-repeat scroll 0px -8px;
}
.utilichart .itemiconcol {
	padding-top: 3px;
	width: 24px;
	height: 27px;
}
.utilichart .itemiconcol span {
	display: block;
	width: 24px;
	height: 24px;
	background: transparent none no-repeat scroll 0px 0px;
}
.utilichart .numcol {
	width: 24px;
	padding-right: 5px;
	text-align: right;
	color: #f8f8f2;
	padding-top: 8px;
	font-size: 8pt;
	white-space: nowrap;
}
.utilichart .statcol,
.utilichart .bstcol,
.utilichart .labelcol,
.utilichart .widelabelcol,
.utilichart .pplabelcol {
	padding-top: 1px;
	height: 28px;
	width: 24px;
	text-align: right;
	font-size: 8pt;
}
.utilichart .labelcol {
	text-align: center;
	width: 30px;
	margin-left: -2px;
}
.utilichart .widelabelcol {
	text-align: center;
	width: 50px;
}
.utilichart .pplabelcol {
	text-align: center;
	width: 18px;
	padding-right: 5px;
}
.utilichart .bstcol {
	padding-left: 2px;
}
.utilichart .labelcol em,
.utilichart .widelabelcol em,
.utilichart .pplabelcol em,
.utilichart .statcol em,
.utilichart .bstcol em {
	color: #f8f8f2;
	font-size: 7pt;
	font-style: normal;
}
.utilichart .stattitlecol {
	padding-top: 2px;
	width: 20px;
	text-align: right;
	font-size: 7pt;
	color: #f8f8f2;
}
.utilichart .namecol {
	padding-top: 6px;
	height: 23px;
	width: 120px;
	color: #f8f8f2;
	font-size: 10pt;
}
.utilichart .pokemonnamecol {
	padding-top: 6px;
	height: 23px;
	width: 127px;
	color: #f8f8f2;
	font-size: 10pt;
	white-space: nowrap;
}
.utilichart .shortpokemonnamecol {
	padding-top: 6px;
	height: 23px;
	width: 118px;
	color: #f8f8f2;
	font-size: 10pt;
	white-space: nowrap;
}
.utilichart .movenamecol {
	padding-top: 6px;
	height: 23px;
	width: 152px;
	color: #f8f8f2;
	font-size: 10pt;
}
.utilichart .shortmovenamecol {
	padding-top: 6px;
	height: 23px;
	width: 112px;
	color: #f8f8f2;
	font-size: 10pt;
}
.utilichart .tagcol {
	padding-top: 6px;
	height: 24px;
	width: 34px;
	border-right: 1px solid #CCCCCC;
	margin-right: 5px;
	text-align: center;
	color: #f8f8f2;
	font-size: 10pt;
}
.utilichart .levelcol {
	padding-top: 6px;
	padding-left: 4px;
	padding-right: 4px;
	height: 24px;
	width: 46px;
	border-right: 1px solid #CCCCCC;
	margin-right: 5px;
	text-align: center;
	color: #f8f8f2;
	font-size: 10pt;
}
.utilichart.encounterchart .tagcol {
	width: 30px;
	padding-left: 4px;
	padding-right: 4px;
}
.utilichart.encounterchart .levelcol {
	width: 40px;
}
.utilichart.encounterchart .shortpokemonnamecol {
	width: 92px;
}
.utilichart.encounterchart li > a {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
.utilichart.encounterchart .col {
	float: none;
}
.utilichart.encounterchart a > span[style*="float:left"] {
	float: none !important;
	display: flex;
	align-items: center;
	min-height: 26px;
}
.utilichart .tagcol.shorttagcol {
	margin-right: 1px;
}
.utilichart .typecol {
	width: 70px;
	padding: 0px;
}
.utilichart .abilitycol {
	padding-top: 8px;
	height: 21px;
	font-size: 8pt;
	width: 86px;
	text-align: center;
	white-space: nowrap;
}
.utilichart .twoabilitycol {
	padding-top: 1px;
	height: 28px;
	font-size: 8pt;
	width: 86px;
	text-align: center;
	white-space: nowrap;
}
.utilichart .hacol {
	font-style: italic;
}
.utilichart .unreleasedhacol {
	font-style: italic;
	text-decoration: line-through;
}
.utilichart b {
	color: #B38CFF;
	text-decoration: underline;
}
.utilichart small {
	font-size: 8pt;
}
.utilichart small b {
	font-weight: normal;
}
.utilichart .illegalcol em {
	padding: 2px 4px;
	height: auto;
	border: 1px solid #AA2222;
	color: #AA2222;
	border-radius: 4px;
}
.utilichart .filtercol em {
	padding: 2px 4px;
	height: auto;
	border: 1px solid #22AA22;
	color: #22AA22;
	border-radius: 4px;
}
.utilichart .typecol img {
	margin-right: 6px;
	width: auto;
	margin-top: 6px;
}

.utilichart .typecol img:nth-child(2n) {
	transform: translate(4px, 4px);
}

.utilichart .typecol img.b {
	opacity: 1;
	outline: #B38CFF solid 1px;
	outline-offset: 0;
	background: #B38CFF;
}

.vnl {
	font-size: 12px;
	line-height: 22px
}

.pos {
	color: green;
}

.neg {
	color: #FF5555;
}

.utilichart .itemdesccol,
.utilichart .abilitydesccol,
.utilichart .movedesccol {
	white-space: nowrap;
	padding-top: 8px;
	font-size: 8pt;
	width: 488px;
	height: 21px;
	overflow: hidden;
	color: #f8f8f2;
}
.utilichart .movedesccol {
	width: 284px;
}
.utilichart .itemdesccol {
	width: 464px;
}

.utilichart .sortrow {
	border-bottom: 1px solid #888;
	height: 20px;
	color: #f1f1f1;
	overflow: hidden;
}

.utilichart .sortcol {
	font-family: Verdana, sans-serif;
	font-size: 8pt;
	background: transparent;
	color: #f1f1f1;
	float: left;
	border-radius: 0;
	border: 0;
	padding: 0 0 0 0;
	text-align: left;
	height: 20px;
}
.utilichart .sortcol.cur {
	font-weight: bold;
	color: #B38CFF;

}
.utilichart .sortcol:hover {
	font-weight: bold;
	/*background: #F0F0F0;*/
	/*color: ;*/
}
.utilichart .sortcol.numsortcol.cur,
.utilichart .sortcol.numsortcol.cur:hover {
	font-weight: bold;
	cursor: default;
	color: #B38CFF;
}
.utilichart .numsortcol {
	padding-left: 10px;
	width: 48px;
}
.utilichart .pnamesortcol {
	width: 127px;
}
.utilichart .typesortcol {
	width: 87px;
}
.utilichart .abilitysortcol {
	width: 157px;
}
.utilichart .statsortcol {
	width: 24px;
	text-align: right;
}
.utilichart .movenamesortcol {
	padding-left: 10px;
	width: 159px;
}
.utilichart .movetypesortcol {
	width: 35px;
}
.utilichart .powersortcol {
	width: 30px;
}
.utilichart .accuracysortcol {
	width: 30px;
}
.utilichart .ppsortcol {
	width: 23px;
}

@media (max-width: 480px) {
	.sortrow {
		display: none;
	}
}
.pokedex {
	margin: 0 10px;
	text-align: center;
}
.pokedex h1 {
	margin: 0;
	padding: 80px 0 40px 0;
	font-size: 36pt;

	transition: padding 0.2s, font-size 0.2s;
	-webkit-transition: padding 0.2s, font-size 0.2s;
}
.pokedex.aboveresults h1 {
	margin: 0;
	padding: 12px 0 6px 0;
	font-size: 14pt;

	transition: padding 0.2s, font-size 0.2s;
	-webkit-transition: padding 0.2s, font-size 0.2s;
}
.pokedex h1 a {
	color: #f8f8f2;
	text-decoration: none;
}
.pokedex .buttonbar {
	display: block; /* I'm not sure if any browsers newer than IE5 have this bug, but it's sort of habit */
}

.type.type-icon {
	height: 14px;
	width: 32px;
	font-size: 10px;
	line-height: 14px;
	margin-top: 6px;
	margin-right: 1px;
}

.pokedex .buttonbar .button {
	padding: 3px 10px;
	display: none;
}
.pokedex.aboveresults .buttonbar {
	display: none;
}
.searchboxwrapper {
	margin: 0 6px 10px 0;
	position: relative;
}
.searchbox {
	width: 100%;
	font-size: 20px;
	padding-left: 10px;
	height: 80px;
	background: none;
	color: #f8f8f2;
	border: 1px solid #f8f8f2;
}
.searchbox-filters {
	position: absolute;
	top: 2px;
	left: 3px;
	text-align: left;
}

.pfx-body {
	max-width: 640px;
}

.dexentry h1 {
	text-align: left;
	padding: 18px 12px 6px;
}
.dexentry h1 code {
	font-size: 11pt;
	font-weight: normal;
	font-family: Verdana, sans-serif;
	margin-left: 5px;
	color: #f8f8f2;
}
.dexentry .tier {
	display: none;
}
.dexentry .sprite {
	float:left;
	padding:10px 10px 10px 10px;
}
.dexentry p, .dexentry h2 {
	padding: 0 10px;
}
.dexentry .location-map-gallery {
	padding: 0 10px 18px;
}
.dexentry .location-map-gallery h2 {
	padding: 18px 0 10px;
	margin: 0;
}
.dexentry .location-map-list {
	display: grid;
	gap: 14px;
}
.dexentry .location-map {
	margin: 0;
	border: 1px solid rgba(248, 248, 242, 0.18);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	overflow: hidden;
}
.dexentry .location-map img {
	display: block;
	width: 100%;
	height: auto;
}
.dexentry dl {
	padding: 0 10px;
	margin: 0 0 1em 0;
}
.dexentry dt {
	padding: 0;
	margin: 10px 0 0 0;
	font-size: 9pt;
	font-weight: bold;
	color: #f8f8f2;
}
.dexentry dd {
	padding: 0 0 0 10px;
	margin: 0;
}
.dexentry .fa-mars {
	font-weight: bold;
	color: #001144;
}
.dexentry .fa-venus {
	font-weight: bold;
	color: #440022;
}
/*	margin-left: 106px; */
.dexentry dl.typeentry,
.dexentry dl.sizeentry {
	float: left;
	padding-left: 0;
	margin: 0;
	width: 130px;
}

.dexentry dl.itementry {
	width: 100%;
	padding-left: 0px;
}
.dexentry dt.catchrateentry-label {
	clear: left;
}
.dexentry dd.catchrateentry {
	padding-left: 0;
	width: 100%;
}
.catchrate-summary {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	margin: 6px 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.04);
	text-align: left;
	color: #f1f1f1;
	-webkit-box-shadow: none;
}
.catchrate-summary[disabled] {
	cursor: default;
	opacity: 0.7;
}
.catchrate-summary:hover {
	background: rgba(255, 255, 255, 0.04);
	color: #f1f1f1;
	border: 1px solid rgba(255, 255, 255, 0.3);;
}

.catchrate-summary-value {
	font-weight: bold;
}
.catchrate-chevron {
	font-size: 12px;
	transition: transform 0.15s ease;
}
.catchrate-summary.expanded .catchrate-chevron {
	transform: rotate(180deg);
}
.catchrate-calculator {
	margin-top: 8px;
	padding: 12px;
	border: 1px solid #666;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.03);
}
.catchrate-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: end;
}
.catchrate-control {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.catchrate-control-slider {
	flex: 1 1 220px;
}
.catchrate-control-slider input[type="range"] {
	width: 100%;
	accent-color: #50fa7b;
	cursor: pointer;
}
.catchrate-control-slider input[type="range"]:hover {
	accent-color: #50fa7b;
}
.catchrate-control-percent {
	flex: 0 0 90px;
}
.catchrate-control-percent input {
	width: 100%;
	box-sizing: border-box;
}
.catchrate-hp-inline {
	font-size: 12px;
	color: #f8f8f2;
}
.catchrate-control-group {
	margin-top: 12px;
}
.catchrate-control-label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: bold;
}
.catchrate-button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.catchrate-button-group .button {
	margin: 0;
	border-radius: 999px;
	padding: 4px 10px;
	top: 0;
	font-size: 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #f1f1f1;
	-webkit-box-shadow: none;
}
.catchrate-button-group .button.active,
.catchrate-button-group .button.active:hover {
	text-decoration: none;
	font-weight: 600;
	background: rgba(255,255,255,0.1);
}
.catchrate-results {
	margin-top: 12px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 8px 12px;
}
.catchrate-result-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.catchrate-result-row strong {
	text-align: right;
}
.dexentry dl.colentry {
	float: left;
	width: 225px;
	display: none;
}
.dexentry dl.colentry dt {
	margin-top: 0;
}
.dexentry dl.sizeentry {
	font-size: 9pt;
}
.dexentry dl.abilityentry {
	margin-top: 65px;
	margin-left: 106px;
}
.dexentry dl.movetypeentry {
	margin: 0;
}
.dexentry dl.powerentry,
.dexentry dl.accuracyentry,
.dexentry dl.ppentry {
	float: left;
	margin: 0;
	width: 100px;
}

.powerentry span, .accuracyentry span {
	display: inline-block;
    font-size: 12px;
    line-height: 29px;
    transform: translateY(-8px);
    margin-left: 10px;
    font-weight: bolder;
}

.dexentry dl.powerentry dd {
	font-size: 24pt;
}
.dexentry dl.accuracyentry dd {
    padding-top: 3px;
	font-size: 20pt;
}
.dexentry dl.ppentry dd {
    padding-top: 2px;
	font-size: 13pt;
    color: #f8f8f2;
}
.dexentry dl.accuracyentry {
	width: 120px;
}
.dexentry .minor {
	color: #f8f8f2;
    display: block;
	font-size: 8pt;
}

.movetag {
	padding-left: 8px;
	color: #f8f8f2;
	font-weight: bold;
	font-size: 10pt;
}
.dexentry .movetag {
	padding-left: 18px;
}
.movetag small {
	font-size: 9pt;
	font-weight: normal;
}

table.stats,
table.evos,
table.sprites {
	border-spacing: 0;
}
table.stats td,
table.stats th,
table.evos td,
table.evos th {
	vertical-align: middle;
	margin: 0;
	padding: 1px 6px 1px 0;
	border: 0;
}

table.stats {
	margin-top: -15px;
}
table.stats td,
table.stats th {
	text-align: right;
}

table.stats th {
	font-size: 9pt;
	font-weight: normal;
}
table.stats small {
	font-size: 10pt;
	font-weight: normal;
}
table.stats .ministat,
table.stats th.ministat {
	text-align: center;
	width: 40px;
	color: #f8f8f2;
}
table.stats th.ministat {
	font-style: italic;
}
table.stats .bst {
	color: #f8f8f2;
}
table.stats td.bst {
	font-weight: normal;
	display: flex;
	justify-content: space-between;
}

table.stats .stat {
	width: 74px;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
}
.statbar span {
	display: block;
	background: #aaa;
	height: 12px;
	width: 50px;
	margin: 1px 0 0 0;
	border-radius: 2px;
}
table.sprites {
	float: left;
}
table.sprites td {
	margin: 0;
	padding: 0;
	width: 98px;
	height: 96px;
	text-align: center;
	vertical-align: middle;
}

@media (max-width:520px) {
	table.stats {
		margin-top: 0;
	}
	table.stats .ministat {
		display: none;
	}
	table.stats td.statbar {
		padding: 1px 0;
	}
	.header .nav-play {
		display: none;
	}
	.nav a.button {
		display: none;
	}
	.nav a.button.nav-first {
		display: inline;
	}
	.nav a.button.cur {
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		display: inline;
	}
	.dexentry dl.abilityentry {
		margin: 0;
		clear: left;
	}
	.catchrate-control-percent {
		flex-basis: 100%;
	}
	.catchrate-results {
		grid-template-columns: 1fr;
	}
}
@media (max-width:340px) {
	table.stats .stat {
		width: 32px;
		font-weight: bold;
		font-size: 10pt;
	}
	table.stats .bst {
		font-weight: normal;
		font-size: 10pt;
	}
	table.stats td,
	table.stats th,
	table.evos td,
	table.evos th {
		padding: 1px 4px 1px 0;
	}
	.dexentry {
		font-size: 10pt;
	}
	table.evos .pokemonicon,
	table.evos .picon {
		display: block;
	}
	.dexentry dd {
		padding: 0 10px 0 16px;
	}
	.catchrate-summary {
		padding: 8px 10px;
	}
}

table.evos .arrow {
	padding: 0;
	font-size: 21px;
}
table.evos .arrow abbr {
	text-decoration: none;
}

.metricchart li {
	height: 30px;
}

.utilichart a {
	border-radius: 4px;
	padding: 1px 1px 1px 5px;
	margin: 0 5px 1px 5px;
	background: transparent;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
}
.utilichart a.active,
.utilichart a.active:hover,
.utilichart.nokbd a:hover {
	padding: 0px 0px 0px 4px;
	border: 1px solid #D8D8D8;
}
.utilichart dl a,
.utilichart.nokbd dl a:hover {
	height: auto;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
}
.utilichart a.sel,
.utilichart a.sel:hover,
.utilichart a.cur,
.utilichart a.cur:hover {
	padding: 0px 0px 0px 4px;
	border: 1px solid #B5B5B5;
}
.utilichart .notfound em {
	display: block;
	padding: 2px 0 4px;
	color: #f8f8f2;
}

.utilichart .content {
	padding: 0 6px;
}
.utilichart {
	padding-bottom: 30px;
}

.type {
	display: inline-block;
	width: 60px;
	height: 14px;
	padding: 1px 0;
	background-color: #CBC9CB;
	/*background: linear-gradient(#CBC9CB,#AAA6AA);*/
	/*border: 1px solid #A99890;*/
	border-radius: 3px;
	color: #FFFFFF;
	font-size: 10px;
	text-align: center;
	text-transform: uppercase;
}

a.type {
	color: #FFFFFF;
	text-decoration: none;
}
a.type:hover {
	opacity: .7;
}

a.subtle {
	color: #B38CFF;
	text-decoration: none;
}
a.subtle:hover {
	text-decoration: underline;
}

h1 a, h1 a.subtle {
	color: #f8f8f2;
}

.type.normal{background-color:#8A8A59;background:linear-gradient(#A8A878,#8A8A59);border-color:#79794E;}
.type.fire{background-color:#F08030;background:linear-gradient(#F08030,#DD6610);border-color:#B4530D;}
.type.water{background-color:#6890F0;background:linear-gradient(#6890F0,#386CEB);border-color:#1753E3;}
.type.electric{background-color:#F8D030;background:linear-gradient(#F8D030,#F0C108);border-color:#C19B07;}
.type.fairy{background-color:#F830D0;background:linear-gradient(#F830D0,#F008C1);border-color:#C1079B;}
.type.grass{background-color:#78C850;background:linear-gradient(#78C850,#5CA935);border-color:#4A892B;}
.type.ice{background-color:#98D8D8;background:linear-gradient(#98D8D8,#69C6C6);border-color:#45B6B6;}
.type.fighting{background-color:#C03028;background:linear-gradient(#C03028,#9D2721);border-color:#82211B;}
.type.poison{background-color:#A040A0;background:linear-gradient(#A040A0,#803380);border-color:#662966;}
.type.ground{background-color:#E0C068;background:linear-gradient(#E0C068,#D4A82F);border-color:#AA8623;}
.type.flying{background-color:#A890F0;background:linear-gradient(#A890F0,#9180C4);border-color:#7762B6;}
.type.psychic{background-color:#F85888;background:linear-gradient(#F85888,#F61C5D);border-color:#D60945;}
.type.bug{background-color:#A8B820;background:linear-gradient(#A8B820,#8D9A1B);border-color:#616B13;}
.type.rock{background-color:#B8A038;background:linear-gradient(#B8A038,#93802D);border-color:#746523;}
.type.ghost{background-color:#705898;background:linear-gradient(#705898,#554374);border-color:#413359;}
.type.dragon{background-color:#7038F8;background:linear-gradient(#7038F8,#4C08EF);border-color:#3D07C0;}
.type.steel{background-color:#B8B8D0;background:linear-gradient(#B8B8D0,#9797BA);border-color:#7A7AA7;}
.type.dark{background-color:#705848;background:linear-gradient(#705848,#513F34);border-color:#362A23;}
.type.question{background-color:#68A090;background:linear-gradient(#68A090,#4E7C6F);border-color:#41685D;}

.type.physical{background-color:#E39088;background:linear-gradient(#E39088,#D65D51);border-color:#A99890;color:#FBC290;}
.type.special{background-color:#ADB1BD;background:linear-gradient(#ADB1BD,#7D828D);border-color:#A1A5AD;color:#E0E2E4;}
.type.status{background-color:#CBC9CB;background:linear-gradient(#CBC9CB,#AAA6AA);border-color:#A99890;color:#F5F4F5;}

.pokemonicon, .picon {
	display: inline-block;
	vertical-align: -6px;
	width: 32px;
	height: 24px;
}
.picon {
	width: 40px;
	height: 30px;
}
.itemicon {
	display: inline-block;
	vertical-align: -6px;
	width: 24px;
	height: 24px;
}

.warning {
	border: 1px solid #F56C11;
	background: #F7DECE;
	border-radius: 3px;
	padding: 5px 9px;
	margin: 1em 2em;
	display: none !important;
}

.utilichart li.result.nuzlocke-location-hit > a {
	border-color: rgba(47, 143, 78, 0.9);
	background: rgba(47, 143, 78, 0.14);
}

.utilichart li.result.nuzlocke-location-hit .ddex-route-location-link {
	border-color: rgba(47, 143, 78, 0.9);
	background: rgba(47, 143, 78, 0.14);
}

.utilichart li.result.nuzlocke-caught-here > a {
	border-color: rgba(47, 143, 78, 1);
	background: rgba(47, 143, 78, 0.2);
}

.utilichart li.result.nuzlocke-owned-elsewhere > a {
	border-color: rgba(161, 74, 74, 0.95);
	background: rgba(161, 74, 74, 0.16);
}

.utilichart .typecol.nuzlocke-sprite-strip,
.nuzlocke-sprite-strip {
	display: flex;
	align-items: center;
	gap: 4px;
}

.utilichart .typecol.nuzlocke-sprite-strip {
	float: right;
	width: auto;
	min-width: 40px;
	padding-top: 0;
	justify-content: flex-end;
}

.nuzlocke-picon {
	flex: 0 0 auto;
}

.utilichart li.result.ddex-route-result {
	height: auto;
	contain: none;
	padding-top: 0;
}

.utilichart .ddex-route-result-inner {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin: 0 5px 1px 5px;
}

.utilichart .ddex-route-location-link {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 0 0 4px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	text-decoration: none;
}

.utilichart .ddex-route-location-name {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	padding-right: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.utilichart .ddex-route-sprite-strip {
	float: none;
	width: auto;
	min-width: 40px;
	margin-left: auto;
	padding-top: 0;
	padding-right: 8px;
	justify-content: flex-end;
}

.ddex-route-toggle-button {
	flex: 0 0 auto;
	min-width: 72px;
	margin: 0 5px 0 0;
	top: 0;
	border-radius: 6px;
	background: none;
    color: #f8f8f2;
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 20px;
    margin-top: 6px;
}

.ddex-route-toggle-button.active,
.ddex-route-toggle-button.active:hover {
	background: rgba(255, 255, 255, 0.14);
}

.ddex-route-panel {
	margin: 0 5px 10px 5px;
	padding: 10px 12px 12px;
	border: 1px solid rgba(248, 248, 242, 0.18);
	border-top: none;
	border-radius: 0 0 8px 8px;
	background: rgba(255, 255, 255, 0.04);
}

.ddex-route-panel-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 12px;
	margin-bottom: 10px;
}

.ddex-route-panel-current {
	font-size: 13pt;
	color: #f8f8f2;
}

.ddex-route-panel-meta {
	font-size: 9pt;
	opacity: 0.82;
}

.ddex-route-family-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ddex-route-family-row {
	padding: 10px 12px;
	border: 1px solid rgba(248, 248, 242, 0.16);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.02);
	cursor: pointer;
}

.ddex-route-family-row:hover {
	border-color: rgba(248, 248, 242, 0.28);
	background: rgba(255, 255, 255, 0.05);
}

.ddex-route-family-row.is-selected {
	border-color: rgba(47, 143, 78, 0.95);
	background: rgba(47, 143, 78, 0.14);
}

.ddex-route-family-main {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.ddex-route-family-text {
	flex: 1 1 auto;
	line-height: 1.4;
}

.ddex-route-family-rate {
	flex: 0 0 auto;
	font-weight: bold;
	white-space: nowrap;
}

.ddex-route-family-location-link {
	color: #f0cf63;
	text-decoration: none;
}

.ddex-route-family-location-link:hover {
	text-decoration: underline;
}

.ddex-route-empty,
.ddex-route-family-locations-empty {
	font-size: 9pt;
	opacity: 0.78;
}

.ddex-advanced-routing-panel {
	padding: 10px 12px 14px;
	border: 1px solid rgba(248, 248, 242, 0.18);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
}

.ddex-advanced-note,
.ddex-advanced-status {
	margin-bottom: 10px;
	font-size: 9pt;
	opacity: 0.82;
}

.ddex-advanced-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 10px 12px;
	margin-bottom: 12px;
}

.ddex-advanced-control {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 150px;
}

.ddex-advanced-control span {
	font-size: 9pt;
	font-weight: 600;
}

.ddex-advanced-toggle-control {
	justify-content: flex-end;
}

.ddex-advanced-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 9pt;
	font-weight: normal;
}

.ddex-advanced-checkbox input {
	margin: 0;
}

.ddex-advanced-control select,
.ddex-advanced-control input {
	min-width: 140px;
}

.ddex-advanced-control input[type="checkbox"] {
	min-width: 0px;
}

.ddex-advanced-run-button {
	top: 0;
	min-width: 96px;
	border-radius: 6px;
}

.ddex-advanced-button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: end;
}

.ddex-advanced-deep-run-button {
	top: 0;
	border-radius: 6px;
}

.ddex-advanced-summary,
.ddex-advanced-result-card {
	margin-top: 12px;
	padding: 12px;
	border: 1px solid rgba(248, 248, 242, 0.18);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
}

.ddex-advanced-summary.met,
.ddex-advanced-result-card.met {
	border-color: rgba(47, 143, 78, 0.95);
	background: rgba(47, 143, 78, 0.12);
}

.ddex-advanced-summary.below,
.ddex-advanced-result-card.below {
	border-color: rgba(240, 207, 99, 0.7);
}

.ddex-advanced-summary-row {
	margin-bottom: 4px;
}

.ddex-advanced-highlight {
	color: #f0cf63;
}

.ddex-advanced-plan {
	margin: 10px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 9pt;
	line-height: 1.45;
	color: #f8f8f2;
}

.ddex-advanced-results {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ddex-advanced-result-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	top: 0;
	margin: 0;
	border-radius: 6px;
	text-align: left;
}

.ddex-advanced-result-title {
	flex: 1 1 auto;
	min-width: 0;
}

.ddex-advanced-result-metric {
	flex: 0 0 auto;
	font-weight: 700;
}

.ddex-advanced-result-body {
	margin-top: 10px;
}

.ddex-advanced-result-meta {
	font-size: 9pt;
	opacity: 0.82;
}

.ddex-advanced-section {
	border: 1px solid rgba(248, 248, 242, 0.14);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.18);
	padding: 10px 12px;
}

.ddex-advanced-breakdown {
	padding: 0;
	overflow: hidden;
}

.ddex-advanced-section-summary,
.ddex-advanced-section-title {
	font-size: 9pt;
	font-weight: 700;
}

.ddex-advanced-section-summary {
	padding: 10px 12px;
	cursor: pointer;
	list-style: none;
}

.ddex-advanced-section-summary::-webkit-details-marker {
	display: none;
}

.ddex-advanced-section-summary::before {
	content: "▸";
	display: inline-block;
	margin-right: 8px;
	transition: transform 0.15s ease;
}

.ddex-advanced-breakdown[open] .ddex-advanced-section-summary::before {
	transform: rotate(90deg);
}

.ddex-advanced-breakdown-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 12px 12px;
	border-top: 1px solid rgba(248, 248, 242, 0.12);
}

.ddex-advanced-breakdown-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.ddex-advanced-breakdown-percent {
	flex: 0 0 auto;
	min-width: 52px;
	font-weight: 700;
}

.ddex-advanced-breakdown-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.ddex-advanced-flow {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ddex-advanced-flow-step {
	margin-top: 10px;
	padding: 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(248, 248, 242, 0.12);
}

.ddex-advanced-flow-step-header {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}

.ddex-advanced-flow-step-index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: rgba(240, 207, 99, 0.18);
	border: 1px solid rgba(240, 207, 99, 0.45);
	font-weight: 700;
	color: #f0cf63;
}

.ddex-advanced-flow-step-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.ddex-advanced-flow-step-title {
	font-size: 8pt;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
}

.ddex-advanced-flow-step-route {
	font-weight: 700;
}

.ddex-advanced-flow-branches {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ddex-advanced-flow-branch {
	padding: 10px;
	border-radius: 8px;
	border: 1px solid rgba(248, 248, 242, 0.14);
	background: rgba(255, 255, 255, 0.04);
}

.ddex-advanced-flow-branch.success {
	border-color: rgba(47, 143, 78, 0.8);
	background: rgba(47, 143, 78, 0.12);
}

.ddex-advanced-flow-branch.failure {
	border-color: rgba(161, 74, 74, 0.75);
	background: rgba(161, 74, 74, 0.12);
}

.ddex-advanced-flow-branch-header {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.ddex-advanced-flow-branch-chance {
	flex: 0 0 auto;
	font-weight: 700;
}

.ddex-advanced-flow-branch-label {
	font-weight: 600;
}

.ddex-advanced-flow-branch-body {
	margin-top: 8px;
}

.ddex-advanced-flow-branch-note {
	margin-bottom: 8px;
	opacity: 0.78;
}

.ddex-advanced-flow-terminal {
	padding: 9px 10px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(248, 248, 242, 0.14);
}

.ddex-advanced-flow-terminal.success {
	border-color: rgba(47, 143, 78, 0.8);
}

.ddex-advanced-flow-terminal.failure {
	border-color: rgba(161, 74, 74, 0.75);
}

@media (max-width: 520px) {
	.utilichart .ddex-route-result-inner {
		flex-wrap: wrap;
		gap: 6px;
	}

	.utilichart .ddex-route-location-link {
		flex: 1 1 100%;
	}

	.ddex-route-toggle-button {
		margin-left: 5px;
	}

	.ddex-route-family-main {
		flex-wrap: wrap;
	}

	.ddex-route-family-rate {
		width: 100%;
	}

	.ddex-advanced-controls {
		flex-direction: column;
		align-items: stretch;
	}

	.ddex-advanced-control {
		min-width: 0;
	}

	.ddex-advanced-run-button {
		width: 100%;
	}

	.ddex-advanced-button-group {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.ddex-advanced-deep-run-button {
		width: 100%;
	}

	.ddex-advanced-result-toggle {
		flex-wrap: wrap;
	}

	.ddex-advanced-breakdown-row,
	.ddex-advanced-flow-branch-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}

.dexentry .nuzlocke-summary {
	margin: 0 10px 12px;
	padding: 10px 12px;
	border: 1px solid rgba(248, 248, 242, 0.18);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.04);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.dexentry .nuzlocke-summary.live {
	border-color: rgba(248, 248, 242, 0.28);
}

.dexentry .nuzlocke-summary.cache {
	border-color: rgba(248, 248, 242, 0.22);
	background: rgba(255, 255, 255, 0.03);
}

.dexentry .nuzlocke-summary.nuzlocke-summary-hit {
	border-color: rgba(47, 143, 78, 0.95);
	background: rgba(47, 143, 78, 0.14);
}

.dexentry .nuzlocke-summary-species {
	font-size: 10pt;
}

.dexentry .nuzlocke-summary-source {
	font-size: 9pt;
	opacity: 0.75;
}

.utilichart .encountermovecol {
	height: auto;
	line-height: 1.25;
	padding-top: 3px;
	white-space: nowrap;
	text-align: left;
}

.encounter-warning-text {
	color: #f0cf63;
	font-weight: bold;
}

.tabbar {
	display: block;
	list-style: none;
	margin: 0;
	padding: 5px 0 0 10px;
	text-align: left;
}
.tabbar.centered {
	padding: 5px 0 0 0;
	text-align: center;
}
/*.tabbar:after {
	content: "";
	display: block;
	height: 6px;
	background: #f8f8f8;
	border: solid 1px #AAAAAA;
	margin: -1px 0 -8px -11px;
}*/
.tabbar.centered:after {
	margin-left: 0;
}
.tabbar li {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tabbar .button {
	position: relative;
	padding: 4px 10px 4px 10px;
	margin: 0 -1px 0 0;
	top: 1px;
	border-radius: 0;
	box-shadow: none;
	font-size: 10pt;
}
.tabbar .button.cur,
.tabbar .button.cur:hover, .tabbar .button {
	color: #f8f8f2;
	background: none;
	box-shadow: none;
	border-color: #AAAAAA;
	border-bottom: 0;
	cursor: pointer;
	padding: 4px 10px 6px 10px;
	top: 6px;
	font-size: 18px;
}

.tabbar .button.cur, .tabbar .button.cur:hover {
	z-index: 10;
	font-weight: 600;
	text-decoration: underline;

}
.tabbar .button.nav-first {
	border-top-left-radius: 5px;
}
.tabbar .button.nav-last {
	border-top-right-radius: 5px;
}

#rom-upload-panel {
	margin: 14px 0 0 0;
    padding: 10px 12px;
    border: 1px solid #B38CFF;
    border-radius: 5px;
    background: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    height: 21px;
}

#rom-upload-panel label {
	font-size: 12px;
}

#rom-upload-panel input[type="file"] {
	margin-left: 6px;
}

#rom-status {
	width: 100%;
	font-size: 12px;
	white-space: pre-wrap;
	color: #444;
}

@media (prefers-color-scheme: dark) {
	#rom-upload-panel {
		background: #202124;
		border-color: #3a3b3c;
		color: #e2e2e2;
	}
	#rom-status {
		color: #c9c9c9;
	}
	#rom-upload-panel input[type="file"] {
		color: #e2e2e2;
	}
}