/* Project Specific Styles (Headlight Portal)
//
//  A collection of styles applied specifically to the HLP project.
//
//  * Styles global to the ALL Burly-Apps should not be here; they should
//    be placed in app-style.css.
//
//  * Styles which are global across the Headlight v2 platform should 
//    not be here; they should be placed in headlight-style.css.
//
//  * To override CSS styling applied at lower levels in the app hierarchy, 
//    increase selector specificity.
//
//  * Web Publisher `web_pub_body_class` config provides a standard method
//    to set a special BODY tag `class` attribute, so project styles may be
//    isolated from elsewhere in the framework, or from third-party tools.
*/

/* Global HLP v2 Styles
--------------------------------------------- */
.app-hlp {
    font-family: 'Roboto', sans-serif;
    margin: 0;
}

.app-hlp #user-menu {
    display: none;
}

.app-hlp #app-main.user-menu {
    margin-top: 0;
}

.app-hlp img {
    border: none;
}


/* HLP v2 Home Page
--------------------------------------------- */
.app-hlp #hlp-home-page {
    margin-top: 45px;
    padding: 80px 0px;
    background-size: cover;
}

.app-hlp.platform-embedded #hlp-home-page {
    margin-top: 40px;
}

.app-hlp #hlp-home-page .home-hero-section img {
    max-width: 100%;
}


/* HLP v2 Home Page Charts
---------------------------------------------*/
.app-hlp #hlp-home-page .home-chart-section {
    padding: 1.66em;
}

.app-hlp #hlp-home-page .chart-page {
    margin: 0;
}

.app-hlp #hlp-home-page .chart-canvas {
    margin: 0 auto;
    width: 90%;
    max-width: 1500px;
}

.app-hlp #hlp-home-page .chart-page.no-chart-form {
    padding-top: 1.33em;
}

.app-hlp #hlp-home-page .chart-canvas > .chart-plot {
    width: 32%;
    margin: 0 auto;
}

.app-hlp #hlp-home-page .chart-canvas .chart-plot:nth-child(2) {
    margin: 0 2%;
}

.app-hlp #hlp-home-page .chart-canvas .chart-plot:last-of-type {
    margin-bottom: 3em;
}

.app-hlp div.app-main {
    margin-top: 4.33em;
}

.app-hlp .article-page,
.app-hlp .weblog-page {
    width: auto;
    margin: 4.33em 2.33em;
}

.app-hlp .article-page .iframe-container {
    position: relative;
    overflow: hidden;
    max-width: 1100px;
}

.app-hlp .article-page .iframe-container.ratio-3-2 {
	padding-top: 66.67%;
}

.app-hlp .article-page .iframe-container.ratio-2-3 {
	padding-top: 95.67%;
}

.app-hlp .article-page .iframe-container.ratio-2-3 iframe {
	width: 75%;
}
    
.app-hlp .article-page .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.app-hlp .article-page .tableauPlaceholder {
    margin: 0 auto;
}

.app-hlp .chart-page.has-chart-form {
    padding-top: 5.33em;
}
.app-hlp .chart-page h2 {
    font-size: 1.33em;
    padding: 1em;
}

.app-hlp .chart-page #footer-note {
    font-size: .7em;
    text-align: left;
    margin: 20px 0px 40px 2%;
    font-family: monospace;
}

.app-hlp .chart-page #footer-note p {
    margin: 0.33em auto;
}

.app-hlp .chart-page #footer-note a {
    margin-right: 1em;
}

.app-hlp.platform-embedded #hlp-home-page .content {
    width: 820px;
}

/* HLP v2 Chart Form
--------------------------------------------- */
.app-hlp3 div#chart-form-params {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 1.5em;
}

.app-hlp #chart-form #summary-list {
    width: 90%;
}

.app-hlp #chart-form #summary-list li div.summary-title {
    background-image: url('/images-app/tool.png');
    background-repeat: no-repeat;
    background-size: 13px;
    padding-left: 1.33em;
}

.app-hlp #chart-form #summary-list li div.summary-value {
    text-decoration: underline;
}


/* HLP v2 Chart Presentation
--------------------------------------------- */
.app-hlp .chart-canvas > .chart-plot {
    min-height: 200px;
    margin: 0 0 2em 3%;
}


/* HLP v2 1-column layout
--------------------------------------------- */
.app-hlp #chart-bubble-plot-page .chart-canvas > .chart-plot {
    width: 96%;
}

.platform-mobile.app-hlp .chart-canvas {
    min-width: inherit;
}


/* HLP v2 2-column layout (default)
--------------------------------------------- */
.app-hlp .chart-canvas > .chart-plot {
    width: 46%;
}


/* HLP v2 3-column layout
--------------------------------------------- */
.app-hlp .chart-canvas > .chart-plot.plot-type-TABLE {
    margin: 0;
    float: none;
    width: auto;
}

.platform-mobile.app-hlp .chart-canvas > .chart-plot {
    width: auto;
    float: none;
}

/* HighCharts Customizations
--------------------------------------------- */
.highcharts-series, .highcharts-data-labels g {
    cursor: default !important;
}


/* X Axis - CSS rule to force ellipsis on vertical axis with long labels
--------------------------------------------- */
.app-hlp .chart-canvas:not(.clat) .highcharts-xaxis-labels .label-xaxis-0 {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}


/* HLP v2 Master Web Styles
--------------------------------------------- */
.app-hlp #hlp-header {
    background: #333;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999; 
    height: 45px; 
}

.app-hlp #hlp-footer {
    clear: both;
    color: #fff;
    width: 100%;
    height: 100%;
    padding: 30px 0;
}


/* HLP v2 Web Page Styles
--------------------------------------------- */
.app-hlp #hlp-home-page,
.app-hlp #hlp-about-page {
    width: 100%;
    text-align: center;
}

.app-hlp #hlp-home-page h1,
.app-hlp #hlp-about-page h1 {
    margin-top: 100px;
}

.app-hlp #hlp-home-page .content .title-container {
    text-align: left;
}

.app-hlp #hlp-home-page .subtext-container {
    text-align: left;
    margin: 20px 0 60px 5px;
}

.app-hlp #hlp-home-page .subtext-container .subtext-icon {
    font-size: 1.7em;
    text-align: right;
}

.app-hlp #hlp-home-page .subtext-container .subtext p {
    padding-top: 10px;
    margin-top: 0;
    letter-spacing: 1px;
    text-align: left
}

.app-hlp #hlp-home-page .subtext-container p.subtext-3 {
    font-size: .8em;
}

.app-hlp #hlp-home-page .subtext-container .col-1-8 {
    width: 5%;
    text-align: right;
    padding-right: 5px;
}

.app-hlp #hlp-home-page .subtext-container .col-7-8 {
    width: 90%;
}

/* HLP v2 Contact Page
--------------------------------------------- */
.app-hlp #hlp-contact-page {
    width: 80%;
    margin: 0 auto 6em auto;
}

.app-hlp #hlp-contact-page h3 {
	margin-top: 6em;
}

.app-hlp #hlp-contact-page input,
.app-hlp #hlp-contact-page textarea {
	border: 2px solid #ccc;
	padding: 10px 0 10px 0.33%;
	margin-bottom: 1em;
	font-family: 'Roboto', sans-serif;
    font-size: 0.8em;
}

.app-hlp #hlp-contact-page #name {
	width: 49%;
	display: inline-block;
	float: none;
}

.app-hlp #hlp-contact-page #email {
	width: 49%;
	display: inline-block;
	float: none;
}

.app-hlp #hlp-contact-page #subject {
	width: 99%;
}

.app-hlp #hlp-contact-page #body {
	width: 99%;
}

.app-hlp[class*='client'] #hlp-contact-page input.flderr,
.app-hlp[class*='client'] #hlp-contact-page textarea.flderr {
	border-color: red;
}

.app-hlp #hlp-contact-page .submit-contact {
    width: 150px;
    margin-bottom: 0.34em;
    height: 45px;
    background-color: #293D51;
}

.app-hlp #hlp-contact-page .submit-contact:hover {
	cursor: pointer;
}

.app-hlp #hlp-contact-page .submit-contact span {
    color: white;
    height: 40px;
    position: relative;
    top: -6px;
    left: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.app-hlp #hlp-contact-page .submit-contact img {
    margin-left: 0.66em;
    padding-right: 0.66em;
    height: 35px;
    position: relative;
    top: 5px;
    border-right: 2px solid #ccc;
}


/* HLP v2 Help Page
--------------------------------------------- */
.app-hlp #hlp-help-page {
    margin-bottom: 6em;
}

.app-hlp #hlp-help-page h3,
.app-hlp #hlp-help-page .desc,
.app-hlp #hlp-help-page .desc a {
    margin-bottom: 1.33em;
    color: #555555;
}

.app-hlp #hlp-help-page .content {
    width: 80%;
    margin: 0 auto;
}

.app-hlp #hlp-help-page h3 {
    margin-top: 6em;
}

.app-hlp #hlp-help-page .pdf-block {
	padding: 5px;
} 

.app-hlp #hlp-help-page .pdf-block .title p {
	font-size: 1em;
	line-height: 1.1em;
	background: url(/images-app/pdf-icon-fff.png) no-repeat;
    background-size: 3em;
    padding-left: 4em;
    min-height: 3em;
}

