:root {
  --radius:0.25em;
  --base:#316b6f;
  --basedark:#0a1516;
  --basedark2:#193638;
  --accent:#2F3A54;
  --faint:rgba(255,255,255,.08);
  --faintflat:#42777a;
  --lightera:rgba(255,255,255,.2); /* PHASE OUT. USE OFFWHITE */
  --lighter:#a2bcbe; /* PHASE OUT. USE OFFWHITE */
  --offwhite:#b1c8c9;
  --light:rgba(255,255,255,.45);
  --action:#bf7;
  --offgreen:#3b7276;
  --lightgreen:#6f989a;
  --activeNav:#BBFF7733;
  --neg:#CE8F8D;
  --negstrong:#e3564d;
  --avg:#FDED7D;
  --avg-text:#0a1516;
  --pos:#B9EF85;
  --posstrong:#97ff32;
  --gray:#aaa;
  --lav:#ddaaff;
  --lavlight:#edd1ff;
  --surface-glass: color-mix(in srgb, var(--basedark) 45%, transparent);
  --border-subtle: rgba(255, 255, 255, 0.1);
  --text-bright: #e8f3f2;
  --action-glow: color-mix(in srgb, var(--action) 28%, transparent);
  --drawer-bg: rgb(21, 51, 56);
  --drawer-border: color-mix(in srgb, var(--action) 22%, transparent);
  --header-bg: rgb(19, 45, 52);
  --pageheader-bg: radial-gradient(120% 140% at 78% 20%, rgb(61, 127, 128) 0%, rgb(49, 107, 111) 38%, rgb(26, 64, 69) 72%, rgb(16, 39, 43) 100%);
  --font-sans: "Hanken Grotesk", Helvetica, sans-serif;
  --dx-surface: rgba(255, 255, 255, 0.055);
  --dx-surface-hover: rgba(255, 255, 255, 0.035);
  --dx-border: rgba(255, 255, 255, 0.09);
  --dx-border-subtle: rgba(255, 255, 255, 0.07);
  --dx-inset-highlight: rgba(255, 255, 255, 0.07);
  --dx-overlay: rgba(0, 0, 0, 0.14);
  --dx-text-faint: rgba(233, 243, 241, 0.45);
}
body {
	color:#fff;
	background-color:var(--base); 
	font-family:var(--font-sans);
}
body.accent {
	background-color:var(--accent); 
}
html,body {
	margin:0;
	padding:0;
	/*height: 100%;*/
	font-size: 14px;
}
input::placeholder {
    color:var(--gray);
}
#contentwrap {
	color:#FFFFFF;
	background-color:var(--base);
}
#body {
	min-height:500px;
	font-family: var(--font-sans);
}
#body.accent {
	background-color:var(--base); 
}
/*#content {
	padding-bottom:2em;
}
*/

a {
	cursor:pointer
}

dl, dt, dd {
	margin:0;
	padding:0;
}

header#siteheader {
	background-color:rgba(1,31,35,.96);
	padding:.2em 0;
	text-align:center;
}
header.pageheader {
	padding: 1.25em 0 1em;
	background: var(--pageheader-bg);
	position: relative;
}

.accentStrip {
	background-color: var(--accent);
}
.pageheader h1 {
	font-weight:100;
	font-size:2.7em;
	margin:0.3em 0;
}
.fancy h1 {
  font-weight: 400;
  font-size: 3.2em;
  line-height: 1em;
  font-family: var(--font-sans);
}
header.pageheader h1.center {
	width: 100%;
}
.h1sub {
	font-size: 0.4em;
	font-weight: bold;
	opacity: .4;
	line-height:1.6em;
}
.pageheaderInner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75em;
}
.pageheaderTop {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap-reverse;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1em 1.5em;
	min-height: 100px;
}
.pageheaderh1 {
	flex: 1 1 220px;
	min-width: 0;
	align-self: flex-end;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.pageheaderimg {
	flex: 0 0 auto;
	line-height: 0;
	align-self: flex-end;
}
.pageheaderimg #mainImage {
	float: none;
	display: block;
}
.pageheader .pageNav {
	align-self: flex-start;
}

.pageheader .pageheaderS
.pageheader .wrap>div {
	height:200px;
}
.pageheaderlinks {
	padding-bottom: 1em;
}
.pageheaderlinks a, .lightbutton {
	background-color:rgba(255,255,255,.08);
	border-radius:1em;
	font-size:.75em;
	padding: .5em 1em .4em;
	margin-right:.2em;
}
.pageheaderlinks a.active, .lightbutton.active {
	background-color:rgba(255,255,255,.3);
}
.pageheader .selected .lightbutton {
	color:#2f3b54;
	background-color:#fff;
}

.pageheaderlinks a:hover, .lightbutton:hover, .tcat:hover .lightbutton {
	color:#fff;
	transition: background-color .3s;
	background-color:rgba(255,255,255,.3);
}

/* Segmented page nav (creature/item local tabs) */
.pageNav {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 5px;
	border-radius: 14px;
	background: var(--surface-glass);
	border: 1px solid var(--border-subtle);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.pageNavItem {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 20px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--text-bright);
	cursor: pointer;
	text-decoration: none;
	font-weight: bold;
	transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.pageNavItem:link,
.pageNavItem:visited {
	color: var(--text-bright);
}
.pageNavItem:hover {
	color: #fff;
}
.pageNavItem.active {
	background: var(--nav-active, var(--action));
	box-shadow: var(--nav-active-glow, var(--action-glow)) 0 6px 18px;
	color: var(--nav-active-text, var(--basedark));
}
.pageNavItem.active:link,
.pageNavItem.active:visited,
.pageNavItem.active:hover {
	color: var(--nav-active-text, var(--basedark));
}
.pageNavItem .bxf,
.pageNavItem .bx {
	font-size: 1.15em;
	line-height: 1;
}
#header_logo {
	display:inline-block;
	vertical-align: middle;
	margin-right:.1em;
}
#dogo {
	display:inline-block;
	vertical-align: middle;
	margin-right:.1em;
}
#dogo_image {
	line-height:0
}
#dogo_text, #dogo_image {
	display:inline-block;
	vertical-align: middle;
}
#dogo_name h1 {
	text-transform:uppercase;
}
#dogo_text {
	margin-left:.25em;
	text-align:left;
}

#dogo_tagline {
	color:rgb(169, 194, 192);
	text-transform:none;
	font-size:.5em;
	margin-top:.1em;
}
#mainImage {
	max-width:300px;
	max-height:200px;
	float: right;
}
header h1 {
	display:inline-block;
	font-size:1.5em;
	margin-bottom: .4em;
}
header h1 span {
	vertical-align: middle;
}
header a {
	text-decoration:none;
}
#main {
	padding:0em 0 1em;
}
.wrap, .wrapm, .wrapd { /* d=desktop only, m=mobile only */
	margin:auto;
	max-width:1280px;
}
.wrap, .wrapd {
	padding:0 10px;
}
.tinywrap {
	margin:auto;
	max-width:480px;
	padding:2em .8em 0;
}
.wrapThin {
  margin:auto;
  max-width:680px;
}
.wrapMid {
  margin:auto;
  max-width:840px;
}
.description {
	margin-bottom:2em;
	text-transform:initial;
	font-size: 1em;
	font-weight: normal;
	border-bottom-width:0;
	line-height:1.4em
}
p, ul {
	line-height: 1.5em;
}
p:first-child {
    margin-top: 0;
}
p:last-child {
    margin-bottom: 0;
}
/*
h1 {
	text-transform:uppercase;
}*/
h1 {
	font-size:2em;
	padding:0 0 .1em;
}

h2 {
	color:#FFF;
	font-size:1.5em;
	margin-top:1em;
}
h2.hborder {
	border-bottom:2px solid rgba(255,255,255,.3);
}
h3 {
	font-size:1.2em;
	margin-bottom:.8em;
}
.vtable th {
	text-align:left;
}
.hsub {
	font-weight: normal;
	font-size:.85em;
}
.tinywrap h1 {
	font-size: 3em;
	line-height: 1.1em;
	display: inline-block;
	margin-bottom: 0;
	padding-top: 0;
	margin-top:0em;
	padding-bottom:0;
}

/* CREATURE COMPARISON TABLE */
.boolNeg,.boolPos {
  font-size:1.8em;
}
.boolNeg {
  color:var(--neg);
}
.boolPos {
  color:var(--pos);
}

#creaturesTable .sort {
  cursor: pointer;
  padding:0 0 0 1px;
  vertical-align:bottom;
}
#creaturesTable .sort:hover .ccImage {
  transform: translate(0, -4%);
  transition: transform 0.2s;
}

/* METERS AND BARS */
.vertMeterW, .vertMeter {
	position: absolute;
	top: 0;
	left: 0;
	border-radius:var(--radius);
}
.vertMeterW {
	width: 2px;
	height: 100%;
	background-color: rgba(255,255,255,.3);
}
.vertMeter {
	right: 0;
	height: 0%;
	background-color:var(--action);
	transition: height .3s;
}
.highlightText {
	color:var(--action);
}
.barwrap {
	display:flex;
	flex-direction:row;
	align-items: flex-end;
	height:100px;
}
.bar {
	background-color:var(--lightgreen);
	flex:1;
	margin-right:1px;
}
.bar:hover {
	background-color:#D4FF00;
}
.noBorder {
	border-width:0 !important;
}
a.button {
	text-decoration:none;
}
.pointer {
	pointer-events:all;
}
.inlineIcon {
    height: 1.3em;
    margin-top: -0.2em;
    position: relative;
    vertical-align: middle;
}
input {
	pointer-events:all;
	-webkit-appearance:none;
}
input[type="checkbox"] {
	-webkit-appearance: checkbox;
	box-sizing: border-box;
}
input[type="radio"] {
	-webkit-appearance: radio;
	box-sizing: border-box;
}
input::-webkit-input-placeholder {
  color:#809698;
}
input::-moz-placeholder {
  color:#809698;
}
input:-ms-input-placeholder {
  color:#809698;
}
input:-moz-placeholder {
  color:#809698;
}
.iradio.button {
  background-color:#417578;
  margin:0 0.2em 0.5em 0;
  border:1px solid transparent;
}
.iradio.button:hover {
/*  color:#CCFF98;*/
}
.iradio input {
  display:none;
}
.iradio.selected {
  background-color:#488373;
  color:#CCFF98;
  border:1px solid #CCFF98;
}
.crSettings {
	background-color: #3b7276;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	margin-top: -1em;
	border-top-left-radius: 0px;
}
#levelForm input:focus {
	background-color:#fff !important;
} 
.tameSettingItem {
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	gap:1em;
	margin-right:1em;
	min-width:5em;
	position:relative;
	line-height: 1.2em;
}

.tameSettingValue {
	font-size:1.2em;
	flex-shrink:0;
	flex: 0.6;
}

.tameSettingLabel {
	font-size:0.9em;
	text-align:left;
	flex:1;
}


.seperatorTop {
    border-top: 2px solid var(--faint);
    padding-top: 1em;
}

.tameSettingsContainer {
	display:flex;
	flex-direction:row;
	gap:2em;
	width:100%;
	max-width:640px;
}

.tameSettingsColumn {
	flex:1;
	display:flex;
	flex-direction:column;
	gap:1em;
}

.tameSettingsWrap {
	display:flex;
	flex-direction:row;
}

@media (max-width: 768px) {

	.tameSettingsWrap {
		flex-direction:column;
	}
	


}

@media (max-width: 450px) {

	.tameSettingsContainer {
		flex-direction:column;
		gap:1em;
	}

	.tameSettingsWrap {
		flex-direction:column;
	}

	.tameSettingsContainer {
		flex-direction:column;
		gap:1em;
	}
	
	.tameSettingsColumn {
		flex-direction:column;
		gap:0.5em;
	}
	
	.tameSettingItem {
		/* flex-direction:column; */
		/* align-items:flex-start;
		gap:0.3em;
		min-width:auto; */
	}
	
	.tameSettingLabel {
		text-align:left;
	}
}

.settingPill {
	position: absolute;
	width: 100%;
	top:-2em;
}
.settingPill .lightPill {
	padding:.25em .5em;
	background-color:#63946e;
}


