.table-responsive .ellipsis {
    display: none;
}

/*.dataTables_filter,*/
/*.dataTables_info,*/
/*.dataTables_length {*/
/*    font-size: 17px;*/
/*}*/

/*table.dataTable {*/
/*    border-collapse: separate;*/
/*    border-spacing: 0;*/
/*    margin: 0 auto;*/
/*    width: 99% !important;*/
/*}*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pBordered {}

.figTitle {
    line-height: 1.6em;
}

ul.no-bullets {
    list-style-type: none;
    /* Remove bullets */
    padding: 0;
    /* Remove padding */
    margin: 0;
    /* Remove margins */
    margin-bottom: 15px;
    font-size: 18px;
}

.navbuttons {
    padding: 0px;
}

.navbuttons .btn-group {
    padding: 20px 0px;
}

.containerTopPage {
    display: flex;
    justify-content: center;
    align-items: center;
}

.downloadData {
    padding: 7px 13px;
}

.anopadding{
    padding: 0px;
}

.dashboard {
    margin-bottom: 18px;
    padding-left: 0px;
    padding-right: 0px;
}

.dashboard-div {
    padding-left: 0px;
    padding-right: 0px;
}

#dashboard-title {
    text-align: center;
}

.dashboard-dropdown-label {
    padding-left: 0px;
    padding-right: 0px;
}

.dashboard-dropdown {
    width: 100%;
}

.dashboard-dropdowns {
    padding-left: 0px;
    padding-right: 10px;
    padding-bottom: 10px;
}

#dashboard-dropdowns-graph-div {
    padding-left: 10px;
}

#dashboard-dropdowns-container {
    margin-top: 15px;
}

.dashboard-label {
    text-align: left;
    padding-left: 0px;
}

#dashboard-graph {
    margin-bottom: 12px;
}

#dashboard-dropdowns-graph-div2 {
    padding-left: 0px;
    padding-right: 0px;
}

/*...2px solid #B990EB*/

.cat1 {
    border: 2px solid #69dbc8;
}

.cat2 {
    border: 2px solid #cf035c;
}

.cat3 {
    border: 2px solid #002989;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
    cursor: pointer;
    /*padding: 18px;*/
    width: 100%;
    border: none;
    /*text-align: center;*/
    /*outline: none;*/
    /*font-size: 22px;*/

    display: inline-block;
    padding: 0.4em 1.0em;
    margin: 0 0.3em 0.3em 0;
    /*border-radius: 0.2em;*/
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 350;
    /*color:#FFFFFF;*/
    /*background-color:#3369ff;*/
    /*box-shadow: 5px 10px;*/
    /*box-shadow:inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);*/
    text-align: center;
    position: relative;
}

/*#collapsible1 {*/
/*  background-color: #69dbc8;*/
/*  color: #000;*/
/*}*/
/*#collapsible2 {*/
/*  background-color: #cf035c;*/
/*  color: #fff;*/
/*}*/
/*#collapsible3 {*/
/*  background-color: #002989;*/
/*  color: #fff;*/
/*}*/

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
    background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
}

.sliderContainer {
    text-align: center;
}

#slider label {
    position: absolute;
    width: 20px;
    margin-left: 0px;
    text-align: center;
    margin-bottom: 20px;
    font-size: 20px;
}

/* below is not necessary, just for style */
#slider {
    width: 75%;
    margin: 2em auto;
    margin-top: 3em;
    margin-bottom: 1em;
}

#tiles .outerPanel {
	display: inline-block;
	margin-bottom: 15px;
	padding: 20px 15px 10px 15px;
    width: 100%;
    background-color:#e1e4e7;
}
#tiles .innerPanel {
	text-decoration: none;
	color: black;
	font-size: 18px;
}
#tiles .innerPanelText {
	text-decoration: none;
	color: black;
	font-size: 18px;
}
#tiles .innerPanelText a {
	padding-left: 0px;
}
@media (min-width: 992px) {
	#tiles .outerPanel {
		width: 32%;
	}
}
@media (min-width: 1200px) {
	#tiles .outerPanel {
		width: 24.6%;
	}
}

.tiles>div {
    /*margin: 5px;*/
    /*width: 32%;*/
    /*min-height: 385px;*/
    padding-right: 0px;
}

.tiles div .stickyHeader {
    position: sticky;
    top: 0px;
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: white;
}

.figmaBox {
    width: 100%;
    height: 320px;
    border: 2px solid #ccc;
    margin-bottom: 20px;
    padding: 10px;
}

.button {
    display: block;
    width: 115px;
    height: 25px;
    /*background: #4E9CAF;*/
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    line-height: 25px;
}

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

/* Style images that float in text... now take up spot on left while text takes spot on right! */
.diabetes-image {
    /*float: left; */
    max-width: 150px; 
    max-height:150px;
}

.imgTextRow {
    display: flex;
    flex-direction: row;
}

.imgContainer {
    float: left;
    margin: 20px 15px 15px 0px; 
}

.textDiv {
    display: flex;
    flex-direction: column;
}

.canadaText{
    font-size: 26px;
}

/* Style the tooltip text area for maps */
@media (max-width: 991px) {
    #mapTextDiv {
        min-height: 200px;
    }
}
@media (min-width: 992px) {
    #mapTextDiv {
        min-height: 400px;
    }
}
#mapTextDiv {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Declare hover interactivity explicitly for footnote links to ensure no issues inherited when they are in summary tiles */
.fn-lnk:hover {
    border-radius: 0px !important;
    border: 1px solid grey !important;
    color: white !important;
    background-color: #333 !important;
    box-shadow: none !important;
}

/* Make bar labels slightly smaller so they always fit in the graph */
.bar-label {
    font-size: 10px !important;
}

/* Make legend and axis titles consistent size */
svg .legend text, svg .titles {
    font-size: 14px;
}

.svgSuperscript {
    baseline-shift: super;
    font-size: 75%;
    bottom: .25em;
    line-height: 0;
}

/* Make tab navigation menu display nicer, always in one row */
nav .list-inline {
    display: flex;
    align-items: stretch;
    text-wrap: balance;
}

nav .list-inline li a {
    height:100%;
}

/* Make custom hover/focus indicator for map, to do away with the boxes that appear when focusing or clicking on default map */
.ptPathHoverFocus {
    stroke: #333;
    stroke-width: 2.5px;
}