:root { line-height: inherit; }

@font-face {
  font-family: 'DroidSans Mono';
  src: url('../_fonts/DroidSansMono.ttf?v=1.0.0') format('truetype');
  font-weight: normal;
  font-style: monospace;
}

.handwriting {
	font-family: 'Architects Daughter', cursive;
}

.handwriting.medium {
	font-size: 22px;
}

.serif {
	font-family: georgia, serif !important;
	line-height: 1.2em;
}

.disabled {
	pointer-events: none;
	cursor: default;
	opacity: 0.5;
}

.strike {
	text-decoration: line-through;
}

.nobr,
.nowrap {
	white-space: nowrap;
}

img.align-middle {
	vertical-align: middle;
}

textarea {
	font-family: 'DroidSans Mono', monospace;
	font-size: 14px;
}

textarea.text {
	width: 500px;
	height: 200px;
}

textarea.wide {
	width: 700px;
	height: 200px;
}

textarea.tall {
	height: 500px;
}

textarea.text_smaller {
	width: 450px;
	height: 100px;
}

textarea.full {
	width: 99%;
	height: 200px;
}

textarea.pre {
	font-family: 'DroidSans Mono',monospace;
}

blockquote {
	margin-left: 40px;
	margin-right: 0;
}

/******************************
**	PAGE TABS
******************************/
div#tabs, div#tabs2{
	margin: 0 auto;
	padding: 10px;
	width: 700px;
}

div#tab_content, div#tab_content2 {
	margin: 0 auto;
	text-align: left;
	border-style: solid;
	border-radius: 10px;
	padding: 10px;
	padding: 20px 10px 10px 10px;
	background: var(--content-bg);
	border-color: var(--content-bg);
    color: var(--content-text);
}

div#tabs.small_tab, div#tabs2.small_tab {
	width: 290px;
}

div#tab_content table tr td, div#tab_content p, div#tab_content2 table tr td, div#tab_content2 p {
	color: var(--content-text);
}

ul#pageTabs.pageTabs_title {
    margin: 0px 0px 5px 0px;
}

ul.pageTabs_title li.active {
    border-radius: 5px 5px 0px 0px;
    padding: 5px 10px;
    border: solid;
	background: var(--content-bg);
    border-color: var(--content-bg);
    border-bottom-color: var(--content-bg);
}

ul.pageTabs_title li.inactive {
    border-radius: 5px 5px 0px 0px;
    padding: 5px 10px;
    border-top: solid;
    border-bottom: solid;
	background: var(--table-border);
    border-color: var(--transparent);
    border-bottom-color: var(--content-bg);
}

ul.pageTabs_title {
	margin: 0 0 0 15px;
	padding: 0;
	text-align: center;
}

ul.pageTabs_title.alt {
	margin-top: 20px;
}

ul.pageTabs_title li {
	display: inline;
	padding: 5px;
	margin: 0 10px 0 0;
}

ul.pageTabs_title li a {
	padding: 0;
	cursor: pointer;
	text-decoration: none;
	color: var(--link);
}

ul.pageTabs_title li a:hover {
	text-decoration: underline;
    color: var(--link-h);
}

ul.pageTabs_title li.active a {
	color: var(--content-text);
    cursor: text;
    text-decoration: none;
}

ul.pageTabs_title li.active a:hover {
	text-decoration: none;
}

div.color_swatch {
	height:15px;
	width:15px;
	float:left;
	margin:2px 6px 2px 2px;
}

span.color_swatch {
	padding: 1px 10px;
	color: #333333;
	text-transform: uppercase;
	border-radius: 10px;
}

.color_swatch.abuse {
	background-color: #ff9900;
}

.color_swatch.art-theft {
	background-color: #0099ff;
}

.color_swatch.bug {
	background-color: #66ff00;
}

.color_swatch.exploit {
	background-color: #ffff33;
}

.color_swatch.scam {
	background-color: #ff00ff;
	color: #eee;
}

.color_swatch.tos-violation {
	background-color: #00ffff;
}

.color_swatch.missing-items {
	background-color: #666666;
	color: #ddd;
}

.color_swatch.other {
	background-color: #9966ee;
	color: #eee;
}

div.blank_swatch{
	height:15px;
	width:15px;
	float:left;
	margin:2px 6px 2px 2px;
	background-image:url(../_images/icons/gradient_transparent-000000.png);
}

div.rainbow_swatch{
	height:15px;
	width:15px;
	float:left;
	margin:2px 6px 2px 2px;
	background-image:url(../_images/icons/gradient_transparent-RAINBOW.png);
}

/*
	BULMA TABS
	(default bulma colors, themes will override)
*/

.tabs {
  -webkit-overflow-scrolling: touch;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
}

.tabs:not(:last-child) {
  margin-bottom: 1.5rem;
}

.tabs a,
.tabs label {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid;
  color: #4a4a4a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: -1px;
  padding: 0.5em 1em;
  vertical-align: top;
}
.tabs label {
	padding-top: 4px;
	padding-bottom: 4px;
}

.tabs a:hover,
.tabs label:hover {
  text-decoration: none;
}

.tabs li {
  display: block;
}

.tabs ul {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-padding-start: 0;
  padding-left: 0;
  margin: 20px 0;
}

.tabs ul.is-left {
  padding-right: 0.75em;
}

.tabs ul.is-center {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-left: 0.75em;
  padding-right: 0.75em;
}

.tabs ul.is-right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-left: 0.75em;
}

.tabs .icon:first-child {
  margin-right: 0.5em;
}

.tabs .icon:last-child {
  margin-left: 0.5em;
}