.app-hlp #hlp-help-page .pdf-block a,
.app-hlp #hlp-help-page .pdf-block p {
    text-decoration: none;
    color: #fff;
}

.app-hlp #hlp-help-page .pdf-block {
	display: inline-block;
	width: 29%;
	vertical-align: top;
}

.app-hlp #hlp-help-page .middle {
	margin: 0 2%;
}


/* HLP v2 Nav Menu
--------------------------------------------- */
.app-hlp #hlp-header #header-nav-holder .grid {
    margin: 0;
}

.app-hlp.platform-embedded #hlp-header #hlp-header {
    height: 40px;
}

.app-hlp #hlp-header .title-holder {
    display:inline-block
}

.app-hlp #hlp-header #header-nav-holder ul {
    font-size: .9em;
    font-weight: bold;
    list-style: none;
    margin: 0;
}

.app-hlp.platform-embedded #hlp-header #header-nav-holder ul {
    font-size: .8em;
}

.app-hlp #header-nav-holder ul.nav {
    text-align: center;
    padding-left: 0;
}

.app-hlp #header-nav-holder ul.nav > li {
    display:inline-block;
    list-style: none;
    padding: 0 10px;
    position: relative;
	text-align: left;
}

.app-hlp:not(.app-hlpv3) #header-nav-holder ul.nav li:hover {
    background-color:#666;   
}    
.app-hlp #header-nav-holder ul.nav li a {
    color: #fff;
    text-decoration: none;
}

.app-hlp #header-nav-holder ul.nav li {
    line-height:45px;    
}

.app-hlp.platform-embedded #header-nav-holder ul.nav {
    line-height: 40px;
}

.app-hlp #header-nav-holder ul.nav li ul li,
.app-hlp #header-nav-holder ul.nav li ul li.selected {
    line-height:25px;
}

.app-hlp #header-nav-holder ul.nav li ul li.selected {
    color: #CFCFCF;
}

.app-hlp #header-nav-holder ul.nav li ul {
    display: none;
}

.app-hlp #header-nav-holder ul.nav ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #666;
	z-index: 9999;
    padding: 0 0 10px 0;	
}

.app-hlp #header-nav-holder ul.nav ul li {
	float:none;
	width: 250px;
	padding: 4px 15px;
	
}

.app-hlp #header-nav-holder ul.nav li:hover > ul {
    display: block;
}

.app-hlp #hlp-header #header-nav-holder ul.mobile-navigation-menu {
    list-style-type: none;
    padding: 0;
}

.app-hlp #header-nav-holder li.icon-ref {
    padding: 0 5px;
    width: 30px;
}

.app-hlp #header-nav-holder #hlp-nav-menu ul.main-menu {
    display: none;
    background: #999; 
    list-style-type: none;
    position: absolute;
    margin-left: -5px;
    padding: 0 0 0 10px;
    z-index: 9999;
    line-height: 2.5em;
    width: 160px;
    top: 45px;
    left: 5px;
    white-space: nowrap;
}

.app-hlp #header-nav-holder #hlp-nav-menu ul.main-menu li a,
.app-hlp #header-nav-holder #hlp-nav-menu ul.submenu li a {
    color: white;
    text-decoration: none;
    white-space: nowrap;
}

.app-hlp #header-nav-holder #hlp-nav-menu ul.main-menu li.selected {
    font-weight: bold;
}

.app-hlp #header-nav-holder #hlp-nav-menu li:hover > ul.main-menu,
.app-hlp #header-nav-holder #hlp-nav-menu li:active > ul.main-menu {
	display: block;
}

.app-hlp #header-nav-holder #hlp-nav-menu ul.main-menu li ul.submenu { 
    display: none;
    list-style-type: none;
    background: #999;
    position: absolute;
    text-align: left;
    padding: 0 10px;
    left: 160px;
    max-height: 600px;
	overflow-y: auto;
	top: 30px;
	margin-top: 0;    
}

.app-hlp #header-nav-holder #hlp-nav-menu ul.main-menu li:hover ul.submenu {
    display: block;
}

.app-hlp #header-nav-holder #hlp-nav-menu ul.main-menu li:hover > a,
.app-hlp #header-nav-holder #hlp-nav-menu ul.submenu li a:hover {
    text-decoration: underline;
}


/* HLP v2 Grid Layout Utils
--------------------------------------------- */
.app-hlp .grid {
    margin: 0 0 30px 0;
}

.app-hlp .grid:after {
    content: "";
    display: table;
    clear: both;
}

.app-hlp .grid [class*='col-'] {
    float: left;
    padding-right: 0px;
    padding-bottom: 0px;
 }

.app-hlp .grid [class*='col-']:last-of-type {
    padding-right: 0;
}

.app-hlp .col-1-1 {
    width: 100%;
}

.app-hlp .col-2-3 { 
    width: 66.66%;
}

.app-hlp .col-1-3 { 
    width: 33.33%; 
}

.app-hlp .col-1-2 { 
    width: 50%; 
}

.app-hlp .col-1-4 { 
    width: 25%; 
}

.app-hlp .col-1-5 { 
    width: 20%; 
}

.app-hlp .col-3-5 { 
    width: 60%; 
}

.app-hlp .col-1-8 { 
    width: 12.5%;
}

.app-hlp .col-3-8 { 
    width: 37.5%; }

.app-hlp .col-5-8 { 
    width: 62.5%; 
}

.app-hlp .col-7-8 { 
    width: 87.5%; 
}

.app-hlp .col-3-4 { 
    width: 75%; 
}

.app-hlp .grid .pad-r {
    margin-right: 40px;
}

.app-hlp .grid .pad-l {
    margin-left: 40px;
}

.app-hlp #hlp-home-page .grid {
    margin-bottom: 0;
}

.app-hlp #hlp-home-page div.content {
    max-width: 968px;
    margin: 0 auto;
}

.app-hlp #hlp-footer div.content {
    max-width: 968px;
    margin: 0 auto;
}

.app-hlp #hlp-footer .content .footer-legal {
    text-align:right;
    margin-top: 8px;
    padding-right: 20px;
}

.app-hlp #hlp-footer .content .footer-legal a {
    color: #fff;    
}

.app-hlp #hlp-footer .footer-logo {
    border: 0;
    max-width: 100%;
}

/* HLP v2 CMS Articles
--------------------------------------------- */
.app-hlp #app-main .content.article-page,
.app-hlp #app-main .content.weblog-page {
    font-family: 'Roboto', sans-serif;
    color: #333;
    font-size: 1em;
    line-height: 24px;
}

.app-hlp #app-main .content.article-page img,
.app-hlp #app-main .content.weblog-page img {
    max-width: 768px;
    height: auto;
} 

.app-hlp #app-main .content.article-page ul {
    list-style-type: square;
    margin: 1em;
}

.app-hlp #app-main .content.article-page h2 {
	text-align: center;
}

.app-hlp .blog-roll {
	width: 75%;
	display: inline-block;
}

.app-hlp #recent-article-list {
	width: 20%;
	float: right;
}

.app-hlp #recent-article-list ul {
	margin: 0;
	padding: 0;
}

.app-hlp #recent-article-list li {
	list-style-type: square;
	margin-left: 5%;
}

.app-hlp #recent-article-list p {
	margin: 0;
}

.app-hlp #recent-article-list a {
	font-size: .75em;
}

.app-hlp .article-page .embed-container .pdf {
    min-height: 100vh;
    width: 100%;
    height: 100%;
}

.app-hlp.platform-mobile .article-page .embed-container .pdf {
    min-height: auto;
}


/* HLPv3 Styles
---------------------------------------------
--------------------------------------------- */

/* Global v3 Styles
--------------------------------------------- */
body.app-hlp3 .chart-page {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    margin: 0;
}

.app-hlp3 .chart-page.has-chart-form,
.app-hlp3 .chart-page.no-chart-form {
    padding-top: initial;
}

.app-hlp3 #chart-form {
    box-shadow: initial;
}


/* Chart Layouts
--------------------------------------------- */
.app-h2 .chart-page .chart-canvas .plot-group .group-plots {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

.app-h2 .chart-page .chart-plot-container {
    width: 100%;
}

.app-h2 .chart-page .chart-canvas.chart-layout-singlecol .plot-group .group-plots {
    border: rgba(0,0,0,.4) thin solid;
    padding: 20px 40px 20px;
    border-radius: 4px;
    scroll-behavior: smooth;
    overflow-y: auto;
    max-width: 100%;
}

.app-h2 .chart-page .chart-canvas.chart-layout-singlecol .plot-group .group-plots .chart-plot.plot-type-TABLE div.dataTables_wrapper > div {
    position: sticky;
    left: 0;
    right: 0;
    margin: 7px 0;
}

.app-hlp3 .chart-canvas .chart-plot .dataTables_wrapper {
    width: fit-content;
    min-width: 100%;
}

.app-hlp3 .chart-canvas .chart-plot {
    float: none;
}

.app-h2 .ui-multiselect-checkboxes label,
.app-hlp3 .ui-multiselect-checkboxes label {
    cursor: pointer !important;
}

.app-h2 .chart-page .chart-canvas .plot-group .group-plots .chart-plot {
    float: none;
    overflow-x: auto;
    margin: 0 0 0.66em;
    max-width: 100%;
}

/* Chart Layout - Matrix */
.app-hlp3 .chart-canvas.chart-layout-matrix .chart-plot-container {
    flex: 0 1 auto;
    width: 47%;
    padding: 1.5%;
}

/* Chart Layout - Snapshot Report */
.app-hlp3 .chart-canvas.chart-layout-snapshot #plot-group-highlights.plot-group {
    margin: 30px 13%;
}
.app-hlp3 .chart-canvas.chart-layout-snapshot #plot-group-highlights.plot-group .group-plots {
    flex-wrap: nowrap;
    justify-content: center;
}
.app-hlp3 .chart-canvas.chart-layout-snapshot #plot-group-main.plot-group,
.app-hlp3 .chart-canvas.chart-layout-snapshot #plot-group-table.plot-group {
    border: initial;
}
.app-hlp3 .chart-canvas.chart-layout-snapshot #plot-group-charts.plot-group .chart-plot-container {
    flex: 0 1 auto;
    width: 47%;
    padding: 1.5%;
}

