/*
    This file is meant to serve as a starter for the Career and Program Explorer (CPE),
    Please exercise caution in what you style and how you style it.
    As the CPE 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 CPE defaults
*/

/*
 * This must be the first style declaration in this file, if it is not, these values will be ignored.
*/
:root {
    /* primary color for the CPE, this will override the primary color from what is stored on pathways */
    --cpe-primary-color: blue;
    /* secondary color for the CPE, this will override the primary color from what is stored on pathways, don't make the same as the primary color */
    --cpe-secondary-color: red;
    /* font-family for the CPE, this will override the primary color from what is stored on pathways 
       if using a custom font, please provide an import to the font file */
    --cpe-font-family: 'san-serif';
}

/* Other styles */
.cpe .search-box-container {
    /* The main search box on the landing page */
}

.cpe .search-box-container .header {
    /* the header above the search box */
}

.cpe .search-box-container .sub-header {
    /* the sub-header above the search box */
}

.cpe #basic-combo-search-occupation {
    /* the search box */
}

.cpe .search-icon-container .search-icon {
  /* the icon inside of the search box, this is an SVG so you need to use a fill style  */
    fill: 'black';  
}


.cpe .cpe-header {
	/* the main header element as seen on the 4 tabs */
    color: black;
}

.cpe .search-link .search-icon {
    /* the main header search icon on the 4 tabs, this is an SVG so you need to use a fill style */
    fill: 'black';
}

/* search results page */
/* the wrapper for the search results */
.cpe .search-results {

}

/* the counter ands query display */
.cpe .search-results .results-counter {

}
/* no search term was given */
.cpe .search-results .no-query {

}

/* no results have been returned */
.cpe .search-results .error-loading {

}

/* the area with search results */
.cpe .search-results .results-area {

}

/* the number of items displaying per page */
.cpe .search-results .results-area .pagination-counter {

}

/* the search results list */
.cpe .search-results .results-area .search-results-list {

}

/* the search results items (li) */
.cpe .search-results .results-area .search-results-list .result-item {

}

/* the search results items li container */
.cpe .search-results .results-area .search-results-list .result-item .result-container {

}

/* the search results items title <p> */
.cpe .search-results .results-area .search-results-list .result-item .result-container .result-title-p {

}

/* the search results items title link */
.cpe .search-results .results-area .search-results-list .result-item .result-container .result-title-p .result-title {

}

/* the search results items title matches */
.cpe .search-results .results-area .search-results-list .result-item .result-container .result-title-p .result-title .title-match {

}

/* the search results items descriptions */
.cpe .search-results .results-area .search-results-list .result-item .result-container .result-description {

}

/* the search results items description match */
.cpe .search-results .results-area .search-results-list .result-item .result-container .result-description .description-match {

}

/* the 3 links container on every search result */
.cpe .search-results .results-area .search-results-list .result-item .result-container .result-other-links {

}

/* the 3 links on every search result */
.cpe .search-results .results-area .search-results-list .result-item .result-container .result-other-links .result-page-link {

}

/* the 3 links on every search result */
.cpe .search-results .results-area .search-results-list .result-item .result-container .result-other-links .result-page-link {

}

/* the 3 links icons on every search result */
.cpe .search-results .results-area .search-results-list .result-item .result-container .result-other-links .result-page-link .result-page-link-icon {

}

/* the 3 links text on every search result */
.cpe .search-results .results-area .search-results-list .result-item .result-container .result-other-links .result-page-link .result-page-link-text {

}

/* the program link on every search result */
.cpe .search-results .results-area .search-results-list .result-item .result-container .result-other-links .result-page-link.program-link {

}

/* the salary link on every search result */
.cpe .search-results .results-area .search-results-list .result-item .result-container .result-other-links .result-page-link.salary-link {

}

/* the employment link on every search result */
.cpe .search-results .results-area .search-results-list .result-item .result-container .result-other-links .result-page-link.employment-link {

}

/* the pagination container <nav> tag */
.cpe .search-results .results-area .pagination-element {

}

/* the pagination <ul> element */
.cpe .search-results .results-area .pagination-element .pagination {

}

/* the pagination <li> element */
.cpe .search-results .results-area .pagination-element .pagination .page-item {

}

/* the pagination <li> previous pagination */
.cpe .search-results .results-area .pagination-element .pagination .page-item .previous-pagination {

}

/* the current page pagination <li> element */
.cpe .search-results .results-area .pagination-element .pagination .page-item.active {

}

/* the current page pagination <span> element */
.cpe .search-results .results-area .pagination-element .pagination .page-item.active .current-page {

}

/* the pagination <a> elements */
.cpe .search-results .results-area .pagination-element .pagination .page-item .page-link{

}

/* the pagination <li> next pagination */
.cpe .search-results .results-area .pagination-element .pagination .page-item .next-pagination {

}

