/*colore ispi blu #097492    arancione #ea6531   sfondo #e9e5d9*/

/*******************************************************************************
* Global                                                                       *
*******************************************************************************/
html, body, p, li, ul, div, span, h1, h2, h3, h4, h5, h6, a, svg * {
  font-family: "Raleway", sans-serif;
}

*, *:focus, *:active {
  outline:none !important;
}

svg * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

a:hover {
  cursor: pointer;
}

.jumbotron {
  background-color: #fff;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 !important;
}

.row {
  margin: 0px;
}

.ui-slider {
  margin: 10px 0;
}

.ui-state-highlight {
  height: 1.5em;
  line-height: 1.2em;
  border: 1px dashed #ccc;
  padding: 3px;
  width: 100%;
  margin: 3px 5px 3px 0;
  background-color: #eee;
}

#map_container, #lines_container, #main_container, #barchart_container, #data_container {
  margin-top: 20px;
}

#data_container p, #data_container li, #data_container span {
  font-size: 16px;
  font-weight: 300;
}

h5.subtitle_leadership_changes {
  font-weight: 700;
}

p.leadership_changes_description {
  font-size: 15px;
  font-weight: 300;

}
p.leadership_changes_description_detail {
  font-size: 13px;
  font-weight: 300;
}

.legendText, .legendAxis text, .yaxis text, .xAxis text, .xaxis text, #timeline_axis_bottom .tick text, #barchartSvg .yAxis text {
  font-size: 12px;
}

#timelineGroup .yaxis text, #mainBarchartSvg .yAxis .tick text {
  font-size: 11px;
}

.slider-container, #barchart_type {
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  padding: 5px 0;
  margin-bottom: 10px;
}

#year, #yearsMin, #yearsMax {
  display: inline;
  border:0;
  color: #097492;
  padding-left: 5px;
  width: 60px;
}

#yearsMin, #yearsMax {
  width: 50px;
}

.line {
  display: inline-block;
  width: 30px;
  border-width: 2px;
  margin-top: 0;
  margin-bottom: 4px;
}

.m-top-10 {
  margin-top: 10px;
}

/*******************************************************************************
* Navbar                                                                       *
*******************************************************************************/

.nav-tabs > li > a {
  padding: 10px;
}

.navbar-header > button {
  border: 1px solid #ccc;
}

@media (min-width: 768px) {
  ul.nav-tabs > li {
    display: table-cell;
    vertical-align: bottom;
  }
}

/*******************************************************************************
* Footer                                                                       *
*******************************************************************************/

div.footer > p {
  text-align: right;
  font-size: 14px;
  margin-bottom: 0px;
}

div.footer {
  padding: 15px 30px 15px 15px;
  background-color: #f8f8f8;
  border: 1px solid #e7e7e7;
  border-radius: 3px;
}

/*******************************************************************************
* Help                                                                         *
*******************************************************************************/
.help {
  margin: 10px;
  padding: 15px 30px 15px 15px;
  overflow: hidden;
  background-color: #eee;
  width: 100%;
  border-radius: 3px;
  color: #444;
}

.help p {
  font-size: 14px;
  margin-bottom: 0;
}

.showhide_help {
  cursor: pointer;
  margin-bottom: 10px;
}

/*******************************************************************************
* Main tab                                                                     *
*******************************************************************************/
@media (min-width: 768px) {
  #main_container.graphs {
    border-right: 1px solid lightgray;
  }
}

#main_container .subtitle {
  font-size: 15px;
  font-weight: 300;
}

.info_img {
  text-align: center;
}

.info_placeholder {
  font-size: 14px;
  text-align: center;
  color: #999;
  margin-top: 20px;
}

.legend_color {
  margin-right: 5px;
  width: 14px;
  height: 14px;
  display: inline-block;
}

/*******************************************************************************
* Map tab                                                                      *
*******************************************************************************/
#leadership_change_marker, #extended_scale {
  float: right;
}

#legend_description .panel-heading {
  cursor: pointer;
}

/*******************************************************************************
* Common Graphs                                                                *
*******************************************************************************/
text {
  font-size: 14px;
  fill: #444;
}

/*******************************************************************************
* Map                                                                          *
*******************************************************************************/
.country, .capital {
  cursor: pointer;
}

path.country {
  stroke: gray;
  stroke-width: 0.2;
}

path.country.selected {
  stroke-width: 1;
  stroke:  #097492;
}

.zoom_buttons text {
  fill: #ccc;
  font-size: 20px;
}

.zoom_buttons text:hover {
  cursor: pointer;
  fill: #bbb;
}

.map_mobile_legend_container {
  display: none;
}

@media (max-width: 768px) {
  .map_mobile_legend_container {
    display: block;
    background-color: rgba(0,0,0,0.05);
    border: 0.5px solid #ccc;
    margin: 10px;
  }

  .map_legend_container {
    display: none;
  }
}

/*******************************************************************************
* Timeline                                                                     *
*******************************************************************************/

.not_independent {
  fill: url(#notIndependent_pattern);
  opacity: 0.3;
  stroke: none;
}

.civil_war {
  fill: url(#civilWar_pattern);
  opacity: 0.3;
  stroke: none;
}

.legendContainer {
  border: 1px solid rgba(0,0,0,0.3);
  padding: 5px;
  display: inline-block;
  border-radius: 3px;
}

#switch-country {
  margin-top: 30px;
  cursor: pointer;
  color: #097492;
}

.disabled {
  pointer-events: none;
  color: gray !important;
}

/*******************************************************************************
* Linechart                                                                    *
*******************************************************************************/
.country_circle, .country2_circle, .subset_circle {
  fill: rgba(0,0,0,0);
}

.country_line, .country2_line, .subset_line {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: 1.5;
}

.country_line {
  stroke: #ea6531;
}

.country2_line {
  stroke: #008744;/*#b13500;*/
}

.subset_line {
  stroke: #097492;
}

@media (min-width: 768px) {
  .country_circle {
    fill: #ea6531;
  }

  .country2_circle {
    fill: #008744; /*#b13500;*/
  }

  .subset_circle {
    fill: #097492;
  }

  .country_circle, .country2_circle, .subset_circle {
    stroke-width: 2;
    stroke: #fff;
  }

  .country_circle:hover {
    stroke: #ea6531;
    fill: #fff;
  }

  .country2_circle:hover {
    stroke: #008744; /*#b13500;*/
    fill: #fff;
  }

  .subset_circle:hover {
    stroke: #097492;
    fill: #fff;
  }
}

/*******************************************************************************
* Barchart                                                                     *
*******************************************************************************/
#barchart_type {
  padding: 5px;
  border-top: 1;
}

#barchart_title {
  font-weight: bold;
}

.barchart_row {
  margin: 0px;
}

.stack rect {
  cursor: pointer;
}

#legend_barchart_elements {
  font-size: 12px;
  padding-left: 15px;
  list-style-type: none;
  margin-top: 10px;
}

.legend_item {
  cursor: move;
}

p.title_text {
  font-size: 16px;
}

/*******************************************************************************
* Tooltip                                                                      *
*******************************************************************************/
.tooltip {
  pointer-events: none;
  opacity: 0;
}

.tooltip-visible {
  opacity: 1;
}