.app-hlp3 footer {
    clear: both;
}

/* Masthead
--------------------------------------------- */
.app-hlp3 header.masthead {
    display: flex;
    background: linear-gradient(180deg, rgb(0 27 52 / 97%), rgb(0 27 52 / 100%));
    border-bottom: #D9D9D9 thin solid;
    align-items: center;
    height: 80px;
    padding-left: 2.66em;
    padding-right: 2.66em;
    position: sticky;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 9999999;
}

.app-hlp3 header.masthead section.site-branding {
    max-width: 260px;
}

.app-hlp3 header.masthead img.brand-logo {
    display: inline-block;
    max-width: 100%;
    max-height: 69px;
}


/* Navigation
--------------------------------------------- */
.app-hlp3 header nav#site-navigation {
    margin-left: auto;
}

.app-hlp3 header nav#site-navigation ul#main-navigation li.navigation-item {
    display: inline-block;
    padding: 10px 14px;
    margin: 4px 0px 0px;
    border-radius: 4px;
    border: rgba(0, 0, 0, 0) 2px solid;
    transition: 0.2s;
    letter-spacing: 0.3px;
    font-size: 1.13em;
    text-transform: uppercase;
    font-weight: normal;
}

.app-hlp3 header nav#site-navigation ul#main-navigation li.navigation-item a.main-nav-menu-item {
    color: white;
    text-decoration: none;
}

.app-hlp3 header nav#site-navigation ul#main-navigation li.navigation-item:focus {
    background-color: rgba(237, 246, 251, 1);
    border: rgba(0, 0, 0, 0.2) 2px solid;
}

.app-hlp3 header nav#site-navigation ul#main-navigation li.navigation-item:after {
    display: block;
    content: '';
    border-bottom: solid 3px #019fb6;
    transform: scaleX(0);
}

.app-hlp3 header nav#site-navigation ul#main-navigation li.navigation-item:hover:after {
    transform: scaleX(1);
}

.app-hlp3 header nav#site-navigation ul#main-navigation li.navigation-item.navigation-search:after {
    display: block;
    border-bottom: none;
    transform: none;
}

.app-hlp3 header nav#site-navigation ul#main-navigation li.navigation-item:last-of-type {
    margin-right: 0px;
}


/* dataset category menu panels
--------------------------------------------- */
.app-hlp3 header .navigation-item .data-menu-subpanels-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 80px;
    background-color: #ededed;
    z-index: 9999999;
    display: none;
    max-height: 80vh;
    box-shadow: 0px 15px 15px 0px rgb(0 0 0 / 30%);
    font-size: initial;
}

.app-hlp3 header .navigation-item.menu-active .data-menu-subpanels-container {
    display: block;
}

.app-hlp3 header nav#site-navigation ul li section.nav-panel-content.mode-collapsed-view {
    display: none;
}

.app-hlp3 header nav#site-navigation ul li section.nav-panel-content.mode-expanded-view {
    display: block;
}


/* navigate: dataset categories
--------------------------------------------- */
.app-hlp3 header nav#site-navigation li.navigation-item .nav-panel-icons.mode-collapsed-view {
    display: none;
}

.app-hlp3 header nav#site-navigation li.navigation-item .nav-panel-icons a {
    text-decoration: none;
}

.app-hlp3 header nav#site-navigation li.navigation-item .nav-panel-icons img {
    width: 60px;
}

.app-hlp3 header nav#site-navigation li.navigation-item .nav-panel-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    max-width: 1150px;
    margin: 0 auto;
}

.app-hlp3 header nav#site-navigation li.navigation-item .nav-panel-icons .nav-panel-icon {
    color: black;
    text-align: center;
    margin: 15px;
    padding: 15px;
    border: rgba(0, 0, 0, 0) thin solid;
    transition: 0.2s;
    flex: 0 1 auto;
    width: 100%;
}

.app-hlp3 header nav#site-navigation li.navigation-item .nav-panel-icons .nav-panel-icon:hover,
.app-hlp3 header nav#site-navigation li.navigation-item .nav-panel-icons .nav-panel-active {
    border: rgba(0, 0, 0, 0.2) thin solid;
}

.app-hlp3 header nav#site-navigation li.navigation-item .nav-panel-icons .nav-panel-icon:hover {
    background-color: #c6c7c8;
}

.app-hlp3 header nav#site-navigation li.navigation-item .nav-panel-icons .nav-panel-active {
    background-color: rgba(255, 255, 255, 0.5);
}

.app-hlp3 header nav#site-navigation li.navigation-item .nav-panel-icon h3 {
    color: rgb(0 27 52 / 100%);
    font-size: 0.9em;
    white-space: nowrap;
    margin: 5px 0px;
}

.app-hlp3 header nav#site-navigation li.navigation-item .nav-panel-icon.nav-panel-current h3 {
    text-decoration: underline;
    text-decoration-thickness: 0.13em;
}

.app-hlp3 header nav#site-navigation li.navigation-item .nav-panel-description h4 {
    font-weight: normal;
    text-transform: uppercase;
    margin: 10px;
    font-size: 1.1em;
}

.app-hlp3 header nav#site-navigation li.navigation-item .nav-panel-description {
    text-transform: initial;
    padding-bottom: 3.33em;
    overflow: hidden;
    overflow-y: hidden;
}

.app-hlp3 header .data-menu-subpanels-container .nav-panel-description {
    margin: 0 6%;
    text-align: center;
    border-top: rgba(0, 0, 0, 0.3) solid 1px;
    padding-top: 20px;
    overflow: hidden;
    overflow-y: hidden;
}

.app-hlp3 header .data-menu-subpanels-container footer {
    padding: 10px 6%;
    font-size: 0.8em;
    text-transform: capitalize;
    text-align: right;
    background-color: #ededed;
}

.app-hlp3 header .data-menu-subpanels-container footer nav {
    display: inline-block;
}

.app-hlp3 header .data-menu-subpanels-container footer nav ul#data-links {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-hlp3 header .data-menu-subpanels-container footer nav ul#data-links li {
    display: inline-block;
    margin-left: 15px;
}

.app-hlp3 header .data-menu-subpanels-container footer nav ul#data-links li a {
    color: #6d6d6d;
    text-decoration: none;
}

.app-hlp3 header .data-menu-subpanels-container #data-last-update {
    float: right;
    font-style: oblique;
}


/* navigate: data category menu subpanel
--------------------------------------------- */
.app-hlp3 header nav#site-navigation .nav-panel-columns {
    border-top: rgba(0, 0, 0, 0.1) thin solid;
    background-color: #fefefe;
    display: flex;
    padding: 0.66em 23%;
    color: rgba(0, 0, 0, 0.7);
    text-transform: initial;
    align-items: flex-start;
    flex-flow: row-reverse;
}

.app-hlp3 header nav#site-navigation .nav-panel-columns .nav-panel-column-menu {
    width: 50%;
    margin-bottom: 20px;
    margin-left: 50px;
}

.app-hlp3 header nav#site-navigation .nav-panel-columns .nav-panel-column-menu h3 {
    color: rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    font-size: 1.3125em;
}

.app-hlp3 header nav#site-navigation .nav-panel-columns .nav-panel-column-menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.app-hlp3 header nav#site-navigation .nav-panel-columns .nav-panel-column-menu ul li {
    line-height: 21px;
    font-size: 1em;
    margin-top: 10px;
}

.app-hlp3 header nav#site-navigation .nav-panel-columns .nav-panel-column-menu ul li a,
.app-hlp3 header nav#site-navigation .nav-panel-columns .nav-panel-column-menu ul li a:hover,
.app-hlp3 header nav#site-navigation .nav-panel-columns .nav-panel-column-menu ul li a:active,
.app-hlp3 header nav#site-navigation .nav-panel-columns .nav-panel-column-menu ul li a:visited {
    color: #019fb6;
    text-decoration: none;
}


/* site search
--------------------------------------------- */
.app-hlp3 header nav ul li#sitewide-search {
    position: relative;
    padding-left: 30px;
}

.app-hlp3 header nav ul li#sitewide-search::after {
    display: block;
    border-bottom: none;
    transform: none;
}


.app-hlp3 header .search-icon::after {
    content: url(../images-hlp/search-solid.svg);
    width: 20px;
    height: 20px;
    display: inline-block;
    filter: brightness(0) invert(1);
    position: relative;
    left: -30px;
    top: 2px;
}


