/* #section_wrap {background: yellow!important;} */
.skip-link {
  display: block;
  position: absolute;
  left: -999px;
  top: -999px;
  z-index: 1000;
  background: white;
  color: black;
}

.skip-link:focus {
  left: 0;
  top: 0;
  padding: 10px;
  margin: 5px;
  background: #E7E7E7;
  border:1px solid #0A5890;
  color: #0A5890;
  outline: -webkit-focus-ring-color auto 5px ;
  z-index: 1000;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
  color: black;
  background: white;
}
.do_not_show_on_page_load { display: none;}

/** FORM ELEMENTS **/

input::placeholder, ::-webkit-input-placeholder  {
    color: #767676;
}

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.checkbox_styled + label {
  display: block;
  position: relative;
}
.checkbox_styled + label::before {
   content: '';
   position: relative;
   display: inline-block;
   margin: 0px 10px;
   width: 15px;
   height: 15px;
   background: white;
   border: 1px solid #e7e7e7;
   top: 5px;
}

.checkbox_styled:checked + label::before {
  background: #e7e7e7;
}

.checkbox_styled:checked + label::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 12px;

  /* top: 8px;
  left: 11px; */

  border-left: 2px solid black;
  border-bottom: 2px solid black;
  height: 6px;
  width: 13px;
  transform: rotate(-45deg);
}

.checkbox_styled:focus + label::before {
  outline: #5d9dd5 solid 1px;
  box-shadow: 0 0px 8px #5e9ed6;
}

input[type="radio"] {
  position: absolute;
  opacity: 0;
  display: initial !important;
}

.radio_styled + label {
  display: block;
  position: relative;
}
.radio_styled + label::before {
   content: '';
   position: relative;
   display: inline-block;
   margin: 0px 10px;
   width: 14px;
   height: 14px;
   border-radius:10px;
   background: white;
   border: 1px solid #949494;
   top: 4px;
}

.radio_styled:checked + label::before {
  background: #e7e7e7;
}

.radio_styled:checked + label::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 14px;
  height: 8px;
  width: 8px;
  border-radius: 4px;
  background: #000000;
}

.top-fix:checked + label::after {
  top: 21px;
}

.top-fix:checked + .ends_after::after {
  top: 10px;
}

.radio_styled:focus + label::before {
  outline: #5d9dd5 solid 1px;
  box-shadow: 0 0px 8px #5e9ed6;
}

.radio-line label {
  position: relative;
  float: left;
  width: auto !important;
  margin-left: 0px !important;
  padding-top: 0px !important;
  margin-bottom: 10px;
}

.acct_form_opts .separator {
  text-decoration: none;
}

.acct {
  padding-bottom: 5px;
}


button.include-all {
  height: auto !important;
  margin: 5px 0px 5px;
}

.external_link {
  position: absolute;
  width: auto;
  right: 85px;
  top: 14px;
}

.status_update {
  position: relative;
  width: 100%;
  clear: both;
}


/* Accordion boxes */

.accordion-button {
  color: #464646;
  height: 35px;
  font-family: "MyriadProSemiBold", "Helvetica", "Arial";
  font-size: 14px;
  /*cursor: pointer;*/
 width: 100%;
 padding: 7px 0 5px 10px;
 /* background: url(/assets/images/dropup_toggle.png) no-repeat scroll 98% #F3F3F4; */
 display: block;
 text-decoration: none;
 -webkit-border-radius: 5px; /* Saf3-4, iOS 1-3.2, Android ?1.6 */
         border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
               /* useful if you don't want a bg color from leaking outside
                * the border: */
 -moz-background-clip: padding;
       -webkit-background-clip: padding-box;
               background-clip: padding-box;
 text-transform: uppercase;
 margin: 0;
 border: none;
 margin-bottom: 5px;
 margin-top: 5px;
 text-align: left;
}

.accordion-button[aria-expanded="true"] {
  width: 100%;
  background: url(/assets/images/chevron-circle-up-solid.svg) no-repeat scroll 98% #F3F3F4;
  background-size: 15px;
}
.accordion-button[aria-expanded="false"] {
  width: 100%;
  background: url(/assets/images/chevron-circle-down-solid.svg) no-repeat scroll 98% #F3F3F4;
  background-size: 15px;
}
.accordion-button h3 {
  margin-top: 0px;
  text-align: left;
}

.accordion-button:hover {
  color: var(--sectionTitle);
}

