html {
	touch-action: manipulation;
  	-webkit-touch-callout: manipulation; /* iOS Safari */
    -webkit-user-select: manipulation; /* Safari */
     -khtml-user-select: manipulation; /* Konqueror HTML */
       -moz-user-select: manipulation; /* Firefox */
        -ms-user-select: manipulation; /* Internet Explorer/Edge */
            user-select: manipulation; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
body {
	background: #EDF2F4;
	color: #2B2D42;
	font-family: Helvetica;
	position: relative;
	overflow: hidden;
	font-size: 21px;
}

section {
	background: #8D99AE;
	color: #EDF2F4;
}

a:hover {
	color: #EF233C;
}

.button, .move-control > div, .game-icon, .enemy-model, .select-enemy, .select-player, ul.menu > li, .answer, .dialog {
	touch-action: manipulation;
  	-webkit-touch-callout: manipulation; /* iOS Safari */
    -webkit-user-select: manipulation; /* Safari */
     -khtml-user-select: manipulation; /* Konqueror HTML */
       -moz-user-select: manipulation; /* Firefox */
        -ms-user-select: manipulation; /* Internet Explorer/Edge */
            user-select: manipulation; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.app {
	width: 100vw;
	height: 100vh;
}

.red {
	background: #D90429;
}
.map-canvas {
	position: absolute;
	/*height: 100%;
	width: 100%;*/
}


.ui-list-enemies-item {
	position: relative;
	bottom: 100px;
	text-align: center;
}
.active-ui-battle .map:after {
	background: rgba(66, 64, 62, 0.56);
	content: " ";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 2;
}
.enemy-model {
	display: inline-block;
	width: 100px;
	height: 100px;
}
.ui-targets {
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	left: 10px;
	top: 8px;
	z-index: 10;
}
.ui-left, .ui-right {
	flex: 1;
	position: relative;
	margin-bottom: 30px;
}
.ui-left {
	margin-right: 20px;
}
.ui-character-bag {
	font-size: 12px;
	flex-wrap: wrap;
	max-width: 70%;
	/*max-height: 300px;
	overflow-y: auto;*/

	border: 1px solid #cecece;
	padding: 5px;
	border-radius: 2px;
}
.character {
	background: rgb(0, 185, 0);
	color: #fff;
	border-radius: 4px;
	list-style: none;
	margin: 5px;
	padding: 5px 10px;
	min-width: 100px;
}
.target {
	background: rgb(185, 0, 0);
	color: #fff;
	border-radius: 4px;
	list-style: none;
	margin: 5px;
	padding: 5px 10px;
	min-width: 100px;
}
.select-enemy {
	background: rgb(185, 0, 0);
	color: #fff;
	border-radius: 4px;
	list-style: none;
	margin: 5px;
	padding: 5px 8px;
	min-width: 50px;
	font-size: 80%;
	cursor: pointer;
	border-left: 9px solid red;
	text-align: left;
}
.select-enemy.is_active {
	border-left: 9px solid rgb(229, 221, 124);
}
.select-player {
	background: rgb(0, 185, 6);
    color: #fff;
    border-radius: 4px;
    list-style: none;
    margin: 5px;
    padding: 5px 8px;
    min-width: 50px;
    font-size: 80%;
    cursor: pointer;
    border-left: 9px solid green;
    text-align: left;
}
.select-player.is_active {
	border-left: 9px solid rgb(229, 221, 124);
}
.select-item {
	background: rgba(104, 104, 104, 1);
	color: #444;
	border-radius: 4px;
	list-style: none;
	margin: 5px;
	padding: 5px 10px;
	min-width: 100px;
	border: 1px solid #cecece;
	text-shadow: 1px 0px 1px black;
	animation: gotItem 1s linear;
}

.click-ability {
	background: rgba(178, 149, 109, 1);
	color: #f7f7f7;
	border-radius: 4px;
	margin: 5px;
	padding: 5px 10px;
	text-shadow: 1px 0px 1px black;
	animation: gotItem 1s linear;
}
.click-ability ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.click-ability.damage {
	background: rgba(178, 149, 109, 1);
}
.click-ability.heal {
	background: rgba(113, 178, 96, 1);
}
.combat-log {
	height: 150px;
	overflow-x: auto;
	border: 1px solid #cecece;
	padding: 5px;
	border-radius: 2px;
	max-width: 600px;
	font-size: 10px;
}

.game-icon {
	width: 64px;
	height: 64px;
	display: inline-block;
	border: 1px solid #333;
	border-radius: 3px;
	background: url(assets/images/default.png) center center/cover;
	transition: all .1s linear;
	cursor: pointer;
	position: relative;
	margin: 2px;
	font-size: 70%;
	color: #fff;
	background-color: #393637 !important;
	word-wrap: anywhere;
}
.ui-main-bag .game-icon {
	width: 62px;
	height: 62px;
	display: inline-block;
	border: 1px solid #333;
	border-radius: 3px;
	background: url(assets/images/default.png) center center/cover;
	transition: all .1s linear;
	cursor: pointer;
	position: relative;
	margin: 2px;
	font-size: 60%;
	color: #fff;
	background-color: #393637 !important;
}

.game-icon.game-icon-small {
	width: 26px;
	height: 26px;
}

.game-icon .bind {
	text-shadow: 1px 1px 1px #000000;
	position: absolute;
	top: 2px;
	right: 5px;
}
.game-icon .label {
	text-shadow: 1px 1px 1px #000000;
	position: absolute;
	bottom: 2px;
	right: 5px;
}
.game-icon .level {
	text-shadow: 1px 1px 1px #000000;
	position: absolute;
	bottom: 2px;
	left: 5px;
}

.game-icon .price {
	text-shadow: 1px 1px 1px #000000;
	position: absolute;
	bottom: -15px;
	left: 0;
}

.game-icon .name {
	text-shadow: 1px 1px 1px #000000;
	position: absolute;
	top: 2px;
	left: 5px;
}
.game-icon .cooldown {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 10;
	display: inline-block;
	text-align: center;
	font-size: 30px;
	color: #fff;
	text-shadow: 1px 1px 2px #000;
	line-height: 2em;
	background: rgba(255, 46, 5, 0.23);
	left: 0;
	//background: url(assets/images/default.png) center center/cover;
}
.game-icon.game-icon-small .cooldown { 
	font-size: 12px;
	background: transparent;
}
.game-icon:hover {
	border: 1px solid #9f55fc;
	box-shadow: 0 0 3px 1px #fcf4b9 inset;
}
.ui-list-enemies-item .debuffs-box {
	margin-bottom: -34px;
	position: absolute;
}

.tooltip {
	z-index: 99;
	display: block;
	position: absolute;
	top: 20px;
	right: 20px;
	background: rgba(54, 54, 54, .8);
	padding: 5px 10px;
	border: 1px solid #cecece;
	border-radius: 4px;
	min-width: 100px;
	text-shadow: 1px 0px 1px black;
	color: #fff;
	max-width: 80%;
}
.tooltip ul {
	list-style: none;
	margin: 5px;
}

@keyframes gotItem {
	0% {
		box-shadow: 0px 0px 4px 4px yellow;
		background: rgb(177, 177, 0);
	},
	100% {
		box-shadow: 0px 0px 0px 0px yellow;
		background: rgba(104, 104, 104, 1);
	}
}

@keyframes cantEquipItem {
	0% {
		color: red;
	},
}
@keyframes cantUseAction {
	0% {
		color: red;
		background: rgba(200, 0, 0, .4);
	},
}
.cant_equip, .cant_use {
	animation: cantEquipItem 1s linear;	
}
.cant_use_action {
	animation: cantUseAction 1s linear;	
}
.equipped {
	border: 1px solid #326d99;
}

.target-box {
	display: flex;
	align-items: center;
	text-align: center;
	position: relative;
}
.target-box.union {
}
.avatar {
	display: inline-block;
	width: 64px;
	height: 64px;
	background: url(assets/images/enemy.png) center center/cover;
	border-radius: 50%;
	border: 2px solid #b0b0b0;
	vertical-align: middle;
	margin-right: 5px;
	position: relative;
	z-index: 10;
	background-color: #404040 !important;
}
.target-box .level {
	font-size: 13px;
	line-height: 1.5em;
	color: #fff;
	text-shadow: 1px 1px 0px #000;
	position: absolute;
	bottom: -2px;
	right: 43px;
	width: 18px;
	height: 18px;
	background: rgb(86, 84, 86);
	border-radius: 50%;
	border: 1px solid #d4cf12;
}
.hp-bar {
	position: relative;
	width: 130px;
	display: block;
}
.hp-left {
	background: red;
	position: absolute;
	left: -16px;
	top: 1px;
	height: 18px;
	width: 100%;
	border-radius: 4px;
	padding-left: 14px;
	z-index: 2
}
.union .hp-left {
	background: green;
}
.hp-left-border {
	background: rgba(134, 134, 134, 0.9);
	position: absolute;
	left: -18px;
	top: 0;
	height: 18px;
	width: 100%;
	border-radius: 4px;
	padding-left: 14px;
	border: 1px solid #606060;
	z-index: 1
}
.hp-text {
	position: relative;
	z-index: 3;
	color: #fff;
	text-shadow: 1px 1px #000;
	font-size: 14px;
	display: block;
}

.mp-bar {
	position: relative;
	width: 110px;
	display: block;
}
.mp-left {
	background: red;
	position: absolute;
	left: -16px;
	top: 4px;
	height: 13px;
	width: 100%;
	border-radius: 4px;
	padding-left: 14px;
	z-index: 2;
}
.union .mp-left {
	background: lightblue;
}
.mp-left-border {
	background: rgba(134, 134, 134, 0.9);
	position: absolute;
	left: -18px;
	top: 3px;
	height: 13px;
	width: 100%;
	border-radius: 4px;
	padding-left: 14px;
	border: 1px solid #606060;
	z-index: 1;
}
.mp-text {
	position: relative;
	z-index: 3;
	color: #fff;
	text-shadow: 1px 1px #000;
	font-size: 14px;
	display: block;
}

.view-map-row .service {
	
}
.view-map-row .layer1, .view-map-row .layer2 {
	border: none;
}

.view-map-row .layer-event:hover .layer-event-details {
	display: block;
	position: absolute;
}
.view-map-row .layer-event .layer-event-details {
	display: none;
	background: rgba(54, 54, 54, .8);
	color: #fff;
	border-radius: 4px;
	list-style: none;
	margin: 5px;
	padding: 5px 10px;
	min-width: 100px;
	border: 1px solid #cecece;
	text-shadow: 1px 0px 1px black;
	z-index: 999;
	left: 12px;
}

.hp-changes {
	transition: all 2s;
	list-style: none;
	position: absolute;
	left: -10%;
	z-index: 99;
	text-shadow: 2px 2px 3px #000;
	top: -9%;
}
.hp-changes li {
	animation: enemyDamageHealTick 4s ease-in-out;
	position: absolute;
	top: 0;
	margin-left: 20px;
	display: block;
	opacity: 0;
	font-size: 30px;
	margin-top: 160px;
	text-align: center;
}
.hp-changes.hp-changes-up li {
	animation: enemyDamageHealTickUp 2s ease-in-out;
	margin-top: 80px;
}

@keyframes enemyDamageHealTick {
	from {
		opacity: 0;
		font-size: 30px;
		margin-top: -20px;
	}
	20% {
		opacity: 1;
		font-size: 40px;
		margin-left: 40px;
	}
	40% {
		margin-left: 0px;
	}
	80% {
		opacity: 1;
		font-size: 30px;
		margin-left: 30px;
	}
	to {
		opacity: 0;
	}
}
@keyframes enemyDamageHealTickUp {
	from {
		opacity: 0;
		font-size: 20px;
		margin-top: 10px;
	}
	20% {
		opacity: 1;
		font-size: 25px;
	}
	40% {
		margin-left: 0px;
	}
	80% {
		opacity: 1;
		font-size: 20px;
	}
	to {
		opacity: 0;
	}
}
.hp-changes .damage {
	color: rgb(255, 105, 51);
}
.hp-changes .healing {
	color: rgb(117, 239, 114);
}

.view-map-row {
	font-size: 0;
	display: flex;
}
.view-map-row .tile {
	position: relative;
	//width: 16px;
	//height: 16px;
	width: 48px;
	height: 48px;
	display: inline-block;
	//border-right: 1px solid #cecece;
	font-size: 5px;
	//border-bottom: 1px solid #cecece;
	zoom: 1;
}
.view-map-row .tile .tile-layers-info {
	display: none;
	position: absolute;
	background: #f7f;
	padding: 1px;
	left: -2px;
	top: -2px;
}
.view-map-row .tile:hover .tile-layers-info {
	display: block;
}
.view-map-row .tile .tile-layers-info span {
	border: 1px solid #cecece;
	min-height: 16px;
	min-width: 16px;
}
.view-map-row .tile .tile-layers-info span.active {
	border: 1px solid #ff0;
}
.view-map-row .tile > span.service {
	display: none;
}
.view-map-row .tile > span, .view-map-row .tile > canvas {
	position: absolute;
	left: 0;
	top: 0;
}
.view-map-row .tile span {
	display: inline-block;
}

.view-map-tile-action {
	display: inline-block;
	background: #ccc;
	border: 1px solid #444;
	padding: 2px;
	border-radius: 2px;
	//margin-right: 10px;
	margin-bottom: 10px;
	cursor: pointer;
	text-align: center;
}

.view-map-tile-action .tile {
	display: inline-block;
}
.view-map-tile-action span {
	width: 64px;
	height: 64px;
	display: inline-block;
}


.character-stats, .note-window {
	left: 50%;
	top: 5%;
	z-index: 99;
	transform: translateX(-50%);
	position: absolute;
}
.button {
	cursor: pointer;
	padding: 3px;
	display: inline-block;
	border: 1px solid #e4e4e4;
	border-radius: 2px;
	margin: 5px 0;
	background: #cecece;
}
.character-stats ul {
	border-left: 1px solid #c4c4c4;
	border-radius: 2px;
	padding: 6px 20px 10px;
	list-style: none;
	text-align: left;
}
.target-box .name {
	text-shadow: 1px 1px 1px #000;
	color: #fff;
}
.layer-event {
	width: 16px;
	height: 16px;
	background-position: center center;
	background-size: contain !important;
	background-repeat: no-repeat;
}


.view-map-tile-actions {
	display: flex;
	flex-direction: column;
	margin: 10px;
}

.dialog .text {
	vertical-align: middle;
	font-size: 120%;
	display: inline-block;
}
.dialog .answer {
	cursor: pointer;
	margin: 5px 0;
}
.dialog .answer:hover {
	color: #fff;
}

.bag, .seller {
	padding: 10px;
	border: 1px solid wheat;
	margin: 10px;
	max-width: 290px;
	overflow: auto;
	max-height: 260px;
	background: rgba(54, 54, 54, .8);
}
.bag .game-icon, .seller .game-icon {
	margin-bottom: 12px;
}


.ui-dialog div {
	max-width: 80vw;
	overflow-y: auto;
}
.ui-dialog .button {
	background: transparent;
	border: none;
}
.font-size-control {
	position: absolute;
	right: 10%;
	top: 10%;
}

.menu {
	list-style: none;
	text-align: center;
	padding: 0;
	margin: 0;
}
.menu li {
	cursor: pointer;
	padding: 5px 10px;
	font-size: 22px;
}
.menu li:hover {
	color: #fff;
}

.move-control {
	position: relative;
	width: 270px;
	height: 150px;
}
.move-control > div {
	cursor: pointer;
	border: 1px solid #cecece;
	padding: 25px 10px;
	text-align: center;
	color: #fff;
	text-shadow: 0 1px 1px #000;
	background: rgba(100, 100, 100, .5);
	width: 90px;
	box-sizing: border-box;
}
.move-up {
	position: absolute;
	left: 33%;
	top: 0;
}
.move-down {
	position: absolute;
	left: 33%;
	bottom: 0;
}
.move-left {
	position: absolute;
	left: 0;
	top: 26%;
}
.move-right {
	position: absolute;
	right: 0;
	top: 26%;
}

.hero-box {
	display: flex;
	border: 1px solid #cecece;
	padding: 0 10px;
	text-align: center;
	color: #fff;
	text-shadow: 0 1px 1px #000;
	background: rgba(26, 26, 26, 0.85);
	box-sizing: border-box;
}
.hero-gear {
	width: 230px;
}
.hero-gear div {
	padding: 0;
}
.hero-gear .game-icon {
	zoom: 0.9;
}
.character-stats .button {
	position: absolute;
	top: 5px;
	right: 10px;
}
.hero-head, .hero-weapon {
	display: block;
	text-align: center;
}

/** placeholders for hero **/
.hero-head .game-icon {
	background: url(assets/images/helm.png) center center/cover;
}
.hero-neck .game-icon {
	background: url(assets/images/neck.png) center center/cover;
}
.hero-shoulder .game-icon {
	background: url(assets/images/shoulder.png) center center/cover;
}
.hero-cloak .game-icon {
	background: url(assets/images/cloak.png) center center/cover;
}
.hero-chest .game-icon {
	background: url(assets/images/chest.png) center center/cover;
}
.hero-hands .game-icon {
	background: url(assets/images/hands.png) center center/cover;
}
.hero-ring1 .game-icon {
	background: url(assets/images/ring.png) center center/cover;
}
.hero-ring2 .game-icon {
	background: url(assets/images/ring.png) center center/cover;
}
.hero-legs .game-icon {
	background: url(assets/images/legs.png) center center/cover;
}
.hero-boots .game-icon {
	background: url(assets/images/boots.png) center center/cover;
}
.hero-weapon .game-icon {
	background: url(assets/images/sword.png) center center/cover;
}


.game-buttons .button {
	margin: 5px;
	background: rgba(26, 26, 26, 0.6);
	color: wheat;
	border: 2px solid wheat;
}
.game-buttons .button:hover {
	color: #fff;
}

.dialog {
	border-bottom: 5px solid wheat;
	padding-bottom: 15px;
}
.dialog-head {
	border-bottom: 5px solid wheat;
	padding-right: 34px;
	margin-bottom: 20px;
}
.dialog .unit {
	width: 95px;
	height: 95px;
	display: inline-block;
	top: 35px;
	vertical-align: middle;
	border-top: 5px solid wheat;
	margin-right: 20px;
	border-radius: 3px 3px 0 0;
	border-bottom: none;
}


.note-window .note-box {
    border: 1px solid #cecece;
    padding: 10px 10px 40px 10px;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 1px #000;
    background: rgba(54, 54, 54, .8);
    box-sizing: border-box;
    border-radius: 3px;
}
.note-window .button {
    position: absolute;
    top: 5px;
    right: 10px;
}