body {
    padding: 0px;
    margin: 0px;   
    background-color: #480075;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='100' y1='33' x2='100' y2='-3'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='100' y1='135' x2='100' y2='97'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%233d0063' fill-opacity='0.6'%3E%3Crect x='100' width='100' height='100'/%3E%3Crect y='100' width='100' height='100'/%3E%3C/g%3E%3Cg fill-opacity='0.5'%3E%3Cpolygon fill='url(%23a)' points='100 30 0 0 200 0'/%3E%3Cpolygon fill='url(%23b)' points='100 100 0 130 0 100 200 100 200 130'/%3E%3C/g%3E%3C/svg%3E");
    /* background by SVGBackgrounds.com */
}

svg {
    background-color:rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 0 3000px rgba(255, 255, 255, 0.336); 
    border: 2px solid black;
}

rect {
    fill: none;
    pointer-events: all;
}

input[type="button" i] {
    border: 2px solid black;
    color: black;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    font-size: 14px;
    margin: 10px 0px 5px 0px;
}

#loadFileXml {
    margin: 10px 50px 5px 0px;
}

input[type="button"]:disabled {
    opacity: 0.60; 
    cursor: not-allowed;  
}

.navigationContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.svgContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.playerTextBig {
    font-family: Arial;
    font-size: 20px;
    font-weight: bold;  
}

.playerText {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}

.playerTextHighlight {
    font-family: Arial;
    font-size: 13px;
    font-weight: 800;   
}

.bigText {
    font-family: Arial;
    font-size: 24px;
    font-weight: bold;  
}

.legendText {
    font-family: Arial;
    font-size: 10px;
    font-weight: bold; 
}

.legendTextHighlight {
    font-family: Arial;
    font-size: 11px;
    font-weight: 800;
}

.buildingText {
    font-family: Arial;
    font-size: 16px;
    fill: black;
    font-weight: bold;
    pointer-events: all;
}

.missileText {
    font-family: Arial;
    font-size: 11px;
    fill: black;
    font-weight: bold;
    pointer-events: all;
}

.d3-tip {
    line-height: 1; 
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: silver;
    font-size: 10px;
    font-family: Arial;
    border-radius: 2px;
}

.d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    position: absolute;
}

.d3-tip.n:after {
    content: "\25BC";
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
    text-align: center;
}

.d3-tip.s:after {
    content: "\25B2";
    margin: 0 0 1px 0;
    top: -8px;
    left: 0;
    text-align: center;
}

.d3-tip.e:after {
    content: "\25C0";
    margin: -4px 0 0 0;
    top: 50%;
    left: -8px;
}

.d3-tip.w:after {
    content: "\25B6";
    margin: -4px 0 0 -1px;
    top: 50%;
    left: 100%;
}

.nobuilding {
    fill: #ddd;
    stroke: black;
    stroke-width: 2;
}

.attack {
    fill: #870405;
    stroke: black;
    stroke-width: 2;
}

.defense {
    fill: #0560B7;    
    stroke: black;
    stroke-width: 2;
}

.energy {
    fill: forestgreen;    
    stroke: black;
    stroke-width: 2;
}

.tesla {
    fill: #ad750b;  
    stroke: black;
    stroke-width: 2;
}

.missile {
    fill: yellow;
    stroke: black;    
    stroke-width: 2;
}

.ironCurtain {
    fill: #43464B;
    stroke: black;    
    stroke-width: 2;
}