:root {
    --tt-gold: #c49b2b;
    --bs-body-bg: #222;
    --bs-body-bg-rgb: 34,34,34;
    --tt-nav-bg: #111;
    --tt-nav-bg-rgb: 17,17,17;
    --bs-body-color: #ddd;
    --bs-body-color-rgb: 221,221,221;
    --tt-table-color1: var(--bs-body-bg);
    --tt-table-color2: var(--bs-primary);
    --tt-table-seperator: var(--bs-light);
    --tt-container-bg: #313131;
    --tt-border-radius: .25rem;
    --tt-rating-no-color: grey;
    --tt-rating-1-color: #930d0d;
    --tt-rating-2-color: #cd3333;
    --tt-rating-3-color: #cc7a00;
    --tt-rating-4-color: #ccb800;
    --tt-rating-5-color: #849b24;
    --tt-rating-6-color: #4d7326;
    --tt-rating-7-color: #4099bf;
    --tt-rating-8-color: #3972c6;
    --tt-rating-9-color: #793db6;
    --tt-rating-10-color: #401070;
}

nav#mainNavbar {
    background-color: rgba(var(--tt-nav-bg-rgb),1);
}

nav#mainNavbar a.navbar-brand img {
    height: 40px;
    border-radius: var(--tt-border-radius);
}

nav#mainNavbar,
nav#mainNavbar button {
    font-weight: bold;
}

nav#mainNavbar a.nav-link {
    white-space: nowrap;
}

.dropdown-menu {
    background-color: var(--bs-body-bg);
}

div#serverStatus > span::after {
    content: " · ";
}

div#serverStatus > span:last-child::after {
    content: "";
}

div#serverStatus > span {
    white-space: nowrap;
}

div.dataTables_length {
    margin-right: 10em;
}

table.display th, table.display td {
    text-align: center;
    white-space: nowrap;
}

body {
    margin-top: 60px;
}

.bg-container {
    background-color: var(--tt-container-bg);
}

.caption {
    padding-top: 30px;
}

/* unified table row height for tanks without mastery */
#tankListTable td {
    height: 32px;
}


.rating-1, .rating-2, .rating-3, .rating-4, .rating-5, .rating-6, .rating-7, .rating-8, .rating-9, .rating-10 {
    color: rgb(233, 233, 233);
    font-weight: bold;
    border-radius: var(--tt-border-radius);
}
.rating-none  { background-color: var(--tt-rating-no-color); } 
.rating-1  { background-color: var(--tt-rating-1-color); } 
.rating-2  { background-color: var(--tt-rating-2-color); } 
.rating-3  { background-color: var(--tt-rating-3-color); } 
.rating-4  { background-color: var(--tt-rating-4-color); } 
.rating-5  { background-color: var(--tt-rating-5-color); } 
.rating-6  { background-color: var(--tt-rating-6-color); } 
.rating-7  { background-color: var(--tt-rating-7-color); } 
.rating-8  { background-color: var(--tt-rating-8-color); } 
.rating-9  { background-color: var(--tt-rating-9-color); }
.rating-10 { background-color: var(--tt-rating-10-color); }

.pos-rating {
    width: 5ch;
    display: inline-block;
    text-align: end;
}

.pos-rating img,
img.icon {
    height: 24px;
    vertical-align: bottom;
}

.tankType
 {
    height: 32px;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    /* https://codepen.io/sosuke/pen/Pjoqqp */
}
.tank-type-mediumTank { background-image: url("/static/images/tanktypes-mediumTank.svg"); }
.tank-type-heavyTank  { background-image: url("/static/images/tanktypes-heavyTank.svg"); }
.tank-type-lightTank  { background-image: url("/static/images/tanktypes-lightTank.svg"); }
.tank-type-AT-SPG     { background-image: url("/static/images/tanktypes-AT-SPG.svg"); }
.tank-type-SPG        { background-image: url("/static/images/tanktypes-SPG.svg"); }

.tank-nation-china::after    { content: "China" }
.tank-nation-czech::after    { content: "Czech" }
.tank-nation-france::after   { content: "France" }
.tank-nation-germany::after  { content: "Germany" }
.tank-nation-italy::after    { content: "Italy" }
.tank-nation-japan::after    { content: "Japan" }
.tank-nation-poland::after   { content: "Poland" }
.tank-nation-sweden::after   { content: "Sweden" }
.tank-nation-uk::after       { content: "UK" }
.tank-nation-usa::after      { content: "USA" }
.tank-nation-ussr::after     { content: "USSR" }

.tank-tier-1::after    { content: "Ⅰ" }
.tank-tier-2::after    { content: "Ⅱ" }
.tank-tier-3::after    { content: "Ⅲ" }
.tank-tier-4::after    { content: "Ⅳ" }
.tank-tier-5::after    { content: "Ⅴ" }
.tank-tier-6::after    { content: "Ⅵ" }
.tank-tier-7::after    { content: "Ⅶ" }
.tank-tier-8::after    { content: "Ⅷ" }
.tank-tier-9::after    { content: "Ⅸ" }
.tank-tier-10::after   { content: "Ⅹ" }
.tank-tier-11::after   { content: "Ⅺ" }

