html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 11px;
	background-color: #FFF;
	height: 100%;
	margin: 0;
	padding: 0;
}

a {
	text-decoration:none; 
	color: #000000;
}

a img {
	border: 0px;
}

span.b {
	font-weight: bold;
}

img.tooltip {
	vertical-align: text-bottom;
}

#header {
	padding: 0px 10px;
	background-color: black;
	color: white;
	font-size: 24px;
	line-height: 35px;
	vertical-align: center;
	position: relative;
	margin-bottom: 5px;
}
#title a {
	font-decoration: none;
	color: white;
}

#version {
	font-size: 16px;
}

#creator {
	position: absolute;
	top: 0px;
	right: 10px;
}

button {
	padding: 4px 7px;
	vertical-align: center;
}

#buttons_zone {
	text-align: center;
	padding: 10px 0;
}

#ultra_bonus {
	display: inline-block;
	vertical-align: top;
	text-align: left;
}

.select2-container--default .select2-selection--single:hover {
	border-color: black;
}

#co {
	min-width: 200px;
}

div#attacker_zone {
	display: inline-block;
	width: 45%;
	margin-right: 10px;
	vertical-align: top;
}

div#defender_zone {
	display: inline-block;
	width: 45%;
	margin-left: 10px;
	vertical-align: top;
}

ul#attacker_units, ul#defender_units {
	padding-left: 20px;
}

li.unit {
	background-color: white;
	background: linear-gradient(-133deg,#E0E0E0 0,#F0F0F0 45%,#FFFFFF 100%);
	list-style: none;
	width: 400px;
	border: solid 1px #0c0c0c;
	border-radius: 15px;
	padding: 5px;
	position: relative;
	margin: 1px 0px;
}

.dragged {
	background-color: #c0c0c0;
	opacity: 0.3;
	border: 1px solid black;
	list-style: none;
	width: 400px;
	height: 100px;
	border-style: dashed;
}

li.unit div.unit_close {
	margin: -5px -5px 0 0;
	border-radius: 0 15px 0 0;
	background-image: url('../images/close.gif');
	background-color: #FF8000;
	float: right;
	top: 0px;
	right: 0px;
	width: 47px;
	height: 22px;
	cursor: pointer;
}
li.unit div.unit_close:hover {
	background-color: #FFC993;
}

li.unit div.unit_info {
	margin-bottom: 3px;
}

li.unit div.unit_groupname {
	font-weight: bold;
	margin-bottom: 5px;
}

li.unit div.unit_name {
	font-weight: bold;
	margin-bottom: 3px;
	cursor: move;
}

li.unit span.lbl_u {
	padding-right: 5px;
}

li.unit div.unit_s {
	display: inline-block;
	padding-right: 3px;
	clear: left;
}
li.unit div.unit_h {
	display: inline-block;
	padding-left: 5px;
	clear: right;
}
li.unit div.unit_h::before {
	content: "| ";
}
div.unit_bonuses {
	clear: both;
}
li.unit div.unit_bonuses div {
	padding-right: 5px;
	display: inline-block;
}
li.unit span.lbl_s, li.unit span.lbl_h {
	padding-right: 4px; 
}
li.unit input.txt_u, li.unit input.txt_st, li.unit input.txt_he {
	width: 55px; 
}

input.txt30 {
	width: 30px;
}

div#results_zone {
		width: 100%;
		padding: 5px;
}
div#first_zone, div#nofirst_zone {
	width: 45%;
	display: inline-block;
	vertical-align: top;
}

div.results_title {
	font-size: 15px;
	text-align: center;
	color: white;
	font-weight: bold;
	background-color: #c0c0c0;;
	margin-bottom: 10px;
}
div.results_title_col0 {
	background-color: green;
}
div.results_title_col1 {
	background-color: orange;
}
div.results_title_col2 {
	background-color: red;
}

div.deb {
	font-size: 9px;
	color: #969696;
}

div.attack {
	width: 100%;
	margin-bottom: 10px;
	position: relative;
}

div.attack div.num_ataque {
	text-align: left;
	display: inline-block;
	height: 100%;
	padding: 5px 0;
	margin-right: 3px;
	min-width: 25px;
}

div.atti.all_death {
	background-color: rgba(255,0,0,0.26);
	background-image: url('../images/ko.png');
	background-position: center center;
	background-repeat: no-repeat;
}
div.atti.some_death { background-color: rgba(171,149,0,0.26); }

div.attack div.atti {
	display: inline-block;
	width: 150px;
	line-height: 3em;
	heigth: 100px;
	border: 1px solid #c0c0c0;
	padding: 5px;
	vertical-align: middle;
}
div.attack div.direction {
	display: inline-block;
	font-size: 44px;
	padding: 0px 0 10px 0;
	vertical-align:middle;
	height: 100%;
}
div.attack div.info {
	display: inline-block;
	height: 100%;
	margin-left: 5px;
}
div.attack .muertos {
	font-weight: bold;
	color: red;
	text-align: right;
}
div.attack .num {
	position: relative;
}
div.attack .muertos {
	float: right;
}
div.turn_separator {
	background-color: #c0c0c0;
	font-weight: bold;
	font-size: +1;
	padding: 5px;
	margin: 5px 0;
}
div.summary_separator {
	background-color: black;
	color: #c0c0c0;
	font-weight: bold;
	font-size: +1;
	padding: 5px;
	margin: 5px 0;
}

.alertify-notifier .ajs-warning, .alertify-notifier .ajs-success{
	font-weight: bold;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.alertify-notifier .ajs-error {
	font-weight: bold;
	color: white;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
#share {
	display: none;
}
#share_text {
	width: 95%;
	margin: 0 auto;
	height: 100px;
}

.flash {
	-moz-animation: flash 1s ease-out;
	-moz-animation-iteration-count: 1;

	-webkit-animation: flash 1s ease-out;
	-webkit-animation-iteration-count: 1;

	-ms-animation: flash 1s ease-out;
	-ms-animation-iteration-count: 1;
}

@keyframes flash {
	0% { background-color: transparent; }
	25% { background-color: #fbf8b2; }
	50% { background-color: transparent; }
	75% { background-color: #fbf8b2; }
	100% { background-color: transparent; }
}
@-webkit-keyframes flash {
	0% { background-color: transparent; }
	25% { background-color: #fbf8b2; }
	50% { background-color: transparent; }
	75% { background-color: #fbf8b2; }
	100% { background-color: transparent; }
}
@-moz-keyframes flash {
	0% { background-color: transparent; }
	25% { background-color: #fbf8b2; }
	50% { background-color: transparent; }
	75% { background-color: #fbf8b2; }
	100% { background-color: transparent; }
}
@-ms-keyframes flash  {
	0% { background-color: transparent; }
	25% { background-color: #fbf8b2; }
	50% { background-color: transparent; }
	75% { background-color: #fbf8b2; }
	100% { background-color: transparent; }
}