.first_last {
	background-color: #d2d2d2;
}

#main_section {
	background-color: #ffffff;
}

#checkboxNote {
  font-size: 13px;
}

#mapVisual {
  float: left;
  margin-left: 15px;
  width: 970px;
}

#stateChartViz {
  float: left;
  margin-left: 15px;
}

#multiChartViz {
  float: left;
  margin-left: 0px;
}

#multiChartLegend {
  width: 760px;
  float: left;
  display: inline;
  margin-top: 0px;
}

#repPreMCLegend {
  width: 50px;
  margin-top: 50px;
  margin-bottom: 20px;
  margin-left: 770px;
}

#mapTitle {
	background-color: #B1DAFB;
	height: 60px;
	width: 725px;
	margin-top: 10px;
	color: #000000;
  font-weight: bold;
	padding-top: 5px;
	text-align: center;
}

#chartTitle {
  background-color: #B1DAFB;
  height: fit-content;
  width: 725px;
  margin-top: 10px;
  color: #000000;
  font-weight: bold;
  padding-top: 5px;
  text-align: center;
}

#chartTitleMulti {
  background-color: #B1DAFB;
  height: 40px;
  width: 900px;
  margin-top: 10px;
  color: #000000;
  font-weight: bold;
  padding-top: 5px;
  text-align: center;
}

#mapNotesP {
  font-size: 10px;
}

#multiNotesP {
  font-size: 10px;
  padding-top: 20px;
}

#mapNotes_dash1 {
  margin-top: -35px;
  max-width: 800px;
}

.multiNotes_dash2 {
  margin-top: 15px;
  max-width: 900px;
  display: none;
}

#drugChartLegendTitle {
  font-size: 12px;
  font-weight: bold;
}

#mapSidebar {
  position: absolute;
  margin-left: 740px;
  width: 150px;
  height: 480px;
  padding-left: 5px;
}

#chartSidebar {
  position: absolute;
  margin-left: 740px;
}

#dropdownLabel {
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 5px;
}

#dropdownLabelMulti, #dropdownLabelDrugClass {
  font-size: 13px;
  font-weight: bold;
  text-align: left;
  margin-bottom: -4px;
  margin-left: 5px;
}

#dropdownLabelDrugClass {
  margin-left: 20px;
}

#stateDropdown{
  font-size: 12px;
  width: 150px;
  margin-left: 5px;
}

#doubleDropRow {
  margin-top: 20px;
  margin-left: -5px;
  margin-bottom: -20px;
  height: 55px;
}

/* Weird checkboxes inside dropdown segment */

#drugDropdownClass {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #000 solid;
  margin-left: 20px;
  background-color: #fff;
  position: relative;
  z-index: 2;
}

#checkboxes label {
  display: block;
  font-size: 11px;
  padding-left: 3px;
  margin-bottom: 1px;
}

#checkboxes label:hover {
  background-color: #d3d3d3;
}

#checkboxes input {
  margin-right: 3px;
  margin-top: 1px;
}

/*  End of weird checkboxes inside dropdown */

#stateDropdownMulti, #drugClassDropdown {
  font-size: 12px;
  width: 440px;
  margin-left: 5px;
}

#drugClassDropdown {
  margin-left: 20px;
}

#oneStateLegend{
  /*font-size: 12px;
  font-weight: bold; */
}

#infoG {
  height: 40px;
  width: 150px;
  border-top: 2px solid #d3d3d3;
  border-bottom: 2px solid #d3d3d3;
  /*padding-top: 3px;*/
  padding-left: 40px;
  font-weight: bold;
  font-size: 20px;
}

#DateOfAnalysis {
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: -5px;
}

#radioSection {
  font-size: 11px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 5px;
}

#pcInfo {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  margin-top: 100px;
}

#triangle {
  margin-left: 10px;
}

#fullTitle {
  margin-top: 30px;
}

#data_viz_area_multi {
  height: 400px;
}

input[type="radio"] {
  vertical-align: -1px;
}

.radioButtons {
  margin-left: 10px;
  font-size: 12px;
  margin-bottom: 2px;
}

.tooltip {
  position: absolute;
  padding: 7px;
  width: 250px;
  font-size: 11px!important;
  font-family: 'Open Sans' sans-serif;
  pointer-events: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  opacity: 0;

  -moz-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
}

.tooltip p {
  margin: 0;
  padding: 0;
}

.tooltip table {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  width: 100%;
}

.tooltipMap {
  position: absolute;
  padding: 7px;
  font-size: 11px!important;
  font-family: 'Open Sans' sans-serif;
  pointer-events: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  opacity: 0;

  -moz-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
}

.tooltipMap p {
  margin: 0;
  padding: 0;
}

.tooltipMap table {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  width: 100%;
}

/* Styling for missing data for the following drug classes */
#stateMissingDrugs {
  height: 50px;
  font-family: 'Merriweather', sans-serif;
  width: 400px;
  border: 1px solid black;
  border-radius: 3px;
  background-color: #d2d2d2;
}

#missingDrugsSpanContainer{
  margin-bottom: 1px;
  font-weight: normal;
  padding-left: 5px;
  padding-top: 5px;
  font-size: 12px;
}

#missingItems {
  height: 10px;
  font-size: 10px;
}