/* Search Box
--------------------------------------------- */
.app-hlp3 header .search-icon input {
	appearance: textfield;
	box-sizing: content-box;
	font-family: inherit;
    width: 10px;
	color: transparent;
	cursor: pointer;
	border: solid 1px rgba(0,0,0,0);
	padding: 7px 14px 7px;
	border-radius: 10em;
	transition: 0.3s;
    background-color: rgba(0,0,0,0);
    z-index: 99999;
    position: relative;
    /* margin-left: -30px; */
}

.app-hlp3 header .search-icon input:focus {
	width: 260px;
	color: #444444;
    cursor: auto;
	background-color: #fff !important;
	border-color: rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 5px rgba(109, 207, 246, 0.5);
}


/* typeahead.js
--------------------------------------------- */
.app-hlp3 header #sitewide-search .tt-hint {
    color: #444444;
}

.app-hlp3 header #sitewide-search .tt-menu {
    background: rgba(237,246,251,1);
    padding: 10px 20px 20px;
    z-index: 9999999 !important;
    border-radius: 5px;
    border: white 2px solid;
    left: -25px !important;
    width: 250px;
}

.app-hlp3 header #sitewide-search .tt-menu h3 {
    font-size: .9em;
    color: #46a2da;
    border-bottom: #46a2da 1px solid;
    padding-bottom: 5px;
    text-transform: uppercase;
}

.app-hlp3 header #sitewide-search .tt-selectable {
    text-transform: initial;
    font-size: 1.1em;
    color: #222;
    cursor: pointer;
    margin-bottom: 20px;
}


/* chart input forms (global)
--------------------------------------------- */
.app-hlp3 .chart-page .chart-input .keyword-param-container .keyword-param label {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.875em;
	letter-spacing: 0.05em;
    color: rgb(105, 106, 109);
}

.app-hlp3 .chart-page .chart-input .keyword-param-container .keyword-param.param-type-select select {
    border: rgb(105, 106, 109) thin solid;
    margin-left: 3px;
    padding: 1px 3px;
    font-size: 0.875em;
    color: rgb(105, 106, 109);
    background: white;
    border-radius: 2px;
    cursor: pointer;
}


/* jquery ui
--------------------------------------------- */
.app-hlp3 .ui-widget-header {
    border: none;
    background: initial;
    margin: 0.33em 0;
}


/* multiselect.js filter
--------------------------------------------- */
.app-hlp3 .ui-multiselect-header .ui-multiselect-filter input {
    width: 276px;
    font-size: 0.9em;
    margin-left: 5px;
    height: 15px;
    padding: 2px;
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
}

.app-hlp3 .ui-multiselect-excluded,
.app-hlp3 .ui-multiselect-close {
    display: none
}

form#chart-input-main {
    padding-left: 20px;
}


/* main form region
--------------------------------------------- */
.app-hlp3 .chart-page #main-form-container {
    background-color: rgb(218, 236, 248);
    border-bottom: #D9D9D9 thin inset;
    display: flex;
    align-items: center;
    height: 45px;
    position: sticky;
    top: 81px;
    width: 100%;
    z-index: 999999;
}

.app-hlp3 .chart-page #main-form {
    display: flex;
    padding: 10px 0;
}

.app-hlp3 .chart-page #main-form .keyword-param-container .keyword-param {
    margin-right: 20px;
}

.app-hlp3 #main-form button.ui-multiselect span.ui-multiselect-open {
    display: none;
}

.app-hlp3 #main-form button.ui-multiselect span.ui-multiselect-open + span:after {
    content: url(../images-hlp/chevron-down-solid.svg);
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-left: 5px;
}

.app-hlp3 #main-form button.ui-multiselect {
    background: none;
    border: none;
    cursor: pointer;
}

.app-hlp3 #main-form .ui-state-active {
    color: inherit;
}

/* main chart controls
--------------------------------------------- */
.app-hlp3 .chart-page #main-form-container #main-chart-controls {
    display: none;
    width: 19px;
    margin-left: 40px;
    color: rgb(105, 106, 109);
    filter: invert(43%) sepia(6%) saturate(190%) hue-rotate(187deg) brightness(93%) contrast(90%);
}
.app-hlp3 .chart-page #main-form-container #main-chart-controls a {
	color: rgb(0, 86, 152);
}

.app-hlp3 .plot-group {
    margin: 30px 10%;
    border: #46a2da 1px solid;
    border-radius: 3px;
}

.app-hlp3 .plot-group.mode-collapsed-view {
    display: none;
}

.app-hlp3 .plot-group.mode-expanded-view {
    display: block;
}

.app-hlp3 #plot-group-charts,
.app-hlp3 #plot-group-B,
.app-hlp3 #plot-group-C {
    border: 0px;
}

.app-hlp3 #plot-group-highlights h2,
.app-hlp3 #plot-group-A header h2 {
    text-align: center;
    padding: 10px;
    background-color: #46a2da;
    color: white;
    font-size: 1.5em;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.9px;
}

.app-hlp3 #plot-group-A .group-plots {
    display: none;
}

.app-hlp3 #chart-input-chart {
    display: flex;
    justify-content: center;
    margin: 10px;
}

.app-hlp3 #chart-form .keyword-param {
    margin: 0 10px;
}

.app-hlp3 #chart-form .keyword-param label {
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 0.875em;
    color: rgb(105,106,109);
}


/* multiselect ui
--------------------------------------------- */
.app-hlp3 #chart-form button.ui-widget {
	padding: 0;
	margin: 0;
    background-color: transparent;
    border: none;
    color: rgb(105,106,109);
    cursor: pointer;
}

.app-hlp3 #chart-form button.ui-widget span {
	margin: 0;
}

.app-hlp3 #chart-form button.ui-widget span.ui-icon {
    display: none;
}

.app-hlp3 .ui-multiselect {
    text-align: left;
}

.app-hlp3 .ui-multiselect-menu {
    background-color: #fff;
    border: rgba(0,0,0,0.2) thin solid;
    border-radius: 3px;
    -moz-box-shadow: 0px 2px 7px rgb(0 0 0 / 10%);
    -webkit-box-shadow: 0px 2px 7px rgb(0 0 0 / 10%);
    box-shadow: 0px 2px 7px rgb(0 0 0 / 10%);
    z-index: 99999999;
    min-width: fit-content;
}

.app-hlp3 .ui-multiselect-menu ul.ui-multiselect-checkboxes {
    background-color: transparent;
}

.app-hlp3 #chart-form button.ui-multiselect span + span,
.app-hlp3 #chart-form .ui-multiselect-menu ul.multiselect-checkboxes li {
	font-size: 1em;
	padding-right: 0;
    margin-left: 2px;
}

.app-hlp3 #chart-form button.ui-multiselect span + span {
    overflow: hidden;
    text-overflow: ellipsis;
        display: inline-block;
    vertical-align: text-bottom;
    max-width: 207px;
} 

/* todo: use proper jquery UI method -- likely not :after (see .ui-multiselect-open below) */
.app-hlp3 #chart-form button.ui-multiselect span.ui-multiselect-open + span:after {
    content: url(../images-hlp/chevron-down-solid.svg);
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-left: 5px;
}

.app-hlp3 #chart-form span.ui-multiselect-open {
    display: none;
}


/* keyword filter layout
--------------------------------------------- */
.app-hlp3 .ui-multiselect-menu .ui-multiselect-checkboxes li label input {
    display: none;
}

.app-hlp3 .ui-multiselect-checkboxes label {
    cursor: default;
    display: block;
    border: 1px solid transparent;
    padding: 3px 10px;
}

.app-hlp3 .ui-multiselect-header.ui-widget-header div, .ui-multiselect-header.ui-widget-header ul {
    display: inline-block;
    padding: 4px;
}


/* multi colum layout styles
--------------------------------------------- */
.app-hlp3 .chart-page .chart-canvas.chart-layout-col-1 .chart-plot {
    width: 100%;
}


/* chart layout select
---------------------------------------------
--------------------------------------------- */

/* Main Form Tabs
--------------------------------------------- */
.app-hlp3 .chart-page #chart-layout-select {
    margin-left: auto;
    margin-right: 20px;
    align-self: flex-end;
}

.app-hlp3 .chart-page #chart-layout-select ul.mode-tab-select li {
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.05em;
    padding: 9px 15px;
    letter-spacing: 1.3px;
}

.app-hlp3 .chart-page #chart-layout-select ul.mode-tab-select li.tab-active {
    background-color: rgb(255, 255, 255);
    font-weight: bold;
    z-index: 99999;
    margin-bottom: -1px;
    border-radius: 4px 4px 0 0;
}

.app-hlp3 .chart-page #chart-layout-select ul.mode-tab-select {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    background-color: #EDF6FB;
    border-radius: 4px 4px 0 0;
    border: #D9D9D9 thin solid;
    position: relative;
    overflow: visible;
    border-bottom: none;
}

li#chart-layout-tables.tab-active {
    border-radius: 4px 0px 0px 0px;
    border-left: #D9D9D9 thin solid;
}

li#chart-layout-charts.tab-active {
    border-radius: 0px 4px 0px 0px;
    border-right: #D9D9D9 thin solid;
}

.app-hlp3 .chart-page #chart-layout-select ul.mode-tab-select li a {
    color: rgb(141, 145, 150);
    text-decoration: none;
}

.app-hlp3 .chart-page #chart-layout-select ul.mode-tab-select li.tab-active a {
    color: rgb(74, 75, 76);
}


