.hidden {
	display:none;
}

@keyframes fadetop {
  from {
    opacity:1;
	bottom:0;
  }
  to {
    opacity:0;
	bottom:20px;
  }
}

@keyframes fade {
  100% {
	background-color:lightgrey;
	color:black;
  }
}


#map {
	display:table;
	border-spacing:1px;
	width:800px;
}

#map .y {
	display:table-row;
}

#map .y .x {
	display:table-cell;
	width:8.3333%;
	padding-top:8.3333%;
	position:relative;
}

#map .y .x[onclick] {
	cursor:pointer;
}

#map .y .x > div {
	position:absolute;
	top:0;
	left:0;
	box-sizing: border-box;
}


#map .y .x .ground {
	width:100%;
	height:100%;
}

#map .y .x .ground.sea {
	background-color:lightblue;
}

#map .y .x .ground.grass {
	background-color:green;
}

#map .y .x .ground.coast {
	background-color:yellow;
}

#map .y .x .ship {
	width:100%;
	height:100%;
	padding:3px;
}

#map .y .x .ship .img {
	width:100%;
	height:100%;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}

#map .y .x .ship.selected {
	border:3px solid blue;
	padding:0;
}

#map .y .x .city {
	width:80%;
	height:80%;
	border-radius:50%;
	margin:10%;
	background-color:red;
}

#map .y .x .city .city_content {
	margin: 0.5%;
    background-color: lightgrey;
    padding: 20px;
    box-sizing: border-box;
    min-width: 500px;
    z-index: 999;
    position: absolute;
    top: 50%;
    left: 50%;
}	

#map .y .x .city .city_content .products {
	width:100%;
	border-spacing: 0 2px;
}

#map .y .x .city .city_content .products th,
#map .y .x .city .city_content .products .product td {
	border:1px solid #767676;
	padding:5px;
	line-height:20px;
}

#map .y .x .city .city_content .products .product.empty {
	color:grey;
	background-color:darkgrey;
}

#map .y .x .city .city_content .products .product.empty td {
	border-color:#878787;
}

#map .y .x .city .city_content .products .product .quantity {
	position:relative;
}

#map .y .x .city .city_content .products .product .quantity::before {
	content:"";
	display:block;
	width:20px;
	height:20px;
	position:absolute;
	right:5px;
	top:5px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	opacity:0.5;
}	

#map .y .x .city .city_content .products .product.empty .quantity::before {
	display:none;
}


#map .y .x .city .city_content .products .product .quantity.positive,
#map .y .x .city .city_content .products .product .quantity.negative {
	animation-duration: 2s;
	animation-name: fade;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

#map .y .x .city .city_content .products .product .quantity.positive {
	background-color:#c9ffb8;
	color:green;
}

#map .y .x .city .city_content .products .product .quantity.negative {
	background-color:#ffb8b8;
	color:red;
}


#map .y .x .city .city_content .products .product .quantity.was_equal::before {
	background-image:url('/images/equal.png');
	background-size:80%;
}

#map .y .x .city .city_content .products .product .quantity.was_positive::before {
	background-image:url('/images/arrow_top_green.png');
}

#map .y .x .city .city_content .products .product .quantity.was_negative::before {
	background-image:url('/images/arrow_bottom_red.png');
}

#map .y .x .city .city_content .products .product .quantity .quantity_update {
  animation-duration: 2s;
  animation-name: fadetop;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  position:relative;
  font-weight:bold;
}

#map .y .x .city .city_content .products .product .quantity .quantity_update.equal {
	display:none;
}

#map .y .x .city .city_content .products .product .quantity .quantity_update.positive {
	color:green;
}

#map .y .x .city .city_content .products .product .quantity .quantity_update.negative {
	color:red;
}

#map .y .x .cell_path {
	width:100%;
	height:100%;
	z-index:10;
}

#map .y .x .cell_path .node {
	width:30%;
	height:30%;
	top:35%;
	left:35%;
	border-radius:5%;
}

#map .y .x .cell_path > div {
	position:absolute;
	background-color:purple;
}

#map .y .x .cell_path .top,
#map .y .x .cell_path .top-right,
#map .y .x .cell_path .bottom,
#map .y .x .cell_path .bottom-left {
	width:10%;
}

#map .y .x .cell_path .top,
#map .y .x .cell_path .bottom {
	height:50%;
}

#map .y .x .cell_path .top-right,
#map .y .x .cell_path .bottom-left {
	height:75%;
}

#map .y .x .cell_path .right,
#map .y .x .cell_path .bottom-right,
#map .y .x .cell_path .left,
#map .y .x .cell_path .top-left {
	height:10%;
}

#map .y .x .cell_path .right,
#map .y .x .cell_path .left {
	width:50%;
}

#map .y .x .cell_path .bottom-right,
#map .y .x .cell_path .top-left {
	width:75%;
}

#map .y .x .cell_path .top-right,
#map .y .x .cell_path .bottom-left,
#map .y .x .cell_path .bottom-right,
#map .y .x .cell_path .top-left {
	transform: rotate(45deg);
}

#map .y .x .cell_path .top-right {
	transform-origin: bottom;
}

#map .y .x .cell_path .bottom-right {
	transform-origin: left;
}

#map .y .x .cell_path .bottom-left {
	transform-origin: top;
}

#map .y .x .cell_path .top-left {
	transform-origin: right;
}


#map .y .x .cell_path .top,
#map .y .x .cell_path .top-right {
	bottom:50%;
	left:45%;
}

#map .y .x .cell_path .right,
#map .y .x .cell_path .bottom-right {
	top:45%;
	left:50%;
}

#map .y .x .cell_path .bottom,
#map .y .x .cell_path .bottom-left {
	top:50%;
	left:45%;
}

#map .y .x .cell_path .left,
#map .y .x .cell_path .top-left {
	top:45%;
	right:50%;
}