#stateMissing {
  font-style: italic;
  font-weight: bold;
}

ul li {
  margin-bottom: 0.2rem;
}

/* #multiNotes_dash2 {
  display: none;
} */

.headerTable {
  background-color: #075290;
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;
  font-weight: normal;
  font-size: 18px;
  border-radius: 4px;
}

.myTitleTable {
  font-family: Merriweather, serif;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: .5rem;
}

/* ul{
  list-style-type: disc;
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  list-style-position: inside;
} */

#fig1aTable {
  width: 100% !important;
}

#fig1aTable thead .sorting {
  background-image: url(../../images/sort_both_dark.png) !important;
}

#fig1aTable thead .sorting_asc {
  background-image: url(../../images/sort_asc.png) !important;
} 

#fig1aTable thead .sorting_desc {
  background-image: url(../../images/sort_desc.png) !important;
}

#fig1aTable thead {
  background-color: #b1dafb;
}

#fig1aTable thead th {
  font-weight: normal;
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid #075290;
  border-left: 1px solid  #dee2e6;
  border-right: 1px solid #dee2e6;
}

#fig1aTable tbody td {
  border-left: 1px solid  #dee2e6;
  border-right: 1px solid #dee2e6;
}

#fig1bTable {
  width: 100% !important;
}

#fig1bTable thead .sorting {
  background-image: url(../../images/sort_both_dark.png) !important;
}

#fig1bTable thead .sorting_asc {
  background-image: url(../../images/sort_asc.png) !important;
} 

#fig1bTable thead .sorting_desc {
  background-image: url(../../images/sort_desc.png) !important;
}

#fig1bTable thead {
  background-color: #b1dafb;
}

#fig1bTable thead th {
  font-weight: normal;
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid #075290;
  border-left: 1px solid  #dee2e6;
  border-right: 1px solid #dee2e6;
}

#fig1bTable tbody td {
  border-left: 1px solid  #dee2e6;
  border-right: 1px solid #dee2e6;
}

#fig2Table {
  width: 100% !important;
}

#fig2Table thead .sorting {
  background-image: url(../../images/sort_both_dark.png) !important;
}

#fig2Table thead .sorting_asc {
  background-image: url(../../images/sort_asc.png) !important;
} 

#fig2Table thead .sorting_desc {
  background-image: url(../../images/sort_desc.png) !important;
}

#fig2Table thead {
  background-color: #b1dafb;
}

#fig2Table thead th {
  font-weight: normal;
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid #075290;
  border-left: 1px solid  #dee2e6;
  border-right: 1px solid #dee2e6;
}

#fig2Table tbody td {
  border-left: 1px solid  #dee2e6;
  border-right: 1px solid #dee2e6;
}

#tableDq {
  width: 100% !important;
}

#table4 {
  width: 100% !important;
}

#tableDq thead .sorting {
  background-image: url(../../images/sort_both_dark.png) !important;
}

#tableDq thead .sorting_asc {
  background-image: url(../../images/sort_asc.png) !important;
} 

#tableDq thead .sorting_desc {
  background-image: url(../../images/sort_desc.png) !important;
  /* /nchs/nvss/vsrr/prov-county-drug-overdose/images/sort_desc.png 
  ../../images/sort_desc.png */
}

#tableDq thead {
  background-color: #b1dafb;
}

#tableDq thead th {
  font-weight: normal;
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid #075290;
  border-left: 1px solid  #dee2e6;
  border-right: 1px solid #dee2e6;
}

#tableDq tbody td {
  border-left: 1px solid  #dee2e6;
  border-right: 1px solid #dee2e6;
}

#table1 thead {
  background-color: #075290;
  color: #fff;
}

#table1 thead th {
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid #075290;
  border-left: 1px solid  #dee2e6;
  border-right: 1px solid #dee2e6;
  height: 10px;
  padding: 3px 4px;
}

#table1 tbody td {
  border-left: 1px solid  #dee2e6;
  border-right: 1px solid #dee2e6;
  padding: 3px 4px;
}

#table2 thead {
  background-color: #075290;
  color: #fff;
}

#table2 thead th {
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid #075290;
  border-left: 1px solid  #dee2e6;
  border-right: 1px solid #dee2e6;
  height: 10px;
  padding: 3px 4px;
}

#table2 tbody td {
  border-left: 1px solid  #dee2e6;
  border-right: 1px solid #dee2e6;
  padding: 3px 4px;
}

#table3 thead {
  background-color: #075290;
  color: #fff;
}

#table3 thead th {
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid #075290;
  border-left: 1px solid  #dee2e6;
  border-right: 1px solid #dee2e6;
  height: 10px;
  padding: 3px 4px;
}

#table3 tbody td {
  border-left: 1px solid  #dee2e6;
  border-right: 1px solid #dee2e6;
  padding: 3px 4px;
}

#table4 thead {
  background-color: #075290;
  color: #fff;
}

#table4 thead .sorting {
  background-image: url(../../images/sort_both_dark.png) !important;
}

#table4 thead .sorting_asc {
  background-image: url(../../images/sort_asc.png) !important;
} 

#table4 thead .sorting_desc {
  background-image: url(../../images/sort_desc.png) !important;
}