.accordion_body {
  display: none !important;
}

.accordion_body.expanded {
  display: block !important;
}
#accounts .accordion_body.expanded {
  padding-top: 15px;
}

.accordion-label[aria-expanded="true"]::after {
	content: "-";
	float: right;
}
.accordion-label[aria-expanded="false"]::after {
	content: "+";
	float: right;
}

/* back button alignment */

#back {
  float: left;
}

.profile_functions {
  display: inline-block;
  float: left;
}
input[type="submit"] {
  float: left !important;

}



.time {
  clear: both;
  float: left;
  position: relative;
  margin-bottom: 20px;
}

.full-access {
  float: left;
  clear: both;
  margin-bottom:25px;
}

.full-access .checkbox_styled+label::before, .full-access .checkbox_styled+label::after {
  top: 5px;
}

.clear {
  clear: both;
}
@media only screen and (min-width: 768px){
  #back {
    float: right;
  }

  .profile_functions {
  display: inline-block;
  float: right;
}

  input[type="submit"] {
    float: right !important;
    margin-left: 0px !important;
  }

}

.global_list_name.no_check {
  margin-left: 37px;
}

.global_list_name {
  margin-top: -10px;
}
/*** Desktop ***/
@media (min-width: 992px){
  #back {
    float: right;
  }

  #sidebar {
    margin-right: 20px;
  }

  input[type="submit"] {
    float: right !important;
    margin-left: 10px !important;

  }

  .time {
    clear: none;
    float: none;
    position: relative;
    margin-bottom: 0px;
  }

}


/*** Full HD ***/
@media (min-width: 1200px){
  #back {
    float: right;
    margin-left: 10px !important;

  }

  input[type="submit"] {
    float: right !important;
    margin-left: 10px !important;

  }
}

.date_picker_button {
  width: 30px;
  height: 30px;
  background: url('/assets/images/reports.png') no-repeat;
  border: none;
  top: 10px;
  position: relative;
  margin-left: 5px;
}


.addButtonCircle, .deleteButtonCircle {
  border: none;
  background-color: transparent;
  width: 15px;
  height: 15px;

}

.addButtonCircle {
  background: url('/assets/images/plus-circle-solid.svg') no-repeat;

}

.deleteButtonCircle {
  background: url('/assets/images/minus-circle-solid.svg') no-repeat;

}

button.add, button.remove {
  background-image:url(/assets/images/system.png);
  background-repeat: no-repeat;
  height:15px;
  width:15px;
  display:inline-block;
  text-indent:-9999px;
  border: none;
  background-color: transparent;
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
}

button.add {
  background-position:0 -1682px;
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
    transition-duration: 0s;

}
button.remove {
  background-position: 0 -1733px;
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
    transition-duration: 0s;

}

button.add:hover {
  background-position:-17px -1682px;
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
  transition-duration: 0s;
  }
button.remove:hover {
  background-position:-17px -1733px;
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
  transition-duration: 0s;

}

/** Global List Options **/

.global_list {
   clear: both;
   margin: 0px 0 15px 0;
   float: left;
   display: inline;
   width: 100%;
}
.global_list form ul li, .global_list ul li {
   border-bottom: 1px solid #e7e7e8;
   padding: 5px 0 !important;
   position: relative;
   width: 100%;
   float: left;
}
.global_list form ul li:first-child, .global_list ul li:first-child {
   border-top: 1px solid #e7e7e8;
   padding: 5px 0;
   position: relative;
   width: 100%;
   float: left;
}

.global_list_name {
  font-family: "MyriadProSemiBold", "Helvetica", "Arial";
  color: #6d6e71;
  font-size: 14px;
  cursor: inherit;
  display: inline-block;
}

.global_form_opts {
   display: block;
   position: relative;
   margin-left: 37px;
   bottom: 0px;
   visibility: visible;
   font-size: 1em;
   max-width: 70%;
   clear: both;
}


.global_form_opts button {
  background: none;
  border: 0px;
  font-size: 1em;
  color: var(--sectionTitle);
  text-decoration: underline;
}


.global_form_opts,
.global_form_opts span,
.global_form_opts a,.global_form_opts button { color: var(--sectionTitle); font-family: "MyriadProRegular", "Helvetica", "Arial"; }
.global_form_opts a,.global_form_opts button {
  padding-right: 4px;
  padding-left: 4px;
   text-decoration: underline;
   -webkit-transition-property: none;
      -moz-transition-property: none;
       -ms-transition-property: none;
        -o-transition-property: none;
           transition-property: none;
   color: var(--sectionTitle);
}