select.dodo {
  /* reset */
  margin: 0;	  
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* styling */
  background-color: white;
  border-width:0;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.6em 2.8em 0.6em 0.8em;

  background-image:
	linear-gradient(45deg, transparent 50%, gray 50%),
	linear-gradient(135deg, gray 50%, transparent 50%),
	linear-gradient(to right, #ccc, #ccc);
  background-position:
	calc(100% - 20px) calc(1em + 2px),
	calc(100% - 15px) calc(1em + 2px),
	calc(100% - 2.5em) 0.5em;
  background-size:
	5px 5px,
	5px 5px,
	1px 1.5em;
  background-repeat: no-repeat;
  max-width:100px;
}

select.dodo:focus {
  background-image:
	linear-gradient(45deg, green 50%, transparent 50%),
	linear-gradient(135deg, transparent 50%, green 50%),
	linear-gradient(to right, #ccc, #ccc);
  background-position:
	calc(100% - 15px) 1em,
	calc(100% - 20px) 1em,
	calc(100% - 2.5em) 0.5em;
  background-size:
	5px 5px,
	5px 5px,
	1px 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}


select.dodo:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

.pad {
	padding:16px
}
.lh {
	line-height:1.45em;
}
.lh2 {
	line-height: 2em;
}
.bold {
	font-weight:bold;
}
.normal {
	font-weight:normal;
}
.smaller {
	font-size:.7em;
	line-height:1.3em;
	font-weight:normal;
	text-transform:initial;
}
.thin {
	font-weight:100;
}
.kindabig {
  font-size: 1.2em
}
/*.kindabigger {
  fontSize: 1.4em,
}
*/
.big {
  font-size:1.5em;
}
.bigger {
  font-size:2em;
}
.bigNum {
  font-size:1.5em;
  color:#FFF;
}
.biggerNum {
  font-size:1.7em;
  color:#FFF;
}
.superBigNum {
  font-size:2em;
  color:#FFF;
}
.superBig {
	font-size:2.5em;
}
.uppercase {
	text-transform:uppercase;
}
.small {
	font-size:.9em
}
sup.sup {
  font-size: 0.5em;
}

/* FONTS */
.ser {
  font-family:'Noto Serif', Georgia, serif;
}


.darkReverse {
	background-color: rgba(0,0,0,.5);
	border-radius: .2em;
	padding: .1em .2em;
	color: var(--base);
	font-weight: bold;
}
.lbox {
	background-color:rgba(255,255,255,.05);
	border-radius:4px;
	padding:.6em 0;
	margin-right:.3em;
	justify-content:center;
}
.lbox .creatureIcon {
	margin:0;
}
.lbox:last-child {
	margin-right:0em;
}
.pill, .lightPill {
	white-space: nowrap;
} 
.pill {
	background-color: #6e979a;
	border-radius:1em;
	padding:.2em .6em .2em;
	color: var(--base);
	text-transform: uppercase;
	font-weight:bold
}
.pill.prim {
	background-color: #969c86;
}
.pillH {
	border-radius:2em;
	padding: .2em .4em .1em;
	border:1px solid #a2bcbe;
	white-space:nowrap;
}

.hidden {
  display:none !important;
}
.darker {
  color:#395658;
}
.dark {
  color:rgba(0,0,0,.35);
}
.bigPill {
  align-items: center;
  display: flex;
  font-weight: bold;
  padding: .2em 0.8em;
  border-radius: 2em;
}
.bigPillReverse {
  background: #ffffff;
  color:var(--base);
}
a {
	color:#fff;
	text-decoration:underline;
	pointer-events:all;
	transition:.2s;
}
a:hover {
	color:#BF7;
}
a:hover h2 {
	color: inherit;
}
.noDec {
	text-decoration:none;
}
.noSelect {
  user-select: none; 
}
textarea, input { outline: none; }
#ncmp-consent-link button {
    background: transparent;
    border: 0;
    color: inherit;
    text-decoration: underline;
}
footer {
	width:100%;
	text-align:center;
	padding:2em 0 3em;
	color:rgba(255,255,255,.4);
	font-size:.9em;
	pointer-events:all;
	background-color: var(--accent);
	/*margin-top:2em;*/
}
footer h3 {
	margin: 0 0 .4em;
}
footer a {
	color:rgba(255,255,255,.5);
	transition:color .5s;
}
footer .mainLinks a:hover {
	color:rgba(255,255,255,1);
}
footer .mainLinks a {
	color: rgba(255,255,255,.7) !important;
	font-weight: bold;
	text-decoration: none;
}
footer li {
	padding: .1em 0;
}
.footersubtle {
	color:inherit;
}
footer a:hover {
	color:rgba(255,255,255,.8);
}
.cols {
	display:flex;
	flex-direction:row;
}
.col {
	flex:1;
}
.col:not(:first-child) {
	padding-left:1.5%;
}
.col:not(:last-child) {
	padding-right:1.5%;
}
.col3 {
	margin:0;
	padding:0;
	list-style-type: none;
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
}
.col4 {
	margin:0;
	padding:0;
	list-style-type: none;
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
}
.col5 {
	margin:0;
	padding:0;
	list-style-type: none;
	-webkit-column-count: 5;
	-moz-column-count: 5;
	column-count: 5;
}
/* responsive col */
.rCol, .rColR { 
  display:flex;
  flex-direction:row;
}

.noMob {
	display:revert;
}
.mobOnly {
	display:none;
}

/* ADMIN COMMANDS NEW */

.cmdi_t {
	outline:none;
  }
  .cmdi_t[contenteditable="true"] {
	padding: 0.4em 0.3em;
	border-radius: 3px;
	background:#ffffff22;
	min-width:3.5em;
  }
  .cmdi_t[contenteditable="true"]:hover,
  .cmdi_t[contenteditable="true"]:focus {
	background:#fff;
	color:var(--base)
  }
.cmdi_t[contenteditable="true"]:hover ~ .cmdi_d,
.cmdi_t[contenteditable="true"]:focus ~ .cmdi_d {
  color: #ffffffcc;
}
  .keyCode {
	background-color: #ffffff11;
	border: 1px solid #ffffff22;
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
	display: inline-block;
	font-family: Monaco, monospace;
	font-size: 0.85em;
	line-height: 1;
	padding: 2px 4px;
	white-space: nowrap;
	color: #fff;
	font-weight: bold;
  }
  .cmdi {
	align-items: flex-end;
  }
  .whiteinputDiv {
	border: 0;
	color: inherit;
	font-size: inherit;
	vertical-align: middle;
	width: 200px;
	display: flex;
	align-self: stretch;
	width: 100%;
	padding: 0.5em;
	flex: 1;
	word-break: break-word;
  }
.whiteinputwb {
  max-width: 40em;
  align-items: center;
}
.button .bxf,
.actionButton .bxf {
  vertical-align: baseline;
  top: 1px;
  position: relative;
}
.subNav .bxf {
  margin-right: 0.4em;
  margin-left:-0.2em;
}
/* Add this to your existing CSS */
.copy-button {
transition: transform 0.05s ease-in-out, background-color 0.05s ease-in-out;
position: relative;
top: 0;
}

.copy-button:active {
transform: translateY(1px);
background-color: #ae6; 
}

.bpl {
display: flex;
align-items: center;
gap: 7px;
padding-right: 8px;
}

.bpl .command-text {
flex: 1;
}

.bpl .copy-button {
flex-shrink: 0;
}
.bpr {
align-items:center;
}

/* When copy button is hovered, highlight the command text */
.bpl .copy-button:hover ~ .command-text,  /* For text inside bpl */
.bpl .copy-button:hover ~ .bpb {  
color: var(--white);
}

/* For the bpb that follows */
.bpl:has(.copy-button:hover) + .bpb {  
color: var(--white);
}

/* Optional: add a smooth transition */
.bpb {
transition: color 0.1s ease-in-out;
}

.copy-button i {
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.copy-button i.bxf-check {
transform: scale(1.3);  /* Slightly larger checkmark */
}

/* This makes the icon fade out during the transition */
.copy-button i.changing {
opacity: 0;
}

.breakword {
word-break: break-word;
}

.admin-config-wrap {
padding: 1.2em .5em .7em;
flex-wrap: wrap;
justify-content: center;
row-gap: 12px;
}

  button {
	font-size:1em;
  }

  /* Add these styles to your existing CSS */
  .scroll-x {
	display: flex;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
	scrollbar-width: none; /* Hide scrollbar in Firefox */
	-ms-overflow-style: none; /* Hide scrollbar in IE/Edge */
	padding: 1em 0;
	margin: 0 auto;
	max-width: 100%;
  }

  .scroll-x::-webkit-scrollbar {
	display: none; /* Hide scrollbar in Chrome/Safari */
  }

  .scroll-x > div {
	flex: 0 0 auto;
  }






  .color-label {
	font-size:0.85em;
	margin-bottom:0.25em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color:var(--offwhite);
	/* color: var(--basedark); */
  }

  /* Simplify color picker to be an inline grid */
  .color-picker-grid {
	margin-top:1em;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 4px;
	/* padding: 12px; */
	/* background: #fff; */
	/* border: 1px solid #ccc; */
	/* border-radius: 4px; */
	font-weight: normal;
  }

  .color-option {
	cursor: pointer;
	text-align: center;
  }

  .color-option:hover .color-swatch {
	border: 2px solid #ffffffcc;
	padding:0px;
  }

  .color-option.active .color-swatch {
	border: 2px solid #ffffff;
	padding:0px;
	box-shadow: 0 0 10px #ffffff66;
	transition: box-shadow 0.2s ease;
  }

  .color-option:hover .color-label {
	color: var(--action);
  }

  .color-option.active .color-label {
	color: var(--action);
	font-weight: bold;
  }

  .color-swatch {
	border-radius: 4px;
	height: 30px;
	margin: 0 auto 2px;
	padding: 1px;
	border: 1px solid #00000011;
  }

  /* Add this CSS to your existing styles */
  .toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(100%);
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 12px 24px;
	border-radius: 4px;
	font-weight: 500;
	z-index: 10000;
	opacity: 0;
	transition: transform 0.3s, opacity 0.3s;
  }

  .toast.show {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
  }

.tcat:hover .subNav, .subNav:hover {
  color: var(--action);
  background-color: var(--activeNav);
}

/* Disable mobile OS-style focus outline on category navigation */
.tcat, .subNav {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-touch-callout: none;
}

.tcat:focus, .subNav:focus {
  outline: none;
}

   .toggleNav .subNav {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 24px;
  }

  .toggleNav .subNav.active::after {
	content: "×";
	font-size: 1.3em;
	line-height: 0.5em;
	/* margin-top: -2px; */
	font-weight: normal;
  }

/*     
  .toggleNav .subNav.active img {
	visibility: hidden;
  } */

  .bpl .copy-button {
	padding: 2px 8px; 
	margin-left: auto;
  }

  .bpl .favorite-btn {
	cursor: pointer;
  }

  .adm-ic img {
	  width: 48px;
	  height: 48px;
	  margin-right: 8px;
	  vertical-align: middle;
	  object-fit: contain;
  }

  .adm-ic .bxf {
	  font-size: 40px;
	  color: #a2bcbe;
  }

  .adm-ic {
	  display: inline-block;
	  width: 56px; /* icon + margin-right */
	  min-width: 56px;
	  vertical-align: middle;
	  overflow: hidden;
  }

  /* .bpc {
	flex-direction: row;
	display: flex;
	align-items: center;
	gap: 8px;
	flex:1;
  } */

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.adm-ic {
  flex: 0 0 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
}

.adm-l {
  flex: 1 1 30%;
  max-width: 250px;
}
.adm-c {
  flex: 1 1 70%;
}


.adm-c, .adm-l {
display: flex;
align-items: center;
}

.adm-l .favorite-btn,
.adm-c .copy-button {
font-size: 1.1em;
margin-right:0.7em;
cursor: pointer;
}

.adm-con {
flex-direction: row;
display: flex;
align-items: center;
flex:1;
}
.adm-c-cmd {
flex-direction: column;
align-items: flex-start;
}

@media (max-width: 768px) {
  .adm-con {
	  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  }

.adm-con .favorite-btn {
  padding: .5em .6em;
}

  .adm-l, .adm-c {
	  flex: 1 1 100%;
  }
}

/* Add this to the existing <style> section */

.tcatIcon {
position: relative; /* Add this to position the badge */
height: 48px;
}

.tcatIconBadge {
	position: absolute;
	top: -5px;
	right: -2px;
	color: #fff;
	background-color:rgba(255,255,255,.25);
	border-radius: 10px;
	padding: 2px 6px;
	font-weight: bold;
	min-width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* box-shadow: 0 1px 4px rgba(0,0,0,0.2); */
}


.command-text {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size:0.9em;
  }
/* Command Chain Box Styles */
.command-chain-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--basedark2);
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.2);
  max-width: 900px;
  margin: auto;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  padding: 1em;
}

.command-chain-box .whiteinputwb {
  max-width: 100%;
}

.command-chain-box .chain-actions {
  display: flex;
  gap: 0.5em;
  margin-left: 0.5em;
  flex-shrink: 0;
}
.command-chain-box .command-text {
    max-height: 8.9em;
    overflow-y: scroll;
}


/* Shift key indicator on copy buttons - no animation, just visual change */
.copy-button.shift-mode .bxf {
  transform: scale(1.1);
  transition: none !important;
  opacity: 1 !important;
}

/* Prevent pulse animation when shift mode is active */
.copy-button.shift-mode .bxf.changing {
  opacity: 1 !important;
  transition: none !important;
}

/* Add padding to main content when chain box is visible */
body:has(#commandChainBox:not([style*="display: none"])) main {
  padding-bottom: 8em;
}

/* DESKTOP */
@media only screen and (min-width: 640px) {
	.hhid:hover .hid {
		display:initial;
	}
	.hid {
		display:none;
	}
} 