#table4 thead th {
  font-weight: normal;
  font-size: 15px;
  text-align: center;
  border-bottom: 1px solid #075290;
  border-left: 1px solid  #dee2e6;
  border-right: 1px solid #dee2e6;
  height: 10px;
  padding: 4px 11px;
}

#table4 tbody td {
  border-left: 1px solid  #dee2e6;
  border-right: 1px solid #dee2e6;
  padding: 3px 4px;
  font-size: 15px;
}

.tableFoot {
  margin-left: 15px;
}

.tableFootJr {
  margin-left: 15px;
  margin-top: 10px;
}

/* ________________________________________________________________________________________________ */
/* CSS for different screen sizes */
/* Note: This CSS is not for the graphs, we will be using D3 functions to scale the graphs */

/* Viewport 1 */
@media screen and (max-width: 2600px) and (min-width: 1440px){
  #boxedText{
    padding: 3px;
  }

  /* Single Line CSS */
  #chartTitle{
    width: 865px !important;
    height: fit-content;
  }

  /* Map CSS */
  #mapTitle{
    width: 865px;
    height: fit-content;
  }

  #mapSidebar{
    margin-left: 885px;
  }
	
  #chartSidebar {
	margin-left: 885px;	
  }

  #legendSVG{
    transform: translate(130px, -132%) !important;
  }

  #mapNotesP{
    font-size: 13px;
    padding-top: 50px;
  }

  /* Multi Chart CSS */
  #multiNotesP{
    font-size: 13px;
    padding-top: 50px;
  }

  #chartTitleMulti{
    width: 950px;
    height: fit-content;
  }

  #stateDropdownMulti, #drugClassDropdown{
    width: 465px;
  }

  #legendSVGmulti .firstCol, #legendSVGmulti .secondCol{ 
    font-size: 12px !important;
  }

  #repPreLegend {
    transform: translate(10px, 20px);
  }
}

/*Viewport 2 */
@media screen and (max-width: 1439px) and (min-width: 1200px){

  #boxedText{
    padding: 3px;
  }
	
  #legendSVG {
	transform: translate(65px, -145%) !important;
  }

  /* Map CSS */
  #mapNotesP{
    font-size: 13px;
  }

  /* Multi Chart CSS */
  #multiNotesP{
    font-size: 13px;
    padding-top: 20px;
  }

  #legendSVGmulti .firstCol, #legendSVGmulti .secondCol{ 
    font-size: 12px !important;
  }

  #stateDropdownMulti, #drugClassDropdown{
    width: 390px;
  }

  #chartTitleMulti{
    width: 800px;
    height: fit-content;
  }

  /* Datatable CSS */
  #fig1aTable tbody td{
    text-align: center;
  }

  #fig1aTable tbody td, #tableDq tbody td, #tableDq tbody td{
    text-align: center;
  }

  #multiChartLegend {
    margin-top: -30px;
    width: 760px;
  }

  #repPreMCLegend {
    margin-left: 770px;
  }

  #repPreLegend {
    transform: translate(-5px, -20px);
  }


}


/* Viewport 3 */
@media screen and (max-width: 1199px) and (min-width: 981px){  

  /* Editing main section text box */
  #boxedText{
    padding-left: 3px;
  }

  #fullTitle{
    font-size: 21px;
  }

  /* Single Line Chart Legend */
  #oneStateLegend{
    transform: translate(170px, -60px);
  }

  #chartSidebar{
    height: 85px;
    transform: translate(0px, 10px);
  }

  #chartTitle{
    width: 650px;
    height: fit-content;
  }

  /* Map CSS */
  #chartLegendSvg{
    transform: translate(-165px, 57px);
  }

  #mapTitle{
    width: 650px;
  }

  #mapSidebar {
    margin-left: 665px;
  }
	
  #chartSidebar {
    margin-left: 665px;
  }

  #legendSVG{
    transform: translate(25px, -60px) !important;
  }

  #data_viz_area_multi{
    margin-bottom: -50px;
  }

  /* Multi Line CSS */
  #stateDropdownMulti, #drugClassDropdown{
    width: 315px;
  }

  #multiChartLegend {
    width: 620px;
    float: left;
    display: inline;
    margin-top: -30px;
  }

  #chartTitleMulti{
    width: 650px;
    height: fit-content;
  }

  #legendSVGmulti rect{
    width: 300px;
  }

  /* #repPreMCLegend{
    transform: translate(-65px, 10px);
  } */

  #repPreMCLegend {
    width: 50px;
    margin-top: 50px;
    margin-bottom: 20px;
    margin-left: 630px;
  }

  #repPreLegend {
    transform: translate(10px, -20px);
  }  

  .secondCol {
    transform: translate(-70px, 0px);
  }

  /* Datatables CSS */
  /* Changed the size of the table headers in the graphs with ascending ordered data */
  #fig1aTable thead th, #fig1bTable thead .sorting, #tableDq thead .sorting_asc, 
  #tableDq thead .sorting_desc, #tableDq thead .sorting, #fig2Table_info, #fig2Table thead th,
  #fig1bTable thead th{
    font-size: 14px;
    padding: 5px 15px 5px;
  }

  #fig1aTable tbody td, .even td, .odd td, .odd .dt-body-center, #tableDq tbody td, #fig1bTable tbody td{
    padding: 5px;
    font-size: 12px;
    text-align: center;
  }


  /* Font-Size Edits */
  #table1 thead th, #table2 thead th, #table3 thead th, #table4 thead th{
    font-size: 14px;
  }
 
  #mapNotesP {
   font-size: 13px;
  }

  #multiNotesP {
    font-size: 13px;
    padding-top: 20px;
  }

  .techNoteTitles{
    font-size: 22px;
  }

  .mainNoteTitles{
    font-size: 25px;
  }
}