.tabs.is-centered ul {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.tabs.is-right ul {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.tabs.is-boxed a {
  border: 1px solid transparent;
  border-radius: 3px 3px 0 0;
}

.tabs.is-boxed li.is-active a {
  background-color: white;
  border-bottom-color: transparent !important;
}

.tabs.is-fullwidth li {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.tabs.is-toggle a,
.tabs.is-toggle label {
  border: 1px solid;
  margin-bottom: 0;
  position: relative;
}

.tabs.is-toggle a:hover,
.tabs.is-toggle label:hover {
  text-decoration: none;
  z-index: 2;
}

.tabs.is-toggle li + li {
  margin-left: -1px;
}

.tabs.is-toggle li:first-child a,
.tabs.is-toggle li:first-child label {
  border-radius: 3px 0 0 3px;
}

.tabs.is-toggle li:last-child a,
.tabs.is-toggle li:last-child label {
  border-radius: 0 3px 3px 0;
}

.tabs.is-toggle li.is-active a,
.tabs.is-toggle li.is-active label {
  z-index: 1;
}

.tabs.is-toggle ul {
  border-bottom: none;
}
.tabs.is-toggle.is-toggle-rounded li:first-child a,
.tabs.is-toggle.is-toggle-rounded li:first-child label {
  border-bottom-left-radius: 290486px;
  border-top-left-radius: 290486px;
  padding-left: 1.25em;
}

.tabs.is-toggle.is-toggle-rounded li:last-child a,
.tabs.is-toggle.is-toggle-rounded li:last-child label {
  border-bottom-right-radius: 290486px;
  border-top-right-radius: 290486px;
  padding-right: 1.25em;
}

.tabs.is-small {
  font-size: 0.75rem;
}

.tabs.is-medium {
  font-size: 1.25rem;
}

.tabs.is-large {
  font-size: 1.5rem;
}

.tabs ul {
  border-bottom: 1px solid var(--panel-text);
}

.tabs:not(:last-child) {
	margin-bottom: 0.5rem;
}

.tabs.alt ul,
.tabs.no-padding ul {
	margin: 0;
}

.tabs.alt li.is-active a {
	text-transform: uppercase;
	font-weight: bold;
}

.table.normal.secondary .tabs ul {
	margin: 0 0 10px 0;
}

div.panel .tabs a,
.table.normal.secondary .tabs a,
div.panel .tabs label {
	color: var(--pag-text);
}

div.panel .tabs a:hover {
	color: #363636;
	text-decoration: none;
}

div.panel .tabs li.is-active a {
	color: #00d1b2;
}

div.panel .tabs.is-toggle a,
.table.normal.secondary .tabs.is-toggle a,
div.panel .tabs.is-toggle label {
    border-color: var(--pag-border);
    background-color: var(--pag-bg);
    color: var(--pag-text);
    cursor: pointer;
	padding: 0.25em 1em;
}

div.panel .tabs.is-toggle .yellow a {
	background-color: #f1d107;
	color: #000;
}

div.panel .tabs:not(.is-toggle) a {
    border-bottom-color: var(--panel-text);
    color: var(--panel-text);
}

div.panel .tabs:not(.is-toggle) a:hover {
    border-bottom-color: var(--link);
    color: var(--link);
}

div.panel .tabs:not(.is-toggle) li.is-active a, div.panel .tabs:not(.is-toggle) li.is-active label {
	color: var(--link-h);
	border-bottom-color: var(--link-h);
}

div.panel .tabs.is-toggle a:hover,
.table.normal.secondary .tabs.is-toggle a:hover,
div.panel .tabs.is-toggle label:hover {
	color: var(--pag-text-h);
    background-color: var(--pag-bg-h);
}

div.panel .tabs.is-toggle li a,
.table.normal.secondary .tabs.is-toggle li a,
div.panel .tabs.is-toggle li label {
  background-color: var(--pag-bg);
  border-color: var(--pag-border);
}
div.panel .tabs.is-toggle li.is-active a,
.table.normal.secondary .tabs.is-toggle li.is-active a,
div.panel .tabs.is-toggle li.is-active label {
    color: var(--pag-active-text);
    background-color: var(--pag-active-bg);
	border-color: var(--pag-border);
}

/* modifications for pills */

.tabs.is-toggle li.is-pill {
	margin-bottom: 5px;
}

.tabs.is-toggle li.is-pill + li.is-pill {
  margin-left: 10px;
}

.tabs.is-toggle li.is-pill a,
.tabs.is-toggle li.is-pill label {
  border-radius: 15px;
}

.tabs.is-toggle li.is-pill label input {
	display: none;
}

.tabs.wrap ul {
	flex-wrap: wrap;
	max-width: 100%
}

/*
	BULMA CHECKRADIO
*/

.is-checkradio[type=checkbox]+label::before, 
.is-checkradio[type=checkbox]+label:before, 
.is-checkradio[type=radio]+label::before, 
.is-checkradio[type=radio]+label:before {
	border-color: var(--content-text);
}

.is-checkradio[type=checkbox]:checked+label::before, 
.is-checkradio[type=checkbox]:checked+label:before, 
.is-checkradio[type=radio]:checked+label::before, 
.is-checkradio[type=radio]:checked+label:before {
	border-color: var(--green);
}

.is-checkradio[type=checkbox]+label::after, 
.is-checkradio[type=checkbox]+label:after {
	border-color: var(--green);
}

/*
	BULMA MODAL
*/

.delete, .modal-close {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.delete, .modal-close {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: rgba(10, 10, 10, 0);
	border: none;
	border-radius: 290486px;
	cursor: pointer;
	pointer-events: auto;
	display: inline-block;
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 0;
	height: 20px;
	max-height: 20px;
	max-width: 20px;
	min-height: 20px;
	min-width: 20px;
	outline: none;
	position: relative;
	vertical-align: top;
	width: 20px;
	opacity: 0.7;
}
.delete:hover, .modal-close:hover {
	opacity: 1;
}

.delete::before, 
.modal-close::before, 
.delete::after, 
.modal-close::after {
	background-color: var(--content-text);
	content: "";
	display: block;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transform-origin: center center;
}

.delete::before, 
.modal-close::before {
	height: 2px;
	width: 100%;
}

.delete::after, .modal-close::after {
	height: 100%;
	width: 2px;
}

.delete:hover, 
.modal-close:hover, 
.delete:focus, 
.modal-close:focus {
	background-color: rgba(10, 10, 10, 0.3);
}

.delete:active, 
.modal-close:active {
	background-color: rgba(10, 10, 10, 0.4);
}

.is-small.delete, 
.is-small.modal-close {
	height: 16px;
	max-height: 16px;
	max-width: 16px;
	min-height: 16px;
	min-width: 16px;
	width: 16px;
}
.is-small.delete::before,
.is-small.delete::after {
	background-color: var(--link);
	transition:	width  .2s ease-in-out 0s, height .2s ease-in-out 0s;
}

.is-small.delete:hover::before {
	height: 4px;
	background-color: var(--link-h);
}
.is-small.delete:hover::after {
	width: 4px;
	background-color: var(--link-h);
}

.is-medium.delete, .is-medium.modal-close {
	height: 24px;
	max-height: 24px;
	max-width: 24px;
	min-height: 24px;
	min-width: 24px;
	width: 24px;
}

.is-large.delete, .is-large.modal-close {
	height: 32px;
	max-height: 32px;
	max-width: 32px;
	min-height: 32px;
	min-width: 32px;
	width: 32px;
}

/* reset glyph */
.reset-glyph {
	position: absolute;
	right: 2px;
	top: 4px;
	width: 15px;
	height: 15px;
	opacity: 0.8;
	cursor: pointer;
}
.reset-glyph:before, 
.reset-glyph:after {
	position: absolute;
	top: 0;
	left: 0;
	content: ' ';
	height: 13px;
	width: 2px;
	background-color: var(--black);
}
.reset-glyph:before {
	transform: rotate(45deg);
}
.reset-glyph:after {
	transform: rotate(-45deg);
}

.modal, .modal-background {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	background-color: #4448;
}

.modal {
	align-items: center;
	display: none;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	position: fixed;
	z-index: 200;
}

.modal.is-active {
	display: flex;
}

/* .modal-background {
	background-color: rgba(10, 10, 10, 0.86);
} */

.modal-content,
.modal-card {
	margin: 0 20px;
	max-height: calc(100vh - 160px);
	overflow: auto;
	position: relative;
	width: 100%;
}

.modal-close {
	background: none;
	height: 40px;
	position: fixed;
	right: 20px;
	top: 20px;
	width: 40px;
}

.modal-card {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 40px);
	overflow: hidden;
	-ms-overflow-y: visible;
	overflow-y: visible;
	background-color: var(--w-card-bg);
}

.modal-card-head,
.modal-card-foot {
	align-items: center;
	background-color: whitesmoke;
	display: flex;
	flex-shrink: 0;
	justify-content: flex-start;
	padding: 0 10px;
	position: relative;
}

.modal-card-head {
	padding: 0 10px;
}

.modal-card-head {
	border-bottom: 1px solid #dbdbdb;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

.modal-card-title {
	color: var(--h1-text);
	flex-grow: 1;
	flex-shrink: 0;
	font-size: 1.2rem;
	line-height: 1;
	margin: 5px 0;
}

.modal-card-foot {
	padding: 8px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	border-top: 1px solid #dbdbdb;
}

.modal-card-foot .button:not(:last-child) {
	margin-right: 0.5em;
}

.modal-card-body {
	-webkit-overflow-scrolling: touch;
    background: var(--content-bg);
    color: var(--content-text);
	flex-grow: 1;
	flex-shrink: 1;
	overflow: auto;
	padding: 20px;
}
  
.modal-card-head, 
.modal-card-foot {
	background-color: var(--panel-background);
	color: var(--panel-text);
}

.modal-card-head a:hover,
.modal-card-foot a:hover {
	color: var(--link-hover) !important;
}

.modal-card-head {
	border-bottom-color: var(--panel-border);
}

.modal-card-foot {
	border-top-color: var(--panel-border);
}

.modal-card-body {
	background-color: var(--content-bg);
	color: var(--content-text);
}

.modal-content h1 {
	color: #4a4a4a !important;
  }

.modal-content .red {
	color: var(--red) !important;
}

.modal-content.waja-picker,
.modal-card.waja-picker {
	width: 812px;
}

.modal-content.waja-picker-2,
.modal-card.waja-picker-2 {
	width: 820px;
}

.modal-card-title {
    color: var(--h1-text);
}

.modal-card-head, .modal-card-foot, .modal-card-head, .modal-card-foot {
    background: var(--panel-bg);
    border-color: var(--panel-border);
}


.modal-card-head a:hover, .modal-card-foot a:hover {
    color: var(--link-h) !important;
}

/******************************
**	WAJA CHOOSER
******************************/

.waja-chooser-stats {
	width: 350px;
}

.waja-chooser-waja-details {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.waja-chooser-waja-details .label-value {
    margin: 0 8px;
    text-align: center;
}

/******************************
**	AUCTIONS
******************************/

div.auction_wrap{
	width:70px;
	height:75px;
	clear:none;
	float:left;
	margin: 5px;
}

div.auction_count{
	margin:4px;
	font-weight:bold;
	font-size:12px;
}

div.auction_click{
	text-align:center;
	cursor:pointer;
}

#auction-quantity-section,
.auction-form {
	margin: 10px 20px;
}

#create-auction-section,
.auction-list-header {
	margin: 10px 20px 0 10px;
}

.auction-list-title {
	display: flex;
}

.auction-list-title h2 {
	margin: 0;
	padding: 0;
}

.filter-box {
	border: 1px solid var(--filter-border);
	border-radius: 10px;
	padding-bottom: 15px;
}

.content .filter-box,
.row1 .filter-box {
	border-color: var(--filter-border);
}

.filter-box.red {
	border-color: var(--red);
}

.filter-box.no-padding {
	padding-bottom: 0;
}

.filter-box.background {
	background-color: #fff4;
}

.filter-box.primary {
	background: var(--filter-primary-bg);
	color: var(--filter-primary-text);
}

.filter-box.secondary {
	background: var(--filter-secondary-bg);
	color: var(--filter-secondary-text);
}

.filter-box.current-color {
	border-color: currentColor;
}

div.panel div.filter-box h2 {
	padding: 0;
	margin: 0;
	text-align: center;
}

div.panel div.filter-box h2.align-left {
	text-align: left;
}

.filter-box p {
	margin: 10px 0;
}

.filter-box p:first-child {
	margin-top: 0;
}

.cmp-filter {
	position: absolute; 
	left: 3px; 
	top: 2px;
}

.auction-info {
	font-size: 12px;
	font-style: italic;
	opacity: 0.8;
}

.auction-card {
	max-width: 750px;
	margin: 0 auto 20px auto;
	border: 1px solid var(--auction-border);
	border-radius: 5px;
	background: var(--auction-bg);
	color: var(--auction-text);
}

.auction-card.hilited {
	border-color: var(--highlight);
}

.auction-card-head-alt {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding: 5px 0 2px 0;
	background-color: var(--news-header-bg);
}

.auction-card.transparent {
	background: transparent;
	border: none;
	max-width: none;
}

div.panel .auction-card a {
	color: var(--link);
}

div.panel .auction-card a:hover {
	color: var(--link-h);
}

.auction-card-contents {
	margin: 3px 15px;
}

.auction-card-head {
	display: flex;
	align-items: center;
}

.auction-card-body {
	margin-top: 10px;
	display: flex;
}

.auction-card .news-fadeout {
	border-radius: 5px;
}

.project-card {
	border: 1px solid var(--filter-border);
	border-radius: 5px;
	background: var(--auction-bg);
	color: var(--auction-text);
}

.project-card .project-name {
	/* font-family: 'Bubblegum Sans', tahoma, sans-serif; */
	letter-spacing: 1px;
	/* text-align: center; */
	padding: 0px;
	font-size: 22px;
	font-weight: normal;
	margin-top: 5px;
	margin-bottom: 5px;
}


.star {
	vertical-align: 1px;
}

.star.hidden {
	display: none;
}

.auction-name {
	font-size: 18px;
}

.auction-by {
	margin: 0 10px;
    white-space: nowrap;
}

.auction-current-bid {
	text-align: right;
    white-space: nowrap;
}

.auction-card-items,
.auction-card-wajas {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	justify-content: space-around;
	justify-content: space-evenly;
}

.auction-card-item {
	min-width: 100px;
	width: 100px;
	margin-bottom: 20px;
	position: relative;
	font-weight: normal;
}

.auction-card-item.no-padding {
	margin-bottom: 0;
}

.auction-item-name {
	min-height: 2.5em;
}

.auction-item-image {
	width: 80px;
	height: 80px;
	margin-left: 10px;
}

.auction-item-badge {
	position: absolute;
	top: 50px;
	left: 0px;
	min-width: 30px;
	height: 34px;
	border: 1px solid var(--badge-text);
	border-radius: 17px;
	text-align: center;
	background: var(--badge-bg);
	color: var(--badge-text);
	font-family: arial, sans-serif;
	font-size: 24px;
	line-height: 36px;
	font-weight: normal;
	padding: 0 2px;
}

.badge {
	background: var(--badge-bg);
	color: var(--badge-text);
	border-color: var(--badge-text);
}

.generic-badge {
	display: inline-block;
	min-width: 30px;
	height: 34px;
	border: 1px solid var(--badge-text);
	border-radius: 17px;
	text-align: center;
	background: var(--badge-bg);
	color: var(--badge-text);
	font-family: arial, sans-serif;
	font-size: 24px;
	line-height: 36px;
	font-weight: normal;
	padding: 0 2px;
}

.more-items-note {
	width: 100px;
	text-align: center;
	font-size: 11px;
}

.auction-card label {
	display: inline-block;
	min-width: 6em;
}

.auction-card.gift-card {
	position: relative;
	z-index: 10;
}

.auction-card.gift-card .gift-close-widget {
	position: absolute;
    right: 6px;
    top: 4px;
	z-index: 10;
}

.auction-card.gift-card .gift-seen-widget {
	position: absolute;
    right: 40px;
    top: 10px;
	z-index: 10;
}

.auction-card.gift-card .value {
	font-family: 'Architects Daughter', cursive;
	font-weight: normal;
	font-size: 22px;
	overflow-wrap: break-word;
	max-width: 500px;
}

.auction-card.gift-card .gift-note {
	max-height: 800px;
	overflow: auto;
}

.auction-card-waja {
	max-width: 300px;
	margin: 0 0 15px 0;
	text-align: center;
	position: relative;
	border: 1px solid var(--auction-waja-border);
	border-radius: 5px;
    background: var(--auction-waja-bg);
}

.auction-waja-image {
	width: 300px;
	height: 218px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.auction-waja-name {
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.auction-waja-badge {
	position: absolute;
	right: -2px;
	top: 84px;
	color: #f00;
}

.auction-waja-details {
	display: flex;
	flex-wrap: wrap;
	margin-top: 10px;
	text-align: left;
	max-width: 300px;
}

.auction-waja-details .label-value {
	min-width: 100px;
}
.waja-overlay .auction-waja-details .label-value {
	min-width: 70px;
}

.auction-card-controls {
	text-align: center;
}

.auction-card-controls button,
.auction-card-controls a.medium-button {
	margin-top: 10px;
	margin-bottom: 5px;
}

.auction-card-item .auction-remove-item {
	position: absolute;
	top: -1px;
	right: 4px;
}

.auction-card-waja .auction-remove-item {
	position: absolute;
	top: 2px;
	right: 1px;
}

.auction-note {
	font-size: 14px;
	font-style: italic;
}

.buy-it-now {
	margin-top: 5px;
	font-size: 0.8em;
	font-style: italic;
}

/******************************
**	TRADE CARD
******************************/

.trade-card-item {
	min-width: 95px;
	width: 95px;
	margin-bottom: 20px;
	position: relative;
	text-align: center;
}

.trade-item-image {
	width: 80px;
	height: 80px;
	margin-left: 10px;
	margin-bottom: 10px;
}

.trade-card-item .auction-remove-item {
	position: absolute;
	top: -1px;
	right: 0;
}

/******************************
**	GIFT CARD
******************************/

.message-back-section {
	margin: 20px 0;
	/* display: inline-block; */
	position: relative;
}

.message-back-section .thanked-glyph {
	position: absolute;
    left: 16px;
    top: 16px;
    font-size: 15px;
}

/* .message-back-section .smalltext {
	font-size: 16px;
} */

/******************************
**	PROFILE PAGE
******************************/

div#player_info {
	background-color: #C3E4D3;
	width: 375px;
	float: left;
	padding-left: 5px;
	padding-right: 5px;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 10px;
	border-radius: 10px;
}

div#player_links {
	background-color: #C3E4D3;
	width: 390px;
	position: absolute;
	padding-left: 5px;
	padding-right: 5px;
	margin-top: 5px;
	margin-left: 390px;
	margin-bottom: 10px;
	border-radius: 10px;
}

	div#player_links h1 {
		text-align: left;
	}

div#message_player {
	background-color: #C3E4D3;
	width: 390px;
	position: absolute;
	padding-left: 5px;
	padding-right: 5px;
	margin-top: 105px;
	margin-left: 390px;
	margin-bottom: 10px;
	border-radius: 10px;
}

div#flower_patch {
	background-color: #C3E4D3;
	width: 750px;
	position: absolute;
	margin-top: 10px;
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 5px;
	margin-top: 600px;
	border-radius: 10px;
}

div#flower_patch img {
	margin: 4px;
}

/*****************
** From Ondreya's friend
*****************/

body {
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: 100%;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
    background-image: var(--header-image);
    background-color: var(--body-bg);
    color: var(--body-text);
}

body.no-background {
	background-image: none;
}

body a {
	color: var(--link);
}

body a:hover {
    color: var(--link-h);
	fill: var(--link-h);
	text-decoration: none; /*layout*/
}

body a svg:hover {
	fill: var(--link-h);
}

pre,
.pre {
	font-family: 'DroidSans Mono', monospace;
	white-space: pre-wrap;
}

.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.justify {
	text-align: justify;
}

.right {
	text-align: right;
}

.footer {
	font-weight: bold;
	font-size: 13px;
}

.half {
	width: 50%;
}

h1 {
	font-family: 'Caveat Brush', Tahoma, Verdana, sans-serif;
	letter-spacing: 1px;
	text-align: center !important;
	padding: 0px;
	font-size: 25px !important;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
}

h1.align-left {
	text-align: left !important;
}

h1.align-right {
	text-align: right !important;
}

h1.no-padding {
	margin: 0;
}

h2 {
	font-family: 'Caveat Brush', Tahoma, Verdana, sans-serif;
	text-align: justify;
	padding: 10px 0 0 0;
	font-weight: normal;
	font-size: 18px;
}

h2.no-padding {
	padding: 0;
	margin: 0;
}

h3 {
	background: -webkit-linear-gradient(left, #36adcf , #477d5b); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, #36adcf, #477d5b); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, #36adcf, #477d5b); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #36adcf , #477d5b); /* Standard syntax */
	font-family: 'Caveat Brush', Tahoma, Verdana, sans-serif;
	letter-spacing: 1px;
	border-radius: 5px;
	border: 1px solid #2e434b;
	font-weight: normal;
	text-shadow: 1px 1px 0px #86cde0;
	font-size: 20px;
	height: 23px;
	padding: 5px;
}

h4 {
	background: -webkit-linear-gradient(bottom, #36adcf , #218da9); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(top, #36adcf, #218da9); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(top, #36adcf, #218da9); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to top, #36adcf , #218da9); /* Standard syntax */
	font-family: 'Caveat Brush', Tahoma, Verdana, sans-serif;
	color: #f0f0f0;
	text-align: center;
	margin-left: -5px;
	margin-right: -5px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-weight: normal;
	text-shadow: 1px 1px 0px #477d5b;
	font-size: 20px;
	letter-spacing: 1px;
	height: 20px;
	padding: 5px;
	border-style: double;
	border-right: none;
	border-left: none;
	border-top-width: 4px;
	border-bottom-width: 4px;
	border-top-style: double;
	border-bottom-style: double;
	border-top-color: #2c9dbd;
	border-bottom-color: #2c9dbd;
	margin-top: 0px;
	margin-bottom: 5px;
}

h4 a:link {
	color:#f0f0f0;
	text-decoration:none;
}

h6 {
	padding: 0px 5px 5px 10px;
	font-size: 14px;
	font-weight: normal;
	text-align: left;
	-webkit-margin-before: 0px;
	-webkit-margin-after: 0px;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
}

.nav_container {
	border-style: solid;
	border-color: #2e434b;
	background-color: #F0F0F0;
	border-radius: 10px;
	padding-left: 5px;
	padding-right: -5px;
	padding-top: 5px;
	padding-bottom: -10px;
	margin-bottom: 5px;
	text-align: left;
	box-shadow: 3px 5px 5px #264230;
	-webkit-box-shadow: 3px 5px 10px #264230;
	height:30px;
	width: 800px;
}

.nav1 {
	margin-top: -5px;
	margin-left: -5px;
}

.nav2 {
	margin-top: -5px;
}

.nav3 {
	margin-top:-5px;
}

.nav4 {
	margin-top: -5px;
}

.nav_links {
	font-family: brush;
	font-size: 30px;
	text-align: center;
	color: #8b9994;
	text-shadow: -1px -1px 0px #fff;
	padding: 0px;
	width: 25%;
	float: left;
}

.nav_links a:link {
	border-radius: 9px;
	color: #8b9994;
	text-decoration: none;
	display: block;
}

.nav_links a:active {
	border-radius: 9px;
	color: #8b9994;
	text-decoration: none;
	display: block;
}

.nav_links a:visited {
	border-radius: 9px;
	color: #8b9994;
	text-decoration: none;
	display: block;
}
.nav_links a:hover {
	border-radius: 9px;
	color: #4f5955;
	text-decoration: none;
	display: block;
}

.page-banner {
	display: block;
	text-align: center;
	font-family: 'Bubblegum Sans', Tahoma, Verdana, sans-serif;
	letter-spacing: 5px;
	font-size: 48px;background: -webkit-linear-gradient(var(--top-nav-link), var(--top-nav-linkl-h));
	-webkit-background-clip: text;
    background-clip: text;
	-webkit-text-fill-color: transparent;
}

table.normal {
	-webkit-box-shadow: 2px 2px 1px var(--table-shadow);
	box-shadow: 2px 2px 1px var(--table-shadow);
	border-spacing: 0;
	border-collapse: collapse;
	width: 96%;
	margin-left: 2%;
	margin-right: 2%;
	background: var(--table-bg);
	border: 1px solid var(--table-border);
}

table#news-comments {
    background: var(--table-bg-3);
}

table.normal.wide {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

table.normal.noborder {
	-webkit-box-shadow: none;
	box-shadow: none;
	border: none !important;
}

table.normal th {
    color: var(--th-text);
	padding: 5px;
	background: linear-gradient(to right, var(--th-bg-1) , var(--th-bg-2));
	border-bottom: 1px solid var(--table-border);
}

table.normal td {
	color: var(--table-text);
	padding: 5px;
}

table.normal td a {
    color: var(--link);
}

table.normal h3 {
	text-align: center;
	border: 0px;
}

tr.forum_row_sticky {
	background-color: var(--sticky-bg);
}

tr.forum_row_one,
table tr.row1,
table td.cell1 {
	background-color: var(--table-bg);
}

tr.forum_row_two,
table tr.row2,
table td.cell2 {
	background-color: var(--table-bg-2);
}

table.normal.subtle {
	box-shadow: none;
    -webkit-box-shadow: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

table.normal.subtle tr:last-child {
	border-bottom-width: 2px;
}

table.subtle td {
	padding: 5px;
	height: 44px;
}

table.subtle.lined {
	border: 1px solid #fff8;
}

table.subtle.lined td {
	border-bottom: 1px solid #fff8;
}

table.subtle tr,
table.subtle tr.row1,
table.subtle tr.row2 {
	background-color: var(--table-bg);
	border-bottom: 1px solid var(--table-border-subtle);
}

table tr.hilite,
table tr.hilite th {
	background: var(--sticky-bg);
}

table tr.hilite td {
	color: var(--highlight);
}

table tr.hilite a {
	color: var(--highlight);
}

table td.cell1 {
	text-align: left;
}

table td.cell2 {
	text-align: left;
}

table.outlined {
	border: 1px solid var(--table-border);
}

table.outlined th {
	border: none;
	border-bottom: 1px solid var(--table-border);
}

table tr.backordered {
	font-style: italic;
}

.table.normal .table-row {
	color: var(--table-text);
}

.table.normal.alternate .table-row:nth-child(odd) {
	background-color: var(--table-bg);
}

.table.normal.alternate .table-row:nth-child(even) {
	background-color: var(--table-bg-2);
}

.table.normal .table-row.row1 {
	background-color: var(--table-bg);
}

.table.normal .table-row.row2 .filter-box {
	border-color: var(--filter-border);
}

.table.normal .table-row.row2 {
	background-color: var(--table-bg-2);
}

.table.normal .table-row.secondary {
    background-color: var(--secondary-bg);
	color: var(--secondary-text);
}

/*
	TABLE LIKE DIV
*/

.table.normal {
	background-color: var(--table-bg);
	border: 1px solid var(--table-border);
    box-shadow: 2px 2px 1px var(--table-shadow);
	display: block;
}

.table-header,
.table-subheader {
	display: flex;
	color: var(--th-text);
	background: linear-gradient(to right, var(--th-bg-1) , var(--th-bg-2));
	border-bottom: 1px solid var(--table-border);
	font-weight: bold;
	padding: 5px;
}

.table-header {
	justify-content: center;
}

.cave-section.table .table-header {
    background: none;
    border: none;
}

.table .table-row {
	display: flex;
	align-items: baseline;
	padding: 0 5px 2px 5px;
	color: var(--table-text);
}

.table .table-row.p-20 {
	padding: 0 20px;
}

.table .table-row.align-top {
	align-items: flex-start;
}

.table .table-row.align-baseline {
	align-items: baseline;
}

.table .table-row.align-center {
	align-items: center;
}

.table-row.new .row-name {
	font-weight: bold;
}

.table-row.new .hex.clickable {
	background-color: #fff;
	border: 1px solid #aaa;
	color: #444;
	padding: 1px 2px;
}

.table-grid {
	display: flex;
	flex-wrap: wrap;
}

.table-grid .table-row {
	position: relative;
	display: block;
	width: 250px;
	text-align: center;
	padding: 5px 0;
	color: #fff;
}

div.page_container {
	width: 1000px;
	margin: 0 auto;
}


/*
	FLEXBOX PAGE LAYOUT, OCT 2019
*/

.page {
	width: 1000px;
	display: flex;
}	
.page-content {
	width: 808px;
}


table.content_container {
	width: 100%;
	border-spacing: 5px 0px;
}

table.right_panels,
div.right_panels {
	width: 100%;
	min-width: 780px;
}

td.left_panels {
	width: 210px;
	vertical-align: top;
	line-height: 1.4em;
}
td.left_panels .panel {
	width: 159px;
	min-width: 159px;
}
td.left_panels .profile-avatar {
	width: 84px;
	height: auto;
	max-height: 84px;
}

td.right_panels {
	vertical-align: top;
}

div.panel {
	border-style: solid;
	border-radius: 10px;
	border-color: var(--panel-border);
	background-color: var(--panel-bg);
	color: var(--panel-text);
	padding: 5px;
	margin-bottom: 5px;
	text-align: left;
	-webkit-box-shadow: 3px 5px 10px var(--panel-shadow);
	box-shadow: 3px 5px 10px var(--panel-shadow);
}

div.panel.main-panel {
	min-height: 709px;
	display: flex;
	flex-direction: column;
}

div.panel.main-panel .content {
	flex: 1;
}

.left-nav a {
	display: block;
    padding-left: 5px;
    padding-right: 5px;
}

div.panel .left-nav a:hover {
    background: var(--sidebar-bg-h);
    border-radius: 5px;
    text-decoration: none;
}

div.panel .nav-header a, .nav-header.clickable.ellipsis {
	color: var(--sidebar-header);
}

div.content.left-nav {
    padding: 5px 0px;
}

.nav-spacer {
	height: 1em;
}

.nav-line {
	padding-top: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid currentColor;
	opacity: 0.7;
}

.nav-header {
	margin-top: 10px;
	text-align: center;
}

.nav-header {
	opacity: 1.0;
}

.nav-header.minus {
	opacity: 0.7;
}

.nav-section {
    transition: height 0.25s ease-in;
    overflow: hidden;
}

.nav-section.hide {
    height: 0 !important;
    transition: height 0.25s ease-out;
}

div.panel h1, 
div.panel h2 {
	text-align: justify;
	font-size: 20px;
	font-weight: normal;
}

div.panel h2 {
	font-size: 16px;
}

div.panel h2.center {
	text-align: center;
}

div.panel a {
	text-decoration: none;
	color: var(--link);
}

div.panel a:hover,
div.panel a.fake-hover,
div.panel a.underline {
	text-decoration: underline;
	color: var(--link-h);
}

div.content {
	border-radius: 10px;
	margin-bottom: 5px;
	padding: 5px;
	background: var(--content-bg);
	box-shadow: 2px 2px 1px var(--content-shadow);
	color: var(--content-text);
}

div.content:last-child {
	margin-bottom: 0;
}

div.content.not-last:last-child {
	margin-bottom: 5px;
}

.viewing_panes {
	box-shadow: 3px 3px 1px #58766b;
	-webkit-box-shadow: 3px 3px 2px #58766b;
}

div.bank_content {
	border-radius: 10px;
	padding: 5px;
	width: 380px;
	background-color: var(--panel-bg);
}

table.bank_details {
	background: none;
}

table.bank_details caption {
	padding: 5px;
	background: linear-gradient(to right, var(--th-bg-1) , var(--th-bg-2));
    color: var(--th-text);
}

table.update_message{
	margin: 0 auto;
}

div#ajax_msg {
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 10px;
	text-align: center;
	border-radius: 5px;	
	background-color: var(--notice-bg);
	color: var(--notice-text);
}

div#ajax_msg:empty {
  display: none;
}

div#ajax_msg {
	background-color: var(--notice-bg);
	color: var(--notice-text);
}

div#ajax_msg .red, div#ajax_msg .red a {
	color: var(--notice-red);
}

div#ajax_msg a {
    color: var(--notice-link);
}

div#ajax_msg a:hover {
    color: var(--notice-link-h);
}

div#inventory_container {
	margin: 0px 20px;
    display: flex;
    flex-wrap: wrap;
}

.project-stash {
    margin: 0px;
    display: flex;
    flex-wrap: wrap;
}

div.inventory_wrap {
	width: calc(20% - 10px);
	clear: none;
	float: left;
	margin: 5px;
	position: relative;
}
div.inventory_wrap.waja {
	width: calc(25% - 10px);
}


div.inventory_wrap_small {
	width: 80px;
	height: 110px;
	clear: none;
	float: left;
	margin: 5px;
}

div.inventory_item,
div.card-border {
	border: 1px solid var(--inventory-item-border);
    border-radius: 5px;
	padding: 2px;
	display: block;
	text-align: center;
    background-color: var(--inventory-item-bg);
}
div.inventory_item {
	position: relative;
	min-height: 180px;
}
div.inventory_item.hilited {
	border-color: var(--highlight);
}

.inventory_wrap.tall div.inventory_item {
	min-height: 215px;
}

.inventory_wrap.tall .item-name {
	min-height: 60px;
	font-size: 13px;
	line-height: 16px;
	color: var(--content-text);
}

div.inventory_count {
	margin: 4px;
	font-weight: bold;
	font-size: 18px;
}

div.inventory_click {
	text-align: center;
	cursor: context-menu;
}

div.inventory_item_name {
	font-size: 12px;
	line-height: 15px;
	min-height: 32px;
}

div.inventory_menu {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	min-width: 122px;
    z-index: 10;
}

div.inventory_menu ul {
	margin: 0px;
	padding: 0px;
    border-radius: 5px;
	list-style-type: none;
	background-color: var(--inventory-menu-bg);
    border: 1px solid var(--inventory-item-border);
}

div.inventory_menu ul li {
	color: var(--content-text);
	font-size: 14px;
}

div.inventory_menu.artist ul li {
	font-size: 14px;
	line-height: 20px;
}

div.inventory_menu ul a {
	text-decoration: none;
	display: block;
    width: inherit;
	color: var(--link);
    padding: 2px 5px;
}

div.inventory_menu ul a:hover {
	background-color: var(--inventory-menu-link-h-bg);
	color: var(--inventory-menu-link-h);
    text-decoration: none;
}

div.inventory_menu ul li:first-child {
padding: 5px 5px 0px 5px;
}

div.inventory_menu ul li:last-child {
padding-bottom: 5px;
}

