/**
 * Vaccine Safety - Main CSS File
 * 
 * Custom styles for the vaccine safety product.
 */

/* Interactive figure controls */
#figure1 h3,
#figure2 h3,
#figure3 h3,
#figure4 h3 {
  line-height: 1.75;
}

#figure1 select,
#figure2 select,
#figure3 select,
#figure4 select {
  max-width: 100%;
  vertical-align: baseline;
}

.chart-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

.chart-wrapper svg {
  display: block;
  height: auto;
  max-width: 100%;
}

#fig1-container {
  width: 100%;
}

#fig1-container .axis-title {
  font-size: 16px;
  font-weight: 700;
}

#fig1-container .figure1-legend text {
  font-size: 16px;
}

#fig2-container,
#fig3-container {
  width: 100%;
}

#fig1-container .axis-title,
#fig2-container .axis-title,
#fig3-container .axis-title,
#fig4-container .axis-title {
  font-size: 1em;
  /*font-weight: 700;*/
}

#fig1-container .tick text,
#fig2-container .tick text,
#fig3-container .tick text {
  font-size: 1.4em;
}

#fig4-container .c0 .tick text {
  font-size: 1.2em;
}

#fig4-container .n .tick text {
  font-size: 1.4em;
}

.suppressed-chart-legend text {
  font-size: 16px;
}

.suppressed-value {
  font-size: 16px;
  font-weight: 700;
}

.suppression-key {
  margin-top: 8px;
}

/*#fig1-container .domain,*/
/*#fig1-container .tick line {*/
/*  stroke: #666;*/
/*}*/

/* Tooltip styling */
div.tooltip {
  background-color: white;
  color: black;
  border: 1px solid black;
  border-radius: 5px;
  padding: 10px;
  position: fixed;
  max-width: 200px;
  pointer-events: none;
  z-index: 1050;
}


table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc {
  background-color: #26374A;
}
table.dataTable thead .sorting_asc {
  background-image: url(/src/img/sorting-icons/sort_asc.png)!important;
padding-right: 15px;
}
table.dataTable thead .sorting_desc {
  background-image: url(/src/img/sorting-icons/sort_desc.png)!important;
padding-right: 15px;
}
table.dataTable thead .sorting {
  background-image: url(/src/img/sorting-icons/sorting_both.png)!important;
padding-right: 15px;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center right;
}
table.dataTable thead .sorting-cnt {
  white-space: nowrap;
  display: none !important;
}

.boxes {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  padding-left: 3px;
  padding-right: 3px;
  height: 10%;
  /* align-items: center;*/
  justify-content: center;
}

/* a instead of .anchor*/
.boxes .anchor, 
.boxes .anchor:visited,
.boxes .anchor:focus {
  flex: 1 0 23%;
  display: flex;
  flex-wrap: wrap;
  border: 3px solid #ccc;
  border-radius: 10px;
  margin: 10px;
  text-decoration: none;
  color: black;
  justify-content: center;
}

/* a instead of .anchor*/
.boxes .anchor2, 
.boxes .anchor2:visited,
.boxes .anchor2:focus {
  flex: 1 0 47%;
  display: flex;
  flex-wrap: wrap;
  border: 3px solid #ccc;
  border-radius: 10px;
  margin: 10px;
  text-decoration: none;
  color: black;
  justify-content: center;
}

.boxes > .anchor:hover,
.boxes > .anchor2:hover,
.boxes > .halfScreen:hover {
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 2px 2px;
}

.boxes .halfScreen,
.boxes .halfScreen:visited,
.boxes .halfScreen:focus {
  flex: 0 0 48%;
  display: flex;
  flex-wrap: wrap;
  border: 3px solid #ccc;
  border-radius: 10px;
  margin: 10px;
  text-decoration: none;
  color: black;
  justify-content: center;
}

.boxes .halfScreen:hover {
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 2px 2px;
}

/*.box1 {*/
/*    margin: 10px 10% !important;*/
/*}*/

.innerBox {
  flex: 0 0 100%;
  /*border: 1px solid #ccc;*/
  /*border-radius: 10px;*/
  margin-left: 0px;
  margin-right: 3px;
  text-decoration: none;
  color: black;
  margin-bottom: 5px;
  justify-content: center;
}

.innerBox2 {
  flex: 0 0 97%;
  /*border: 1px solid #ccc;*/
  /*border-radius: 10px;*/
  margin-left: 0px;
  margin-right: 3px;
  text-decoration: none;
  color: black;
  margin-bottom: 5px;
}

.boxHeader {
  flex: 0 0 98%;
  margin: 5px;
  margin-top: 10px;
  text-decoration: bold;
  font-weight: bold;
  color: black;
}

.boxHeader-noBold {
  text-decoration: none;
  font-weight: normal;
  color: grey;
}

/*.innerBox div {*/
/*    padding-left: 3px;*/
/*    padding-right: 3px;*/
/*}*/

.boxes p {
  font-size: 18px;
  margin-top: 5px;
  margin-bottom: 0px;
}

.boxes p.h2 {
  font-size: 30px;
  margin-top: 15px;
  margin-bottom: 15px;
}

/* Download data button */
.downloadData {
  padding: 5px 10px;
  min-height: 0;
  margin-bottom: 6px;
}

.boxes sup {
  font-size: 65%;
}

@media (max-width: 767px) {
  .boxes .anchor,
  .boxes .anchor:visited,
  .boxes .anchor:focus {
    flex-basis: 100%;
  }

  /*#figure1 h3,*/
  /*#figure2 h3,*/
  /*#figure3 h3,*/
  /*#figure4 h3 {*/
  /*  line-height: 1.9;*/
  /*}*/
}

@media print {
  .downloadData {
    display: none !important;
  }

  .chart-wrapper {
    overflow: visible;
  }
}


/* DataTables layout: only multi-page tables show paging/info. */
.dataTables_wrapper .dataTables_filter { margin-bottom: 10px; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { margin-top: 8px; }
.dataTables_wrapper table.dataTable { margin-bottom: 0 !important; }

/* Keep axis strokes/ticks fully visible above chart marks. */
#fig1-container .domain, #fig2-container .domain, #fig3-container .domain, #fig4-container .domain, #fig4-container .tick, #fig4-container .tick text { opacity: 1 !important; visibility: visible !important; }
.axis-tick-interactions rect { cursor: pointer; }
#fig1-container .active-axis-mark, #fig2-container .active-axis-mark, #fig3-container .active-axis-mark { stroke: #111; stroke-width: 2px; vector-effect: non-scaling-stroke; }
#fig1-container circle.active-axis-mark { stroke-width: 3px; }
.suppressed-value { paint-order: stroke; stroke: #fff; stroke-width: 2px; stroke-linejoin: round; }