.mastery {
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.mastery-1 { background-image: url("/static/d/achievements/markOfMastery1.png"); }
.mastery-2 { background-image: url("/static/d/achievements/markOfMastery2.png"); }
.mastery-3 { background-image: url("/static/d/achievements/markOfMastery3.png"); }
.mastery-4 { background-image: url("/static/d/achievements/markOfMastery4.png"); }

.gunmark-tank-moe {
    height: 32px;
    background-size: 48px;
    background-repeat: no-repeat;
    background-position: center;
}
.gunmark-tank-moe-china-1   { background-image: url("/static/d/achievements/ni/china_1_mark.png"); }
.gunmark-tank-moe-china-2   { background-image: url("/static/d/achievements/ni/china_2_marks.png"); }
.gunmark-tank-moe-china-3   { background-image: url("/static/d/achievements/ni/china_3_marks.png"); }
.gunmark-tank-moe-czech-1   { background-image: url("/static/d/achievements/ni/czech_1_mark.png"); }
.gunmark-tank-moe-czech-2   { background-image: url("/static/d/achievements/ni/czech_2_marks.png"); }
.gunmark-tank-moe-czech-3   { background-image: url("/static/d/achievements/ni/czech_3_marks.png"); }
.gunmark-tank-moe-france-1   { background-image: url("/static/d/achievements/ni/france_1_mark.png"); }
.gunmark-tank-moe-france-2   { background-image: url("/static/d/achievements/ni/france_2_marks.png"); }
.gunmark-tank-moe-france-3   { background-image: url("/static/d/achievements/ni/france_3_marks.png"); }
.gunmark-tank-moe-germany-1   { background-image: url("/static/d/achievements/ni/germany_1_mark.png"); }
.gunmark-tank-moe-germany-2   { background-image: url("/static/d/achievements/ni/germany_2_marks.png"); }
.gunmark-tank-moe-germany-3   { background-image: url("/static/d/achievements/ni/germany_3_marks.png"); }
.gunmark-tank-moe-italy-1   { background-image: url("/static/d/achievements/ni/italy_1_mark.png"); }
.gunmark-tank-moe-italy-2   { background-image: url("/static/d/achievements/ni/italy_2_marks.png"); }
.gunmark-tank-moe-italy-3   { background-image: url("/static/d/achievements/ni/italy_3_marks.png"); }
.gunmark-tank-moe-japan-1   { background-image: url("/static/d/achievements/ni/japan_1_mark.png"); }
.gunmark-tank-moe-japan-2   { background-image: url("/static/d/achievements/ni/japan_2_marks.png"); }
.gunmark-tank-moe-japan-3   { background-image: url("/static/d/achievements/ni/japan_3_marks.png"); }
.gunmark-tank-moe-poland-1   { background-image: url("/static/d/achievements/ni/poland_1_mark.png"); }
.gunmark-tank-moe-poland-2   { background-image: url("/static/d/achievements/ni/poland_2_marks.png"); }
.gunmark-tank-moe-poland-3   { background-image: url("/static/d/achievements/ni/poland_3_marks.png"); }
.gunmark-tank-moe-sweden-1   { background-image: url("/static/d/achievements/ni/sweden_1_mark.png"); }
.gunmark-tank-moe-sweden-2   { background-image: url("/static/d/achievements/ni/sweden_2_marks.png"); }
.gunmark-tank-moe-sweden-3   { background-image: url("/static/d/achievements/ni/sweden_3_marks.png"); }
.gunmark-tank-moe-uk-1   { background-image: url("/static/d/achievements/ni/uk_1_mark.png"); }
.gunmark-tank-moe-uk-2   { background-image: url("/static/d/achievements/ni/uk_2_marks.png"); }
.gunmark-tank-moe-uk-3   { background-image: url("/static/d/achievements/ni/uk_3_marks.png"); }
.gunmark-tank-moe-usa-1   { background-image: url("/static/d/achievements/ni/usa_1_mark.png"); }
.gunmark-tank-moe-usa-2   { background-image: url("/static/d/achievements/ni/usa_2_marks.png"); }
.gunmark-tank-moe-usa-3   { background-image: url("/static/d/achievements/ni/usa_3_marks.png"); }
.gunmark-tank-moe-ussr-1   { background-image: url("/static/d/achievements/ni/ussr_1_mark.png"); }
.gunmark-tank-moe-ussr-2   { background-image: url("/static/d/achievements/ni/ussr_2_marks.png"); }
.gunmark-tank-moe-ussr-3   { background-image: url("/static/d/achievements/ni/ussr_3_marks.png"); }



.icon-eikff {
    width: 64px;
    height: 64px; 
    margin-left: auto;
    margin-right: auto;
    background-image: url("/static/images/favicon.png");
}
/*begin tableControls*/

 .tableControls {
    width: 100%;
    padding: 0 0; 
    margin: 0px;
    border: 0px;
    white-space: nowrap;
 }
 .tableControls_left {    
    padding: 0px 2px 0px 0px;
    margin: 0px 0px 0px 0px;
}
.tableControls_center {  
    padding: 0px 0px 0px 2px;
    margin: 0px 0px 0px 0px;
}
.tableControls_right {  
    width: 100%;
    padding: 2px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
.tableControls_clear {
    clear: both;
}

@media (max-width: 500px) {
    .tableControls_left { 
        width: 100%; 
    }
    .tableControls_center { 
        width: 100%;
        padding: 2px 0px 0px 0px;
    }
}
     
@media (min-width: 500px) and (max-width: 768px) {
    .tableControls_left {
        width: 33%;
        float:left;
    }
    .tableControls_center {
        width: 66%;
        float: right;
    }
}
@media (min-width: 768px) {
    .tableControls {
        padding: 0 10px;
    }
    .tableControls_left {
        width: 22%;
        float: left;
        padding: 15px 0px 0px 10px;
        text-align: left;
    }
    .tableControls_center {
        width: 30%;
        float: left;
        padding: 15px 0px 0px 0px;
        text-align: center;
    }
    .tableControls_right {
        width: 42%;
        float: right;
        padding: 15px 10px 0px 0px;
        margin: 0px auto 0px auto;
        text-align: left;
    }
}

/*end tableControls*/

@media (max-width: 768px) {
    html {
        font-size: 0.875rem;
    }    
}

a { 
    color: inherit;
    text-decoration: none;
} 

table.dataTable tbody tr {
   background-color: var(--tt-table-color1);
}

table.dataTable tbody tr.selected {
    background-color: var(--bs-secondary);
}

table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even > .sorting_1,
table.dataTable.display tbody tr.even > .sorting_2,
table.dataTable.order-column.stripe tbody tr.even > .sorting_2,
table.dataTable.display tbody tr.even > .sorting_3,
table.dataTable.order-column.stripe tbody tr.even > .sorting_3,
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.odd > .sorting_2,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_2,
table.dataTable.display tbody tr.odd > .sorting_3,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_3
{
    background-color: transparent;
}

table.dataTable.display tbody tr.even,
table.dataTable.order-column.stripe tbody tr.even
{
    background-color: var(--tt-table-color1);
}

table.dataTable.display tbody tr.odd,
table.dataTable.order-column.stripe tbody tr.odd
{
    background-color: var(--tt-table-color2);
}

/*
table.dataTable tr.odd.currentPlayer,
table.dataTable tr.even.currentPlayer {
    background-image: repeating-linear-gradient(45deg, var(--tt-table-color1) 0px, var(--tt-table-color1) 30px, var(--tt-table-color2) 30px, var(--tt-table-color2) 60px);
}
*/

table.dataTable.display tr td {
    border-top: 1px solid var(--tt-table-seperator);
}
table.dataTable.display tbody tr:first-child td {
    border-top: 1px solid transparent;
}

table.ttTable tr,
table.ttTable td {
    height: 32px;
}

table.ttTable td:first-child,
table.ttTable th:first-child {
        padding: 0 10px;
}

table.ttTable td.dtr-control::before,
table.ttTable th.dtr-control::before {
    color: var(--bs-body-color) !important;
    border-color: var(--bs-body-color) !important;
    background-color: transparent !important;
}

.ratingsArrow {
    height: 1em;
    vertical-align: -0.1em;
}

.ratingUp, .ratingDown {
    height: 12px;
    width: 12px;
    margin-left: .2em;
    display: inline-block;
}

.ratingUp:before {
    content: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHZpZXdCb3g9IjAgMCAxMiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSItMTU1Ljc0IiB4Mj0iLTE3MS45NCIgeTE9IjU1OC44IiB5Mj0iNTQxLjI3IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDAsLTEuNjczMiwxLjE0NzYsMCwtMjY5LjAxLC0xMjQuOTYpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iIzgwZmYyNiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzJjOTYwMCIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgdHJhbnNmb3JtPSJtYXRyaXgoLjQzMDY3IDAgMCAuNDMwNjcgLTE0OS44MSAtNTYuNjQ2KSI+PHBhdGggZD0ibTM0OC43NyAxNDYuMzloNS4zNHYyMC44OWgxNS4zdi0yMC44OWg1LjM4bC0xMy4wMy0xMy44N3oiIGNvbG9yPSIjMDAwMDAwIiBmaWxsPSJ1cmwoI2EpIiBzdHJva2U9IiMxMTZiMWMiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS43NSIvPjwvZz48L3N2Zz4K");
}

.ratingDown:before {
    content: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHZpZXdCb3g9IjAgMCAxMiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSIxNTUuNTEiIHgyPSIxNzMuNDMiIHkxPSItNDU5Ljc1IiB5Mj0iLTQ0MC43MSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgwLDEuNjczMiwtMS4xNDc2LDAsLTIzNy4yOSwtMTg0LjI4KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNmZjJhMjYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM5NjAwMGQiIG9mZnNldD0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxnIHRyYW5zZm9ybT0ibWF0cml4KC40MzA3OCAwIDAgLjQzMDc4IC0xMTQuNDMgLTMxLjQ4OCkiPjxwYXRoIGQ9Im0yOTIuNTUgOTQuODY3aC01LjM1di0yMC44OTZoLTE1LjI5djIwLjg5NmgtNS4zOGwxMy4wMyAxMy44NzN6IiBjb2xvcj0iIzAwMDAwMCIgZmlsbD0idXJsKCNhKSIgc3Ryb2tlPSIjNmIxYTExIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNzUiLz48L2c+PC9zdmc+Cg==");
}

.gameWon {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjM1LjQ0bW0iIGhlaWdodD0iMjM1LjQ0bW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIzNS40NCAyMzUuNDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGZpbHRlciBpZD0iYiIgeD0iLS40Nzc0OCIgeT0iLS40Nzc0OCIgd2lkdGg9IjEuOTU1IiBoZWlnaHQ9IjEuOTU1IiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIxLjQ2MDMyMiIvPjwvZmlsdGVyPjxmaWx0ZXIgaWQ9ImEiIHg9Ii0uNTk4MDgiIHk9Ii0uNTgxMjQiIHdpZHRoPSIyLjIwMjQiIGhlaWdodD0iMi4yMzE5IiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIxLjQ2MDMyMiIvPjwvZmlsdGVyPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMi43MjEgLTMwLjc3MikiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzVmZTUzMyIgc3Ryb2tlLXdpZHRoPSIxMiI+PGNpcmNsZSBjeD0iMTA1IiBjeT0iMTQ4LjQ5IiByPSI2MC4yMTYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3R5bGU9InBhaW50LW9yZGVyOnN0cm9rZSBtYXJrZXJzIGZpbGwiLz48Y2lyY2xlIGN4PSIxMDUiIGN5PSIxNDguNDkiIHI9IjYwLjIxNiIgZmlsdGVyPSJ1cmwoI2IpIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpub3JtYWw7cGFpbnQtb3JkZXI6c3Ryb2tlIG1hcmtlcnMgZmlsbCIvPjxwYXRoIGQ9Im0xNjYuMTYgODcuNTgtNjEuMjM3IDk0LjIzNy0zMi4zMi0zNS43MjIiLz48cGF0aCBkPSJtMTY2LjE2IDg3LjU4LTYxLjIzNyA5NC4yMzctMzIuMzItMzUuNzIyIiBmaWx0ZXI9InVybCgjYSkiLz48L2c+PC9zdmc+Cg==");
}

.gameLost {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjM1LjQ0bW0iIGhlaWdodD0iMjM1LjQ0bW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIzNS40NCAyMzUuNDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGZpbHRlciBpZD0iYiIgeD0iLS4yODk4MiIgeT0iLS4yODk4MiIgd2lkdGg9IjEuNTc5NiIgaGVpZ2h0PSIxLjU3OTYiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMTIuMDQzMjk5Ii8+PC9maWx0ZXI+PGZpbHRlciBpZD0iYSIgeD0iLS4zMjU2MSIgeT0iLS4zMjU2MSIgd2lkdGg9IjEuNjUxMiIgaGVpZ2h0PSIxLjY1MTIiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNC45NTU1Nzk4Ii8+PC9maWx0ZXI+PC9kZWZzPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC05Ljg3OTYgLTUzLjM3MykiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMTIiPjxjaXJjbGUgY3g9IjEyNy42IiBjeT0iMTcxLjA5IiByPSI2MC4yMTYiIHN0cm9rZT0iIzk2MDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHlsZT0icGFpbnQtb3JkZXI6c3Ryb2tlIG1hcmtlcnMgZmlsbCIvPjxjaXJjbGUgY3g9IjEyNy42IiBjeT0iMTcxLjA5IiByPSI2MC4yMTYiIGZpbHRlcj0idXJsKCNiKSIgc3Ryb2tlPSIjOTYwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpub3JtYWw7cGFpbnQtb3JkZXI6c3Ryb2tlIG1hcmtlcnMgZmlsbCIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyLjYwMSAyMi41OTQpIiBzdHJva2U9IiM5NjAwMDEiPjxwYXRoIGQ9Im04MC4yMjIgMTIzLjcyIDQ5LjU1NiA0OS41NTYiLz48cGF0aCBkPSJtMTI5Ljc4IDEyMy43Mi00OS41NTYgNDkuNTU2Ii8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyLjYwMSAyMi41OTQpIiBmaWx0ZXI9InVybCgjYSkiIHN0cm9rZT0iIzk2MDAwMSI+PHBhdGggZD0ibTgwLjIyMiAxMjMuNzIgNDkuNTU2IDQ5LjU1NiIvPjxwYXRoIGQ9Im0xMjkuNzggMTIzLjcyLTQ5LjU1NiA0OS41NTYiLz48L2c+PC9nPjwvc3ZnPgo=");
}

.gameDraw {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjM1LjQ0bW0iIGhlaWdodD0iMjM1LjQ0bW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIzNS40NCAyMzUuNDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGZpbHRlciBpZD0iYiIgeD0iLS4yODk4MiIgeT0iLS4yODk4MiIgd2lkdGg9IjEuNTc5NiIgaGVpZ2h0PSIxLjU3OTYiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMTIuMDQzMjk5Ii8+PC9maWx0ZXI+PGZpbHRlciBpZD0iYSIgeD0iLS4zMjU2MSIgeT0iLS4zMjU2MSIgd2lkdGg9IjEuNjUxMiIgaGVpZ2h0PSIxLjY1MTIiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNC45NTU1Nzk4Ii8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk2OTY5NiIgc3Ryb2tlLXdpZHRoPSIxMiI+PGNpcmNsZSBjeD0iMTE3LjcyIiBjeT0iMTE3LjcyIiByPSI2MC4yMTYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3R5bGU9InBhaW50LW9yZGVyOnN0cm9rZSBtYXJrZXJzIGZpbGwiLz48Y2lyY2xlIGN4PSIxMTcuNzIiIGN5PSIxMTcuNzIiIHI9IjYwLjIxNiIgZmlsdGVyPSJ1cmwoI2IpIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpub3JtYWw7cGFpbnQtb3JkZXI6c3Ryb2tlIG1hcmtlcnMgZmlsbCIvPjxwYXRoIGQ9Im0xNTIuNzYgMTE3LjcyaC03MC4wODIiLz48cGF0aCB0cmFuc2Zvcm09InJvdGF0ZSg0NSAxMTcuNzIgMTE3LjcyKSIgZD0ibTE0Mi41IDkyLjk0My00OS41NTYgNDkuNTU2IiBmaWx0ZXI9InVybCgjYSkiLz48L2c+PC9zdmc+Cg==")
}

.ttTable .gameWon,
.ttTable .gameDraw,
.ttTable .gameLost {
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    min-height: 32px;
    width: 100%;
}

.gameCard h5 {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 1.3em;
}

#reportContainer .gameWon,
#reportContainer .gameDraw,
#reportContainer .gameLost {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#reportContainer .repWon .card-text {
    height: 72px;
}
#reportContainer .repBB .repTank .card {
    background-size: contain;
    background-position: top -40px right 0;
    background-repeat: no-repeat;
}

