html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    /* overflow-x: hidden; */
}

.container-small {
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .container-small {
        width: 700px;
    }
}

.bg-navy {
    background-color: #061c60;
}

.h-text {
    padding: 10px 0;
    margin: 0;
}

h2.h-text {
    padding: 2.7em 0 .5em 0;
    /* padding: 3.35em 0 .5em 0; */
}

.reset-link {
    text-align: center;
}

.instructions {
    margin: 10px 0;
}

.graph_container {
    display: block;
    /* width: 80%; */
}

.buttons-html5 {
    background: #007299 !important;
    color: white !important;
    padding: 1px 5px !important;
    /* border-radius: 5px !important; */
    text-transform: uppercase !important;
    margin-left: 2px !important;
    font-size: .85rem !important;
    /* background: none !important;
  color:  #007299 !important;
  font-weight: 700 !important;
  outline: none !important;
  border: none !important; */
}

.buttons-html5:hover,
.buttons-html5:focus,
.buttons-html5:active {
    background: #33a6cc !important;
    /* text-decoration: underline !important; */
}

/* datatables pagination and download buttons */
/* .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding : 0px !important;
    margin-left: 0px !important;
    display: inline !important;
    border: 0px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: 0px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button .page-link {
    color: #fff;
    background-color: #6c757d;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover .page-link {
    color: #fff;
    background-color: #48525B;
    box-shadow: none;
} */

.page-item.active .page-link {
    background-color: #48525B !important;
    border-color: #48525B !important;
    box-shadow: none;
}

/* get rid of second set of arrows popping up */
table.dataTable>thead .sorting::before,
table.dataTable>thead .sorting::after,
table.dataTable>thead .sorting_asc::before,
table.dataTable>thead .sorting_asc::after,
table.dataTable>thead .sorting_desc::before,
table.dataTable>thead .sorting_desc::after,
table.dataTable>thead .sorting_asc_disabled::before,
table.dataTable>thead .sorting_asc_disabled::after,
table.dataTable>thead .sorting_desc_disabled::before,
table.dataTable>thead .sorting_desc_disabled::after {
    opacity: 0 !important;
}

/* forces city data tables rows to be a single line */
/* #city_table td {
    white-space: nowrap;
} */

/* overriding vaccine-style.css because bootstrap clobbered it */
.bg-vaccineblue {
    background-color: #061f5c !important;
}

/* crossfilter demographic buttons */
.btn.outline {
    background: none;
    padding: 7px 12px;
    /* border-radius: 0; */
}

.btn-primary.outline {
    border: 1.75px solid #0099cc;
    color: #0099cc;
}

.btn-primary.outline:active,
.btn-primary.outline.active {
    border-color: #007299;
    color: #007299;
    box-shadow: none;
}

.btn-secondary {
    background-color: #f3f3f3;
    color: #575757;
    border: 0;
    padding: 5px !important;
    font-size: .85rem !important;
}

.download-image-container {
    text-align: right;
}

.mylabel{
  padding-top: 8px;
  padding-right: 7px;
  font-weight: 600;
  font-size: .85rem ;
  /* color: #555; */
}

/* ACCORDION-TABLES */


#accordion-tables>.card {
    border-radius: 0;
    margin-top: 1em;
}

#accordion-tables>.card>.card-header {
    font-size: 1.8em;
    color: navy;
    text-align: center;
    border-radius: 0;
}

#accordion-tables>.card>.card-header:after {
    font-family: 'Font Awesome 5 Free';
    content: "\f0d7";
    transform: rotate(180deg);
    -webkit-transition: -webkit-transform .5s ease-in-out;
    float: right;
}

#accordion-tables>.card>.card-header.collapsed:after {
    /* symbol for "collapsed" panels */
    /* content: "\f067";  */
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform .5s ease-in-out;
}

.globalNavGreyBlueDivMedia {
    height: 39px !important;
    /* Have to set important in order to override the cv-style-v2's erroneous 70px height specification */
}