div.inventory_click {
cursor: pointer;
padding: 5px;
}

div.waja_wrap_small {
	width: 150px;
	height: 150px;
	clear: none;
	float: left;
	margin: 5px;
}

div.waja_item {
	border: 1px solid black;
	padding: 2px;
	display: block;
	min-height: 160px;
}

div.pageLinkNav {
	margin-left: 11%;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}
a.prevNextLink {
	text-decoration: none;
}
a.pageNumberLink {
	text-decoration: none;
}
a.pageNumberLink:hover {
	text-decoration: underline;
}
span.currpage {
	font-size: 20px;
}

p.pleaseTextAlignRight {
	text-align: right;
}

/*
	OLD STYLE TOOLTIPS
*/

#dhtmltooltip {
	position: absolute;
	width: 200px;
	padding: 2px;
	visibility: hidden;
	z-index: 100;
    border: 1px solid var(--pag-border);
	box-shadow: 0px 0px 5px 2px var(--tooltip-glow);
	background-color: var(--pag-bg);
}

#dhtmltooltip h1 {
	padding: 0 10px 3px 10px;
	color: var(--h1-text);
}

#dhtmltooltip p {
	padding: 3px 10px 3px 10px;
	color: var(--pag-text);
}

#tip-top {
	background-color: var(--pag-bg);
	color: var(--pag-text);
}

#tip-middle {
	background-color: var(--pag-bg);
	color: var(--pag-text);
}

#tip-bottom {
	background-color: var(--pag-bg);
	color: var(--pag-text);
}

/*
	NEW STYLE TOOLTIPS & DIALOG WIDGET
*/

.ui-tooltip {
	z-index: 9999995;
}

.ui-widget {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
}

.ui-widget-header {
	border: none;
	background: var(--pag-bg);
	color: var(--h1-text);
    font-size: 20px;
}

.ui-dialog .ui-dialog-title {
    width: 100%;
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}

.ui-widget-content {
	background-color: var(--pag-bg);
	color: var(--pag-text);
    font-size: 17px;
    line-height: 22px;
}

.ui-widget-header.ui-progressbar-value {
    background-color: var(--h1-text);
}

/* .ui-widget-content strong {
	color: #fff;
} */

.ui-widget-content.ui-menu {
	font-size: 14px;
}

.ui-state-hover .ui-icon, 
.ui-state-focus .ui-icon, 
.ui-button:hover .ui-icon, 
.ui-button:focus .ui-icon {
	background-image: url("/_js/jquery-ui-1.12.1/images/ui-icons_ffffff_256x240.png");
}

.ui-dialog .ui-dialog-buttonpane {
	border: none;
}

.ui-widget-content h1 {
	margin: 0 0 5px 0;
	padding: 0 10px 3px 10px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 20px !important;
	font-weight: normal;
	color: var(--h1-text);
	text-shadow: none;
	background: transparent;
	-webkit-background-clip: initial;
	background-clip: initial;
	-webkit-text-fill-color: initial;
}

.ui-widget-content h2 {
	margin: 0 0 5px 0;
	padding: 0;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px !important;
	font-weight: normal;
	text-align: center;
	opacity: 0.8;
}

.ui-widget-content a {
	color: var(--link);
	text-decoration: underline;
}

.ui-widget-content p {
	margin: 0;
	padding: 3px 10px 10px 10px;
}

.ui-widget.ui-widget-content {
    border: 1px solid var(--pag-border);
	box-shadow: 0px 0px 5px 2px var(--tooltip-glow);
    border-radius: 5px;
    overflow: hidden;
}

.ui-widget-content label {
	display: inline-block;
	opacity: 0.8;
	margin-right: 5px;
	width: 4em;
}

.ui-widget-content label.wide {
	width: initial;
}

.ui-widget-overlay {
	background: #000;
	opacity: 0.6;
}

/* accordion header */

.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default, 
.ui-button, 
html .ui-button.ui-state-disabled:hover, 
html .ui-button.ui-state-disabled:active {
	border: 1px solid var(--pag-border);
	background: var(--pag-bg);
	color: var(--tooltip-color);
}

/* active accordion header */

.ui-state-active, 
.ui-widget-content .ui-state-active {
	border: var(--pag-bg-h); 
	background: var(--pag-bg-h);
	color: var(--pag-text-h);
}

/* accordion header hover */

.ui-accordion-header.ui-state-hover {
	border: var(--pag-bg-h); 
	background: var(--pag-bg-h);
	color: var(--pag-text-h);
}

/*
	TIPPY TOOLTIPS
*/

.tippy-box {
	background-color: var(--table-bg);
	color: var(--table-text);
}

.tippy-arrow {
	color: var(--table-bg);
}

/*
	HELP SYSTEM
*/

.page_container #page-help {
	display: none;
}

.page-help-widget {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 13px;
	float: right;
	margin-right: 5px;
}

.page-help-widget .fa {
	font-size: 28px;
}

/*
	OLD TOOLTIPS
*/
#tip-top {
	height: 10px;
}
#tip-middle {
	_margin-top: -10px;
}
#tip-bottom {
	height: 10px;
}


.home-cave-nav strong {
	font-weight: normal;
	text-transform: uppercase;
}

/* div#your_cave { } */
div#your_cave table {
	width: 610px;
}
div#your_cave th {
	text-align: center;
	font-size: 24px;
	padding: 5px;
}
div#your_cave td {
	text-align: justify;
	vertical-align: top;
	padding: 5px;
}
div.waja_count {
	width: 100%;
}
div.waja_count table {
	clear: both;
	float: right;
	margin-top: 0;
	margin-right: 25px;
	margin-left: 25px;
	margin-bottom: 10px;
}
div.waja_count table.waja_groups {
	clear: right;
}
div.waja_count table tr td {
	margin: 0;
	padding: 0;
}
div#cave_sidebar {
	width: 250px;
	float: right;
	text-align: left;
}

div.cave-summary {
	margin: 20px;
}
div.cave-summary a:hover {
	text-decoration: underline;
}
div.cave-summary .label-value {
	margin: 0 15px;
}

.cave-section {
	max-width: 775px;
}

/******************************
**	SHOP PAGE
******************************/

div#shop_container {
	margin-left: 40px;
	overflow: auto;
}

div.shop_wrap {
	width: 150px;
	height: 250px;
	clear: none;
	float: left;
	margin: 5px 20px 20px 0;
}

div.shop_wrap.cwp {
	width: 250px;
	height: 280px;
	margin-right: 5px;
}

div.shop_wrap_small {
	width: 80px;
	height: 110px;
	clear: none;
	float: left;
	margin: 5px;
}

div.shop_item,
.wajadex-card {
	border: 1px solid black;
	border-radius: 10px;
	padding: 2px;
	display: block;
	height: 100%;
	background: var(--shop-item-bg);
    border-color: var(--shop-item-border);
}

.wajadex-wrapper {
	display: flex;
	flex-wrap: wrap;
	row-gap: 10px;
	column-gap: 10px;
	margin-left: 9px;
}
.wajadex-card {
	position: relative;
	width: 360px;
	height: 83px;
	cursor: pointer;
}
.wajadex-card:hover {
	background: var(--shop-item-bg-h);
}
.wajadex-card:hover svg.wajas-glyph {
	fill: var(--link-h);
}
.wajadex-card img {
	display: inline-block;
	width: 80px;
	height: 80px;
	margin-right: 10px;
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 13px;
	line-height: 13px;	
}

.wajadex-glyph {
	position: absolute;
	bottom: 7px;
	left: calc(50% - 8px);
}
.wajadex-card .wajadex-glyph {
	left: initial;
	right: 5px;
}
.item-mini-card .wajadex-glyph {
	left: initial;
	right: 8px;	
}
.left_panels .wajadex-glyph {
	position: relative;
	top: initial;
	right: initial;
	left: initial;
	bottom: initial;
	opacity: 1.0;
}
a .wajadex-glyph {
	opacity: 0.5;
}
a .wajadex-glyph:hover {
	opacity: 1.0;
}

div.shop_item.black-friday {
	border: 3px solid var(--highlight);
}

.shop-item.odd .shop-item-body {
	background: var(--inventory-item-bg);
}

.shop-item.even .shop-item-body {
	background: var(--inventory-item-bg);
}

div.shop_count {
	margin: 4px;
	font-weight: bold;
	font-size: 18px;
}

div.shop_click {
	text-align: center;
	cursor: pointer;
}

div.shop_click img {
	padding: 0;
	margin: 10px 0 0 0;
}

div.shop_item_name {
	padding: 2px;
}

div.shop_item_price {
	margin-top: 10px;
	padding: 2px;
}

div.shop_item_purchase{
	font-size: 12px;
	padding: 2px;
}

div.shop_menu{
	display: none;
}

div.shop_menu ul{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	background-color: #515F82;
	background-color: #472F5B;
}

div.shop_menu ul li{
	font-size: 12px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 0;
	padding-bottom: 0;
}

div.shop_menu ul a{
	text-decoration: none;
	display: block;
	width: 100%;
	color: #000000;
}

div.shop_menu ul a:hover{
	background-color: #707A99;
	background-color: #B97FC9;
	color: #000000;
}

/******************************
**	SHOP PAGE WITH HOST
******************************/

.shop-name {
	text-align: center;
	font-size: 20px;
}

.shop-detail {
	display: flex;
	margin: 20px 0 10px;
}

.shop-waja img {
	border-radius: 5px;
	margin-right: 5px;
}

.shop-info {
	flex : 1;
	margin-bottom: 20px;
	border-radius: 5px;
}

.shop-info-header {
	font-weight: 600;
	border-radius: 5px 5px 0 0;
}

.shop-info-body {
	padding: 5px 30px;
	min-height: 198px;
	display: flex;
	align-items: center;
	max-width: 660px;
	overflow: hidden;
}

.shop-info-footer {
	border-radius: 0 0 5px 5px;
}

.shop-item {
	display: inline-block;
	width: 170px;
	margin: 10px;
	border-radius: 5px;
}

.content .shop-item {
	margin: 9px;
}

.shop-item-body {
	padding: 10px 0 40px 0;
	border-radius: 5px;
	/* min-height: 230px; */
}

.shop-item-name {
	text-align: center;
	padding: 2px 5px;
}

.shop-item-photo-qty {
	margin: 0 10px;
	background: var(--table-bg);
	border: 1px solid var(--table-subtle-border);
}

.shop-item-count {
	margin: 4px;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
}

.shop-item-price-row {
	display: flex;
	padding: 5px 11px 0 0;
}

.shop-item-price {
	flex: 1;
	text-align: right;
	padding-right: 5px;
	line-height: 21px;
}

.shop-item-btn input.submit_button {
	font-weight: 600;
	border: none;
	padding: 2px 5px;
	cursor: pointer;
}

.shop-item-btn input.submit_button:disabled {
	cursor: default;
}

.shopkeeper-text {
	color: var(--shopkeeper-text);
}

div.shopkeeper-text a {
	color: var(--shopkeeper-link);
}

div.shopkeeper-text a:hover {
	color: var(--shopkeeper-link-h);
	text-decoration: underline;
}

/******************************
**	SHOP PRICE SECTION
******************************/

.shop-price-section {
	background-color: #000;
	z-index: 1000;
	position: relative;
	border-radius: 10px;
}



.user-shop {
	width: 770px;
	margin: 0 10px;
}

/******************************
**	GENERIC THEME BOX
******************************/

.theme-box {
	vertical-align: top;
	background-color: var(--table-bg);	
	border: 1px solid var(--table-border);
	color: var(--table-text);
}
.theme-box-shield {
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.theme-box-header,
.theme-box-footer {
	padding: 5px;
	text-align: center;
}

.theme-box a {
	color: var(--link) !important;
}

.theme-box a:hover {
	color: var(--link-h) !important;
}

.theme-box-header {
	background: linear-gradient(to right, var(--th-bg-1) , var(--th-bg-2));
	border-bottom: 1px solid var(--table-border);
	color: var(--th-text) !important;
}

.theme-box-header a, div.panel th a {
	color: var(--th-link) !important;
}

.theme-box-header a:hover, div.panel th a:hover {
	color: var(--th-link-h) !important;
}

/******************************
**	BONUS BARN PAGE
******************************/

div.bonus_barn_wrap{
	width: 200px;
	height: 200px;
	clear: none;
	margin: 5px;
}

/******************************
**	FORUMS
******************************/

div.forum_area_row {
	margin: 10px 10px;
	width: 730px;
	text-align: left;
	font-size: 10pt;
	padding: 3px 5px;
	border-radius: 3px;
	color: var(--forums-link);
}

.forum_area_row.parent:hover {
	background-color: var(--parent-bg-h);
}

.clicked .forum_area_row {
	background-color: var(--forums-clicked-bg) !important;
}

div.forum_area_row .title {
	font-weight: bold;
	font-size: 16px;
}

.forum_area_row:hover .title {
	color: var(--forums-link-h);
}

div.panel .forum-list a:hover {
	text-decoration: none;
}

div.panel .forum-list a:hover .forum_area_row {
	border-color: #fff;
}

div.forum_area_row a.profile_link {
	font-size: 12px;
	font-weight:normal;
}

div.forum_area_row a:hover {
	text-decoration: underline;
}

div.parent {
	width: 720px;
	background-color: var(--parent-bg);
}

div.child {
	width: 670px;
	margin-left: 60px;
	background-color: var(--child-bg);
}

div.extra_info {
	float: right;
	text-align: right;
}

div.forum_thread_row {
	width: 600px;
}

td.board_topics{
	width: 300px;
	padding: 2px 10px;
	vertical-align: top;
}

td.board_topics a, td.board_last_post a{
	text-decoration: none;
}

td.board_topics a:hover, td.board_last_post a:hover{
	text-decoration: underline;
}

td.board_replies{
	width: 50px;
	font-size: 16px;
	text-align: center;
	vertical-align: middle;
}

td.board_last_post{
	width: 150px;
	text-align: right;
	padding: 2px 5px;
	vertical-align: top;
}

span.topic{
	font-size: 16px;
}

div.forum_post {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	word-wrap: break-word;
	background: linear-gradient(90deg, var(--post-side-bg) 180px, var(--post-body-bg) 0px);
	color: var(--post-body-text);
    border: 1px solid var(--table-border);
}

div.forum_post_header {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	border-radius: 10px;
	background-color: var(--post-side-bg);
	color: var(--post-side-text);
    border: 1px solid var(--table-border);
    overflow: hidden;
}

div.forum_post_header h3 {
	padding-top: 10px;
	padding-bottom: 23px;
	font-size: 28px;
	margin: 0;
	text-align: center;
	color: var(--h1-text);
	text-shadow: 1px 1px 0px var(--h1-shadow);
    border: none;
    background: var(--post-bg);
}

div.forum_post_header a {
	color: var(--th-link);
}

div.the-post > p:first-child {
	margin-top: 0;
}

.forum_post_content img {
	max-width: 100%;
	height: auto;
}

div.forum_topic {
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	background-color: var(--post-body-bg);
}

div.forum_topic h3 {
	border-radius: 0px;
}

div.forum_user_info {
	float: left;
	width: 170px;
	padding: 5px;
	text-align: center;
	color: var(--post-side-text);
}

.content div.forum_post {
	width: 790px;
	margin: 0 -7px;
}

div.forum_user_info.forum_backdrop {
	background-repeat: no-repeat;
}

div.forum_user_info.forum_2017.forum_backdrop .forum_info_header {
	min-height: 250px;
}

.post_user_avatar {
	position: relative;
}
.post_user_avatar > img {
	margin-bottom: 0;
}

.forum_tag_badge {
	display: none;
}

div.forum_user_info a {
	text-decoration: none;
	color: var(--th-link);
}

div.forum_user_info a:hover {
	text-decoration: underline;
}

.forum_avatar_title {
	font-family: verdana;
	font-size: 13px;
	font-style: italic;
	margin-bottom: 10px;
}

.forum_avatar_title:empty {
	display: none;
}

.forum_user_tag_and_name {
	display: flex;
	margin: 0 15px;
}

.forum_user_tag img {
	margin-left: -8px;
}

.forum_2017 .forum_user_name {
	flex: 1;
	text-align: center;
	font-weight: bold;
	line-height: 1.3em;
	word-break: break-word;
}

.forum_user_status {
	text-align: center;
	font-size: 14px;
}

.forum_main_name {
	font-size: 13px;
	margin: 5px 0;
}

/* feather badge, Apr 2019 */
.forum_user_tag {
	display: none;
}

.forum_tag_badge {
	display: block;
	position: absolute;
	top: -8px;
	left: -20px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid var(--badge-text);
	background-color: var(--badge-bg);
	color: var(--badge-text);
    opacity: 80%;
}

.forum_tag_badge img {
	margin-top: 5px;
}

.forum_backdrop .forum_avatar_title,
.forum_backdrop .forum_user_name a,
.forum_backdrop .forum_user_status,
.forum_backdrop .forum_main_name a,
.outlined-text {
	color: #fff;
	text-shadow:
	  -1px -1px 0 #444,
	   1px -1px 0 #444,
	   -1px 1px 0 #444,
		1px 1px 0 #444;
}

.auction-card .news-fadeout, .news-fadeout {
    background-image: linear-gradient(-180deg, rgba(9,51,84,0.00) 0%, var(--auction-bg) 90%);
}

.forum_backdrop .forum_avatar_title {
	margin-top: 6px;
}

div.forum_post_content {
	float: right;
	margin: 5px 10px;
	padding-right: 4px;
	width: 580px;
}

div.forum_post_footer {
	float: left;
	width: 100%;
	font-size: 11px;
	margin-top: 15px;
	border-top: 1px dotted var(--table-border);
}

div.forum_post_report {
	clear: both;
	float: left;
}

div.forum_post_report a {
	color: var(--th-link);
}

.user-tag {
	display: inline-block;
	border: 1px solid currentColor;
	padding: 2px 5px 2px 2px;
	border-radius: 5px;
	line-height: 26px;
}

img.mini-avatar {
	max-height: 30px;
	max-width: 30px !important;
	vertical-align: middle;
}

div.clear_both {
	clear: both;
}

div.clearboth {
	clear: both;
}

.floatleft,
.float-left {
	float: left;
}

.floatright,
.float-right {
	float: right;
}

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.error {
	font-weight: normal;
}

.glow {
    color: var(--link);
    text-shadow: -1px -1px 6px var(--top-nav-glow), 1px -1px 1px var(--top-nav-glow), -1px 1px 1px var(--top-nav-glow), 1px 1px 1px var(--top-nav-glow);
}

.no-glow {
	color: var(--link);
}

.glow:hover {
	color: var(--link-h);
	text-shadow: -1px -1px 6px var(--top-nav-glow-h), 1px -1px 1px var(--top-nav-glow-h), -1px 1px 1px var(--top-nav-glow-h), 1px 1px 1px var(--top-nav-glow-h);
}

.no-glow:hover {
	color: var(--link-h);
}

.glow2 {
	text-shadow: 0 0 10px var(--glow-2), 0 0 20px var(--glow-2), 0 0 30px var(--glow-2), 0 0 40px var(--glow-2), 0 0 50px var(--glow-2), 0 0 60px var(--glow-2), 0 0 70px var(--glow-2);	
}

.image-glow {
	filter: drop-shadow(var(--filter-border) 0px 0px 4px);
}
img.image-outline {
	filter: drop-shadow(var(--filter-border) 0px 1px 0px) 
			drop-shadow(var(--filter-border) 0px -1px 0px) 
			drop-shadow(var(--filter-border) 1px 0px 0px) 
			drop-shadow(var(--filter-border) -1px 0px 0px);
}

select, #nextgen select {
    background-color: var(--select-bg);
    border: 1px solid var(--select-border);
    color: var(--select-text);
}

hr {
	border-color: var(--content-text);
}

.sc-draggable {
	background-color: #b35e03;
}

.hugetext {
	font-family: 'Bubblegum Sans', Tahoma, Verdana, sans-serif;
	letter-spacing: 1px;
	font-size: 24px;
}
.biggertext {
	font-size: 20px;
}
.bigtext {
	font-size: 17px;
}
.mediumtext {
	font-size: 14px;
}
.smalltext {
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 13px;
	line-height: 14px;
}
.smalltext.serif {
	line-height: 16px;
}
.smallertext {
	font-size: 12px;
}
.tinytext {
	font-size: 11px;
}
.uppercase {
	text-transform: uppercase;
}