.onlineStatus {
    display: inline-block;
    vertical-align: top;
    height: 15px;
    width: 7px;
    margin-top: 4px;
}

.osOffline {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxNSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMS44NTIxIDMuOTY4OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Zz48cmVjdCB4PSIxLjkyNDhlLTciIHk9IjEuNTg3NSIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuMjY0NTgiIGZpbGw9IiM0ODQ4NDciIHN0cm9rZS13aWR0aD0iLjA2MzM2NiIvPjxyZWN0IHg9IjEuOTI0OGUtNyIgeT0iMi4xMTY3IiB3aWR0aD0iMS44NTIxIiBoZWlnaHQ9Ii4yNjQ1OCIgZmlsbD0iIzJkMmQyYiIgc3Ryb2tlLXdpZHRoPSIuMDY0NzE3Ii8+PHJlY3QgeD0iMS45MjQ4ZS03IiB5PSIxLjg1MjEiIHdpZHRoPSIxLjg1MjEiIGhlaWdodD0iLjI2NDU4IiBmaWxsPSIjMmUyZTJkIiBzdHJva2Utd2lkdGg9Ii4wNjc2MjMiLz48cmVjdCB4PSIxLjkyNDhlLTciIHk9IjIuMzgxMiIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuMjY0NTgiIGZpbGw9IiMzMTMxMmYiIHN0cm9rZS13aWR0aD0iLjA2ODA3MyIvPjxyZWN0IHg9IjEuOTI0OGUtNyIgeT0iMS4zMjI5IiB3aWR0aD0iMS44NTIxIiBoZWlnaHQ9Ii4yNjQ1OCIgZmlsbD0iIzVhNWE1OSIgc3Ryb2tlLXdpZHRoPSIuMDYxMTQzIi8+PHJlY3QgeD0iMS45MjQ4ZS03IiB5PSIxLjA1ODMiIHdpZHRoPSIxLjg1MjEiIGhlaWdodD0iLjI2NDU4IiBmaWxsPSIjNjg2ODY2IiBzdHJva2Utd2lkdGg9Ii4wNjMzNjYiLz48cmVjdCB4PSIxLjkyNDhlLTciIHk9IjIuNjQ1OCIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuMjY0NTgiIGZpbGw9IiMyNzI3MjUiIHN0cm9rZS13aWR0aD0iLjA2NzQyMiIvPjxyZWN0IHg9Ii0yLjY0N2UtMjMiIHk9Ii43OTM3NSIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuMjY0NTgiIGZpbGw9IiM2ZDZkNmIiIHN0cm9rZS13aWR0aD0iLjA2NDk5NSIvPjxyZWN0IHg9IjEuOTI0OGUtNyIgeT0iMi45MTA0IiB3aWR0aD0iMS44NTIxIiBoZWlnaHQ9Ii4yNjQ1OCIgZmlsbD0iIzQ2NDY0NiIgc3Ryb2tlLXdpZHRoPSIuMDczMzAxIi8+PHJlY3QgeT0iLTUuMjk0ZS0yMyIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuNzkzNzUiIGZpbGw9IiM2OTY5NjciIHN0cm9rZS13aWR0aD0iLjEyMjgzIi8+PHJlY3QgeD0iMS45MjQ4ZS03IiB5PSIzLjE3NSIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuNzkzNzUiIGZpbGw9IiM0MjQyNDIiIHN0cm9rZS13aWR0aD0iLjEzNzExIi8+PC9nPjxwYXRoIGQ9Im0wLjEyMjIgMC4xMjIydjMuNzI0M2gxLjYwNzd2LTMuNzI0M3oiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzBhMGEwYSIgc3Ryb2tlLW9wYWNpdHk9Ii42MDI2NSIgc3Ryb2tlLXdpZHRoPSIuMjQ0NCIvPjxwYXRoIGQ9Im0wLjM5NTA1IDAuMzk1MDV2My4xNzg3aDEuMDYydi0zLjE3ODd6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwYTBhMGEiIHN0cm9rZS1vcGFjaXR5PSIuNjk5NzgiIHN0cm9rZS13aWR0aD0iLjI2MDkyIi8+PC9zdmc+Cg==");
    }