/* MOBILE */
@media only screen
and (max-width: 640px) {
	body {
		font-size:.9em;
	}
	h1 {
		/* font-size:2.2em !important; */
	}
	footer {
		font-size:.8em;
	}
	.col4,.col5 {
		margin:0;
		padding:0;
		list-style-type: none;
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
/*	header.pageheader {
		text-align:center;
		height: 280px;
	}
*/	header.pageheader h1 {
		text-align:center;
		font-size:2em;
	}
	.pageheaderTop {
		justify-content: center;
		min-height: 0;
	}
	.pageheaderh1 {
		text-align:center;
		flex-basis: 100%;
	}
	.pageheader .pageNav {
		align-self: center;
	}
	#navSection {
		display: block !important;
		text-align: center !important;
	}
	#navSection li {
		text-align: left;
	}
	/*header.pageheader .pageheaderh1 {
		top: -80px;
	}
	header.pageheader .wrap>div {
		position: absolute;
		left: 0;
		right: 0;
	}*/
	header.pageheader #mainImage {
		float:none;
		max-width: 250px;
        max-height: 150px;
	}
	#siteheader {
		text-align:center;
		padding-top:0;
	}
	#header_tagline {
		display:block;
	}
	#logo img {
		width:79px !important;
		height:90px !important;
	}
	.cols {
		display:block !important;
	}
	.col:not(:first-child) {
		padding-left:0;
		padding-top:1.5%;
	}
	.col:not(:last-child) {
		padding-right:0;
		padding-bottom:1.5%;
	}
	.noMob {
		display:none !important;
	}
	.mobOnly {
		display:initial;
	}
	.headerCol {
		flex-direction: column-reverse !important;
	}
	.headerPromo img {
		max-height: 100px;
	}
	/* Left align mobile nav*/
	.hiddennav {
		left:0;
	}
	/* But not the last nav (it will get cut off) */
	#nav li.hashiddennav:last-child .hiddennav {
		/*border: 1px solid red;*/
		left: unset;
	}
	/*
	#lockup {
		display:flex;
		align-items:center;
	}
	#lockup #logo {
		flex:1;
	}
	#lockup h1 {
		flex:5;
		text-align:left;
		padding-left:.5em;
		font-size:1.4em;
	}
	#lockup #logo img {
		max-width:175px;
		width:100%;
	}*/
	.statCalcTable {
		font-size:.85em;
	}
	.wrapd {
		padding:0;
	}
	.wrapm {
		padding:0 10px;
	}
	.drawerContainer .subNavWrap {
		padding-left:10px;
		padding-right:10px;
	}
	.btable tr {
		border-right-width:0 !important;
		border-left-width:0 !important;
	}
	.kg .creatureIcon {
		height:100px !important;
	}
	.kg .creatureIcon a {
		font-size:.8em;
	}
	.drawerContainer:not(.drawerContainerFullM) .itemDrawer {
	  flex-wrap: unset;
	  overflow-x:auto;
	  overflow-scrolling: touch;
	  -webkit-overflow-scrolling: touch;
	}
	.itemDrawer>.cc { /* Remove this once gap is widely supported on mobile */
	  margin-right:4px !important;
	  margin-bottom:4px !important;
	}
	.gridGap>* { /* Remove this once gap is widely supported on mobile */
		margin-right:4px !important;
		margin-bottom:4px !important;
	}
	.rCol {
	  flex-direction:column; /* switch from row to column */
	}
	.rColR {
	  flex-direction:column-reverse; /* switch from row to column */
	}
  .flexColM { /* Replace with your actual flex container class */
    flex-wrap: wrap;
    flex-direction: column;
  }
	/* TAMING TABLE */
	.ttB1 {order:1}
	.ttB2 {order:3}
	.ttB3 {order:4}
	.ttB4 {order:5}
	.ttB5 {order:2}
	.ttB1 {
		flex:calc(100% - 60px);
	}
	.ttPerItem {
	  margin-left:revert;
	  padding-left:revert;
	}
	.tt21>div{
		margin-left:0px;
		padding-left:0px;
		justify-content:center;
	}
	.tt21, .tt22, .tt23 {
		flex:1;
	}
	.coverArt {
		height: 220px;
		min-width:140px;
		font-size: 0.85em;
	}
	#dyeSquareHolder {
		width:880px;
		font-size:0.9em;
	}

}

@-webkit-keyframes swing {
  0% {
	-webkit-transform: rotate3d(0, 0, 1, 4deg);
	transform: rotate3d(0, 0, 1, 4deg);
  }

  5% {
	-webkit-transform: rotate3d(0, 0, 1, -2deg);
	transform: rotate3d(0, 0, 1, -2deg);
  }

  10% {
	-webkit-transform: rotate3d(0, 0, 1, 1deg);
	transform: rotate3d(0, 0, 1, 1deg);
  }

  15% {
	-webkit-transform: rotate3d(0, 0, 1, -1deg);
	transform: rotate3d(0, 0, 1, -1deg);
  }

  20% {
	-webkit-transform: rotate3d(0, 0, 1, 0deg);
	transform: rotate3d(0, 0, 1, 0deg);
  }
  0% {
	-webkit-transform: rotate3d(0, 0, 1, 0deg);
	transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
	-webkit-transform: rotate3d(0, 0, 1, 0deg);
	transform: rotate3d(0, 0, 1, 0deg);
  }

}

.headerPromo {
	background-color:var(--accent);
	margin-top:-.2em;
	color: #FFF;
	font-size:.9em;
	line-height:0;
	padding-top:1em;
	transition:background-color .2s;
}
.headerPromo:hover {
	background-color:#3F4A64;
}
.testimonials .item {
	display:none;
	align-self: center;
}
.testimonials {
	min-height:9em;
	line-height:1.4em;
	margin:2.5em 0 2em;
	background-color:var(--faint);
	border-radius:3px;
	padding:0 .5em;
	display: flex;
	justify-content: center;
}
.testimonials .testCredit,
.testimonials .testCredit a {
	color:rgba(255,255,255,.3);
}
.testR {
	color:#D4FF00;
	font-size:1.4em;
}
.testF {
	margin:.5em 0;
}
.lightbox, .lightbox-fancy, .markdown blockquote {
	padding: 22px 24px;
	border-radius: 16px;
	background: var(--dx-surface);
	border: 1px solid var(--dx-border);
	box-shadow: var(--dx-inset-highlight) 0 1px 0 inset;
}
.lightbox-fancy {
	margin-bottom: 18px;
}
/* Page hero: big title with an accent span, a lede, and optional actions */
.dx-page-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	/* Padding, not margin, on top: a top margin collapses through #main/#body and exposes the body background */
	margin: 0 0 3em;
	padding-top: 3em;
}
.dx-page-hero__title {
	margin: 0;
	padding: 0;
	font-size: clamp(34px, 6vw, 54px);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1;
}
.dx-page-hero__accent {
	color: rgb(214, 207, 245);
}
.dx-page-hero__lede {
	margin: 0;
	max-width: 720px;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 300;
	color: rgb(214, 226, 240);
	text-wrap: pretty;
}
/* Inline text action inside the lede, e.g. "How it works" */
.dx-page-hero__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0;
	margin-left: 0.25em;
	border: none;
	background: none;
	font: inherit;
	font-weight: 500;
	color: rgb(214, 207, 245);
	cursor: pointer;
	white-space: nowrap;
	vertical-align: baseline;
}
.dx-page-hero__link span {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-color: rgba(214, 207, 245, 0.45);
}
.dx-page-hero__link:hover span {
	text-decoration-color: currentColor;
}
.dx-page-hero__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-radius: 3px;
}
.dx-page-hero__link i {
	font-size: 1em;
	line-height: 1;
}
.dx-page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
/* Tinted lightbox: set --lb-tint to any color (defaults to soft violet) */
.lightbox-fancy--tint {
	--lb-tint: rgb(200, 190, 240);
	border-radius: 20px;
	background: linear-gradient(
		color-mix(in srgb, var(--lb-tint) 11%, transparent) 0%,
		color-mix(in srgb, var(--lb-tint) 3%, transparent) 100%
	);
	border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--lb-tint), #fff 25%) 26%, transparent);
	box-shadow: rgba(0, 0, 0, 0.12) 0 7px 22px;
}
/* Tip cards keep the classic flat look */
.lightbox.tip {
	background-color: var(--faint);
	padding: 1em;
	border-radius: var(--radius);
	border: none;
	box-shadow: none;
}
.lbox { /* LIGHTER VERSION OF LIGHTBOX */
    background-color: var(--offgreen);
	padding:1em 1em;
	border-radius:var(--radius);
}
.borderBox {
	border:1px solid var(--faint);
	border-radius:var(--radius);
	position:relative;
}
.borderBoxLabel {
	font-size: .9em;
	text-transform: uppercase;
	position:absolute;
	text-align:center;
	left:0;
	right:0;
	margin-top: -.5em;
	line-height: 1em;
}
.borderBoxLabel span {
	background: #336b6f;
	padding: 0 1em;
}
.lightCard {
	background-color: rgba(255,255,255,.1);
	border-radius:4px;
}
.lightCard h2 {
	border-bottom:0;
}
.lightCardWrap {
	padding:.6em 1em;
}
.lightCardHead {
	padding:.3em 1em;
	background-color:rgba(106,149,151,.6);
	background: linear-gradient(to left, rgba(106,149,151,.6) 0%,rgba(106,149,151,0.2) 100%);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom: 2px solid rgba(106,149,151,.6);
}
.lightCardTitle {
	font-size: 1.4em;
	font-weight: 100;
}
.card {
	background-color:#fff;
	color:#333;
	border-radius:var(--radius);
	box-shadow: 0 .1em .5em rgba(0,0,0,.2);
	margin-bottom: 1em;
}
.cardHead {
	background-color:var(--accent);
	min-height: 3.5em;
	border-top-left-radius:var(--radius);
	border-top-right-radius:var(--radius);
}
.cardHead h2,
.cardHead h2 a {
	color:inherit;
}
.card.collapsable .cardHead {
	cursor:pointer;
}

.card.collapsed .cardHead {
	border-radius:var(--radius);
}
.card.collapsed .cardBody {
	display:none;
}
.cardAttachment {
	background-color:#eee;
	margin:1em -1em -0.6em;
	padding:1em;
	border-radius:0 0 var(--radius) var(--radius);
}
.cardHead h2 {
  border-bottom-width:0;
  font-weight:100;
  text-transform:initial;
  margin:0;
}
.cardHead h2 a {
  text-decoration:none;
}
.cardWrap {
  padding:0.6em 1em;
}

.cardBody .creatureIconLabel {
	color:#6c989a;
}

.lightPill {
	color: #d4ff00;
	background-color:rgba(211, 255, 0,.16);
	padding: .1em .35em;
	border-radius: 2px;
	text-decoration:none;
}
.navPill {
	color: #517502;
	background-color: #d4ff00;
	padding: .25em .4em;
	border-radius: 1px;
	font-size: .75em;
}
img {
}
.warningBubble {
	width:4em;
	height:1em;
	border-radius:50%;
	padding-top: 1.45em;
	padding-bottom: 1.55em;
	background-color:#B85350;
	color:#fff;
	font-weight:bold;
}
.warningBubbleText {
	/*font-weight:bold;
	color:#B85350;*/
	/*color:#fff;*/
	margin-top:.5em;
}

.crBox {
	background-size: cover;
	background-size: 200%;
	background-position: -10% 120%;
	background-repeat: no-repeat;
	background-color: #5b8f69;
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
	border-radius: 3px;
	flex-direction: column;
	text-decoration: none;
	text-transform:uppercase;
	position:relative;
	width:31%;
	display:flex;
	align-items:center;
	justify-content:flex-end;
	padding-top: 15.5%;
	padding-bottom: 15.5%;
	line-height:0;
}
.crBox div {
	position: absolute;
	width: 100%;
	line-height: 1.3em;
	left: 0;
	right: 0;
	text-shadow:0 0 18px #000
	} 

.crBox:hover {
	color:transparent;
	background-color:var(--action) !important;
}


/* CREATURE CARD NEW */
/*.cc {
	background:#222;
	align-items:center;
	text-align:center;
	flex:1;
	margin: 1em .5em;
	overflow:hidden;
	position:relative;
	border-radius:3px;
	min-width: 100px;
}*/
.ccBG {
	background-size: cover;
	display: block;
	filter: blur(40px) saturate(1.8);
	-webkit-filter: blur(40px) saturate(1.8);
	left: -40%;
	right: -40%;
	top: -40%;
	bottom: -40%;
	position:absolute;
    background-position: center;
}
.cc a {
	text-decoration:none;
	color:rgba(255,255,255,.3);
	height:100%;
	display:block;
}
.cc a:hover {
	color:#BF7;
}


/*.creatureIconList .cc {
	margin-right: 0.7em;
}
.creatureIconList .cc:last-child {
	margin-right: 0;
}*/
.creatureIconList .cc {
	flex:1 1 100px;
}
.kibble .cc {
	margin:.5em;
}
.kibble .ccImg {
	max-width: 120px;
	max-height:120px;
}

.wiggle {
  filter: gray; /* IE6-9 */
  -webkit-animation: swing 1.5s infinite;
  animation: swing 1.5s infinite;
  -webkit-transform-origin:45% 100%;
  transform-origin: 45% 100% ;
}
.dlb {
	vertical-align:top;
	display:inline-block;
	padding:0 .4em;
}
.tamingTable {
	width:100%;
	border-collapse:collapse;
}
.tamingTable td {
	background-color:#628A8C;
	padding:.2em .5em;
	background-color:var(--faint);
	border-bottom: 1px solid #336b6f;;
	border-collapse: separate;
	transition: background-color .3s, color .3s;
}
.paddedTable td {
	padding:.5em .5em;
}
.tamingTable th {
	padding:0;
}
.tamingTable th, .rowHeaderItem {
	color:var(--lightgreen);
	vertical-align:bottom;
	font-weight:bold;
	align-self: flex-end;
	padding-bottom:.3em;
}
.tamingTable tr:hover td {
	background-color: #3d756d;
	color: #fff !important;
}

/* Generic data table */
.dodo-table-wrap {
	border-radius: 16px;
	background: var(--dx-surface);
	border: 1px solid var(--dx-border);
	box-shadow: var(--dx-inset-highlight) 0 1px 0 inset;
	overflow: auto;
	margin-bottom: 18px;
}
.dodo-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 640px;
}
.dodo-table--fluid {
	min-width: 0;
}
.dodo-table th,
.dodo-table td {
	padding: 11px 14px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--dx-surface);
}
.dodo-table th:first-child,
.dodo-table td:first-child {
	padding-left: 24px;
}
.dodo-table th:last-child,
.dodo-table td:last-child {
	padding-right: 24px;
}
.dodo-table thead th {
	padding-top: 14px;
	padding-bottom: 14px;
	background: var(--dx-overlay);
	border-bottom: 1px solid var(--dx-border-subtle);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--dx-text-faint);
	white-space: nowrap;
}
.dodo-table tbody tr:last-child td {
	border-bottom: none;
}
.dodo-table--hover tbody tr:hover {
	background: var(--dx-surface-hover) !important;
}
.dodo-table-stat {
	display: flex;
	align-items: center;
	gap: 11px;
}
.dodo-table-stat-label {
	font-size: 14.5px;
	font-weight: 600;
}
.dodo-table--base-stats {
	table-layout: fixed;
}
.dodo-table--base-stats .base-stats-col-stat { width: 18%; }
.dodo-table--base-stats .base-stats-col-base { width: 17%; }
.dodo-table--base-stats .base-stats-col-wild { width: 22%; }
.dodo-table--base-stats .base-stats-col-tamed { width: 17%; }
.dodo-table--base-stats .base-stats-col-additive { width: 13%; }
.dodo-table--base-stats .base-stats-col-mult { width: 13%; }
.dodo-table--base-stats thead tr:first-child th[colspan] {
	padding-bottom: 4px;
	border-bottom: none;
}
.dodo-table--base-stats .dodo-table__subhead {
	padding-top: 6px;
	padding-bottom: 12px;
	font-size: 10px;
	letter-spacing: 0.1em;
}
.tamingGrid {
	width:100%;
	border-collapse:collapse;
}
.tamingGrid td {
	background-color:#628A8C;
	padding:.2em .3em;
}
.tamingGrid th {
	padding:.2em .3em;
}
.tamingGrid tr:hover td {
	background-color:rgba(187, 255, 119, 0.4);
	color:#fff;
}
.tamingGrid td.lseparator {
	border-left:2px solid var(--base);
}
.tamingGrid th {
	color:var(--lightgreen);
	padding:0;
}



