/* BUTTONS */

.lvl3-reverse-button,
.workforce-kmd-button {
  background-color: #FFFFFF !important;
  color: #00717a !important;
  border: 1px solid #00717a !important;
  margin: 5px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  font-weight: normal !important;
  letter-spacing: 0 !important;
}

.workforce-kmd-button {
    text-transform:unset !important;
    letter-spacing:0 !important;
}

.lvl3-reverse-button:hover,
.workforce-kmd-button:hover {
  background-color:#00717a !important;
  color:  #FFFFFF !important;
  border: 1px solid #00717a !important;
}

.reverse-button,
.workforce-kmd-button {
  background-color: #FFFFFF !important;
  color: #00717a !important;
  border: 1px solid #00717a !important;
  margin: 5px !important;
  max-width: max-content;
  font-size:14px !important;
  font-family: Open Sans !important;
  font-weight:400 !important;
  display: inline-block !important;
  letter-spacing: unset;
}

.reverse-button:hover {
  background-color:#00717a !important;
  color:  #FFFFFF !important;
  border: 1px solid #00717a !important;
}


/* HIDE PLOTLY ICON */
a.modebar-btn.plotlyjsicon.modebar-btn--logo {
    display: none !important;
}

/* DMC MultiSelect */
.mantine-MultiSelect-pill {background-color: #ebfff6;}

/* for table data */
.workforce-card-header {
    display: flex !important;
	flex-direction: row;
	margin:auto;
	justify-content: flex-start;
}

.control-in-card_container {
	display:flex;
	align-items: center;
	justify-content: flex-end;
}
#count-or-percentage-button,
#\{\"idx\"\:\"count-or-percentage-button\"\,\"p\"\:\"ite\"\} {
	padding-left:9px;
	padding-right:9px;
	margin-right:5px !important; 
}

/*
#count-or-percentage-button svg {
	width:15px;
	height:15px;
}
*/

/* rangeslider below main chart */
.workforce-rangeslider {
    width: 600px;
}

/* Workforce plotly area */
.workforce-main-plot {
	width: 97%;
	display: flex; /* addition */
	/* height:600px; */
}

@media (min-height: 740px) {
	.workforce-main-plot {/* height:700px; */}
}

/* Modebar outside svg graphing area */
#workforce-main-plot .modebar-container,
#\{\"idx\"\:\"main-plot\"\,\"p\"\:\"ite\"\} .modebar-container {
	right:-25px !important;
	top:40px !important;
}

/* advanced filter options */
#workforce-filters-card,
#\{\"idx\"\:\"filters-card\"\,\"p\"\:\"ite\"\} {
	margin-top:0;
}

.filters-div {
	/*border:1px solid red;*/
	width: 100%;
}

.mantine-Accordion-label {
	color:#007377;
}
.mantine-Input-wrapper.mantine-MultiSelect-wrapper {
	margin-top: 11px;
}

.mantine-MultiSelect-option, .mantine-Select-option {
	/* border:1px solid red; */
	padding:3px 12px
}

.mantine-Accordion-label div i {
	margin-right: 6px;
}

.mantine-ScrollArea-viewport {
	/* border:1px solid red; */
	
}

 .columns-1 .mantine-ScrollArea-viewport > div { display: block !important; columns: 3;}
 .columns-2 .mantine-ScrollArea-viewport > div { display: block !important; columns: 2;}
 .columns-3 .mantine-ScrollArea-viewport > div { display: block !important; columns: 3;}
 .columns-4 .mantine-ScrollArea-viewport > div { display: block !important; columns: 4;}

.column-break {break-after: column;}

.mantine-Input-wrapper.mantine-MultiSelect-wrapper {
	margin-top: 11px;
}

.mantine-MultiSelect-groupLabel,
.mantine-Select-groupLabel {
	color:#007377;
	font-size: calc(var(--combobox-option-fz, var(--mantine-font-size-sm)) * 0.95);
}

.mantine-MultiSelect-groupLabel::after {
	background-color: #1fb0b5;
}

.mantine-Accordion-item[data-active="true"] {
	border:0px;
}

.mantine-Tabs-tab {
	padding-top: 0;
}

/* workforce-toggle */
#workforce-filters-card .mantine-Tabs-panel,
#\{\"idx\"\:\"filters-card\"\,\"p\"\:\"ite\"\} .mantine-Tabs-panel {
	position:relative;
}