.osGarage {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxNSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMS44NTIxIDMuOTY4OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Zz48cmVjdCB4PSIxLjkyNDhlLTciIHk9IjEuNTg3NSIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuMjY0NTgiIGZpbGw9IiNlOWZhYWMiIHN0cm9rZS13aWR0aD0iLjA2MzM2NiIvPjxyZWN0IHg9IjEuOTI0OGUtNyIgeT0iMi4xMTY3IiB3aWR0aD0iMS44NTIxIiBoZWlnaHQ9Ii4yNjQ1OCIgZmlsbD0iI2U5ZmFhYyIgc3Ryb2tlLXdpZHRoPSIuMDY0NzE3Ii8+PHJlY3QgeD0iMS45MjQ4ZS03IiB5PSIxLjg1MjEiIHdpZHRoPSIxLjg1MjEiIGhlaWdodD0iLjI2NDU4IiBmaWxsPSIjZGJlZmExIiBzdHJva2Utd2lkdGg9Ii4wNjc2MjMiLz48cmVjdCB4PSIxLjkyNDhlLTciIHk9IjIuMzgxMiIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuMjY0NTgiIGZpbGw9IiNiOGQyN2MiIHN0cm9rZS13aWR0aD0iLjA2ODA3MyIvPjxyZWN0IHg9IjEuOTI0OGUtNyIgeT0iMS4zMjI5IiB3aWR0aD0iMS44NTIxIiBoZWlnaHQ9Ii4yNjQ1OCIgZmlsbD0iI2I4ZDI3YyIgc3Ryb2tlLXdpZHRoPSIuMDYxMTQzIi8+PHJlY3QgeD0iMS45MjQ4ZS03IiB5PSIxLjA1ODMiIHdpZHRoPSIxLjg1MjEiIGhlaWdodD0iLjI2NDU4IiBmaWxsPSIjYjZlMjdiIiBzdHJva2Utd2lkdGg9Ii4wNjMzNjYiLz48cmVjdCB4PSIxLjkyNDhlLTciIHk9IjIuNjQ1OCIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuMjY0NTgiIGZpbGw9IiNiNmUyN2IiIHN0cm9rZS13aWR0aD0iLjA2NzQyMiIvPjxyZWN0IHg9Ii0yLjY0N2UtMjMiIHk9Ii43OTM3NSIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuMjY0NTgiIGZpbGw9IiM1ZTljMzAiIHN0cm9rZS13aWR0aD0iLjA2NDk5NSIvPjxyZWN0IHg9IjEuOTI0OGUtNyIgeT0iMi45MTA0IiB3aWR0aD0iMS44NTIxIiBoZWlnaHQ9Ii4yNjQ1OCIgZmlsbD0iIzVlOWMzMCIgc3Ryb2tlLXdpZHRoPSIuMDczMzAxIi8+PHJlY3QgeT0iLTUuMjk0ZS0yMyIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuNzkzNzUiIGZpbGw9IiM3OGIzNjAiIHN0cm9rZS13aWR0aD0iLjEyMjgzIi8+PHJlY3QgeD0iMS45MjQ4ZS03IiB5PSIzLjE3NSIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuNzkzNzUiIGZpbGw9IiM3OGIzNjAiIHN0cm9rZS13aWR0aD0iLjEzNzExIi8+PC9nPjxwYXRoIGQ9Im0wLjEyMjIgMC4xMjIydjMuNzI0M2gxLjYwNzd2LTMuNzI0M3oiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzBhMGEwYSIgc3Ryb2tlLW9wYWNpdHk9Ii42MDI2NSIgc3Ryb2tlLXdpZHRoPSIuMjQ0NCIvPjxwYXRoIGQ9Im0wLjM5NTA1IDAuMzk1MDV2My4xNzg3aDEuMDYydi0zLjE3ODd6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwYTBhMGEiIHN0cm9rZS1vcGFjaXR5PSIuNjk5NzgiIHN0cm9rZS13aWR0aD0iLjI2MDkyIi8+PC9zdmc+Cg==");
}