.bgBar {
	background-color: rgba(255,255,255,.1);
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}
.gridTable {
	border-spacing:0 4px;
}
.markdown table {
	border-spacing:2px;
}
.markdown table.small {
	border-spacing:1px;
}
.gridTable td:first-child, .markdown table td:first-child {
	border-top-left-radius:var(--radius);
	border-bottom-left-radius:var(--radius);
}
.gridTable td:last-child, .markdown table td:last-child {
	border-top-right-radius:var(--radius);
	border-bottom-right-radius:var(--radius);
}
.gridTable td, .markdown table td {
	background-color:#42777B;
	padding:.5em .6em;
	vertical-align:top;
}

td.tableCellPad, .tableCellPad td, .tableCellPad tr, .markdown table td.tableCellPad, .markdown table .tableCellPad td, .markdown table .tableCellPad tr {
	padding:.5em .6em;
}
.gridTable tr.bright th {
	color:#fff;
}
.gridTable th {
	color:var(--lightgreen);
	text-align:left;
	vertical-align:bottom
}
.markdown table th {
	border-radius:var(--radius);
	color:#fff;
	padding:.5em .6em;
	background-color:var(--lightera);
	text-align:left;
	vertical-align:bottom;
}

.gridTable th.center, .markdown table th.center {
	text-align:center;
}

.altRows tr:nth-child(odd) td {
  background-color:#397275
}
/*.altRows tr:nth-child(even) {
  background-color:#397275
}
*/
.altRows.altRowsTop tr:nth-last-child(1):nth-child(odd):nth-child(n+2) {
  border-bottom:2px solid #397275;
}
.altRows.altRowsTop tr:nth-first-child(1):nth-child(odd) {
  border-top:2px solid #397275;
}
.vertSep tbody td {
  border-right:1px solid var(--base);
}
.vertSep tbody td:last-child {
  border-right-width:0;
}
.brCl {border-spacing:0;border-collapse:collapse}
.lightrow {
  background-color:#3b7477;
  margin-bottom:1px;
}
.lightrow>.rowItem,
.lightrows .rowHeaderItem {
  padding:.5em .8em;
}
.lightrow>.row>.rowHeaderItem {
  align-self:flex-end;
}
table.lightrows {
  border-spacing:0px 2px;
}


/* GLYPHS ETC */
.arrow {
  position: relative;
  text-decoration: none;
  transition:transform 0.5s;
  width:1.5em;
  height:1em;
  display:inline-block;
}
.arrow:before, .arrow:after {
  content:"";
  background: #6c9598;
  -webkit-border-radius: 0.2em;
  border-radius: 0.2em;
  display: block;
  height: 0.2em;
  position: absolute;
  top: 0.4em;
  width: 0.95em;
}
.arrow.up {
	transform:rotate(-180deg);
}
.arrow.right {
	transform:rotate(-90deg);
}
.arrow.left {
	transform:rotate(90deg);
}
.arrow:before {
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg); 
}
.arrow:after {
   right: 0em;
   -webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.arrowD:after {
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color:rgba(67, 120, 123, 0);
	border-top-color:#63946e;
	border-width: 8px;
	margin-left: -8px;
	top: 100%;
}

/* PROGRESS RING */
.progress-ring__circle {
	transition: 0.35s stroke-dashoffset;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	stroke-linecap:round;
}
.ringHolder {
	width:60px;
	height:60px;
	margin:0 auto;
}
.ringText {
	position: absolute;
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
}


/* STAT CALC */

.statCalcTable {
	min-width: 33em;
	max-width:42em;
	margin:1em auto 1em;
}
.statCalcTable .lightrow {
	height: 60px;
}
.statCalcTable td {
	padding:.5em .7em;
}
.statCalcTable .smallInputWhite {
	padding-top:0.5em;
	padding-bottom:0.5em;
}
.statCalcUp, .statCalcDown{
	width: .6em;
	text-align: center;
}
.statCalcUp.disabled,
.statCalcDown.disabled {
	opacity:.2;
	cursor:default;
}
.statCalcUp.disabled:hover,
.statCalcDown.disabled:hover {
	background-color: #628a8c;
	color: inherit;
}
.recipeDown.disabled {
	visibility:hidden;
}
.item {
	display:flex;
	flex-direction:row;
	align-items:center;
	flex-wrap: wrap;
}

.centerImg img {
	vertical-align:middle;
}
.bigItemList .itemImage img {
	height:60px;
	width:60px;
}
.itemImage,
.itemLabel {
	/*border:1px solid red;*/
}
.itemImage {
	/*width:44px;*/
	padding-right:.5em
}
.itemLabel {
	flex:1;
	padding-left:.5em;
}
.itemLabel a {
	color:inherit;
}
.fadedImage img,
img.fadedImage {
	opacity: .4;
	filter: contrast(0) sepia(100%) hue-rotate(116deg) brightness(1.4) saturate(0.28);
}
.creatureIconList {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}
.creatureIcon {
	align-items:center;
	text-align:center;
	flex:1;
	margin: 1em .5em;
}
.creatureIcon a {
	text-decoration:none;
	color:rgba(255,255,255,.3)
}
.creatureIcon a:hover {
	color:#BF7;
}
/*.creatureIconLabel {
	margin-bottom:1em;
}*/
.creatureIconImg {
	max-width:180px;
	max-height:180px;
	flex:1;
}
.kibble .creatureIcon {
	margin:.5em;
}
.kibble .creatureIconImg {
	max-width: 120px;
	max-height:120px;
}
.creatureGridItem {
	width:184px;
	margin:1em 0 1em;
	text-align:center;
}
.creatureGridItemExpand {
	border: 2px dashed #6a9497;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 8px;
	cursor:pointer;
}
.row .creatureIcon {
  align-items:center;
  align-self:center;
  display:flex
}






.ccSelected {
  border: 2px solid #fff;
}
.ccSignificant {
  border: 2px solid #BF7;
}

.cc {
  background:#222;
  align-items:center;
  text-align:center;
  margin:0;
  overflow:hidden;
  position:relative;
  border-radius:3px;
  min-width:50px;
  box-sizing: border-box;
}
/*

.ccBG {
  background-size: cover;
  display: block;
  filter: blur(30px);
	-webkit-filter: blur(30px);
	left: -30%;
	right: -30%;
	top: -30%;
	bottom: -30%;
  position:absolute;
}

.cc a {
  text-decoration:none;
	color:rgba(255,255,255,.3)
}
.cc a:hover {
  color:#BF7;
}*/
.ccLabel {
	font-family: var(--font-sans);
	color: #fff;
	font-weight:bold;
	word-break:break-word;
	text-align: left;
	padding: 9px 11px;
	font-size: 1.4em;
	position: relative;
	text-shadow: 0 0 30px #000;
	line-height:1.3em;
	background:linear-gradient(180deg,rgba(0,0,0,0.5),transparent);
	hyphens: auto;
}
.ccSmall .ccLabel {
	font-size:1.2em;
	text-shadow: 0 0 20px #000;
	padding:5px 7px;
}
.ccSelected.ccSmall .ccLabel {
	padding:4px 6px; 
}
.ccSignificant.ccSmall .ccLabel {
	padding:4px 6px; 
}

.ccImg {
	max-width: 100%;
	max-height: 100%;
}
.ccImage {
	align-items: center;
	display: flex;
	justify-content: center;
	height: 90%;
	padding-top: 0%;
	box-sizing: border-box;
	position: absolute;
	width: 110%;
	top: 10%;
	right: -18%;
	bottom: 2%;
}
/*.ccSmall .ccImage {
  width: 104%;
  margin-top: 10%;
}*/

.ccHero  {
  border-radius: 7px;
  box-shadow: 0 0 20px 0px inset #000;
}
.ccHero .ccImage {
  justify-content:flex-end;
  right:3%;
}

.kibble .cc {
  margin:.5em;
}
.kibble .ccImg {
	max-width: 120px;
	max-height:120px;
}

.itemHead {
  border-radius:0 0 4px 4px;
  padding:0.8em 0.8em;
  background:linear-gradient(
	to top,
	rgba(255,255,255,.1) 0%,
	rgba(255,255,255,0.0) 100%
  );
}
.itemHead h2 {
  font-size:2em;
}
.itemHead .itemLabel {
  flex:none;
  border-bottom-width:0;
}
.flavorText {
  color: var(--offwhite);
  font-size: 1.05em;
  line-height: 1.5;
  max-width: 38em;
  margin: 0.45em 0 1em;
  opacity: 0.88;
  font-weight: 400;
}
.pageheader.pageheaderTinted {
  --pageheader-bg: radial-gradient(120% 140% at 78% 20%, rgba(var(--item-accent-rgb), 0.5) 0%, rgb(49, 107, 111) 38%, rgb(26, 64, 69) 72%, rgb(16, 39, 43) 100%);
  --nav-active: rgb(var(--item-accent-rgb));
  --nav-active-glow: rgba(var(--item-accent-rgb), 0.28);
  --nav-active-text: var(--item-accent-text, var(--basedark));
}

.itemDrawer {
  transition: max-height 0.7s ease-out;
  max-height:100px;
  flex-wrap:wrap;
  gap:4px;
  grid-gap: 4px;
  overflow:hidden;
}
.itemDrawer .cc {
  min-width: 74px;
  max-width: 75px;
  height:100px;
}

.drawerContainer {
  padding:1.5em 0;
  background: var(--drawer-bg);
  border-top: 1px solid var(--drawer-border);
}

.pillBox {
    /*padding: 1em 0 0;*/
    flex-wrap: wrap;
    line-height: 1.4em;
    display: flex;
    align-items:center;
    /*gap: 4px;
    grid-gap: 4px;*/
}


/* GRIDS & GAPS */
.gridGap {
  gap:4px;
  grid-gap: 4px;
}
.gridGap2 {
  gap:8px;
  grid-gap:8px;
}
.gapS>* {
  margin-right:0.5em;
}
.gap>* {
  margin-right:1em;
}
.gap2>* {
  margin-right:2em;
}
.gapS>*:last-child,
.gap>*:last-child,
.gap2>*:last-child {
  margin-right:0;
}



/* RANKING */
.rankingRow {
	align-items: center;
	border-top: 1px solid #ffffff22;
	padding:0.5em 0;
}
.rankingRow:last-child {
	border-bottom: none;
}
.rankingRow a {
  text-decoration:none;
  color:#fff;
}


/* KNOCK OUT */
.ko .rowItemN {
	border-radius:var(--radius);
	transition:background-color .2s;
}
.ko .rowItemN:hover {
	background-color: #3b7276;
}
.koWeapon {
  border-radius: 5px;
  transition: background-color .2s, opacity .2s, outline-color .2s;
  background-color:var(--faint);
  margin-right: 2px;
  cursor: pointer;
}

.rowItemN.koWeapon:hover {
  background-color: rgba(228,255,190,0.12);
}
.rowItemN.koWeapon img {
  margin-bottom:2px;
  transition: margin .2s;
}
.rowItemN.koWeapon:hover img {
  margin:-2px 0 4px;
}
.koWeapon.koSelected {
  background-color: rgba(228,255,190,0.18);
  outline: 2px solid #fff;
  outline-offset: -2px;
}
#ko.hasSelection .koWeapon:not(.koSelected) {
  opacity: 0.4;
}
#ko.hasSelection .koWeapon:not(.koSelected).koNotRec {
  opacity: 0.25;
}
.koWeaponDetailsPanel {
  position: relative;
  border: 2px solid #fff;
  border-radius: 8px;
  padding: 12px 14px 16px;
}
.koWeaponDetailsClose {
  width: 28px;
  height: 28px;
  line-height: 24px;
  text-align: center;
  background: #fff;
  color: #1a1a1a;
  font-size: 22px;
  font-weight: bold;
  border-radius: 0 6px 0 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.koWeaponDetailsClose:hover {
  background: #e8e8e8;
}
.koWeaponStatRows {
  max-width: 320px;
  margin: 0 auto;
}
.koWeaponStatRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.koWeaponStatLabel {
  flex: 1.1;
  text-align: right;
  font-size: 0.9em;
  color: var(--light);
}
.koWeaponStatValue {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9em;
}
.koWeaponStatValue img {
  flex-shrink: 0;
}
.koWeaponRecipe {
  margin-top: 8px;
}
.koCOD {
  color:var(--light);
}
.koCODval {
  font-weight:bold;
  color:#fff;
}
.koCODHigh,
.koCODHigh .koCODval {
  color:#ea827b;
}
.koCODNone {
  visibility:hidden;
}

.knockLabelT {
  height: 3.5em;
  margin:0.5em 0;
  font-size:.9em;
}

.koNotRec .knockLabelT,
.koNotRec .koHits,
.koNotRec span.light,
.koNotRec .whiteinputh {
  opacity:0.25;
}
.koNotRec .koInput:hover,
.koNotRec .koInput:active,
.koNotRec .koInput:focus {
  opacity:1;
}
.koNotRec img {
  opacity:0.25;
  filter: contrast(0) sepia(100%) hue-rotate(116deg) brightness(1.4) saturate(.28);
}
.koWeapon.koNotRec {
  background-color: rgba(255,255,255,0.02);
}
.koWeapon, .koWeaponLead {
  min-width:90px;
  padding:0.5em 6px;
}
.koHits {
  font-size:1.4em;
  padding:0.5em 0 0.25em;
}
.koWeaponHead {
  height:10em
}
.koHitbox {
  height:7em;
}
.koHitboxLabel {
  background: #ffffff22;
  border-radius: 1em;
  padding:0.2em 0.1em 0.2em 0.4em;
  font-weight: bold;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -0.4em;
  text-transform:uppercase;
}


/* WIDGETS (TIMERS ETC) */
.widget.collapsed .widgetB {
  display:none;
}
.widget.collapsed .widgetH {
  border-bottom-width:0;
}
.widgetH {
  align-items:center;
  cursor:pointer;
  border-bottom: 2px solid #ffffff11;
}

/* TORPOR TIMER */
#torporTimer .arrow:before,
#torporTimer .arrow:after {
  background-color:#9cafbc
}
#torporTimer.collapsed .widgetH .timeRemaining {
  display:inline;
}
#torporTimer .widgetH .timeRemaining {
  display:none;
}

