/** Select */

.select-span-jfl { 
    color: #555;
    background: url('cs-arrow-black.png') 93% center no-repeat, rgba(255,255,255,0.1) center center repeat ;
    background-size: 18px, auto;
    border-radius: 6px;
    border: 2px solid #FFFFFF;
    padding: 10px 30px;
    min-width: 200px;
    width: auto;
    text-align: left;
    line-height: 100%;
    vertical-align: bottom;
    margin: 0;
    /*transition: all 50ms ease-in-out;*/
    box-shadow: 0px 0px 36px -5px rgba(8,65,176,0.2);
    /*text-align: center;*/
}

.select-span-jfl.selected { 
    background: url('cs-arrow-white.png') 93% center no-repeat, rgba(255,255,255,1) center center repeat ;
    background-size: 18px, auto;
    border: 2px solid transparent;
    background-color: var(--jfl-color-main);
    color: white;
}

.select-span-jflHover {
    background: url('cs-arrow-green.png') 93% center no-repeat, rgba(255,255,255,1) center center repeat ;
    background-size: 18px, auto;
    border: 2px solid #FFFFFF;
    color: var(--jfl-color-main);
}
.select-span-jflOpen {
    background: url('cs-arrow-green.png') 93% center no-repeat, rgba(255,255,255,1) center center repeat ;
    background-size: 18px, auto;
    border: 2px solid #FFFFFF;
    color: var(--jfl-color-main);
}
.select-span-jflFocus {
/*    background: url('../js/lib/customselect/arrow-blue.png') 93% center no-repeat, rgba(255,255,255,1) center center repeat ;
    background-size: 50px, auto;
    border: 2px solid #FFFFFF;
    color: var(--jfl-color-main);*/
}
.select-span-jflInner {
    line-height: 2rem;
    font-size: 1.35rem;
    text-transform: uppercase;
    width: 85% !important;
    overflow: hidden;
    text-overflow: ellipsis; /* clip */
    white-space: nowrap; 
}

/* used for cause field in volunteer form */
.select-span-jfl.dark { 
    color: var(--jfl-color-main);
    background: url('arrow-blue.png') 93% center no-repeat, rgba(255,255,255,1) center center repeat ;
    background-size: 50px, auto;
    border: 2px solid var(--jfl-color-main);
}

/* used for country fields */
.select-span-jfl.plain { 
    color: #aaaaaa;
    font-style: italic;
    background: url('arrow-gray.png') 93% center no-repeat, rgba(255,255,255,1) center center repeat ;
    background-size: 50px, auto;
    border: 2px solid #FFFFFF;
    border-radius: 1px;
}

/* used for category select in suggest a cause form */
.select-span-jfl.dark { 
    color: var(--jfl-color-main);
    background: url('arrow-blue.png') 93% center no-repeat, rgba(255,255,255,1) center center repeat ;
    background-size: 50px, auto;
    border: 2px solid var(--jfl-color-main);
}

.select-span-jfl.dark.noborder { 
    border: 0 none;
}

/* used for jobs roles and positions select in forms */
.select-span-jfl.plain.secondary { 
    color: #555555;
    background: url('arrow-black.png') 93% center no-repeat, rgba(255,255,255,1) center center repeat ;
    background-size: 50px, auto;
}

.select-span-jfl.dark.selected { 
    color: #FFFFFF;
    background: url('arrow-white.png') 93% center no-repeat, var(--jfl-color-main);
    background-size: 50px, auto;
    border: 2px solid var(--jfl-color-main);
}

.select-span-jfl.dark.noborder.selected { 
    border: 0 none;
}

.select-span-jfl.plain.selected { 
    color: #333333;
    font-style: normal;
    background: url('arrow-silver.png') 93% center no-repeat, rgba(255,255,255,1) center center repeat ;
    background-size: 50px, auto;
    border: 2px solid #FFFFFF;
    border-radius: 1px;
}

.select-span-jfl.plain.secondary.selected { 
    color: #FFFFFF;
    background: url('arrow-white.png') 93% center no-repeat, var(--jfl-color-main);
    background-size: 50px, auto;
    border: 2px solid var(--jfl-color-main);
}