.osBattle {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBDcmVhdGVkIHdpdGggSW5rc2NhcGUgKGh0dHA6Ly93d3cuaW5rc2NhcGUub3JnLykgLS0+Cjxzdmcgd2lkdGg9IjciIGhlaWdodD0iMTUiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEuODUyMSAzLjk2ODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8Zz4KICA8cmVjdCB4PSIxLjkyNDhlLTciIHk9IjEuNTg3NSIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuMjY0NTgiIGZpbGw9IiNmNWUyOWYiIHN0cm9rZS13aWR0aD0iLjA2MzM2NiIvPgogIDxyZWN0IHg9IjEuOTI0OGUtNyIgeT0iMi4xMTY3IiB3aWR0aD0iMS44NTIxIiBoZWlnaHQ9Ii4yNjQ1OCIgZmlsbD0iI2Y1ZTI5ZiIgc3Ryb2tlLXdpZHRoPSIuMDY0NzE3Ii8+CiAgPHJlY3QgeD0iMS45MjQ4ZS03IiB5PSIxLjg1MjEiIHdpZHRoPSIxLjg1MjEiIGhlaWdodD0iLjI2NDU4IiBmaWxsPSIjZWZkNTk2IiBzdHJva2Utd2lkdGg9Ii4wNjc2MjMiLz4KICA8cmVjdCB4PSIxLjkyNDhlLTciIHk9IjIuMzgxMiIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuMjY0NTgiIGZpbGw9IiNlMWM0ODAiIHN0cm9rZS13aWR0aD0iLjA2ODA3MyIvPgogIDxyZWN0IHg9IjEuOTI0OGUtNyIgeT0iMS4zMjI5IiB3aWR0aD0iMS44NTIxIiBoZWlnaHQ9Ii4yNjQ1OCIgZmlsbD0iI2UxYzQ4MCIgc3Ryb2tlLXdpZHRoPSIuMDYxMTQzIi8+CiAgPHJlY3QgeD0iMS45MjQ4ZS03IiB5PSIxLjA1ODMiIHdpZHRoPSIxLjg1MjEiIGhlaWdodD0iLjI2NDU4IiBmaWxsPSIjZTZhYTYwIiBzdHJva2Utd2lkdGg9Ii4wNjMzNjYiLz4KICA8cmVjdCB4PSIxLjkyNDhlLTciIHk9IjIuNjQ1OCIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuMjY0NTgiIGZpbGw9IiNlNmFhNjAiIHN0cm9rZS13aWR0aD0iLjA2NzQyMiIvPgogIDxyZWN0IHg9Ii0yLjY0N2UtMjMiIHk9Ii43OTM3NSIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuMjY0NTgiIGZpbGw9IiNjYTg0M2YiIHN0cm9rZS13aWR0aD0iLjA2NDk5NSIvPgogIDxyZWN0IHg9IjEuOTI0OGUtNyIgeT0iMi45MTA0IiB3aWR0aD0iMS44NTIxIiBoZWlnaHQ9Ii4yNjQ1OCIgZmlsbD0iI2NhODQzZiIgc3Ryb2tlLXdpZHRoPSIuMDczMzAxIi8+CiAgPHJlY3QgeT0iLTUuMjk0ZS0yMyIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuNzkzNzUiIGZpbGw9IiNkNDhjNTQiIHN0cm9rZS13aWR0aD0iLjEyMjgzIi8+CiAgPHJlY3QgeD0iMS45MjQ4ZS03IiB5PSIzLjE3NSIgd2lkdGg9IjEuODUyMSIgaGVpZ2h0PSIuNzkzNzUiIGZpbGw9IiNkNDhjNTQiIHN0cm9rZS13aWR0aD0iLjEzNzExIi8+CiA8L2c+CiA8cGF0aCBkPSJtMC4xMjIyIDAuMTIyMnYzLjcyNDNoMS42MDc3di0zLjcyNDN6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwYTBhMGEiIHN0cm9rZS1vcGFjaXR5PSIuNjAyNjUiIHN0cm9rZS13aWR0aD0iLjI0NDQiLz4KIDxwYXRoIGQ9Im0wLjM5NTA1IDAuMzk1MDV2My4xNzg3aDEuMDYydi0zLjE3ODd6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwYTBhMGEiIHN0cm9rZS1vcGFjaXR5PSIuNjk5NzgiIHN0cm9rZS13aWR0aD0iLjI2MDkyIi8+Cjwvc3ZnPgo=");
}

