.annotate{
  font-style: italic;
  color: #366ED4;
}

.listbox-area {
  padding: 20px;
  background: #eee;
  border: 1px solid #aaa;
  font-size: 0px;
}

.left-area, .right-area {
  box-sizing: border-box;
  display: inline-block;
  font-size: 14px;
  vertical-align: top;
  width: 50%;
}

.left-area {
  padding-right: 10px;
}

.right-area {
  padding-left: 10px;
}

[role="listbox"] {
  min-height: 18em;
  padding: 0px;
  background: white;
  /*border: 1px solid #aaa;*/
}

[role="listbox_group"] {
	background-color: #f3f3f4;
	font-weight: bold;
	font-size: 13px;
	color: #1d1e51;
}

[role="option"] {
  display: block;
  padding: 0 1em;
  position: relative;
  line-height: 1.8em;
}

[role="option"].focused {
  background: #bde4ff;
}

[role="option"][aria-selected] {
  padding-left: 35px !important;
}

/*The symbol \21AA is an issue with accessibility*/
[role="option"][aria-selected="true"]::before {
  content: '*'; /*'\21AA';*/
  position: absolute;
  left: 1em;
  font-size: 12px;
}

button[aria-disabled="true"] {
  opacity: 0.5;
}

.move-right-btn {
  padding-right: 15px;
  position: relative;
}

.move-right-btn::after {
  content: ' ';
  height: 10px;
  width: 10px;
  /*background-image: url('../imgs/Arrows-Right-icon.png');*/
  background-position: center right;
  position: absolute;
  right: 2px;
  top: 4px;
}

.move-left-btn {
  padding-left: 15px;
  position: relative;
}

.move-left-btn::after {
  content: ' ';
  height: 10px;
  width: 10px;
  /*background-image: url('../imgs/Arrows-Left-icon.png');*/
  background-position: center left;
  position: absolute;
  left: 2px;
  top: 4px;
}

#ss_elem_list {
  max-height: 18em;
  overflow-y: auto;
  position: relative;
}

.listbox_wrap legend, .legend_tag {
  font-size: 14px;
  color: #464646;
  font-family: "MyriadProSemiBold", "Helvetica", "Arial";
  margin-bottom: 15px;
  float: left;
  padding-top: 10px;
}


.listbox_filter {
  height: 30px;
  margin: 0px;
  display: inline-block;
  /*padding-left: 5px;*/
}

.listbox_filter input[name="search"], .listbox_filter input[type=text] {
  /*width: 100px !important;*/
  /* display: inline-block; */
  float: right !important;
  clear: none !important;
  margin-top: 0px;
  background: url(/assets/images/system.png) no-repeat scroll 175px -1373px transparent;
  /* max-width: 50%; */
}

.listbox_filter .dropdown {
  margin-top: 0px;
}