.em {
	font-family: verdana, sans-serif;
	font-style: italic;
}


.fade0,  .fade-0  { opacity: 0.0; }
.fade10, .fade-10 { opacity: 0.1; }
.fade20, .fade-20 { opacity: 0.2; }
.fade30, .fade-30 { opacity: 0.3; }
.fade40, .fade-40 { opacity: 0.4; }
.fade50, .fade-50 { opacity: 0.5; }
.fade60, .fade-60 { opacity: 0.6; }
.fade70, .fade-70 { opacity: 0.7; }
.fade80, .fade-80 { opacity: 0.8; }
.fade90, .fade-90 { opacity: 0.9; }
.fade100, .fade-100 { opacity: 1.0; }


a.tinytext{
	text-decoration: none;
}
a:hover.tinytext {
	text-decoration: underline;
}
a:hover .fa {
	opacity: 1;
}

.scrollable {
	overflow-x: auto;
	overflow-y: auto
}

/******************************
**	LEFT NAV
******************************/
.sidebar-nav {
	font-size: 15px;
}
.sidebar-1up {
	margin-left: 5px;
	font-size: 13px;
}
.sidebar-2up {
	display: flex;
	justify-content: space-around;
	justify-content: space-evenly;
}
.sidebar-3up {
	display: flex;
	margin-top: 5px;
}
.sidebar-2up {
	font-size: 12px;
}
.sidebar-2up div,
.sidebar-3up div {
	text-align: center;
}

.sidebar-3up .fa {
	font-size: 30px;
}
.sidebar-2up.alt,
.sidebar-3up.alt {
	font-size: 12px;
	line-height: 13px;
}
.sidebar-2up.alt > div,
.sidebar-3up.alt > div {
	flex: 1;
}
.sidebar-2up.alt .fa,
.sidebar-3up.alt .fa {
	font-size: 24px;
}
.sidebar-2up span,
.sidebar-3up span {
	display: block;
}
.sidebar-2up.alt span,
.sidebar-3up.alt span {
	padding-top: 5px;
}

/* smaller fonts on mobile */
@media only screen and (max-device-width: 800px) {
	.sidebar-2up.alt,
	.sidebar-3up.alt {
		font-size: 12px;
		line-height: 14px;
	}
	.sidebar-2up.alt span,
	.sidebar-3up.alt span {
		margin-top: 2px;
	}
}


.sidebar-admin {
	display: flex;
	min-height: 30px;
	align-items: center;
	justify-content: center;
	transition:	font-size .5s ease-in-out 0.5s;
}
.sidebar-2up .fa {
	margin-right: 3px
}
.sidebar-admin .fa {
	margin-right: 5px
}
.sidebar-admin .fa,
.sidebar-admin span {
	transition:	all .3s ease-out 0s;
}
.sidebar-admin:hover span {
	font-size: 0;
	opacity: 0;
}
.sidebar-admin:hover .fa {
	margin-top: 10px;
	font-size: 70px;
	-moz-transform: rotate(60deg);
	-webkit-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	transform: rotate(60deg);
}

a.hover-spin:hover .fa {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

/*
	COIN-SPIN ANIMATION
*/

.coin-spin {
  animation: coin-spin 1.5s ease-in-out infinite;
}
@keyframes coin-spin {
  to {
    transform: rotateY(540deg);
  }
}


a.hover-coin-spin:hover > .fa {
  -webkit-animation: coin-spin-y 1.5s infinite linear;
  animation: coin-spin-y 1.5s infinite linear;
}

/* NOTE: ROTATEX & ROTATEY DO WEIRD THINGS IN SAFARI */
@keyframes coin-spin-y {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(359deg);
    transform: rotateY(359deg);
  }
}

a.hover-coin-spin-x:hover > .fa {
  -webkit-animation: coin-spin-x 1.5s infinite linear;
  animation: coin-spin-x 1.5s infinite linear;
}

@keyframes coin-spin-x {
  0% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(359deg);
    transform: rotateX(359deg);
  }
}


.cortana-spin {
  border: 2px solid hsla(185, 100%, 62%, 0.2);
  border-top-color: #3cefff;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  animation: cortana-spin 1s linear infinite;
}

@keyframes cortana-spin {
  to {
    transform: rotate(360deg);
  }
}


.hover-spin-60:hover .fa {
	transition:	all .3s ease-in-out 0s;
	-moz-transform: rotate(60deg);
	-webkit-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	transform: rotate(60deg);
}

.hover-spin-90 .fa {
	transition:	all 0.3s ease-in 0s;
}

.hover-spin-90:hover .fa {
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}



svg.dash-spin {
  width: 20px;
  transform-origin: center;
  animation: dash-rotate 2s linear infinite;
}

svg.dash-spin circle {
  fill: none;
  stroke: #fc2f70;
  stroke-width: 4;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}
svg.dash-spin circle.white {
  stroke: #fff;
}


@keyframes dash-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dashoffset: -125px;
  }
}




/******************************
**	TRANSITIONS
******************************/

.fade-enter-active, 
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, 
.fade-leave-to {
  opacity: 0;
}


/* fade up */
.fade-y-enter,
.fade-y-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
.fade-y-enter-active,
.fade-y-leave-active {
  transition: opacity 0.3s, transform 0.5s;
}

.expand-enter, 
.expand-leave-to {
	opacity: 0;
  }
  /* .expand-enter defines the starting state for entering */
  /* .expand-leave defines the ending state for leaving */
  .expand-enter-active, 
  .expand-leave-active {
	transition: all 0.5s ease;
  }


.slide-down-enter-active,
.slide-down-leave-active {
  transition: max-height 0.5s ease-in-out;
}
.slide-down-enter-to,
.slide-down-leave {
  overflow: hidden;
  max-height: 1000px;
}
.slide-down-enter,
.slide-down-leave-to {
  overflow: hidden;
  max-height: 0;
}


/* scale in animation */
.scale-in-enter,
.scale-in-leave-to{
   transform: scale(0.88);
   opacity: 0;
}
.scale-in-enter-active,
.scale-in-leave-active{
    transition:  transform 0.3s, opacity 0.5s ;
}

.scale-enter-active,
.scale-leave-active {
  transform-origin: top;
  transition: transform 0.3s ease-in-out;
}
.scale-enter-to,
.scale-leave-from {
  transform: scaleY(1);
}
.scale-enter-from,
.scale-leave-to {
  transform: scaleY(0);
}


/* roll in animation */
.roll-in-left-enter,
.roll-in-left-leave-to{
    transform: translateX(-500px) rotate(-200deg);
    opacity: 0;
}
.roll-in-left-enter-active,
.roll-in-left-leave-active{
    transition:  transform 0.3s, opacity 0.5s ;
}

.swirl-enter,
.swirl-leave-to{
  transform: rotate(-540deg) scale(0);
  opacity: 0;
}
.swirl-enter-active,
.swirl-leave-active{
  transition:  transform 0.5s, opacity 1s ;
} 

/* shrink animation */
.shrink-enter,
.shrink-leave-to {
  transform: scale(1.12);
  opacity: 0;
}
.shrink-enter-active,
.shrink-leave-active {
  transition: transform 0.5s, opacity 0.3s;
}


.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
	transform: scale(0);
  }
  50% {
	transform: scale(1.5);
  }
  100% {
	transform: scale(1);
  }
}


/******************************
**	NEWS MESSAGE
******************************/
table.news_message,
table.error_message,
table.confirm_message,
table.update_message,
table.event_message {
	width: 95%;
}
/******************************
**	NEW SUBMIT BUTTONS
******************************/
input.submit_button {
	border-width: 1px;
	border-style: groove;
	padding: 1px 5px;
	_padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 14px;
}

input.disabled_button {
	border-width: 1px;
	border-style: groove;
	padding: 1px 5px;
	_padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 14px;
	opacity: 0.5;
	cursor: not-allowed;
}

p.copyright,
div.footer_links {
	margin-left: 190px;
	text-align: center;
}

div.footer_links a {
    color: var(--body-link);
}

div.footer_links a:hover {
    color: var(--body-link-h);
}

.cancel-link,
.tiny-link {
	font-size: 13px;
	margin-left: 10px;
}

.big-cancel-link {
	font-size: 15px;
	margin-left: 20px;
}

.info-note {
	font-style: italic;
	font-size: 15px;
	margin-left: 30px;
	margin-right: 30px;
}

.tag {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	display: inline-block;
	font-style: normal;
	margin: 0px 2px;
	padding: 1px 7px;
	border: 1px solid var(--link);
	border-radius: 8px;
	color: var(--link);
	font-size: 11px;
	line-height: normal;
	text-transform: uppercase;
}

div.tag a, a.tag {
	border-color: var(--link);
	color: var(--link);
}

div.tag a:hover, a.tag:hover {
	border-color: var(--link-h);
	color: var(--link-h);
    text-decoration: none !important;
}

.tag.red, div.tag.red a, a.ellipsis span.tag.red:hover {
	background-color: var(--red);
	color: var(--tag-red-text) !important;
	border-color: var(--red) !important;
}

.tag.green, div.tag.green a, a.ellipsis span.tag.green:hover {
	background-color: var(--button-green-bg);
	color: var(--button-green-text) !important;
	border-color: var(--button-green-text) !important;
}

a span.tag.red:hover {
    background-color: var(--button-red-bg-h);
    border-color: var(--button-red-bg-h) !important;
    color: var(--button-red-text-h);
}

.tag.align-bottom,
.tag.inline {
	vertical-align: 2px;
}

.tag.small {
	font-size: 9px;
	padding: 0 5px;
}

.tag.big {
	font-size: 13px;
	margin: 0 10px 2px 0;
}

.tag.yellow {
	color: #444 !important;
	background-color: #f1d107 !important;
	border: 1px solid #444 !important;
}

.table.normal.secondary {
    background-color: var(--secondary-bg);
	color: var(--secondary-text);
    border: 1px solid var(--secondary-border);
}

.table.normal.secondary .table-header,
.table.normal.secondary .table-subheader, .table.normal.secondary .table-header {
	background: var(--secondary-header-bg);
	color: var(--secondary-text);
	border-bottom: 1px solid var(--secondary-border);
}

.table.normal.secondary a {
	text-decoration: underline;
	color: var(--secondary-link);
}
.table.normal.secondary a.medium-button {
	text-decoration: none;
}

.table.normal.secondary a:hover, .table.normal.secondary a.cancel-link:hover {
	text-decoration: underline;
    color: var(--secondary-link-h);
}

.table.normal.secondary a.cancel-link {
	text-decoration: none;
	color: var(--secondary-link);
}

.table.normal.secondary .tag {
	border: 1px solid var(--secondary-link);
	color: var(--secondary-link);
}

.red-hover:hover,
.table.normal.secondary .red,
.table.normal.secondary :hover .red-hover,
.table.normal.secondary .red-hover:hover {
	color: var(--secondary-red);
}

.green-hover:hover,
div.panel a.green-hover:hover,
.table.normal.secondary .green,
.table.normal.secondary :hover .green-hover,
.table.normal.secondary .green-hover:hover {
	color: var(--green);
}

pre .tag {
    border-color: #444 !important;
    background-color: #888 !important;
	color: #fff !important;
}

.big-tag-container {
	display: flex;
	flex-wrap: wrap;
	row-gap: 10px;
}

.user-banners {
	display: flex;
	justify-content: center;
	clear: both;
}

.banner-slot {
	height: 50px;
	overflow: hidden;
	margin: 10px 20px;
}

.banner-slot img {
	max-width: 150px;
	max-height: 50px;
}

.section {
	margin-left: auto;
	margin-right: auto;
	border-radius: 5px;
	padding: 10px;
    background: var(--filter-secondary-bg);
	color: var(--filter-secondary-text);
    border: 1px solid var(--filter-border);
}

/******************************
**	DESIGN PICKER
******************************/

#load-design-dropdown {
	width: 20em;
}

#design-name {
	width: 20em;
	margin-right: 10px;
}

#design-comment {
	width: 40em;
	height: 5em;
}

.save-design-picker .table-body {
	padding-left: 20px;
}

.design-controls label {
	display: block;
	font-size: 13px;
}

.load-design-name {
	font-size: 15px;
	font-weight: bold;
}

.load-design-comment {
	font-size: 14px;
	font-style: italic;
	margin-bottom: 10px;
}

.sharable-link {
	position: absolute;
	top: -2000px;
}

#load-link-note,
#save-link-note {
	margin-left: 10px;
	font-size: 13px;
}

/******************************
**	TOP NAV AND MENUS
******************************/

.top-nav .nav-item img {
	width: 175px;
}

.top-nav td {
	text-align: center;
}

.top-nav td.align-right {
	text-align: right;
}

.top-nav td .mega-menu {
	position: absolute;
	top: 35px;
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0px 0px 5px 5px var(--dropdown-glow);
	transition: opacity 0.2s ease-in-out 0s, visibility 0.2s linear 0s, z-index 0s linear 0.2s;
	visibility: hidden;
	opacity: 0;
	z-index: -1;
}

.top-nav.slim td .mega-menu {
	top: 35px;
	left: -10px;
}

.top-nav td.map .mega-menu.explore-menu {
	left: -7px;
}

.top-nav td.map .mega-menu.games-menu {
	left: -141px;
}

.top-nav td.map .mega-menu.shops-menu {
	left: -274px;
}


.top-nav td.clicked,
.top-nav td {
	position:		relative;
}

.top-nav td.clicked .mega-menu {
	visibility:		visible;
	opacity:		1;
	z-index:		200;
	transition:		opacity 0.3s ease-in-out 0s, visibility 0s linear 0s, z-index 0s linear 0s;
}
.top-nav-link {
	font-size: 28px;
	letter-spacing: 2px;
}
.top-nav-link .glyph {
	font-size: 23px;
	margin-right: 10px;
}
.top-nav-link .fa-chevron-down,
.top-nav-link .fa-close {
	display: none;
	margin-left: 2px;
	font-size: 14px;
	width: 1em;
	vertical-align: 2px;
}
.top-nav-link .glyph-only {
	font-size: 22px;
}

div.panel a.top-nav-link:hover {
	text-decoration: none;
}

div.panel a.top-nav-link {
	color: var(--top-nav-link);
	text-shadow: -1px -1px 2px var(--top-nav-glow), 1px -1px 2px var(--top-nav-glow), -1px 1px 2px var(--top-nav-glow), 1px 1px 2px var(--top-nav-glow);
}

div.panel a.top-nav-link:hover,
div.panel td.clicked a.top-nav-link {
	color: var(--top-nav-link-h);
	text-shadow: -1px -1px 2px var(--top-nav-glow-h), 1px -1px 2px var(--top-nav-glow-h), -1px 1px 2px var(--top-nav-glow-h), 1px 1px 2px var(--top-nav-glow-h);
}

tr.sortable-row {
	background-color: rgba(255,255,255,0.4);
}

.mega-menu.content {
	background-color: var(--panel-bg);
}

.mega-menu .mega-close {
	position: absolute;
	right: 2px;
	top: 1px;
}

.mega-menu .text-menu {
	background-color: var(--content-bg);
	border-radius: 10px;
	padding: 5px;
	text-align: left;
	line-height: 1.4em;
	white-space: nowrap;
}

.mega-menu.four-column {
	width: 780px;
}

.mega-menu.four-column .text-menu {
	column-count: 4;
}

.mega-menu .text-menu.menu-2023 {
	display: flex;
	padding-left: 30px;
}

.mega-menu .text-menu.menu-2023 .menu-section {
	flex: 1;
}

.mega-menu .mega-menu-section {
	flex: 1;
	border-radius: 10px;
	margin-right: 20px;
	padding: 15px;
}

td.clicked .mega-menu-section {
	margin-top: 15px;
}

.menu-section {
	margin-top: 0;
	break-after: column;
}
.menu-section {
	margin-top: 20px;
}
.menu-section:first-child {
	margin-top: 0;
}
.menu-section .section-name {
	margin-left: -10px;
	/* font-weight: bold; */
	text-transform: uppercase;
}


.mega-menu .mega-menu-section:last-child {
	margin-right: 0;
}
.mega-menu ul {
	margin: 0;
	padding: 0;
}
.mega-menu li {
	list-style: none;
	text-align: left;
	line-height: 21px;
}
.mega-menu a {
	text-decoration: none;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 16px;
}
.mega-menu .menu-column {
	/* text-align: center; */
	flex: 1;
}
.mega-menu-title {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 10px;
	text-align: center;
}

.map-link {
	margin-bottom: 2px;
	/* text-transform: uppercase; */
}
.map-glyph {
	width: 18px;
	height: 18px;
	margin-right: 4px;
	vertical-align: -4px;
}

/******************************
**	MATERIAL DESIGN BUTTONS
******************************/

button.raised-button {
	min-width: 88px;
	height: 36px;
	border-radius: 5px;
	font-size: 16px;
	padding: 0 15px;
	cursor: pointer;
	background-color: var(--panel-bg);
	color: var(--panel-text);
	border: 1px solid var(--panel-border);
}

button.raised-button:hover {
	background-color: var(--button-bg);
}

button:focus {
	outline: 0;
}

/******************************
**	MESSAGES
******************************/

.communicate-message img {
	max-width: 100%;
	height: auto;
}

.message-button-wrapper {
	height: 45px;
	text-align: center;
}

/*
	MESSAGE DETAIL
*/

.message-wrapper {
	display: flex;
	margin: 0 10px 20px 10px;
}