a.tanksggLink, a.wotwikiLink, a.skill4ltuLink{
    text-indent: -9999px;
    height: 16px;
    width: 16px;
    overflow: hidden;
    display:inline-block 
}

a.tanksggLink{
    background: url("/static/images/tanksgg_favicon-16.png") top right;
}

a.wotwikiLink{
    background: url("/static/images/wotwiki_favicon.ico") top right;
}

a.skill4ltuLink{
    background: url("/static/images/skill4ltu.png") top right;
    background-size: 16px;
}

div.tankHeader {
    font-size: 2.5vh;
    color: var(--tt-gold);
    text-shadow: 0px 0px 10px black;
    position: relative;
    background-size: contain;
    border-radius: var(--tt-border-radius);
}

div.tankHeader > .tankName {
    position: absolute;
    top: calc(0% + .3em);
    left: calc(0% + 1em);
}

div.tankHeader > .tankHeaderInfo {
    position: absolute;
    top: calc(0% + 1.4em);
    left: calc(0% + 1em);
}

div.tankHeader > .tankHeaderInfo > .tankTier {
    position: absolute;
    top: 0%;
    left: 1em;
}

div.tankHeader > .tankHeaderInfo > .tankType {
    position: absolute;
    top: 0.5em;
    left: 0;
    height: .75em;
    width: .75em;
    background-size: 100%;
}

div.tankHeader > .expectedMastery {
    position: absolute;
    top: 0.5em;
    left: 75%;
}

div.tankHeader > .expectedMastery .masteryImg {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    padding-left: calc(1.5em);
}

/* Fixed ratio divs
 * https://stackoverflow.com/a/53245657 */
.ttRatio {
    display: grid;
  }
.ttRatio > * {
    grid-area: 1/1;
}

div.tankHeaderRatio {
    margin-bottom: 2em;    
}


div.tankstats {
    padding: 15px 10px;
}

#searchForm {
    position: relative;
}

#searchResults .tankTier {
    color: var(--tt-gold);
    text-align: center;
    position: relative;
    top: 0;
    left: 4px;
    height: 32px;
    width: 32px;
    font-size: 20px;
}

#searchResults .tankType {
    position: relative;
    top: 0;
    left: 4px;
    height: 32px;
    width: 32px;
}

#searchResults .tankName {
    position: relative;
    top: -64px;
    left: 64px;
    font-size: 1.5em;
    height: 64px;
    margin-top: calc((64px - 1.5em) / 2);
    display: flex;
    align-items: center;
}

#searchResults .playerName {
    position: relative;
    top: -32px;
    left: 64px;
    font-size: 1.5em;
    height: 32px;
    display: flex;
    align-items: center;
}

#searchResults .playerWR {
    position: relative;
    top: 0;
    left: 4px;
    height: 30px;
    width: 46px;
    margin: 1px;
    font-weight: normal;
    text-align: center;
}

#searchResults .playerWN8 {
    position: relative;
    top: 0;
    left: 4px;
    height: 30px;
    width: 46px;
    margin: 1px;
    font-weight: normal;
    text-align: center;
}

#searchResults .achievementImage,
#searchResults .mapImage {
    height: 64px;
}

#searchResults .achievementName {
    position: relative;
    top: -64px;
    left: 64px;
    font-size: 1.5em;
    height: 32px;
    display: flex;
    align-items: center;
}

#searchResults .achievementDesc {
    position: relative;
    top: -64px;
    left: 64px;
    height: 32px;
    display: flex;
    align-items: center;
}

#searchResults .mapName {
    position: relative;
    top: -32px;
    left: 64px;
    font-size: 1.5em;
    height: 32px;
    display: flex;
    align-items: center;
}


#searchResults .searchResult {
    position: relative;
    height: 64px;
    width: calc(100% - 4px);
    margin: 2px;
    border: 1px solid var(--bs-dark);
    border-radius: var(--tt-border-radius);
    overflow: hidden;
    display: block;
}

#searchResults > a:hover {
    text-decoration: none !important;
}

#searchResults {
    width: 100%;
    display: block;
    top: 40px;
}

td img.achievementTooltip {
    height: 2em;
}

.tippy-box .achievementTooltip .ATHeading {
    text-transform:uppercase;
    font-size: 2em;
}

.tippy-box {
    background-color: var(--bs-body-bg);
    border-radius: var(--tt-border-radius);
}

.tippy-box .tippy-content {
    border-width: 1px;
    border-radius: var(--tt-border-radius);
    border-style: solid;
}

.tippy-box .tippy-arrow {
    color: var(--bs-dark);
}

.tippy-box .achievementTooltip .achAwarded,
.tippy-box .achievementTooltip .achDesc,
.tippy-box .achievementTooltip .achCond,
.tippy-box .achievementTooltip .achHero {
    margin-top: 1em;
}

.verticalTableHeading{
    text-orientation: sideways;
    writing-mode: vertical-lr;
    text-transform: uppercase;
    vertical-align: bottom;
}


.topTank {
    color: #aaa;
    /* border: solid 2px var(--bs-dark); */
    text-align: center;
    background-image: url("/static/images/award-25.png");
    background-position: center;
    background-size: auto 90%;
    background-repeat: no-repeat;
    border-radius: var(--tt-border-radius);
}

.topTank .topTankName,
.topTank .topTankPlayer,
.topTank .topTankValue {
    font-size: larger;
    font-weight: bolder;
}

.topTank .topTankPlayer,
.topTank .topTankValue {
color: var(--tt-gold);
}

.topTank .topTankWith {
    font-size: smaller;
}

.topTank .topTankValue {
    font-size: larger;
}

.topTank .topTankDate {
    font-size: smaller;
}

#updateTablesButton,
.updateTableButton,
.generalIcons {
    width:  1.6em;
    height: 1.6em;
}

#updateTablesButton.animated,
.updateTableButton.animated {
    animation: 1s linear infinite update-animation;
}

@keyframes update-animation {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(180deg)
  }
}

.spinner {
    height: 5em;
    margin: auto;
    display: none;
}

.spinner.animated {
    animation: 1s linear infinite spinner-animation;
    display: block;
}

@keyframes spinner-animation {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg)
    }
  }
  
  
img.icon {
    height: 1.4em;
    width:  1.4em;
}

