.TRUPPS{
    height: 740px;
    width: 950px;
    margin-left: 0px;
    padding-left:0px;
    margin-right: 0px;
    padding-top:0px;
    background-color: rgba(51, 83, 50, 0);
}

.TRUPPS_Topleiste{
    height: 90px;
    width: 930px;
    padding-left: 10px; 
    padding-right: 10px;
    padding-top: 10px;
    margin-top: 5px;
    background-color: rgba(0, 0, 0, 0.192);
    background-image: url('/img/ui/bauen/brett.png');
    filter: contrast(82%);
    
    background-size: 100% 100%;
    background-position: center;
    border-color: black;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 4px;
}
.TRUPPS_Topleiste_Wrapper{
    height: 90px;
    width: 930px;
    background-color: rgba(71, 71, 71, 0);
    display: flex;
    align-content: flex-start;
    
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 7px;
    column-gap: 5px;
    padding-left: 0px; 
    padding-top: 0px;
    overflow: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    z-index: -2; 
}
.TRUPPS_Topleiste_Wrapper::-webkit-scrollbar { /* Scrollbars für Chrome */
    display: none; 
}

.TRUPPS_Topleiste_Element{
    order: 2;
    height: 80px;
    width: 60px;
    background-color: rgba(194, 194, 194, 0.342);
    position: relative;
}

.TRUPPS_Topleiste_img{
    height: 60px;
    width: 60px;
    position: absolute;
    filter: contrast(120%) brightness(100%);
    background-color: rgba(149, 243, 62, 0);
}

.TRUPPS_Topleiste_Anzahl{
    height: 20px;
    width: 60px;
    margin-top: 60px;
    margin-right: 0px;
    margin-left: 0px;
    background-color: rgb(75, 75, 75);
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    color: rgb(255, 255, 255)
}





.TRUPPS_Body{
    height: 610px;
    width: 950px;
    margin-left: 0px;
    padding-left:0px;
    margin-right: 0px;
    margin-top:10px;
    padding-top: 10px;
    padding-bottom: 0px;
    background-color: rgba(83, 72, 50, 0);
    background-image: url('img/ui/bg_trp_body.png');
    background-position: center;
    background-repeat: repeat;
    background-size: 100% 100%;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 4px;
}

.TRUPPS_Body_W{
    height: 610px;
    width: 950px;
    display: grid;
        grid-template-columns: 350px 600px;
        grid-template-rows: 35px 300px 35px 240px;
        grid-template-areas: 
                "C D"
                "C D"
                "F H"
                "F H";
        column-gap: 0px;
        row-gap: 0px;
    background-color: rgba(83, 50, 50, 0);
}



.TRUPPS_Body_Inhalt1{
    grid-area: C;
    background-color: rgba(102, 102, 102, 0);
}

.TRUPPS_Body_Inhalt2{
    grid-area: D;
    background-color: rgba(124, 124, 124, 0);
}

.TRUPPS_Body_Inhalt3{
    grid-area: F;
    background-color: rgba(163, 163, 163, 0);
}

.TRUPPS_Body_Inhalt4{
    grid-area: H;
    background-color: rgba(59, 19, 19, 0);
}


.TRUPPS_Body_Karte{
    height: 320px;
    width: 340px;
    margin-left: 10px;
    padding-left:0px;
    margin-right: 0px;
    margin-top:0px;
    background-color: rgba(63, 94, 59, 0);
    overflow: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    border-color: black;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 4px;
}

.TRUPPS_Body_Titel1_E{
    height: 25px;
    width: 340px;
    margin-left: 0px;
    margin-top: 0px;
    padding-top: 10px;
    background-color: rgba(59, 59, 59, 0.445);
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    color: rgb(255, 255, 255);
    border-bottom: 0.5px solid  rgb(80, 29, 29);
}

.TRUPPS_Body_Karte_W_Header{
    height: 80px;
    width: 340px;
    padding-top: 2px;
    padding-bottom: 2px;
    display: grid;
        grid-template-columns: 80px 20px 120px 120px;
        grid-template-rows:    40px 40px;
        grid-template-areas: 
                "A N B  C"
                "A N D  E"
                ;

        column-gap: 0px;
        row-gap: 0px;

    background-color: rgba(52, 52, 83, 0.473);
    border-bottom: 3px solid  rgb(80, 29, 29);
}

.TRUPPS_Body_Karte_E_IMG{
    grid-area: A;
    height: 80px;
    width: 80px;
    
}