.global_form_opts button:first-child, .global_form_opts a:first-child  {
  padding-left: 0px;
}
.global_form_opts a:hover, .global_form button:hover { color: var(--sectionTitle) !important }
.global_form_opts a:active, .global_form button:active { color: var(--sectionTitle) }
.global_form_opts a:visited {  color: var(--sectionTitle); }
.global_form_opts a:last-child { color: #cd291f; }
.global_form_opts .red, .global_form_opts button.red { color: #cd291f; }


/* .remove is also used for the image button, creating conflict because this one is text and not image */
.global_form_opts .action.remove.red {
    text-indent: unset;
    width: auto;
}


.global_functions {
   float: left;
   width: 100%;
   padding-top: 7px;
}

.global_functions .global_list_add {position: relative; float:right; clear: none; display: inline-block;}
.global_functions input[name="search"] {clear: none; display: inline-block;}
.global_list_opts { float: left; margin-bottom:10px; width: 100%;}
.global_list_opts button {
   background-color: #f4f4f3;
   padding: 5px 10px 5px 30px;
   display: inline;
   text-decoration: none;
   color: #464646;
   text-transform: uppercase;
   width: auto;
   font-family: "MyriadProBold", "Helvetica", "Arial";
   position: relative;
   float: left;
   margin-right: 10px;
   border: 0;
}

/*.global_list {
  overflow: initial !important;
}*/
.global_list_opts button:hover {
  background-color: #eee; color: var(--sectionTitle);
}

.global_list_opts button span {
   background: url(/assets/images/system.png) no-repeat scroll 0 0 transparent;
   width: 15px;
   height: 15px;
   display: block;
   position: absolute;
   left: 10px;
   top: 4px;
}

.global_list_opts button[name="all"] span { background-position: 0 -1781px;}
.global_list_opts button[name="all"].select_all span { background-position: -34px -1782px }
.global_list_opts button[name="remove"] span { background-position: 0 -1632px }
.global_functions a {
   float: right;
   background: url(/assets/images/system.png) no-repeat scroll 7px -1320px var(--primary);
   padding: 6px 8px 6px 25px;
   display: block;
   text-decoration: none;
   color: var(--pFont);
   text-transform: uppercase;
   width: auto;
   font-family: "MyriadProBold", "Helvetica", "Arial";
   position: relative;
}
.global_functions a#back { background-position: 7px -1881px; }
.global_functions a:hover {
  background-color: var(--pHover);
  color: var(--pHoverFont);
}



.health {
    background-image: url(/assets/images/health.svg);
    background-size: 35px;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 20px;
    width: 30px;
    margin-top: -12px;
    padding-right: 10px;
    margin-right: 10px;
    position: relative;
    top:30px;
}

.acct_list ul li .health.on {
    background-position: 0 5px;
}

.acct_list ul li .health.off {
    background-position: 0 -25px;
}

.password-container p {
  color: #767676 !important;
}


.jScrollPane_list {
  width: 100% !important;
}



/**** DRAG AND DROP ****/

.drag_icon {

}

h2 {
  font-size: 16px;
  color: #464646;
  font-family: "MyriadProBold", "Helvetica", "Arial";

}

#col_1 h1 {
  display: inline-block;
  font-family: "MyriadProBold", "Helvetica", "Arial";
  font-size: 18px;
  font-weight: normal;
  color: #464646;
}

.add-list-link {
  float: right;
   background: url(/assets/images/system.png) no-repeat scroll 7px -1320px var(--primary);;
   padding: 6px 10px 6px 25px;
   display: block;
   text-decoration: none;
   color: var(--pFont);
   text-transform: uppercase;
   width: auto;
   font-family: "MyriadProBold", "Helvetica", "Arial";
   position: relative;
   margin-left: 15px;
}

.addButton {
   float: right;
   background: url(/assets/images/system.png) no-repeat scroll 7px -1320px var(--primary);;
   padding: 6px 8px 6px 25px;
   display: block;
   text-decoration: none;
   color: var(--pFont);
   width: auto;
   position: relative;
   border: 0px;

}

button:disabled {
  background: #e6e6e6 !important;
  color:#9a9a9a !important;
}

button.no_style {
  background: none;
  border: none;
}


.row .cell {
  clear: both;
}


button.ui-datepicker-trigger {
  width: 25px;
  height: 25px;
  padding: 0px;
  border: none;
  top: 10px;
  position: relative;
  margin-left: 5px;
  background: url('/assets/images/calendar-alt-regular.svg') no-repeat transparent;
  float: left;
}

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

label {
  display: block;
  clear: both;
}

legend {
  clear: both;
    position: relative;
    display: block;
    margin-bottom: 5px;
    font-weight: normal;
    color: #464646;
    font-size: 14px;
    font-family: "MyriadProSemiBold","Helvetica","Arial";
}

.date_label {
    font-family: "MyriadProRegular","Helvetica","Arial";
    color: #76767c;
    font-style: italic;
    font-size: 12px;
}

@media only screen and (min-width: 992px){

  .global_form_opts {
    visibility: visible;
    position: relative;
    left: -2000px;
  }

  .focused .global_form_opts {
    left: 0px;
  }

  .global_list_opts .filter {
    float: right;
    margin-top: 0px;
    clear: none;
  }

  .global_list li:hover .global_form_opts, .global_list li:focus-within .global_form_opts {
   /* position: relative; */ /* this is what is causing the edit-remove links to drift to the side */
   clip: auto;
   width: auto;
   height: auto;
   visibility: visible;
  }

  legend {
    width: auto;
    float: left;
  }


   /*visibility: hidden;*/
}


.global_select_all {
  background-color: #f4f4f3;
   width: auto;
   padding: 4px 10px 4px 24px;
   display: inline;
   text-decoration: none;
   color: #464646;
   text-transform: uppercase;
   font-family: "MyriadProBold", "Helvetica", "Arial";
   font-size:12px;
   position: relative;
   float: left;
   margin-right: 10px;
   margin-left: 0px;
   border: 0;
}


.textOnly {
  background: none;
  border: none;
}
.no_float {
  /* use to over ride floats set else where */
  float: none !important;
}
.bold { font-weight: bold; }

.listbox_expand {
  /* this is added and removed in code which justifies the use of !important */
  max-height: none!important;
  height: auto!important;
}
/* .expand_listbox { color: #0B66A8!important; } */
.inline_labels label {
  display: inline-block;
}
.inline_labels input {
  float: none;
  margin: 6px 0!important;
}
.warning {
  background-color: #cd291f;
  color: white!important;

}
.warning::-webkit-input-placeholder { /* Edge */
  color: white;
}

.warning:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: white;
}

