.tab {
        overflow: hidden;
        margin-top: 15px;
        /*   border: 1px solid #ccc; */
        /*   background-color: #f1f1f1; */
    }

        /* Style the buttons inside the tab */
        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            transition: 0.3s;
            font-size: 15px;
            padding-bottom: 5px;
        }

    .tablinks {
        background-color: #005eaa !important;
        color: white;
        border-radius: 10px;
        font-weight: 500;
        width: 250px;
        font-family: "Poppins", apple-system, blinkmacsystemfont, "Segoe UI", "Helvetica Neue", arial, sans-serif !important;
        height: 40px;
        padding-top: 7px !important;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }

    /* Create an active/current tablink class */
    .tab button.active {
        background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border-top: none;
    }

    .jur_legend {
        margin-top: 10px !important;
    }

    .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, #multiChartVizJur {
        float: left;
        margin-left: -25px;
    }

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

    #repPreMCLegend {
        width: 50px;
        margin-top: 0px; /* 50px*/
        margin-bottom: 0px; /* 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: 40px;
        width: 725px;
        margin-top: 10px;
        color: #000000;
        font-weight: bold;
        padding-top: 5px;
        text-align: center;
    }

    #table_fig2_jur, #table_fig2 {
        font-size: 0.9rem !important;
        margin-left: -25px;
    }

    .container-fluid {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

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

    #mapNotesP {
        font-size: 10px;
    }

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

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

    .multiNotes_dash2 {
        margin-top: 10px;
        max-width: 900px;
        display: block;
        margin-left: -20px;
    }


    .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, #dropdownLabelDrugClassJur {
        font-size: 13px;
        font-weight: bold;
        text-align: left;
        margin-bottom: -2px;
        margin-left: 5px;
    }

    #dropdownLabelDrugClass {
        margin-left: 20px;
    }

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

    #doubleDropRow {
        margin-top: 20px;
        margin-left: -5px;
        height: 55px;
        width: 100%;
    }

    #doubleDropRowJur {
        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;
    }

    #jurisdiction_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;
    }

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


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

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


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

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

    /*  End of weird checkboxes inside dropdown */

    #stateDropdownMulti, #drugClassDropdown, #stateDropdownMultiJur, #drugClassDropdownJur {
        font-size: 12px;
        width: 340px;
        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_juristiction, #data_viz_area_multi {
        width: 100%;
        height: 400px;
    }

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

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

    .tooltip {
        position: absolute;
        padding: 7px;
        width: 200px;
        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;
        }

    .datatable {
        width: 100% !important;
    }

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

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

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

    .datatablethead {
        background-color: #b1dafb;
    }

        .datatablethead 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;
        }

    .datatabletbody td {
        border-left: 1px solid #dee2e6;
        border-right: 1px solid #dee2e6;
    }

    #tableDq {
        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;
    }

    .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) {
        .jur_legend {
            margin-top: 10px !important;
        }

        #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: 0px; /* 75px; */
        }

        #chartTitleMulti, #chartTitleMultiJur {
            width: 850px;
            height: fit-content;
        }

        #stateDropdownMulti, #drugClassDropdown, #stateDropdownMultiJur, #drugClassDropdownJur {
            width: 345px;
        }

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

        #repPreLegend {
            transform: translate(10px, 20px);
        }
		
		#multiChartViz_Legend, #multiChartVizJur_Legend {
			display: block !important;
			margin-top: 90px;
		}
    }

    /*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: 0px;
        }

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

        #stateDropdownMulti, #drugClassDropdown, #stateDropdownMultiJur, #drugClassDropdownJur {
            width: 250px;
        }

        #chartTitleMulti, #chartTitleMultiJur {
            width: 850px;
            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: 1216px) 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, #stateDropdownMultiJur, #drugClassDropdownJur {
            width: 250px;
        }

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

        #chartTitleMulti, #chartTitleMultiJur {
            width: 700px;
            height: fit-content;
        }

        .legendSVGmulti rect {
            width: 300px;
        }

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

        #repPreMCLegend {
            width: 50px;
            margin-top: 0px;
            margin-bottom: 0px;
            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, .datatablethead 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: 0px;
        }

        .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) {
        .jur_legend {
            margin-top: -10px !important;
        }

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

        #table_fig2_jur, #table_fig2 {
            font-size: 0.8rem !important;
        }

        /* 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, #stateDropdownMultiJur, #drugClassDropdownJur {
            width: 230px;
        }

        #chartTitleMulti, #chartTitleMultiJur {
            width: 650px;
            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: 0px;
        }

        #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;
        }
		
		#multiChartViz_Legend, #multiChartVizJur_Legend {
			display: block !important;
			margin-top: 70px;
		}
		
		#multiChartVizJur_Legend {
			display: block !important;
			margin-top: -35px;
		}

        /* 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, .datatablethead 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, .datatabletbody 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) {
        .jur_legend {
            margin-top: 30px !important;
        }

        .dropdowns {
            margin-bottom: 30px;
        }

        /* 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, #chartTitleMultiJur {
            width: 800px;
            height: fit-content;
            margin-top: 50px;
        }

        #doubleDropRow {
            margin-top: 10px;
        }

        #doubleDropRowJur {
            margin-top: 10px;
        }


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

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

        #dropdownLabelDrugClass {
            margin-left: 5px;
        }

        #stateDropdownMulti, #stateDropdownMultiJur {
            width: 380px;
        }

        #chartTitle, #chartTitleMulti, #chartTitleMultiJur {
            font-size: 14px;
            padding-top: 7px;
            width: 550px;
            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, .datatablethead 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, #chartTitleMultiJur {
            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, #chartTitleMultiJur {
            margin-top: 50px;
            width: 340px;
            height: fit-content;
            font-size: 11px;
        }

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

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

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

        #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) {
        .x-axis .tick text {
            text-anchor: end;
            transform: rotate(-20deg);
        }
        
        .drugChartLegendTitle {
            margin-bottom: 5px;
            font-size: 11px;
        }

        #data_viz_area_multi {
            height: 360px;
        }

        #data_viz_area_multi_juristiction {
            height: 330px;
        }

        .xAxLabelMulti {
            font-size: 10px !important;
            transform: translate(180, 160) !important;
        }

        #topBox {
            width: 100% !important;
        }

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

        p {
            font-size: 12px;
        }

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

        .h4 {
            font-size: 1rem !important;
        }

        /* 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 !important;
        }

        #data_viz_area_multi {
            padding-top: 15px;
        }

        #stateDropdownMulti {
            font-size: 11px;
            width: 275px;
        }

        #dropdownMulti {
            margin-left: 0px;
        }

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

        #doubleDropRow {
            margin-top: 10px;
        }

        #doubleDropRowJur {
            margin-top: 10px;
        }

        #dropdownDrugClassJur, .dropdownsStyles {
            margin-top: -15px;
            margin-left: -35px;
        }

        /* #drugClassDropdown {
            width: 340px;
        } */

        /* #stateDropdownMulti, #stateDropdownMultiJur {
            width: 340px;
        } */

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

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

        #oneStateLegend {
            height: 20px;
        }

        .secondCol .firstCol {
            width: 230px;
        }

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

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

        #repPreMCLegend {
            margin-left: 260px;
        }

        #drugClassDropdown {
            margin-left: 20px;
        }

        #drugClassDropdownJur {
            margin-left: 40px;
        }

        #dropdownLabelDrugClassJur {
            margin-left: 40px;
            font-size: 11px;
        }

        #stateDropdownMulti, #stateDropdownMultiJur {
            margin-left: 5px;
        }

        /* 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, #table_fig2_jur, .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, .datatablethead th,
        #fig1bTable thead th {
            font-size: 11px;
            padding: 5px 15px 5px;
        }


        #table1 thead th, #table2 thead th, #table3 thead th, #table4 thead th, #table_fig2 thead th, #table_fig2_jur 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: 560px) and (min-width: 400px) {
        #stateDropdownMulti, #drugClassDropdown, #stateDropdownMultiJur, #drugClassDropdownJur {
            font-size: 11px;
            width: 275px;
        }
        
        .tab button {
            font-size: 10px;
        }

        .tablinks {
            height: 32px;
            width: 168px;
        }
    }

    @media screen and (max-width: 399px) {
        .tab button {
            font-size: 9px;
        }

        .tablinks {
            height: 32px;
            width: 142px;
        }
    }


    @media screen and (max-width: 399px) and (min-width: 364px) {
        #stateDropdownMulti, #drugClassDropdown, #stateDropdownMultiJur, #drugClassDropdownJur {
            font-size: 11px;
            width: 240px;
        }
    }

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

    @media screen and (max-width: 361px) and (min-width: 250px) {
        #chartTitleMulti, #chartTitleMultiJur {
            margin-top: 50px;
            width: 314px;
            height: fit-content;
            font-size: 12px;
        }
        #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, #stateDropdownMultiJur {
            width: 225px;
        }

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

        #doubleDropRow {
            margin-bottom: 25px;
        }

        #doubleDropRowJur {
            margin-bottom: 25px;
        }

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

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

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

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

        #drugClassDropdown {
            width: 314px;
        }

        #stateDropdownMulti, #stateDropdownMultiJur {
            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, .datatablethead 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;
        }

        .datatabletbody 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, #chartTitleMultiJur {
            width: 314px;
            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, #stateDropdownMultiJur {
            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, #chartTitleMultiJur {
            width: 255px;
            height: fit-content;
            font-size: 10px;
        }

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

        #data_viz_area_multi {
            height: 70px;
        }

        #stateDropdownMulti, #drugClassDropdown, #stateDropdownMultiJur {
            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;
        }
    }