table.ArmyNodes {

    background-color: gray;
    border-collapse: collapse;
    width: 100%;
}

td.inbetween {
    font-size: 4px;
}

 tr.before.dragover {
    background-color: green;
}

tr.inbetween.dragover {
    background-color: green;
}

tr.ArmyUnit.dragover {
    background-color: green;
}

.ArmyCards.dragover {
    background-color: green;
}

.ArmyUnit .before {
    height: 10px;
    font-size: 5px;
    width: 100%;
    background-color: #F0F8FF;
}

tr.before {
    height: 10px;
    font-size: 5px;
}

tr.ArmyUnit {
    vertical-align: middle;
}

tr.ArmyUnit td {
    vertical-align: middle;
    padding-left: 3px;
    padding-right: 3px;
    row-gap: 0;
}


img.Crest {
    display: inline-block;
    height: 28px;
    width: auto;
}

img.Type {
    display: inline-block;
    height: 28px;
    width: auto;
}

img.stat {
    display: inline-block;
    height: 28px;
    width: auto;
}

tr.ArmyUnit div {
    vertical-align: middle;
    display: inline-block;
    height: 100%;
}

td.Name {
    text-align: left;
}

td.Crest {
    width: 35px;
}

tr.before.dragover.bred {
    background-color: red;
}

tr.inbetween.dragover.bred {
    background-color: red;
}

tr.ArmyUnit.dragover.bred {
    background-color: red;
}

.ArmyCards.dragover.bred {
    background-color: red;
}

.bred {
  background-color: red;
}

img.basket {
    padding: 2px;
    display: inline;
    height: 28px;
    width: auto;
    pointer-events: none;
}

img.basketOn {
    padding: 2px;
    display: none;
    height: 28px;
    width: auto;
    pointer-events: none;
}

.dragover img.basket {
    display: none;
}

.dragover img.basketOn {
    display: inline;
}

tr.cost {
    vertical-align: middle;
}

tr.cost td {
    vertical-align: middle;
}

.cost button {
    vertical-align: middle;
    background-color: transparent;
    border: none;
}

.cost button img {
    display: inline-block;
    height: 28px;
    width: auto;
}

.armyname {
    width: 100%
}

tr.Error {
    background-color: red;
}

tr.ArmyUnit.Error {
    background-color: orange;
}