.map-global {
    --candidate: #01C1B3;
    --candidate-faded: #4ab4ad;
    --job: #F7931E;
    --job-faded: #f1a44c;
    --neutral: rgb(172, 170, 170);
    --neutral-faded: #BCBEC0;
    --type-candidate: rgb(27, 226, 143);
    --type-candidate-faded: #c4f2ed;
    --type-job: rgba(247,147,30,1);
    --type-job-faded: #f9dcac;
    --type-neutral: rgb(172, 170, 170);
    --type-neutral-faded: #BCBEC0;
    height: 100%;
}

.map-data-toolbar {
    display: grid; 
    grid-template-columns: max-content auto;
    min-height: 41px;
    background: linear-gradient(90deg, rgba(0,119,255,1) 20%, rgba(255,255,255,1) 100%);
    align-items: center;
}

.map-data-header {
    overflow: auto;
    position: absolute;
    margin: 16px;
    max-height: 78%;
    z-index: 3;
    min-width: 300px;
}

.primary-filter-button {
    margin: 8px auto 0px;
    font: 'Futura PT';
    font-size: 14px;    
    border-radius: 1em;
    padding: 0.25em 1em;
    color: #0af;
    transition: background-color 0.25s, color 0.25s;
}

.primary-filter-button-candidate {
    color: var(--candidate);
    background-color: #ffffff;
    border: 1px solid var(--candidate);
}

.primary-filter-button-candidate:hover {
    color: #ffffff;
    background-image: var(--candidate);
    border: 1px solid #ffffff;
}

.primary-filter-button-job {
    color: var(--job);
    background-color: #ffffff;
    border: 1px solid var(--job);
}

.primary-filter-button-job:hover {
    color: #ffffff;
    background-color: var(--job);
    border: 1px solid #ffffff;
}

.map-data-selection {
    display:inline-flex;
    width: 100%;
    font-size: 11pt;
    font-family: Futura PT Medium;
    background-color: ghostwhite;    
    letter-spacing: 2.8px; 
    position: sticky; 
    top: 0;
}

.map-data-selection-matched {
    color: var(--font-primary);
    padding: 7.5px 0; 
}

.map-data-selection-suggested {
    color: var(--font-secondary);
    padding: 7.5px 0;
}

.map-data-selection-matched-candidate {
    --font-primary: var(--candidate);
    --font-secondary: var(--neutral-faded);
}

.map-data-selection-matched-job {
    --font-primary: var(--job);
    --font-secondary: var(--neutral-faded);
}

.map-data-selection-matched-neutral {
    --font-primary: var(--neutral);
    --font-secondary: var(--neutral-faded);
}

.map-data-selection-suggested-candidate {
    --font-primary: var(--neutral-faded);
    --font-secondary: var(--candidate);
}

.map-data-selection-suggested-job {
    --font-primary: var(--neutral-faded);
    --font-secondary: var(--job);
}

.map-data-selection-suggested-neutral {
    --font-primary: var(--neutral-faded);
    --font-secondary: var(--neutral);
}

.map-data-type {
    background-image: linear-gradient(to right, var(--type-accent-1) 50%, var(--type-accent-2) 50%);
    height: 3.3px;
    margin: 0;
    border: none;
    position: sticky; 
    top: 34px;
}

.map-data-seperator {
    height: 5px;
    margin: 0;
    border: none;
    position: sticky;
    top: 33.89px;
}

.map-data-type-matched-candidate {
    --type-accent-1: var(--type-candidate-faded);
    --type-accent-2: var(--type-candidate);
}

.map-data-type-matched-job {
    --type-accent-1: var(--type-job-faded);
    --type-accent-2: var(--type-job);
}

.map-data-type-matched-neutral {
    --type-accent-1: var(--type-neutral-faded);
    --type-accent-2: var(--type-neutral);
}

.map-data-type-suggested-candidate {
    --type-accent-1: var(--type-candidate);
    --type-accent-2: var(--type-candidate-faded);
}

.map-data-type-suggested-job {
    --type-accent-1: var(--type-job);
    --type-accent-2: var(--type-job-faded);
}

.map-data-type-suggested-neutral {
    --type-accent-1: var(--type-neutral);
    --type-accent-2: var(--type-neutral-faded);
}

::-webkit-scrollbar-track {
    display: table-column;
    background: lightgray;
}

::-webkit-scrollbar-thumb {
    display: block;
    background: gray;
}

#selected-map-data {
    position: absolute; 
    z-index: 3; 
    margin: 16px 0 0 325px;
}

md-autocomplete-wrap {
    box-shadow: none !important;
}

.md-virtual-repeat-container.md-autocomplete-suggestions-container {
    width: 700px !important;
}

.search-bar-input {
    background: #fff;
    outline: none;
    color: #000;
    float: left;
    height: 32px;
    width: 20vw;
}

.search-button {
    margin: 0;
    background: #fff;
    outline: none;
    color: #000;
    border-left: 1px solid black;
    float: left;
    height: 32px;
    border-right: none;
    border-top: none;      
    border-bottom: none;
}

.search-button:hover {
    background: #e5e5e5;
    outline: none;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
    -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
    box-shadow: inset 0px 0px 5px #c1c1c1;
}

.search-autocomplete {
    height: inherit;
    max-height: 600px !important;
    max-width: 800px !important;
}

.filter-faux-chip {
    color: #BCBEC0; 
    display: flex; 
    background-color: white; 
    padding: 8px; 
    margin: 4px 8px;
    border-radius: 16px;
    width: max-content;
}

.filter-list > li {
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.filter-list > li:first-of-type{
    position: sticky;
    top: 0;
    color: rgba(0,119,255,1);
    background-color: white;
}

.filter-list > li:not(:first-of-type) {
    border-top: solid #BCBEC0 .5px;
}

.filter-list > li > span:nth-of-type(2) {
    text-align: end;
}