.message-controls {
	margin: 0 15px 10px 15px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.message-move-controls {
	display: flex;
	flex: 1;
	justify-content: flex-end;
	align-items: center;
}

.message-move-controls.hidden {
	visibility: hidden;
}

.message-filter.tabs {
	flex: 1;
    margin: 0;
}

.message-filter ul {
	margin: 0 0 0 227px;
}

.message-filter.alt ul {
	margin: 0;
}

.message-control-move {
	margin-right: 20px;
}

.message-control-read,
.message-control-lock,
.message-control-unlock {
	margin-right: 10px;
}

.message-control-unlock.hidden {
	display: none;
}

.message-empty-trash {
	margin-left: 20px;
}

.message-empty-trash.hidden {
	display: none;
}

/*
	SIDEBAR
*/

.message-sidebar-wrapper {
	margin-right: 10px;
}

.message-sidebar {
	width: 215px;
	border-radius: 5px;
	border: 1px solid var(--panel-border);
	background-color: var(--panel-bg);
}

.message-list {
	flex: 1;
	border-radius: 5px;
	border: 1px solid var(--panel-border);
	background-color: var(--message-list-bg);
    overflow: hidden;
}

.message-sidebar-item {
	display: flex;
	position: relative;
	width: 100%;
	height: 64px;
	line-height: 64px;color: var(--panel-text);
	overflow: hidden;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
}

.message-sidebar-item:first-child {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.message-sidebar-item:last-child {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.message-sidebar-item:hover {
	background-color: var(--message-sidebar-bg-h);
    color: var(--message-sidebar-text-h);
}

.message-sidebar-item.active {
	color: var(--message-sidebar-active-text);
    background-color: var(--message-sidebar-active-bg);
}

.message-sidebar-glyph {
	position: absolute;
	left: 16px;
	font-size: 24px;
}

.message-sidebar-name {
	font-size: 14px;
	position: absolute;
	left: 54px;
	width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.message-sidebar-divider, .message-item {
	width: 100%;
	height: 1px;
	margin: 8px 0;
	border-color: var(--message-sidebar-divider);
}

/*
	MESSAGE LIST
*/

.message-list-header {
	display: flex;
	height: 45px;
	line-height: 45px;
	background: linear-gradient(to right, var(--th-bg-1) , var(--th-bg-2));
	color: var(--th-text);
}

.message-list-title-area {
	flex: 1;
	display: flex;
	justify-content: center;
}

.message-header-checkbox {
	margin: 0 0 0 7px;
	width: 20px;
	font-size: 20px;
	cursor: pointer;
}

.message-header-checkbox.hidden {
	display: none;
}

.message-header-glyph {
	font-size: 24px;
	margin-right: 10px;
}

.message-header-glyph.small {
	font-size: 20px;
	margin-right: 10px;
}

.message-header-title {
	font-size: 18px;
}

.message-pagination {
	margin: 7px 7px 0 0;
}

.message-note {
	color: var(--message-text);
	text-align: center;
	margin-top: 6em;
}

.message-item {
	display: flex;
	height: 90px;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	color: var(--message-text);
}

.message-item:hover {
	color: var(--message-text-h);
	background-color: var(--message-bg-h);
}

.message-checkbox {
	margin: 0 0 0 7px;
	width: 20px;
	font-size: 20px;
	line-height: 90px;
}

.message-avatar {
	margin: 0 10px 0 5px;
	width: 72px;
	overflow: hidden;
}

.message-avatar img {
	margin-top: 8px;
	width: 72px;
	height: 72px;
}

.message-details {
	position: relative;
	flex: 1;
	margin-right: 10px;
}

.message-uid {
	user-select: text; 
	cursor: text !important;
}

.message-sent {
	position: absolute;
	right: 10px;
	top: 13px;
	font-size: 12px;
}

.message-status-glyph {
	position: absolute;
	right: 10px;
	top: 30px;
}

.message-sender {
	position: absolute;
	font-size: 15px;
	top: 10px;
}

.message-item.unread .message-sender {
	font-weight: bold;
}

.message-subject {
	position: absolute;
	font-size: 15px;
	top: 35px;
	width: 370px;
}

.message-item.unread .message-subject {
	font-weight: bold;
}

.message-body {
	position: absolute;
	font-size: 14px;
	font-weight: normal;
	top: 58px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 100%;
}

/*
	MESSAGE DETAIL
*/

.message-detail {
	background-color: var(--table-bg-2);
	color: var(--table-text);
}

.message-control-back.hidden {
	display: none;
}

.message-detail-header {
	display: flex;
	margin-bottom: 5px;
	background-color: var(--table-bg);
}

.message-header-avatar img {
	margin: 10px 0 8px 10px;
	width: 70px;
	height: 70px;
}

.message-header-details {
	flex: 1;
	margin: 10px 0 0 10px;
	position: relative;
}

.message-detail-sent {
	position: absolute;
	right: 10px;
	top: 1px;
	font-size: 12px;
}

.message-detail-sender {
	position: absolute;
	font-size: 15px;
	top: 0px;
}

.message-detail-glyph {
	position: absolute;
	right: 10px;
	top: 17px;
}

.message-detail-subject {
	position: absolute;
	font-size: 15px;
	top: 50px;
}

.message-detail-receiver {
	position: absolute;
	font-size: 15px;
	top: 25px;
}

.message-detail-body {
	margin: 20px 0 0 0;
	padding: 10px;
	word-break: break-word;
}

.message-detail-body img {
	max-width: 100%;
	height: auto;
}

.message-detail-controls {
	position: absolute;
	display: flex;
	align-items: center;
	right: 10px;
	bottom: 5px;
	font-size: 12px;
}

.message-detail-controls .link {
	margin: 0 10px;
}

.message-detail .message-controls {
	margin-bottom: 0;
}

/*
	IMPORTANT MESSAGES
*/

.message-item.important,
.message-detail-header.important {
	background-color: var(--secondary-bg);
	color: var(--secondary-text);
}

.message-item.important a,
.message-detail-header.important a {
    background: none;
    color: var(--secondary-link);
}

.message-item.important a:hover,
.message-detail-header.important a:hover {
    color: var(--secondary-link-h);
}

/*
	MESSAGE FORMS
*/

.message-form {
	padding: 10px;
}

.message-form-row {
	margin: 10px 0 10px 10px;
	position: relative;
}

.message-form-row .friend-picker {
	margin-top: 10px;
}

.message-form-row label {
	display: block;
}

.message-form-row label.inline {
	display: inline-block;
}

.message-form-row .delete-button{
	margin-left: 30px;
}

/*
	PAGINATION
*/

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 0;
    border-radius: 4px;
	user-select: none;
}

.pagination>li {
    display: inline;
    text-decoration: none !important;
}

.pagination>li>a,
.pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    text-decoration: none !important;
    border: 1px solid;
    min-width: 16px;
    text-align: center;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.pagination>li:last-child>a,
.pagination>li:last-child>span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
    z-index:2;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    z-index:3;
    cursor:default;
}

.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.pagination>.disabled>span:hover {
    cursor: not-allowed;
}

.pagination-lg>li>a,
.pagination-lg>li>span {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
}

.pagination-lg>li:first-child>a,
.pagination-lg>li:first-child>span {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.pagination-lg>li:last-child>a,
.pagination-lg>li:last-child>span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.pagination-sm>li>a,
.pagination-sm>li>span {
    padding:5px 10px;
    font-size:16px;
}

.pagination-sm>li:first-child>a,
.pagination-sm>li:first-child>span {
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.pagination-sm>li:last-child>a,
.pagination-sm>li:last-child>span {
    border-top-right-radius:3px;
    border-bottom-right-radius:3px;
}

.pagination>li>a,
.pagination>li>span {
	color: var(--pag-text);
	background-color: var(--pag-bg);
	border-color: var(--pag-border);
}

.pagination>li>a:focus, .pagination>li>a:hover,
.pagination>li>span:focus, .pagination>li>span:hover {
	color: var(--pag-text-h);
	background-color: var(--pag-bg-h);
	border-color: var(--pag-border);
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover,
.pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    color: var(--pag-active-text);
    background-color: var(--pag-active-bg);
	border-color: var(--pag-border);
}

.pagination>.disabled {
	opacity: 1.0;
}

.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.pagination>.disabled>span:hover {
	color: var(--pag-dis-text);
	cursor: not-allowed;
	background-color: var(--pag-dis-bg);
	border-color: var(--pag-border);
}

/******************************
**	POLLS
******************************/

.poll-results {
	margin: 0 20px;
	padding: 0 20px 20px 20px;
	border: 1px solid var(--table-border);
	background-color: var(--table-bg);
	margin-bottom: 20px;
}

.poll-results h2 {
	padding-left: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

.poll-bar-group {
	margin-bottom: 15px;
	padding-left: 1.2em;
}

.poll-bar-label {
	font-size: 18px;
	margin-bottom: 5px;
	position: relative;
}

.poll-marker {
	position: absolute;
	left: -20px;
	top: 3px;
}

.poll-bar-bg {
	height: 20px;
	background-color: var(--poll-bar-bg);
}

.poll-bar-bg .poll-bar-fill {
	height: inherit;
	background-color: var(--poll-fill);
	line-height: 1.2rem;
	position: relative;
}

.progress-bar-fill {
	background-color: var(--poll-fill);
}

.poll-bar-bg .poll-bar-text {
	line-height: 20px;
	font-size: 16px;
	padding: 0 8px;
	position: relative;
	text-align: left;
	width: 140px;
}

.totalVotes {
	font-size: .8rem;
	font-weight: bold;
	text-align: right;
	margin-top: 6px;
}

.poll-bar-bg .poll-bar-text,
.progress-bar-text {
	color: var(--poll-bar-text);
}

/******************************
**	NEW LAYOUT OVERRIDES
******************************/

h1, h2, h3, h4,
.top-nav-link {
	font-family: "Bubblegum Sans", tahoma, sans-serif;
}

h1 {
	font-size: 28px !important;
	color: var(--h1-text);
    text-shadow: 1px 1px 0px var(--h1-shadow);
}

h1 .fa {
	font-size: 18px;
}

h1 .tag {
    text-shadow: none;
}

h2,
div.panel h2 {
	font-size: 20px;
}

.vertical-h2 .side-stripe {
	background-color: var(--filter-border);
}

.news-on,
.news-on a {
	color: var(--highlight) !important;
}

h3 {
    color: var(--c-header-text);
    text-shadow: 1px 1px 0px var(--c-header-shadow);
    background: linear-gradient(to right, var(--th-bg-1) , var(--th-bg-2));
    border-color: var(--table-border);
}

/******************************
**	NEW GLOBAL STYLES
******************************/

.display-none {
	display: none;
}

.inline-block {
	display: inline-block;
}

.display-block {
	display: block;
}

.display-flex,
.flex {
	display: flex;
	flex-wrap: wrap;
}

.display-flex.nowrap,
.flex.nowrap,
.flex.no-wrap {
	flex-wrap: nowrap;
}

.flex-1 {
	flex: 1;
}

.flex-2 {
	flex: 2;
}

.flex-3 {
	flex: 3;
}

.flex-align-top {
	align-items: flex-start;
}

.flex-align-baseline {
	align-items: baseline;
}

.flex-align-center,
.flex-align-middle {
	align-items: center !important;
}

.flex-align-bottom {
	align-items: flex-end;
}

.flex-left {
	justify-content: left;
}

.flex-center {
	justify-content: center;
}

.flex-right {
	justify-content: right;
}

.flex-nowrap {
	flex-wrap: nowrap;
}

.space-around {
	justify-content: space-around;
}

.space-between {
	justify-content: space-between;
}

.space-evenly {
	justify-content: space-around;
	justify-content: space-evenly;
}

.space-evenlyish {
	display: flex;
	justify-content: space-between;
}

.space-evenlyish:before,
.space-evenlyish:after {
	content: '';
	display: block;
  }

.centered .label-value {
	text-align: center;
}

.label-value {
	padding-bottom: 20px;
}

.label-value.no-padding,
.no-label-value-padding .label-value {
	padding-bottom: 0;
}

.label-value .label,
.generic-label {
	font-size: 13px;
	text-transform: uppercase;
	opacity: 0.8;
}

.label-value .label.filter:after {
	font-family: FontAwesome;
	content: "\f0b0";
	padding-left: 5px;
}

.label-value .value {
	position: relative;
}

.value > p {
	margin-top: 0;
}

.dollar-sign {
	display: inline-block;
	position: absolute;
	left: -21px;
	opacity: 0.5;
}

.scale-images img {
	max-width: 100%;
	height: auto;
}

.scale-1x { transform: scale(1,1); }
.scale-1-5x { transform: scale(1.5,1.5); }
.scale-2x { transform: scale(2,2); }
.scale-3x { transform: scale(3,3); }
.scale-4x { transform: scale(4,4); }
.scale-5x { transform: scale(5,5); }


h6 {
	margin: 5px 0px 5px 0px !important;
}

.m-lr-auto {margin-left: auto; margin-right: auto}

.m-lr-n5 { margin-left: -5px; margin-right: -5px; }
.m-lr-n10 { margin-left: -10px; margin-right: -10px; }

.m-0 { margin: 0; }
.m-t-0 { margin-top: 0; }
.m-b-0 { margin-bottom: 0; }
.m-l-0 { margin-left: 0; }
.m-r-0 { margin-right: 0; }
.m-tb-0 { margin-top: 0; margin-bottom: 0; }
.m-lr-0 { margin-left: 0; margin-right: 0; }

.m-3 { margin: 3px; }
.m-t-3 { margin-top: 3px; }
.m-b-3 { margin-bottom: 3px; }
.m-l-3 { margin-left: 3px; }
.m-r-3 { margin-right: 3px; }
.m-tb-3 { margin-top: 3px; margin-bottom: 3px; }
.m-lr-3 { margin-left: 3px; margin-right: 3px; }

.m-5 { margin: 5px; }
.m-t-5 { margin-top: 5px; }
.m-b-5 { margin-bottom: 5px; }
.m-l-5 { margin-left: 5px; }
.m-r-5 { margin-right: 5px; }
.m-tb-5 { margin-top: 5px; margin-bottom: 5px; }
.m-lr-5 { margin-left: 5px; margin-right: 5px; }

.m-10 { margin: 10px; }
.m-t-10 { margin-top: 10px; }
.m-b-10 { margin-bottom: 10px; }
.m-l-10 { margin-left: 10px; }
.m-r-10 { margin-right: 10px; }
.m-tb-10 { margin-top: 10px; margin-bottom: 10px; }
.m-lr-10 { margin-left: 10px; margin-right: 10px; }

.m-lr-n10 { margin-left: -10px; margin-right: -10px; }
.m-lr-n15 { margin-left: -15px; margin-right: -15px; }
.m-lr-n20 { margin-left: -20px; margin-right: -20px; }

.m-15 { margin: 15px; }
.m-t-15 { margin-top: 15px; }
.m-b-15 { margin-bottom: 15px; }
.m-l-15 { margin-left: 15px; }
.m-r-15 { margin-right: 15px; }
.m-tb-15 { margin-top: 15px; margin-bottom: 15px; }
.m-lr-15 { margin-left: 15px; margin-right: 15px; }

.m-20 { margin: 20px; }
.m-t-20 { margin-top: 20px; }
.m-b-20 { margin-bottom: 20px; }
.m-l-20 { margin-left: 20px; }
.m-r-20 { margin-right: 20px; }
.m-tb-20 { margin-top: 20px; margin-bottom: 20px; }
.m-lr-20 { margin-left: 20px; margin-right: 20px; }

.m-30 { margin: 30px; }
.m-t-30 { margin-top: 30px; }
.m-b-30 { margin-bottom: 30px; }
.m-l-30 { margin-left: 30px; }
.m-r-30 { margin-right: 30px; }
.m-tb-30 { margin-top: 30px; margin-bottom: 30px; }
.m-lr-30 { margin-left: 30px; margin-right: 30px; }

.m-40 { margin: 40px; }
.m-t-40 { margin-top: 40px; }
.m-b-40 { margin-bottom: 40px; }
.m-l-40 { margin-left: 40px; }
.m-r-40 { margin-right: 40px; }
.m-tb-40 { margin-top: 40px; margin-bottom: 40px; }
.m-lr-40 { margin-left: 40px; margin-right: 40px; }

.m-50 { margin: 50px; }
.m-t-50 { margin-top: 50px; }
.m-b-50 { margin-bottom: 50px; }
.m-l-50 { margin-left: 50px; }
.m-r-50 { margin-right: 50px; }
.m-tb-50 { margin-top: 50px; margin-bottom: 50px; }
.m-lr-50 { margin-left: 50px; margin-right: 50px; }

.m-60 { margin: 60px; }
.m-t-60 { margin-top: 60px; }
.m-b-60 { margin-bottom: 60px; }
.m-l-60 { margin-left: 60px; }
.m-r-60 { margin-right: 60px; }
.m-tb-60 { margin-top: 60px; margin-bottom: 60px; }
.m-lr-60 { margin-left: 60px; margin-right: 60px; }

.m-70 { margin: 70px; }
.m-t-70 { margin-top: 70px; }
.m-b-70 { margin-bottom: 70px; }
.m-l-70 { margin-left: 70px; }
.m-r-70 { margin-right: 70px; }
.m-tb-70 { margin-top: 70px; margin-bottom: 70px; }
.m-lr-70 { margin-left: 70px; margin-right: 70px; }

.m-l-80 { margin-left: 80px; }
.m-r-80 { margin-right: 80px; }
.m-lr-80 { margin-left: 80px; margin-right: 80px; }

.m-100 { margin: 100px; }
.m-t-100 { margin-top: 100px; }
.m-b-100 { margin-bottom: 100px; }
.m-l-100 { margin-left: 100px; }
.m-r-100 { margin-right: 100px; }
.m-tb-100 { margin-top: 100px; margin-bottom: 100px; }
.m-lr-100 { margin-left: 100px; margin-right: 100px; }

.m-150 { margin: 150px; }
.m-t-150 { margin-top: 150px; }
.m-b-150 { margin-bottom: 150px; }
.m-l-150 { margin-left: 150px; }
.m-r-150 { margin-right: 150px; }
.m-tb-150 { margin-top: 150px; margin-bottom: 150px; }
.m-lr-150 { margin-left: 150px; margin-right: 150px; }

.p-t-0 { padding-top: 0; }
.p-lr-0  { padding-left:  0; padding-right:  0; }
.p-tb-0  { padding-top:  0; padding-bottom:  0; }
.p-5  { padding:  5px; }
.p-lr-5  { padding-left:  5px; padding-right:  5px; }
.p-tb-5  { padding-top:  5px; padding-bottom:  5px; }
.p-10 { padding: 10px; }
.p-lr-10  { padding-left:  10px; padding-right:  10px; }
.p-tb-10  { padding-top:  10px; padding-bottom:  10px; }
.p-20 { padding: 20px; }
.p-lr-20  { padding-left:  20px; padding-right:  20px; }
.p-tb-20  { padding-top:  20px; padding-bottom:  20px; }

.w-auto { width: fit-content; }
.w-5	{ width:  5px; }
.w-10	{ width:  10px; }
.w-20   { width:  20px; }
.w-25   { width:  25px; }
.w-30   { width:  30px; }
.w-40   { width:  40px; }
.w-50   { width:  50px; }
.w-60   { width:  60px; }
.w-70   { width:  70px; }
.w-80   { width:  80px; }
.w-90   { width:  90px; }
.w-100p { width: 100%;  }
.w-100  { width: 100px; }
.w-110  { width: 110px; }
.w-120  { width: 120px; }
.w-130  { width: 130px; }
.w-140  { width: 140px; }
.w-150  { width: 150px; }
.w-160  { width: 160px; }
.w-180  { width: 180px; }
.w-200  { width: 200px; }
.w-225  { width: 225px; }
.w-250  { width: 250px; }
.w-300  { width: 300px; }
.w-320  { width: 320px; }
.w-400  { width: 400px; }
.w-500  { width: 500px; }
.w-600  { width: 600px; }
.w-660  { width: 660px; }
.w-700  { width: 700px; }
.w-760  { width: 760px; }
.w-780  { width: 780px; }
.w-790  { width: 790px; }

.h-10   { height:   10px }
.h-15   { height:   15px }
.h-20   { height:   20px }
.h-30   { height:   30px }
.h-40   { height:   40px }
.h-50   { height:   50px }
.h-60   { height:   60px }
.h-70   { height:   70px }
.h-80   { height:   80px }
.h-90   { height:   90px }
.h-100  { height:  100px }
.h-120  { height:  120px }
.h-150  { height:  150px }
.h-200  { height:  200px }
.h-300  { height:  300px }
.h-400  { height:  400px }
.h-500  { height:  500px }
.h-1000 { height: 1000px }

.min-w-200 { min-width: 200px; }
.min-w-220 { min-width: 220px; }
.min-w-250 { min-width: 250px; }

.centered {
	text-align: center !important;
}

table.centered-table td {
	text-align: center;
}

.div-centered {
	margin-left: auto;
	margin-right: auto;
}

.vcentered {
	align-items: center;
}

.align-left {
	text-align: left;
}

.align-center {
	text-align: center;
}

.align-right {
	text-align: right;
}

.valign-top {
	vertical-align: top;
}

.align-top-center {
	text-align: center;
	vertical-align: top;
}

.position-relative {
	position: relative;
}

.position-absolute {
	position: absolute;
}

.strong {
	font-weight: bold;
}

.normal {
	font-weight: normal;
}

.clickable {
	cursor: pointer;
}
.menuable {
	cursor: context-menu;
}

.expandable {
	cursor: zoom-in;
}

.expanded .expandable {
	cursor: zoom-out;
}

.arrow {
	cursor: default;
}

.help {
	cursor: help;
}

.not-allowed {
	cursor: not-allowed;
}

.unfade-hover:hover {
	opacity: 1.0;
}

.no-select {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.swatch-hex {
	padding-left: 5px;
	font-family: 'DroidSans Mono',monospace;
	font-size: 16px;
	display: inline-block;
	height: 23px;
}

button.sp-swatch {
	margin: 5px 5px 0 0;
	padding: 0;
	border: none;
	background-color: transparent;
}

.swatch-color {
	font: normal normal normal 14px/1 FontAwesome;
	font-size: 20px;
	display: inline-block;
	height: 2px;
}

.swatch-color:before {
	content: "\f111";	/* fa-circle */
	text-shadow: 1px 1px 0px #888, -1px 1px 0px #888, 1px -1px 0px #888, -1px -1px 0px #888;
}

.swatch-texture {
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: -3px;
}

.swatch-15,
.swatch-rainbow,
.swatch-chrome {
	display: inline-block;
	height:23px;
	width:23px;
	background-size: cover;
}

.swatch-rainbow {
	background-image:url(../_images/icons/swatch_rainbow_bordered.png);
}

.swatch-chrome {
	background-image:url(../_images/icons/swatch_chrome_bordered.png);
}

.swatch-rainbow-15,
.swatch-chrome-15 {
	display: inline-block;
	height:15px;
	width:15px;
}

.swatch-rainbow-15 {
	background-image:url(../_images/icons/swatch-rainbow-15.png);
}

.swatch-chrome-15 {
	background-image:url(../_images/icons/swatch-chrome-15.png);
}

.swatch-rainbow-20,
.swatch-chrome-20 {
	display: inline-block;
	height:18px;
	width:18px;
	margin-right: 4px;
}

.swatch-rainbow-20 {
	background-image:url(../_images/icons/swatch-rainbow-20.png);
	background-size: 18px;
}

.swatch-chrome-20 {
	background-image:url(../_images/icons/swatch-chrome-20.png);
}

.muted {
	opacity: 0.8;
}

.muted:hover {
	opacity: 1.0;
}

.drag-surface,
.drag-surface2 {
	font: normal normal normal 14px/1 FontAwesome;
	width: 16px;
	height: 16px;
	font-size: 14px;
	display: inline-block;
	opacity: 0.8;
	cursor: grab;
}

.drag-surface:before,
.drag-surface2:before {
	content: "\f0c9";	/* fa-bars */
}

.drag-surface:hover,
.drag-surface2:hover {
	opacity: 1.0;
}

.ui-sortable-helper .drag-surface {
	cursor: grabbing;
}

/******************************
**	BUTTONS
******************************/

button.big-button {
	padding: 7px 10px;
	font-size: 18px;
	border: none;
	text-transform: uppercase;
	border-radius: 5px;
	cursor: pointer;
}

button.big-button.huge {
	padding: 10px 20px;
	font-family: "Bubblegum Sans", tahoma, sans-serif;
	font-size: 30px;
}

button.medium-button {
	padding: 5px 10px;
	font-size: 16px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}
button.medium-button.primary {
	/* padding: 10px 20px; */
	font-size: 18px;
}

button.medium-button.padded,
button.medium-button.wide {
	padding: 5px 25px;
}

button.small-button {
	padding: 2px 5px;
	font-size: 14px;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}

button.medium-button.yellow,
button.small-button.yellow {
	color: #444 !important;
	background-color: #f1d107 !important;
	border: 1px solid #444 !important;
}
	
button.small-button.padded,
button.small-button.wide {
	padding: 2px 10px;
}

button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* park */

.event-description, .event-button {
    background: var(--park-bg);
}

.park-catches-left {
    background: var(--park-bg);
    color: var(--park-text);
}

.explore-park-wrapper {
    color: var(--park-text);
}

.event-item {
    background: var(--event-item-bg);
    color: var(--event-item-text);
}

.event-description .waja-name {
    color: var(--red);
}

/******************************
**	HELP
******************************/

.help-npc {
	float: right;
	width: 240px; 
	height: 290px; 
	background-image: url('/_images/npc/tooltips_npc.png'); 
	background-position: -40px -10px; 
	background-repeat: no-repeat; 
}

/******************************
**	MATERIAL DESIGN CHECKBOX
******************************/

input.md-checkbox {
	display: none;
}

input.md-checkbox + label {
	display: inline-block;
	margin-left: 20px;
	position: relative;
	user-select: none;
}

.md-checkbox + label:before {
	font: normal normal normal 14px/1 FontAwesome;
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: #c4fb79;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: '\f096';	/* fa-square-o */
	position: absolute;
	left: -20px;
	top: 2px;
}

.md-checkbox:checked + label:before {
	content: '\f046';	/*  fa-check-square-o */
}

/******************************
**	MATERIAL DESIGN RIPPLE EFFECT
**	by Ravikumar Chauhan
******************************/

label.md-ripple .ripple {
	position: absolute;
	top: -7px;
	left: -30px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	-webkit-transform: scale(0);
	transform: scale(0);
	background-color: #c4fb79 !important;
}

label.md-ripple .ripple.animated {
	display: block;
	-webkit-animation-name: md-checkbox-ripple;
	animation-name: md-checkbox-ripple;
	-webkit-animation-duration: 400ms;
	animation-duration: 400ms;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

@-webkit-keyframes md-checkbox-ripple {
	100% {
		opacity: 0;
		-webkit-transform: scale(1.6);
		transform: scale(1.6);
	}
}

@keyframes md-checkbox-ripple {
	100% {
		opacity: 0;
		-webkit-transform: scale(1.6);
		transform: scale(1.6);
	}
}

/******************************
**	MATERIAL DESIGN RADIO
**	by  Hannes Kamecke
******************************/

.md-radio {
	margin: 16px 0;
}

.md-radio.md-radio-inline {
	display: inline-block;
}

.md-radio input[type="radio"] {
	display: none;
}

.md-radio input[type="radio"]:checked + label:before {
	border-color: #c4fb79;
	animation: md-radio-ripple 0.4s linear forwards;
}

.md-radio input[type="radio"]:checked + label:after {
	transform: scale(1);
}

.md-radio label {
	display: inline-block;
	height: 20px;
	position: relative;
	padding: 0 30px;
	margin-bottom: 0;
	cursor: pointer;
	vertical-align: bottom;
}

.md-radio label:before,
.md-radio label:after {
	box-sizing: border-box;
	position: absolute;
	content: '';
	border-radius: 50%;
	transition: all .4s ease;
	transition-property: transform, border-color;
}

.md-radio label:before {
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	border: 2px solid #c4fb7984;
}

.md-radio label:after {
	top: 5px;
	left: 5px;
	width: 10px;
	height: 10px;
	transform: scale(0);
	background: #c4fb79;
}

@keyframes md-radio-ripple {
	0% { box-shadow: 0px 0px 0px 1px  #c4fb7900; }
	50% { box-shadow: 0px 0px 0px 15px  #c4fb7918; }
	100% { box-shadow: 0px 0px 0px 15px  #c4fb7900; }
}

/******************************
**	MATERIAL DESIGN STEPPER
******************************/

.md-stepper {
	display:table;
	width: 700px;
	margin:0 auto;
	background-color: transparent;
}

.md-stepper .md-step {
	display:table-cell;
	position:relative;
	padding:24px;
}

.md-stepper .md-step:active {
	border-radius: 15% / 75%;
}

.md-stepper .md-step:first-child:active {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.md-stepper .md-step:last-child:active {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.md-stepper .md-step:first-child .md-step-bar-left,
.md-stepper .md-step:last-child .md-step-bar-right {
	display:none;
}

.md-stepper .md-step .md-step-circle {
	width:30px;
	height:30px;
	margin:0 auto;
	border-radius: 50%;
	text-align: center;
	line-height:30px;
	font-size: 16px;
	font-weight: 600;
    background-color: var(--shop-item-bg);
	color: var(--content-text);
}

.md-stepper .md-step.done .md-step-circle:before {
	font-family:'FontAwesome';
	font-weight:100;
	content: "\f00c";	/* fa-check */
}

.md-stepper .md-step.done .md-step-circle *,
.md-stepper .md-step.editable .md-step-circle * {
	display:none;
}

.md-stepper .md-step.editable .md-step-circle {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.md-stepper .md-step.editable .md-step-circle:before {
	font-family:'FontAwesome';
	font-weight:100;
}

.md-stepper .md-step .md-step-title {
	margin-top:16px;
	font-size:16px;
	font-weight:600;
}

.md-stepper .md-step .md-step-title,
.md-stepper .md-step .md-step-optional {
	text-align: center;
}

.md-stepper .md-step.active .md-step-title {
	font-weight: 600;
    color: var(--h1-text);
}

.md-stepper .md-step.active.done .md-step-title,
.md-stepper .md-step.active.editable .md-step-title {
	font-weight:600;
}

.md-stepper .md-step .md-step-optional {
	font-size:12px;
}

.md-stepper .md-step .md-step-bar-left,
.md-stepper .md-step .md-step-bar-right {
	position:absolute;
	top:36px;
	height:1px;
    border-top: 1px solid var(--content-text);
}

.md-stepper .md-step .md-step-bar-right {
	right:0;
	left:50%;
	margin-left:20px;
}

.md-stepper .md-step .md-step-bar-left {
	left:0;
	right:50%;
	margin-right:20px;
}

.md-stepper .md-step .md-step-title, .md-stepper .md-step .md-step-optional {
    color: var(--content-text);
}

.md-stepper .md-step.active .md-step-circle {
    background-color: var(--h1-text);
    color: var(--content-bg);
}

/******************************
**	STAR CHECKBOX
	Usage: <label><input class="star" type="checkbox"><span></span></label>
******************************/

input.star[type=checkbox] {
	display:none;
}

input.star[type=checkbox] + label:before {
	font-family: FontAwesome;
	font-size: 16px;
	display: inline-block;
	margin-top: 4px;
}
input.star.large[type=checkbox] + label:before {
	font-size: 24px;
}
input.star[type=checkbox] + label:before {
	content: "\f006";	/* fa-star-o */
}
input.star[type=checkbox]:checked + label:before {
	content: "\f005";	/* fa-star */
}

label input.star[type=checkbox] ~ span:before {
	font-family: FontAwesome;
	font-size: 16px;
	display: inline-block;
	margin-top: 4px;
}
label input.star.large[type=checkbox] ~ span:before {
	font-size: 24px;
}
label input.star[type=checkbox] ~ span:before {
	content: "\f006";	/* fa-star-o */
}
label input.star[type=checkbox]:checked ~ span:before {
	content: "\f005";	/* fa-star */
}



/******************************
**	BOX CHECKBOX
	Usage: <label><input class="box" type="checkbox"><span></span></label>
******************************/

input.box[type=checkbox] {
	display:none;
}
input.box[type=checkbox] + label:before {
	font-family: FontAwesome;
	font-size: 16px;
	display: inline-block;
	margin-top: 4px;
}
input.box.large[type=checkbox] + label:before {
	font-size: 24px;
}
input.box[type=checkbox] + label:before {
	content: "\f096";	/* fa-square-o */
}
input.box[type=checkbox]:checked + label:before {
	content: "\f046";	/*  fa-check-square-o */
}

label input.box[type=checkbox] ~ span:before {
	font-family: FontAwesome;
	font-size: 16px;
	display: inline-block;
	margin-top: 4px;
}
label input.box.large[type=checkbox] ~ span:before {
	font-size: 24px;
}
label input.box[type=checkbox] ~ span:before {
	content: "\f096";	/* fa-square-o */
}
label input.box[type=checkbox]:checked ~ span:before {
	content: "\f046";	/*  fa-check-square-o */
}

/******************************
**	CIRCLE CHECKBOX
	Usage: <label><input class="circle" type="checkbox"><span></span></label>
******************************/

label input.circle[type=checkbox] {
	display:none;
}

label input.circle[type=checkbox] ~ span:before {
	font-family: FontAwesome;
	font-size: 24px;
	line-height: 30px;
	display: inline-block;
	width: 27px;
	height: 30px;
	border-radius: 50%;
	padding-left: 3px;
	color: transparent;
	background-color: #fff;
	border: 1px solid #ffffff;
	content: "\f00c";	/* fa-check */
}

label input.circle[type=checkbox]:checked ~ span:before {
	color: #fff;
	background: var(--green);
}


/******************************
**	CHECK RADIO
	Usage: <label><input class="check-circle" type="radio"><span></span></label>
******************************/

label input.check-circle[type=radio] {
	display:none;
}

label input.check-circle[type=radio] ~ span:before {
	font-family: FontAwesome;
	font-size: 24px;
	line-height: 30px;
	display: inline-block;
	width: 27px;
	height: 30px;
	border-radius: 50%;
	padding-left: 3px;
	color: transparent;
	background-color: #fff;
	border: 1px solid #ffffff;
	content: "\f00c";	/* fa-check */
}

label input.check-circle[type=radio]:checked ~ span:before {
    background: var(--green);
    color: #ffffff;
}


/******************************
**	CHECK CHECKBOX
******************************/

input.check[type=checkbox] {
	display:none;
}
input.check[type=checkbox] + label:before {
	font-family: FontAwesome;
	font-size: 16px;
	display: inline-block;
	margin-top: 4px;
}
input.check[type=checkbox] + label:before {
	width:15px;
	content: "\f096";	/*  fa-square-o */
}
input.check[type=checkbox]:checked + label:before {
	content: "\f046";	/*  fa-check-square-o */
}
input.check.big[type=checkbox] + label:before {
	font-size: 24px;
	width: 20px
}


/******************************
**	CHECK RADIO
******************************/

input.check[type=radio] {
	display:none;
}
input.check[type=radio] + label:before {
	font-family: FontAwesome;
	font-size: 16px;
	display: inline-block;
	margin-top: 4px;
	width: 20px;
	content: " ";
}
input.check[type=radio]:checked + label:before {
	width: 20px;
	content: "\f00c";	/* fa-check */
}
input.check[type=radio]:checked + label {
	font-weight: 700;
}


/******************************
**	MODERN CHECK RADIO
	Usage: <label><input class="star" type="radio"><span></span></label>
******************************/

input.star[type=radio] {
	display:none;
}

input.star[type=radio] + label:before {
	font-family: FontAwesome;
	font-size: 16px;
	display: inline-block;
	margin-top: 4px;
}
input.star.large[type=radio] + label:before {
	font-size: 24px;
}
input.star[type=radio] + label:before {
	content: "\f006";	/* fa-star-o */
}
input.star[type=radio]:checked + label:before {
	content: "\f005";	/* fa-star */
}

label input.star[type=radio] ~ span:before {
	font-family: FontAwesome;
	font-size: 16px;
	display: inline-block;
	margin-top: 4px;
}
label input.star.large[type=radio] ~ span:before {
	font-size: 24px;
}
label input.star[type=radio] ~ span:before {
	content: "\f006";	/* fa-star-o */
}
label input.star[type=radio]:checked ~ span:before {
	content: "\f005";	/* fa-star */
}




/******************************
**	1sec transition
******************************/
.rot45 {
	transform: rotate(45deg);
}

.transition-1s {
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	transition-property: transform;
}

/*
	THROB ANIMATION
*/

.throb,
.throb-important {
	-webkit-animation: pulsate 2s ease-out;
    animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    opacity: 0;
}

.throb-2x {
	-webkit-animation: pulsate 2s ease-out;
    animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: 2;
    animation-iteration-count: 2;
    /* opacity: 0; */
}

a.hover-throb:hover .fa {
	-webkit-animation: pulsate 2s ease-out;
    animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    opacity: 0;
}

@-webkit-keyframes pulsate {
    0%   { -webkit-transform: scale(1.0, 1.0); opacity: 0.8; }
    50%  { -webkit-transform: scale(1.1, 1.1); opacity: 1.0; }
    100% { -webkit-transform: scale(1.0, 1.0); opacity: 0.8; }
}

@keyframes pulsate {
    0%   { transform: scale(1.0, 1.0); opacity: 0.8; }
    50%  { transform: scale(1.1, 1.1); opacity: 1.0; }
    100% { transform: scale(1.0, 1.0); opacity: 0.8; }
}

button.throb {
	-webkit-animation: pulsate-button 2s ease-out;
    animation: pulsate-button 2s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
 }

@-webkit-keyframes pulsate-button {
    0%   { -webkit-transform: scale(1.0, 1.0); opacity: 1.0; }
    50%  { -webkit-transform: scale(0.95, 0.95); opacity: 0.9; }
    100% { -webkit-transform: scale(1.0, 1.0); opacity: 1.0; }
}

@keyframes pulsate-button {
    0%   { transform: scale(1.0, 1.0); opacity: 1.0; }
    50%  { transform: scale(0.95, 0.95); opacity: 0.9; }
    100% { transform: scale(1.0, 1.0); opacity: 1.0; }
}

/*
	HEARTBEAT ANIMATION
*/

.heartbeat,
.heartbeat-important {
	-webkit-animation: animateHeart 2.5s infinite;
	animation: animateHeart 2.5s infinite;
}
a.hover-heartbeat:hover .fa {
	-webkit-animation: animateHeart 2.5s infinite;
	animation: animateHeart 2.5s infinite;
}
@-webkit-keyframes animateHeart {
	0% { -webkit-transform: scale(1.0); }
	6% { -webkit-transform: scale(1.05); }
	12% { -webkit-transform: scale(1.0); }
	18% { -webkit-transform: scale(1.1); }
	50% { -webkit-transform: scale(1.0); }
	100% { -webkit-transform: scale(1.0); }
}
@keyframes animateHeart {
	0% { transform: scale(1.0); }
	6% { transform: scale(1.05); }
	12% { transform: scale(1.0); }
	18% { transform: scale(1.1); }
	50% { transform: scale(1.0); }
	100% { transform: scale(1.0); }
}


/*
	HUE-ROTATE ANIMATION
*/
.hue-rotate {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-animation: hue-rotate 2.5s ease-out infinite both;
            animation: hue-rotate 2.5s ease-out infinite both;
}

@-webkit-keyframes hue-rotate {
    0% {
		-webkit-filter: hue-rotate(0deg);
		-webkit-transform: scale(1.0, 1.0); 
		opacity: 1.0;
    }
    50% {
		-webkit-filter: hue-rotate(180deg);
		-webkit-transform: scale(0.9, 0.9); 
		opacity: 0.8;
    }
    100% {
		-webkit-filter: hue-rotate(360deg);
		-webkit-transform: scale(1.0, 1.0); 
		opacity: 1.0;
    }
}
@keyframes hue-rotate {
    0% {
		filter: hue-rotate(0deg);
		transform: scale(1.0, 1.0); 
		opacity: 1.0;
    }
    50% {
		filter: hue-rotate(180deg);
		transform: scale(0.9, 0.9); 
		opacity: 0.8;
    }
    100% {
		filter: hue-rotate(360deg);
		transform: scale(1.0, 1.0); 
		opacity: 1.0;
    }
}



/******************************
**	spinner
******************************/
.spinner-wrapper {
	margin: 10px auto;
	width: 100px;
}
.spinner {
	display: inline-block;
}
.spinner,
.spinner:after {
  border-radius: 50%;
  width: 12px;
  height: 12px;
}
.spinner {
  /* margin: 60px auto; */
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 3px solid rgba(255, 255, 255, 0.2);
  border-right: 3px solid rgba(255, 255, 255, 0.2);
  border-bottom: 3px solid rgba(255, 255, 255, 0.2);
  border-left: 3px solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.spinner.yellow {
  border-top: 3px solid rgba(255, 255, 0, 0.2);
  border-right: 3px solid rgba(255, 255, 0, 0.2);
  border-bottom: 3px solid rgba(255, 255, 0, 0.2);
  border-left: 3px solid #ffff00;
}
@-webkit-keyframes load8 {
  0% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
  }
  100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
  }
  100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
  }
}

.tri-spinner {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  perspective: 800px;
}
.tri-spinner.big {
  top: calc(50% - 64px);
  left: calc(50% - 64px);
  width: 128px;
  height: 128px;
}

.tri-spinner .inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.tri-spinner .inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 3px solid #efeffa;
}

.tri-spinner .inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid #efeffa;
}

.tri-spinner .inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 3px solid #efeffa;
}
.tri-spinner.current-color .inner {
	border-color: currentColor !important;
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}

/******************************
**	CUSTOM DEMO X SECTIONS
******************************/

.table-row.changed .row-name > .name:before,
.table-row.changed .base-hex:before,
.triwing1.changed .label:before,
.triwing2.changed .label:before,
.triwing3.changed .label:before,
.marking.changed .label:before,
.mutation-marking.changed .name:before,
.changeable.changed:before {
	font-family: FontAwesome;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\f0d0";	/* fa-magic */
	padding-right: 6px;
}

.row-swatch,
.attached-marking-swatch {
	min-width: 30px;
	min-height: 20px;
}

.table-row .swatch-color {
	font-size: 20px;
	margin-left: 1px;
}

.row-visible {
	min-width: 4em;
	padding-right: 10px;
}

.table-row .hex {
	min-width: 65px;
}

.code {
	font-family: 'DroidSans Mono',monospace;
	font-size: 14px;
}

.row-radio {
	min-width: 30px;
	width: 30px;
	height: 36px;
}

.row-thumbnail {
	min-width: 50px;
	min-height: 43px;
}

.row-name {
	flex: 1;
}
#nextgen .row-name {
	overflow:hidden;
}

.row-name .sp-preview {
	margin-right: 5px;
}

.secondary-colors {
	margin-left: 10px;
}

.secondary-colors .label {
	margin-left: 5px;
	margin-right: 10px;
	font-size: 11px;
	min-width: 50px;
	text-transform: uppercase;
}

.attached-markings {
	max-width: 170px;
	overflow: visible;
}
.attached-marking-row { 
	min-width: 325px;
}

.attached-marking-name {
	min-width: 124px;
	max-width: 124px;
	margin-right: 10px;
}
.attached-marking-amount {
    width: 66px;		/* 60 is wide enough for 100%; 52 works for loaded designs; what does 48 work for? */
	margin-right: 12px;
}

.mutation-row .row-hex,
.mutation-row .secondary-hex,
.secondary-colors .hex {
	width: 70px;
}

.align-top .row-swatch {
	margin-top: 1px;
}

.align-top .row-hex {
	margin-top: 4px;
}

.align-top .row-name {
	margin-top: 2px;
}

.align-top .row-trash {
	margin-top: 3px;
}

.row-amount {
	min-width: 80px;
	text-align: right;
}

.indented .row-amount {
	min-width: 55px;
}

.row-amount .percent {
	text-align: right;
	font-size: 12px;
	padding-right: 10px;
}

.row-visible .visible-label {
	text-align: center;
	font-size: 12px;
}

.percent input {
	width: 42px;
}

.row-layer {
	opacity: 0.5;
}

.dimmed .name,
.dimmed .percent,
.dimmed .code,
.dimmed .label,
.dimmed .visible-label {
	opacity: 0.5;
}

.added .percent,
.added .name,
.added .code {
	opacity: 1.0;
}

.row-attach {
	min-width: 40px;
}

.row-trash,
.row-drag {
	min-width: 20px;
	text-align: center;
}

.row-handle {
	min-width: 20px;
	text-align: right;
}

img.thumbnail {
	width: 40px;
	height: 40px;
	margin-right: 10px;
	background-color: #fff3;
	vertical-align: -15px;
}

.thumbnail {
	display: inline-block;
	width: 40px;
	height: 40px;
	position: relative;
}

.thumbnail img {
	width: 40px;
	height: 40px;
	vertical-align: -15px;
}

.thumbnail-badge {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 20px;
	height: 20px;
	background-color: #999c;
	border-radius: 10px;
	text-align: center;
	line-height: 20px;
}

.table .zone-row {
	background-color: rgba(0,0,0,0.3);
	border: 1px solid rgba(0,0,0,0.5);
	color: #fff;
}

.row-filler {
	height: 11px;
	border-bottom: 1px solid #fff;
	opacity: 0.5;
}

/******************************
**	CUSTOM DEMO
******************************/

.row-filler {
	border-bottom: 1px solid var(--content-text);
}


/******************************
	CUSTOM DEMO & PREVIEW BRUSH OVERRIDES
******************************/
.custom-demo .row-visible {
    min-width: 95px;
	padding: 0;
}
.custom-demo .attached-marking-row,
.preview-brush .attached-marking-row { 
	min-width: 420px;
}
.custom-demo .attached-marking-name {
	width: 188px;
	max-width: 188px;
}
.preview-brush .attached-marking-name {
	width: 205px;
	max-width: 205px;
}
.custom-demo .attached-marking-amount {
	width: 70px;
    margin-right: 8px;
}
.preview-brush .attached-marking-amount {
    margin-right: 0px;
}
.custom-demo .secondary-colors,
.preview-brush .secondary-colors { 
	margin-left: 0;
}

/******************************
**	HEAVY HANDED OVERRIDES
	sep 2018: removed !important to see if that works
******************************/

.red,
a.red {
	color: var(--red);
}

.redBorder {
	border-color: var(--red) !important;
}

div.panel .red a {
	color: var(--red);
	text-decoration: underline;
}

.fa-red {
	color: var(--red);
}

.green,
a.green {
	color: var(--green);
}

.fa-green {
	color: var(--green);
}

.white {
	color: var(--tag-red-text);
}

.grey {
	color: #aaa;
}

.black {
	color: var(--black);
}

div.panel .current-color, 
div.panel .current-color a, 
div.panel .current-color a:hover {
	color: currentColor;
}
body .current-color a svg:hover {
	fill: currentColor;
}

/******************************
**	WAJA CARD
******************************/

.waja-cell {
	width: 25%;
	vertical-align: top;
	padding: 5px;
}

.waja-card {
	width: 168px;
	text-align: center;
	border: 1px solid var(--w-card-border);
	padding: 5px;
	border-radius: 5px;
	margin: 0 5px 10px 5px;
	overflow: hidden;
	background: var(--w-card-bg);
	color: var(--w-card-text);
}

.removable-card {
	position: relative;
	overflow: visible;
}

.remove-glyph {
	position: absolute;
	top:-9px; 
	right: -8px;
}

.waja-card.selected,
.waja-card.selected a,
.showcase-item.selected,
.theme-box.selected {
	border-color: var(--w-card-selected-border);
    background: var(--w-card-selected-bg);
    color: var(--w-card-selected-text);
}

.waja-card .image {
	position: relative;
}

.waja-card.waja .image img {
	width: 150px;
	height: 109px;
}

.waja-card.doodle .image img {
	width: 80px;
	height: 80px;
}

.waja-card .waja-checkbox-shield {
	position: absolute;
	top: 0px;
	left: 10px;
	width: 40px;
	height: 40px;
	background: transparent;
}

.waja-card.moves .waja-checkbox-shield {
    top: -5px;
    left: -5px;
    width: 180px;
    height: 350px;
	z-index: 2;
}

.waja-card .waja-checkbox {
	position: absolute;
	left: -10px;
	top: -16px;
}

.waja-card.moves .waja-checkbox {
	left: 120px;
	top: 70px;
}

.waja-card .title {
	font-size: 12px;
	opacity: 0.8;
	min-height: 18px;
}

.waja-properties {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-top: 10px;
}

.waja-card .label-value {
	min-width: 10px;
	font-size: 16px;
	padding-bottom: 0;
}

/* WAJA WAND CARD */

.waja-card.wand-card {
	width: 167px;
}

/* WAJA PICKER CARD */

.waja-card.waja-picker-card .name {
	font-size: 13px;
	min-height: 36px;
}

.waja-card.waja-picker-card .button {
	margin-top: 10px;
}

.waja-card.waja-picker-card.fat {
	width: 336px;
	display: flex;
	align-items: center;
	margin: 8px;
}

.waja-card.waja-picker-card.fat .name {
	flex: 1;
	text-align: left;
}

.waja-card.waja-picker-card.fat .button {
	margin-top: 0;
}

/*
	FEED WAJA ITEM CARD
*/

.waja-card.item-card .waja-checkbox-shield {
	position: absolute;
	top: 0px;
	left: 10px;
	width: 40px;
	height: 40px;
	background: transparent;
}

.waja-card.item-card.moves .waja-checkbox-shield {
    top: -5px;
    left: -5px;
    width: 140px;
    height: 230px;
	z-index: 2;
}

.waja-card.item-card .waja-checkbox {
	position: absolute;
	left: -10px;
	top: -16px;
}

.waja-card.item-card.moves .waja-checkbox {
	left: 75px;
	top: -15px;
}

/*
	HATCHLING CARD
*/

.waja-card.hatchling-card {
    width: 220px;
}
.waja-card.hatchling-card.wide {
	width: 350px;
}

.waja-card.hatchling-card.centered {
    margin: 10px auto;
}

.hatchling-image {
    width: 200px;
    height: 200px;
    margin: 10px auto;
}
.wide .hatchling-image {
	width: 250px;
	height: 250px;
}
.hatchling-card .item-image {
    width: 50px;
    height: 50px;
}

/******************************
**	CONTEST ENTRY WAJA CARD
******************************/

.entries-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	position: relative;
}

.contest-entry {
	position: relative;
	text-align: center;
	min-height: 220px;
	margin: 0 5px 10px 5px;

	transform: scale(1, 1);
	z-index: 1;

	transition: transform 0.3s ease 0s,
				z-index 0s ease 0.25s;
}

.contest-entry.expanded {
	min-height: 175px;
	font-size: 6px;
	z-index: 10;
	transform: scale(4.4, 4.4) translatex(0px);
	transition: transform 0.3s ease;
}

.contest-entry.shrink-begin {
	z-index: 9;
}

.contest-entry .entry-details {
	opacity: 1;
	transition: opacity 0.3s ease-out;
}

.contest-entry.expand-begin .entry-details,
.contest-entry.shrink-begin .entry-details {
	opacity: 0;
	transition: opacity 0s;
}

.contest-entry.expanded .entry-details {
	opacity: 1;
	transition: opacity 0.3s ease-out;
}

.contest-entry .entry-description {
	height: 0;
	overflow: hidden;
}

.contest-entry.expand-begin .entry-description,
.contest-entry.expanded .entry-description {
	height: auto;
}

.contest-entry .entry-meta {
	height: auto;
}

.contest-entry.expanded .entry-meta {
	height: 0;
	overflow: hidden;
}

.contest-entry.expand-begin .smalltext,
.contest-entry.expanded .smalltext {
	font-size: 4.5px
}

.contest-entry.expand-begin .tinytext,
.contest-entry.expanded .tinytext {
	font-size: 4px
}

.contest-entry.expand-begin .m-b-10,
.contest-entry.expanded .m-b-10 { 
	margin-bottom: 4px; 
}

.contest-entry.expand-begin .m-t-10,
.contest-entry.expanded .m-t-10 { 
	margin-top: 4px;
}

.contest-entry.expand-begin .m-b-5,
.contest-entry.expanded .m-b-5 {
	margin-bottom: 2px;
}

.contest-entry .entry-name {
	min-height: 2.5em;
}

.duc-image {
	background-image: url('/_images/contests/ducs.png');
	width: 72px;
	height: 68px;
	background-size: 256px;
}
.duc-image.gold {
	background-position: -4px -6px;
}

.duc-image.silver {
	background-position: -79px -6px;
}

.duc-image.bronze {
	background-position: -154px -6px;
}

.duc-image.rainbow-1 {
	background-position: -4px -232px;
}

.duc-image.rainbow-2 {
	background-position: -87px -232px;
}

.duc-image.rainbow-3 {
	background-position: -169px -232px;
}

/******************************
**	USER GRID (library staff page)
******************************/

.user-grid {
	display: flex;
	flex-wrap: wrap;
}

.user-grid .table-row {
	position: relative;
	display: block;
	width: 236px;
	text-align: center;
	padding: 5px 0;
}

.user-grid .table-row.solo {
	background: #0004;	
	border-radius: 10px;
}

.user-grid .username {
	max-height: 20px;
}

.user-grid .user-id {
    font-size: 11px;
    line-height: 2em;
}

.user-grid .avatar {
	min-height: 155px;
}

.user-grid .portrait-avatar {
	padding: 12px;
}

.user-grid .egg-avatar {
	width: 125px;
	height: 125px;
	padding: 12px;
}

.staff-card {
	/* variant of .waja-card */
	width: 224px;
}
.user-card {
	width: 164px;
}

.micro-card {
	border: 1px solid var(--p-card-border);
	border-radius: 5px;
	padding: 2px;
	background-color: var(--p-card-bg);
	color: var(--w-card-text);
}

.mini-card {
	position: relative;
	display: flex;
	align-items: center !important;
	height: 60px;
	min-width: 350px;
	width: 350px;
	margin: 0 5px 5px 0;
	border: 1px solid var(--p-card-border);
	border-radius: 2px;
	background-color: var(--p-card-bg);
	color: var(--w-card-text);
}
.mini-card.hilited,
.hilited .mini-card {
	border-color: var(--highlight);
}

.table.normal.secondary .mini-card {
	color: var(--w-card-text);
	border-color: var(--p-card-border);
	background-color: var(--p-card-bg);
}

.mini-card.narrow {
	min-width: 245px;
	width: 245px;
}
.mini-card-image,
.mini-card-waja-image {
	width: 60px;
	height: 60px;
	margin-right: 10px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% center;
}
.mini-card-waja-image {
	width: 82px;
}



/******************************
**	DRESS UP CONTEST THEME CARD
******************************/
.dressup-theme-card {
	transform: scale(1, 1);
	z-index: 1;
	transition: transform 0.3s;
    transition-property: transform, z-index;
    transition-delay: 0s, 0.25s;
    transition-duration: 0.3s, 0;

	text-align: center;
	min-height: 150px;
}
.dressup-theme-card .entry-description {
	height: 0;
	overflow: hidden;
}

.dressup-theme-card.expanded {
	min-height: 130px;
	z-index: 10;
	transform: scale(4.4, 4.4);
	transition: transform 0.3s;
	font-size: 6px;
}

.dressup-theme-card .entry-details {
	opacity: 1;
	transition: opacity 0.3s ease-out;
}
.dressup-theme-card.expand-begin .entry-details,
.dressup-theme-card.shrink-begin .entry-details {
	opacity: 0;
	transition: opacity 0s;
}
.dressup-theme-card.expanded .entry-details {
	opacity: 1;
	transition: opacity 0.3s ease-out;
}


.dressup-theme-card.expanded .smalltext {
	font-size: 4.5px
}
.dressup-theme-card.expanded .tinytext {
	font-size: 4px
}
.dressup-theme-card.expanded .m-b-10 { margin-bottom: 4px; }
.dressup-theme-card.expanded .m-t-10 { margin-top: 4px; }
.dressup-theme-card.expanded .m-b-5 { margin-bottom: 2px; }
.dressup-theme-card.expanded .entry-description {
	height: auto;
}




/* .waja-card .label {
	display: none;
} */

/* better css checkbox */
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
	opacity: 0;
}

.checkbox label {
	position: relative;
	display: inline-block;

	/*16px width of fake checkbox + 6px distance between fake checkbox and text*/
	padding-left: 22px;
}

.checkbox label::before,
.checkbox label::after {
	position: absolute;
	content: "";

	/*Needed for the line-height to take effect*/
	display: inline-block;
}

/*Outer box of the fake checkbox*/
.checkbox label::before{
	height: 16px;
	width: 16px;

	border: 1px solid;
	left: 0px;

	/*(24px line-height - 16px height of fake checkbox) / 2 - 1px for the border
	 *to vertically center it.
	 */
	top: 3px;
	background: #fff;
	border-radius: 2px;
}

.waja-card.moves .checkbox label::before{
	height: 24px;
	width: 24px;
	border-radius: 13px;
}

.checkbox input[type="checkbox"]:checked + label::before,
.checkbox input[type="radio"]:checked + label::before {
	background: #fff;
}

.waja-card.moves .checkbox input[type="checkbox"]:checked + label::before,
.waja-card.moves .checkbox input[type="radio"]:checked + label::before {
	border-color: #fff;
	background: #00ca11;
}

/*Checkmark of the fake checkbox*/
.checkbox label::after {
	height: 5px;
	width: 11px;
	border-left: 2px solid;
	border-bottom: 2px solid;
	border-color: #00ca11;
	transform: rotate(-55deg);
	left: 3px;
	top: 6px;
}

.waja-card.moves .checkbox label::after {
    height: 6px;
    width: 14px;
    border-left: 3px solid;
    border-bottom: 3px solid;
    border-color: #fff;
    left: 4px;
    top: 10px;
}

.waja-card.moves .checkbox input[type="checkbox"]:checked + label::before, .waja-card.moves .checkbox input[type="radio"]:checked + label::before {
    background: var(--green);
}

/*Hide the checkmark by default*/
.checkbox input[type="checkbox"] + label::after,
.checkbox input[type="radio"] + label::after {
	content: none;
}

/*Unhide on the checked state*/
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
	content: "";
}

/*Adding focus styles on the outer-box of the fake checkbox*/
/* .checkbox input[type="checkbox"]:focus + label::before {
	outline: rgb(59, 153, 252) auto 5px;
} */


.tag-list {
	min-height: 5px;
}


/******************************
**	ITEM CARD
******************************/
.waja-card.item-card {
	width: 130px;
}
.waja-card.item-card.wide {
	width: 162px;
}

.waja-card.item-action-card {
	position: relative;
	width: 200px;
	margin: 0;
}

.waja-card.item-card .name {
	min-height: 2.4em;
}



/******************************
**	CRAFT CARD
******************************/
.waja-card.craft-card {
	padding: 15px;
	width: 145px;
}

.waja-card.craft-card .name {
	min-height: 2.4em;
}



/******************************
**	WAJA DETAILS
******************************/
/***
STYLING
***/

.h-flex {
	display: flex;
	flex-grow: 1;
}

.v-flex {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
}

.c-header {
	padding: 10px;
	border-radius: 10px 10px 0px 0px;
	font-family: 'bubblegum sans';
	font-size: 24px;
	margin: -5px -5px 0 -5px;
	text-align: center;
	letter-spacing: 1px;
	color: var(--c-header-text);
	text-shadow: 1px 1px 0px var(--c-header-shadow);
	background-color: var(--c-header-bg);
}

.c-subheader {
	font-size: 14px;
	padding: 3px;
	margin: 10px -10px -10px -10px;
	text-align: center;
	font-family: tahoma;
	text-shadow: none;
	letter-spacing: 0px;
}

.header-button {
	width: 30px;
	margin: 0 5px;
	flex-grow:0;
	text-align: center;
	text-shadow: none;
	/* font-size: .75em; */
}

.header-text {
	flex-grow: 1;
	text-align: center;
	width: auto;
}

.waja-name-edit {
	border-radius: 1px;
	width: 95%;
	border: none;
	text-align: center;
	text-shadow: 1px 1px 0px var(--h1-shadow);
	font-size: 24px;
	font-family: 'bubblegum sans';
	letter-spacing: 1px;
}

.waja-name-edit::placeholder {
	text-shadow: none;
	opacity: 1;
}


.waja-title-edit::placeholder {
	text-shadow: none;
	opacity: 1;
}

.waja-title-edit {
	border-radius: 1px;
	width: 69%;
	border: none;
	text-align: center;
	font-size: 12px;
}

.subheader-container {
	margin: 0px -5px;
}

.subheader-section {
	padding: 10px 3px 10px 3px;
	display: flex;
	flex-grow: 1;
}

.edit-section {
	display: flex;
	padding: 10px 3px 10px 3px;
	flex-flow: row wrap;
}

.edit-section-title {
	font-weight: bold;
	min-width: 100%;
	margin: 0 10px 5px 10px;
}

.edit-row {
	margin: 0px 10px 5px 10px;
	display: flex;
}

.edit-row.full-width {
	display: block;
	width: 100%
}

.edit-row span.label {
	margin-left: 10px;
}
.edit-text {
	max-width: 300px;
}

div#waja-wrapper {
    margin-top: 10px;
}

#cave_description_remaining {
	margin: 0;
}

.waja-bulk-action-controls {
	position: relative;
}
.waja-bulk-actions {
	position: relative;
}
.waja-bulk-action {
	position: absolute;
	left: 0;
	top: 0;
}

.subheader-section-box {
	width: 0px;
	flex-grow: 1;
	margin: 0px 10px 0px 10px;
	display: flex;
	text-align: left;
}

.subheader-section-info {
	width: 0px;
	flex-grow: 1;
	text-align: left;
	padding: 0px 5px 0px 5px;
	line-height: 24px;
}

.info-edit {
	padding: 0px 5% 0px 5%;
	width: 90%;
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input.read-only,
input:disabled {
	color: #666;
	background-color: #ddd;
}
input:invalid,
input.invalid {
	background-color: #ec8686 !important;
}

.clear-input {
	margin-left: -23px; 
	vertical-align: -2px;
	color: #aaa;
	cursor: arrow;
}

.edit-checkbox {
	color: #c4fb79;
}

.waja-description-edit {
	width: 100%;
	margin: 0px;
	height: 100px;
}

.waja-action-box {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	text-align: center;
	align-items: center;
	flex-grow: 1
}

a.big-button {
	display: block;
	padding: 5px 10px;
	font-family: "Bubblegum Sans", tahoma, sans-serif;
	font-size: 24px;
	text-transform: uppercase;
	border-radius: 5px;
}

a.small-button {
	display: inline-block;
	padding: 2px 5px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 14px;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}
a.small-button.padded {
	padding: 2px 10px;
}
a.medium-button {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 16px;
}
a.small-button:hover,
a.medium-button:hover,
a.big-button:hover {
	text-decoration: none !important;

}
a.dimmed:not(:hover) {
	opacity: 0.6;
}
div.panel a.no-underline:hover,
div.panel a.dimmed:hover {
	text-decoration: none;
}

.purchase-breed-section {
	margin: 10px 0;
	justify-content: center;
	flex-wrap: wrap;
}

.waja-action {
	padding: 1px;
	width: 130px;
	flex-grow: 0;
	text-align: center;
	border-radius: 1000px;
	margin: 2px;
	border: none;
	cursor: pointer;
}

.waja-share {
	padding: 1px;
	width: 100px;
	flex-grow: 1;
	text-align: center;
	border-radius: 1000px;
	margin: 2px;
	border: none;
	cursor: pointer;
}

.ec-container {
	display: flex;
	flex-direction: column;
	margin: 3px;
}

.ec-section {
	flex-grow: 1;
	border-left: 1px solid;
	border-right: 1px solid;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	overflow: hidden;
	max-width: 772px;
}
.ec-section.left {
	justify-content: left;
}

.ec-section:last-child {
	border-radius: 0px 0px 5px 5px;
	border-bottom: 1px solid;
}

.ec-section.ec-header {
	border-radius: 5px;
}

.ec-section.ec-header.expanded {
	border-radius: 5px 5px 0px 0px;
}

.ec-section h2 {
	padding: 0;
	margin: 0;
}

.ec-reg-text {
	margin: 10px;
	flex-grow: 1;
	text-align: justify;
}

.basic-info-box {
	flex: 1;
	display: flex;
	min-width: 200px;
	margin: 10px 0px 10px 0px;
}

.basic-info-box .label {
	text-transform: uppercase;
	font-size: .7em;
	font-weight: bold;
	opacity: .6
}

.basic-info-box .data {
	font-weight: normal;
}

.basic-info-column {
	flex: 1;
	align-items: flex-start;
}

.marking-mutation-details {
	width: 750px;
}


.waja-dropdown {
	min-width: 200px;
	margin-left: 10px;
}


/*
	ANNOUCEMENT LIST
*/
.announcement-list {
	width: 300px;
	/* height: 300px;
	overflow: auto; */
}
.announcement-head {
	margin-bottom: 5px;
}
.announcement-head .date {
	opacity: 0.8;
}
.announcement-item {
	padding: 5px 10px 20px 10px;
}


/***
COLORS
***/

.bg-one, .bg-1 {
	background-color: var(--bg-one);
}

.bg-two, .bg-2 {
	background-color: var(--bg-two);
}

.bg-three, .bg-3 {
	background-color: var(--bg-three);
}

.bg-two div > div.ellipsis,
.bg-three div > div.ellipsis {
	display: inline-block;
	max-width: 300px;
	margin: 0 auto;
}

.color-one, .color-1, .color-two, .color-2, .ec-section, .subheader-container {
	color: var(--ec-text);
}

.ec-header {
	font-weight: bold;
	font-size: 18px;
	padding: 3px;
	display: flex;
	align-items: center;
	text-shadow: none !important;
    color: var(--c-header-text);
	background-color: var(--c-header-bg);
}

.color-three, .color-3, .c-subheader {
	color: var(--c-subheader-text);
}

.ec-section, .ec-section:first-child, .ec-section:last-child, .ec-section:only-child {
	border-color: var(--c-header-bg);
}

.md-checkbox + label::before {
	color: var(--green);
}

button.big-button, 
button.medium-button, 
button.small-button, 
a.big-button, 
a.medium-button, 
a.small-button, 
.waja-action, 
.waja-share,
.ui-button,
button.button-menu[data-v-a0523512],
.button,
input.submit_button,
input.letter_button {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: 1px solid var(--button-text) !important;
	transition: background-color 0.3s;
}

button.big-button.padded {
	padding-left: 20px;
	padding-right: 20px;
}

button.big-button:hover:not([disabled]),
button.medium-button:hover:not([disabled]),
button.small-button:hover:not([disabled]),
a.big-button:hover:not([disabled]),
a.medium-button:hover:not([disabled]),
a.small-button:hover:not([disabled]),
.waja-action:hover:not([disabled]),
.waja-share:hover:not([disabled]),
.ui-button:hover,
button.button-menu[data-v-a0523512]:hover:not([disabled]),
.button:hover,
.button.is-hovered
input.letter_button:hover:not([disabled]) {
    background-color: var(--button-bg-h) !important;
    color: var(--button-text-h) !important;
    border-color: var(--button-text-h) !important;
}

button.small-button.green,
button.medium-button.green,
a.small-button.green,
a.medium-button.green {
    background-color: var(--button-green-bg) !important;
    color: var(--button-green-text) !important;
    border-color: var(--button-green-text) !important;
}

button.small-button.green:hover:not([disabled]),
button.medium-button.green:hover:not([disabled]),
a.small-button.green:hover:not([disabled]),
a.medium-button.green:hover:not([disabled]) {
    background-color: var(--button-green-bg-h) !important;
    color: var(--button-green-text-h) !important;
    border-color: var(--button-green-text-h) !important;
}

button.small-button.red,
button.medium-button.red,
a.small-button.red,
a.medium-button.red {
	background-color: var(--red) !important;
	color: var(--tag-red-text) !important;
    border: 1px solid var(--tag-red-text) !important;
}

button.small-button.red:hover:not([disabled]),
button.medium-button.red:hover:not([disabled]),
a.small-button.red:hover:not([disabled]),
a.medium-button.red:hover:not([disabled]) {
	background-color: var(--button-red-bg-h) !important;
	color: var(--button-red-text-h) !important;
    border: 1px solid var(--button-red-text-h) !important;
}

button.small-button.primary,
button.medium-button.primary,
button.big-button.primary,
button.is-success,
a.small-button.primary,
a.medium-button.primary {
	background-color: var(--button-primary-bg) !important;
	color: var(--button-primary-text) !important;
    border: 1px solid var(--button-primary-text) !important;
}

button.small-button.primary:hover:not([disabled]),
button.medium-button.primary:hover:not([disabled]),
button.big-button.primary:hover:not([disabled]),
button.is-success:hover:not([disabled]),
a.small-button.primary:hover:not([disabled]),
a.medium-button.primary:hover:not([disabled]) {
	background-color: var(--button-primary-bg-h) !important;
	color: var(--button-primary-text-h) !important;
    border: 1px solid var(--button-primary-text-h) !important;
}

button.glyph-button, button.nextgen-glyph-button {
	border: none;
	background: transparent;
	color: var(--button-glyph) !important;
	text-shadow:
	  -1px -1px 0 #fff,
	   1px -1px 0 #fff,
	   -1px 1px 0 #fff,
		1px 1px 0 #fff;
	font-size: 18px;
}
button.glyph-button.large {
	font-size: 24px;
}

button.glyph-button:hover, button.nextgen-glyph-button:hover {
	color: var(--button-glyph-h) !important;
}

button.glyph-button.red {
	color: var(--red) !important;
	text-shadow: -1px -1px 0px var(--tag-red-text), 1px -1px 0px var(--tag-red-text), -1px 1px 0px var(--tag-red-text), 1px 1px 0px var(--tag-red-text);
}

button.glyph-button.red:hover {
	color: var(--button-red-bg-h) !important;
}

button.glyph-button.no-padding {
	padding: 0;
}

button.glyph-button.no-shadow {
	text-shadow: none;
}

input.search-input {
	width: 100px
}

input.search-input:focus {
	width: 200px;
}

.cmp-glyph {
	width: 16px;
	height: 16px;
	vertical-align: 0;
}

svg.wajas-glyph {
	fill: currentcolor;
	width: 1em;
	height: 1em;
}

.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

table.xdebug-error th,
table.xdebug-error td {
	color: #000;
	font-size: 12px;
}

/* GUILDS */

.guild-content-wide img {
	max-width: 100%;
	height: auto;
}

.guild-content {
	width: 570px;
	max-width: 570px;
}

.guild-content img {
	max-width: 100%;
	height: auto;
}

.guild-nav {
	width: 150px;
}

.guild-colors {
	display: inline-block;
	width: 16px;		/* 20 */
	height: 16px;
	background-color: #888;
	margin-right: 5px;
	vertical-align: -2.5px;	/* -4 */
	border-radius: 8px;	/* 10 */
	padding: 1px;
}

.guild-colors span {
	display: inline-block;
	width: 8px;	/* 10 */
	height: 16px;	/* 20 */
}

.guild-colors span:first-child {
	border-top-left-radius: 16px;	/* 20 */
	border-bottom-left-radius: 16px;
}

.guild-colors span:last-child {
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
}

#member-list .avatar-avatar,
#member-list .egg-avatar,
#member-list .portrait-avatar {
	width: 50px;
	padding: 0;
}

#news-comments .avatar-wrapper {
	width: 60px;
	height: 60px;
	margin-right: 10px;
}

#news-comments .avatar-avatar,
#news-comments .egg-avatar,
#news-comments .portrait-avatar {
	width: initial;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

#tab-preview-description img {
	max-width: 100%;
	height: auto;
}