#workforce-filters-card .mantine-Input-section.mantine-MultiSelect-section,
#\{\"idx\"\:\"filters-card\"\,\"p\"\:\"ite\"\} .mantine-Input-section.mantine-MultiSelect-section {
	display:none;
}
#workforce-filters-card .filter-toggle,
#\{\"idx\"\:\"filters-card\"\,\"p\"\:\"ite\"\} .filter-toggle
{
	position:absolute;
	/*border:1px solid red;*/
	top:3px; 
	right:3px;
	width:40px;
	border-radius:4px;
	padding:3px;
	min-height:30px;
	line-height:1;
}

#workforce-filters-card .card--content,
#\{\"idx\"\:\"filters-card\"\,\"p\"\:\"ite\"\} .card--content {
	/* border:1px solid red; */
	display:flex;
}
/* restores chevron for grouped cols 
#data-filter-tabs-panel-grouped_cols .mantine-Input-section.mantine-MultiSelect-section {
    display: block;
}
*/
/* user-tips */
/* user-tip-target-... is the target div */
.user-tip-target-available {
    border:1px solid #E67700;
    display: block;
	border-radius:17px;
	font-size:13px;
	padding:5px;
	line-height:0;
	margin-left:16px;
	cursor:pointer;
}
.user-tip-target-available p {
	display:inline-block;
	color:#e67700;
	font-size:13px;
	line-height:0; 
	padding-left:3px
	
}
.user-tip-target-unavailable{
    border:2px solid #646569;
    display: none;
}

.user-tip-target-hide{
    display: none;
}

/* user-tip-target-text... is the text inside the target div */
.user-tip-target-text-available{
    color: #E67700;
}

.user-tip-target-text-unavailable{
    color:#646569;
}

.user-tip-target-text-hide{
    display: none;
}

/* LISTED FILTERS */
.list-of-filters-div {
	display:inline-block;
	background-color: #97afb00d;
	margin: 4px 0 18px 6px;
	padding: 3px 7px 3px 4px;
	border-radius: 3px;
} 

.list-of-filters-div span {
	font-size: .8rem;
	color:#007377;
	padding:1px 3px
}

.source-span:after,
.segment-span:after,
.state-span:after,
.year-span:after,
.degree-level-span:after,
.program-type-span:after{content:","}

.list-of-filters-div span:last-child:after {
	content:""
}

/* hero stats */
.hero-stat-card {
	min-height: 110px;
	padding: 20px !important;
}

.hero-stat-card .card--content {
	border:0px solid red !important;
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.hero-stat-card .card--content  div:first-child {
	border:0px solid blue;
	font-size: 20px;
	font-weight: 900;
	color: #007377;
	max-width: 430px;
}

.hero-stat-card.hsc-2 .card--content  div:first-child {
	max-width: 530px;
	/* border:1px solid red; */
}

.hero-details {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 160px;
}

.hero-number {
	font-size: 29px;
	font-weight: 900;
	color: grey;
	line-height: 1;
}

.hsc-2 .hero-details {min-width: 70px;}

.percent-indicator {
	color: #09a609;
	font-size: 19px;
}

/* fix heights of plots 
.workforce-kmd .card-header {
	margin-bottom:0 !important;
	min-height:48px;
	 align-items: flex-start;
}*/
/* the visitors ie. the adv.panel not hidden issue */
div.mantine-Popover-dropdown[style*="width: 0px"] {
	display: none;
}

/* shadow for the panel */
div.mantine-Popover-dropdown.mantine-MultiSelect-dropdown.panel-shadow {
	box-shadow: 0px 10px 6px 4px #4141413d !important;
}

/* dropheights for the sidebar inc. media */
/* Menu = Initial variable */
.workforce-sidebar-single-dropdown  .mantine-Select-options > div {
	max-height:43vh !important;
}

/* Menu = Additional variable */
.workforce-sidebar-multi-dropdown  .mantine-MultiSelect-options > div {
	max-height:43vh !important;
}

@media (min-height: 740px) {
	.workforce-sidebar-single-dropdown  .mantine-Select-options > div {max-height:50vh !important;}
	.workforce-sidebar-multi-dropdown  .mantine-MultiSelect-options > div {max-height:50vh !important;}

}
/* State notice text */
#state-filter-unavailable-div,
#\{\"idx\"\:\"state-filter-unavailable-div\"\,\"p\"\:\"ite\"\} {
	font-size:12px;
	padding:10px 5px
}

/* Pop out main plot container for heatmaps when screen too small */
@media (max-width: 1582px) {

.contains-heatmap .workforce-main-plot {
    background-color: white;
    border: 1px solid #bbbbbb;
    border-radius: 8px;
    box-shadow: 3px 3px 6px 3px #ababab66;
    margin-left: -4%;
    width:118%; }

}

@media (max-width: 1400px) {

.contains-heatmap .workforce-main-plot {
    margin-left: -8%;
    width:114%; }

}