.widget .widgetHCO {
  display:none;
}

.widget.collapsed .widgetHCO {
  display:inline;
}

.timeRemaining {
  font-size: 2em;
  line-height: 1em;
}
#torporTimer .miniBar {
  background-color:#a986db;
}
.narc {
  color:#a986db;
}
.tt.alarming .miniBar {
  background-color:#cc6663;
}
.tt.alarming #ttAlarm,
.tt.alarming #ttTimeRemaining {
  transition:color 1s;
  color:#cc6663;
}


/* ITEMS & RECIPES */

.gridTable td:nth-child(3) {
  /*min-width:120px;*/
}
.gridTable td {
  vertical-align:middle;
}
.dyeSquare {
	display: block;
  padding: 0.5em 0.5em 0.5em;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .8em;
  opacity: .6;
  font-weight: 700;
  text-overflow: ellipsis;
  word-wrap: break-word;
  height: 30px;
}
.dyeSquareW {
  flex: 1;
  overflow:hidden;
}
#dyeSquareHolder .row:first-child .dyeSquareW:first-child {
    border-top-left-radius:var(--radius);
}
#dyeSquareHolder .row:first-child .dyeSquareW:last-child {
    border-top-right-radius:var(--radius);
}
#dyeSquareHolder .row:last-child .dyeSquareW:first-child {
    border-bottom-left-radius:var(--radius);
}
#dyeSquareHolder .row:last-child .dyeSquareW:last-child {
    border-bottom-right-radius:var(--radius);
}

/* ALIGNMENT */
.inline {
	display:inline;
}
.block {display:block !important}
.ib {
  display: inline-block;
}
.center {
	text-align:center;
}
.left {
	text-align:left;
}
.right {
	text-align:right;
}

/* FLEXBOX */
.flex {
	display:flex;
}
.row {
	display:flex;
	flex-direction:row;
}
.rowItem {
	flex:1;
	flex-direction:column;
	display:flex;
}
.rowItemN {
	flex-direction:column;
}
.centerItems {
	align-items:center;
}
.centerImg {
	vertical-align:middle;
}
.ass {
	align-self:stretch;
}
.asc {
	align-self:center;
}
.ascenter {
	align-self:center;
}
.acenter {
	align-items:center;
}
.jccenter {
	justify-content: center;
}
.jcsb {
	justify-content:space-between;
}
.aifs {
	align-items:flex-start;
}
.aife {
	align-items:flex-end;
}
.aic {
	align-items:center;
}
.jcc {
	justify-content: center;
}
.flex1, .flex2, .flex3, .flex4, .flex5,
.flex-5, .flex1-5, .flex3-5, .flex4-5 {
	display:flex;
}
.flex1 {flex:1;}
.flex2 {flex:2;}
.flex3 {flex:3;}
.flex4 {flex:4;}
.flex5 {flex:5;}
.flex6 {flex:6;}
.flex-5 {flex:.5;}
.flex1-5 {flex:1.5;}
.flex2-5 {flex:2.5;}
.flex3-5 {flex:3.5;}
.flex4-5 {flex:4.5;}

/* PADDING & MARGIN */
.padV {
	padding-top:1em !important;
	padding-bottom:1em !important;
}
.padVS {
	padding-top:0.5em !important;
	padding-bottom:0.5em !important;
}
.padded {
	padding:0 1em !important;
}
.paddedS {
	padding:0 .4em !important;
}
.pad0 {
	padding:0 !important;
}
.margin0 {
	margin:0 !important;
}
.marginTop0 {
	margin-top:0 !important;
}
.marginTop {
	margin-top:1em !important;
}
.marginTop15 {
	margin-top:1.5em !important;
}
.marginTop2 {
	margin-top:2em !important;
}
.marginTop3 {
	margin-top:3em !important;
}
.marginTopS {
	margin-top:.5em !important;
}
.marginTopSS {
	margin-top:.2em !important;
}
.marginBottom0 {
	margin-bottom:0 !important;
}
.marginBottom {
	margin-bottom:1em !important;
}
.marginBottom15 {
	margin-bottom:1.5em !important;
}
.marginBottom2 {
	margin-bottom:2em !important;
}
.marginBottom3 {
	margin-bottom:3em !important;
}
.marginBottomS {
	margin-bottom:.5em !important;
}
.marginBottomSS {
	margin-bottom:.2em !important;
}
.marginRight2 {
	margin-right:2em !important;
}
.marginRight {
	margin-right:1em !important;
}
.marginRightS {
	margin-right:.5em !important;
}
.marginRightSS {
	margin-right:.2em !important;
}
.marginLeft2 {
	margin-left:2em !important;
}
.marginLeft {
	margin-left:1em !important;
}
.marginLeftS {
	margin-left:.5em !important;
}
.marginLeftSS {
	margin-left:.2em !important;
}
.marginSS {
	padding:0.2em !important;
}
.paddingRight {
	padding-right: 1em !important;
}
.paddingLeft {
	padding-left: 1em !important;
}
.paddingBottom2 {
	padding-bottom: 2em !important;
}
.paddingTop2 {
	padding-top: 2em !important;
}
.paddingBottom3 {
	padding-bottom: 3em !important;
}
.paddingTop3 {
	padding-top: 3em !important;
}

.sepRight {
  border-right:2px solid #fff !important;
}
.sepLeft {
  border-left:2px solid #fff !important;
}
.sepTop {
  border-top:2px solid #fff !important;
}
.pointer {
  cursor:pointer;
}


/* CUSTOM RECIPE CALC */
.compBarContainer {
  padding: 10px;
  width: fit-content;
  position: relative;
  text-align:center;
	flex:1;
}
.compBarHolder {
  align-items: flex-end;
  height:80px;
  padding-top:10px;
  justify-content: center;
}

.compBarPreviousValue,
.compBarValue {
  width: 28px;
  margin-bottom: 5px;
  border-radius:4px;
  margin:0 1px;
  position: relative;
}

.compBarValue {
  background: var(--lav);
  min-height: 1px;
}

.compBarPreviousValue {
  background: var(--action);
  min-height: 1px;
}

.compBarValueLabel {
  position: absolute;
  transform: translateY(-106%) translateX(-50%);
  padding: 0 5px;
  text-align: center;
}

.hoverCell:hover {
  background-color:var(--lightera);
  cursor:pointer;
}

.compBarLabel {
}

.compBarIncrease {

}
.iconTotalRow {
  position:relative;
  overflow:hidden;
}

.iconTotalRow img {
  position: absolute;
  opacity: 0.15;
  width: 46px;
  bottom: -4px;
  right: -3px;
}

.settingsItem {
/*  flex: 1;*/
  align-items: center;
  display: flex;
  flex-direction:column;
  max-width: 140px;
}
.settingsItemProp {
  flex: 1;
  align-items: center;
  display: flex;
}

.gap {
    gap: 0.5em;
}






.morecontent span {
	display: none;
}
.scrollxw{
	position:relative;
}
.scrollx{
	overflow-x:auto;
	-webkit-overflow-scrolling: touch;
	overflow-y: hidden;
	position:relative;
}
.scrollvisibile::-webkit-scrollbar-thumb {
	background-color:rgba(255,255,255,.2);
	border-radius:1em
}
.scrollvisibile::-webkit-scrollbar {
	width:.5em;
	height:.5em;
}
.scrollvisibile::-webkit-scrollbar-thumb {
	background-color:rgba(255,255,255,.4);
}


.scrollc:after {
	content: ' ';
	border-right: 1px solid rgba(255,255,255,.2);
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	height: 100%;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 5px;
	background: linear-gradient(to left,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 100%);
}
.expandable {
	display:none;
}
.expandable.expanded {
	display:block;
}
.op0 {

	opacity:0;
}
tbody.expandable.expanded {
	display:table-row-group;
}
#header_tagline {
	font-size: .5em;
	text-transform: initial;
	padding-left: .5em;
	color: #6E979A;
}
.creaturelist {
	line-height:1.7em;
}
.creaturelist a.crLink {
	text-decoration: none;
	text-overflow: ellipsis;
	overflow: hidden;
}
.social>div {
	vertical-align: top;
	display: inline-block;
	padding: 0 .8em 1em;
}

ul, ol, li {
	margin:0;
	padding:0;
	list-style-type:none;
}
.normallist,
.normallist ul,
.normallist ol {
	margin-left:1.5em;
}
ul.normallist ul, 
ul.normallist ol,
ol.normallist ul, 
ol.normallist ol {
    padding-top: 0.3em;
}
ul.normallist li {
	list-style-type: disc;
}
ol.normallist li {
	list-style-type: decimal;
}
.normallist li { 
	line-height:1.3em;
	padding-bottom:.3em;
}

::selection {
  background:#bbee6699;
  }
::-moz-selection {
  background:#bbee6699;
}
.babysection {
	padding-left:.5em;
	border-width:0;
	margin:.5em 0 .5em;
	border-left:3px solid rgba(255,255,255,.3);
	position:relative;
}

.statTip {
	opacity:.7;
	padding-top:.1em;
}
.statTipA {
	color:var(--action);
}
.statTipB {
	color: #ce8f8d;
}

.kibbletreebase {
  list-style-type:none;
  margin-left:0;
  padding-left:0;
}
.kibbletreebase>li {
  margin-bottom:2em;
}
.kibbletreebase a {
  text-decoration:none;
}
.kibbletree,
.kibbletree ul {
  margin:0 0 0 1em; /* indentation */
  padding:0;
  list-style:none;
  color:#FFF;
  position:relative;
}

.kibbletree ul {margin-left:.5em} /* (indentation/2) */

.kibbletree:before,
.kibbletree ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid;
}

.kibbletree li {
  margin:0;
  padding:0 1.5em; /* indentation + .5em */
  line-height:2em; /* default list item's `line-height` */
  font-weight:bold;
  position:relative;
}

.kibbletree li:before {
	content:"";
	display:block;
	width:14px; /* same with indentation */
	height:0;
	border-top:1px solid;
	margin-top:-1px; /* border top width */
	position:absolute;
	top:1em; /* (line-height/2) */
	left:0;
}

.kibbletree li:last-child:before {
  background:var(--base); /* same with body background */
  height:auto;
  top:1em; /* (line-height/2) */
  bottom:0;
}

.btable {
	border-spacing:0;
	border-collapse:collapse;
}
.btable td {
  margin:0;padding:.4em .5em;
}
.btable td.btcr {
	border-right:1px solid #417a7d;
	width:20%;
	overflow:hidden;
	text-overflow:ellipses;
	font-size:.9em;
}
.btable tr:nth-child(even) {
  background-color:#397174
}
.btable tr {
  border: 1px solid #417a7d;
}
.btable thead tr {
 	border-width:0;
	background-color: transparent !important;
}

.customName {
	font-size: 5em;
	font-family: 'Kaushan Script',cursive;
	font-weight: normal;
	margin: 0;
	padding: 0;
	text-transform: initial;
	text-align:center;
	color:#d4ff00;
	text-shadow:0px 0px 12px rgba(212, 255, 0, .4);
	line-height: 1em;
	padding-bottom: .2em;
}
.customNameSub {
	font-size: 1.2em;
	font-weight: normal;
	margin: 0;
	margin-top:-.2em;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	word-spacing: .2em;
	padding: 0 1em;
}


/* STORIES + TIPS */
/* Stories - All */
.stories .tipText {
  /*font-family:'Noto Serif',Georgia, serif;*/
}
.stories .tipText p {
  font-family:'Noto Serif',Georgia, serif;
  line-height:inherit;
  line-height: 1.7em;
}
/* Stories - Browse */
.stories .lightbox .tipText {
  font-size:1.3em;
  max-width: 680px;
}
/* Stories - Permalink */
h1.title {
  font-family: var(--font-sans);
  font-size:3em;
  margin-bottom:0;
  padding-bottom:0;
  line-height:1.3em
}

.stories .tipText {
  font-family:'Noto Serif', Georgia, serif;
  font-size:1.2em;
  max-width:680px;
}
article.stories .tipText {
  font-size: 1.47em;
  margin-top:1em;
}

.coverArt .ccLabel {
  font-family: var(--font-sans);
  text-align:center;
  text-transform:uppercase;
  transition: color 0.3s;
  font-size:1.5em;
  line-height: 1.2em;
}
.coverArt {
  height: 280px;
  width: 100%;
  min-width:190px;
  user-select: none;
  box-shadow: 0 2px 15px 2px #0000001c, 0 5px 9px 1px #0000001c;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.coverArt:hover {
  transform: translate(2px, -6px) perspective(560px) rotateY(8deg);
  box-shadow: 0 2px 15px 2px #00000033, 0 20px 20px #00000044, 0 0 0px 3px var(--action);
}
.coverArt:hover .ccLabel {
  color:var(--action);
}