/* RAFFLES */

.raffle-description {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
}

.guild-raffle .raffle-description {
	min-height: 30px;
}

.raffle-link {
	position: absolute;
	right: 0;
	bottom: 0
}

.raffle .waja-card {
	margin: 0;
}

.raffle-details {
	text-align: center;
	min-width: 250px;
}

.pixelated {
	display: inline-block;
	width: 64px;
	height: 12px;
	background-image: var(--pixelated);
}

.theme-preview-name.active {
	font-weight: bold;
}

#status-section {
	padding: 10px;
    background-color: var(--secondary-bg);
	color: var(--secondary-text);
}

#status-section a {
	color: var(--secondary-link);
	text-decoration: underline;
}

#status-section a:hover {
	color: var(--secondary-link-h);
}

.price-chart {
	border-collapse: collapse;
	border: 1px solid var(--table-border);
}

.price-chart th,
.price-chart td {
	font-weight: normal;
	padding: 5px 10px;
	border: 1px solid var(--table-border);
}

.price-chart th.price,
.price-chart td.price {
	min-width: 4em;
	text-align: center;
}

.waja-thumbnail {
	width: 150px;
	height: 109px;
}

.waja-fullsize {
	width: 660px;
	height: 480px;
}

.waja-medium {
	width: 330px;
	height: 240px;
}