@media screen and (max-width: 980px) and (min-width: 945px) {
  /* Map Legend */
  #legendSVG{
    transform: translate(-466px, 370%) !important;
  }
	
  #mapNotes_dash1 {
	margin-top: 0px;
  }
} 

@media screen and (max-width: 944px) and (min-width: 769px) {
  /* Map Legend */
  #legendSVG{
    transform: translate(12px, -150%) !important; /*15px*/
  }
	
  /* #mapNotes_dash1 {
	margin-top: -35px;
  } */
}

@media screen and (max-width: 980px) and (min-width: 769px){

  /* Boxed Text */
  #boxedText{
    padding: 4px;
  }

  #topBox {
    width: 100% !important;
  }

  .optionsLinks{
    font-size: 14px;
  }

  /* Map CSS */
  #oneStateLegend{
    height: 30px;
  }

  #mapTitle{
    width: 480px;
    font-size: 14px;
    height: fit-content;
  }

  #pcInfo{
    font-size: 13px;
  }

  #USpc{
    font-size: 18px;
  }

  #mapSidebar{
    margin-left: 496px;
  }
	
  #chartSidebar{
    margin-left: 496px;
  }

  /* Single Line CSS */
  #chartTitle{
    width: 480px;
    height: fit-content;
    font-size: 14px;
  }

  /* Multi Line CSS */
  #drugClassDropdown, #stateDropdownMulti{
    width: 230px;
  }

  #chartTitleMulti{
    width: 480px;
    height: fit-content;
    font-size: 14px;
  }

  #legendSVGmulti rect{
    width: 235px;
  }

  #legendSVGmulti{
    width: 620px;
  }

  #data_viz_area_multi{
    height: 320px;
  }

  .secondCol{
    transform: translate(-140px);
  }

  #repPreLegend{
    transform: translate(5px, -75px) !important;
  }

  #repPreMCLegend {
    margin-left: 490px;
  }

 /* Font-Size Edits */
  #table1 thead th, #table2 thead th, #table3 thead th, #table4 thead th{
   font-size: 14px;
 }

  #multiNotesP{
   font-size: 13px;
   padding-top: 0px;
   margin-top: -35px;
  }

  #multiChartLegend{
    margin-top: -85px;
    width: 485px;
  }

  #mapNotesP{
    font-size: 13px;
  }

 .techNoteTitles{
   font-size: 22px;
  }

 .mainNoteTitles{
  font-size: 22px;
 }

 #fullTitle{
   font-size: 20px;
 }

 #DateOfAnalysis{
   font-size: 14px;
 }

 /* Datatables CSS */
  /* Changed the size of the table headers in the graphs with ascending ordered data */
  #fig1aTable thead th, #fig1bTable thead .sorting, #tableDq thead .sorting_asc, 
  #tableDq thead .sorting_desc, #tableDq thead .sorting, #fig2Table_info, #fig2Table thead th,
  #fig1bTable thead th{
    font-size: 14px;
    padding: 5px 15px 5px;
  }

  #fig1aTable tbody td, .even td, .odd td, .odd .dt-body-center, #tableDq tbody td, #fig1bTable tbody td, #fig2Table tbody td{
    padding: 3px;
    font-size: 12px;
    text-align: center;
  }

  /* Here we are editing the pagination, search, and show entries text */
  #fig1aTable_length label, #fig1bTable_length label, .dataTables_filter label,
  #fig1aTable_info, #fig1bTable_info, #fig1aTable_paginate, #fig1bTable_paginate, #tableDq_length, #tableDq_info,
  #tableDq_paginate, #fig2Table_length, #fig2Table_paginate{
   font-size: 12px;
  }

  #table1 thead th, #table2 thead th, #table3 thead th, #table4 thead th{
    font-size: 15px;
  }

}