.ccFooter {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding:0 0 0.8em;
  font-family: georgia;
  font-size: 1em;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.brightPill {
  background-color:#ffffff88;
}
.hero {
  padding:3.5em 1em;
  border-radius:13px;
  box-shadow:0 0 16px #00000033, inset 0 0 43px #463b5e;
  margin-top:2em;
  margin-bottom:3em;
  background:#463b5e;
  background:radial-gradient(circle farthest-side, #695989, #463b5e 420px);
}

.hero svg {
  height: 117px;
  min-width: 50px;
}
.hero.heroCondensed {
  padding:2em;
}
.hero.heroCondensed svg {
  height: 70px;
}
.hero h1 {
  font-size:2.6em;
  line-height:1.2em
}

.boxIconButton {
  font-weight:bold;
  padding:0 0.15em;
}

.boxIconDes:hover {
  background-color:var(--faint); /* Don't change bg color */
}

.boxIconDes:hover .boxIconLabel {
  text-decoration:line-through;
}
.boxIconDes:hover .boxIconButton {
  color:var(--negstrong);
}



/* INPUTS */
#searchw {
	margin-bottom: 1em;
	text-align:center;
}
body.accent #searchw {
	margin:0em 1em;
}
.searchField {
	position: relative;
	display: inline-block;
	max-width: 100%;
}
#search, .whiteinput {
	padding: .5em .6em;
}
#search, .whiteinput, .whiteinputh {
	outline: none;
	border-width: 0;
	border-radius: 2px;
	font-size: 1em;
	color: var(--base);
	background: #fff;
}
.whiteinput:disabled {
    opacity: 0.3;
}
#taming .whiteinput, 
#taming .whiteinputh,
#ko .whiteinput, 
#ko .whiteinputh {
	margin:0 auto;
	max-width:60px;
}
.noNarcs .bigNum {
  color: var(--light);
}
input.empty {
  color:#ccc;
}
.warningBox { 
  background-color:#b88b4f;
  color:#eee
}
#search {
	padding: .6em 2.1em .6em .7em;
	max-width:340px;
	width:220px;
	box-sizing: border-box;
}
.searchShortcut {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 11px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.4;
	color: var(--lightgreen);
	border: 1px solid color-mix(in srgb, var(--lightgreen) 40%, transparent);
	border-radius: 5px;
	padding: 1px 6px;
	pointer-events: none;
	user-select: none;
}
.searchField:focus-within .searchShortcut {
	opacity: 0;
}
.whiteinputwb {
	outline: none;
	border-width: 0px;
	margin: 0;
	padding: .5em .6em;
	border-radius: 2px;
	font-size: 1em;
	color: var(--base);
	background: #fff;
	display: flex;
	box-sizing: border-box;
	max-width:40em;
}
.whiteinputwb input {
	border:0;
	color:inherit;
	font-size:inherit;
	vertical-align:middle;
	flex: 1;
	width: 200px;
	display: flex;
	align-self: stretch;
	width: 100%;
}
.whiteinputwb .whiteinputb {
	color:#a2bcbe;
	cursor:pointer;
	font-weight: bold;
	text-decoration: none;
	vertical-align: middle;
}
.whiteinputwb .whiteinputb:hover {
	color:#78af6a;
	cursor:pointer;
	font-weight: bold;
	text-decoration: none;
	vertical-align: middle;
}
.smallInputWhite {
	background-color: #fff;
	color: var(--base);
	border-radius: 2px;
	border-width: 0;
	padding: .3em .5em;
	width: 3em;
	font-size: 1em;
}
.whiteinputh {
  display:inline-block;
  padding-right:.5em;
}
.whiteinputh > input {
  border:none;
  outline:none;
  color: inherit;
  padding:.5em 0em .5em .3em;
}
.whiteinputh:after {
  content: '%';
}



/* BUTTONS */
.actionButton {
	background-color:var(--action);
	color:#557722;
	border-radius:3px;
	border-width: 0px;
	font-size:1em;
	cursor:pointer;
	text-decoration:none;
}
.actionButton:hover {
	color:#000;
}
.button, .circleButton {
	background-color:var(--faint);
	color:#FFF;
	border-radius:var(--radius);
	border-width: 0px;
	cursor:pointer;
	pointer-events:all;
}
button,.button,.actionButton {
	padding: .5em .6em;
	font-size:1em;
}
.button {
	display:inline-block;
	font-weight:bold;
}
.circleButton {
    border-radius: 50%;
    height: 36px;
    width: 36px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.button:link {
	color:#fff;
}
.button:hover, .circleButton:hover {
	color:var(--base);
	background-color:var(--action);
}
.button:hover * {
    color: var(--base);
}
.buttonDark {
	background-color:rgba(0,0,0,.26);
}
.button.mini,button.mini,.actionButton.mini {
	padding:0.25em 0.4em;
	font-size:0.9em;
}
.button.disabled, .button:disabled,
.actionButton.disabled, .actionButton:disabled {
  background-color:var(--faint);
  color:var(--lightera);
  pointer-events: none;
  cursor: not-allowed;
}
.button.disabled:hover, .button:disabled:hover,
.actionButton.disabled:hover, .actionButton:disabled:hover {
  color:var(--lightera);
}


/* BOOLEAN BUTTONS */
/* .boolButtons :first-child {
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.boolButtons :last-child {
  border-top-left-radius:0;
  border-bottom-left-radius:0;
} */
.boolButtons {
	background: var(--faint);
    padding: 3px;
	border-radius: var(--radius);
	gap:4px;
	display: inline-block;
}
.boolButton {
	color: #fff;
	padding: .4em .6em;
	border-radius: var(--radius);
	border-width: 0;
	font-size: 1em;
	cursor: pointer;
	pointer-events: all;
	display: inline-block;
	box-sizing: border-box;
	user-select:none;
}
.boolButton.active {
	color:var(--basedark2);
	background-color:#FFF;
	font-weight: 700;
}
.boolButton.active img {
	/* Recolor solid-white icons to match .active text (#193638 / --basedark2) */
	filter: brightness(0) invert(16%) sepia(23%) saturate(748%) hue-rotate(138deg) brightness(93%) contrast(91%);
}
.boolButton.active:hover {
	color:var(--basedark2);
}
.boolButton:hover {
  color:var(--action)
}





hr {
	border-width: 0px;
	border-bottom: 2px solid rgba(255, 255, 255, .3);
	height: 0px;
	margin: 1em 0;
	padding: 0;
}

hr.light {
	border-bottom-color:rgba(255, 255, 255, .1);
}

.knockCount {
	margin:.5em 0 1em;
	text-align: center;
	color: rgba(255,255,255,.3);
	font-size: 1.5em;
}

.miniBarWrap, .miniBar {
	height:4px;
	border-radius:2px
}
.miniBarWrap {
	background-color:var(--faint);
}
.miniBar {
	background-color:#FFF;
	transition:width .2s,background-color .5s;
}
.miniBarWrapBig, .miniBarWrapBig .miniBar {
	height:6px;
	border-radius:6px;
}

/* KIBBLE CHARTS */
.kg {
  margin:2em 0 4em;
}
.kg .kgkib {
	padding: .3em;
	position: absolute;
	bottom: 0px;
	left: 0px;
	background-color:rgba(66, 119, 123,.5);
	border-top-right-radius: 4px;
	border-bottom-left-radius: 4px;
}
.kg .creatureIcon {
  margin: 0;
  height: 150px;
  align-self: center;
  flex: 1;
  align-items: center;
  display: flex;
  align-self: center;
  text-align: center;
  justify-content: center;
}
.kg .creatureIconImg {
 /* max-width: 140px;*/
  max-height:100%;
  max-width:100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  position: absolute;
}
.kg .creatureIconLabel {
  margin:.5em 0;
  overflow-y: hidden;
  text-overflow: ellipsis;
}
.kg .creatureIcon a {
  width:100%;
  height:100%;
  background-color: #42777B;
  border-radius: 4px;
  flex-direction: column;
  display: flex;
  font-size:.9em;
}
.kg .creatureIcon a:hover {
  background-color: #68A672;
}
.kg .creatureIconImage {
  margin: 0 .5em .7em;
  flex: 1;
  position: relative;
  height: 170px;
}
.kgim .creatureIcon a { /* main */
  background-color:#779DA0
}
.kgr, .kgrs {
  display:flex;
  flex-direction:row;
  flex:1;
  align-items: center;
}
.kgrs .kgi {
  height:40px;
}
.kgi { /* kibble item */
  flex-direction:column;
  flex:1;
}
.kgis { /* small */
  flex-direction:column;
  flex:.5;
}
.kgc,.kgc .kgi { /* connector */
  height:30px;
}
.kgbt, .kgbl, .kgbr, .kgbb {
  border:0px solid #fff;
}
.kgbt {border-top-width:1px;}
.kgbl {border-left-width:1px;}
.kgbr {border-right-width:1px;}
.kgbb {border-bottom-width:1px;}


.kglh {
  background-color: #779DA0;
  width:100%;
  height:4px;
  padding-right: 4px;
  margin-left:-2px;
}

.kglv {
  background-color: #779DA0;
  height:100%;
  width:4px;
  margin:auto;
}


.ar {
  background-color: #779DA0;
  margin-right: 8px;
  position:relative;
  margin:auto;
}
.ar:after {
	content: ' ';
	display: block;
	position: absolute;
}
.arr, .arl {
  width:100%;
  height:4px;
  min-width:8px;
}
/*.aru, .ard {
  height: 100%;
  width: 4px;
}
*/
.aru, .ard {
  height: 34px;
  width: 4px;
}

.arr {margin-right:8px;}
.arl {margin-left:8px;}
.aru {margin-top:8px;}
.ard {margin-bottom:8px;}

.arh {
  background-color:#BF7;
}
.highlight {
  background-color:#BF7;
}
.highlightd {
  background-color:#549077;
}
.arr.arh:after {border-left-color:#BF7;}
.arl.arh:after {border-right-color:#BF7;}
.aru.arh:after {border-bottom-color:#BF7;}
.ard.arh:after {border-top-color:#BF7;}


.arr:after {
	border-left: 12px solid #779DA0;
	right:-8px;
}
.arl:after {
	border-right: 12px solid #779DA0;
	left:-8px;
}
.arr:after, .arl:after {
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	top: -6px;
}
.aru:after {
	border-bottom: 12px solid #779DA0;
	top: -6px;
}
.ard:after {
	border-top: 12px solid #779DA0;
	bottom: -6px;
}
.aru:after, .ard:after {
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	right:-6px;
}

.ar:after {
	content: ' ';
	display: block;
	position: absolute;
}
.cmdi {
	/* width: fit-content; */
	flex-wrap: wrap;
}

.cmdi_d {
	margin: 0.2em 0.2em 0;
	padding-top: 0.3em;
	/* border-top: 1px solid; */
	color: #ffffff66;
	font-size: 0.9em;
}

.cmdi_t {
	font-weight: bold;
	text-overflow: ellipsis;
	/* overflow: hidden; */
}

.cmdi_td {
	margin-right: 0.8em;
	margin-top: 1em;
	text-align: center;
	max-width: 12em;
}

.cmdi_td:last-child {
	margin-right: 0em;
}
body#adminCommands {
	overflow-y:scroll;
}

#admin-results {
	min-height:300px
}
#admin-search {
	display: flex;
	justify-content: center;
}
#admin-results .ui-autocomplete {
  position:static !important;
  display:block !important; 
  max-height: none;
  overflow: auto;
}
#admin-results .ui-widget-content {
	background-color:transparent;
	color:inherit !important;
	font-size:.9em;
	width:auto !important;
  }
#admin-results .ui-state-focus {
  color:inherit;
}
#admin-results .row {
	background-color:#3b7276;
	margin-bottom:1em;
  }
.tcat {
	color:rgba(255,255,255,.25);
}
.tcat:hover {
	color:var(--action);
}
.tcat.selected {
	color: var(--action);
}
.tcat.selected .tcatIconBadge {
	color: var(--action);
	background-color:var(--activeNav)
}
.tcat:hover .tcatIcon img {
	opacity: 1;
	filter:brightness(0) saturate(100%) invert(87%) sepia(28%) saturate(594%) hue-rotate(38deg) brightness(96%) contrast(114%)
}
.tcatIcon img {
	opacity:0.4;
	filter: contrast(0) sepia(100%) hue-rotate(116deg) brightness(1.4) saturate(0.28);
}
.tcatIcon {
	margin-bottom:0.5em;
}
.tcatIcon .bxf {
	font-size: 52px;
	height: .8em;
	line-height: .8em;
}
.tcat.selected .tcatIcon img {
	opacity:1;
	filter: none;
}
.bpr {
  display:flex !important;
  background-color:var(--faint) !important;
  margin-bottom:2px !important;
  padding:.8em !important;
  border-radius:.1em;
  color:#fff;
  border-bottom-width:0px !important;
  line-height:1.5em;
}
.bpr a {
  color:inherit;
}
.ui-state-focus a {
  background-color:inherit !important;
  color:inherit !important;
}
.bpl {
  width:30%;
  padding-right:.3em;
  word-break: break-word;
  color:#fff;
}
.bpb {
  color:#a2bcbe;
  width: 100%;
  word-break: break-all;
}
.adminLabelDino, .adminLabelWeapons {
  font-weight: bold;
  justify-content: center;
  padding: .3em .4em;
  text-transform:uppercase;
  display:inline-block
}
.adminLabelDino {
  background-color: #76b167;
  border-top-left-radius: .1em;
  border-bottom-right-radius: .1em;
}
.adminLabelWeapons {
  background-color: var(--accent);
  border-top-left-radius: .1em;
  border-bottom-right-radius: .1em;
}
.bprd, .bprw, .bprc {
  /* transition: all 0.3s; */
  border-right:3px solid transparent;
}

.bprd:hover .bpl, .bprw:hover .bpl {
}