.TRUPPS_Body_Karte_E_BTN1{
    grid-area: B;
    height: 40px;
    width: 120px;
    background-image: url('/img/ui/bauen/btn_leer_30x85.png');
    background-size: 100% 100%;
    position: relative;
    border: 0px;
    background-color: rgba(201, 73, 73, 0);
    cursor: pointer;
    text-align: center; 
    font-weight: bold;
    color: rgb(0, 0, 0);
    text-shadow: 0px 0px 4px #dddddd; 
}

.TRUPPS_Body_Karte_E_BTN2{
    grid-area: C;
    height: 40px;
    width: 120px;
    background-image: url('/img/ui/bauen/btn_leer_30x85.png');
    background-size: 100% 100%;
    position: relative;
    border: 0px;
    background-color: rgba(201, 73, 73, 0);
    cursor: pointer;
    text-align: center; 
    font-weight: bold;
    color: rgb(247, 148, 0);
    text-shadow: 0px 0px 4px #000000;
    
}

.TRUPPS_Body_Karte_E_BTN3{
    grid-area: D;
    height: 40px;
    width: 120px;
    background-image: url('/img/ui/bauen/btn_leer_30x85.png');
    background-size: 100% 100%;
    position: relative;
    border: 0px;
    background-color: rgba(201, 73, 73, 0);
    cursor: pointer;
    text-align: center; 
    font-weight: bold;
    color: rgb(92, 0, 0);
    text-shadow: 0px 0px 4px #ff6262;
    
    
}
.TRUPPS_Body_Karte_E_BTN4{
    grid-area: E;
    height: 40px;
    width: 120px;
    background-image: url('/img/ui/bauen/btn_leer_30x85.png');
    background-size: 100% 100%;
    position: relative;
    border: 0px;
    background-color: rgba(201, 73, 73, 0);
    cursor: pointer;
    text-align: center; 
    font-weight: bold;
    color: rgb(0, 0, 0);
    text-shadow: 0px 0px 4px #dddddd;
    
}

.TRUPPS_Body_Karte_Text_Editor{
    height: 140px;
    width: 340px;
    background-color: rgba(22, 165, 141, 0);
    margin-bottom: 40px;
}

.TRUPPS_Body_Karte_Text_Editor_Name{
    height: 30px;
    width: 340px;

    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
    background-color: rgba(22, 165, 141, 0.253);
}
.TRUPPS_Body_Karte_Text_Editor_Beschreibung{
    height: 110px;
    width: 340px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
    background-color: rgba(22, 165, 141, 0.253);
}


.TRUPPS_Body_Karte_W_Body{
    height: 90px;
    width: 340px;
    padding-left: 5px;
    margin-right: 0px;
    padding-top: 5px;
    display: grid;
        grid-template-columns: 20px 20px 20px 20px 30px   20px 20px 20px 20px 30px  20px 20px 20px 20px 30px;
        grid-template-rows:    20px 20px 20px 20px 5px 5px;
        grid-template-areas: 
                
                "P P E E E   Q Q F F F  R R G  G G "
                "P P E E E   Q Q F F F  R R G  G G "

                "S S H H H   T T I I  I  U U J  J J "
                "S S H H H   T T I I  I  U U J  J J "

                "V V K K K   W W L L  L  X X M  M M "
                "V V K K K   W W L L  L  X X M  M M ";

        column-gap: 0px;
        row-gap: 0px;
    background-color: rgba(87, 87, 87, 0.377);
    border-bottom: 0.5px solid  rgb(80, 29, 29);
    
}

.TRUPPS_Body_Karte_E_Wert1_IMG{
    grid-area: P;
    padding: 5px;
    
    
}
.TRUPPS_Body_Karte_E_Wert1{
    grid-area: E;
    padding: 10px;
    color: rgb(255, 166, 0);
    background-color: rgba(255, 255, 255, 0);
    text-shadow: 0px 0px 5px #000000;
    font-weight: bold;
    text-align: center;
   
    
}


.TRUPPS_Body_Karte_E_Wert2_IMG{
    grid-area: Q;
    padding: 5px;
}
.TRUPPS_Body_Karte_E_Wert2{
    grid-area: F;
    padding: 10px;
    color: rgb(255, 166, 0);
    background-color: rgba(255, 255, 255, 0);
    text-shadow: 0px 0px 5px #000000;
    font-weight: bold;
    text-align: center;
}

