body {
	font-family: Century Gothic;
	font-size: 24dp;
	
	color: #fff;
	
	margin: 0;
    padding: 0;
}

.hidden
{
	display: none;
}

.top-padding
{
	padding-top: 20dp;
}

	.top-padding.hidden
	{
		padding-top: 0dp;
	}

button.common_btn {
	font-size: 36dp;
	font-weight: bold;
	color: white;
	background-color: rgba(165,227,251,255);
	padding: 5pt;
	padding-left: 10pt;
	padding-right: 10pt;
	border-radius: 5pt;
	display: block;
	text-align: center;
	font-effect: glow(1px black);
	transition: all 0.1s;
	transform: scale(1.0) translateX(0pt);
	decorator: gradient(vertical rgba(215,255,255,255) rgba(135,197,221,255));
	border-left: 0dp;
	border-bottom: 2pt rgba(39, 125, 159, 220);
	border-right: 2pt rgba(39, 125, 159, 220);
	border-top: 0dp;
}

button.common_btn:hover
{
	transform: scale(1.05);
}

/*-------------------------------------------------------------------------------------------*/
/*------------------------               Typography               ---------------------------*/

.font-title {
	font-family: Century Gothic;
	font-size: 46dp;
}

.font-button-text {
	font-family: Century Gothic;
	font-size: 36dp;
}

.font-body1,
.font-regular {
	font-family: Century Gothic;
	font-size: 26dp;
}

.font-body2 {
	font-family: Century Gothic;
	font-size: 20dp;
}

.small_text {
    font-family: Century Gothic;
    font-size: 20dp;
    font-weight: 700;
    line-height: 29.43dp;
    text-align: left;
}

/*-------------------------------------------------------------------------------------------*/
/*------------------------              Popup Colors              ---------------------------*/

.popup-border-color {
	border-color: #87B8CCFF;
}

.popup-background-color {
	background-color: #186B8BCC;
}

/*-------------------------------------------------------------------------------------------*/
/*------------------------             Buttons Colors             ---------------------------*/

.button.button-tab-color {
	background-color: #54879BFF;
}

.button.button-tab-color.select {
	background-color: #79C2DEFF;
}

.button.button-green-color {
	background-color: #3AAA35FF;
}

.button.button-yellow-color {
	background-color: #FDCC04FF;
}

.button.button-default-color {
	background-color: #87B8CCFF;
}

.button.button-light-default-color {
	background-color: rgba(165,227,251,255);
}

.button.button-purple-color {
	background-color: #AF08CAFF;
}

.img-button.button-tab-color {
	image-color: #54879BFF;
}

.img-button.button-tab-color.select {
	image-color: #79C2DEFF;
}

.img-button.button-green-color {
	image-color: #3AAA35FF;
}

.img-button.button-yellow-color {
	image-color: #FDCC04FF;
}

.img-button.button-default-color {
	image-color: #87B8CCFF;
}

.img-button.button-light-default-color {
	image-color: rgba(165,227,251,255);
}

.img-button.button-purple-color {
	image-color: #AF08CAFF;
}

/*-------------------------------------------------------------------------------------------*/
/*------------------------              Button Style              ---------------------------*/

@spritesheet button-sprites {
    src: game/gui_box_upwhite.rttex;
    resolution: 1x;
    button-bg: 0px 0px 29px 29px;
    button-bg-inner: 15px 15px 2px 2px;
}

.img-button {
    decorator: ninepatch(button-bg, button-bg-inner);
	display: inline-block;
    padding: 3dp 15dp 5dp 10dp; /* padding-top, padding-right, padding-bottom, padding-left */
	text-align: center;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
	sound-on-click: true;
}

.button {
	display: inline-block;
	padding: 10dp;
	border-radius: 6dp;
	text-align: center;
	vertical-align: middle;
	justify-content: center;
	box-shadow: #000f 2dp 2dp 2dp 0px;
	sound-on-click: true;
}

	.button:active, .img-button:active {
		filter: brightness(0.85);
		transform: scale(0.95);
	}

.button.disabled, .img-button.disabled {
    filter: grayscale(1) opacity(0.7) brightness(0.85);
	sound-on-click: false;
}