@media screen and (max-width: 768px) and (min-width: 556px){

  /* Box of text under page title */
  #boxedText{
    padding: 4px;
  }

  #topBox {
    width: 100% !important;
  }

  /* Options Box */
  .optionsLinks{
    font-size: 13px;
  }

  /* Single Line CSS */
  #stateDropdown{
    margin-top: 5px;
  }

  /* Multi Line CSS */
  #repPreMCLegend {
    margin-left: 490px;
  }

  #repPreLegend {
    transform: translate(0px, -50px);
  }

  #chartTitleMulti{
    width: 800px;
    height: fit-content;
    margin-top: 50px;
  }

  #doubleDropRow {
    margin-top: 10px;
  }

  #dropdownDrugClass {
    margin-top: -15px;
  }

  #drugClassDropdown{
    width: 380px;
    margin-left: 5px;
  }

  #dropdownLabelDrugClass {
    margin-left: 5px;
  }

  #stateDropdownMulti{
    width: 380px;
  }

  #chartTitle, #chartTitleMulti {
    font-size: 14px;
    padding-top: 7px;
    width: 480px;
    height: fit-content;
  }

  #legendSVG {
    transform: translate(12px, -145%) !important;
  }

  #data_viz_area_multi{
    height: 340px ;
  }

  #legendSVGmulti rect{
    width: 235px;
  }

  .secondCol {
    transform: translate(-140px, 0px);
  }

  #oneStateLegend{
    height: 30px;
  }  

  /* Decreased the size of this because of overlapping space */
  #legendSVGmulti{
    width: 700px;
  }

  /* Map CSS */
  #mapSidebar{
    width: 100px;
    margin-left: 495px;
  }
	
  #chartSidebar {
	margin-left: 495px;
  }

  #pcInfo{
    font-size: 12px;
    margin-left: 8px;
    margin-top: 85px;
  }

  #infoG{
    margin-left: 8px;
    padding-left: 8px;
    width: 100px;
  }

  #radioSection{
    font-size: 11px;
  }

  #mapTitle{
    width: 480px;
    height: fit-content;
    font-size: 14px;
  }

  #USpc{
    font-size: 15px;
  }

  /* Just editing some font sizes */
  #fullTitle{
    font-size: 1.25rem;
  }

  #DateOfAnalysis{
    font-size: 14px;
  }

  /* Datatables CSS */
  .dataTables_wrapper .dataTables_paginate {
    font-size: 10px;
  }

  /* Changed the size of the table headers in the graphs with ascending ordered data */
  #fig1aTable thead th, #fig1bTable thead .sorting, #tableDq thead .sorting_asc, 
  #tableDq thead .sorting_desc, #tableDq thead .sorting, #fig2Table_info, #fig2Table thead th,
  #fig1bTable thead th{
    font-size: 14px;
    padding: 5px 15px 5px;
  }

  #fig1aTable tbody td, .even td, .odd td, .odd .dt-body-center, #tableDq tbody td, #fig1bTable tbody td{
    /* width: fit-content;
    height: fit-content; */
    padding: 0px;
    font-size: 12px;
    text-align: center;
   }

   #table1 thead th, #table2 thead th, #table3 thead th, #table4 thead th{
     font-size: 14px;
   }

   /* Font-Size Edits */
  #table1 thead th, #table2 thead th, #table3 thead th, #table4 thead th{
    font-size: 14px;
  }
 
  #mapNotesP {
    font-size: 13px;
   }

  #multiNotesP {
    font-size: 13px;
    padding-top: 0px;
    margin-top: -10px;
  }

  #multiChartLegend {
    margin-top: -60px;
    width: 485px;
  }
 
  .techNoteTitles{
    font-size: 22px;
   }
 
  .mainNoteTitles{
   font-size: 22px;
  }
 
  #fullTitle{
    font-size: 20px;
  }
 
  #DateOfAnalysis{
    font-size: 14px;
  }
}

@media screen and (max-width: 560px) and (min-width: 435px) {
  #chartTitle, #mapTitle{
    width: 510px;
    height: fit-content;
    font-size: 12px;
  }
	
  #mapTitle {
	margin-top: 72px;
  }

  #chartTitle {
    margin-left: 1px;
  }

  #chartTitleMulti{
    margin-top: 50px;
    width: 510px;
    height: fit-content;
    font-size: 12px;
  }

  #multiChartLegend{
    width: 260px;
    margin-top: -112px;
    height: 165px;
  }

  #repPreLegend {
    transform: translate(20px, -105px);
  }

  #multiNotesP {
    padding-top: 0px;
    margin-top: -12px;
  }

  #y-axis, #y-axis-multi {
    font-size: 10px;
  }

  #chartLegendSvg{
    transform: translate(267px, -63px);
  }

  #dropdownSection{
    transform: translate(90px, 0px);
  }

  #mapSidebar{
    transform: translate(85px, 345px);
    height: 200 !important;
    margin-left: 5px;
  }

  #chartSidebar {
    transform: translate(36px, 275px);
	margin-left: 5px;
  }

  #mapNotes_dash1{
    margin-top: -40px;
  }

  #legendSVG{
    transform: translate(32px, -150px) !important;
  }
	
  .tooltip {
	width: 160px;
  }

}

@media screen and (max-width: 434px) and (min-width: 362px) {
  #chartTitle, #mapTitle{
    width: 341px;
    height: fit-content;
    font-size: 12px;
  }
	
  #mapTitle {
	margin-top: 74px;
  }
	
  #radioField {
	margin-top: -25px;
  }

  #chartTitleMulti{
    margin-top: 50px;
    width: 340px;
    height: fit-content;
    font-size: 12px;
  }

  #multiChartLegend{
    width: 260px;
    margin-top: -185px;
    height: 165px;
  }

  #repPreLegend {
    transform: translate(0px, -180px);
  }

  #multiNotesP {
    padding-top: 0px;
    margin-top: -95px;
  }

  #y-axis, #y-axis-multi {
    font-size: 8px;
  }

  #chartLegendSvg{
    transform: translate(173px, -54px);
  }

  #dropdownSection{
    transform: translate(16px, 10px);
  }

  #mapSidebar{
    transform: translate(0px, 308px);
    height: 200 !important;
    margin-left: 5px;
  }
	
  #chartSidebar {
    transform: translate(15px, 174px);
	margin-left: 5px;
  }
  
  #mapNotes_dash1{
    margin-top: -40px;
  }

  #legendSVG{
    transform: translate(11px, -435%) !important;
  }
}

