/*
    This file is meant to serve as a starter for the Job Market Outlook (JMO) in full width,
    Please exercise caution in what you style and how you style it.
    As the JMO receives updates, you may need to re-download this file to style additional features.
    You may need to use !important in some places to make sure your styles override the JMO defaults
*/

.ppw {
   width: 100% !important;
   max-width: 100% !important;
	border:none;
	box-shadow: 0 0 12px 0 rgb(0 0 0 / 20%);
}
.ppw .ppw-grid-area {
    display: flex;
    flex-wrap: wrap;
}
.ppw .ppw-grid-area .ppw-occupations-area {
    width: 100%;
}
.ppw .ppw-grid-area .ppw-left-area {
    width: 100%;
}
@media screen and (min-width: 800px) {
    .ppw .ppw-grid-area .ppw-left-area {
        width: 60%;
    }
    .ppw .ppw-grid-area .ppw-occupations-area {
        width: 40%;
    }
    .ppw .ppw-chart-container {
        border: none;
    }
}


.ppw .ppw-title {
    font-weight: 500;
}

.ppw .ppw-search-area {
    /* the location area where you see the location and have the location switcher */
}

.ppw .ppw-search-area .location {
    /* the location text of the current location */
}

.ppw .ppw-search-area .search-input {
    /* the location search box, if on */
}

.ppw .ppw-search-area .icon-container {
    /* the geo locate button if on and HTTPS. If no HTTPs this will be the search magnifying glass  */
}

.ppw .ppw-user-config-bar .right-content .icon-container .search-icon, .ppw .ppw-user-config-bar .right-content .icon-container .icon-loading, .ppw .ppw-user-config-bar .right-content .icon-container .geo-locate {
    position: relative;
    top: 2px;
    fill: orange;
    height: 24px;
}

.ppw .ppw-search-area .ppw-salary-range {
    /* the salary range area, if on */
}

.ppw .ppw-search-area .ppw-salary-range .ppw-salary-range-label {
    /* the salary range label */
}

.ppw .ppw-search-area .ppw-salary-range .ppw-salary-change {
    /* the salary range selection dropdown */
}

.ppw .ppw-heading {
    /* the headings throughout the JMO */
}

/* overview section */
.ppw .ppw-overview-section {
    /* the overview section if visible */
}

.ppw .ppw-overview-section .ppw-stat-container {
    /* the container for the top 3 stats */
}

.ppw .ppw-overview-section .ppw-stat-container .stat {
    /* the container for each of the 3 stats */
}

.ppw .ppw-overview-section .ppw-stat-container .stat .icon-contain {
    /* the container stat icons */
}

.ppw .ppw-overview-section .ppw-stat-container .stat .icon-contain svg {
    /* the stat icon svg */
}

.ppw .ppw-overview-section .ppw-stat-container .stat .stat-p {
    /* the stat text content */
}

/* Employment Trends */
.ppw .ppw-estimated-section {
    /* the employment section if visible */
}

.ppw .ppw-estimated-section .ppw-chart-container {
    /* the main content for the employment section */
}

.ppw .ppw-estimated-section .ppw-chart-container .callout {
    /* the given call out */
}

.ppw .ppw-estimated-section .ppw-chart-container .callout .percent {
    /* the given call out percentage */
}

.ppw .ppw-estimated-section .ppw-chart-container .callout .description {
    /* the given call out description */
}

.ppw .ppw-estimated-section .ppw-chart-container .callout .year {
    /* the given call out year range */
}

.ppw .ppw-estimated-section .ppw-chart-container #chart-area {
    /* the line graph canvas */
}

/* Top Occupation Section */
.ppw .ppw-occupations-area {
    /* the occupation section if visible */
}

.ppw .ppw-occupations-area .ppw-bar-container {
    /* the occupation section bar container */
}

.ppw .ppw-occupations-area .ppw-bar-container .bar-wrapper .hit-area {
    /* the occupation section a given bar */
}

.ppw .ppw-occupations-area .ppw-bar-container .bar-wrapper .hit-area .title .description .actual-title {
    /* the give bar title */
}

.ppw .ppw-occupations-area .ppw-bar-container .bar-wrapper .hit-area .title .amount {
    /* the give bar title salary amount if visible */
}

.ppw .ppw-occupations-area .ppw-bar-container .bar-wrapper .hit-area .bar-background {
    /* the give bar background */
}

.ppw .ppw-occupations-area .ppw-bar-container .bar-wrapper .hit-area .bar-background .bar-fill {
    /* the give bar file color */
}

.ppw .ppw-occupations-area .ppw-bar-container .bar-wrapper .content {
    /* the give bar content */
}

.ppw .ppw-occupations-area .ppw-bar-container .bar-wrapper .content .content-heading {
    /* the give bar content heading */
}

.ppw .ppw-occupations-area .ppw-bar-container .bar-wrapper .content .content-descript {
    /* the give bar content heading */
}

.ppw .ppw-occupations-area .ppw-bar-container .bar-wrapper .content .content-descript .occupationInfo {
    /* the link to the CPE if configured */
}

.ppw .ppw-occupations-area .ppw-bar-container .bar-show-controller {
    /* the show and hide more button for occupation, if can be shown */
}

/* the call to action */
.ppw .ppw-footer {
    /* the footer for the JMO */
}

.ppw .ppw-footer .tagline {
   font-size: 20px;
    line-height: 38px;
    margin-top: 0;
    margin-bottom: 0;
	 font-weight: 500;
    word-break: break-word;
}

.ppw .ppw-footer .cta-p .cta {
    background-color: #ffffff;
    border-radius: 15px;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    min-width: 0;
    margin-bottom: 20px;
    outline: none;
    padding: 16px 24px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    width: 100%;
    border-radius: 0.25rem;
    box-shadow: 0 0 12px 0 #ccc;
    background: #007077;
    text-decoration: none;
    border: none;
    font-size: 14px;
}

.ppw .ppw-footer .cta-p .cta:hover {
    cursor: pointer;
    background-color: var(--orange) !important;
    color: var(--dark);
	transition-delay: .3s;
    font-weight: 600;
	text-decoration: none !important;
}

.ppw .ppw-footer .cta-p .cta:focus {
    outline: none; 
}