.warning::placeholder {
  color: white;
}
.orange_text { color: darkorange; }
/* we need a standard button for theming */
button.primary-button {
  background-color: var(--primary);
  color: var(--pFont);
}
button.primary-button:hover {
  background-color: var(--pHover);
  color: var(--pHoverFont);
}
button.alternative-button {
  background-color: var(--secondary);
  color: var(--sFont);
}
button.alternative-button:hover {
  background-color: var(--primary);
  color: var(--pFont);
}
/* global setting for labels is set to float left but that isn't really what is needed for most labels */
.listbox_elements ul li label { float: unset!important; }

/* make WCAG compliant placeholder text */
.float-right.wcag-filter {
  position: relative;
  top: 0;
  float: none;
}

.filter.placeholder_as_text, .filter.placeholder_tags {
  position: relative;
  z-index: 1;
}

.filter.placeholder_as_text+label {
  position: absolute;
  left: 5px;
  top: 14px;
  line-height: 1.42857;
  color: rgba(0, 0, 0, 0.6);
}

.filter.placeholder_as_text:active+label,
.filter.placeholder_as_text:focus+label,
.filter.placeholder_as_text+label:focus,
.filter.placeholder_as_text+label:active,
.filter.placeholder_as_text.filter_label_has_text+label {
  left: 5px;
  top: -10px;
  font-size: 14px;
  color: black;
}
.select-all.wcag-filter {
  position: relative;
  top: 0;
}
.filter.placeholder_tags+label {
  position: absolute;
  left: 25px;
  top: 16px;
  line-height: 1.42857;
  color: rgba(0, 0, 0, 0.6);
}
.filter.placeholder_tags:active+label,
.filter.placeholder_tags:focus+label,
.filter.placeholder_tags+label:focus,
.filter.placeholder_tags+label:active,
.filter.placeholder_tags.filter_label_has_text+label {
  top: -15px;
  left: 0;
  color: black;
  background: white;
}