@media screen and (max-width: 560px) and (min-width: 362px){
  #topBox {
    width: 100% !important;
  }

  ul li, ol li {
    font-size: 12px;
  }

  p {
   font-size: 12px;
  }

  h2, h3 {
   font-size: 20px;
  }

/* Page section Titles */
  #main-section h2{
    font-size: 18px;
  }
 
  #tech_notes_section h3, #references_and_citations h3{
    font-size: 17px;
  }

  /* CSS for Options Box */
  #optionsTitle{
    font-size: 16px;
    padding: 10px
  }

  #boxedText{
    padding: 5px;
  }  

  #Upper_paras, .optionsLinks, #form{
    font-size: 12px;
  }
  
  .optionsLinksCont{
    font-size: 14px;
    margin-left: 5px !important;
  }

  /* Single Line Chart CSS */
  #fullTitle{
    font-size: 16px;
  }

  #DateOfAnalysis{
    font-size: 15px;
  }

  .singleLineLegend{
    font-size: 10px !important;
  }

  /* Editing the size of the containers */
  #singleChart{
    width: 355px;
    transform: translate(-14px, 0px);
    margin-left: 0px;
    margin-right: 0px;
  }

  /* Multi Line CSS */

  /* Fix Axis Font Size since it isnt selecting in D3 */
  .x-axis {
    font-size: 8px;
  }

  #doubleDropRow {
    margin-top: 10px;
  }

  #dropdownDrugClass {
    margin-top: -15px;
    margin-left: -15px;
  }

  #drugClassDropdown{
    width: 340px;
  }

  #stateDropdownMulti{
    width: 340px;
  }

  .drugClassLegendText{
    font-size: 10px !important;
  }

  #oneStateLegend{
    height: 20px;
  }

  .secondCol .firstCol{
    width: 230px;
  }

/* Making dimentions of the containers wide enough */
  #legendSVGmulti{
    height: 130px;
    width: 250px;
  }

  .secondCol{
    transform: translate(-380px, 85px);
  }

  #repPreMCLegend{
    margin-left: 260px;
  }

  #StateDropdownMulti #drugClassDropdown{
   width: 355px;
 }

  /* Map CSS */
  #mapRow{
    margin-left: 0px !important;
    /* margin-right: 0px !important;
    width: 340px; */
  }

  #mapNotesP {
    margin-top: 15px;
  }

  #mapVisual{
    display: contents !important;
  }

  #geoMap{
    margin-bottom: 105px;
  }

  #pcInfo, #USpc{
    font-size: 11px !important;
  }

  #perChangeInfo{
    transform: translate(165px, -190px);
  }

/* Editing Data Tables */
/* Here we are editing the titles of the data tables */
  #table_fig1a .myTitleTable, #table_fig1b .myTitleTable, #table_dq .myTitleTable,
  #table_1 .myTitleTable, #table_2 .myTitleTable, #table_3 .myTitleTable,
  #table_fig2 .myTitleTable{
   font-size: 14px !important;
 }

/* Changed the size of the table headers in the graphs with ascending ordered data */
 #fig1aTable thead th, #fig1bTable thead .sorting, #tableDq thead .sorting_asc, 
 #tableDq thead .sorting_desc, #tableDq thead .sorting, #fig2Table_info, #fig2Table thead th,
 #fig1bTable thead th{
  font-size: 11px;
  padding: 5px 15px 5px;
 }


 #table1 thead th, #table2 thead th, #table3 thead th, #table4 thead th{
   font-size: 12px;
   padding: 3px;
 }

 #fig1aTable tbody td, .even td, .odd td, .odd .dt-body-center, #tableDq tbody td, #fig1bTable tbody td{
   /* width: fit-content;
   height: fit-content; */
   padding: 3px;
   font-size: 11px;
   text-align: center;
 }

/* Here we are editing the pagination, search, and show entries text */
 #fig1aTable_length label, #fig1bTable_length label, .dataTables_filter label,
 #fig1aTable_info, #fig1bTable_info, #fig1aTable_paginate, #fig1bTable_paginate, #tableDq_length, #tableDq_info,
 #tableDq_paginate, #fig2Table_length, #fig2Table_paginate{
   font-size: 10px;
 }

 #DateOfAnalysis{
   font-size: 12px;
 }

 /* Text Size for content */
 #tech_notes_section p, #references_and_citations p, .sourceRefLinks, .refCitList{
   font-size: 12px;
 }
 
}

@media screen and (max-width: 376px) and (min-width: 298px) {
  .refLinks {
    font-size: 11px;
  }
}