/* home page
--------------------------------------------- */
.app-hlp3 main.hlp-home-page section.home-hero-visual {
    background-size: cover;
    background-position: center center;
    height: 80vh;
    display: flex;
    justify-content: left;
    align-items: flex-start;
}

.app-hlp3 main.hlp-home-page section.home-hero-visual .hero-logo-title img {
    display: inline-block;
    max-width: 440px;
    margin: 100px 0 0 100px;
    filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.5));
}

.app-hlp3 main.hlp-home-page section.home-tagline {
    background-color: #f8f8f8;
    text-align: center;
    padding: 10px 3em;
    border-style: solid;
    border-color: #222;
    border-width: 1px 0px 1px 0px;
}

.app-hlp3 main.hlp-home-page section.home-tagline h3 {
    color: #001b34;
    font-weight: normal;
    font-style: oblique;
    font-size: 1.2em;
    letter-spacing: 0.5px;
    margin: 0;
}

.app-hlp3 main.hlp-home-page section.home-data-charts h3 {
    font-size: 1.33em;
}

.app-hlp3 .nav-panel-column-plot {
    text-align: center;
    margin: 20px 20px 20px 0px;
    width: 50%;
}


/* Menu high level metrics
--------------------------------------------- */
.app-hlp3 .nav-panel-column-plot .plot-summary {
    border-radius: 4px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    position: relative;
    cursor: pointer;
    flex-wrap: wrap;
    align-items: center;
    transition: 0.2s;
}

.app-hlp3 .nav-panel-column-plot .plot-summary:hover {
    background-color: #c6c7c8;
}

.app-hlp3 .nav-panel-column-plot .plot-summary .summary-titles .summary-title {
    background-color: #323030d1;
    color: white;
    font-size: 1.2em;
    font-family: 'Roboto', sans-serif;
    line-height: 1.5;
    width: 100%;
    letter-spacing: 0.1em;
    margin: 0 0 5px;
    border-radius: 4px 4px 0 0;
    padding: 3px 0 2px;
}

.app-hlp3 .nav-panel-column-plot .summary-titles {
    display: block;
    width: 100%;
}

.app-hlp3 .nav-panel-column-plot h5.summary-subtitle {
    margin: 0px 0 5px;
    color: rgba(0,0,0,.5);
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 0.1em;
}

.app-hlp3 .summary-metric-change {
    border: #e2e2e2 1px solid;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    padding: 0px 4px;
    font-size: .9em;
    height: 20px;
    position: relative;
    top: 5px;
    background-color: #ffffff;
}

.app-hlp3 .summary-metric-container {
    margin: 10px;
}

.app-hlp3 .summary-metric {
    display: flex;
}

.app-hlp3 .nav-panel-column-plot .plot-summary .summary-metrics .summary-metric .plot-metric {
    color: #086BA8;
    position:relative;
    top: 1px;
}

.app-hlp3 .nav-panel-column-plot .plot-summary .summary-metrics .summary-metric .summary-metric-change-value {
    color: #6f6f6f;
    position:relative;
}

.app-hlp3 .nav-panel-column-plot .plot-summary .summary-metrics .summary-metric-value {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6em;
    position: relative;
    margin-right: 5px;
}

.app-hlp3 span.metric-indicator.indicator-arrow {
    display: inline-flex;
}

.app-hlp3 div.summary-metric-change-label {
    font-size: 0.8em;
    display: block;
    text-transform: uppercase;
    margin-top: 4px;
    border-top: rgba(0,0,0,.4) thin solid;
    padding-top: 6px;
}

.app-hlp3 .nav-panel-column-plot .plot-summary .summary-metrics {
    display: flex;
    margin: 5px 0 10px;
}

.app-hlp3 .nav-panel-column-plot .plot-summary .summary-metrics .summary-metric.metric-nodata {
    display: flex;
    align-items: flex-end;
}

.app-hlp3 .nav-panel-column-plot .plot-summary .summary-metrics .summary-metric:last-of-type:after {
    content: '';
    margin: 0px;
}

.app-hlp3 .nav-panel-column-plot .plot-summary .summary-metrics .summary-metric span.indicator-arrow-up:before {
    content: url(/images-hlp/arrow-up-solid.svg);
    margin-right: 4px;
    display: inline-block;
    width: 10px;
    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(69%);
}

.app-hlp3 .nav-panel-column-plot .plot-summary .summary-metrics .summary-metric span.indicator-arrow-down:before {
    content: url(/images-hlp/arrow-down-solid.svg);
    margin-right: 4px;
    display: inline-block;
    width: 10px;
    filter: invert(18%) sepia(93%) saturate(2469%) hue-rotate(9deg) brightness(93%) contrast(94%);
}

/* hlpv3 menu
--------------------------------------------- */
.app-hlp3 .mobile-nav-container {
    display: none;
}

.app-hlp3 .mobile-nav-container ul.mobile-nav-menu li ul.mobile-drop-down-menu {
    display: none;
    margin: 20px 0;
    background: linear-gradient(45deg, rgba(255,255,255,.1), rgba(255,255,255,0.15));
    padding: 10px;
    list-style: none;
    border-radius: 4px;
}

.app-hlp3 .mobile-nav-container ul.mobile-nav-menu li.mobile-has-children-expanded ul {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: 20px;
}

.app-hlp3 .mobile-nav-container ul.mobile-nav-menu {
    display: none;
    background: linear-gradient(180deg, rgb(0 27 52 / 97%), rgb(0 27 52 / 100%));
    position: absolute;
    top: 80px;
    left: 0px;
    right: 0px;
    font-size: 1.5em;
    padding: 20px 50px;
    overflow: scroll;
    height: calc(100vh - 80px);
    margin: 0;
    list-style: none;
    text-align: right;
}

.app-hlp3 .mobile-nav-container ul.mobile-nav-menu li ul {
    font-size: .7em;
}

.app-hlp3 .mobile-nav-container.mobile-nav-container-expanded > ul.mobile-nav-menu {
    display: block;
    z-index: 99999999;
}

.app-hlp3 .menu-toggle {
    width: 30px;
    height: 30px;
    display: block;
    transition: 0.2s;
}

.app-hlp3 .mobile-nav-container-expanded .menu-toggle {
    transform: rotate(-45deg);
}

.app-hlp3 .top-bar,
.app-hlp3 .middle-bar,
.app-hlp3 .bottom-bar {
    display: block;
    width: 100%;
    background: white;
    height: 20%;
    transition: 0.2s;
    border-radius: 50px;
}

.mobile-nav-container-expanded .menu-toggle .top-bar {
    height: 38%;
    width: 20%;
    margin-left: 40%;
    border-radius: 50px 50px 0 0;
}

.app-hlp3 .mobile-nav-container-expanded .menu-toggle .bottom-bar {
    height: 38%;
    width: 20%;
    margin-left: 40%;
    border-radius: 0 0 50px 50px;
}

.app-hlp3 .middle-bar {
    margin: 20% 0;
}

.app-hlp3 .mobile-nav-container-expanded .menu-toggle .middle-bar {
    margin: 0;
}

.app-hlp3 .mobile-nav-container a,
.app-hlp3 .mobile-nav-container a:visited {
    color: white;
    text-decoration: none;
}

.app-hlp3 .mobile-nav-container li {
    margin: 20px 0;
}

.app-hlp3 .mobile-nav-container li ul li {
    margin: 15px 0;
}

.app-hlp3 .mobile-nav-container li .nav-panel-column-plot {
    margin: 5px 0 20px 20px;
    width: 50%;
}

.app-hlp3 .mobile-nav-container li .nav-panel-column-plot .plot-summary .summary-titles .summary-title {
    background-color: #323030d1;
    color: white;
    font-size: 1em;
}

.app-hlp3 .twitter-typeahead .tt-input::-webkit-search-cancel-button {
    display: none;
}


.app-hlp3 .twitter-typeahead:focus-within .tt-input::-webkit-search-cancel-button {
    display: block;
}


.app-hlp3 header .search-icon .twitter-typeahead input::placeholder {
    opacity: 0;
}


.app-hlp3 header .search-icon .twitter-typeahead:focus-within input::placeholder {
    opacity: 1;
}


/* DataTable Styles
--------------------------------------------- */
.app-hlp3 .chart-page .plot-type-TABLE table.dataTable {
    width: 100%;
    border: rgba(0,0,0,.4) thin solid;
    border-radius: 4px;
    padding-top: 0em;

}

.app-hlp3 .chart-page .plot-type-TABLE table.dataTable caption .plot-subcaption {
    display: unset;
    font-size: unset;
    line-height: unset;
    margin-bottom: unset;
    margin-left: 10px;
    font-weight: normal;
}

.app-hlp3 .chart-page .plot-type-TABLE table.dataTable caption .plot-subcaption::before {
    content: "|";
    margin-right: 10px;
}

.app-hlp3 .chart-page .plot-type-TABLE table.dataTable caption {
    font-size: 1.2em;
    line-height: initial;
    color: rgb(104 104 104);
    margin-bottom: 10px;
}

.app-hlp3 .chart-canvas .chart-plot {
    width: 100%;
}

.app-hlp3 .chart-page .plot-type-TABLE table.dataTable tr.dtrg-group th {
    height: unset;
    background-color: #b5b5b5;
}