.waja-3up {
	width: 240px;
	height: 175px;
}

.waja-thumbnail-placeholder {
	width: 150px;
	height: 109px;
	margin-bottom: 20px;
	opacity: 0.7;
	border: 1px solid currentColor;
	font-size: 14px;
	text-align: center;
	line-height: 100px;
}

.item-preview {
	width: 80px;
	height: 80px;
}

.item-preview.small {
	width: 40px;
	height: 40px;
}

.visibility-hidden {
	visibility: hidden;
}

/*
	ADDITIONAL FONT AWESOME CLASSES
*/

.fa-stack-badge,
.fa-stack-badge-left,
.fa-stack-super {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.9em;
  top: 0.5em;
}

.fa-stack-badge {
  left: 0.6em;
}

.fa-stack-badge-left {
  left: -0.6em;
}

.fa-stack-super {
	left: -0.6em;
	top: -0.5em;
}

.fa-small {
  font-size: 0.8em;
}

/*
	VUE RELATED
*/

[v-cloak] {
	display: none;
}

/*
	VUE TAGS INPUT COMPONENT
*/

.tags-input span {
	margin-right: 0.3em;
	margin-bottom: 0.3em;
}

.tags-input-badge-pill {
	border: 1px solid var(--filter-border);
}

.tags-input-badge {
	font-weight: normal;
	text-transform: uppercase;
}