@media screen and (max-width: 361px) and (min-width: 250px){
  #topBox {
    width: 100% !important;
  }

  ul li, ol li {
    font-size: 12px;
  }

  p {
   font-size: 12px;
  }

  h2, h3 {
   font-size: 20px;
  }

  /* Provisional Drug Overdose Title */
  #main-section h2{
    font-size: 18px;
  }

  .techNoteTitles{
    font-size: 19px;
  }

  /* Boxed Text after the Title */
  #boxedText{
    padding: 3px;
  }  

  /* Editing Options Box */
  #optionsTitle{
    font-size: 17px;
  }

  .optionsLinks{
    font-size: 13px;
  }

  /* Minimizing links to decrease its size */
  .sourceRefLinks{
    font-size: 12px;
  }

  .optionsLinksCont{
    margin-left: -15px !important;
  }

  /* SingleLine Titles */
  #fullTitle{
    font-size: 15px;
  }

  #DateOfAnalysis{
    font-size: 11px;
  }

  #chartTitle, #mapTitle{
    font-size: 10px;
  }

  /* SingleLine Legend Box */
  #oneStateLegend{
    height: 20px;
  }

  /* Single Line Dropdown */
  #dropdownSection{
    transform: translate(11px);
  }

  /* Map CSS */
  #mapVisual{
    display: contents !important;
  }

  #data_viz_area_multi{
    height: 230px;
  }

  #geoMap {
    margin-bottom: 105px;
    transform: translate(16px, 0px);
  }

  #pcInfo{
    margin-top: 50px;
  }

/* Multi Line CSS */

  #stateDropdownMulti, #drugClassDropdown{
    width: 225px;
  }

  #dropdownMulti{
    margin-bottom: -20px;
  }

  #doubleDropRow{
    margin-bottom: 25px;
  }

  #stateDropdownMulti, #drugClassDropdown{
    width: 225px;
  }

  #drugClassDropdown, #dropdownLabelDrugClass{
    margin-left: 5px;
  }

  #repPreLegend{
    transform: translate(-63px, 15px);
  }

  #multiNotesP {
    font-size: 10px;
    padding-top: 100px;
  }

  #drugClassDropdown{
    width: 314px;
  }

  #stateDropdownMulti{
    width: 314px;
  }
 
  .secondCol{
    transform: translate(-380px, 85px);
  }

  .drugClassLegendText{
    font-size: 9px !important;
  }

  #legendSVGmulti{
    height: 130px;
    width: 250px;
  }

  /* Editing Data Tables */
  /* Changed the size of the table headers in the graphs with ascending ordered data */
  #fig1aTable thead th, #fig1bTable thead .sorting, #tableDq thead .sorting_asc, 
  #tableDq thead .sorting_desc, #tableDq thead .sorting, #fig2Table_info, #fig2Table thead th,
  #fig1bTable thead th{
    font-size: 11px;
    padding: 5px 15px 5px;
  }

  #table1 thead th, #table2 thead th, #table3 thead th, #table4 thead th{
    font-size: 11px;
    padding: 3px;
  }

  #fig1aTable tbody td, .even td, .odd td, .odd .dt-body-center, #tableDq tbody td, #fig1bTable tbody td{
    /* width: fit-content;
    height: fit-content; */
    padding: 3px;
    font-size: 10px;
    text-align: center;
}

  /* Here we are editing the pagination, search, and show entries text */
  #fig1aTable_length label, #fig1bTable_length label, .dataTables_filter label,
  #fig1aTable_info, #fig1bTable_info, #fig1aTable_paginate, #fig1bTable_paginate, #tableDq_length, #tableDq_info,
  #tableDq_paginate, #fig2Table_length, #fig2Table_paginate{
    font-size: 10px;
  }
 
  #table3 tbody td{
    padding: 3px;
  }

  #table3 tbody td{
    width: fit-content;
  }

  #table4 tbody td{
    padding: 3px;
  }

  #table4 tbody td{
    width: fit-content;
  }

  #fig2Table tbody td{
    padding: 3px;
  }

  .sourceRefLinks {
    font-size: 11px;
  }
} 

@media screen and (max-width: 361px) and (min-width: 298px) {
  #chartTitle{
    width: 315px;
    height: fit-content;
  }

  #mapTitle{
    width: 316px;
    height: fit-content;
    margin-top: 75px;
  }
	
  .x-axis .tick text {
	text-anchor: end;
	transform: rotate(-20deg);
  }
  
  #chartSidebar{
    transform: translate(25px, 171px);
    margin-bottom: 20px;
	margin-left: 5px;
  }

  #drugChartLegendTitle {
   font-size: 11px;
  }

  #Upper_paras{
    font-size: 12px;
  }

  #chartLegendSvg{
    transform: translate(170px, -62px);
    width: 100px;
  }

  .singleLineLegend{
    font-size: 10px !important;
  }

  /* References and Citations Font Sizes */
  #references_and_citations p, #references_and_citations li, #tech_notes_section p{
    font-size: 12px;
  }

  /* Here we are editing the titles of the data tables */
  #table_fig1a .myTitleTable, #table_fig1b .myTitleTable, #table_dq .myTitleTable,
  #table_1 .myTitleTable, #table_2 .myTitleTable, #table_3 .myTitleTable,
  #table_fig2 .myTitleTable{
    font-size: 14px !important;
  }

  #radioField{
    transform: translate(10px, -50px);
	margin-top: -15px;
	margin-left: -10px;
  }

  #perChangeInfo{
    transform: translate(165px, -190px);
  }

  #USpc{
    font-size: 12px;
  }
	
  #pcInfo {
	font-size: 11px;
  }
  
  #legendSVG{
    transform: translate(23px, -450%) !important;
  }

  #mapSidebar{
    transform: translate(10px, 325px);
    height: 200 !important;
    margin-left: 5px;
  }

  #chartTitleMulti{
    width: 315px;
    height: fit-content;
    font-size: 10px;
  }

  #data_viz_area_multi{
    height: 285px;
  }

  #repPreMCLegend{
    margin-left: 265px;
    margin-top: -40px;
  }

  /* SingleLine Chart Options Box */
  .optionalLinks, #form{
    font-size: 10px;
  }

  #checkboxNote {
    font-size: 12px;
  }

  #stateDropdownMulti, #drugClassDropdown {
    width: 200px;
    font-size: 10px;
  }

  #dropdownLabelMulti, #dropdownLabelDrugClass {
    font-size: 10px;
  }

  #legendSVGmulti .firstCol, #legendSVGmulti .secondCol{ 
    font-size: 9px !important;
    width: 190px;
  }