img.icon.iconDisabled {
    opacity: 0.3;
}

table.battleDetails td.br_subitem1 {
    padding-left: 3em;
}

table.battleDetails tr.br_spaceBefore td {
    padding-top: 2em;
}

table.battleDetails td.battleDetails {
    text-align: right !important;
}

.battle h4 {
    border-bottom: solid;
    border-width: 2px;
    padding-bottom: .2em;
}

#battleResults_teamScore .dataTable > thead > tr > th[class*="sort"]:before,
#battleResults_teamScore .dataTable > thead > tr > th[class*="sort"]:after {
    content: "" !important;
}

#battleResults_teamScore .dataTable > tbody > tr:hover {
    background-color: inherit;
}

#battleResults_teamScore table.dataTable.order-column tbody tr > .sorting_1,
#battleResults_teamScore table.dataTable.order-column tbody tr > .sorting_2,
#battleResults_teamScore table.dataTable.order-column tbody tr > .sorting_3,
#battleResults_teamScore table.dataTable.display tbody tr > .sorting_1,
#battleResults_teamScore table.dataTable.display tbody tr > .sorting_2,
#battleResults_teamScore table.dataTable.display tbody tr > .sorting_3 {
     background-color: inherit;
 }


#battleResults_teamScore .dataTable > thead > tr > th,
#battleResults_teamScore .dataTable td {
        padding-right: .3em;
}

#battleResults .br_teamScore_name,
#battleResults .br_teamScore_tank,
#battleResults .br_teamScore_achievements {
    text-align: start;
}

#battleResults .br_teamScore_damage,
#battleResults .br_teamScore_kills,
#battleResults .br_teamScore_xp,
#battleResults .br_teamScore_prestige {
    text-align: end;
}

#battleResults .br_teamScore_details .br_name_container > a > img {
    height: 1.3em;
}

#battleResults .br_teamScore_details .br_name,
#battleResults .br_teamScore_details .br_name_container {
    font-size: larger;
}

#battleResults .br_teamScore_details span.br_name {
    margin-right: .3em;
}

#battleResults .br_detailsAchievements > img {
    height: 4em;
}

#battleResults .br_row_killed,
#battleResults .br_row_killed td {
    background-color: rgba(120, 0, 0, 0.1);
}

#battleResults .br_row_activePlayer,
#battleResults .br_row_activePlayer td {
    background-color: #c49b2b18;
}

#battleResults .br_row_activePlayerKilled{
    background: repeating-linear-gradient( 135deg, #c49b2b18, #c49b2b18 20px, rgba(120, 0, 0, 0.1) 20px, rgba(120, 0, 0, 0.1) 40px);
}
#battleResults .br_row_activePlayerKilled td {
    background: transparent;
}

.platoonNumberBG{
    background-image: url(/static/images/platoon-shield.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    padding-top: .25em;
}

#battleResults #br_teamScore_ourTeam .achievementTooltip,
    #battleResults #br_teamScore_enemyTeam .achievementTooltip {
    height: 2em;
}

#battleResults .br_detailsTankImage {
    padding: 0;
}
#battleResults .br_detailsTankImage img {
    max-width: 100%;
}

#battleResults .br_wn8 span {
    padding: .2em .5em;
}

#battleResults img.achievementTooltip {
    height: 71px;
}


.align-center {
    text-align: center;
}

#br_headerMapImage {
    width: 100%;
    max-width: 25vh;
    max-height: 25vh;
}

#battleResults .br_tankImage {
    opacity: 0.6;
    position: relative;
    left: 40%;
    top: -75%;
    z-index: -100;
    width: 100%;
}

@media (max-width: 991px) {
    #battleResults .br_tankImage {
        visibility: hidden;
    }
}

@media (min-width: 1200px) {
    #battleResults .br_tankImage {
        max-width: 1200px;
    }
}


@media (min-width: 1600px) {
    #battleResults .br_tankImage {
        left: 50%;
    }
}

@media (min-width: 2000px) {
    #battleResults .br_tankImage {
        left: 60%;
    }
}

@media (min-width: 2500px) {
    #battleResults .br_tankImage {
        left: 70%;
    }
}

@media (min-width: 3000px) {
    #battleResults .br_tankImage {
        left: 80%;
    }
}


.ratingUpColor {
    color: var(--tt-rating-5-color);
}
.ratingDownColor {
    color: var(--tt-rating-2-color);
}

#personalScoreDetails img {
    height: 24px;
}

#personalScoreDetails img.disabled {
    opacity: 0.3;
}

#personalScoreDetails td {
    padding: 0;
}

#personalScoreDetails div.br_ps_bgImg {
    background-size: 36px;
    height: 36px;
    width: 36px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: end;
    align-items: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

#personalScoreDetails div.br_ps_bgImgDisabled {
    opacity: 0.3;
}

#personalScoreDetails div.br_ps_stunned {
    background-image: url(/static/d/pictures/stun.png);
}

#personalScoreDetails div.br_ps_spotted {
    background-image: url(/static/d/pictures/spotted.png);
}

#personalScoreDetails div.br_ps_assist {
    background-image: url(/static/d/pictures/assist.png);
}

#personalScoreDetails div.br_ps_block {
    background-image: url(/static/d/pictures/armor.png);
}

#personalScoreDetails div.br_ps_crits {
    background-image: url(/static/d/pictures/crits.png);
}

#personalScoreDetails div.br_ps_damage, div.br_ps_damageReceived {
    background-image: url(/static/d/pictures/damage.png);
}

#personalScoreDetails div.br_ps_kill {
    background-image: url(/static/d/pictures/kill.png);
}

#personalScoreDetails div.br_ps_count {
    height: 12px;
    width: 12px;
    font-size: 10px;
    border: solid black 1px;
    background-color: #000000CC;
    padding: 0;
    text-align: center;
    line-height: 1;
}

table#personalScoreDetails > tbody > tr > td {
    height: 40px;
    vertical-align: middle;
}

.tankBGImage {
    background-repeat: no-repeat;
    background-position: -10px top;
    padding-left: 50px;
}

table#personalScoreDetails .tankBGImage {
    height: 100%;
    background-size: auto 100%;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}

.costField {
    color: #c40b0b !important;
}

.creditsField::after{
    content: url('/static/d/pictures/CreditsIcon-1.png');
    margin-left: .3em;
}

.xpField::after{
    content: url('/static/d/pictures/NormalXpIcon.png');
    margin-left: .3em;
}

.freeXPField::after{
    content: url('/static/d/pictures/FreeXpIcon.png');
    margin-left: .3em;
}

.goldField::after{
    content: url('/static/d/pictures/GoldIcon-1.png');
    margin-left: .3em;
}


#mapsContainer .card {
    padding: 5px;
}

#mapsContainer .card-body {
    text-align: center;
}