.TRUPPS_Body_Karte_E_Wert3_IMG{
    grid-area: R;
    padding: 5px;
}
.TRUPPS_Body_Karte_E_Wert3{
    grid-area: G;
    padding: 10px;
    color: rgb(255, 166, 0);
    background-color: rgba(255, 255, 255, 0);
    text-shadow: 0px 0px 5px #000000;
    font-weight: bold;
    text-align: center;
}

.TRUPPS_Body_Karte_E_Wert4_IMG{
    grid-area: S;
    padding: 5px;
}
.TRUPPS_Body_Karte_E_Wert4{
    grid-area: H;
    padding: 10px;
    color: rgb(255, 166, 0);
    background-color: rgba(255, 255, 255, 0);
    text-shadow: 0px 0px 5px #000000;
    font-weight: bold;
    text-align: center;
}

.TRUPPS_Body_Karte_E_Wert5_IMG{
    grid-area: T;
    padding: 5px;
}
.TRUPPS_Body_Karte_E_Wert5{
    grid-area: I;
    padding: 10px;
    color: rgb(255, 166, 0);
    background-color: rgba(255, 255, 255, 0);
    text-shadow: 0px 0px 5px #000000;
    font-weight: bold;
    text-align: center;
}

.TRUPPS_Body_Karte_E_Wert6_IMG{
    grid-area: U;
    padding: 5px;
}
.TRUPPS_Body_Karte_E_Wert6{
    grid-area: J;
    padding: 10px;
    color: rgb(255, 166, 0);
    background-color: rgba(255, 255, 255, 0);
    text-shadow: 0px 0px 5px #000000;
    font-weight: bold;
    text-align: center;
}

.TRUPPS_Body_Karte_E_Wert7_IMG{
    grid-area: V;
    padding: 5px;
}
.TRUPPS_Body_Karte_E_Wert7{
    grid-area: K;
    padding: 10px;
    color: rgb(255, 166, 0);
    background-color: rgba(255, 255, 255, 0);
    text-shadow: 0px 0px 5px #000000;
    font-weight: bold;
    text-align: center;
}

.TRUPPS_Body_Karte_E_Wert8_IMG{
    grid-area: W;
    padding: 5px;
}
.TRUPPS_Body_Karte_E_Wert8{
    grid-area: L;
    padding: 10px;
    color: rgb(255, 166, 0);
    background-color: rgba(255, 255, 255, 0);
    text-shadow: 0px 0px 5px #000000;
    font-weight: bold;
    text-align: center;
}

.TRUPPS_Body_Karte_E_Wert9_IMG{
    grid-area: X;
    padding: 5px;
}    
.TRUPPS_Body_Karte_E_Wert9{
    grid-area: M;
    padding: 10px;
    color: rgb(255, 166, 0);
    background-color: rgba(255, 255, 255, 0);
    text-shadow: 0px 0px 5px #000000;
    font-weight: bold;
    text-align: center;
}

.TRUPPS_Body_Karte_Beschreibung{
    width: auto;
    min-height: 20px;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 5px;
    margin-top: 5px;

    background-color: rgba(250, 250, 250, 0.178);
    font-size: 14px;
    text-align: center;
    height: -moz-fit-content;
    height: fit-content;
    text-align: center; 
    color: rgb(17, 17, 17)
}



.TRUPPS_Body_Pool1{
    height: 320px;
    width: 575px;
    margin-left: 10px;
    padding-left:0px;
    margin-right: 0px;
    margin-top:0px;
    background-color: rgba(63, 94, 59, 0);
    border-color: black;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 4px;
}

.TRUPPS_Body_Titel2_E{
    height: 25px;
    width: 575px;
    margin-left: 0px;
    margin-top: 0px;
    padding-top: 10px;
    background-color: rgba(59, 59, 59, 0.445);
        text-align: center;
        font-weight: bold;
        font-size: 14px;
        color: rgb(255, 255, 255);
}