.tags-input-remove:before, 
.tags-input-remove:after {
	background: #a44;
}
/* new overrides */
.tags-input input[type="text"] {
	color: var(--input-text);
	min-width: 130px;
	max-width: 130px;
	margin-left: 5px;
}
.tags-input-wrapper-default {
	margin-bottom: 20px;
    background: transparent;
    border-color:  var(--filter-border);
}
.tags-input-wrapper-default.active {
    box-shadow: 0 0 0 0.2em var(--filter-border);
}
div.panel a.tags-input-remove:before,
div.panel a.tags-input-remove:after {
    background: var(--link)
}
div.panel a.tags-input-remove:hover:before,
div.panel a.tags-input-remove:hover:after {
    background: var(--link-h)
}
	
.tags-input-badge-selected-default {
    color: var(--filter-primary-text);
	background-color: var(--filter-primary-bg);
	border: 1px solid var(--filter-border);
	margin-top: 5px;	
}
.typeahead-hide-btn {
    color: var(--content-text) !important;
	opacity: 0.6 !important;
	text-transform: lowercase;
	display: block;
	text-align: left;
	border: none !important;
}
.typeahead-hide-btn::before {
	content: 'Click a tag below, or ';
	text-transform: none;
}
.typeahead-hide-btn::after {
	content: ' then press Enter:';
	text-transform: none;
}
.tags-input-typeahead-item-default {
	/* color: var(--filter-primary-text);
	background-color: var(--filter-primary-bg);
	border: 1px solid var(--filter-border); */
	color: var(--link);
	background-color: var(--pag-bg-h);
	border: 1px solid var(--filter-border);	
}
.tags-input-typeahead-item-highlighted-default {
    color: var(--secondary-link-h);
    background-color: var(--secondary-bg) !important;
    border: 1px solid var(--secondary-bg);
}


/*
	HEX BLENDER WIDGET
*/

.blender-swatch {
	margin: 0 5px;
	width:	30px;
	height:	30px;
	border:	1px solid black;
	border-radius: 5px;
}
.blender-swatch.selected {
	border-width: 3px;
}
.hex-blender-bracket {
	position: absolute; 
	top: -37px; 
	left: 24px;
}

/*
	FORUM CALENDAR
*/

.forum-calendar {
	width: 610px; 
	margin-left: -15px;
	text-align: center;            
	font-family: "Courier New", sans-serif; 
}

.fc-day {
	background-color: rgb(164, 176, 169); 
	height: 150px; 
	width: 110px; 
	font-size: 14px; 
	float: left;
}

.fc-day b {
	font-size: 16px;
}

.fc-empty-day {
	height: 150px; 
	width: 110px; 
	font-size: 14px; 
	float: left; 
	background-color: rgb(68, 69, 54);
}

.fc-spacer {
	width: 10px; 
	background-color: rgb(68, 69, 54); 
	height: 160px; 
	float: left; 
	margin-top: -5px;
}

.fc-week-spacer {
	width: 610px; 
	height: 10px; 
	float: left; 
	margin-top: -5px; 
	background-color: rgb(68, 69, 54);
}

/*
	DOLL RELATED
*/

.waja-card.doll-card {
	width: 160px;
}

.waja-card.doodlecorn-card {
	width: 130px;
	margin: 0 3px 10px 3px;
}

.cookie-consent {
	position: fixed;
	width: 100%;
	bottom: 0;
	background: #fff;
	color: #000;
}

.cookie-consent-text {
	margin: 20px;
	text-align: center;
}

/*
	LIGHTBOX
*/

.lightbox-wrapper {
	display: inline-block;
	text-align: center;
}

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
	background: rgba(255,255,255,.5);
}

.lightbox-image {
	position: relative;
	padding: 10px;
	background: #fff;
	border: 1px solid #666;
	box-shadow: 2px 2px 4px #888;
}

.lightbox-image img {
	border: 1px solid #ccc;
}

.lightbox-close {
    position: absolute;
    right: 2px;
	top: 1px;
	color: #444;
}

/*
	GRADIENT BACKGROUNDS
*/

.bg-popsicle {
	background-image: linear-gradient(-90deg, #3FBDC5 0%, #C57ACD 51%, #FBA957 100%);	
}

.dice-face {
	fill: currentColor;
}

.dice-pip {
	fill: white;
}

/*
	ITEM PICKER 2
*/

.ip-keyword::placeholder {
    color: #aaa;
    font-style: italic;
}

.ip-filter-icon {
	position: absolute; 
	left: 3px; 
	top: 2px;
}

.ip-item-list-wrapper {
	width: 350px;
	color: #444; 
	background-color: #fff; 
	padding: 3px 3px 0 3px;
	border: 1px solid #ccc;
	box-shadow: 1px 1px 2px #aaa;
	overflow: hidden;
}

.ip-item-list {
	overflow-y: scroll;
	max-height: 207px;
}

.ip-item-list label {
	display: block;
	cursor: pointer;
}

.ip-item-list label.hilited {
	background-color: #eee;
}

.ip-item {
	margin: 0 5px;
}

input,
textarea,
select {
	font-size: 16px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
input#filter,
input,
.one-color-value input,
.one-color-value input:hover {
	background: var(--input-bg);
	border: 1px solid var(--input-border);
    color: var(--input-text)
}

::placeholder {
    color: var(--input-text) !important;
    opacity: 50% !important;
}

/* NEXTGEN DEMO */

.item-row.current-edit {
	background-color: var(--pag-active-bg) !important;
	color: var(--pag-active-text) !important;
}

.button-menu-dropdown.show {
    overflow: hidden;
    background-color: var(--pag-bg);
}

.button-menu-dropdown a[data-v-a0523512] {
    color: var(--pag-text);
}

.button-menu-dropdown a[data-v-a0523512]:hover {
    background-color: var(--pag-active-bg);
    color: var(--pag-active-text);
}

.row-name[data-v-8c20c310] {
    color: var(--table-text);
}

.drag-section, .sp-container, .one-colorpanel {
    background: var(--filter-primary-bg);
    color: var(--filter-primary-text) !important;
    border: var(--filter-border);
    border-radius: 5px;
	box-shadow: 0px 0px 5px 2px var(--tooltip-glow);
}

.one-colorpanel-drag {
    background: var(--filter-secondary-bg);
}

.sp-texture-description {
    color: var(--filter-primary-text);
}

.one-color-stash-title span.active, .one-color-stash-title span.active:hover {
    color: var(--filter-primary-text);
}

.one-color-stash-title span {
    color: var(--link);
}

.one-color-stash-title span:hover {
    color: var(--link-h);
}

.sp-picker-container {
    border: none;
}

.item-list-wrapper[data-v-d4d83630] {
    background: var(--select-bg);
    color: var(--select-text);
    border: var(--select-border);
    box-shadow: 2px 2px 1px var(--table-shadow);
}

.item-list label.hilited[data-v-d4d83630] {
    background: var(--pag-active-bg);
    color: var(--pag-active-text);
}

.content .input-amount-percent[data-v-ff95c7fe] {
    color: var(--black);
}

button.glyph-button, button.nextgen-glyph-button {
    background: none !important;
    cursor: pointer;
}

button.glyph-button:hover, button.nextgen-glyph-button:hover {
    background: none !important;
}

.one-color-stash-wrap li {
    box-shadow: none;
}

div#nextgen {
    line-height: 24px;
}


/* PROJECT MANAGER ACTION MENU */

.action-menu ul {
    border: 1px solid var(--pag-border);
	box-shadow: 0px 0px 5px 2px var(--tooltip-glow);
	background-color: var(--pag-bg);
}
.action-menu ul a,
.action-menu ul .copy-text {
	color: var(--content-text) !important;
}
.action-menu ul a:hover,
.action-menu ul .copy-text:hover {
	background-color: var(--inventory-menu-link-h-bg);
	color: var(--inventory-menu-link-h) !important;
	text-decoration: none;
}
.action-menu ul li.note {
	color: var(--content-text) !important;
	font-size: 13px;
	opacity: 0.5;
	padding: 0 5px 5px 5px;
	text-align: right;
	font-style: italic;
}

/* CONTESTS */

div#board {
    background: none;
    border: none;
}

div#board H2 {
    color: inherit;
}

span#paused {
    color: var(--red);
}

.waja-labs {
	text-align: center;
	margin-bottom: 10px;
}

.column-count-2 { column-count: 2; }
.column-count-3 { column-count: 3; }
.column-count-4 { column-count: 4; }
.column-count-5 { column-count: 5; }