* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  background: black;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; }

#content {
  margin-top: 30px; }

[class^="row"] {
  display: flex; }

.row2 {
  margin-left: 37px;
  margin-top: -27px; }

.row3 {
  margin-top: -23.5px; }

[id^="Feld_ID"] {
  width: 50px;
  height: 50px; }

.kontex-add-user {
  width: 260px;
  padding: 5px;
  background: grey;
  border-radius: 5px; }

.kontex-move-user {
  width: 260px;
  padding: 5px;
  background: rgba(128, 128, 128, 0.582);
  border-radius: 5px; }
  .kontex-move-user .hide-team {
    font-size: 0.8rem; }

.green {
  background-image: url("/hero-wars/images/hero-wars_bg2_green.png"); }

.burg {
  background-image: url("/hero-wars/images/hero-wars_bg_schloss.png"); }

.dorf {
  background-image: url("/hero-wars/images/hero-wars_bg2_dorf.png"); }

.blatt {
  background-image: url("/hero-wars/images/hero-wars_bg2_blatt.png"); }

.grab {
  background-image: url("/hero-wars/images/hero-wars_bg2_grab.png"); }

.flex {
  display: flex; }
  .flex label {
    font-size: 12px;
    display: flex;
    background: grey;
    width: 100px; }

.octagon {
  width: 50px;
  height: 50px;
  cursor: pointer;
  margin-left: 12.5px;
  margin-right: 12.5px; }

.user-feld-daten {
  font-size: 10px;
  line-height: 1;
  margin-top: 6px;
  width: 80px;
  position: relative;
  margin-left: -15px;
  z-index: 1; }

.user-feld-gilde {
  display: flex;
  justify-content: center; }
  .user-feld-gilde p {
    border-radius: 5px;
    padding: 1px 3px 1px 3px;
    background: black; }

.user-feld-name {
  display: flex;
  justify-content: center; }
  .user-feld-name p {
    background: black;
    border-radius: 5px;
    padding: 1px 3px 1px 3px; }

.user-feld-kraft {
  display: flex;
  justify-content: center; }
  .user-feld-kraft p {
    color: white;
    background: black;
    border-radius: 5px;
    padding: 1px 3px 1px 3px; }

.user-feld-datum {
  display: flex;
  justify-content: center; }
  .user-feld-datum p {
    color: white;
    background: grey;
    padding: 1px 3px 1px 3px;
    border-radius: 5px; }

button {
  margin: 10px;
  padding: 5px; }

#head {
  margin-top: 5px; }
  #head .kontex-menu {
    margin: 5px; }
  #head .headhead {
    background: black;
    color: grey;
    padding: 5px;
    margin: 3px;
    font-size: 12px;
    border-radius: 5px; }
  #head .center {
    display: flex;
    justify-content: center; }

.tooltip {
  position: relative;
  background-color: black;
  color: white;
  padding: 5px;
  border-radius: 3px;
  left: 0;
  z-index: 10;
  width: 70px; }

.lol .user-feld-gilde, .lol .user-feld-name {
  color: violet; }
.lol .user-feld-gilde p {
  border: 1px solid violet; }

.lila .user-feld-gilde, .lila .user-feld-name {
  color: violet; }
.lila .user-feld-gilde p {
  border: 1px solid violet; }

.blau .user-feld-gilde, .blau .user-feld-name {
  color: #b7b7ee; }
.blau .user-feld-gilde p {
  border: 1px solid #b7b7ee; }

.rot .user-feld-gilde, .rot .user-feld-name {
  color: red; }
.rot .user-feld-gilde p {
  border: 1px solid red; }

.orange .user-feld-gilde, .orange .user-feld-name {
  color: orange; }
.orange .user-feld-gilde p {
  border: 1px solid orange; }

#input1_3, #input1_4 {
  width: 50px; }

.hinweis {
  font-size: 12px; }

input[type="checkbox"]:checked .blau {
  display: none; }