.app-h2.app-hlp .chart-page .plot-type-TABLE table.dataTable tbody td {
    padding-top: 4px;
    padding-bottom: 4px;
}

.app-hlp .chart-page table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before, 
.app-hlp .chart-page table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
    content: '-';
}

.app-hlp .chart-page table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before, 
.app-hlp .chart-page table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
    top: 5px;
    left: 4px;
    height: 8px;
    width: 8px;
    display: block;
    position: absolute;
    color: #000;
    border: 2px solid #f0f0f2;
    border-radius: 8px;
    box-shadow: 0 0 3px #444;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: 'Courier New', Courier, monospace;
    line-height: 8px;
    content: '+';
    background-color: #fff;
}

.app-hlp .chart-page .plot-type-TABLE label {
    color: #333333;
}

.app-hlp3 .chart-layout-singlecol .plot-group {
    margin: 30px 2%;
}

.app-hlp .dataTable td {
    border-left: #d8d8d8 thin solid;
}

.app-hlp3 .nav-panel-current {
    border: #9a9595 thin solid !important;
}

.app-hlp3 .nav-link-current {
    text-decoration: underline;
    text-decoration-thickness: 0.13em;
    font-weight: bold;
}

/* Plot Chart Header Titles
--------------------------------------------- */
.app-hlp3 .chart-plot-container .header-title {
    font-size: 1.2em;
    margin: 0;
}

.app-hlp3 .chart-plot-container .header-subtitle {
    font-size: .9em;
    margin: 0;
    margin-top: 7px;
    text-transform: uppercase;
    font-weight: normal;
}

/* include a small white space below where the page content scrolls
--------------------------------------------- */
.app-hlp3 #main-form-container:after {
    content: "";
    min-height: 40px;
    background-image: linear-gradient(0deg, rgba(255,255,255,0) 20%, rgba(255,255,255,1));
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    border-top: #D9D9D9 thin solid;
}


/* pagination styling
--------------------------------------------- */
.app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    border: none;
    background: transparent;
    font-weight: bold;
    border-bottom: black thin solid !important;
    border-radius: 0;
    color: black !important;
}

.app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate a.paginate_button:hover {
    background: transparent;
    color: black !important;
    border: none;
    font-weight: bold;
    border-bottom: transparent thin solid;
}

.app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #909090 !important;
    border: none;
    font-size: 1.2em;
}

.app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #e3e3e3 !important;
    border-bottom: none
}

.app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #dcdcdc !important;
    border-bottom: none;
    font-weight: normal;
}

.app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate .paginate_button.first,
.app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate .paginate_button.last,
.app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    font-size: 2.3em;
    border-bottom: 0;
    padding: 0px;
    margin: 0px;
    position: relative;
    display: inline;
    top: 4px;
    margin: 0px 10px;
}

.app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate .paginate_button.first:hover,
.app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate .paginate_button.last:hover,
.app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
    border-bottom: none
}


/* improve form element styling on firefox/safari
--------------------------------------------- */
.app-hlp3 #app-main .group-plots select {
    border: 1px solid #aaa;
    padding: 5px;
    background-color: white;
    height: 27px;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 3px;
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
}

.app-hlp3 #app-main .group-plots label {
    margin-left: 10px;
}

.app-hlp3 #app-main .group-plots label:last-of-type {
    margin-right: 0px;
}


/* Always show scrollbars
--------------------------------------------- */
.app-hlp3 .chart-canvas .plot-group ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

.app-hlp3 .chart-canvas .plot-group ::-webkit-scrollbar-thumb {
    background-clip: content-box;
    border-color: transparent;
    border-style: solid;
    border-width: 1px 2px;
    background-color: #aaa;
    background-image: linear-gradient(180deg, #fff 40%, #aaa 40%);
}


/* Plot action menu
--------------------------------------------- */
.app-hlp3 .chart-canvas .control-menu {
    display: block;
    max-width: 26px;
}

.app-hlp3 .chart-canvas .chart-plot-container .plot-header {
    position: relative;
    cursor: pointer;
    margin-bottom: 15px;
}

.app-hlp3 .chart-canvas .chart-plot-container .plot-header .header-controls {
    width: 26px;
    position: absolute;
    top: -7px;
    right: 0;
    z-index: 99999;
}

.app-hlp3 .chart-canvas .chart-plot-container .plot-header .header-titles {
    margin: 0 35px;
}


/* show HLPv3 plot action menu control?
--------------------------------------------- */
.app-hlp3 .chart-canvas .chart-plot-container .plot-header.header-predata,
.app-hlp3 .chart-canvas .chart-plot-container.no-plot-menu .plot-header .header-controls {
    display: none;
}


/* Hide DataTables export buttons (HLPv3 implements it's own UX)
--------------------------------------------- */
.app-hlp3 .chart-canvas .chart-plot.plot-type-TABLE .dt-buttons {
    display: none;
}


/* show HLPv3 plot action menu?
/// REVIEW
--------------------------------------------- */
.app-hlp3 .chart-page .plot-menu.mode-collapsed-view {
    display: none;
}

.app-hlp3 .chart-canvas .plot-menu {
    position: absolute;
    right: 0;
    top: 30px;
    background-color: white;
    z-index: 999999;
}

.app-hlp3 .chart-page .plot-menu .pam-container {
    display: inline-block;
    text-align: left;
    border-radius: 10px;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 40%);
    padding: 25px;
}

.app-hlp3 .chart-page .plot-menu .pam-container .pam-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: rgba(0,0,0,0.2) thin solid;
}

.app-hlp3 .chart-page .plot-menu .pam-container .pam-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.app-hlp3 .chart-page .plot-menu .pam-container .pam-section h3.pam-section-title {
    margin: 0 0 20px;
    color: rgb(105,105,105);
    font-size: 1.1em;
    text-transform: uppercase;
}

.app-hlp3 .chart-page .plot-menu .pam-container .pam-section h4.pam-section-link-title {
    margin: 0;
    font-weight: 400;
    font-size: 1em;
}

.app-hlp3 .chart-page .plot-menu .pam-container .pam-section p.pam-section-link-filename {
    margin: 0;
    color: #a1a3a6;
    font-style: italic;
    font-size: .9em;
}

.app-hlp3 .chart-page .plot-menu .pam-container .pam-section a.pam-section-link {
    display: flex;
    background-color: #F6F6F6;
    border-radius: 7px;
    padding: 10px;
    border: #C1C1C1 thin solid;
    align-items: center;
    transition: none;
    margin-bottom: 15px;
    color: inherit;
    text-decoration: none;
}

.app-hlp3 .chart-page .plot-menu .pam-container .pam-section a.pam-section-link:hover {
    background-color: #b8b6b6;
    border: #686767 thin solid;
}

.app-hlp3 .chart-page .plot-menu .pam-container .pam-section a.pam-section-link:hover h4.pam-section-link-title,
.app-hlp3 .chart-page .plot-menu .pam-container .pam-section a.pam-section-link:hover p.pam-section-link-filename {
    color: white;
}

.app-hlp3 .chart-page .plot-menu .pam-container .pam-section a.pam-section-link:hover .pam-section-icon img {
    filter: brightness(2) invert(1);
}

.app-hlp3 .chart-page .plot-menu .pam-container .pam-section .pam-section-icon img {
    height: 32px;
    margin-left: 20px;
    display: block;
}

.app-hlp3 .chart-page .plot-menu .pam-container .pam-section .pam-section-text {
    flex: 1 1 auto;
}

@media (min-width:961px) {
    .app-hlp3 header nav#site-navigation ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
}


@media screen and (max-width: 1200px) {
    .app-hlp #hlp-contact-page #name,
    .app-hlp #hlp-contact-page #email {
        width: 99%;
    }

    .app-hlp3 header nav#site-navigation .nav-panel-columns {
        padding: 20px 7%;
    }

    .app-hlp3 .plot-group {
        margin: 30px 3%;
    }

    .app-hlp #hlp-home-page .chart-canvas {
        width: 100%;
    }

    .app-hlp #hlp-home-page .chart-canvas > .chart-plot {
        width: 100%;
        max-width: 500px;
        float: none;
    }
    
    .app-hlp #hlp-home-page .chart-canvas .chart-plot:nth-child(2) {
        margin: 0 auto;
    }

    .app-hlp #hlp-help-page .pdf-block .title p {
        font-size: 0.85em;
        background-size: 2em;
        padding-left: 3em;
    }
    .app-hlp #hlp-help-page .middle {
	    margin: 0 0.66%;
    }
}


@media screen and (max-width: 1020px) {
    .app-hlp #hlp-header #header-nav-holder ul {
        font-size: .8px;
    }
    .app-hlp #header-nav-holder ul.nav ul li {
        width: 200px;
    }
}


