html {
		height: 100%;
		font-family: Monaco, Consolas, monospace !important;
		overflow-y: hidden; /* Hide vertical scrollbar */
		overflow-x: hidden; /* Hide horizontal scrollbar */
	}
	
	body {
	  padding-top: 50px;
	  height: 100%;
	  font-family: Monaco, Consolas, monospace !important;
	}
	
	.main-container{
		height: 100%;
	}
	
	.map{
		position: absolute;
		display: grid;
		grid-template-columns: repeat(64, 1fr);
		grid-template-rows: repeat(64, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		row-gap: 0px;
		width: 1024px;
		height: 1024px;
		#transform-origin: 538px 499px 0px;
		#left: 230.736px;
		#top: -138.649px;
		transform: scale(2);
		background: url('texture/base2.png');
	}
	
	.left-panel{
		-webkit-box-shadow: 10px 10px 30px 10px rgba(0,0,0,0.75);
		-moz-box-shadow: 10px 10px 30px 10px rgba(0,0,0,0.75);
		box-shadow: 10px 10px 30px 10px rgba(0,0,0,0.75);
	}
	
	.right-panel{
		-webkit-box-shadow: -10px 10px 30px 10px rgba(0,0,0,0.75);
		-moz-box-shadow: -10px 10px 30px 10px rgba(0,0,0,0.75);
		box-shadow: -10px 10px 30px 10px rgba(0,0,0,0.75);
	}
	
	.navbar{
		background: rgb(245,245,245);
		background: linear-gradient(0deg, rgba(245,245,245,1) 50%, rgba(166,202,230,1) 100%);
	}
	
	.navbar > .container{
		width:999px;
	}
	
	.navbar-collapse > .cover-left{
		width: 280px;
		height: 50px;
		background: #f8f8f8;
		position: absolute;
		left: 0;
		top: 0;
		background: rgb(245,245,245);
		background: linear-gradient(0deg, rgba(245,245,245,1) 50%, rgba(166,202,230,1) 100%);
		padding: 10px;
		font-size: 22px;
		color: #383838;
		padding-left: 10px;
	}
	
	.navbar-collapse > .cover-right{
		width: 269px;
		height: 50px;
		background: #f8f8f8;
		position: absolute;
		right: 0;
		top: 0;
		background: rgb(245,245,245);
		background: linear-gradient(0deg, rgba(245,245,245,1) 50%, rgba(166,202,230,1) 100%);
	}
	
	.navbar-default{
		border-color: #f5f5f5;
	}
	
	.hi-user{
		
		font-size: 18px;
		
		padding: 12px;
		text-align: center;
	}
	
	.money-guy{
		
		width: 250px;
		background: url('pictures/money-guy.png');
		background-repeat: repeat;
		background-size: auto;
		height: 261px;
		background-size: 100%;
		background-repeat: no-repeat;
		bottom: 5px;
		position: absolute;
		opacity: 0.6;
	}
	
	.buildings{
		
		width: 279px;
		background: url('pictures/buildings.png');
		background-repeat: repeat;
		background-size: auto;
		height: 261px;
		background-size: 100%;
		background-repeat: no-repeat;
		bottom: 5px;
		position: absolute;
		opacity: 0.6;
	}
	
	.box{
		cursor: pointer;
		width: 16px;
		height: 16px;
		text-align:center;
		background-size: cover;
	}
	
	.box img{
		width: 14px;
	}
	
	.cover{
		position:absolute;
		width: 16px;
		height: 16px;
		background: #fff6;
		border-radius: 5px;
		z-index: 999;
	}
	
	.empty-box{
		width: 250px;
		height: 115px;
		text-align: center;
		padding-top: 10px;
		display: none;
		border-radius: 15px;
		margin-left: 8px;
	}
	
	.empty-box-notpossible{
		width: 250px;
		text-align: center;
		padding-top: 10px;
		display: none;
		border-radius: 15px;
		margin-left: 8px;
	}
	
	.pushdownleft{
		width: 268px;
		height: 95px;
	}
	
	.loading{
		display: block;
		width: 100px;
		height: 100%;
		background: #000000;
		position: absolute;
		z-index: 1028;
		left: 268px;
		padding: 15px;
		padding-top: 45px;
		text-align: center;
	}
	
	.loadingtext{
		color: #fff;
		font-weight: bold;
		font-size: 22px;
		width: 200px;
		text-align: center;
		position: absolute;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		top: 50%;
	}
	
	.company-info, .city-info, .shop-info, .market-info{
		width: 250px;
		text-align: center;
		padding-top: 10px;
		
		display: none;
		border-radius: 15px;
		margin-left: 8px;
		padding-bottom: 10px;
	}
	
	.company-info-picture, .city-info-picture, .shop-info-picture, .market-info-picture{
		
		width: 141px;
		margin-left: 53px;
		background: #fff;
		padding:5px;
	}
	
	.company-info-picture img, .city-info-picture img, .shop-info-picture img, .market-info-picture img{
		width:130px;
	}
	
	.company-info-name, .city-info-name, .shop-info-name, .market-info-name{
		font-weight: bold;
		font-size: 16px;
		color: #006063;
	}
	
	.company-info-details, .city-info-details, .shop-info-details, .market-info-details{
		font-size: 13px;
		color: #484848;
	}
	
	.cover-selected{
		position:absolute;
		width: 16px;
		height: 16px;
		background: #ffffff63;
		border-radius: 5px;
		z-index: 999;
	}
	
	.buildingtype-3{
		background: url('pictures/building2.png');
		position:relative;
		width: 32px;
		height: 32px;
		background-size:  30px;
		left:-8px;
		top:-16px;
		float: left;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.buildingtype-4{
		background: url('pictures/bank.png');
		position:relative;
		width: 32px;
		height: 32px;
		background-size:  30px;
		left:-8px;
		top:-16px;
		float: left;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.buildingtype-5{
		background: url('pictures/shop.png');
		position:relative;
		width: 32px;
		height: 32px;
		background-size:  30px;
		left:-8px;
		top:-16px;
		float: left;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.buildingtype-6{
		background: url('pictures/city_2451655.png');
		position:relative;
		width: 64px;
		height: 64px;
		background-size:  60px;
		left:-24px;
		top:-24px;
		float: left;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.buildingtype-7{
		background: url('pictures/market.png');
		position:relative;
		width: 32px;
		height: 32px;
		background-size:  30px;
		left:-8px;
		top:-16px;
		float: left;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.buildingname{
		#display: none;
		width: 85px;
		position: absolute;
		margin-left: -35px;
		margin-top: -35px;
	}
	
	.buildingname span{
		font-size:6px;
		padding: 3px;
		color: #fff;
		font-weight: bold;
		background: #303030a6;
	}
	
	.buildingnamemy{
		#display: none;
		width: 85px;
		position: absolute;
		margin-left: -35px;
		margin-top: -35px;
	}
	
	.buildingnamemy span{
		font-size:6px; 
		padding: 3px;
		color: #12ef2a;
		font-weight: bold;
		background: #000000a6;
	}
	
	.buildingnamesys{
		#display: none;
		width: 85px;
		position: absolute;
		margin-left: -35px;
		margin-top: -35px;
	}
	
	.buildingnamesys span{
		font-size:6px;
		padding: 3px;
		color: #39d6e6;
		font-weight: bold;
		background: #000000a6;
	}
	
	.buildingnamesyscity{
		#display: none;
		width: 85px;
		position: absolute;
		margin-left: -35px;
		margin-top: -40px;
	}
	
	.buildingnamesyscity span{
		font-size:6px;
		padding: 3px;
		color: #39d6e6;
		font-weight: bold;
		background: #000000a6;
	}
	
	.buildingnamesysmarket{
		#display: none;
		width: 85px;
		position: absolute;
		margin-left: -35px;
		margin-top: -40px;
	}
	
	.buildingnamesysmarket span{
		font-size:6px;
		padding: 3px;
		color: #39d6e6;
		font-weight: bold;
		background: #000000a6;
	}
	
	.position{
		width: 135px;
		height: 35px;
		background: #f5f5f5;
		position: absolute;
		right: 0;
		top: 50px;
		text-align: center;
		padding: 7px;
		font-size: 20px;
	}
	
	.position-selected{
		width: 135px;
		height: 35px;
		background: #f5f5f5;
		position: absolute;
		left: 0px;
		top: 50px;
		text-align: center;
		padding: 7px;
		font-size: 20px;
	}
	
	.shop-register{
		display: none;
		width: 100px;
		height: 100%;
		background: #f5f5f5;
		position: absolute;
		z-index: 1028;
		left: 268px;
		padding: 15px;
		padding-top: 45px
	}
	
	
	
	.company-register, .city-contract-register{
		display: none;
		width: 100px;
		height: 100%;
		background: #f5f5f5;
		position: absolute;
		z-index: 1028;
		left: 268px;
		padding: 15px;
		padding-top: 45px
	}
	
	.company-management{
		
		display: none;
		width: 100px;
		height: 100%;
		background: #f5f5f5;
		position: absolute;
		z-index: 1028;
		left: 268px;
		padding: 0px;
	}
	
	.shop-management{
		
		display: none;
		width: 100px;
		height: 100%;
		background: #f5f5f5;
		position: absolute;
		z-index: 1028;
		left: 268px;
		padding: 0px;
	}
	
	.market-management{
		
		display: none;
		width: 100px;
		height: 100%;
		background: #f5f5f5;
		position: absolute;
		z-index: 1028;
		left: 268px;
		padding: 0px;
	}
	
	.cityshop-management{
		
		display: none;
		width: 100px;
		height: 100%;
		background: #f5f5f5;
		position: absolute;
		z-index: 1028;
		left: 268px;
		padding: 0px;
	}
	
	.dropdown-menu{
		z-index:1100;
	}
	
	.well{
		background-color: #fff;
		border-radius: 0px;
	}
	
	.company-mgr-picture{
		
		width: 101px;
		background: #fff;
		padding:5px;
		float:left;
		border: 1px #ccc solid;
	}
	
	.company-mgr-picture img{
		width:90px;
	}
	
	.loader {
		display:none;
		  border: 8px solid #f3f3f3;
			border-top-color: rgb(243, 243, 243);
			border-top-style: solid;
			border-top-width: 8px;
			border-top: 8px solid #3498db;
			border-radius: 50%;
			width: 40px;
			height: 40px;
			animation: spin 1s linear infinite;
			

		}
		
	.loader-left {
		display:none;
		  border: 8px solid #f3f3f3;
			border-top-color: rgb(243, 243, 243);
			border-top-style: solid;
			border-top-width: 8px;
			border-top: 8px solid #3498db;
			border-radius: 50%;
			width: 40px;
			height: 40px;
			animation: spin 1s linear infinite;
			float: left;
			margin-right: 10px;
		}
		
	.loaderjob {
		display:block;
		  border: 5px solid #f3f3f3;
			border-top-color: rgb(243, 243, 243);
			border-top-style: solid;
			border-top-width: 5px;
			border-top: 5px solid #3498db;
			border-radius: 50%;
			width: 25px;
			height: 25px;
			animation: spin 1s linear infinite;
			margin-left: 55px;
			margin-top: -5px
		}
	
	.loadercontract {
		display:block;
		  border: 5px solid #f3f3f3;
			border-top-color: rgb(243, 243, 243);
			border-top-style: solid;
			border-top-width: 5px;
			border-top: 5px solid #3498db;
			border-radius: 50%;
			width: 25px;
			height: 25px;
			animation: spin 1s linear infinite;
			
		}
		
		@keyframes spin {
		  0% { transform: rotate(0deg); }
		  100% { transform: rotate(360deg); }
		}
	
	#dynamic-table-companytransactions thead{
		background: #777;
		color: #fff;
	}
	
	.dataTables_filter{
		text-align: right;
	}
	
	.ui-autocomplete{
		z-index: 1400;
	}
	
	.company-balance{
		font-size: 26px;
		padding: 6px;
		text-align: center;
		color: #09ba03;
		font-weight: bold;
		background: #ebffe4;
	}
	
	.company-data{
		font-size: 17px;
		padding: 5px;
		text-align: center;
		color: #494a49;
		font-weight: bold;
		background: #fff5e7;
	}
	
	.toolofferings{
		overflow-y: scroll;
		height: 650px;
		 background: rgb(0,224,192);
background: -moz-linear-gradient(90deg, rgba(0,224,192,1) 0%, rgba(189,178,255,1) 0%, rgba(188,142,142,1) 49%, rgba(194,255,205,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(0,224,192,1) 0%, rgba(189,178,255,1) 0%, rgba(188,142,142,1) 49%, rgba(194,255,205,1) 100%);
background: linear-gradient(90deg, rgba(0,224,192,1) 0%, rgba(189,178,255,1) 0%, rgba(188,142,142,1) 49%, rgba(194,255,205,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00e0c0",endColorstr="#c2ffcd",GradientType=1); 
	}
	
	.dataTables_length, .dataTables_filter, .dataTables_info{
		display: none;
	}
	
	.dataTables_paginate{
		
		text-align:center;
	}
	
	.storageitem{
		width: 60px;
	}
	
	.storageitem1{
		
		height: 60px;
		background: url('pictures/items/1.png');
		background-size: contain;
		
	}
	
	.toolholder{
		float:left;
		padding: 10px;
		width: 330px;
		min-height: 140px;
		border: 5px #f2f2f2 solid;
		border-radius: 5px;
		margin: 10px;
		  
	}
	
	.toolparam{
		color: #fff;
		text-align:left; 
		padding: 0;
		position: relative;
		text-shadow: 2px 2px 3px #5a5a5a;
		font-weight: bold;
	}
	
	.toolvalue{
		color: #fff;
		text-align:right; 
		padding: 0;
		position: relative;
		text-shadow: 2px 2px 3px #5a5a5a;
		font-weight: bold;
	}
	
	.warningvalue{
		text-shadow: 2px 2px 3px #fe9d9d;
		color: #fc2a2a;
	}
	
	.toolvalue span{
		background: #162b67;
		border: 0px #fff solid;
		border-radius: 10px;
		padding-left: 4px;
		padding-right: 4px;
	}
	
	.tooltype{
		background-repeat: no-repeat;
		background-position: 50% 0;
		background-size: cover;
		height: 135px;
		border: 3px #fff solid;
		border-radius: 5px;
	}
	
	
	
	.toolrarity1{ #szürke
		
 background: rgb(196,211,252);
background: -moz-radial-gradient(circle, rgba(196,211,252,0.5) 0%, rgba(96,99,100,0.5) 100%);
background: -webkit-radial-gradient(circle, rgba(196,211,252,0.5) 0%, rgba(96,99,100,0.5) 100%);
background: radial-gradient(circle, rgba(196,211,252,0.5) 0%, rgba(96,99,100,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c4d3fc",endColorstr="#606364",GradientType=1);
	}
	
	.toolrarity2{ # világoskéke
		
 background: rgb(151,177,246);
background: -moz-radial-gradient(circle, rgba(151,177,246,1) 0%, rgba(106,158,172,1) 100%);
background: -webkit-radial-gradient(circle, rgba(151,177,246,1) 0%, rgba(106,158,172,1) 100%);
background: radial-gradient(circle, rgba(151,177,246,1) 0%, rgba(106,158,172,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#97b1f6",endColorstr="#6a9eac",GradientType=1); 
	}
	
	.toolrarity3{ # sötétkék
		
 background: rgb(151,177,246);
background: -moz-radial-gradient(circle, rgba(151,177,246,1) 0%, rgba(15,57,172,1) 100%);
background: -webkit-radial-gradient(circle, rgba(151,177,246,1) 0%, rgba(15,57,172,1) 100%);
background: radial-gradient(circle, rgba(151,177,246,1) 0%, rgba(15,57,172,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#97b1f6",endColorstr="#0f39ac",GradientType=1); 
	}
	
	.toolrarity4{ # zöld
		
 background: rgb(121,252,168);
background: -moz-radial-gradient(circle, rgba(121,252,168,1) 0%, rgba(0,163,58,1) 100%);
background: -webkit-radial-gradient(circle, rgba(121,252,168,1) 0%, rgba(0,163,58,1) 100%);
background: radial-gradient(circle, rgba(121,252,168,1) 0%, rgba(0,163,58,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#79fca8",endColorstr="#00a33a",GradientType=1); 
	}
	
	.toolrarity5{ #piros
		
 background: rgb(255,109,109);
background: -moz-radial-gradient(circle, rgba(255,109,109,1) 0%, rgba(172,15,15,1) 100%);
background: -webkit-radial-gradient(circle, rgba(255,109,109,1) 0%, rgba(172,15,15,1) 100%);
background: radial-gradient(circle, rgba(255,109,109,1) 0%, rgba(172,15,15,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff6d6d",endColorstr="#ac0f0f",GradientType=1); 
	}
	
	.toolrarity6{ #narancs
		
 background: rgb(255,216,148);
background: -moz-radial-gradient(circle, rgba(255,216,148,1) 0%, rgba(251,166,18,1) 100%);
background: -webkit-radial-gradient(circle, rgba(255,216,148,1) 0%, rgba(251,166,18,1) 100%);
background: radial-gradient(circle, rgba(255,216,148,1) 0%, rgba(251,166,18,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffd894",endColorstr="#fba612",GradientType=1);  
	}

	.toolrarity7{ #lila
		
 background: rgb(210,170,255);
background: -moz-radial-gradient(circle, rgba(210,170,255,1) 0%, rgba(115,0,246,1) 100%);
background: -webkit-radial-gradient(circle, rgba(210,170,255,1) 0%, rgba(115,0,246,1) 100%);
background: radial-gradient(circle, rgba(210,170,255,1) 0%, rgba(115,0,246,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d2aaff",endColorstr="#7300f6",GradientType=1); 
	}

.shopbutton, active{
	 background: rgb(210,170,255);
background: -moz-radial-gradient(circle, rgba(210,170,255,1) 0%, rgba(115,0,246,1) 100%);
background: -webkit-radial-gradient(circle, rgba(210,170,255,1) 0%, rgba(115,0,246,1) 100%);
background: radial-gradient(circle, rgba(210,170,255,1) 0%, rgba(115,0,246,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d2aaff",endColorstr="#7300f6",GradientType=1); 
color: #fff !important;
font-weight: bold;
text-shadow: 2px 2px 3px #5a5a5a;
margin-top: -9px;
font-size:20px;
}


	
	.toolholdername{
		position: relative;
		width: auto;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		background: #ffffff96;
		border-radius: 15px;
		margin-bottom: 10px;
	}
	
	.storageitemholder{
		margin-left: 25px;
		width: 125px;
		float: left;
		padding:5px;
		text-align: center;
		height: 150px;
	}
	
	.storageitemoption{
		display:none;
	}
	
	.progress{
		margin-bottom: 0px;
		width: 100%;
		float: left;
		margin-right: 0;
		color: #000;
	}
	
	.progress-bar{
		background-color:#05cad4;
	}
	
	.production-bar{
		margin-bottom: 20px;
		padding: 0px;
		text-align: center;
		border-radius: 0px;
		color: #222;
		background:#00000082;
	}
	
	.contract-bar{
		margin-bottom: 20px;
		padding: 10px;
		text-align: center;
		border-radius: 0px;
		color: #222;
		background:#cbcbcb82;
	}
	
	.shop-buy-panel{
		overflow-y: scroll;
		height: 450px;
	}
	
	.shop-sell-panel{
		overflow-y: scroll;
		height: 450px;
	}
	
	.drawtexture{
		margin:1px;
		float: left; 
		cursor:pointer;
		width: 16px;
		height:16px;
		background-size: 1936px 1052px;
	}
	
	.top-sector{
		opacity: 0.2;
		display: none;
		width: 40px;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		z-index: 1401;
		position: absolute;
		margin-bottom: 1px;
		top: 51px;
	}
	
	.bottom-sector{
		opacity: 0.2;
		display: none;
		width: 40px;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		z-index: 1401;
		position: absolute;
		margin-bottom: 1px;
		bottom: 0px;
	}
	
	.right-sector{
		opacity: 0.2;
		display: none;
		width: 40px;
		margin-left: auto;
		margin-right: auto;
		right: 265px;
		z-index: 1401;
		position: absolute;
		margin-bottom: 1px;
		top: 360px;
	}
	
	.left-sector{
		opacity: 0.2;
		display: none;
		width: 40px;
		margin-left: auto;
		margin-right: auto;
		left: 268px;
		z-index: 1401;
		position: absolute;
		margin-bottom: 1px;
		top: 360px;
	}
	
	.sectorname{
		opacity: 1;
		width: 163px;
		color: #f5f5f5;
		margin-left: auto;
		margin-right: auto;
		right: 268px;
		z-index: 1005;
		position: absolute;
		margin-bottom: 1px;
		top: 51px;
		padding: 2px;
		font-size: 20px;
		border: 1px #ccc so;
		background: #00000082;
		text-align: center;
		font-weight: bold;
	}
	
	.checked {
	  color: orange;
	}

	.discord{
		width: 198px;
		height: 70px;
		background: aqua;
		position: absolute;
		bottom: 0;
		margin: auto;
		left: 0;
		right: 0;
		background: url('pictures/original_discord.png');
		background-size: 100%;
		cursor:pointer;
	}