@font-face {
  font-family: 'Flamenco';
  font-style: normal;
  font-weight: 400;
  src: local('Flamenco Regular'), local('Flamenco-Regular'), url(https://fonts.gstatic.com/s/flamenco/v9/neIIzCehqYguo67ssZWBFqk.ttf) format('truetype');
}
/*@ColorOrange1: rgb(254,234,180);
@ColorOrange2: rgb(254,214,138);
@ColorOrange3: rgb(254,194,80);
@ColorOrange4: rgb(254,184,46);
@ColorOrange5: rgb(254,168,0);
@ColorOrange6: rgb(254,158,0);
@DefaultColorBlue: rgb(62,96,98);
@DefaultBackgroundColor: rgb(255, 255, 255);

@BackgroundColorTransparentOrange1: rgba(@ColorOrange1, 0.4);
@BackgroundColorTransparentOrange2: rgba(@ColorOrange2, 0.4);
@BackgroundColorTransparentOrange3: rgba(@ColorOrange3, 0.4);
@BackgroundColorTransparentOrange4: rgba(@ColorOrange4, 0.4);
@BackgroundColorTransparentOrange5: rgba(@ColorOrange5, 0.4);
@BackgroundColorTransparentOrange6: rgba(@ColorOrange6, 0.4);
@BackgroundColorTransparentHighlighted: rgba(@DefaultColorBlue, 0.6);
@BackgroundColorTransparentWhite: rgba(@DefaultBackgroundColor, 0.5);
@BackgroundColorTransparentLightWhite: rgba(@DefaultBackgroundColor, 0.4);*/
html,
body {
  height: 100%;
  overflow: hidden;
}
.layout-body,
.preact-container {
  height: 100%;
  width: 100%;
}
* {
  outline: none;
}
body {
  font-family: 'Flamenco', cursive;
  font-size: 1.3em;
  color: #444;
  margin: 0px;
}
.component-loading-page {
  height: 100%;
  width: 100%;
  background-color: #111210;
}
.component-loading-page > .spinner,
.component-loading-page > .logo {
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-filter: drop-shadow(0px 0px 10px black);
  filter: drop-shadow(0px 0px 10px black);
}
.component-loading-page > .logo {
  position: absolute;
  left: 50%;
  margin-left: -64px;
  width: 128px;
  top: 50%;
  margin-top: -64px;
  height: 128px;
  background-image: url("Images/loader/logo.png");
}
.component-loading-page > .spinner {
  position: absolute;
  left: 50%;
  margin-left: -130px;
  width: 256px;
  top: 50%;
  margin-top: -129px;
  height: 256px;
  background-image: url("Images/loader/spinner_256.png");
  -webkit-animation-name: spin;
  -webkit-animation-duration: 8000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 8000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 8000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 8000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.overlay-window {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000001;
  padding: 10%;
}
.overlay-window > .overlay-window-form {
  background-color: transparent;
  height: 100%;
  width: 100%;
  padding: 10px;
  -webkit-filter: drop-shadow(1px 1px 5px #111210);
  filter: drop-shadow(1px 1px 5px #111210);
}
.overlay-window > .overlay-window-form > .overlay-window-close {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  width: 100px;
  transition: color 0.2s ease-out, color 0.2s ease-out;
}
.overlay-window > .overlay-window-form > .overlay-window-close:hover {
  color: #f5c17d;
  transition: color 0.2s ease-in, color 0.2s ease-in;
}
.overlay-window > .overlay-window-form > .overlay-window-content {
  height: 100%;
  width: 100%;
  background-color: white;
  padding: 10px;
}
.viewcomponent-login {
  height: 100%;
  width: 100%;
  background-image: url('Images/Island/Ocean_komp.png');
}
.viewcomponent-login .water,
.viewcomponent-login .water-overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  background-image: url('Images/Island/Ocean_komp.png');
  background-repeat: no-repeat;
  background-size: cover;
}
.viewcomponent-login > .water-overlay {
  -webkit-filter: brightness(3);
  filter: brightness(3);
  -o-filter: brightness(3);
  -moz-filter: brightness(3);
  transition-delay: 2s;
}
.viewcomponent-login.-login-failed > .component-rain-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}
.viewcomponent-login > .login-form {
  position: absolute;
  left: 50%;
  margin-left: -160px;
  width: 300px;
  top: 50%;
  margin-top: -285px;
  height: 550px;
  padding: 10px;
  background-color: rgba(17, 18, 16, 0.5);
  border: 1px solid rgba(17, 18, 16, 0.7);
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
  border-radius: 3px;
}
.viewcomponent-login > .login-form.-login-failed > .logo {
  width: 256px;
  height: 256px;
  background-image: url('Images/Kokomoria_logo_color_256.png');
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0 auto;
  -webkit-filter: drop-shadow(0px 0px 50px red);
  filter: drop-shadow(0px 0px 40px red);
  z-index: 1000;
}
.viewcomponent-login > .login-form > .logo {
  width: 256px;
  height: 256px;
  background-image: url('Images/Kokomoria_logo_color_256.png');
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0 auto;
  -webkit-filter: drop-shadow(0px 0px 20px #111210);
  filter: drop-shadow(0px 0px 20px #111210);
  z-index: 1000;
}
.viewcomponent-login > .login-form > .title {
  color: #f5c17d;
  font-size: 2em;
  text-align: center;
}
.viewcomponent-login > .login-form > .description {
  color: #f5c17d;
  font-size: 1em;
  font-style: italic;
  padding-bottom: 10px;
  border-bottom: 1px solid #111210;
  margin-bottom: 10px;
}
.viewcomponent-login > .login-form > .description > a {
  text-decoration: none;
  color: #ffe9bc;
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.viewcomponent-login > .login-form > .description > a:hover {
  color: #c48c4f;
}
.viewcomponent-login > .login-form > .username-input {
  border: none;
  font-size: 1em;
  font-family: 'Flamenco', cursive;
  color: #444;
  border-radius: 3px;
  width: 65%;
  margin: 0 auto;
  background-color: #ffe9bc;
  padding: 1px 5px;
}
.viewcomponent-login > .login-form > .password-input {
  border: none;
  font-size: 1em;
  font-family: 'Flamenco', cursive;
  color: #444;
  border-radius: 3px;
  width: 65%;
  margin: 0 auto;
  background-color: #ffe9bc;
  padding: 1px 5px;
}
.viewcomponent-login > .login-form > .login-error-text {
  font-size: 0.8em;
  color: red;
  text-align: center;
  cursor: pointer;
  grid-row: 6;
}
.viewcomponent-login > .login-form > .login {
  font-size: 1em;
  font-family: 'Flamenco', cursive;
  cursor: pointer;
  color: #ffe9bc;
  background-color: rgba(17, 18, 16, 0.5);
  border: 1px solid rgba(17, 18, 16, 0.7);
  border-radius: 3px;
  width: 120px;
  margin: 0 auto;
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.viewcomponent-login > .login-form > .login:hover {
  color: #c48c4f;
  background-color: rgba(17, 18, 16, 0.7);
  border: 1px solid rgba(17, 18, 16, 0.9);
  border-radius: 3px;
}
.island-infos {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100px;
  grid-gap: 1px;
  width: 100%;
  color: #f5c17d;
  position: absolute;
  top: 0;
}
.island-infos > .island-name {
  text-align: center;
  padding: 5px;
  font-size: 1.5em;
  width: 500px;
  margin: 0 auto;
  background-color: rgba(17, 18, 16, 0.5);
  border-left: 1px solid rgba(17, 18, 16, 0.7);
  border-right: 1px solid rgba(17, 18, 16, 0.7);
  border-bottom: 1px solid rgba(17, 18, 16, 0.7);
}
.island-infos > .ressource-view {
  width: 512px;
  margin: 0 auto;
}
.island-infos > .ressource-view > .ressources {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1px;
}
.island-infos > .ressource-view > .ressources > .ressource {
  background-color: rgba(17, 18, 16, 0.5);
  border: 1px solid rgba(17, 18, 16, 0.7);
  display: grid;
  grid-template-rows: 32px 1fr;
}
.island-infos > .ressource-view > .ressources > .ressource > .ressource-icon {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0 auto;
  width: 32px;
}
.island-infos > .ressource-view > .ressources > .ressource > .ressource-icon.-ore {
  background-image: url("Images/ore-icon.png");
}
.island-infos > .ressource-view > .ressources > .ressource > .ressource-icon.-stone {
  background-image: url("Images/stone-icon.png");
}
.island-infos > .ressource-view > .ressources > .ressource > .ressource-icon.-gold {
  background-image: url("Images/gold-icon.png");
}
.island-infos > .ressource-view > .ressources > .ressource > .ressource-amount {
  text-align: center;
  padding: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.7em;
}
.island-infos > .ressource-view > .ressources > .ressource > .ressource-amount.-default {
  color: #f5c17d;
}
.island-infos > .ressource-view > .ressources > .ressource > .ressource-amount.-medium {
  color: #e5c49e;
}
.island-infos > .ressource-view > .ressources > .ressource > .ressource-amount.-full {
  color: #e56649;
}
.viewcomponent-island > .component-intro-overlay-box > .overlay-window > .overlay-window-form {
  position: absolute;
  left: 50%;
  margin-left: -300px;
  width: 600px;
  top: 50%;
  margin-top: -250px;
  height: 500px;
  padding: 0;
  grid-template-rows: auto 1fr auto auto auto;
  display: grid;
  grid-gap: 5px;
}
.viewcomponent-island > .component-intro-overlay-box > .overlay-window > .overlay-window-form > .requirements {
  list-style: none;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #f5c17d;
  padding: 10px;
}
.viewcomponent-island > .component-intro-overlay-box > .overlay-window > .overlay-window-form > .requirements > .requirement {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 10px;
}
.viewcomponent-island > .component-intro-overlay-box > .overlay-window > .overlay-window-form > .requirements > .requirement > .thumbnail.-townhall {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 64px;
}
.viewcomponent-island > .component-intro-overlay-box > .overlay-window > .overlay-window-form > .requirements > .requirement > .requirement-info-container {
  grid-template-rows: auto 1fr;
  display: grid;
  grid-gap: 5px;
}
.viewcomponent-island > .component-intro-overlay-box > .overlay-window > .overlay-window-form > .requirements-label {
  color: #f5c17d;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border: 1px solid rgba(0, 0, 0, 0.5);
  width: fit-content;
}
.viewcomponent-island > .component-intro-overlay-box > .overlay-window > .overlay-window-form > .title {
  color: #f5c17d;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1em;
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.viewcomponent-island > .component-intro-overlay-box > .overlay-window > .overlay-window-form > .description {
  color: #f5c17d;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1em;
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.viewcomponent-island > .component-intro-overlay-box > .overlay-window > .overlay-window-form > .actions {
  border: 1px solid rgba(0, 0, 0, 0.5);
  padding: 1em;
  color: #f5c17d;
  background-color: rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}
.viewcomponent-island > .component-intro-overlay-box > .overlay-window > .overlay-window-form > .actions > .action {
  cursor: pointer;
  text-align: center;
}
.viewcomponent-island > .component-intro-overlay-box > .overlay-window > .overlay-window-form > .actions > .action.-confirm {
  grid-column: 3;
}
.coming-soon {
  color: #f5c17d;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 50px;
  margin-top: 8px;
  text-align: center;
  font-size: 20px;
}
.viewcomponent-home {
  height: 100%;
  width: 100%;
}
.viewcomponent-home .water,
.viewcomponent-home .water-overlay {
  height: 100%;
  width: 100%;
  position: fixed;
}
.viewcomponent-home > .water {
  background-image: url('Images/Island/Ocean_komp.png');
  background-repeat: no-repeat;
  background-size: cover;
}
.viewcomponent-home > .water-overlay {
  background-image: url('Images/Island/Ocean_komp.png');
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: brightness(3);
  filter: brightness(3);
  -o-filter: brightness(3);
  -moz-filter: brightness(3);
}
.viewcomponent-home > .navigation {
  z-index: 1000000;
  position: fixed;
  color: #f5c17d;
  height: 100%;
}
.viewcomponent-home > .navigation a.navigation-item {
  text-decoration: none;
  color: #f5c17d;
}
.viewcomponent-home > .navigation .navigation-item.-map .navigation-item-icon {
  background-image: url("Images/poison.svg");
}
.viewcomponent-home > .navigation .navigation-item.-island .navigation-item-icon {
  background-image: url("Images/poison.svg");
}
.viewcomponent-home > .navigation .navigation-item.-ranking .navigation-item-icon {
  background-image: url("Images/poison.svg");
}
.viewcomponent-home > .navigation .navigation-item.-alliance .navigation-item-icon {
  background-image: url("Images/poison.svg");
}
.viewcomponent-home > .navigation .navigation-item.-reports .navigation-item-icon {
  background-image: url("Images/poison.svg");
}
.viewcomponent-home > .navigation .navigation-item.-messages .navigation-item-icon {
  background-image: url("Images/poison.svg");
}
.viewcomponent-home > .navigation .navigation-item.-admin .navigation-item-icon {
  background-image: url("Images/poison.svg");
}
.viewcomponent-home > .navigation.-expanded {
  min-width: 240px;
}
.viewcomponent-home > .navigation.-expanded .navigation-item {
  grid-template-columns: 80px 1fr;
  padding: 10px;
  display: grid;
  grid-gap: 15px;
  background-color: rgba(17, 18, 16, 0.5);
  border-top: 1px solid rgba(17, 18, 16, 0.7);
  border-right: 1px solid rgba(17, 18, 16, 0.7);
  border-bottom: 1px solid rgba(17, 18, 16, 0.7);
  margin-bottom: 1px;
}
.viewcomponent-home > .navigation.-expanded .navigation-item .navigation-item-icon {
  filter: drop-shadow(0 0 10px black);
  height: 80px;
  width: 80px;
  margin-top: 10%;
  background-size: cover !important;
  margin: 0 auto;
}
.viewcomponent-home > .navigation.-expanded .navigation-item .navigation-item-text {
  padding-top: 30px;
}
.viewcomponent-home > .navigation.-expanded .navigation-item:hover {
  cursor: pointer;
}
.viewcomponent-home > .navigation.-expanded .navigation-item:hover .navigation-item-icon {
  filter: drop-shadow(0 0 10px #f5c17d);
}
.viewcomponent-home > .navigation.-collapsed .navigation-item {
  background-color: rgba(17, 18, 16, 0.5);
  border-top: 1px solid rgba(17, 18, 16, 0.7);
  border-right: 1px solid rgba(17, 18, 16, 0.7);
  border-bottom: 1px solid rgba(17, 18, 16, 0.7);
  margin-bottom: 1px;
  padding: 10px;
}
.viewcomponent-home > .navigation.-collapsed .navigation-item .navigation-item-icon {
  filter: drop-shadow(0 0 10px black);
  height: 48px;
  width: 48px;
  margin-top: 10%;
  background-size: cover !important;
}
.viewcomponent-home > .navigation.-collapsed .navigation-item .navigation-item-text {
  display: none;
}
.viewcomponent-home > .navigation.-collapsed .navigation-item:hover {
  cursor: pointer;
}
.viewcomponent-home > .navigation.-collapsed .navigation-item:hover .navigation-item-icon {
  filter: drop-shadow(0 0 10px #f5c17d);
}
.viewcomponent-home > .content {
  height: 100%;
  width: 100%;
  position: relative;
}
.viewcomponent-island {
  height: 100%;
  width: 100%;
}
.viewcomponent-island > .building-menu {
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
}
.viewcomponent-island > .building-menu > .close-building-menu {
  margin: 0 auto;
  width: 340px;
  padding: 5px;
  padding-left: 10px;
  margin-top: -55px;
  background-color: rgba(17, 18, 16, 0.5);
  border: 1px solid rgba(17, 18, 16, 0.7);
  border-radius: 5pc;
  cursor: pointer;
  font-size: 1.4em;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 40px 1fr;
}
.viewcomponent-island > .building-menu > .close-building-menu > .close-building-menu-icon {
  background-image: url("Images/poison.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 32px;
}
.viewcomponent-island > .building-menu > .close-building-menu > .close-building-menu-name {
  color: #f5c17d;
}
.viewcomponent-island > .building-menu > .close-building-menu:hover > .close-building-menu-icon {
  filter: drop-shadow(0 0 5px #f5c17d);
}
.viewcomponent-island > .building-menu > .menu-items {
  height: 100%;
  margin: 0 auto;
  width: fit-content;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2px;
  margin-top: 13px;
}
.viewcomponent-island > .building-menu > .menu-items > .menu-item {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-gap: 5px;
  padding: 10px;
  background-color: rgba(17, 18, 16, 0.5);
  border-left: 1px solid rgba(17, 18, 16, 0.7);
  border-top: 1px solid rgba(17, 18, 16, 0.7);
  border-right: 1px solid rgba(17, 18, 16, 0.7);
  color: #f5c17d;
}
.viewcomponent-island > .building-menu > .menu-items > .menu-item > .menu-item-icon {
  background-image: url("Images/poison.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 48px;
  margin: 0 auto;
}
.viewcomponent-island > .building-menu > .menu-items > .menu-item > .menu-item-text {
  text-align: center;
  padding: 5px;
}
.viewcomponent-island > .building-menu > .menu-items > .menu-item:hover {
  cursor: pointer;
}
.viewcomponent-island > .building-menu > .menu-items > .menu-item:hover > .menu-item-icon {
  filter: drop-shadow(0 0 10px #f5c17d);
}
.viewcomponent-island .island,
.viewcomponent-island .island-overlay,
.viewcomponent-island .island-buildings {
  position: absolute;
  left: 50%;
  margin-left: -600px;
  width: 1200px;
  top: 50%;
  margin-top: -320px;
  height: 675px;
}
.viewcomponent-island > .island {
  background-image: url("Images/Island/Island_Ocean_komp.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.viewcomponent-island > .island-overlay {
  background-image: url("Images/Island/Island_Ocean_komp.png");
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: brightness(3);
  filter: brightness(3);
  -o-filter: brightness(3);
  -moz-filter: brightness(3);
}
.viewcomponent-island > .island-buildings {
  background-color: transparent;
}
.viewcomponent-island > .island-buildings .overlay-window > .overlay-window-form {
  background-color: white;
  height: 100%;
  width: 100%;
  padding: 10px;
  -webkit-filter: drop-shadow(1px 1px 5px #111210);
  filter: drop-shadow(1px 1px 5px #111210);
}
.viewcomponent-island > .island-buildings .overlay-window > .overlay-window-form > .overlay-window-close {
  cursor: pointer;
  color: #c48c4f;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj {
  z-index: 10;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj.-selected .building {
  -webkit-filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white);
  filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white);
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building {
  position: absolute;
  color: white;
  font-size: 10px;
  cursor: pointer;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building > .building-info {
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgba(255, 255, 255, 0.5);
  color: black;
  text-align: center;
  font-size: 12px;
  position: absolute;
  margin-top: -2em;
  width: 64px;
  font-weight: bold;
  padding: 4px;
  margin-left: -22px;
  border-radius: 5pc;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building.-townhall {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 695px;
  margin-top: 215px;
  width: 32px;
  height: 32px;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building.-storage {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 770px;
  margin-top: 270px;
  width: 32px;
  height: 32px;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building.-quarters {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 710px;
  margin-top: 290px;
  width: 32px;
  height: 32px;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building.-farm {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 920px;
  margin-top: 390px;
  width: 32px;
  height: 32px;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building.-tavern {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 590px;
  margin-top: 300px;
  width: 32px;
  height: 32px;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building.-quarry {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 970px;
  margin-top: 240px;
  width: 32px;
  height: 32px;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building.-port {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 750px;
  margin-top: 360px;
  width: 32px;
  height: 32px;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building.-smithery {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 510px;
  margin-top: 290px;
  width: 32px;
  height: 32px;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building.-oremine {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 1030px;
  margin-top: 290px;
  width: 32px;
  height: 32px;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building.-sawmill {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 370px;
  margin-top: 230px;
  width: 32px;
  height: 32px;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building.-laboratory {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 885px;
  margin-top: 150px;
  width: 32px;
  height: 32px;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building.-wall {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 410px;
  margin-top: 470px;
  width: 32px;
  height: 32px;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building.-tower {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 460px;
  margin-top: 490px;
  width: 32px;
  height: 32px;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building.-specialplace {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 180px;
  margin-top: 290px;
  width: 32px;
  height: 32px;
}
.viewcomponent-island > .island-buildings > .viewcomponent-island-obj > .building.-from-catalog {
  background-image: none;
  background-color: aliceblue;
}
.viewcomponent-map ul.game-board {
  display: grid;
  grid-template-columns: repeat(25, 1fr);
  padding: 0;
  bottom: 0;
  right: 20px;
  position: absolute;
}
.viewcomponent-map ul.game-board > li.row > .tile {
  display: block;
  background-color: #434f60;
  width: 100%;
  height: 100%;
}
.viewcomponent-buildinglist {
  height: 80%;
}
.viewcomponent-buildinglist > .buildings {
  height: 100%;
}
.component-button.ghost-button {
  padding: 10px;
  font-size: 18px;
  background-color: rgba(34, 39, 50, 0.6);
  cursor: pointer;
  min-height: 66px;
  color: #c48c4f;
  border: 1px solid rgba(34, 39, 50, 0.6);
  text-align: center;
  outline: none;
  text-decoration: none;
}
.component-button.ghost-button:hover,
.component-button.ghost-button:active {
  background-color: #222732;
  color: #f5c17d;
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
ul.component-custom-list {
  margin-top: 0.5em;
  padding: 0px;
  height: 100%;
  overflow: auto;
  color: #f5c17d;
}
ul.component-custom-list > .custom-list-row {
  height: 140px;
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
ul.component-custom-list > .custom-list-row + .custom-list-row {
  display: grid;
  height: 140px;
  background-color: rgba(0, 0, 0, 0.5);
  margin-top: 3px;
}
ul.component-custom-list > .custom-list-row.-templated {
  background-color: rgba(30, 30, 30, 0.9);
  grid-template-columns: 140px 1fr 140px;
}
ul.component-custom-list > .custom-list-row.-templated > .row-item > .cell-description {
  background-color: transparent;
}
ul.component-custom-list > .custom-list-row.-templated > .row-item > .cell-description.-name > .open-detail-window {
  cursor: pointer;
}
ul.component-custom-list > .custom-list-row.-templated > .row-item > .cell-description.-description {
  align-self: center;
  height: 60%;
  width: -webkit-fill-available;
  overflow-wrap: break-word;
}
ul.component-custom-list > .custom-list-row.-templated > .row-item > .cell-description.-thumbnail {
  background-image: url("Images/Nav/key.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
ul.component-custom-list > .custom-list-row > .row-item {
  padding: 1em;
}
ul.component-custom-list > .custom-list-row > .row-item > .cell-description.-name {
  font-size: 18px;
}
ul.component-custom-list > .custom-list-row > .row-item > .cell-description.-name > .open-detail-window {
  cursor: pointer;
}
ul.component-custom-list > .custom-list-row > .row-item > .cell-description.-description {
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.5);
  padding: 10px;
  height: 45px;
  display: inline-block;
  width: -webkit-fill-available;
  height: 60%;
}
ul.component-custom-list > .custom-list-row > .row-item > .cell-description.-thumbnail {
  background-image: url("Images/Nav/lighthouse.svg");
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  width: 100%;
}
ul.component-custom-list > .custom-list-row > .row-item > .cell-description.1 {
  background-image: url("Images/Island/Objs/Skull.png");
  background-repeat: no-repeat;
  background-size: contain;
}
ul.component-custom-list > .custom-list-row > .row-item > .component-button,
ul.component-custom-list > .custom-list-row > .row-item .ghost-button {
  font-size: 14px;
  background-color: rgba(34, 39, 50, 0.6);
  border: 1px solid rgba(34, 39, 50, 0.6);
  height: 80%;
}
ul.component-custom-list > .custom-list-row > .row-item > .component-button > .button-label,
ul.component-custom-list > .custom-list-row > .row-item .ghost-button > .button-label {
  font-size: 18px;
  color: #c48c4f;
}
ul.component-custom-list > .custom-list-row > .row-item > .component-button.ghost-button:hover,
ul.component-custom-list > .custom-list-row > .row-item .ghost-button.ghost-button:hover,
ul.component-custom-list > .custom-list-row > .row-item > .component-button.ghost-button:active,
ul.component-custom-list > .custom-list-row > .row-item .ghost-button.ghost-button:active {
  background-color: #222732;
  color: #f5c17d;
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
ul.component-custom-list > .custom-list-row > .row-item > .component-button.ghost-button:hover > .button-label,
ul.component-custom-list > .custom-list-row > .row-item .ghost-button.ghost-button:hover > .button-label,
ul.component-custom-list > .custom-list-row > .row-item > .component-button.ghost-button:active > .button-label,
ul.component-custom-list > .custom-list-row > .row-item .ghost-button.ghost-button:active > .button-label {
  color: #f5c17d;
  transition: color 0.3s ease-in, color 0.3s ease-in;
}
ul.component-custom-list > .custom-list-row > .row-item > .component-button > ul.requirement-list,
ul.component-custom-list > .custom-list-row > .row-item .ghost-button > ul.requirement-list {
  list-style-type: none;
  padding: 0px;
  overflow: hidden;
  height: 100%;
  width: 50%;
  margin: 0 auto;
}
ul.component-custom-list > .custom-list-row > .row-item > .component-button > ul.requirement-list > .requirement-row-item,
ul.component-custom-list > .custom-list-row > .row-item .ghost-button > ul.requirement-list > .requirement-row-item {
  width: 100%;
  display: inline-flex;
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
}
ul.component-custom-list > .custom-list-row > .row-item > .component-button > ul.requirement-list > .requirement-row-item.-not-fulfilled > .cell-description,
ul.component-custom-list > .custom-list-row > .row-item .ghost-button > ul.requirement-list > .requirement-row-item.-not-fulfilled > .cell-description {
  color: red;
}
ul.component-custom-list > .custom-list-row > .row-item > .component-button > ul.requirement-list > .requirement-row-item > .cell-description,
ul.component-custom-list > .custom-list-row > .row-item .ghost-button > ul.requirement-list > .requirement-row-item > .cell-description {
  float: left;
}
::-webkit-scrollbar-button {
  display: none;
  height: 13px;
  border-radius: 0px;
  background-color: red;
}
::-webkit-scrollbar-button:hover {
  background-color: red;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #222732;
  border-radius: 1px;
}
::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-track:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar {
  width: 20px;
}
.component-rain-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: transparent;
}
.drop {
  z-index: 10;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0d343a), to(rgba(255, 255, 255, 0.6)));
  background: -moz-linear-gradient(top, #0d343a 0%, rgba(255, 255, 255, 0.6) 100%);
  height: 15px;
  width: 1px;
  border-radius: 100%;
  position: absolute;
  bottom: 200px;
  -webkit-animation: fall 0.63s linear infinite;
  -moz-animation: fall 0.63s linear infinite;
}
/* animate the drops*/
@-webkit-keyframes fall {
  to {
    margin-top: 900px;
  }
}
@-moz-keyframes fall {
  to {
    margin-top: 900px;
  }
}
/*Now just a opacity animation*/
.flashit {
  -webkit-animation: flash ease-in 7s infinite;
  -moz-animation: flash ease-in 7s infinite;
  animation: flash ease-in 7s infinite;
  animation-delay: 2s;
}
@-webkit-keyframes flash {
  from {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
  93% {
    opacity: 0.6;
  }
  94% {
    opacity: 0.2;
  }
  96% {
    opacity: 0.9;
  }
  to {
    opacity: 0;
  }
}
@keyframes flash {
  from {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
  93% {
    opacity: 0.6;
  }
  94% {
    opacity: 0.2;
  }
  96% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/*End! is that simple! */
.viewcomponent-building {
  width: 80px;
  height: 80px;
  cursor: pointer;
  position: absolute;
}
.viewcomponent-building .building {
  /*.menu-open-button {
        background: #EEEEEE;
        border-radius: 100%;
        width: 64px;
        height: 64px;
        margin-left: -32px;
        position: absolute;
        color: #FFFFFF;
        text-align: center;
        line-height: 64px;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition: -webkit-transform ease-out 200ms;
        transition: -webkit-transform ease-out 200ms;
        transition: transform ease-out 200ms;
        transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
    }*/
  /*.lines {
        width: 25px;
        height: 3px;
        background: #596778;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -12.5px;
        margin-top: -1.5px;
        -webkit-transition: -webkit-transform 200ms;
        transition: -webkit-transform 200ms;
        transition: transform 200ms;
        transition: transform 200ms, -webkit-transform 200ms;
    }

    .line-1 {
        -webkit-transform: translate3d(0, -8px, 0);
        transform: translate3d(0, -8px, 0);
    }

    .line-2 {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .line-3 {
        -webkit-transform: translate3d(0, 8px, 0);
        transform: translate3d(0, 8px, 0);
    }*/
  /*.menu-open:checked + .menu-open-button .line-1 {
        -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
        transform: translate3d(0, 0, 0) rotate(45deg);
    }

    .menu-open:checked + .menu-open-button .line-2 {
        -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
        transform: translate3d(0, 0, 0) scale(0.1, 1);
    }

    .menu-open:checked + .menu-open-button .line-3 {
        -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
        transform: translate3d(0, 0, 0) rotate(-45deg);
    }

    .menu-open-button {
        z-index: 2;
        -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        -webkit-transition-duration: 400ms;
        transition-duration: 400ms;
        -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
        transform: scale(1.1, 1.1) translate3d(0, 0, 0);
        cursor: pointer;
        box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    }

    .menu-open-button:hover {
        -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
        transform: scale(1.2, 1.2) translate3d(0, 0, 0);
    }

    .menu-open:checked + .menu-open-button {
        -webkit-transition-timing-function: linear;
        transition-timing-function: linear;
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
        -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
        transform: scale(0.8, 0.8) translate3d(0, 0, 0);
    }*/
}
.viewcomponent-building .building.-townhall {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 582px;
  margin-top: 151px;
  width: 64px;
  height: 64px;
}
.viewcomponent-building .building.-storage {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 680px;
  margin-top: 220px;
  width: 64px;
  height: 64px;
}
.viewcomponent-building .building.-quarters {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 750px;
  margin-top: 290px;
  width: 32px;
  height: 32px;
}
.viewcomponent-building .building.-farm {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 830px;
  margin-top: 380px;
  width: 64px;
  height: 64px;
}
.viewcomponent-building .building.-tavern {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 480px;
  margin-top: 270px;
  width: 64px;
  height: 64px;
}
.viewcomponent-building .building.-quarry {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 910px;
  margin-top: 270px;
  width: 64px;
  height: 64px;
}
.viewcomponent-building .building.-port {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 550px;
  margin-top: 300px;
  width: 64px;
  height: 64px;
}
.viewcomponent-building .building.-smithery {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 380px;
  margin-top: 260px;
  width: 64px;
  height: 64px;
}
.viewcomponent-building .building.-oremine {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 920px;
  margin-top: 200px;
  width: 64px;
  height: 64px;
}
.viewcomponent-building .building.-sawmill {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 220px;
  margin-top: 160px;
  width: 64px;
  height: 64px;
}
.viewcomponent-building .building.-laboratory {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 800px;
  margin-top: 120px;
  width: 64px;
  height: 64px;
}
.viewcomponent-building .building.-wall {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 700px;
  margin-top: 470px;
  width: 64px;
  height: 64px;
}
.viewcomponent-building .building.-tower {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 240px;
  margin-top: 460px;
  width: 64px;
  height: 64px;
}
.viewcomponent-building .building.-specialplace {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 180px;
  margin-top: 290px;
  width: 64px;
  height: 64px;
}
.viewcomponent-building .building.-from-catalog {
  background-image: none;
  background-color: aliceblue;
}
.viewcomponent-building .building .menu-open {
  display: none;
}
.viewcomponent-building .building .menu-open:checked ~ .menu-item {
  -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.viewcomponent-building .building .menu-open:checked ~ .menu-item:nth-child(3) {
  transition-duration: 180ms;
  -webkit-transition-duration: 180ms;
  -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
  transform: translate3d(0.08361px, -104.99997px, 0);
}
.viewcomponent-building .building .menu-open:checked ~ .menu-item:nth-child(4) {
  transition-duration: 280ms;
  -webkit-transition-duration: 280ms;
  -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
  transform: translate3d(90.9466px, -52.47586px, 0);
}
.viewcomponent-building .building .menu-open:checked ~ .menu-item:nth-child(5) {
  transition-duration: 380ms;
  -webkit-transition-duration: 380ms;
  -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
  transform: translate3d(90.9466px, 52.47586px, 0);
}
.viewcomponent-building .building .menu-open:checked ~ .menu-item:nth-child(6) {
  transition-duration: 480ms;
  -webkit-transition-duration: 480ms;
  -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
  transform: translate3d(0.08361px, 104.99997px, 0);
}
.viewcomponent-building .building .menu-open:checked ~ .menu-item:nth-child(7) {
  transition-duration: 580ms;
  -webkit-transition-duration: 580ms;
  -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
  transform: translate3d(-90.86291px, 52.62064px, 0);
}
.viewcomponent-building .building .menu-open:checked ~ .menu-item:nth-child(8) {
  transition-duration: 680ms;
  -webkit-transition-duration: 680ms;
  -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
  transform: translate3d(-91.03006px, -52.33095px, 0);
}
.viewcomponent-building .building .menu-open:checked ~ .menu-item:nth-child(9) {
  transition-duration: 780ms;
  -webkit-transition-duration: 780ms;
  -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
  transform: translate3d(-0.25084px, -104.9997px, 0);
}
.viewcomponent-building .building .menu-item {
  background: #EEEEEE;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  position: absolute;
  color: #FFFFFF;
  text-align: center;
  line-height: 80px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.viewcomponent-building .building .menu {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 80px;
  height: 80px;
  text-align: center;
  box-sizing: border-box;
  font-size: 26px;
}
.viewcomponent-building .building .menu-item:hover {
  background: #EEEEEE;
  color: #3290B1;
}
.viewcomponent-building .building .menu-item:nth-child(3) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}
.viewcomponent-building .building .menu-item:nth-child(4) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}
.viewcomponent-building .building .menu-item:nth-child(5) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}
.viewcomponent-building .building .menu-item:nth-child(6) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}
.viewcomponent-building .building .menu-item:nth-child(7) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}
.viewcomponent-building .building .menu-item:nth-child(8) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}
.viewcomponent-building .building .menu-item:nth-child(9) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}
.viewcomponent-building .building .item-1 {
  background-color: #669AE1;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.viewcomponent-building .building .item-1:hover {
  color: #669AE1;
  text-shadow: none;
}
.viewcomponent-building .building .item-2 {
  background-color: #70CC72;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.viewcomponent-building .building .item-2:hover {
  color: #70CC72;
  text-shadow: none;
}
.viewcomponent-building .building .item-3 {
  background-color: #FE4365;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.viewcomponent-building .building .item-3:hover {
  color: #FE4365;
  text-shadow: none;
}
.viewcomponent-building .building .item-4 {
  background-color: #C49CDE;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.viewcomponent-building .building .item-4:hover {
  color: #C49CDE;
  text-shadow: none;
}
.viewcomponent-building .building .item-5 {
  background-color: #FC913A;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.viewcomponent-building .building .item-5:hover {
  color: #FC913A;
  text-shadow: none;
}
.viewcomponent-building .building .item-6 {
  background-color: #62C2E4;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.viewcomponent-building .building .item-6:hover {
  color: #62C2E4;
  text-shadow: none;
}
.viewcomponent-menu {
  position: absolute;
  width: 300px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1010;
}
.viewcomponent-menu > .content {
  padding-top: 3em;
  padding-left: 1em;
}
.viewcomponent-menu > .content > .menu-items {
  display: grid;
  grid-auto-rows: 1fr;
  grid-gap: 0.2em;
}
.viewcomponent-menu > .content > .menu-items > .menu-item {
  padding: 0.3em;
  padding-right: 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-gap: 0.5em;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-right: none;
}
.viewcomponent-menu > .content > .menu-items > .menu-item > .menu-item-icon {
  background-image: url('Images/Kokomoria_logo_color_256.png');
  background-repeat: no-repeat;
  background-size: contain;
  height: 64px;
  width: 64px;
  transition: filter 0.2s ease-in, filter 0.2s ease-in;
}
.viewcomponent-menu > .content > .menu-items > .menu-item > .menu-item-display-name {
  margin: auto 0;
  font-size: 1.2em;
  color: #f5c17d;
  transition: color 0.2s ease-in, color 0.2s ease-in;
}
.viewcomponent-menu > .content > .menu-items > .menu-item:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.viewcomponent-menu > .content > .menu-items > .menu-item:hover > .menu-item-display-name {
  color: #ffe9bc;
}
.viewcomponent-menu > .content > .menu-items > .menu-item:hover > .menu-item-icon {
  -webkit-filter: drop-shadow(0px 0px 8px #ffe9bc);
  filter: drop-shadow(0px 0px 8px #ffe9bc);
}
.viewcomponent-action-menu {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 1009;
}
.viewcomponent-action-menu > .content {
  margin: 0 auto;
  width: fit-content;
  display: grid;
  grid-template-rows: 1fr 3fr;
  grid-gap: 0.2em;
}
.viewcomponent-action-menu > .content > .label {
  width: calc(100% - 2px);
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.5);
  font-size: 1.2em;
  text-align: center;
  padding-top: 6px;
  color: #ffe9bc;
}
.viewcomponent-action-menu > .content > .menu-items {
  display: grid;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  grid-gap: 0.2em;
}
.viewcomponent-action-menu > .content > .menu-items > .menu-item {
  padding: 0.3em;
  padding-right: 0;
  cursor: pointer;
  display: grid;
  grid-template-rows: 64px 1fr;
  grid-gap: 0.5em;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-bottom: none;
  width: 100px;
}
.viewcomponent-action-menu > .content > .menu-items > .menu-item > .menu-item-icon {
  background-image: url('Images/Kokomoria_logo_color_256.png');
  background-repeat: no-repeat;
  background-size: contain;
  height: 64px;
  width: 64px;
  transition: filter 0.2s ease-in, filter 0.2s ease-in;
  margin: 0 auto;
}
.viewcomponent-action-menu > .content > .menu-items > .menu-item > .menu-item-display-name {
  margin: 0 auto;
  font-size: 1.2em;
  color: #f5c17d;
  transition: color 0.2s ease-in, color 0.2s ease-in;
}
.viewcomponent-action-menu > .content > .menu-items > .menu-item:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.viewcomponent-action-menu > .content > .menu-items > .menu-item:hover > .menu-item-display-name {
  color: #ffe9bc;
}
.viewcomponent-action-menu > .content > .menu-items > .menu-item:hover > .menu-item-icon {
  -webkit-filter: drop-shadow(0px 0px 8px #ffe9bc);
  filter: drop-shadow(0px 0px 8px #ffe9bc);
}
.island {
  height: 100%;
  width: 100%;
  background-image: url("Images/Island/Ocean_komp.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.island > .content {
  position: absolute;
  left: 50%;
  margin-left: -600px;
  width: 1200px;
  top: 50%;
  margin-top: -320px;
  height: 675px;
  background-image: url("Images/Island/Island_Ocean.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.island > .content > .content-items > .content-item {
  position: absolute;
  color: white;
  font-size: 10px;
  cursor: pointer;
}
.island > .content > .content-items > .content-item.-deco-object {
  background-image: none;
  background-color: green;
}
.island > .content > .content-items > .content-item.-game-object.-townhall {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 695px;
  margin-top: 215px;
  width: 32px;
  height: 32px;
}
.island > .content > .content-items > .content-item.-game-object.-storage {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 770px;
  margin-top: 270px;
  width: 32px;
  height: 32px;
}
.island > .content > .content-items > .content-item.-game-object.-quarters {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 710px;
  margin-top: 290px;
  width: 32px;
  height: 32px;
}
.island > .content > .content-items > .content-item.-game-object.-farm {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 920px;
  margin-top: 390px;
  width: 32px;
  height: 32px;
}
.island > .content > .content-items > .content-item.-game-object.-tavern {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 590px;
  margin-top: 300px;
  width: 32px;
  height: 32px;
}
.island > .content > .content-items > .content-item.-game-object.-quarry {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 970px;
  margin-top: 240px;
  width: 32px;
  height: 32px;
}
.island > .content > .content-items > .content-item.-game-object.-port {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 750px;
  margin-top: 360px;
  width: 32px;
  height: 32px;
}
.island > .content > .content-items > .content-item.-game-object.-smithery {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 510px;
  margin-top: 290px;
  width: 32px;
  height: 32px;
}
.island > .content > .content-items > .content-item.-game-object.-oremine {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 1030px;
  margin-top: 290px;
  width: 32px;
  height: 32px;
}
.island > .content > .content-items > .content-item.-game-object.-sawmill {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 370px;
  margin-top: 230px;
  width: 32px;
  height: 32px;
}
.island > .content > .content-items > .content-item.-game-object.-laboratory {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 885px;
  margin-top: 150px;
  width: 32px;
  height: 32px;
}
.island > .content > .content-items > .content-item.-game-object.-wall {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 410px;
  margin-top: 470px;
  width: 32px;
  height: 32px;
}
.island > .content > .content-items > .content-item.-game-object.-tower {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 460px;
  margin-top: 490px;
  width: 32px;
  height: 32px;
}
.island > .content > .content-items > .content-item.-game-object.-specialplace {
  background-image: url("Images/Island/Objs/Quarter_Level_1.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 180px;
  margin-top: 290px;
  width: 32px;
  height: 32px;
}