@media screen and (max-width: 960px) {
    .static-body-content {
        overflow: hidden;
    }    
    /* Remove menu and search flicker from Desktop to Mobile sizing */    
    .app-hlp3 header nav#site-navigation ul#main-navigation {
        display: none;
    }    
    .app-hlp3 .mobile-nav-container ul li:last-of-type {
        margin-bottom: 100px;
    }
    .app-hlp3 .mobile-nav-container ul li ul li:last-of-type {
        margin-bottom: 18px;
    }    
    
    .app-hlp #hlp-home-page div.content,
    .app-hlp #hlp-footer div.content {
        margin: 0 15px;
    }

    .app-hlp3 .chart-canvas.chart-layout-matrix .chart-plot-container,
    .app-hlp3 .chart-canvas.chart-layout-snapshot #plot-group-charts.plot-group .chart-plot-container {
        width: 100%;
        padding: 0;
    }

    .app-h2 .chart-page .chart-canvas .plot-group .group-plots .chart-plot {
        scrollbar-width: auto;
    }

    .app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate .paginate_button.first, .app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate .paginate_button.last, .app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate .paginate_button.previous, .app-hlp3 #app-main .dataTables_wrapper .dataTables_paginate .paginate_button.next {
        font-size: 2em;
        margin: 0px 5px;
    }

    .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
        float: right !important;
    }

    div#DataTables_Table_0_info {
        display: none;
    }

    .app-h2 .chart-page .chart-canvas.chart-layout-singlecol .plot-group .group-plots div#DataTables_Table_0_wrapper > div.dt-buttons {
        display: none;
    }

    .app-hlp3 #main-form-container:after {
        display: none;
    }

    .app-hlp3 .plot-group {
        margin: 30px 4%;
    }

    .app-hlp3 .ui-multiselect {
        padding-left: 0;
    } 

    .app-hlp3 .chart-page #main-form {
        display: block;
    }
    
    .app-hlp3 #chart-form .keyword-param {
        margin: 5px 10px;
    }

    .app-hlp3 header nav ul li#sitewide-search:before {
        content: url(/images-hlp/search-solid.svg);
        filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(172%) hue-rotate(31deg) brightness(114%) contrast(100%);
        width: 25px;
        left: -10px;
        position: absolute;
        top: 4px;
    }

    .app-hlp3 header nav ul li#sitewide-search {
        left: 10px;
        display: inline-block;
        margin: 20px 0 10px;
    }

    .app-hlp3 header .search-icon input {
        transition: none;
        margin-left: 0;
        position: relative;
    }

    .app-hlp3 header #sitewide-search .tt-menu {
        left: 0px !important;
        width: auto;
    }

    .app-hlp3 .mobile-nav-container li .nav-panel-column-plot {
        margin: 15px;
        max-width: 400px;
        flex: 0 1 auto;
        width: 100%;
    }

    .app-hlp3 .chart-page .chart-canvas .plot-group .group-plots .chart-plot-container {
        display: block;
        width: 100%;
        position: relative;
    }

    .app-hlp3 .chart-canvas.chart-layout-two-column .chart-plot, 
    .app-hlp3 .chart-canvas.chart-layout-matrix .chart-plot,
    .app-hlp3 .chart-canvas.chart-layout-snapshot .chart-plot {
        width: 100%;
        margin: 0px 0px 75px;
        padding: 0;
    }

    .app-hlp3 header .search-icon .twitter-typeahead input {
        width: 275px;
        color: #444444;
        cursor: auto;
        background-color: #fff !important;
        border-color: rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 5px rgb(109 207 246 / 50%);
    }

    .search-icon::after {
        display: none;
    }

    .app-hlp3 .mobile-nav-container {
        display: block;
    }

    .app-hlp #header-nav-holder ul.mobile-navigation-menu {
        text-align: left;
    }

    .app-hlp #hlp-header #header-nav-holder ul {
        font-size: .9px;
    }

    .app-hlp.client-rca #hlp-header #header-nav-holder ul {
        padding: 40px;
    }

    .app-hlp #hlp-header #header-nav-holder ul {
       text-align: left;
    }

    .app-hlp #header-nav-holder ul.nav > li {
        padding: 0 10px;
    }
}


@media screen and (max-width: 768px) {
    .app-hlp #hlp-help-page .pdf-block .title p {
        font-size: 0.8em;
    }

    .app-hlp .chart-canvas > .chart-plot {
        width: auto;
        float: none;
        margin: inherit;
    }

    .app-hlp #chart-form.mode-summary-view #chart-summary {
        padding-bottom: 0;
    }

    .app-hlp #chart-form #summary-list li.action-text div.chart-form-text {
        border-bottom: none;
        border-radius: 3px 3px 0 0;
    }

    .app-hlp #app-main .content.article-page img,
    .app-hlp #app-main .content.weblog-page img {
        max-width: 100%;
    }

    .app-hlp #hlp-help-page .pdf-block {
        display: block;
        width: 75%;
        margin: 0 0 1em 0;
    }
}

@media screen and (max-height: 650px) {
	.app-hlp #header-nav-holder #hlp-nav-menu ul.main-menu {
		line-height: 1.5em;
	}
}

@media screen and (max-width: 650px) {
    .app-hlp3 .ui-multiselect-menu.hlpchartform {
        width: 100vw !important;
        left: 0 !important;
    }

    .app-hlp3 .ui-multiselect-menu.hlpchartform>ul.ui-multiselect-checkboxes {
        min-height: 38vh;
        padding-bottom: 18px;
        box-shadow: 0px 10px 10px -9px #04040466;
    }

    .app-hlp3 #chart-form button.ui-multiselect span.ui-multiselect-open + span:after {
        position: absolute;
        right: 4px;
        top: 1px;
    }
    
    .app-h2 .chart-page .chart-canvas.chart-layout-singlecol .plot-group .group-plots {
        padding: 10px 15px 10px;
    }

    .app-hlp3 .mobile-nav-container ul.mobile-nav-menu {
        font-size: 1.2em;
        padding: 20px 30px;
    }

    .app-hlp3 #chart-form button.ui-multiselect span, .app-hlp3 #chart-form .ui-multiselect-menu ul.multiselect-checkboxes li {
        white-space: break-spaces;
    }

    .app-hlp3 #chart-form button.ui-widget.ui-state-default {
        border: #ccc 1px solid;
        padding: 2px 6px;
        width: 100%;
    }

    .app-hlp3 #chart-form button.ui-multiselect span + span {
        overflow: visible;
        text-overflow: initial;
        display: inline-block;
        vertical-align: text-bottom;
        max-width: 100%;
    }

    .app-hlp3 #chart-form .keyword-param label {
        width: 100%;
    }

    .app-hlp3 #chart-form .keyword-group {
        width: 100%;
    }

    .app-hlp3 .plot-group {
        margin: 30px 10px;
    }

    .app-hlp3 #chart-input-chart {
        display: block;
    }

    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
        text-align: right !important;
        float: right !important;
    }

    .app-hlp #hlp-footer .content .logo-holder {
        margin-top: 30px;
    }

    .app-hlp3 .chart-page .plot-menu .pam-container .pam-section .pam-section-icon {
        display: none;
    }
}


@media screen and (max-width: 500px) {

    .app-hlp3 header nav ul li#sitewide-search {
        /* position: relative; */
        padding-left: unset;
    }

    .app-hlp3 header .search-icon::after {
        display: none;
    }

    .app-hlp #header-nav-holder #hlp-nav-menu ul.submenu li a,
    .app-hlp #header-nav-holder #hlp-nav-menu ul.main-menu li a,
    .app-hlp #header-nav-holder #hlp-nav-menu ul.main-menu li.selected {
        font-size: 0.8em;
    }

    .app-hlp #header-nav-holder #hlp-nav-menu ul.main-menu {
        width: 110px;
        line-height: 2.2em;
    }

    .app-hlp #header-nav-holder #hlp-nav-menu ul.main-menu li ul.submenu {
        left: 120px;
    }

    .app-hlp .blog-roll {
        display: none;
    }

    .app-hlp #recent-article-list {
	    width: 100%;
	    float: left;
    }

    .app-h2 .chart-page .chart-canvas.chart-layout-singlecol div#DataTables_Table_0_paginate {
        float: left !important;
        max-width: 100vw;
    }

    .app-hlp #hlp-home-page {
        padding: 60px 0;
        margin: 0;
    }

    .app-hlp3 .chart-page #chart-layout-select {
        margin: 0px 0px;
        padding: 10px 10px 0;
        text-align: right;
    }

    .app-hlp3 .chart-page #main-form-container {
        height: initial;
        display: block;
    }

    .app-hlp .chart-page .dataTables_filter label {
        display: block;
        padding-bottom: 1em;
    }

    .app-hlp3 header nav ul li#sitewide-search:before {
        display: none;
    }
    
    .app-hlp3 header .search-icon input:focus {
        width: 100%;
    }
    
    .app-hlp3 span.twitter-typeahead {
        width: 100%;
    }
    
    .app-hlp3 header nav ul li#sitewide-search {
        left: 0;
        width: 100%;
    }
    
    .app-hlp3 header .search-icon input {
        padding: 7px 4px 7px;
        width: 100%;
    }
    
    .app-hlp3 header .search-icon .twitter-typeahead input {
        width: calc(100% - 15px);
        padding: 8px 15px;
    }
    
    .app-hlp3 header #sitewide-search .tt-menu {
        width: 90%;
    }

    .app-hlp3 header.masthead section.site-branding {
        max-width: 190px;
    }
    
    .app-hlp3 .nav-panel-column-plot .plot-summary .summary-metrics {
        display: block;
        margin: 10px 0 10px;
    }
}


@media screen and (max-width: 350px) {
    .app-hlp3 #header-nav-holder #hlp-nav-menu ul.submenu li a,
    .app-hlp3 #header-nav-holder #hlp-nav-menu ul.main-menu li a,
    .app-hlp3 #header-nav-holder #hlp-nav-menu ul.main-menu li.selected {
        font-size: 0.75em;
    }
}

