SWDB/public/css/teams.css

table#teams{
    width: 100%;
    border-collapse: collapse;
    border: 0.1em solid #000000;
    border-radius: 0.4em;
}

table#teams th{
    border-top: 0.1em solid #000000;
    border-bottom: 0.1em solid #000000;
    background-color: #00000066;
}

table#teams td{
    border-bottom: 0.1em solid #000000;
    text-align: left;
    padding: 0.2em;
}

table#teams td.odd{
    background-color: #00000033;
}

table#teams td.team h4{
    position: relative;
    margin: 0.1em;
}

table#teams td.team h4 img.area{
    top: 0;
    left: 0;
    width: 2em;
    height: 2em;
    border: 0.2em solid #555555;
    border-radius: 0.5em;
    background-color: #777777;
    vertical-align: middle;
}

table#teams td.team h4{
    vertical-align: middle;
}

table#teams td.team h4 span.stage{
    position: absolute;
    top: 1.3em;
    left: 0;
    width: 2.4em;
    text-align: right;
    text-shadow: 0 0 0.3em #000, 0 0 0.3em #000, 0 0 0.3em #000, 0 0 0.2em #000, 0 0 0.1em #000, 0 0 0.1em #000;
    pointer-events: none;
}

table#teams td.units{
    width: 12em;
    text-align: center;
}

table#teams td.units hr.frontline{
    display: block;
    width: 9em;
    margin: 0 auto 0.2em auto;
    color: #666666;
}

table#teams td.units div.monster_panel{
    font-size: 25%;
}

table#teams td.units div.monster_panel img.leader{
    width: 5em;
    height: 5em;
    display: block;
    position: absolute;
    top: -1.7em;
    left: -0.7em;
}

table#teams td.score{
    text-align: center;
}

table#teams td.action{
    text-align: center;
}
table#teams td.action a{
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
}

table#teams td.action a img{
    display: inline-block;
    width: 1em;
    margin-top: 0.25em;
    margin-left: 0.25em;
    height: 1em;
}

section#new_team{
    z-index: 1;
    display: none;
    position: fixed;
    width: 80%;
    height: 70%;
    margin: 0 10%;
    top: 10%;
    filter: drop-shadow(0 0 10em #000000) drop-shadow(0 0 6em #000000);
}

section#new_team table{
    width: 100%;
}

section#new_team table td.new_title{
    width: 10em;
    text-align: right;
    padding-right: 2em;
}

section#new_team table td.new_values{
    text-align: left;
    padding-right: 2em;
}

section#new_team select.new_area{
    display: none;
}

section#new_team select#new_area_difficulty{
    display: none;
}

section#new_team select#new_area_stage{
    display: none;
}

section#new_team div#new_team_units{
    background-color: #00000033;
    border-radius: 0.5em;
    height: 5em;
    text-align: left;
}

section#new_team div#new_team_units div.monster_panel{
    font-size: 50%;
    cursor: pointer;
}

section#new_team div#new_team_units div.monster_panel input.delete_unit{
    position: absolute;
    left: 0.1em;
    bottom: 0.1em;
    pointer-events: initial;
}

section#new_team div.new_unit{
    text-align: right;
    display: none;
}

section#new_team div.new_unit{
    text-align: right;
    display: none;
}

section#new_team div#new_team_units div.new_unit_slot{
    border: 0.15em solid var(--ui-color-border);
    border-radius: 0.6em;
    background-color: #ffffff55;
    width: 4em;
    height: 4em;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin: 0.1em;
}

section#new_team div#new_team_units div.new_unit_slot.leader{
    border: 0.15em solid #ff0000;
}
section#new_team div#new_team_units div.new_unit_slot.leader:before{
    content: " L";
    color: #ffffff;
    background-color: #ff0000;
    position: absolute;
    z-index: 20;
    border-top-left-radius: 0.15em;
    border-bottom-right-radius: 0.5em;
    display: block;
    padding: 0.1em 0.3em;
    font-weight: bold;
}

section#new_team td#new_units{
    position: relative;
}

section#new_team input#new_unit_id{
    display: none;
    position: absolute;
}

section#new_team div#new_unit_autocomplete{
    border: 0.1em solid #000000;
    display: none;
    border-radius: 0.5em;
    margin: auto auto auto 1em;
    position: absolute;
    z-index: 40;
}

section#new_team div#new_unit_autocomplete div{
    border: 0.05em solid #000000;
    text-align: left;
    text-transform: capitalize;
    font-variant: small-caps;
    cursor: pointer;
    color: var(--input-color);
    font-weight: var(--input-font-weight);
    padding: var(--input-padding);
    background: var(--input-background);
    border: var(--input-border);
    border-radius: var(--input-border-radius);
    text-shadow: var(--input-text-shadow);
    box-shadow: var(--input-box-shadow);
}

section#new_team div#new_unit_autocomplete div span{
    vertical-align: middle;
}

section#new_team div#new_unit_autocomplete div img{
    height: 1.5em;
    width: 1.5em;
    vertical-align: middle;
    border-radius: 0.1em;
    border: 0.1em solid #000000;
}

section#error{
    z-index: 2;
    display: none;
    position: fixed;
    width: 70%;
    height: 60%;
    margin: 0 15%;
    top: 15%;
    filter: drop-shadow(0 0 10em #000000) drop-shadow(0 0 6em #000000);
}