/* Overview tab */ 
.cpe .overview .stat {
    /* the statistic container */
}
.cpe .overview .stat .stat-p .stat-icon {
    /* the styles to be applied to all the stat icons */
}
.cpe .overview .stat .stat-p .stat-icon .icon-briefcase {
    /* the styles to be applied to the currently employed, this is an SVG so you need to use a fill style */
    fill: 'black' !important;
}
.cpe .overview .stat .stat-p .stat-icon .icon-money {
    /* the styles to be applied to the median salary, this is an SVG so you need to use a fill style */
    fill: 'black' !important;
}
.cpe .overview .stat .stat-p .stat-icon .icon-user {
    /* the styles to be applied to the job postings, this is an SVG so you need to use a fill style */
    fill: 'black' !important;
}
.cpe .overview .stat .stat-p {
    /* the statistic */
}
.cpe .overview .stat .stat-p-label {
    /* the heading for the statistic */
}
.cpe .overview .stat .stat-p-desc {
    /* the description for the statistic */
}

.cpe .overview .overview-description-heading {
    /* the heading style for the description */
}
.cpe .overview .overview-description {
    /* the description */
}

.cpe .overview .overview-core-tasks-heading {
    /* the heading for the core tasks */
}
.cpe .overview .overview-core-tasks-list {
    /* the list for the core task */
}
.cpe .overview .overview-core-tasks-list .tasks {
    /* the list item for the core task */
}
.cpe .overview .overview-core-tasks-more {
    /* the read more button for the core tasks */
}
.cpe .overview .bar-graph-container .header {
    /* the heading for bar graphs */
}
.cpe .overview .bar-graph-container .description {
    /* the description for bar graphs */
}
.cpe .overview .bar-graph-container .bar-container {
    /* the container for each section of data in the bar graph */
}
.cpe .overview .bar-graph-container .bar-container .bar-title-container {
    /* the container for the text above each bar */
}
.cpe .overview .bar-graph-container .bar-container .bar-title-container .bar-value {
    /* the value text of each bar */
}
.cpe .overview .bar-graph-container .bar-container .bar-title-container .bar-title {
    /* the title text of each bar */
}
.cpe .overview .bar-graph-container .bar-container .bar-background {
    /* the bar background */
}
.cpe .overview .bar-graph-container .bar-container .bar-fill {
    /* the bar fill */
}
.cpe .overview .age .bar-graph-container .overview-age-heading {
    /* the heading for the age section */
}
.cpe .overview .age .bar-graph-container .bar-container {
    /* the container for each section of data in the bar graph for the age section */
}
.cpe .overview .age .bar-graph-container .bar-container .bar-title-container {
    /* the container for the text above each bar for the age section */
}
.cpe .overview .age .bar-graph-container .bar-container .bar-title-container .bar-value {
    /* the value text of each bar for the age section */
}
.cpe .overview .age .bar-graph-container .bar-container .bar-title-container .bar-title {
    /* the title text of each bar for the age section */
}
.cpe .overview .age .bar-graph-container .bar-container .bar-background {
    /* the bar background for the age section */
}
.cpe .overview .age .bar-graph-container .bar-container .bar-fill {
    /* the bar fill for the age section */
}
.cpe .overview .overview-educational-attainment-heading {
    /* the heading for the educational attainment */
}
.cpe .overview .doughnut-chart .doughnut-legend .doughnut-list {
    /* the list for the doughnut */
}
.cpe .overview .doughnut-chart .doughnut-legend .doughnut-list .doughnut-list-item {
    /* the list item for the doughnut */
}
.cpe .overview .doughnut-chart .doughnut-legend .doughnut-list .doughnut-list-item .doughnut-label-percentage {
    /* the list item percentage for the doughnut */
}

.cpe .overview .doughnut-chart .doughnut-legend .doughnut-list .doughnut-list-item .doughnut-color-swatch {
    /* the list item circle for the doughnut */
}
.cpe .overview .doughnut-chart .doughnut-legend .doughnut-list .doughnut-list-item .doughnut-label-text {
    /* the list item label for the doughnut */
}
.cpe .overview .chart-summary {
    /* the summary doughnut */
}

/* Programs Tab */
.cpe .program .section-heading {
    /* the heading for the programs */
}

.cpe .program .program-card {
    /* the program card area */
}

.cpe .program .program-card .program-name {
    /* the name of the program */
}

.cpe .program .program-card .program-type {
    /* the type of the program */
}

.cpe .program .program-card .program-icon {
    /* the icon of the program */
    fill: 'black' !important;
}


/* Salary Tab */
.cpe .salary .salary-heading {
    /* the heading for the salary */
}
.cpe .salary .salary-desc {
    /* the description for the salary */
}


