html {
    zoom: 67%;
}
body {
    font-family: Lato;
    padding-left:40px;
    padding-top: 0;
}
main {
    width: 100%;
}
.row{
    padding-bottom: 50px;
}
h1,h2 {
    font-family: "Arvo";
    font-size:35px;
    color: #464646;
    margin: 0px;
    /*padding: 0px;*/
    /* margin-left: 20px; */
    padding-bottom: 25px;
}
.info{
    margin-left: 20px;
}
.tile {
    stroke: #FFF;
    stroke-width: 4;
}
path{
    fill: none;
}
.playing{
    fill: #c2d8fc;
}
.playing:hover{
    fill: #4a89ef;
    stroke-width: 3px;
}
.map-selected{
    fill: #4a89ef;
    stroke-width: 3px;
}

.end{
    text-anchor:end;
}

.Axis{
    stroke: #eee;
    stroke-width: 4;
}

.content {
    display: inline-block;
    width: 80%;
    position: relative;
}

.sub_content {
    display: inline-block;
    width: 40%;
    position: relative;
    padding-right: 2%
}

.tile_view{
    display: inline-block;
    width: 80%;
    position: relative;
}

.sideBar {
    display: inline-block;
    width: 15%;
    float:right;
}

.middlePoint{
    stroke: #eee;
}

.fullView{
    display: inline-block;
    width: 100%;
}

.yearChart{
    stroke: #FFF;
}

.lineChart{
    stroke:#000;
    /* stroke-dasharray: 4; */
}

image {
    opacity: 1;
}
.highlighted{
    filter: brightness(50%)
    /*opacity: 1.0;*/
}

.brush .selection {
    fill-opacity: .5;
}
image > .selected{
    opacity: 1.0;
}

.selected{
    stroke: #404040;;
    stroke-width:4;
    r:25px;
}


h2{
    -webkit-margin-before: 5px;
    -webkit-margin-after:  5px;
}

h3{
    text-anchor:middle;
    font-size: 32px;
}

.axis { 
    font: 14px sans-serif; 
}

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 35%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}
.button{
    fill:#d95f02
}
.highlightedButton{
    fill:darkred
}

/*tooltip */

div.tooltip {
    display: flex;
    position: absolute;
    text-align: center;
    padding: 2px;
    background: lightblue;
    stroke: black;
    border-radius: 4px;
    pointer-events: none;
}

.tooltip h2 {
    margin: auto;
    font: 14px sans-serif;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.axis-label {
    font-size: 11px;
}

.team1{
    fill: #d95f02;
    stroke: #d95f02
}

.team2{
    fill: #1f78b4;
    stroke: #1f78b4
}

.runsPathTeam1{
    fill: none;
    stroke:#d95f02;
}
.runsPathTeam2{
    fill: none;
    stroke: #1f78b4;
}

.y-label,
.x-label{
    width: 1%7;
    display: inline-block;
    float: left;
    padding-right: 5px;
}

table {
    /*border-collapse: collapse;*/
    font-size: 20px;
    padding-left: 100px;
}

th {
    font-weight: bold;
    text-align: left;
    padding-right: 6px;
    min-width: 125px;
    font-size: 24px;
    border-right: none;
}

thead td , th{
    cursor: s-resize;
}

tbody tr:first-child td {
    padding-top: 5px;
}

tbody th{
    cursor:pointer;
    font-weight: bold;
}
tbody td {
    padding-right: 5px;
    padding-left: 5px;
    /*border-left: solid 1px #000;*/
    color:black;
}

tbody tr:hover {
    background-color: #e5efff;
}
/*thead > tr > td{
    font-weight: bold;
}*/
td{
    border-collapse: collapse;
    border-right: 1px solid grey;
    border-bottom: none;
}
tr>td: nth-child(6){
    border-right: none;
}
th: nth-child(6){
    border-right: none;
}
tr.clicked {
    background-color: #e5efff;
}

tr.winner:after {
    /*display: block;
    content: "winner";
    width: 3px;
    height: 5px;
    background: transparent url('/visproject/ProjectCode/TeamLogos/trophy.jpg') no-repeat;*/
    content: url('/visproject/ProjectCode/TeamLogos/trophy.png');
}

.highlightedText{
    font-weight: bold;
    font-size: 18px;
}

.text{
    font-size: 18px;
}

.mapTooltip{
    position: absolute;
    display: flex;	
    text-align: center;
    padding: 2px;
    background: lightblue;
    stroke: black;
    border-radius: 4px;
    pointer-events: none;
    font-size: 15;
}