.bprd {
  border-left:3px solid #76b167;
}
.bprc {
  border-left:3px solid #de7f7f;
}

/* .bprw:hover,
.bprw:hover .bpb,
.bprd:hover,
.bprd:hover .bpb {
  color:#fff;
  cursor:pointer;
} */
/* .bprd:hover,
.bprd.ui-state-focus {
  background-color:rgba(132, 255, 101, 0.1)!important
} */
.bprw {
  border-left:3px solid var(--accent);
}
/* .bprw:hover,
.bprw.ui-state-focus {
  background-color:rgba(184, 155, 225, 0.1)!important;
} */

.copied {
  border-radius: .1em;
  background-color: #76b167;
  padding: .4em;
  margin-bottom:2px;
  text-align: center;
  font-weight: bold;
}
.bprh {
  display: block;
  margin-top: -2.3em;
  position: absolute;
  font-weight: bold;
  text-transform: uppercase;
  color: #6c9598;
}
.bprhh {
  margin-top: 2.5em !important;
}


/* NAV */
#navSection {
	display: flex;
	justify-content: flex-end;
	flex: 1;
	align-items: center;
	flex-wrap: wrap;
}
#dodoheader {
  padding: 0.8em 0 0;
  background: var(--header-bg);
}
/* Chrome that the native app supplies itself. See the .inApp detection in includes/header.php. */
.inApp #dodoheader,
.inApp #footer,
.inApp .webOnly {
  display: none !important;
}
#dodoheader h1 {
  margin: 0.5em 0;
  font-size:1.8em;
}
#dodoheader > .wrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-bottom: 0.2em;
}
#nav>li {
	list-style-type: none;
	display: inline-block;
	cursor: pointer;
	position: relative;
}
/*#nav>li:not(:last-child) {
	margin:0 .5em;
}
*/

#nav>li:first-child {
	margin-left: 0px;
}

#nav>li>a {
	color: #fff;
	padding:6px .7em 2px;
	display: block;
	text-align: center;
	height: 25px;
	border-radius: 2px;
	/*text-shadow: 0 1px 1px rgba(0, 0, 0, .5);*/
	border: 1px solid transparent;
}

.hashiddennav>a {
	height: 35px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.hiddennav li a {
	text-decoration: none;
	display: block;
}

#nav>li:hover>a {
	color: #fff;
	/*text-shadow: 0 1px 1px rgba(0, 0, 0, .8);*/
	background-color:var(--faint);
}

.hiddennav {
	display: none;
	position: absolute;
	background-color: #fff;
	width:180px;
	right:0px;
	margin-top: 0px;
	padding: 2px 0 3px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
	border-top-width: 0;
	box-shadow: 0 0px 20px rgba(0, 0, 0, .5);
	z-index: 99;
}
header .hiddennav {
	width:250px;
}
.hiddennavL {
	left:0px;
	right:initial;
}

.seperator {
	color:#bbb;
	font-weight: bold;
	font-size: .9em;
	padding: 0.4em 0.9em 0;
	text-transform:uppercase;
}

.hiddennav a {
	padding: 0.7em 0.9em;
	color: #444;
	font-weight: bold;
}

.hiddennav li.ruleabove {
	border-top: 1px solid #e9e9e9;
}

.hiddennav a:hover {
	background-color: #CF7;
}
.hashiddennav:hover .hiddennav {
	display: block;
}
.hiddennav i.fas,
.hiddennav i.fab {
	width: 18px;
	color: #7971b9 !important;
	text-align: center;
	font-size: 1.3em;
	vertical-align: middle;
	margin-right: 0.4em;
}
.navd {
  font-size:1.2em;
  opacity:.5;
  margin-left:.4em;
}

/* PILLS AND SUBNAV PILLS */

.subNavWrap {
	display:flex;
	flex-wrap: wrap;
}
.subNav {
	background-color:var(--faint);
	color:#FFF;
	padding:.4em 1em .4em 1em;
	border-radius:3em;
	border-width: 0px;
	font-size:1em;
	cursor:pointer;
	pointer-events:all;
	font-weight:bold;
	text-decoration:none;
	margin-right:0.35em;
	margin-bottom:0.4em;
	display:flex;
	align-items:center;
}
.subNav:last-child {
  margin-right:0em
}
.subNav:link {
  color:#fff;
}
.subNav.active, .selected .subNav {
  color:var(--action);
  background-color:var(--activeNav);
}
.tcat:hover .subNav,
.subNav:hover {
  color:var(--base);
  background-color:var(--action);
}
.subNav img,
.subNav span {
  vertical-align:middle
}
.subNav img {
	height:24px;
	width: 24px;
	margin-right: 0.2em;
    margin-left: -0.2em;
}
.subnav.disabled {
	border: 2px solid var(--faint);
	background: transparent;
	color: var(--light);
	cursor: default;
}

.boxIcon {
	background-color:var(--faint);
	padding: 1em .6em;
	text-align: center;
	vertical-align: middle;
	border-radius: 2em;
	line-height: 0;
	margin: .05em;
	text-decoration: none;
}
.boxIconH {
	background: none;
	border: 1px solid var(--faint);
	color: rgba(255,255,255,.5);
}
.boxIconH:hover {
	border-color:var(--activeNav);
}
.boxIcon:hover {
	color: #FFF;
	background-color: var(--activeNav) !important;
}
.boxIcon.selected {
	color:#fff;
	background-color:var(--activeNav) !important;
	font-weight:bold;
	color:var(--action);
}
.boxIcon div {
	position: absolute;
	width: 100%;
	line-height: 1.3em;
	left: 0;
	right: 0;
	} 
.boxIconActive {
    border: 1px solid var(--action);
    color: var(--action);
}
.pillGroup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.pillGroupLabel {
	color: var(--light);
	margin-right: 2px;
}
.pillTag {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px 6px 9px;
	border-radius: 7px;
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: initial;
}
.pillTagActive {
	background: color-mix(in srgb, var(--action) 13%, transparent);
	border: 1px solid color-mix(in srgb, var(--action) 40%, transparent);
	color: var(--action);
}
.pillTagInactive {
	background: none;
	border: 1px solid var(--faint);
	color: var(--light);
}
.pillTagCheck {
	font-size: 0.85em;
}

.pillbox {
	background: #487a7e;
	padding: 3px;
	border-radius: 2em;
	flex-wrap: wrap;
	justify-content: center;
}
.pillbox .boxIcon {
	background:none;
}



.helpicon {
	background-color:#6e979a;
	border-radius: 10px;
	width: 1em;
	height: 1em;
	display: inline-block;
	color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 1em;
	padding: 1px;
	cursor: pointer;
	text-decoration: none;
}




/* ROUNDED CORNERS -- OVERRIDES */
.attachedBottom {
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
.attachedTop {
  border-top-left-radius:0;
  border-top-right-radius:0;
}
.attachedLeft {
  border-top-left-radius:0;
  border-bottom-left-radius:0;
}
.attachedRight {
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.rc0 {
  border-radius:0;
}



/* RATE-GATHERING */
.na div {font-size:1.1em;margin-top:.2em;}
.rating{ display:inline-block; font-size:0; position:relative; text-transform:capitalize;}
.rating .star {
  display:inline-block; padding:0; font-size:30px; 
  position:relative;
  color:rgba(255,255,255,.2);
  float:right;
}
.votable {
  cursor:pointer;
}
.starhalf2 {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow:hidden;
}
.starhalf2:hover::before {
  content:'\2605';
  color:var(--action);
  text-align:right;
  position: absolute;
  right: 0px;
}
.starhalf1 {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 50%;
	overflow:hidden;
}
.starhalf1:hover::before {
  content:'\2605';
  color:var(--action);
}
.star:hover ~ .star {
  color:var(--action);
}
.star [data-tooltip]:hover {
  background:transparent;
}
.rating1 .star1,
.rating2 .star1, .rating2 .star2,
.rating3 .star1, .rating3 .star2, .rating3 .star3,
.rating4 .star1, .rating4 .star2, .rating4 .star3, .rating4 .star4,
.rating5 .star1, .rating5 .star2, .rating5 .star3, .rating5 .star4, .rating5 .star5 {
  color:var(--action);
}

.rating1-5 .star1,
.rating2-5 .star1, .rating2-5 .star2,
.rating3-5 .star1, .rating3-5 .star2, .rating3-5 .star3,
.rating4-5 .star1, .rating4-5 .star2, .rating4-5 .star3, .rating4-5 .star4 {
  color:var(--action);
}

.rating0-5 .star1 .starhalf1::before,
.rating1-5 .star2 .starhalf1::before,
.rating2-5 .star3 .starhalf1::before,
.rating3-5 .star4 .starhalf1::before,
.rating4-5 .star5 .starhalf1::before  {
  content:'\2605';
  color:var(--action);
}

.rating0 .na {
  color:var(--action);
}



/* TOGGLE */
.toggle {
  position: relative;
}
.toggle label {
  position: relative;
  box-sizing: border-box;
  display:flex;
  align-items:center;
  gap:0.3em;
}

.toggle input[type="checkbox"] {
 position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%; 
  cursor: pointer;
  opacity: 0;
}
.toggleSwitch {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap:0.4em;
}
.toggle .toggleLeft {
}
.toggleSwitch:before {
  content: '';
  width: 46px;
  height: 23px;
  background: var(--lightera);
  position: relative;
  display: inline-block;
  border-radius: 30px;
  box-sizing: border-box;
  transition: 0.2s ease-in;
}
.toggleSwitch:after {
  content: '';
  position: absolute;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  left: 2px;
  top: 2px;
  z-index: 2;
  background: #fff;
  box-sizing: border-box;
  transition: 0.2s ease-in;
}
.toggle .toggleLeft,.toggle .toggleRight {
  transition: color 0.2s ease-in;
  display:flex;
}
.toggle .toggleLeft img,.toggle .toggleRight img {
  transition:opacity 0.2s ease-in;
}

.toggle:not(.equal) input[type="checkbox"]:checked + label .toggleSwitch:before {
  background: #1Bc365;
}
.toggle input[type="checkbox"]:checked + label .toggleSwitch:after {
  left: 25px;
}
.toggle input[type="checkbox"]:checked + label .toggleLeft {
  color:var(--lightgreen);
}
.toggle input[type="checkbox"]:not(:checked) + label .toggleRight {
  color:var(--lightgreen);
}

.toggle input[type="checkbox"]:not(:checked) + label .toggleRight img {
  opacity:0.5;
}






/* TAMING FOOD LIST (tt* — styled like .dodo-table) */
.tameSettingItem input {
  width:3.5em;
  text-align:center
}
.ttTable {
  border-radius: 16px;
  background: var(--dx-surface);
  border: 1px solid var(--dx-border);
  box-shadow: var(--dx-inset-highlight) 0 1px 0 inset;
  overflow: hidden;
  margin-bottom: 18px;
}
.ttRow {
  padding: 11px 24px;
  background: transparent;
  margin-bottom: 0;
  border-bottom: 1px solid var(--dx-surface);
  transition: background-color .2s, color .2s;
}
.ttRow:last-child,
.ttTable > .ttRow:last-of-type {
  border-bottom: none;
}
#tamingTable .ttRow:last-child {
  border-bottom: none;
}
.ttRow:hover {
  background: var(--dx-surface-hover);
}
.ttRow--setting:hover {
  background: transparent;
}
.ttRow>.row {
	align-items: center;
}
.ttRow input {
  text-align:center;
}
.ttRow .ttRow2 {
  display:none;
  margin-top: 0.35em;
  padding-top: 0.35em;
  border-top: 1px solid var(--dx-border-subtle);
}
.tt21 {
  flex:3;
}
.tt21>div{
  margin-left:42px;
  padding-left:1em;
}
.tt22 {
  flex:1;
}
.tt23 {
  flex:2;
  margin-right:50px;
}

.ttRowH {
  display: flex;
  align-items: center;
  gap: 0.2%;
  padding: 14px 24px;
  background: var(--dx-overlay);
  border-bottom: 1px solid var(--dx-border-subtle);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dx-text-faint);
  white-space: nowrap;
}
.tteff {
  align-self: stretch;
  align-items: center; 
}
.ttexp {
  padding:0 10px;
  display:flex;
  align-items:center;
  cursor:pointer;
  align-self:stretch;
  box-sizing:border-box;
  justify-content:flex-end;
  width:50px;
}
.ttexp:hover .arrow:before,
.ttexp:hover .arrow:after {
  background-color:#fff;
}
.ttB {
  display:flex;
  margin:5px 0px;
  flex:1;
}
.ttBH {
  display:flex;
  flex-wrap:wrap;
  align-items: center;
  gap:0.2%;
}


.ttPerItem {
  margin-left:50px;
  padding-left:1em;
}
#tamingWarning {
  display:none;
}
#tamingWarning .miniBar {
  transition:width 0.3s
}
#tamingExcess {
  display:none;
}
#tamingResults h3 {
  margin-top:0;
}
.use, .useExclusive {
  width: 55px;
  padding: .5em .2em;
}
.use {
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  font-weight:bold;
}
.useExclusive {
  text-align:center;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
}
.ttHidden {
  display:none;
}
#ttLoad {
  display:block;
  text-align:center;
  padding: 14px 24px;
  background: transparent;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--dx-border-subtle);
  color: var(--dx-text-faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin: 0;
}
#ttLoad:hover {
  background: var(--dx-surface-hover);
  color: #fff;
}
#tamingTable .whiteinput {
  margin:0;
}
.lvlsec .arrow {
  margin-top: 5px;
}
.lvlsec {
  margin-top: 18px;
}

/* STARVE TIMER */
.starveMeter {
  display:none;
  padding-right:0.3em;
  padding-left:0;
  border-left:0;
  border-right:1px solid #fff;
  margin-right:auto;
  margin-left:0;
  box-sizing: border-box;
  justify-content:flex-end;
  transition:width .2s;
}
.hasStarveMeter .starveMeter {
  display:flex;
}

