.card-footer{
  text-align: right;
}

img{
  width: 600px;
}

.text-center{
  color: #a0a0a0;
}

.yAxis text {
  font: 9pt sans-serif;
}

.x.axis text{
  font: 9pt sans-serif;
}

.y.axis text{
  font: 9pt sans-serif;
}

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

.colorXAxis text{
  font: 9pt sans-serif;
}

.centered-form{
  padding-right: 35px;
}

svg.map{
  background: #c5e0f5;
}

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

.vis-container{
  width: 80%;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

.map-tooltip {
  background: white;
  border: 2px solid #000000;
  border-radius: 8px;
  font-size: 9pt;
  font-weight: bold;
  height: 40px;
  margin-top: -20px;
  opacity: .8;
  pointer-events: none;
  position: absolute;
  text-align: center;
  /* width: 130px; */
}

.chart-tooltip{
  background: black;
  border: 2px solid white;
  border-radius: 5px;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  height: 40px;
  opacity: .8;
  pointer-events: none;
  position: absolute;
  text-align: center;
  width: 130px;
}

.linechart-tooltip{
  background: #000000;
  border: 2px solid grey;
  border-radius: 5px;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  height: 40px;
  opacity: .7;
  pointer-events: none;
  position: absolute;
  text-align: center;
  width: 100px;
}

.label{
  color: #000000;
  font-size: 1vw;
  text-anchor: middle;
}

header {
  text-align: center;
}

.title{
  text-align: center;
  color: white;
}

.vis-links{
   text-align: left;
}

.line-chart-title{
  text-align: center;
}

g {
  text-align:center;
}

.subtitle{
  text-align: center;
}

.bar{
  fill: #ffffff;
}

.grid line {
  shape-rendering: crispEdges;
  stroke: lightgrey;
  stroke-opacity: 0.7;
}

.grid path {
  stroke-width: 0;
}

.axis-label{
  font-size: 1.1vw;
  font-weight: bold;
}

.aux-axis-label{
  font-size: 0.9vw;
}

.aux-title{
  font-size: 1vw;
  font-weight: bold;
}

.btn-enemies{
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}

.btn-enemies.focus, .btn-enemies:focus{
  box-shadow: 0 0 0 .2rem rgba(220,53,69,.5);
}

.btn-enemies.my-focus{
  box-shadow: 0 0 0 .2rem rgba(220,53,69,.5);
}

.btn-enemies:not(:disabled):not(.disabled).active, .btn-enemies:not(:disabled):not(.disabled):active, .show > .btn-enemies.dropdown-toggle {
  color: #fff;
  background-color: #bd2130;
  border-color: #b21f2d;
}

.btn-allies{
  background-color: #28a745;
  border-color: #28a745;
  color: white;
}

.navbar {
  padding-top: 0.2rem; /* 0px does not look good on small screens */
  padding-bottom: 0.2rem;
  font-size: 10pt;      /* Just because I am using big size font */
  line-height: 1em;
}

.btn-allies.focus, .btn-allies:focus {
  box-shadow: 0 0 0 .2rem rgba(40,167,69,.5);
}

.context-btn-group{
  text-align: center;
  padding-bottom: 5px;
}

hr{
  margin: 0px 0 5px 0;
}

.btn-allies.my-focus{
  box-shadow: 0 0 0 .2rem rgba(40,167,69,.5);
}

.btn-allies:not(:disabled):not(.disabled).active, .btn-allies:not(:disabled):not(.disabled):active, .show > .btn-allies.dropdown-toggle {
  color: #fff;
  background-color: #1e7e34;
  border-color: #1c7430;
}

.btn-xs {
  padding: .25rem .4rem;
  font-size: .875rem;
  line-height: .5;
  border-radius: .2rem;
}

.form-control-sm{
  width: 100px !important;
}

/* Style the lines by removing the fill and applying a stroke */
.line {
  fill: none;
  stroke: #ffab00;
  stroke-width: 2;
}

.country-line {
  fill: none;
  stroke: #2166ac;
  stroke-width: 2;
}

.overlay {
  fill: none;
  pointer-events: all;
}

/* Style the dots by assigning a fill and stroke */
.dot {
  fill: #ffab00;
  stroke: #000000;
}

.country-dot {
  fill: #2166ac;
  stroke: #000000;
}

.chart-div{
  padding-top: 5px;
}

.fas{
  margin-left: 5px;
}

.linechart-legend-rect{
  fill: #ffab00;
}

.linechart-legend-country-rect{
  fill: #2166ac;
  opacity: .3;
}

body{
  background-color: #fafafa;
}

.linechart-legend-text{
  fill: #000000;
  font: 10pt sans-serif;
  text-anchor: start;
}

.linechart-legend-country-text{
  fill: #000000;
  font: 10pt sans-serif;
  opacity: .3;
  text-anchor: start;
}

.modal-header {
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

.modal-content {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  width: 220%;
  margin-left: -60%;
  text-align: justify;
  font-size: 10pt;
}

.modal-body {
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

.modal-body ul {
  padding-bottom: 0.1em;
  margin-bottom: 0.1em;
}

.modal-body h5 {
  padding-top: 0.2em;
  margin-top: 0.2em;
}

.modal-footer {
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

h7{
   color: rgba(255,255,255,.5);
}