/* CSS for Rects in Legend for Drug Class for Multi Line */
  #multiChartLegend{
    width: 260px;
    height: 165px;
  }

  #numberOfDeathsID, #numberOfDeathsMulti {
    transform: translate(5px, -70px) rotate(-90deg);
  }

  /* Fixing Axis Font-Size */
  .x-axis, #y-axis, #y-axis-multi{
    font-size: 8px;
  }
}


@media screen and (max-width: 297px) and (min-width: 250px) {
  #chartTitle{
    width: 255px;
    height: fit-content;
  }

  #mapTitle{
    width: 255px;
    height: fit-content;
	margin-top: 70px;
  }
  
  #chartSidebar{
    transform: translate(12px, 140px);
    margin-bottom: -15px;
	margin-left: 5px;
  }
	
  .xAxLabel {
	display: none;
  }
	
  .x-axis .tick text {
	text-anchor: end;
	transform: rotate(-20deg);
  }

  #Upper_paras{
    font-size: 10px;
  }

  #dropdownLabel {
    font-size: 9px;
    margin-bottom: 0px;
  }

  #stateDropdown {
    font-size: 9px;
    width: 110px;
  }

  #chartLegendSvg{
    transform: translate(133px, -56px);
    width: 100px;
  }

  #repPreMCLegend{
    margin-left: 222px;
    margin-top: 17px;
  }

  .singleLineLegend{
    font-size: 9px !important;
  }

  /* References and Citations Font Sizes */
  #references_and_citations p, #references_and_citations li, #tech_notes_section p{
    font-size: 10px;
  }

  /* Here we are editing the titles of the data tables */
  #table_fig1a .myTitleTable, #table_fig1b .myTitleTable, #table_dq .myTitleTable,
  #table_1 .myTitleTable, #table_2 .myTitleTable, #table_3 .myTitleTable,
  #table_fig2 .myTitleTable{
    font-size: 11px !important;
  }

  #mapNotes_dash1{
    margin-top: -50px;
  }

  #radioField{
    transform: translate(10px, -50px);
    width: 130px;
  }

  #radioSection{
    font-size: 9px;
  }

  .radioButtons {
    margin-left: 6px;
    font-size: 9px;
  }

  #perChangeInfo{
    transform: translate(154px, -156px);
  }

  #pcInfo {
    font-size: 9px;
    width: 100px;
    margin-bottom: 3px;
  }

  #USpc{
    font-size: 11px;
    margin-left: -27px;
  }

  #infoG {
    width: 100px;
  }

  #mapRow {
    width: 255px;
    margin-left: -16px;
  }
  
  #legendSVG{
    transform: translate(32px, -145px) !important;
    width: 215px;
  }

  #mapSidebar{
    transform: translate(-2px, 255px);
    height: 200 !important;
    margin-left: 5px;
  }

  #chartTitleMulti{
    width: 255px;
    height: fit-content;
    font-size: 10px;
  }

  #dropdownLabelMulti, #dropdownLabelDrugClass {
    font-size: 9px;
  }

  #data_viz_area_multi{
    height: 70px;
  }

  #stateDropdownMulti, #drugClassDropdown {
    width: 160px;
    font-size: 9px;
  }

  #checkboxNote {
    font-size: 9px;
  }

  #drugChartLegendTitle {
    font-size: 10px;
    margin-top: 5px;
  }

  #optionsTitle {
    font-size: 14px;
  }

  .card-body bg-white {
    height: 175px;
  }

  .optionalLinks, #form {
    font-size: 10px;
  }

  .optionsLinks {
    font-size: 10px;
  }

  .refLinks {
    font-size: 8px;
  }

  #legendSVGmulti .firstCol, #legendSVGmulti .secondCol{ 
    font-size: 7px !important;
    width: 146px;
  }

/* CSS for Rects in Legend for Drug Class for Multi Line */
  #multiChartLegend{
    width: 155px;
    height: 165px;
  }

  .xAxLabel {
    font-size: 7px !important;
  }

  .numberOfDeaths {
    font-size: 7px !important;
  }

  #numberOfDeathsID, #numberOfDeathsMulti {
    transform: translate(5px, -80px) rotate(-90deg);
  }

  /* Fixing Axis Font-Size */
  .x-axis, #y-axis, #y-axis-multi{
    font-size: 7px;
  }

  p { 
    font-size: 9px;
  }

  #multiNotesP {
    font-size: 8px;
  }

  #mapNotesP {
    font-size: 8px;
  }
}