.meterStatus {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  font-weight:bold;
  transition:width .2s;
}

.r {
  position:relative;
}

.starveTimer .miniBar {
  background-color:var(--action);
}

.starveMeter.starveMeterRight {
  padding-left:0.3em;
  padding-right:0;
  border-right:0;
  border-left:1px solid #fff;
  margin-right:0;
  margin-left:auto;
  justify-content:flex-start;
}

/* BREEDING TIMERS */
[data-tooltip]:hover {
    background: #ffffff11;
    border-radius: 3px;
}

.alarming .meterStatus {
    color:#cc6663
}

.collapsed .visibleCollapsed {
	display: block;
}

.collapsed .hiddenCollapsed {
	display: none;
}

.visibleCollapsed {
	display: none;
}

.hiddenCollapsed {
	display: block;
}

.circleButton .fa-play {
	margin-left: 0.2em;
}

#breedingWrap {
	min-height: 540px;
}

#breeding .widgetH:hover:not(:has(.noHover:hover)) {
	background: #ffffff11;
}

/* COLORS */
.lighter {
	color:rgba(255,255,255,.55)
}
.light {
	color:rgba(255,255,255,.45)
}
.faint {
	color:rgba(255,255,255,.25)
}
.gray {
  color:var(--gray);
}
.light a,
.lighter a {
	color:inherit;
}
.white {color:#fff;}
.neg, a.neg {
  color:var(--neg);
}
.negs, a.negs {
  color:var(--negstrong);
}
.pos, .pos a {
  color:var(--pos);
}
.avg {
  color:var(--avg);
}
.notice {
  background-color: var(--avg);
  color: var(--avg-text);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.notice a {
  color: var(--avg-text);
  text-decoration: none;
  font-weight: 600;
}
.notice a:hover {
  text-decoration: underline;
}
.actionColor {
	color:var(--action);
}
.action {
  color:var(--action);
}
.lav {
	color:var(--lav);
}


/* PATREON BUTTON */
.bmc-button img{height: 25px !important; width: 21px !important; margin-bottom: 1px !important; box-shadow: none !important; border: none !important; vertical-align: middle !important;}.bmc-button{padding: 7px 10px 7px 10px !important;line-height: 27px !important;height: 42px !important;min-width: 184px !important;text-decoration: none !important;display: inline-flex !important;color: #FFFFFF !important;background-color: #FF424d !important;border-radius: 5px !important;border: 1px solid transparent !important;padding: 7px 10px 7px 10px !important;font-size: 17px !important;letter-spacing: 0.6px !important;margin: 0 auto 0.5em !important;-webkit-box-sizing: border-box !important;box-sizing: border-box !important;-o-transition: 0.3s all linear !important;-webkit-transition: 0.3s all linear !important;-moz-transition: 0.3s all linear !important;-ms-transition: 0.3s all linear !important;transition: 0.3s all linear !important;}.bmc-button:hover, .bmc-button:active, .bmc-button:focus {text-decoration: none !important;opacity: 0.85 !important;color:#000000 !important;}


/* MARKDOWN SITES */

.markdown blockquote {
	margin:0;
	color:#fff;
}
.markdown blockquote p {
	color:#fff;
}
.markdown ul,
.markdown ol,
.markdown p {
	color:var(--offwhite);
}
.markdown ul, 
.markdown ol {
	margin-left:2em;
}
.markdown ul li {
	list-style-type:disc;
}
.markdown ol li {
	list-style-type:descimal;
}
.markdown img {
	max-width:100%;
}
.markdown h2 {
	margin-top:1.5em;
}

/*! jQuery UI - v1.11.4 - 2015-03-11
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, button.css, datepicker.css, dialog.css, draggable.css, menu.css, progressbar.css, resizable.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* Copyright 2015 jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-clearfix {
	min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0); /* support: IE8 */
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
}


/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-accordion .ui-accordion-header {
	display: block;
	cursor: pointer;
	position: relative;
	margin: 2px 0 0 0;
	padding: .5em .5em .5em .7em;
	min-height: 0; /* support: IE7 */
	font-size: 100%;
}
.ui-accordion .ui-accordion-icons {
	padding-left: 2.2em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
	padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
	position: absolute;
	left: .5em;
	top: 50%;
	margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
	padding: 1em 2.2em;
	border-top: 0;
	overflow: auto;
}
.ui-autocomplete.ui-widget-content {
	box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
	max-height: 300px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
	/* add padding to account for vertical scrollbar */
	padding-right: 20px;
	border-radius: 3px;
}
.ui-autocomplete .ui-menu-item span {
  font-size:0.9em;
  color:#999;
  font-weight:normal;
}
.ui-button {
	display: inline-block;
	position: relative;
	padding: 0;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	border:0;
	overflow: visible; /* removes extra width in IE */
}
.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}
/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
	width: 2.2em;
}
/* button elements seem to need a little more width */
button.ui-button-icon-only {
	width: 2.4em;
}
.ui-button-icons-only {
	width: 3.4em;
}
button.ui-button-icons-only {
	width: 3.7em;
}

/* button text element */
.ui-button .ui-button-text {
	display: block;
	line-height: normal;
}
.ui-button-text-only .ui-button-text {
	padding: .4em 1em;
}
.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
	padding: .4em;
	text-indent: -9999999px;
}
.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: .4em 1em .4em 2.1em;
}
.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: .4em 2.1em .4em 1em;
}
.ui-button-text-icons .ui-button-text {
	padding-left: 2.1em;
	padding-right: 2.1em;
}
/* no icon support for input elements, provide padding by default */
input.ui-button {
	padding: .4em 1em;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
	position: absolute;
	top: 50%;
	margin-top: -8px;
}
.ui-button-icon-only .ui-icon {
	left: 50%;
	margin-left: -8px;
}
.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary,
.ui-button-icons-only .ui-button-icon-primary {
	left: .5em;
}
.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
	right: .5em;
}

/* button sets */
.ui-buttonset {
	margin-right: 7px;
}
.ui-buttonset .ui-button {
	margin-left: 0;
	margin-right: -.3em;
}

/* workarounds */
/* reset extra padding in Firefox, see h5bp.com/l */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 45%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}
.ui-dialog {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-se {
	width: 12px;
	height: 12px;
	right: -5px;
	bottom: -5px;
	background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}
.ui-draggable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	outline: none;
}
.ui-menu .ui-menu {
	position: absolute;
}
.ui-menu .ui-menu-item {
	position: relative;
	margin: 0;
	padding: 0.7em 0.9em;
	font-weight:bold;
	cursor: pointer;
	min-height: 0;
	color: #444;
}

.ui-menu .ui-menu-divider {
	margin: 5px 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
	/*margin: -1px;*/
}

/* icon support */
.ui-menu-icons {
	position: relative;
}
.ui-menu-icons .ui-menu-item {
	padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: .2em;
	margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
	left: auto;
	right: 0;
}
.ui-progressbar {
	height: 2em;
	text-align: left;
	overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
	background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
	height: 100%;
	filter: alpha(opacity=25); /* support: IE8 */
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}
.ui-selectable {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}
.ui-selectmenu-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.ui-selectmenu-menu .ui-menu {
	overflow: auto;
	/* Support: IE7 */
	overflow-x: hidden;
	padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	padding: 2px 0.4em;
	margin: 0.5em 0 0 0;
	height: auto;
	border: 0;
}
.ui-selectmenu-open {
	display: block;
}
.ui-selectmenu-button {
	display: inline-block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	cursor: pointer;
}
.ui-selectmenu-button span.ui-icon {
	right: 0.5em;
	left: auto;
	margin-top: -8px;
	position: absolute;
	top: 50%;
}
.ui-selectmenu-button span.ui-selectmenu-text {
	text-align: left;
	padding: 0.4em 2.1em 0.4em 1em;
	display: block;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: default;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}
.ui-sortable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-spinner {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
	background-color:#FFF !important;
}
.ui-spinner-input {
	border: none;
	background:#FFF;
	color: inherit;
	padding: 0;
	margin: .5em 0;
	vertical-align: middle;
	margin-left: .4em;
	margin-right: 22px;
}
.ui-spinner-button {
	width: 16px;
	height: 50%;
	font-size: .5em;
	padding: 0;
	margin: 0;
	text-align: center;
	position: absolute;
	cursor: default;
	display: block;
	overflow: hidden;
	right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
	border-top: none;
	border-bottom: none;
	border-right: none;
	border-left-color:#d0dede;
}
/* vertically center icon */
.ui-spinner .ui-icon {
	position: absolute;
	margin-top: -8px;
	top: 50%;
	left: 0;
}
.ui-spinner-up {
	top: 0;
}
.ui-spinner-down {
	bottom: 0;
}

/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
	/* need to fix icons sprite */
	background-position: -65px -16px;
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}
.ui-tooltip {
	line-height: 1.4em;
    padding: 0.8em 1em;
	position: absolute;
	z-index: 9999;
	max-width:300px;
	box-shadow:0 0 15px #00000044;
}

/* Component containers
----------------------------------*/
.ui-widget {
	/*font-size: 1.1em;*/
}
.ui-widget .ui-widget {
	font-size: 1em;
}
/*.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Verdana,Arial,sans-serif;
	font-size: 1em;
}*/
.ui-widget-content {
	background-color:#FFF;
	color: #444;
}
.ui-widget-content a {
	color: #444;
}
.ui-widget-header {
	font-weight: bold;
}
.ui-widget-header a {
	color: #222222;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	font-weight: normal;
	color: #555555;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
	color: #555555;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	background-color:#bdfd7f;
	color: #212121;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
	color: #444;
	text-decoration: none;
	background-color:#CF7;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	font-weight: normal;
	color: #212121;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #212121;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #fcefa1;
	background: #fbf9ee url() 50% 50% repeat-x;
	color: #363636;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #363636;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #cd0a0a;
	background: #fef1ec url() 50% 50% repeat-x;
	color: #cd0a0a;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #cd0a0a;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #cd0a0a;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	filter:Alpha(Opacity=70); /* support: IE8 */
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	filter:Alpha(Opacity=35); /* support: IE8 */
	background-image: none;
}
.ui-state-disabled .ui-icon {
	filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}
/*.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url("images/ui-icons_222222_256x240.png");
}
.ui-widget-header .ui-icon {
	background-image: url("images/ui-icons_222222_256x240.png");
}
.ui-state-default .ui-icon {
	background-image: url("images/ui-icons_777777_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
	background-image: url("images/ui-icons_444444_256x240.png");
}
.ui-state-active .ui-icon {
	background-image: url("images/ui-icons_444444_256x240.png");
}
.ui-state-highlight .ui-icon {
	background-image: url("images/ui-icons_2e83ff_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url("images/ui-icons_cd0a0a_256x240.png");
}*/

/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius:.2em;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius:.2em;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius:.2em;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius:.2em;
}

/* Overlays */
.ui-widget-overlay {
	background: #aaaaaa url() 50% 50% repeat-x;
	opacity: .3;
	filter: Alpha(Opacity=30); /* support: IE8 */
}
.ui-widget-shadow {
	margin: -8px 0 0 -8px;
	padding: 8px;
	background: #aaaaaa url() 50% 50% repeat-x;
	opacity: .3;
	filter: Alpha(Opacity=30); /* support: IE8 */
	border-radius: 8px;
}


/* ADS */
div#amzn-native-ad-0 div.amzn-native-products-list div.amzn-native-product {
	background-color: rgba(255,255,255,.5) !important;
	border-radius: 3px !important;
	border-width: 0px !important;
}
div#amzn-native-ad-0 div.amzn-native-products-list div.amzn-native-product .amzn-native-product-image-container {
	background: #fff !important;
}

/* Shared Dododex autocomplete (creatures / items) */

.dxAc {
  --dx-ac-bg: #fff;
  --dx-ac-text: #1a1a1a;
  --dx-ac-border: rgba(0, 0, 0, 0.16);
  --dx-ac-muted: rgba(0, 0, 0, 0.45);
  --dx-ac-active: rgba(0, 120, 90, 0.12);
  --dx-ac-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  --dx-ac-radius: 12px;
  --dx-ac-img-bg: rgba(0, 0, 0, 0.06);
  position: relative;
}

.dxAcInput {
  box-sizing: border-box;
}

.dxAcClear {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.dxAcClear:hover {
  background: rgba(0, 0, 0, 0.14);
}

.dxAcResults {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0.35rem;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 80;
  background: var(--dx-ac-bg);
  color: var(--dx-ac-text);
  border: 1px solid var(--dx-ac-border);
  border-radius: var(--dx-ac-radius);
  box-shadow: var(--dx-ac-shadow);
  max-height: 18rem;
  overflow-y: auto;
}

.dxAcResults[hidden] {
  display: none;
}

.dxAcResult {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 0.98rem;
}

.dxAcResult:hover,
.dxAcResult.isActive {
  background: var(--dx-ac-active);
}

.dxAcResultImg {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--dx-ac-img-bg);
  border-radius: 8px;
}

.dxAcResultImg--empty {
  display: block;
}

.dxAcResultLabel {
  flex: 1;
  min-width: 0;
}

.dxAcResultMatch {
  color: var(--dx-ac-muted);
  font-size: 0.9em;
}

.dxAcResultBadge {
  margin-left: auto;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dx-ac-muted);
  flex-shrink: 0;
}

/* Dark theme when used on kibble app */
.kbApp .dxAc {
  --dx-ac-bg: #1a2a2e;
  --dx-ac-text: var(--kb-text);
  --dx-ac-border: var(--kb-border);
  --dx-ac-muted: var(--kb-muted);
  --dx-ac-active: rgba(61, 191, 140, 0.18);
  --dx-ac-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  --dx-ac-img-bg: rgba(0, 0, 0, 0.25);
}

.kbApp .kbSearchBox .dxAcClear {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.08);
  color: var(--kb-text);
}

.kbApp .kbSearchBox .dxAcClear:hover {
  background: rgba(255, 255, 255, 0.16);
}