.button.disabled:active, .img-button.disabled:active {
    filter: brightness(0.85) opacity(0.7) grayscale(1);
    transform: scale(1);
	pointer-events: none;
}

	.button .label, .img-button .label {
		display: inline-block;
		color: #fff;
		font-family: Century Gothic;
		font-size: 30dp;
		text-align: center;
		white-space: nowrap;
		width: auto;
		font-effect: shadow(1dp 1dp #000);
	}

	.button .button-icon , .img-button .button-icon{
		vertical-align: middle;
		margin-right: 12dp;
		width: 32dp;
		height: 32dp;
	}

.label {
	line-height: 0.78em;
	margin-top: 0.2em;
	margin-bottom: 0.28em;
}

/*-------------------------------------------------------------------------------------------*/
/*------------------------              Text Color                ---------------------------*/

.color_orange_text {
	color: #F5CB5C; /**rgb(245, 203, 92)*/
}

/* Default text color (used for Body Text) - Old Format: `o */
.color_dreamsicle {
	color: rgb(252, 230, 186);
}

/* used for Highlighting not important information like doesn't drop seeds in item info - Old Format: `1 */
.color_light_cyan {
	color: rgb(173,244,255);
}

/* used for positive value - Old Format: `2 */
.color_green {
	color: rgb(73, 252, 0);
}

/* Old Format: `3 */
.color_light_blue {
	color: rgb(191, 218, 255);
}

/* used for negative value - Old Format: `4 */
.color_crazy_red {
	color: rgb(255, 39, 29);
}

/* used for Highlighting important information so its the most common one used -  Old Format: `5 */
.color_pinky_purple {
	color: rgb(235, 183, 255);
}

/* used for error text - Old Format: `6 */
.color_brown {
	color: rgb(255, 202, 111);
}

/* Old Format: `7 */
.color_light_gray {
	color: rgb(230, 230, 230);
}

/* Old Format: `8 */
.color_crazy_orange {
	color: rgb(255, 148, 69);
}

/* Old Format: `9 */
.color_yellow {
	color: rgb(255, 238, 125);
}

/* Old Format: `! */
.color_bright_cyan {
	color: rgb(209, 255, 249);
}

/* Old Format: `@ */
.color_bright_red_pink {
	color: rgb(255, 205, 201);
}

/* Old Format: `# */
.color_bright_purple {
	color: rgb(255, 143, 243);
}

/* Old Format: `$ */
.color_pale_yellow {
	color: rgb(255, 252, 197);
}

/* Old Format: `^ */
.color_light_green {
	color: rgb(181, 255, 151);
}

/* Old Format: `& */
.color_very_pale_pink {
	color: rgb(254, 235, 255);
}

/* used for All Headings and only old school highlighted info so not used anymore - Old Format: `0 or `w */
.color_white {
	color: rgb(255, 255, 255);
}

/* Old Format: `b */
.color_black {
	color: rgb(0, 0, 0);
}

/* Old Format: `p */
.color_pink {
	color: rgb(255, 223, 241);
}

/* Old Format: `q */
.color_dark_blue {
	color: rgb(12, 96, 164);
}

/* Old Format: `e */
.color_medium_blue {
	color: rgb(25, 185, 255);
}

/* Old Format: `r */
.color_pale_green {
	color: rgb(111, 211, 87);
}

/* Old Format: `t */
.color_medium_green {
	color: rgb(47, 131, 13);
}

/* Old Format: `a */
.color_dark_grey {
	color: rgb(81, 81, 81);
}

/* used for Disabled text - Old Format: `s */
.color_med_grey {
	color: rgb(158, 158, 158);
}

/* Old Format: `c */
.color_vibrant_cyan {
	color: rgb(80, 255, 255);
}

/* NOT USED AT ALL */
.color_bright_yellow {
	color: rgb(55, 225, 25);
}


/*---------------------     Grow Emoji      --------------*/

.grow_emoji {
	color: rgb(255, 255, 255);
	font-family: grow_emoji;
	margin: 1dp;
}

/*---------------------     Basic Animations      --------------*/

@keyframes fade-in-out {
	from {
		opacity: 0;
		visibility: visible;
	}

	50% {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes fade-out-in {
	from {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fade-out {
	from {
		opacity: 1;
	}


	to {
		opacity: 0;
	}
}

/*-------------------------------------------------------------------------------*/


.show-scrollbar scrollbarvertical {
	width: 10dp;
	z-index: 1;
	margin-right: 2dp;
	margin-left: -12dp;
}

.show-scrollbar slidertrack {
	border-radius: 5dp;

}

.show-scrollbar sliderbar {
	background-color: #87B8CC66;
	border-radius: 5dp;
}

.show-scrollbar sliderarrowdec {
	display: none;
}

.show-scrollbar sliderarrowinc {
	display: none;
}

/*------------------------              Input Style              ---------------------------*/

.input {
	display: block;
	vertical-align: middle;
	decorator: tiled-box( window_border_sprite_tl, window_border_sprite_t, window_border_sprite_tr, window_border_sprite_cl, window_border_sprite_c, window_border_sprite_cr, window_border_sprite_bl, window_border_sprite_b, window_border_sprite_br );
    image-color: rgba(135, 184, 204, 255);
    border-radius: 7dp;
	padding: 8dp 12dp 12dp 10dp;
	margin: 2dp 0 2dp 0;
	min-width: 100dp;
    font-size: 24dp;
    font-weight: bold;
    line-height: 30dp;
	width: 50%;
	color: #fff;
}
/*----------- LOADER ANIMATION ------------*/
.loader.hidden {
    display: none;
}

.loader {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.loader div {
  width: 2%;
  height: 20%;
  background: rgb(255,255,255);
  position: absolute;
  left: 50%;
  top: 30%;
  opacity: 0;
  border-radius: 50px;
  border: 1dp white;
}

@keyframes loaderfade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.25;
  }
}

.loader .bar1 {
  transform: rotate(0deg) translate(0, -130%);
  animation: 1.1s linear infinite loaderfade;
}

.loader .bar2 {
  transform: rotate(30deg) translate(0, -130%);
  animation: 1.1s 0.1s linear infinite loaderfade;
}

.loader .bar3 {
  transform: rotate(60deg) translate(0, -130%);
  animation: 1.1s 0.2s linear infinite loaderfade;
}

.loader .bar4 {
  transform: rotate(90deg) translate(0, -130%);
  animation: 1.1s 0.3s linear infinite loaderfade;
}

.loader .bar5 {
  transform: rotate(120deg) translate(0, -130%);
  animation: 1.1s 0.4s linear infinite loaderfade;
}

.loader .bar6 {
  transform: rotate(150deg) translate(0, -130%);
  animation: 1.1s 0.5s linear infinite loaderfade;
}

.loader .bar7 {
  transform: rotate(180deg) translate(0, -130%);
  animation: 1.1s 0.6s linear infinite loaderfade;
}

.loader .bar8 {
  transform: rotate(210deg) translate(0, -130%);
  animation: 1.1s 0.7s linear infinite loaderfade;
}

.loader .bar9 {
  transform: rotate(240deg) translate(0, -130%);
  animation: 1.1s 0.8s linear infinite loaderfade;
}

.loader .bar10 {
  transform: rotate(270deg) translate(0, -130%);
  animation: 1.1s 0.9s linear infinite loaderfade;
}

.loader .bar11 {
  transform: rotate(300deg) translate(0, -130%);
  animation: 1.1s 1s linear infinite loaderfade;
}

.loader .bar12 {
  transform: rotate(330deg) translate(0, -130%);
  animation: 1.1s 1.1s linear infinite loaderfade;
}
/* -------- SELECT --------*/

select selectarrow {
    decorator: image(interface/large/gui_auction_dropdown_arrow.rttex);
    width: 40dp;
    height: 100%;
	box-shadow: #000 0 2dp 2dp 0dp;
}

select:active selectarrow,
select selectarrow:checked {
    transform: rotate(180deg);
	box-shadow: #000 0 -2dp 2dp 0dp;
}

selectbox {
	border: 4dp rgba(135, 184, 204, 255);
    background-color: rgb(80, 157, 188);
    border-radius: 5dp;
    margin-top: -5dp;
    margin-right: 48dp;
    padding: 3dp;
}

select {
    display: block;
	vertical-align: middle;
    width: 410dp;
    height: 40dp;
    margin: 0 0dp 0 5dp;
	border: 4dp rgba(135, 184, 204, 255);
    background-color: rgba(135, 184, 204, 150);
    border-radius: 5dp;
	padding: 3dp 2dp 3dp 7dp;
    font-size: 20dp;
    font-weight: bold;
    line-height: 30dp;
	color: #fff;
    font-effect: shadow(1dp 1dp #000);
	box-shadow: #000 1dp 1dp 2dp 1dp inset, #000 1dp 1dp 2dp 1dp;
	sound-on-click: true;
}

select.disabled {
	sound-on-click: false;
}

option {
	padding: 5dp;
    white-space: nowrap;
    font-effect: shadow(1dp 1dp #000);
}

option.selected {
    background-color: rgb(135, 184, 204);
}
truncatingstring {
	display: block;
}
.link
{
text-decoration: underline;
}