div[data-audience] {
  display: none;
  
}

.audience__seletor > input[type="checkbox"] + label, input[type="radio"] + label {
  display: flex
}

.audience__selector > *, ::before, ::after,
.glider ::before, ::after,
input ::before, ::after,
label ::before, ::after 
 {

  -moz-box-sizing: unset;
  -webkit-box-sizing: unset;
  box-sizing: unset;

}

.selector-title.full {
  font-style: italic;
  font-size: 150%;
  text-align: center;
}

.selector-title.inline  {
  margin-left: 1rem;
  font-size: 100%; 
  font-style: italic;
}

.rendered-selector {
  /* border: thin red solid; */
  margin: auto;
  
}


.selector-minimum-margin {
  /* this ensures we have a minimum margin */
  margin-left: 2em;
  margin-right: 2em;
}


.selector-parent {
  position: absolute;
  width: inherit;
  color: white;
}

.outside-wrapper.inline > .container > .selector-parent {
  color: black;
}



/* outside wrapper for the select.  This controls the border and spacing. */
.outside-wrapper {
  max-width: 700px;  
  /* this definines the maximum width of the selector */

  width: 100%;        /* expand as far as possible */
  background-color: #034387;    /* background color of the parent container */
  margin: auto;       /* centers the selector on the page horizontally. */

  padding-top: 2.5em;       /* padding for the selector from the top */
  padding-bottom: 1.25em;

  position: relative;     /* this is important because it's child will be absolutely positioned */
  top: 1em; /* this is important for the inline style */
  border-radius: 3em;


  /* set font size here as required */
  
}



.container {  
  width: inherit;
  padding-bottom: 4em;
}


/* ensure that, when nested, there is space between selectors */
/* note that selectors must be contained in that 'container' class. */
/* .container { 
  padding-top: 4em; 
} */

.container:first-child {  /* we only want the other children to have additional padding */
  /* padding-top: 0em;  */
}


.selectlist-container {
  margin-left: 4.5em; 
  margin-right: 4.5em; 
  padding-bottom: .5em; /* control spacing to the yellow line; */ 
  display: flex
}