/* ACS Landing Page
--------------------------------------------- */

/* .app-hlp3 #acs-landing {
    margin: -4.33em -2.33em;
}

.app-hlp3 #acs-landing .hero-image img {
    width: 100% !important;
    max-width: 9999px !important;
    display: block;
}

.app-hlp3 #acs-landing > * {
    padding: 0px 70px;
}

.app-hlp3 #acs-landing > .hero-image {
    padding: 0px;
}

.app-hlp3 #acs-landing .acs-items {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(3, 1fr);
    margin: 30px 0px 120px;
}

.app-hlp3 #acs-landing .acs-items .acs-item {
    text-align: center;
    background-color: #5778a726;
    padding: 15px;
    border-radius: 10px;
    transition: .2s;
    border: #1d236524 1px solid;
}

.app-hlp3 #acs-landing .acs-items .acs-item:hover {
    transform: scale(101%);
    box-shadow: 0px 7px 8px -10px rgba(0,0,0,1);
}

.app-hlp3 #acs-landing .acs-items h2 {
    line-height: 26px;
    font-size: 1.25em;
    margin: 0px;
    color: #1d2365;
}

.app-hlp3 #acs-landing p {
    margin: 0px;
}

.app-hlp3 #acs-landing a {
    color: inherit;
    text-decoration: none;
}

.app-hlp3 #acs-landing > h2 {
    background-color: #1d2365;
    text-transform: uppercase;
    color: white;
    margin: 0px;
    padding: 30px;
    font-size: 2em;
    line-height: 38px;
}

.app-hlp3 #acs-landing > h3 {
    background-color: #1d2365a3;
    text-transform: uppercase;
    color: white;
    margin: 0px 0px 40px;
    padding: 20px;
    font-size: 1.4em;
    line-height: 28px;
    text-align: center;
}

@media screen and (max-width: 1120px) {
    .app-hlp3 #acs-landing .acs-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .app-hlp3 #acs-landing .acs-items {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .app-hlp3 #acs-landing > * {
        padding: 0px 30px;
    }
    
    .app-hlp3 #acs-landing > h2 {
        font-size: 1.5em
    }
    
    .app-hlp3 #acs-landing > h3 {
        font-size: 1.2em
    }
} */


/* ACS Landing Page
--------------------------------------------- */

.app-hlp3 #hlp-acs-page #acs-breadcrumb-container {
    background-color: rgb(218, 236, 248);
    border-bottom: #D9D9D9 thin inset;
    display: flex;
    align-items: center;
    height: 45px;
    position: sticky;
    top: 80px;
    width: 100%;
    z-index: 999999;
}

.app-hlp3 #hlp-acs-page #acs-breadcrumb-container ul#acs-breadcrumbs {
    list-style-type: none;
}

.app-hlp3 #hlp-acs-page #acs-breadcrumb-container ul#acs-breadcrumbs li {
    display: inline;
}

.app-hlp3 #hlp-acs-page #header-acs-wrap {
    background: #00192F;
    margin-top: 0;
    padding:0px 0px;
}
.app-hlp3 #hlp-acs-page #header-acs-wrap .header-acs {
    display: flex;
    align-items: center;
    margin: 0 auto;
    max-width: 1280px;
    padding: 0 60px;
}
.app-hlp3 #hlp-acs-page #header-acs-wrap .header-acs .header-acs-text {
    padding: 0 60px 0 0;
    width: 55%;
}
.app-hlp3 #hlp-acs-page #header-acs-wrap .header-acs .header-acs-text h1 {
    color: #ffffff;
    font-size: 2.925em;
    font-family: 'Oswald', Arial, sans-serif;
    line-height: 1.125em;
    margin-bottom: 0.325em;
    margin-top:0;
    text-transform: uppercase;
}
.app-hlp3 #hlp-acs-page #header-acs-wrap .header-acs .header-acs-text span {
    color: #DAECF8;
    font-size: 1.875em;
    font-weight: 700;
    text-transform: uppercase;
}
.app-hlp3 #hlp-acs-page #header-acs-wrap .header-acs .header-acs-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 400px;
    flex: 1 0 auto;
    width: 45%;
}

@media screen and (max-width: 1240px) {
    .app-hlp3 #hlp-acs-page #header-acs-wrap .header-acs .header-acs-img {
        min-height: 360px;
    }
    .app-hlp3 #hlp-acs-page #header-acs-wrap .header-acs .header-acs-text {
        padding: 0 45px 0 0;
    }    
}

@media screen and (max-width: 960px) {
    .app-hlp3 #hlp-acs-page #header-acs-wrap .header-acs {
        
    }    
    .app-hlp3 #hlp-acs-page #header-acs-wrap .header-acs .header-acs-text {
        padding: 0 30px 0 0;
    }
    .app-hlp3 #hlp-acs-page #header-acs-wrap .header-acs .header-acs-text h1 {
        font-size: 2.325em;
    }    
    .app-hlp3 #hlp-acs-page #header-acs-wrap .header-acs .header-acs-img {
        min-height: 320px;
    }
}

@media screen and (max-width: 768px) {
    .app-hlp3 #hlp-acs-page #header-acs-wrap .header-acs {
        flex-direction: column;
        padding: 0 0px;
    }
    .app-hlp3 #hlp-acs-page #header-acs-wrap .header-acs .header-acs-text {
        padding: 45px 30px;
        order: 2;
        width:inherit;
    }    
    .app-hlp3 #hlp-acs-page #header-acs-wrap .header-acs .header-acs-text h1 {
        font-size: 2.325em;
    }    
    .app-hlp3 #hlp-acs-page #header-acs-wrap .header-acs .header-acs-text span {
        font-size: 1.625em;
    }    
    .app-hlp3 #hlp-acs-page #header-acs-wrap .header-acs .header-acs-img {
        min-height: 380px;
        order: 1;
        width:100%;
    }
}

.app-hlp3 #hlp-acs-page > * {
    padding: 0px 70px;
}

.app-hlp3 #hlp-acs-page .acs-intro-text {
    margin: 60px auto 60px;
    max-width: 1280px;    
}

.app-hlp3 #hlp-acs-page .acs-intro-text p {
    font-size: 1.125em;
    line-height: 1.625em;
    max-width: 1040px;
}

.app-hlp3 #hlp-acs-page .acs-items {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(3, 1fr);
    margin: 30px auto 120px;
    max-width: 1280px;
}

.app-hlp3 #hlp-acs-page .acs-items .acs-item {
    text-align: center;
    background-color: #5778a726;
    padding: 25px 18px;
    border-radius: 10px;
    transition: .2s;
    border: #1d236524 1px solid;
}

.app-hlp3 #hlp-acs-page .acs-items .acs-item .acs-item-top img {
    filter: brightness(0) saturate(100%) invert(12%) sepia(31%) saturate(4184%) hue-rotate(221deg) brightness(96%) contrast(98%);
}


.app-hlp3 #hlp-acs-page .acs-items .acs-item:hover {
    transform: scale(101%);
    box-shadow: 0px 7px 8px -10px rgba(0,0,0,1);
}

.app-hlp3 #hlp-acs-page .acs-items h2 {
    line-height: 26px;
    font-size: 1.25em;
    margin: 0px;
    color: #1d2365;
}

.app-hlp3 #hlp-acs-page p {
    margin: 0px;
}

.app-hlp3 #hlp-acs-page a {
    color: inherit;
    text-decoration: none;
}

.app-hlp3 #hlp-acs-page > h2 {
    background-color: #1d2365;
    text-transform: uppercase;
    color: white;
    margin: 0px;
    padding: 30px;
    font-size: 2em;
    line-height: 38px;
}

.app-hlp3 #hlp-acs-page > h3 {
    background-color: #1d2365a3;
    text-transform: uppercase;
    color: white;
    margin: 0px 0px 40px;
    padding: 20px;
    font-size: 1.4em;
    line-height: 28px;
    text-align: center;
}

@media screen and (max-width: 1120px) {
    .app-hlp3 #hlp-acs-page .acs-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .app-hlp3 #hlp-acs-page .acs-intro-text {
        margin: 45px auto 45px;
    }
    
    .app-hlp3 #hlp-acs-page .acs-items {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .app-hlp3 #hlp-acs-page > * {
        padding: 0px 30px;
    }
    
    .app-hlp3 #hlp-acs-page > h2 {
        font-size: 1.5em
    }
    
    .app-hlp3 #hlp-acs-page > h3 {
        font-size: 1.2em
}

/* css rules specific to a dashboard
--------------------------------------------- */
/* HLP v2 v2 style - 1-column layout */
.app-hlp #chart-popagedistrace-page .chart-canvas > .chart-plot,
    width: 96%;
}

/* HLP v2 3-column layout */
.app-hlp #chart-popagedistus-page .chart-canvas > .chart-plot {
    width: 30%;
}

/* HLP v2 dashboard specific responsive */
@media screen and (max-width: 768px) {
    .app-hlp #chart-popagedistus-page .chart-canvas > .chart-plot {
        width: auto;
        float: none;
        margin: inherit;
    }
}

/* HLP v3 dashboard specific responsive */
@media screen and (max-width: 960px) {
    .app-hlp3 #chart-cewsal .chart-plot {
        width: 100%;
        margin: 0px 0px 75px;
        padding: 0;
    }
}