#mapsContainer  div.mapDoughnut {
    width: 46%;
    margin: 0 1%;
    display: inline-block;
}
table.legend {
    width: 100%;
    table-layout:fixed;
}

table.legend > tbody > tr {
    height: 1em;
}

table.legend > tbody > tr > td {
    width: 50%;
    text-align: end;
    overflow:hidden;
    white-space:nowrap;
}

#reportContainer {
    text-align: center;
}

#reportContainer .list-group {
    text-align: start;
}

#reportContainer h5 {
    margin-bottom: 1.2em;
}

.reportRow .repMostPlayedWreath {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.reportRow .repMostPlayedTank1 .repMostPlayedWreath {
    background-image: url("/static/images/wreath-gold.png");
}

.reportRow .repMostPlayedTank2 .repMostPlayedWreath   {
    background-image: url("/static/images/wreath-silver.png");
}

.reportRow .repMostPlayedTank3 .repMostPlayedWreath {
    background-image: url("/static/images/wreath-bronze.png");
}

.reportRow .repGunmarkBackground {
    padding-left: 25%;
}

.reportRow .repGunmarkBackground {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left 10% top 0%;
}

.reportRow .rating-1,
.reportRow .rating-2,
.reportRow .rating-3,
.reportRow .rating-4,
.reportRow .rating-5,
.reportRow .rating-6,
.reportRow .rating-7,
.reportRow .rating-8,
.reportRow .rating-9,
.reportRow .rating-10 {
    padding: .4em .8em;
}

#playerReportLinksContainer .repShowButton {
    width: 100%;
}

#playerReportLinksContainer .repCustom input {
    display: block;
    width: 100%;
}

.session .pS_header,
.gc_header {
    border-bottom: 1px solid var(--bs-body-bg);
    padding: .5em .5em 0 .5em;
    margin: .5em 0;
}

.session .pS_modData.float-end {
    text-align: right;
}

.session .rating {
    padding: .1em .2em;
}

.session .pS_stats .card .card-body,
.session .pS_stats .card .card-header {
    text-align: center;
}

.session .pS_stats .card .card-body{
    padding: .3rem;
    color: white;
    font-weight: bolder;
}

.session .pS_stats .card .card-header {
    font-size: smaller;
    font-variant: small-caps;
    padding: 0;
}

.session .pS_stats canvas {
    max-height: 95%;
    position: absolute;
    z-index: 5;
}

.session .pS_gameCountInCanvas {
    position:relative;
    height: 0;
    width: max-content;
    top: calc(50% - 1em);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

#playerSessions .session .pS_tankImage {
    width: 112px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#sessionsContainer .session .pS_tankImage {
    width: 80px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.session .pS_tank .pS_tankShortName {
    width: 112px;
    height: 1.5em;
    padding-bottom: 2em;
    font-size: smaller;
    text-align: center;
    white-space: nowrap;
    position: sticky;
    top: 100%;
    margin-left: auto;
    margin-right: auto;
}

.session .pS_tankStats {
    display: flex;
    align-items: center;
}

.session .pS_tankStatsTable td.pS_tST_label,
.session .pS_tankStatsTable td.pS_tST_data {
    font-size: smaller;
}

.session .pS_tankStatsTable td.pS_tST_label,
#playerOverviewContainer td.sps_label {
    font-variant: small-caps;
    vertical-align: top;
}

.session .pS_tankStatsTable td.pS_tST_data,
#playerOverviewContainer td.sps_data {
    color: white;
    font-weight: bolder;
    vertical-align: top;
}

.shortPlayerStatsTable {
    display: inline-table;
}
.shortPlayerStatsTable td {
    padding: 5px;
}

#playerOverviewContainer .generalIcons {
    width: 1em;
    height: 1em;
    margin-bottom: .3em;
}

#playerOverviewContainer .playerOverview {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center ;
}

.session .pS_tank canvas {
    max-height: 60%;
    position: relative;
    top: 5%;
    z-index: 5;
}

.session .pS_tank .pS_tankGameCountInCanvas {
    position:relative;
    height: 0;
    width: max-content;
    top: calc((60% / 2) - .6em);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.session div.row,
#playerOverview div.row {
    height: 100%;
}

#playerOverview div.session {
    text-align: start;
}

.playerOverviewHeader img.icon {
    height: 32px;
    width: auto;
}

.gameCard,
.liveGame {
    padding-bottom: 0 !important;
    margin: 1em 0;
}

#loadMoreGameCards {
    margin: 1em 0;
    cursor: pointer;
    text-align: center;
}

.gameCard span.rating {
    padding: .1em .5em;
}

.gameCard span.noBreak,
.liveGame span.noBreak {
    display: inline-block;
}

.gameCard .gc_background,
.liveGame .lg_background {
    background-repeat: no-repeat;
    background-size: 50% auto;
    background-position: left 15% top 50%;
}

.gameCard .gc_mapImage,
.gameCard .gc_tankImage,
.liveGame .gc_mapImage,
.liveGame .gc_tankImage {
    width: 100%;
}

.gameCard .gc_tankImage,
.liveGame .gc_tankImage {
    transform: scale(-1, 1);
}

.liveGame .gameCardMapElement {
    padding-bottom: .5em;
}

.gameCard .gc_achievements img.achievementTooltip {
    height: 2em;
}

.gameCard .gc_date {
    text-align: end;
    font-size: small;
}

.gameCard h5 img.icon {
    height: 1em;
    width: 1em;
}

.liveGame .lg_recording {
    height: .8em;
    width: .8em;
    margin-right: .5em;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
    animation: recFadeInOut 1.5s linear forwards infinite
}

@keyframes recFadeInOut {
    0%,100% { opacity: .25; }
    50% { opacity: .8; }
}

.liveGame .lg_dead {
    color: #9e9e9e;
}

.liveGame .lg_dead .rating {
    opacity: .6;
}

.liveGame .lg_score {
    position: relative;
    float: right;
}

/*
.liveGame .lg_score .lg_ownScore {
    color: rgb(18, 209, 18);
}

.liveGame .lg_score .lg_enemyScore {
    color: rgb(204, 26, 26);
}
*/

.tankPopup,
.playerPopup {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    width: 50%;
    padding: .5em;
    border: white solid 1px;
    background-color: var(--bs-body-bg);
    overflow-x: scroll;
}

/* why? */
.tankPopup .popupHeader,
.playerPopup .popupHeader {
    margin-top: 1em;
}

.tankPopup .tankName {
    margin-right: 1em;
}

.tankPopup .tankType {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 1.3em;
}

#achievementImage {
    width: 180px;
}

@media (min-width: 768px) {
    #achievementDetails {
        position: relative;
        top: -160px;
        margin-left: 200px;
    }
}
@media (max-width: 767px) {
    #achievementImage {
        display: block;
        margin: auto;
    }
}

@media (max-width: 767px) {
    .tankPopup,
    .playerPopup {
        width: 100%;
    }
}