.box, .no-scroll-box {
    width: 350px;
    height: 250px;
    float: left;
    border: 1px solid #ccc;
    clear: both;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-bottom: 25px;
  }
   .no-scroll-box {
        overflow: auto;
    }
   .box ul li, .no-scroll-box ul li {
      border-bottom: 1px solid #E7E7E8;
      padding: 9px 0 8px 10px;
      cursor: pointer;
      min-height: 15px;
   }
   .box ul li input[type="checkbox"], .no-scroll-box ul li input[type="checkbox"] {
     opacity: 0; /* Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+ */
     filter: alpha(opacity=0); /* IE6-IE8 */
     display: none;
   }

   .lft_rgt_opts {
      float: left;
      display: none;
      padding-top: 85px;
      margin: 0 15px;
      position: relative;
      left: 10px;
   }
   .lft_opt, .rgt_opt {
      background: url(/assets/images/checkboxes.png) no-repeat scroll 0 -90px transparent;
      height: 41px;
      width: 25px;
      margin-bottom: 20px;
   }
   .rgt_opt { background-position: 0 -130px; }
   .lft_rgt_opts.bulk_move {
     margin: 0 0 0 5px;
   }
  .lft_rgt_opts.bulk_move div {
    padding: 5px 0;
  }
   .lft_rgt_opts.bulk_move .lft_opt, .lft_rgt_opts.bulk_move .rgt_opt{
      background: none;
      height: auto;
      font-size: 24px;
      font-weight: bold;
      border: 1px solid slategray;
      height: 26px;
      line-height: 24px;
      border-radius: 3px;
      cursor: pointer;
      display: block;
      padding: 0;
      float: none;
      margin: 0 0 0 8px;
    }
    .lft_rgt_opts.bulk_move .lft_opt:hover, .lft_rgt_opts.bulk_move .rgt_opt:hover,
    .lft_rgt_opts.bulk_move .lft_opt:focus, .lft_rgt_opts.bulk_move .rgt_opt:focus{
      background-color: var(--primary);
      color: var(--pFont);
    }
   .left_wrap {float: left;}
   .right_wrap {float: left;}

   .left_wrap, .right_wrap {
    width: 100%;
   }

   .listbox_elements {
    position: relative;
    float: left;
   }

   .box {
    width: 350px !important;
   }

   ul[role="listbox"] li[display=block]:nth-child(even) {
    background: #f3f6fa;
   }
.box ul li .additional_info input[type=checkbox] {
  display: inline; /*needed for keyboard nav to checkboxes in listbox*/
}
/*** Tablet Breakpoints ***/
@media only screen and (min-width: 768px){

  .left_wrap, .right_wrap {
    width: 45%;
  }

  .box {
    width: 350px !important;
    min-width: 350px;
   }

    .right_wrap {
      padding-left: 55px;
    }
    .filter_search {
      margin: -12px 0 10px !important;

    }

}



/*** Desktop ***/
@media (min-width: 992px){
  .lft_rgt_opts {
    display: inline;
  }

   .left_wrap, .right_wrap {
    width: 45%;
    clear: none;
   }

  .box, .no-scroll-box {
    width: 350px !important;

   }    

  .right_wrap {
    padding-left: 15px;
  }

  .filter_search {
    float: right !important;
    margin-right: 40px !important;
    margin: -12px 0 10px !important;

  }

  .listbox_filter > input[type="text"] {
    padding-right: 0px;
    float: right !important;
    margin-top: 0px;
    width: 155px;
    background: url("/assets/images/system.png") no-repeat scroll 140px -1373px transparent;

  }

  .listbox_filter input[name="search"] {
        background: url(/assets/images/system.png) no-repeat scroll 140px -1373px transparent;

  }

  .listbox_filter #search_eligibilty_pool {
  width: 165px;
  background: url(/assets/images/system.png) no-repeat scroll 153px -1373px transparent

}
  
  /*.places_hierarchy li {
    padding-top: 5px !important;
    min-height: 55px;
    padding-bottom: 0px !important;
  }

  .places_hierarchy li.place:hover { 
    padding-bottom: 0px !important;  
  }*/

  .listbox_filter > select {
    float: right;
    margin-top: 10px;
  }

  .legend_wrap {
    width:350px;
  }
  .legend_tag {
    display: inline-block;
    max-width: 50%;
    float: left;
    margin-top: 15px;
  }

  .listbox_filter {
    float: right;
    /*padding-left: 5px;*/
    width: 170px;
    height: 30px;
    display: inline-block;
  }

}
/* so departments page listbox items are not black */
ul[role="listbox"] li span, ul[role="listbox"] li label {
  color: #6d6e71;
  font: 14px "MyriadProSemiBold", "Helvetica", "Arial";
}

/*** Full HD ***/
/*@media (min-width: 1200px){
  .lft_rgt_opts {
    display: inline;
  }

   .left_wrap, .right_wrap {
    width: 45%;
   }

   .listbox_filter {
      width: 100%;
      height: 30px;
  }

  .right_wrap {
    padding-left: 15px;
  }
 
}
*/