/* Employment Tab */
.cpe .employment .employment-heading {
    /* the heading for the employment tab */
}
.cpe .employment .employment-growth-desc {
    /* the description for the growth descriptions */
}
.cpe .employment .growth-stat-container .percent {
    /* the employment growth stat percentages */
}
.cpe .employment .growth-stat-container .description {
    /* the employment growth stat descriptions */
}
.cpe .employment .growth-stat-container .year-range {
    /* the employment growth stat year ranges */
}
.cpe .employment .regional-growth-container {
    /* the employment regional growth section container */
}
.cpe .employment .nationwide-growth-container {
    /* the employment nationwide growth section container */
}
.cpe .employment .regional-growth-container .employment-heading {
    /* the heading for the employment tab */
}
.cpe .employment .regional-growth-container .employment-growth-desc {
    /* the description for the growth descriptions */
}
.cpe .employment .regional-growth-container .growth-stat-container .percent {
    /* the employment growth stat percentages */
}
.cpe .employment .regional-growth-container .growth-stat-container .description {
    /* the employment growth stat descriptions */
}
.cpe .employment .regional-growth-container .growth-stat-container .year-range {
    /* the employment growth stat year ranges */
}
.cpe .employment .nationwide-growth-container .employment-heading {
    /* the heading for the employment tab */
}
.cpe .employment .nationwide-growth-container .employment-growth-desc {
    /* the description for the growth descriptions */
}
.cpe .employment .nationwide-growth-container .growth-stat-container .percent {
    /* the employment growth stat percentages */
}
.cpe .employment .nationwide-growth-container .growth-stat-container .description {
    /* the employment growth stat descriptions */
}
.cpe .employment .nationwide-growth-container .growth-stat-container .year-range {
    /* the employment growth stat year ranges */
}
.cpe .employment .bar-graph-container .employment-heading {
    /* the heading for bar graphs for employment */
}
.cpe .employment .bar-graph-container .description {
    /* the description for bar graphs for employment */
}
.cpe .employment .bar-graph-container .bar-container {
    /* the container for each section of data in the bar graph for employment */
}
.cpe .employment .bar-graph-container .bar-container .bar-title-container {
    /* the container for the text above each bar for employment */
}
.cpe .employment .bar-graph-container .bar-container .bar-title-container .bar-value {
    /* the value text of each bar for employment */
}
.cpe .employment .bar-graph-container .bar-container .bar-title-container .bar-title {
    /* the title text of each bar for employment */
}
.cpe .employment .bar-graph-container .bar-container .bar-background {
    /* the bar background for employment */
}
.cpe .employment .bar-graph-container .bar-container .bar-fill {
    /* the bar fill for employment */
}
.cpe .employment .bar-graph-container .show-more {
    /* the clickable element to show more */
}
.cpe .employment .job-titles .bar-graph-container .header {
    /* the heading for bar graphs for employment job titles section */
}
.cpe .employment .job-titles .bar-graph-container .description {
    /* the description for bar graphs for employment job titles section */
}
.cpe .employment .job-titles .bar-graph-container .bar-container {
    /* the container for each section of data in the bar graph for employment job titles section */
}
.cpe .employment .job-titles .bar-graph-container .bar-container .bar-title-container {
    /* the container for the text above each bar for employment job titles section */
}
.cpe .employment .job-titles .bar-graph-container .bar-container .bar-title-container .bar-value {
    /* the value text of each bar for employment job titles section */
}
.cpe .employment .job-titles .bar-graph-container .bar-container .bar-title-container .bar-title {
    /* the title text of each bar for employment job titles section */
}
.cpe .employment .job-titles .bar-graph-container .bar-container .bar-background {
    /* the bar background for employment job titles section */
}
.cpe .employment .job-titles .bar-graph-container .bar-container .bar-fill {
    /* the bar fill for employment job titles section */
}
.cpe .employment .job-titles .bar-graph-container .show-more {
    /* the clickable element to show more for employment job titles section */
}
.cpe .employment .top-employers .bar-graph-container .header {
    /* the heading for bar graphs for employment job top employers section */
}
.cpe .employment .top-employers .bar-graph-container .description {
    /* the description for bar graphs for employment job top employers section */
}
.cpe .employment .top-employers .bar-graph-container .bar-container {
    /* the container for each section of data in the bar graph for employment job top employers section */
}
.cpe .employment .top-employers .bar-graph-container .bar-container .bar-title-container {
    /* the container for the text above each bar for employment job top employers section */
}
.cpe .employment .top-employers .bar-graph-container .bar-container .bar-title-container .bar-value {
    /* the value text of each bar for employment job top employers section */
}
.cpe .employment .top-employers .bar-graph-container .bar-container .bar-title-container .bar-title {
    /* the title text of each bar for employment job top employers section */
}
.cpe .employment .top-employers .bar-graph-container .bar-container .bar-background {
    /* the bar background for employment job top employers section */
}
.cpe .employment .top-employers .bar-graph-container .bar-container .bar-fill {
    /* the bar fill for employment job top employers section */
}
.cpe .employment .top-employers .bar-graph-container .show-more {
    /* the clickable element to show more for employment top employers section */
}