.selectlist-container.active {
  background-color: white;
  filter: drop-shadow(0px 0px 5px #888);
  color: black;
  border: 1.5em white solid; 
  /* note, changing this border is a really easy way */
  /* to indent all the content uniformally.  Note that we */
  /* need to move the margin left 2x the border width */
  /* and the top by -1x the border width. */
  /* just be aware that these values are interlinked */
  border-radius: .6em;
  margin-left: 3em;
  margin-top: -1.5em;
  margin-right: 3em;
  padding-bottom: 0;
}

.inline.selectlist-container.active .first-option {
    border-bottom: 2px solid #bfbfbf;
}


.select-item-container {
  max-height: 325px;
  overflow-y: auto;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;  
  flex-grow: 1;
  font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
}

.options {
  
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  padding-bottom: .3em; /* adjusting this pushed the underline down */
  display: none;
  color: white;
}


.selectlist-container.active > div > .options {
  display: block;
  color: #222;
  font-size: 1.1rem;
  padding: 0rem 1rem; /* Use this to control spacing of the items when expanded */

}

.select-item-container > .first-option > .first-option-label {
  font-weight: bold;
  text-transform: uppercase;
}

/* this may not be used anymore */
.selectlist-container > div > .options:first-child {
  display: block;
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
  font-size: 120%;
  

}


/* Active Item in List */
.audience-selector-selected-item {
    font-weight: bold;
    color: #003976 !important;
    font-style: oblique;
    background-color: #e6e6e6;
}

.selectlist-container.active > div > .options:first-child {
  color:  #034387; /* flip the color of the first item -- specs call for a different color */
}
.selectlist-container.active > div > .options:last-child {
  padding-bottom: 0em;
}


.active > .select-arrow  { 
  border: none;
}
.active > .select-item-container  { 
  
  border: none;
}

.select-down-cheveron {
  display: inline;
  background-color:  white;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  padding-left: 0.9em;
  padding-right: 0.9em;
  border-radius: 0.3em;
  color: #002664;
  font-size: 75%;
}



/* hide this when active is applied to the parent. -- legacy style */
.active > div > .select-down-cheveron {
  display: none;
}

.active > div > div > div> .select-down-cheveron {
  display: none;
}



/* this will be shown when the down arrow is clicked */
.fa-solid.select-up-cheveron {
  display: none;
  background-color:  #034387;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  padding-left: 0.9em;
  padding-right: 0.9em;
  border-radius: 0.3em;
  color:  white;
  font-size: 75%;
}

/* legacy */
.active > div > .select-up-cheveron {
  display: inline;
}

.active > div > div > div >  .select-up-cheveron {
  display: inline;
}


/*
.outside-wrapper.inline >  > .selector-parent > .selectlist-container > .select-arrow > i {
  padding-right: 0em !important;
  / this fixes padding to the right of the arrow /
}
*/


@media only screen and (min-width: 529px) {
  .select-arrow, .select-item-container {
  border-bottom: 5px #eaab00 solid;
}



.select-item-container {
  padding-bottom: .5em;
}

}


.outside-wrapper.inline {
  display: inline-block;
  background-color: transparent; /*#eee; /* make transparent */

  padding-top: 0;
  padding-bottom: 5em;  
  border-radius: 0;
  max-width: 325px;
  font-size: 100%;
  
}

/* this probably messed up in mobile */
.arrow-container {
  flex-basis: 1.5em;
  line-height: 2em;
/* 
  margin-bottom: 0.5em; 
  maargin-top: auto;
  padding: .6em; 
  padding-top: .9em;
  padding-right: 0;
*/

 /* margin-bottom: 0.5em; margin-top: auto'><i class="select-down-cheveron fa-solid fa-chevron-down */
}




/* START MOBILE CSS */

@media only screen and (max-width: 529px) {

.rendered-selector {
  margin-left: -2em;
  margin-right: -2em;
}

.select-down-cheveron {
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  padding-left: 0.8em;
  padding-right: 0.8em;
  font-size: 90%;
}

.select-up-cheveron {
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  padding-left: 0.8em;
  padding-right: 0.8em;
  font-size: 90%;
}



.selectlist-container {
  margin-left: 2.5em; 
  margin-right: 2.5em; 
  atransition:  margin .1s; 

  
}

.select-arrow  { 
  padding-top: 1em;
  margin-left: 1em; 
  transition: margin-left .5s;
  border: none;
}

.outside-wrapper.inline >  > .selector-parent > .selectlist-container > .select-arrow {
  margin-left: 0em;
  padding-top: 0em; /* dont push this down like we do with the regular selector */

}




.selector-minimum-margin {
  /* this ensures we have a minimum margin */
  margin-left: 0em;
  margin-right: 0em;
  transition: margin .5s

}

.outside-wrapper {
  border-radius: 0;
  transition: border-radius .5s;


}

.first-option-label {
    border-bottom: 5px  #eaab00  solid;
    margin-right: 1em; 
}


/* for inline style, run the bar across the bottom */
.inline.first-option-label {
  border-bottom: none;
}
.inline.select-item-container {
  border-bottom: 5px #eaab00 solid;
}



}

/* END MOBILE CSS  */





@media only screen and (max-width: 529px) {



.araarow-container {
  flex-basis: 1.5em; 
  margin-bottom: 0.6em; 
  padding: .6em; 
  padding-bottom: 0em;
  padding-top: 1.0em;
  padding-right: 0;
}


.outside-wrapper.inline {
  display: inline-block;
  margin-top: 0em;
  margin-bottom: 3em;
}

.selectlist-container.active {
  /* change indenting when in mobile widths */
  margin-left: 1em;
  margin-right: 1em;

}



.selectlist-container.active .select-item-container .first-option .first-option-label {
  /* border-bottom: 5px red solid; */
  border-bottom: none;
}

}



.outside-wrapper.inline >  {
  padding: 0em;
  /*text-align: center;*/
}


/*.outside-wrapper.inline >  > .selector-parent > .selectlist-container > div > */
.inline.options:first-child {

  color: #034387;
}



/*.outside-wrapper.inline >  > .selector-parent > */
.inline.selectlist-container {
  margin-left: 1em;
  margin-right: 1em;
  border-top-left-radius: 0.2em;
  border-top-right-radius: 0.2em;  /* designs call for smaller radius at the top */
}

/* .outside-wrapper.inline >  > .selector-parent >  */
.inline.selectlist-container.active {
  margin-left: -.5em;
  margin-right: -.5em;
}




/* .outside-wrapper.inline > div > div > div > div > div > div  >  */
.inline.select-down-cheveron {
  background-color:  #034387;
  border-radius: 0.3em; 
  color: white;
}



/* .outside-wrapper.inline > div > div > div > div > div > div >  */
.inline.select-up-cheveron {

  background-color: #034387

}

 

/* select arrow may not be used anymore */
.outside-wrapper.inline >  > .selector-parent > .selectlist-container.active > .select-arrow  {
  border-bottom: 5px transparent solid;
}


/* .outside-wrapper.inline > div > div>  */
.selectlist-container.active >  .inline.select-item-container {
  border-bottom: 5px transparent solid;
}



/* .outside-wrapper.inline >  > .selector-parent > .selectlist-container > div >  */
.inline.options:first-child {
  color: black;
  font-weight: normal;
  font-style: normal;
  text-transform: none;
}

.updog { z-index: 5000; }

.outside-wrapper {
  margin-bottom:3.5em;
}
.outside-wrapper.inline {
  margin-bottom: 0em;
}

.first-option {
  display: flex;
}


.first-option-label {

  flex-grow: 1; 
  line-height: 2.0em; 
  font-size: 1.2em; 
  font-weight: bold; 
  font-style: italic; 

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

}

.options:nth-child(2) {
  margin-top: .5rem;   /* controls the space between the first option, after the selected option */
}

.audience-selector {
  display: none;
}

a.anchor-inherit {
  color: inherit;
}

a.anchor-inherit:hover {
  text-decoration: underline; 
}


a.anchor-inherit:focus {
  text-decoration: underline; 
}

.options.audience-selector-option > a:focus {
  font-weight: bold;
}


.options.audience-selector-option > a:hover {
  font-weight: bold;
}

li.options.audience-selector-option:hover {
    background-color: #efefef;
    cursor: pointer;
}


.selector-underline-red {
  border-bottom-color: red;
}

.selector-underline-cyan {
  border-bottom-color: cyan;
}

.selector-underline-yellow {
  border-bottom-color: yellow;
}