.TRUPPS_Body_Pool1_W{
    height: 260px;
    width: 550px;
    margin-top: 0px;
    padding:    10px;
    display: flex;
    align-content: flex-start;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 15px;
    column-gap: 5px;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    z-index: -2;
    background-color: rgba(201, 191, 191, 0);
  }

  .Einheiten_Element_Pool1{
        
    height: 80px;
    width: 80px;
    background-color: rgba(0, 0, 0, 0);
    position: relative;
    }

    .Einheiten_Element_img_Pool1{
        height: 80px;
        width: 80px;
        position: absolute;
        filter: contrast(100%) brightness(100%);
        background-color: rgba(149, 243, 62, 0);
    }
    .Einheiten_Element_Anzahl_Pool1{
        height: 15px;
        width: 79.5px;
        margin-top: 80px;
        padding-top: 2px;
        margin-right: 0px;
        margin-left: 0px;
        position: absolute;
        background-color: rgba(161, 161, 161, 0.219);
        text-align: center;
        font-size: 11px;
        font-weight: bold;
        background-color: rgb(75, 75, 75);
        text-align: center;
        font-weight: bold;
        font-size: 12px;
        color: rgb(255, 255, 255);
        border-color: black;
        border: 1px solid rgb(0, 0, 0);
        border-radius: 4px;
    }


.TRUPPS_Body_Pool2{
    height: 270px;
    width: 340px;
    margin-left: 10px;
    padding-left:0px;
    margin-right: 0px;
    margin-top:-5px;
    background-color: rgba(63, 94, 59, 0);
    border-color: black;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 4px;
}

.TRUPPS_Body_Titel3_E{
    height: 25px;
    width: 340px;
    padding-top: 10px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(59, 59, 59, 0.445);
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    color: rgb(255, 255, 255);
}

.TRUPPS_Body_Pool2_W{
    height: 230px;
    width: 340px;
    margin-top: 0px;
    padding:    10px;
    display: flex;
    align-content: flex-start;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 15px;
    column-gap: 5px;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    z-index: -2;
    background-color: rgba(201, 191, 191, 0);
  }

  .Einheiten_Element_Pool2{
        
    height: 60px;
    width: 60px;
    background-color: rgba(0, 0, 0, 0);
    position: relative;
    }

    .Einheiten_Element_img_Pool2{
        height: 60px;
        width: 60px;
        position: absolute;
        filter: contrast(100%) brightness(100%);
        background-color: rgba(149, 243, 62, 0);
    }
    .Einheiten_Element_Anzahl_Pool2{
        height: 15px;
        width: 60px;
        margin-top: 60px;
        padding-top: 2px;
        margin-right: 0px;
        margin-left: 0px;
        position: absolute;
        background-color: rgba(161, 161, 161, 0.219);
        text-align: center;
        font-size: 11px;
        font-weight: bold;
        background-color: rgb(75, 75, 75);
        text-align: center;
        font-weight: bold;
        font-size: 12px;
        color: rgb(255, 255, 255);
        border-color: black;
        border: 1px solid rgb(0, 0, 0);
        border-radius: 4px;
    }

.TRUPPS_Body_Pool3{
    height: 270px;
    width: 575px;
    margin-left: 10px;
    padding-left:0px;
    margin-right: 0px;
    margin-top:-5px;
    background-color: rgba(63, 94, 59, 0);
    border-color: black;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 4px;
}

.TRUPPS_Body_Titel4_E{
    height: 25px;
    width: 575px;
    margin-left: 0px;
    margin-top: 0px;
    padding-top: 10px;
    background-color: rgba(59, 59, 59, 0.445);
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    color: rgb(255, 255, 255);
}

.TRUPPS_Body_Pool3_W{
    height: 215px;
    width: 555px;
    margin-top: 0px;
    padding:    10px;
    display: flex;
    align-content: flex-start;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 15px;
    column-gap: 5px;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    z-index: -2;
    background-color: rgba(201, 191, 191, 0);
  }

  .Einheiten_Element_Pool3{
        
    height: 80px;
    width: 80px;
    background-color: rgba(0, 0, 0, 0);
    position: relative;
    }

    .Einheiten_Element_img_Pool3{
        height: 80px;
        width: 80px;
        position: absolute;
        filter: contrast(100%) brightness(100%);
        background-color: rgba(149, 243, 62, 0);
    }
    .Einheiten_Element_Anzahl_Pool3{
        height: 15px;
        width: 79.5px;
        margin-top: 80px;
        padding-top: 2px;
        margin-right: 0px;
        margin-left: 0px;
        position: absolute;
        background-color: rgba(161, 161, 161, 0.219);
        text-align: center;
        font-size: 11px;
        font-weight: bold;
        background-color: rgb(75, 75, 75);
        text-align: center;
        font-weight: bold;
        font-size: 12px;
        color: rgb(255, 255, 255);
        border-color: black;
        border: 1px solid rgb(0, 0, 0);
        border-radius: 4px;
    }