.colBlue2 {
    padding-bottom: 4px !important;
    /* Have to set important in order to override the erroneous DPH Style's unnecessary bottom padding of 8px which was causing issues in the cv-style-v2's representation (see above) */
}

.w-33 {
    width: 33.3% !important;
}

#selectcity li,
#select-district li{
    padding-bottom: 0;
}

.d3-tip {
    background-color: rgba(255, 255, 255, .95);
    color: black;
    text-align: left;
    padding: 4px;
    border-radius: 3px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
    font-size: 0.7rem;
}

.dropdown-menu {
    max-width: 100%;
}

/* Slider Control Styling */
span.sliderControl input[type=text] { width: 50px; }
span.sliderControl span#playButton { cursor: pointer; background: #0475ae;}
span.sliderControl span#pauseButton { cursor: pointer; display: none; background: darkgrey}

#playButton, #pauseButton, #school-district-play{
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    margin-right: 15px;
    font-size: 13px;
}

#school-district-play {
    border: none;
    outline: none;
}

/* Fix for tooltip offset caused by Google Translate */
body[style*="top: 40px"] {
	top: 0 !important;
	padding-top: 25px;
}


/*
#resident-chart-all text {
    fill: #000;
    font: 16px sans-serif;
    text-anchor: end;
    font-family: 'Open Sans', sans-serif;
}

#resident-chart-0plus text {
    fill: #000;
    font: 16px sans-serif;
    text-anchor: end;
    font-family: 'Open Sans', sans-serif;
}

#resident-chart-5plus text {
    fill: #000;
    font: 16px sans-serif;
    text-anchor: end;
    font-family: 'Open Sans', sans-serif;
}

#double-trio text.additional-dose-label {
    text-anchor: start;
}

#resident-chart-65plus text {
    fill: #000;
    font: 16px sans-serif;
    text-anchor: end;
    font-family: 'Open Sans', sans-serif;
}

#resident-chart-0-4 text {
    fill: #000;
    font: 16px sans-serif;
    text-anchor: start;
    font-family: 'Open Sans', sans-serif;
}

#resident-chart-5-11 text {
    fill: #000;
    font: 16px sans-serif;
    text-anchor: start;
    font-family: 'Open Sans', sans-serif;
}

#resident-chart-12-17 text {
    fill: #000;
    font: 16px sans-serif;
    text-anchor: end;
    font-family: 'Open Sans', sans-serif;
}

/* Vaccinations by location - Fixed header */
#city_table_wrapper table thead th {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
}

#city_table_wrapper {
    max-height: 35vh;
    overflow: auto;
}

/* Race age tables - Fixed header */
#race_age_table_wrapper table thead th {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
}

#race_age_table_wrapper {
    max-height: 50vh;
    overflow: auto;
}

/* School district tables - Fixed header */
#school_district_table_wrapper table thead th {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
}

#school_district_table_wrapper {
    max-height: 40vh;
    overflow: auto;
}

.tooltip-inner {
    background-color: #eee !important;
    color: #000 !important;
}

#comparativeSliderData {
    width: 100%;
}

#comparativeSlopeValue {
    background-color: transparent;
    border: 0;
    font-weight: 600;
}

#comparativeSlopeValueStatic {
    color: CadetBlue;
    background-color: transparent;
    border: 0;
    font-weight: 600;
}

@media only screen and (max-width: 700px) {
    .display-2 {
        font-size: 3rem !important;
    }
}

.no-wrap {
    white-space: nowrap;
}

@media only screen and (max-width: 468px) {
    .list-padding-sm-2 {
        padding-inline-start: 20px; /* Default is 40px */
    }
}

.btn-silver, [data-toggle="dropdown"] {
    background-color: #fff;
    border: thin solid silver;
    color: #007299;
  }

a.collapsed .collapseMainSubMenu::before {
    font-family: 'FontAwesome';
    content: "\f105";
    font-weight: bold;
}
a .collapseMainSubMenu::before {
    font-family: 'FontAwesome';
    content: "\f106";
    font-weight: bold;
}