:root {
  --background-color: #eeeeee;
  --background-color-inverted: #333333;
  --text-color: #333333;
  --calendar-text-color: #333333;
  --calendar-border-color: #aaa;
  --calendar-background-color: #eee;
  --dark-calendar-highlight-color: #245580;
  --calendar-highlight-color: #24438e;
  --calendar-selected-color: #24438e; 
  --text-color-inverted: #eeeeee;
  --link-color: #2d6ca2;  /* was #478ECD;*/
  --white-color: #FFFFFF;
  --black-color: #000000;
  --black-color-inverted: #ECECEC;
  --icon-color: #107D85;
  --navbar-text-color: #6D6D6D;
  --sub-header-color: #5E5E5E;

  --info-color: #235067;
  --success-color: #2D532D;
  --warning-color: #654F2A;
  --danger-color: #79302F;
  
  --info-background-color: #d9edf7;
  --success-background-color: #dff0d8;
  --warning-background-color: #fcf8e3;
  --danger-background-color: #f2dede;  
  
  --info-border-color: #bce8f1;
  --success-border-color: #d6e9c6;
  --warning-border-color: #faebcc;
  --danger-border-color: #ebccd1; 

  --panel-background-color: #2d3848;
  --panel-summary-background-color: #095d7b;
  --panel-summary-link-color: #CCCCFF;
  --tabs-background-color: #3a4556;
  --tabs-link-color: #24438E;

  --muted-text-color: #595959;
  --primary-text-color: #24438e;
  --info-text-color: #31708f;
  --success-text-color: #3c763d;
  --warning-text-color: #8a6d3b;
  --danger-text-color: #a94442;

  --default-button-color: var(--white-color);
  --default-button-border-color: #ccc;

  --primary-button-color: #24438e;
  --primary-button-border-color: #1f397a;

  --info-button-color: #1F7C98;
  --info-button-border-color: #1A6A82;

  --success-button-color: #3A833A;
  --success-button-border-color: #2D652D;

  --warning-button-color: #A4660E;
  --warning-button-border-color: #81500A;

  --danger-button-color: #CD322D;
  --danger-button-border-color: #9F2623;

  --info-link-color: #245269;
  --warning-link-color: #66512c;
  --danger-link-color: #843534;

  --navbar-grey-color: #a8a8a8;

  --table-background-color: #b5a997;
  --table-background-stripe-color: #AFA08E;
  --table-background-link-color: var(--link-color);

  --table-background-success-color: #d0a9df;
  --table-background-success-stripe-color: #CCA2DD;
  --table-background-success-link-color: var(--link-color);

  --table-background-info-color: #e4a98b;
  --table-background-info-stripe-color: #DE9673;
  --table-background-info-link-color:  var(--link-color);

  --table-background-warning-color: #9fb1f9;
  --table-background-warning-stripe-color: #8BA1F9;
  --table-background-warning-link-color:  var(--link-color);

  --table-background-danger-color: #71cbcb;
  --table-background-danger-stripe-color: #5BC2C2;
  --table-background-danger-link-color: var(--link-color);

  --todo-heading-color: #A6CFDF;
  --done-items-heading-color: #BFD8BF;
  --notapp-items-heading-color: #cfcfcf;

  --form-widgets-color: #575757;
  --form-widgets-background-color: #fff;

  --form-label-text-color: #24438E;

  --smartform-admin-edit-panel-color: #eee;

  --timeline-color-current-stage: #0097ad;
  --timeline-color-stage: #3CB448;

  --text-superscript: #a32824;

  /* filter: brightness(0.5);  */
  color-scheme: light dark;
}

/* 62.5% of 16px browser font size is 10px */
html {
  font-size: 62.5% !important;
}

html.large-font {
	font-size: 80% !important;
}

body {
  /* 13px */
  font-size: 1.3rem !important;
  font-family: "Roboto";
	/* background-image: url("/images/Background _Wave_Dark.svg"); */
	/* background-color: #293041; */
	background-image: url("/images/Background Wave.png");
  background-color: var(--background-color);
	background-repeat: no-repeat;
	background-position: 0 0;
	padding-bottom: 120px;
	/* set to same height as footer so not overlapping */
  /* border-bottom: 120px solid #eeeeee; */
  border-bottom: none;
  color: var(--text-color);
}

button,
input,
optgroup,
select,
textarea {
  color: var(--text-color);
  background: var(--background-color);
}

.container {
	/* container width is now calculated using jquery on page load - depends on menu open or closed */
  /* width: 100% !important;*/
  padding-right: 0em;
}

.slave-container {
  margin-top: 1rem;
	padding-left: 1rem;
  padding-right: 1rem;
  float: left;
  width: 100%;
  /* this is added dynamically in master template depending on layout mode of tabs using aims parameter TabsLayoutOriginalOrStacked */
  /* display: flex;*/
}

.slave-container-external {
  margin-top: 1rem;
	padding-left: 4rem;
  padding-right: 4rem;
  float: left;
  width: 100%;
  /* this is added dynamically in master template depending on layout mode of tabs using aims parameter TabsLayoutOriginalOrStacked */
  /* display: flex;*/
}

.forms-container, #tabcontent, .tabcontent {
	box-shadow: 4px 4px 14px 0 rgba(0,0,0,0.5);
  border-radius: 0px 5px 5px 5px;
}

.nobullets {
  list-style-type: none;
}

.category-checkboxes {
  padding-left: 0px;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
	box-shadow: 3px -6px 14px 0px rgba(0,0,0,0.3);
}

#internal-jumbotron {
    background-color: var(--white-color);
}

#external-jumbotron {
  background: none;
  padding-bottom: 0rem;
}

#external-jumbotron #page-title {
  padding-left: 5rem;
  padding-top: 0rem;
  padding-bottom: 0rem;
}

.jumbotron {
	margin-top: 0rem;
  margin-bottom: 0rem;
}

#sub-title {
	padding-left: 5rem;
}

.jumbotron p {
  margin-bottom: 7.5px;
  font-size: 3rem;
  font-weight: 200;
  padding-left: 5rem;
}

#external-jumbotron #sub-title {
  font-size: 1.9rem;
  font-weight: 400;
}

.help-container {
	padding-left: 4rem;
  padding-right: 4rem;
  display: flex;
}

#accessibility-contrast-high, body.high-contrast #accessibility-contrast-high, #accessibility-contrast-high-mobile, body.high-contrast #accessibility-contrast-high-mobile {
	background: var(--black-color) !important;
	color: #FFCF00 !important;
	font-weight: bold;
}

#accessibility-contrast-normal, #accessibility-contrast-normal-mobile {
	background: #26BCD6 !important;
}

#accessibility-font-increased, #accessibility-font-increased-mobile {
	font-size: 1.8rem;
	line-height: 1.7rem;
}

.help-container .col-md-6 {
	display: flex;
}

.help-container .panel-body-left {
  background-color: var(--info-background-color);
  border-radius: 5px;
  font-weight: 400;
  flex: 1;
}

.help-container .panel-body-right {
	background-color: var(--icon-color);
	border-radius: 5px;
	font-weight: 400;
	color: var(--white-color);
	background-image: url(/images/xwerx/Background_Wave_Dark_color.svg);
	background-repeat: no-repeat;
	background-position: left 0px top -140px;
	background-size: 60%;
	flex: 1;
}

.help-block {
	color: #4F4F4F;
}

.help-block-inline {
	display: inline;
  font-weight: 400;
}

.help-block-top {
	margin-top: 0px;
	margin-bottom: 4px;
}

.superscript {
	position: relative;
	top: -1.2em;
	font-size: 50%;
	color: var(--text-superscript);
}

#panel-summary {
	background-color: var(--panel-summary-background-color);
	border-radius: 5px;
	color: var(--white-color);
  box-shadow: none;
}

#panel-summary a {
  color: var(--panel-summary-link-color);
}

.jumbotron h1, .jumbotron .h1 {
	font-size: 3.6rem;
}

h1 {
  font-size: 2.8rem;
  font-weight: 500;
}
h2 {
  font-size: 2.4rem;
  font-weight: 400;
}
h3 {
  font-size: 2.0rem;
  font-weight: 400;
}
h4 {
  font-size: 1.6rem;
  font-weight: 400;
}
h5 {
  font-size: 1.4rem;
  line-height: 1.9rem;
  font-weight: 400;
}
h6 {
  font-size: 1.2rem;
  font-weight: 600;
}

small, .small {
	font-size: 80%;
}

.hidden {
  display: none;
}

/* register/login page */
/* change h5 links to h2 to stop WAVE errors about skipping levels while keeping h5 sizes */
body#register h2 {
	font-size: 1.4rem;
	line-height: 1.9rem;
	font-weight: 400;
}

.visually-hidden {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hero {
  font-size: 2.4rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
  margin-top: 0px;
}

/* code error dumps */
code {
	padding: 2px 4px;
	font-size: 90%;
	color: #c7254e;
	background: none !important;
	border-radius: 4px;
}

body.high-contrast code {
	color: #E26080;
	background: none !important;
}

.bodytext-color-white {
    color: var(--white-color);
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 2.1rem;
    padding-top: 2rem;
  }

  .bodytext-color-dark {
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 2.1rem;
    padding-top: 2rem;
  }

.jumbotron {
	background: none;
}

/* need to move modal dialogs away from the Infobar "Active" button which is at z-index 2000 */
/* originally tried moving above with z-index but this just causes other things to go underneath it eg bootstrap-select dropdowns on some dialogs, better to move it */
.modal {
	/* z-index: 2050 */;
  top: 60px;
}

.modal .form-inline {
	border-bottom: none;
}

.modal-explanation {
	padding-bottom: 13px;
	padding-top: 10px;
}

/* add second relationship dropdown on bulk reassignment appearing under modal - need to reset z-index for this */
/* no need to move this now */
#vueAppContent .modal {
	/* z-index: 1050; */
}

.user-messages {
  padding-left: 10px;
  padding-right: 10px;
}

.flexbox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
  }

.flexbox .flexcol {
    flex: 1;
}

.fancy-container {
    margin: auto;
    width: 960px;
    display: flex;
}

.fancy-container-swapped {
  flex-direction: row-reverse;
}

#scorebarBorder {
  border: inherit;
}

#scorebarBorder #score {
  color: var(--white-color);
}

.fancy-container-registration {
  flex-direction: row;
}

.transparent-button {
    border: #3CB448 2px solid;
    color:var(--text-color);
    background: transparent;
}

.forgot-pass-link {
    font-size: 1.4rem;
    font-weight: 500;
  }

form#login {
  display: grid;
}

form#login .control-label, form#register .control-label, form#register .control-span {
    padding-top: 1rem;
    padding-left: 0px;
    padding-right: 0px;
}

form#register .control-span {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}

form#register .form-control-static {
	padding-top: 0px;
	padding-bottom: 0px;
}

form#login .form-group-inline div {
    padding-left: 0px;
    padding-right: 0px;
}

/* header section */

/* move slightly back from default of 1030 so xinha fullscreen modal windows still work */
.navbar-fixed-top {
  z-index: 1025;
}

/* fix for xinha Insert Special Character modal popup */
.modeless.dialog.CharacterMap {
	z-index: 1027 !important;
}

.navbar-default {
	border: none;
}

.navbar-left > img {
	height: 42px;
}

.navbar-default .navbar-link {
	color: var(--navbar-text-color);
}

.navbar-brand {
  padding-top: 10px;
}

/* invisible but needed for WCAG validation */
.navbar-default .navbar-brand {
	color: var(--black-color);
}

/* invisible but needed for WCAG validation */
body.high-contrast .navbar-default .navbar-brand {
	color: var(--white-color);
}

#navbar-logo-a {
	padding-left: 15px;
}

#nav-mobile-links {
  display: none;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: var(--white-color);
}

.dropdown-submenu.pull-left {
  float: none;
}

.navbar-inverse .dropdown-header {
	font-size: 1.5rem;
  color: var(--navbar-text-color);
}

.navbar-default .dropdown-header {
	font-size: 1.5rem;
  color: var(--navbar-text-color);
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

.navbar-default #info-panel-icon {
	color: var(--white-color);
}

/* invisible but needed for WCAG validation */
#navbar-welcome-portrait {
  color: var(--black-color);
}

/* invisible but needed for WCAG validation */
body.high-contrast #navbar-welcome-portrait {
  color: var(--white-color);
}

#navbar-welcome-portrait .img-thumbnail, #navbar-welcome-portrait-mobile .img-thumbnail {
	height: 40px;
	border-radius: 20px;
  border: none;
  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.6);
  padding: 0px;
  color: var(--navbar-text-color);
  background-color: var(--black-color);
  font-size: 1em;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.navbar-right {
	padding-left: 0px;
}

.navbar-form {
	margin-top: 12px;
}

#info-panel, #budget-info-panel, #meeting-info-panel {
	margin-bottom: 6px;
  padding: 20px 10px 3px 10px;
  margin-top: 0px;
}

#meeting-info-panel {
  padding: 15px 10px 15px 10px;
}

#info-panel-list {
	margin-bottom: 0px;
}

#info-panel-icon {
	color: var(--white-color);
}

/* move button up into header area */
#info-panel-collapse {
	margin-top: -33px;
  margin-bottom: 9px;
	z-index: 2000;
	position: relative;
}

#info-panel-collapse a {
  background-color: var(--icon-color);
  border-color: #0d686e;
  padding: 10px 15px 10px 15px;
  border-radius: 7px 7px 0px 0px;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--white-color);
}

#info-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50px, 100%), 1fr));
}

#info-bar span {
	padding-right: 10px;
}

#UUIDtoolbar {
	background-color: #ffff006b;
	border: none;
	/* position: absolute; */
	right: 0;
	left: 0;
	z-index: 2030;
	font-size: x-small;
	padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 14px;
	/* top: 53px; */
}

#collapseInfoPanel {
	padding: 7px 15px;
}


/* smart-forms */

#sections-container {
	/*display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50px, 100%), 1fr));*/
}

.forms-element-inactive {
	background-color: #89474761;
	border: 2px solid #894747 !important;
}

#forms-admin-one h5 {
	margin: 0px;
}

.chars-left {
  margin-right: 5px;
}

.textarea-remaining, .textarea-maxlength, .textbox-maxlength {
	font-size: 1.2rem;
}

legend {
	padding-top: 10px;
}

legend:empty {
  display: none;
}

fieldset.radiogroup legend, fieldset.checkboxgroup legend {
	padding-top: 0px;
	margin-bottom: 0rem;
	border: none;
}

.yes-no-list fieldset, .yes-no-list legend {
  all: revert;
}

.yes-no-list fieldset {
  border: 1px inset #eee;
}

.date-year, .date-month, .date-day, .date-button {
	display: inline-block;
}

label.specify, .radio label.specify, .checkbox label.specify {
  font-weight: 700;
  /*display: inline-block;*/
  margin-top: 0px;
}

.forms-element .radio, .multielement .radio {
	margin-left: 35px;
}

.uploaded-file-name {
  padding-bottom: 5px;
}

.progress-bar-danger {
	background-color: #D4403A;
}

body.high-contrast tr td.forms-table-other-data {
	background: var(--white-color) !important;
  
}

body.high-contrast tr td.forms-element table tr td.forms-table-other-data {
	border: none !important;
}

td.forms-table-other-data {
  background-color: #F4F6F9;
}

.forms-table-other-data, .forms-table-other-label {
	border: none !important;
}

.form-group.dynamic_cat_tree_first_part, .form-group.dynamic_cat_tree_second_part, .form-group.dynamic_cat_tree_third_part {
	float: left;
	padding-top: 7px;
}

/* limit Set Visible dropdown width to 2 columns */
#logic-ae\:from_set_visible_section {
	grid-column: 1/3;
}

/* portal schemes pages */

.login-scheme-or-call {
	padding-bottom: 10px;
}

.callclosed {
	border: none;
	padding-top: 0rem;
}

.callopen {
	border: none;
	padding-top: none;
}

.thumbnail {
	padding: 0px;
	margin-bottom: 0;
	background:none;
	border: none;
	border-radius: 1px;
}

.thumbnail .caption {
	display: flex;
	flex-direction: column;
}

#aims-portal-choose-scheme-call .thumbnail .caption p, 
#aims-portal-choose-super-scheme  .call .panel-body, 
#aims-portal-index .thumbnail .caption p {
	display: flex;
	flex: 1;
  padding-bottom: 10px;
}

.panel-default > .panel-heading-scheme {
    background-color: var(--white-color);
    color: var(--text-color);
    border:none;
    font-size: 100%;
    float:left;
    width:100%;
    padding-top: 23px;
}

.panel-heading-scheme-call {
    float:left;
    width:100%;
    padding-top: 23px;
}

.panel-title-scheme .panel-name-scheme {
    font-size: 2.0rem;
    font-weight: 500;
}

.panel-title-scheme .panel-name-scheme-sub {
  font-size: 1.4rem;
  font-weight: 400;
}

.panel-title-scheme-call .panel-name-scheme-call {
    font-size: 1.4rem;
    font-weight: 400;
}

.panel-title-scheme-call-description .panel-name-scheme-call-description {
  font-size: 2.4rem;
  font-weight: 400;
}

.panel-body-scheme-call-description .caption {
  color: var(--white-color);
}

#panel-how-to-apply {
  background-color: var(--info-background-color);
  box-shadow: none;
}

.panel-edit {
    height: 32px;
    width: 32px;
    background:var(--icon-color);
    border:none;
    border-radius: 5px;
    color:var(--white-color);
    float:right;
}

.panel-info-scheme-call {
    float:right;
    font-size: 1.4rem;
    font-weight: 400;
}

.panel-name {
    float:left;
}

#panel-calendar .fc-list-empty-wrap2 {
	position: revert;
}

#panel-calendar .fc-basic-view .fc-day-number, .fc-basic-view .fc-week-number {
	padding-right: 10px;
}

.panel-edit-icon {
	padding: 7px 8px;
}

.panel-body-scheme {
    padding:0px;
}


#aims-portal-choose-scheme-call .call, 
#aims-portal-choose-super-scheme .call, 
#aims-portal-index .call, 
#ticket-inbox-aims .call {
	display: flex;
  flex: 1;
}

#aims-portal-choose-scheme-call .thumbnail, 
#aims-portal-choose-super-scheme .thumbnail,
#aims-portal-index .thumbnail,
#ticket-inbox-aims .thumbnail {
	display: flex;
	flex-direction: column;
  width: 100%;
}

#aims-portal-choose-scheme-call .thumbnail .caption,
#aims-portal-choose-super-scheme .thumbnail .caption,
#aims-portal-index .thumbnail .caption, 
#ticket-inbox-aims .thumbnail .caption {
	display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: flex-end;
}

#aims-portal-choose-scheme-call .thumbnail .caption p,
#aims-portal-choose-super-scheme .thumbnail .caption p,
#aims-portal-index .thumbnail .caption p, 
#ticket-inbox-aims .thumbnail .caption p {
	display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: flex-start;
}

#aims-portal-choose-scheme-call .call .panel-body, 
#aims-portal-choose-super-scheme  .call .panel-body, 
#aims-portal-index .call .panel-body {
	display: flex;
  flex: 1;
  padding-bottom: 0px;
}

#aims-portal-choose-scheme-call .panel-body-scheme, 
#aims-portal-choose-super-scheme .panel-body-scheme, 
#aims-portal-index .panel-body-scheme,
#ticket-inbox-aims .panel-body-scheme {
	display: flex;
	flex-direction: column;
	flex: 1;
}

#aims-portal-choose-scheme-call .panel-default, 
#aims-portal-choose-super-scheme .panel-default, 
#aims-portal-index .panel-default,
#ticket-inbox-aims .panel-default {
	display: flex;
	flex-direction: column;
}

/*
  .grid-sizer { width: 25%; }

  @media (min-width: 1701px) and (max-width: 1900px) {
    .grid-sizer { width: 25%; }
  }

  @media (min-width: 1501px) and (max-width: 1700px) {
    .grid-sizer { width: 25%; }
  }


  @media (min-width: 1201px) and (max-width: 1500px) {
    .grid-sizer { width: 33%; }
  }


  @media (min-width: 993px) and (max-width: 1200px) {
    .grid-sizer { width: 33%; }
  }


  @media (min-width: 768px) and (max-width: 992px)  {
    .grid-sizer { width: 50%; }
  }


  @media (min-width: 481px) and (max-width: 767px) {
    .grid-sizer { width: 50%; }
  }


  @media (max-width: 480px) {
    .grid-sizer { width: 100%; }
  }
*/

#superscheme-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(300px, 100%), 1fr));
  column-gap: 10px;
  row-gap: 10px;
  /*grid-auto-flow: column dense;*/
}

/* changing this from auto-fit as that caused one or two panels to stretch to large screen sizes */
#scheme-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(500px, 100%), 1fr));
  column-gap: 10px;
  row-gap: 10px;
  /*grid-auto-flow: column dense;*/
}

#call-description-grid {
  width: 100%
}

/* fix so small images don't expand to panel width os schem call description page */

.grid-image {
	display: block !important;
}

.grid-image .img-responsive {
  width: auto;
}

/* added margin-top to match the panel-flat panels which have similar top margin, so all align on first row */
#call-description-grid .panel {
  padding-left: 5px;
  padding-right: 5px;
  margin-top: 2.2rem;
}

#call-description-grid-not-used {
  display: grid;
  grid-template-columns: repeat(3,minmax(min(300px, 100%), 1fr));
  column-gap: 10px;
  row-gap: 10px;
  grid-template-rows: masonry;
  /*grid-auto-flow: column dense;*/
}

#call-description-flex-not-used {
	display: flex;
	column-gap: 10px;
	flex-flow: column wrap;
  height: 100vh;
}

#call-description-flex-not-used > * {
  flex: 0 1 auto;
}

#call-description-grid-fancy-not-used {
  /**
   * User input values.
   */
  --grid-layout-gap: 10px;
  --grid-column-count: 3; /* This gets overridden by an inline style. */
  --grid-item--min-width: min(300px, 100%); /* This gets overridden by an inline style. */
  
  /**
   * Calculated values.
   */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}

/*

https://www.sassmeister.com/
https://sass-lang.com


$breakpoints: (xs, sm, md, lg, xl, xxl);
$calculation: '';

@each $breakpoint in $breakpoints {

  @for $i from 1 through 12 {

    $calculation: 0% + ($i * 100 / 12);

    .masonry-#{$breakpoint}-#{$i} {

      @if $breakpoint == 'xs' {
        width: calc(#{$calculation} - 10px);
      }
      @else if $breakpoint == 'sm' {

        @media screen and (min-width: 576px) {
          width: calc(#{$calculation} - 10px);  
        }
      }
      @else if $breakpoint == 'md' {

        @media screen and (min-width: 768px) {
          width: calc(#{$calculation} - 10px);  
        }
      }
      @else if $breakpoint == 'lg' {

        @media screen and (min-width: 992px) {
          width: calc(#{$calculation} - 10px);  
        }
      }
      @else if $breakpoint == 'xl' {

        @media screen and (min-width: 1200px) {
          width: calc(#{$calculation} - 10px);  
        }
      }
      @else if $breakpoint == 'xxl' {

        @media screen and (min-width: 1400px) {
          width: calc(#{$calculation} - 10px);  
        }
      }
    }
  }
}

*/

.masonry-xs-1 {
  width: calc(8.3333333333% - 10px);
}

.masonry-xs-2 {
  width: calc(16.6666666667% - 10px);
}

.masonry-xs-3 {
  width: calc(25% - 10px);
}

.masonry-xs-4 {
  width: calc(33.3333333333% - 10px);
}

.masonry-xs-5 {
  width: calc(41.6666666667% - 10px);
}

.masonry-xs-6 {
  width: calc(50% - 10px);
}

.masonry-xs-7 {
  width: calc(58.3333333333% - 10px);
}

.masonry-xs-8 {
  width: calc(66.6666666667% - 10px);
}

.masonry-xs-9 {
  width: calc(75% - 10px);
}

.masonry-xs-10 {
  width: calc(83.3333333333% - 10px);
}

.masonry-xs-11 {
  width: calc(91.6666666667% - 10px);
}

.masonry-xs-12 {
  width: calc(100% - 10px);
}

@media screen and (min-width: 576px) {
  .masonry-sm-1 {
    width: calc(8.3333333333% - 10px);
  }
}

@media screen and (min-width: 576px) {
  .masonry-sm-2 {
    width: calc(16.6666666667% - 10px);
  }
}

@media screen and (min-width: 576px) {
  .masonry-sm-3 {
    width: calc(25% - 10px);
  }
}

@media screen and (min-width: 576px) {
  .masonry-sm-4 {
    width: calc(33.3333333333% - 10px);
  }
}

@media screen and (min-width: 576px) {
  .masonry-sm-5 {
    width: calc(41.6666666667% - 10px);
  }
}

@media screen and (min-width: 576px) {
  .masonry-sm-6 {
    width: calc(50% - 10px);
  }
}

@media screen and (min-width: 576px) {
  .masonry-sm-7 {
    width: calc(58.3333333333% - 10px);
  }
}

@media screen and (min-width: 576px) {
  .masonry-sm-8 {
    width: calc(66.6666666667% - 10px);
  }
}

@media screen and (min-width: 576px) {
  .masonry-sm-9 {
    width: calc(75% - 10px);
  }
}

@media screen and (min-width: 576px) {
  .masonry-sm-10 {
    width: calc(83.3333333333% - 10px);
  }
}

@media screen and (min-width: 576px) {
  .masonry-sm-11 {
    width: calc(91.6666666667% - 10px);
  }
}

@media screen and (min-width: 576px) {
  .masonry-sm-12 {
    width: calc(100% - 10px);
  }
}

@media screen and (min-width: 768px) {
  .masonry-md-1 {
    width: calc(8.3333333333% - 10px);
  }
}

@media screen and (min-width: 768px) {
  .masonry-md-2 {
    width: calc(16.6666666667% - 10px);
  }
}

@media screen and (min-width: 768px) {
  .masonry-md-3 {
    width: calc(25% - 10px);
  }
}

@media screen and (min-width: 768px) {
  .masonry-md-4 {
    width: calc(33.3333333333% - 10px);
  }
}

@media screen and (min-width: 768px) {
  .masonry-md-5 {
    width: calc(41.6666666667% - 10px);
  }
}

@media screen and (min-width: 768px) {
  .masonry-md-6 {
    width: calc(50% - 10px);
  }
}

@media screen and (min-width: 768px) {
  .masonry-md-7 {
    width: calc(58.3333333333% - 10px);
  }
}

@media screen and (min-width: 768px) {
  .masonry-md-8 {
    width: calc(66.6666666667% - 10px);
  }
}

@media screen and (min-width: 768px) {
  .masonry-md-9 {
    width: calc(75% - 10px);
  }
}

@media screen and (min-width: 768px) {
  .masonry-md-10 {
    width: calc(83.3333333333% - 10px);
  }
}

@media screen and (min-width: 768px) {
  .masonry-md-11 {
    width: calc(91.6666666667% - 10px);
  }
}

@media screen and (min-width: 768px) {
  .masonry-md-12 {
    width: calc(100% - 10px);
  }
}

@media screen and (min-width: 992px) {
  .masonry-lg-1 {
    width: calc(8.3333333333% - 10px);
  }
}

@media screen and (min-width: 992px) {
  .masonry-lg-2 {
    width: calc(16.6666666667% - 10px);
  }
}

@media screen and (min-width: 992px) {
  .masonry-lg-3 {
    width: calc(25% - 10px);
  }
}

@media screen and (min-width: 992px) {
  .masonry-lg-4 {
    width: calc(33.3333333333% - 10px);
  }
}

@media screen and (min-width: 992px) {
  .masonry-lg-5 {
    width: calc(41.6666666667% - 10px);
  }
}

@media screen and (min-width: 992px) {
  .masonry-lg-6 {
    width: calc(50% - 10px);
  }
}

@media screen and (min-width: 992px) {
  .masonry-lg-7 {
    width: calc(58.3333333333% - 10px);
  }
}

@media screen and (min-width: 992px) {
  .masonry-lg-8 {
    width: calc(66.6666666667% - 10px);
  }
}

@media screen and (min-width: 992px) {
  .masonry-lg-9 {
    width: calc(75% - 10px);
  }
}

@media screen and (min-width: 992px) {
  .masonry-lg-10 {
    width: calc(83.3333333333% - 10px);
  }
}

@media screen and (min-width: 992px) {
  .masonry-lg-11 {
    width: calc(91.6666666667% - 10px);
  }
}

@media screen and (min-width: 992px) {
  .masonry-lg-12 {
    width: calc(100% - 10px);
  }
}

@media screen and (min-width: 1200px) {
  .masonry-xl-1 {
    width: calc(8.3333333333% - 10px);
  }
}

@media screen and (min-width: 1200px) {
  .masonry-xl-2 {
    width: calc(16.6666666667% - 10px);
  }
}

@media screen and (min-width: 1200px) {
  .masonry-xl-3 {
    width: calc(25% - 10px);
  }
}

@media screen and (min-width: 1200px) {
  .masonry-xl-4 {
    width: calc(33.3333333333% - 10px);
  }
}

@media screen and (min-width: 1200px) {
  .masonry-xl-5 {
    width: calc(41.6666666667% - 10px);
  }
}

@media screen and (min-width: 1200px) {
  .masonry-xl-6 {
    width: calc(50% - 10px);
  }
}

@media screen and (min-width: 1200px) {
  .masonry-xl-7 {
    width: calc(58.3333333333% - 10px);
  }
}

@media screen and (min-width: 1200px) {
  .masonry-xl-8 {
    width: calc(66.6666666667% - 10px);
  }
}

@media screen and (min-width: 1200px) {
  .masonry-xl-9 {
    width: calc(75% - 10px);
  }
}

@media screen and (min-width: 1200px) {
  .masonry-xl-10 {
    width: calc(83.3333333333% - 10px);
  }
}

@media screen and (min-width: 1200px) {
  .masonry-xl-11 {
    width: calc(91.6666666667% - 10px);
  }
}

@media screen and (min-width: 1200px) {
  .masonry-xl-12 {
    width: calc(100% - 10px);
  }
}

@media screen and (min-width: 1400px) {
  .masonry-xxl-1 {
    width: calc(8.3333333333% - 10px);
  }
}

@media screen and (min-width: 1400px) {
  .masonry-xxl-2 {
    width: calc(16.6666666667% - 10px);
  }
}

@media screen and (min-width: 1400px) {
  .masonry-xxl-3 {
    width: calc(25% - 10px);
  }
}

@media screen and (min-width: 1400px) {
  .masonry-xxl-4 {
    width: calc(33.3333333333% - 10px);
  }
}

@media screen and (min-width: 1400px) {
  .masonry-xxl-5 {
    width: calc(41.6666666667% - 10px);
  }
}

@media screen and (min-width: 1400px) {
  .masonry-xxl-6 {
    width: calc(50% - 10px);
  }
}

@media screen and (min-width: 1400px) {
  .masonry-xxl-7 {
    width: calc(58.3333333333% - 10px);
  }
}

@media screen and (min-width: 1400px) {
  .masonry-xxl-8 {
    width: calc(66.6666666667% - 10px);
  }
}

@media screen and (min-width: 1400px) {
  .masonry-xxl-9 {
    width: calc(75% - 10px);
  }
}

@media screen and (min-width: 1400px) {
  .masonry-xxl-10 {
    width: calc(83.3333333333% - 10px);
  }
}

@media screen and (min-width: 1400px) {
  .masonry-xxl-11 {
    width: calc(91.6666666667% - 10px);
  }
}

@media screen and (min-width: 1400px) {
  .masonry-xxl-12 {
    width: calc(100% - 10px);
  }
}

/* forms */

legend {
	padding-top: 10px;
}

/* #575757 - WCAG AAA 7.22:1 contrast on the text */
.form-control {
	font-size: 1.6rem;
	line-height: 2.1rem;
	color: var(--form-widgets-color);
  background-color: var(--form-widgets-background-color);
  font-weight: 300;
  /* removing - breaks datatables page dropdown - padding:9px;*/
}

/* bad textareas without form-control class */
textarea {
  background-color: var(--form-widgets-background-color);
}

/* disable bad style from old quest.css */
table.table textarea.form-control {
	width: 100%;
}

.form-control::placeholder {
	color: #575757;
}

.form-horizontal .control-label {
	text-align: left;
  padding-bottom: 3px;
}

span.control-label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 5px;
	font-weight: 700;
}

/* remove vertical space on empty labels on some admin pages eg parameters */
.control-label:empty {
	padding-top: 0px;
	padding-bottom: 0px;
}

/* default large screen size */
.form-horizontal .form-group, 
.form-horizontal .standard-form-row, 
.form-horizontal .required-form-row {
  margin-right: 0px;
  margin-left: 0px;
  border: 1px solid #E7EDF6;
  padding-bottom: 10px;
  padding-top: 10px;
}

.form-group {
	margin-bottom: 0px;
}

.form-control.input-sm {
	font-size: 1.3rem;
}

select.input-sm {
	height: 3rem;
}

.form-control.input-xs {
	padding: 2px 6px 2px 6px;
	font-size: 1.1rem;
}

.form-control.input-lg {
	height: 46px;
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1.3333333;
	border-radius: 6px;
  font-weight: 400;
}

.form-control-static {
  color: #2A2C2E;
  font-size: 1.4rem;
  line-height: 1.9rem;
  overflow-wrap: break-word;
}

.form-horizontal, .standard-form {
	display: grid;
	grid-gap: 0px;
	grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  float: left;
  clear: both;
  width: 100%;
  margin-bottom: 5px;
}

/* ajax widget multiple results box - decrease text size to fit */
select[multiple="multiple"] {
	font-size: 1.5rem;
}

/* grid overflow problem fix */
.form-horizontal > * {
	min-width: 0px;
}

.forms-admin-inputs {
  width: auto !important;
  display:inline;
}

/* admin template-letters 2 column layout grid
#letters-admin-letter-edit-xinha form#letterform {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 10px;
} */

#xinha-editor {
  grid-column: 1/-1;
}

/* Fix a problem with WAVE validator complaining about low contrast on bootstrap-select widgets */
.bootstrap-select > select {
	opacity: 1 !important;
}

/* bootstrap select grid overflow problem fix */
.form-horizontal .bootstrap-select {
	display: block;
}

/* remove grid from old table based hacky forms */
body#wf-admin-workflow.internal form {
  display: inherit;
}

/* remove grid from project costs tabs ("display: block" caused datatables to not fill 100%) */
#project_costs {
  display: revert;
}

body#wf-admin-workflow.internal .form-horizontal .form-group {
  border: none;
}

/* admin page with grouped fieldsets looks better with fixed size columns which do not expand to full width if only one or two per row */
body#shared-parameters .form-horizontal {
	grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
}

.form-horizontal fieldset {
  display: inherit;
  grid-gap: inherit;
  grid-template-columns: inherit;
  grid-column: 1/-1;
  margin-bottom: 10px;
}

/* dragscroll table in a form needs to be 100% width */
.form-horizontal div.dragscroll {
  grid-column: 1/-1;
}

.dropdown-menu {
	font-size: 1.3rem;
}

/* limit the width of two dropdowns - Question and Question Element - on the logic add/edit admin page so long labels don't cause very wide select list */
body#forms-admin-logic-link div.dropdown-menu {
  max-width: -moz-available;
  max-width: -webkit-fill-available;
}

.form-group-inline {
	font-size: 1.4rem;
	line-height: 1.9rem;
	float: left;
	width: 100%;
}

.radio label, .checkbox label {
padding-left: 20px;
	margin-bottom: 0;
	font-weight: 400;
	cursor: pointer;
  vertical-align: text-top;
}

.radio label {
  padding-left: 6px;
}

.radio-inline {
	padding-left: 35px;
}

.checkbox {
	margin-left: 15px;
}

.action-buttons, .forms-buttons, .standard-form-button-row {
	/* float: left; */
	/* width: 100%; */
	padding-top: 1rem;
  /* grid-column-start: 1; */
  /* not needed - breaks auto-fit */
  /* grid-column-end: -1; */
  grid-column: 1/-1;
  /* removing grid-row-start since it casued multiple submit action buttons to end up on top of each other */
  /* grid-row-start: 300; */
}

/* OLD "STANDARD-FORM" FORMS / HARDCODED / HARD-CODED FORMS                                   */
/* update old forms without changing existing HTML code - hierarchy below                     */
/* NOTE: Programmer still have to add class="form-horizontal" to FORM element                 */
/* to get new GRID layout and also add any needed "form-control" or "selectpicker" classes    */
/* see /general-comments/www/admin/comment-type-edit.adp;3->4 for example                     */
/*                                                                                            */
/*  Always add data-container="body" to stop it going under other elements or off screen, as well as other optional selectpicker data options             */
/*   class="selectpicker" data-container="body" data-width="fit" data-live-search="true" data-live-search-normalize="true" data-live-search-style="contains" data-live-search-placeholder="#aims.liveSearchPlaceholder#"    */
/*                                                                                            */
/* not duplicating new classes here if not needed - added to matching new class if possible   */
/*                                                                                            */
/* standard-form-row -> form-group                                                            */
/*   standard-form-label/standard-form-label-mandatory -> col-sm-12 control-label             */
/*    standard-form-label-mandatory "*" -> strong form-required-mark                          */
/*     standard-form-label-text/standard-form-label-text-mandatory -> form-label              */
/*       label -> label                                                                       */
/*       standard-form-text -> col-sm-12                                                      */
/*                                                                                            */
/* standard-form-button -> action-buttons                                                     */
/* submit-buttons-row -> action-buttons                                                       */
/*                                                                                           */
/* input submit -> btn btn-lg btn-primary btn-block                                           */
/* input submit (cancel) -> btn btn-lg btn-default btn-block                                  */
/* DON'T HARDCODE STYLES - CALL AIMS STYLE FUNCTIONS below                                    */
/* set form_submit_default_buttons_class [aims::style::form_submit_buttons_class -class "default"] */
/* set form_submit_primary_buttons_class [aims::style::form_submit_buttons_class -class "primary"] */
/*                                                                                            */
/*  NOTE: its not possible to target the CANCEL type submit button as its different           */
/*  on every page and only works in English so better to change HTML to new "action-buttons"  */
/*  and add extra class="btn btn-lg btn-primary btn-block"                                    */
/*  and class="btn btn-lg btn-default btn-block" to submit buttons instead.                   */
/*                                                                                            */


.standard-form-label {
  padding-top: 0px;
  margin-bottom: 0px;
  text-align: left;
  padding-bottom: 3px;
  padding-right: 20px;
  padding-left: 15px;
  padding-top: 7px;
  width: 100% !important;
  position: relative;
  float: left;
  min-height: 1px;
}

.standard-form-text {
  width: 100%;
  position: relative;
  float: left;
  padding-right: 15px;
  padding-left: 15px;
  min-height: 1px;
}

.standard-form-error {
  color: var(--danger-text-color);
}

/* form-inline */
.no-bottom-border {
  padding-bottom: 0pt;
  border-bottom: none;
  margin-bottom: 0.5rem;
}

/* don't show these asterisks any more */
.standard-form-label-mandatory {
	display: block;
	float: left;
	padding-right: 5px;
  color: #a94442;
  font-size: 1.8em;
	font-weight: bold;
	letter-spacing: 0;
	line-height: 1.4rem;
}


.form-label, .standard-form-label-text, .standard-form-label-text-mandatory {
	color: var(--form-label-text-color);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.4rem;
}

.standard-form-text-mandatory {
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}

.form-required-mark {
	color: #a94442;
}

.standard-form-button {
  width: 100%;
  margin-left: auto !important;
}

.standard-form-button input, .standard-form-button-row input {
  display: block;
  margin-bottom: 5px;
  width: 100%;
  font-size: 2rem;
  margin-top: 5px;
  line-height: 2.6rem;
  color: var(--white-color);
  background-color: var(--primary-button-color);
  border-color: var(--primary-button-border-color);
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  touch-action: manipulation;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
}

body.high-contrast .standard-form-button input, body.high-contrast .standard-form-button-row input {
  color: var(--white-color);
  background-color: var(--dark-primary-button-color);
}

body.high-contrast .standard-form-button input:hover, body.high-contrast .standard-form-button-row input:hover {
	color: var(--white-color);
	border-color: #122249;
}

.standard-form-button input[value="Cancel"], .standard-form-button-row input[value="Cancel"], .standard-form-button input[value="cancel"], .standard-form-button-row input[value="cancel"] {
  color: var(--text-color);
  background-color: var(--default-button-color);
  border-color: var(--default-button-border-color);
}

.standard-form-button input[value="Cancel"]:hover, .standard-form-button-row input[value="Cancel"]:hover, .standard-form-button input[value="cancel"]:hover, .standard-form-button-row input[value="cancel"]:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.standard-form-button input:hover, .standard-form-button-row input:hover {
  color: var(--white-color);
  background-color: #1a3065;
  border-color: #122249;
}

.standard-form-ajax-container input {
  margin-top: 5px;
}

/* to emulate "form-group col-sm" on new forms */
.form-horizontal .standard-form-row,
.form-horizontal .required-form-row {
  padding-left: 15px;
  padding-right: 15px;
}

/* panels */

.panel {
  border-radius: 5px 5px 5px 5px;
  background-color: var(--white-color);
  color: var(--text-color);
  box-shadow: 4px 4px 14px 0 rgba(0,0,0,0.5);
}

.panel .nav > li > a:hover, .panel .nav > li > a:focus {
	background-color: #12a5af;
}

.nav-panel-config-dropdown {
	position: absolute;
	right: 45px;
	top: 10px;
	margin-right: 0px;
	background-color: var(--icon-color);
	padding: 0px;
	border-radius: 5px;
	cursor: pointer;
	margin: 2px;
}

.nav-panel-config-button {
	position: absolute;
	top: 10px;
	margin-right: 0px;
	background-color: var(--icon-color);
	padding: 6px 8px;
	border-radius: 5px;
  cursor: pointer;
  margin: 2px;
}

.nav-panel-config-button:hover, .sidebar-menu-icon-up-down:hover, .nav-panel-config-dropdown:hover,
.nav-panel-config-button:focus, .sidebar-menu-icon-up-down:focus, .nav-panel-config-dropdown:focus {
  background-color: #12a5af;
}

.nav-panel-config-button-expand {
	right: 10px;
}

.nav-panel-config-button-contract {
	right: 10px;
}

.nav-panel-config-dropdown > li > a {
	padding: 5px 8px;
  color:var(--white-color);
  font-size: 16px;
  border-radius: 5px;
}

.nav-panel-config-button {
  color:var(--white-color);
  font-size: 16px;
}

.panel h3, legend {
  font-size: 2.0rem;
  font-weight: 500;
}

.panel-title {
    font-size: 1.6rem;
    font-weight: 400;
}

.panel-body {
    font-size: 1.4rem;
    font-weight: 300;
}

.panel-flat {
	color: var(--text-color);
    border-radius: 0px;
    border: 0px;
    margin-top: 2.2rem;
    margin-bottom: 1rem;
    box-shadow:none;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.panel-flat .panel-body  {
    border: 1px solid #dddddd;
}

.panel-flat .panel-heading {
    font-size: 1.6rem;
    font-weight: 400;
	color: var(--white-color);
    background: #2A2E43;
    padding:12px 16px 12px 16px;
    border-radius: 0px;
}

.panel-fancy-left-dark {
    border-radius: 5px 0 0 5px;
    border-right: #3CB448 8px solid;
    background-color: #485167;
    color: var(--white-color);
    box-shadow: 4px 4px 14px 0 rgba(0,0,0,0.5);
    /*height: 765px;*/
     padding: 2.8rem;
  }

.panel-fancy-right {
    box-sizing: border-box;
    border: 1px solid #E5E5E5;
    border-radius: 0 5px 5px 0;
    background-color: var(--white-color);
    box-shadow: 4px 4px 14px 0 rgba(0,0,0,0.5);
    /*height: 765px;*/
    padding: 2.8rem;
    color:#222222;
  }

.panel-info {
  border-radius: 5px;
  background-color: var(--info-background-color);
  box-shadow: none;
}

.panel-info > .panel-heading {
	color: var(--info-text-color);
	background-color: var(--info-background-color);
	border-color: var(--info-border-color);
}

.panel-success > .panel-heading {
	color: var(--success-text-color);
	background-color: var(--success-background-color);
	border-color: var(--success-border-color);
}

.panel-warning > .panel-heading {
	color: var(--warning-text-color);
	background-color: var(--warning-background-color);
	border-color: var(--warning-border-color);
}

.panel-danger > .panel-heading {
	color: var(--danger-text-color);
	background-color: var(--danger-background-color);
	border-color: var(--danger-border-color);
}

.panel-down-arrow {
  float:right;
}

.panel-body-instructions-grid {
  display:grid;
	grid-gap: 20px;
	grid-template-columns: [task] 50px [not-applicable] 50px [mark-as-complete] 50px [select] 50px [end];
  grid-template-rows: [single-item] minmax(35px,auto);
  align-items: start;
}

.panel-body-instructions-grid .btn-block {
	margin-top: 5px;
}

/* stop the help buttons in instructions from behaving like real buttons */
.panel-body-instructions-grid .btn:hover {
	pointer-events: none;
  cursor: pointer;
}

/* workflow user view */

#user-workflow-view .panel-heading {
	padding-top: 0px;
  padding-bottom: 0px;
}

#user-workflow-view .panel-body {
	padding-top: 0px;
}

/* workflow admin view */

#workflow-graph-svg {
	float: left;
}

#workflow-control-panel {
	float: left;
	margin-right: 10px;
  margin-bottom: 10px;
}

/* buttons */

.btn-lg.button-name, .btn-lg, .btn-group-lg > .btn, input.btn-lg {
	font-size: 2.0rem;
    margin-top: 5px;
    line-height: 2.6rem;
}

.button-edit {
    float:right;
}

.button-name {
    float:left;
}

.inside-tab-link-button {
	margin: 4px;
}

/* tables - also fix some crappy old tables with bad formatting */

table {
	background-color: var(--white-color);
    color: var(--text-color);
    /* don't do drop shadow on tables */
    /* box-shadow: 4px 4px 14px 0 rgba(0,0,0,0.5); */
    border-radius: 3px;
}

.list-table {
  margin-bottom: 5px;
}

.list-table tbody td, table tbody td {
  padding: 8px;
  border-collapse: separate !important;
  border-top: 1px solid #ddd;
  vertical-align: top;
}

#wf-case .list-table tbody td, table tbody td {
  /* padding: 2px;*/
}

.table > thead > tr > th, 
table > tbody > tr > th,
table > tr > th {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.8rem;
  background-color: #F4F6F9;
  border-top: 1px solid #ECEEEF;
  border-bottom: 1px solid #ECEEEF;
}

/* Date Types admin */
table > tbody > tr > th {
  padding-left: 7px;
  padding-right: 7px;
}

.table > tbody > tr > td,
table > tbody > tr > td,
table > tr > td {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6rem;
}

.table-responsive {
	padding: 0px;
  height: auto;
}

td, th, .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	padding-top: 11px;
  padding-bottom: 9px;
}

.table-striped > tbody > tr:nth-of-type(2n+1), .list-table > tbody > tr:nth-of-type(2n+1){
	background-color: #f9f9f9;
}

/* don't do drop shadow on tables already in dropshadow tabs - looks bad */
#tabcontent table, #tabcontent .table, table > table {
	box-shadow: none;
}

/* old admin pages using table layout for forms need styling to make them look like a form */
.admin-table-form tbody tr th, .admin-table-form th {
  color: var(--form-label-text-color);
  background-color: var(--white-color);
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 1.4rem;
  padding: 10px 20px;
  border-top: 0px;
  border-bottom: 0px;
  text-align: right;
}

.admin-table-form tbody tr td, .admin-table-form td {
  padding: 10px 20px;
  border-top: 0px;
}

/* override old incorrect quest display block style */
table.hidden {
	display: table !important;
}

.badge {
	font-size: 1.2rem;
}

/* datatables filters on table headings */
th.list-table .dropdown.form-control {
	padding-top: 5px;
}

.table > thead > tr > th.list-table {
	vertical-align: top;
}

/* hide message_keys_widget dummy grid element */
[id^="dummy_elem_"] {
	display: none;
}

/* jaspersoft themes overriding aims */
tr.info {
  float: none !important;
}

/* admin table layouts - hide the hidden layout tables */

table.hidden tr td, table.hidden tr th, table.table.hidden tr td, table.table.hidden tr th {
  border-top: none;
}

body.high-contrast table.hidden, body.high-contrast table.table.hidden {
	background: none;
}

table.table tr td, table.table tr th {
  border-top: 1px solid #ddd;
}

/* tabs */

#tabs-panel-stacked {
	float: left;
  grid-row: 1 / 6;
}

#tabs-panel-dropdown-container {
	padding-top: 0px;
	padding-bottom: 10px;
  display: none;
}

.forms-container, #tabcontent, .tabcontent {
	width: auto;
  padding: 10px;
  margin-bottom: 2rem;
}

.form-buttons {
	width: 100%;
	display: block;
	background:#E7EDF6;
	height: 49px;
	padding: 5px;
}

.nav-stacked {
	background-color: #F7F9FD;
  width: fit-content;
  box-shadow: -6px 6px 14px 0px rgba(0,0,0,0.5);
}

.nav-pills > li > a {
	border-radius: 0px;
	background-color: #F7F9FD;
	box-shadow: 0 1px 0 0 #B5C5EA;
  color: var(--tabs-link-color);
  font-family: Roboto;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.9rem;
  padding-top: 12px;
  padding-bottom: 17px;
  padding-left: 16px;
}

.nav-stacked > li {
	margin-right: 1px;
}

.nav-stacked > li.active {
	margin-right: 0px;
}

.nav-pills > li.active > a {
  font-size: 1.6rem;
	color: var(--text-color);
	background-color: #E7EDF6;
}

.nav-pills > li > a:hover, .nav-pills > li > a:focus {
  color: var(--text-color);
  /* Brighten by 10% */
  filter: brightness(1.1);
}

.nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  color: var(--text-color);
  background-color: #E7EDF6;
  /* Brighten by 10% */
  filter: brightness(1.1);
}

#tabcontent h2 {
  font-size: 2.0rem;
  font-weight: 500;
}

.comment-links {
	float: left;
	width: 100%;
	padding-bottom: 5px;
}

/* alerts */

.alert {
	margin-top: 10px;
	padding-top: 9px;
  padding-bottom: 13px;
	margin-bottom: 10px;
	border-radius: 4px;
}

/* added for something in "fix for workflow admin layout" commit - float breaks portal grid layout, removing again */
div.container .alert {
  /* float: left; */
  width: 100%;
}
/* also broke todays date in calendar #135915, resetting width again for this */
div.container .fc-view-container .alert {
  width: auto;
}

/* breaks grid layout on admin eg OpenACS Shell */
.form-internal p.text-danger {
	display: none;
}

/* PAGE SPECIFIC */

/* recover password, update password, Localization pages */

#register-recover-password .form-group, #acs-lang .form-group, #user-password-update .form-group {
  border: none;
}

/* APS */

.aps-grid-layout {
  display: grid;
  /*max-height: calc(100vh - 180px);*/
	grid-gap: 0px;
	grid-template-columns: [tabs] min-content [tabs-body] 3fr [column-gap] 10px [next-steps] minmax(400px, 1fr);
  grid-template-rows: min-content min-content min-content min-content min-content;
  /*grid-template-areas: "menu main gap actions";*/
}

.aps-grid-layout-original {
  display: grid;
  /*max-height: calc(100vh - 180px);*/
	grid-gap: 0px;
	grid-template-columns: [tabs] min-content [tabs-body] 3fr [column-gap] 10px [next-steps] minmax(400px, 1fr);
  grid-template-rows: min-content min-content min-content min-content min-content;
  /*grid-template-areas: "menu main gap actions";*/
}

#aps-tabs {
	margin-bottom: 20px;
}

#orphan-workflow-panel {
  /*grid-column: 1 / 5;*/
  /*grid-row: 1 / 2;*/
  background-color: #D1DAE7;
}

.aps-grid-layout #tabs-panel {
  grid-column: 1;
  grid-row: 1 / 4;
}

.aps-grid-layout-original #tabs-panel {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}

.aps-grid-layout #tabcontent, .aps-grid-layout .tabcontent {
  grid-column: 2;
  grid-row: 1 / 6;
}

.aps-grid-layout-original #tabcontent, .aps-grid-layout-original .tabcontent {
	grid-column: 1 / 3;
	grid-row: 2 / 6;
}

#column-gap {
  grid-column: 3;
  grid-row: 1 / 6;
}

.aps-grid-layout #aps-activities-panel {
  grid-column: 4;
  grid-row: 1 / 3;
}

.aps-grid-layout-original #aps-activities-panel {
	grid-column: 4;
	grid-row: 1 / 3;
}

.aps-grid-layout #aps-next-steps-panel {
	grid-column: 4;
	grid-row: 3 / 4;
}

.aps-grid-layout-original #aps-next-steps-panel {
	grid-column: 4;
	grid-row: 3 / 4;
}

.aps-grid-layout #aps-other-actions-panel {
	grid-column: 4;
	grid-row: 4 / 5;
}

.aps-grid-layout-original #aps-other-actions-panel {
	grid-column: 4;
	grid-row: 4 / 5;
}

.activities-grid-container {
	max-height: 50vh;
	overflow: auto;
}

/* move heading to above button */
#doneitems .activities-grid h6:nth-child(2), #notappitems .activities-grid h6:nth-child(2) {
  grid-column: 4;
}

#todoitems h4, #doneitems h4, #notappitems h4 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 21px;
  padding-top: 8px;
  padding-bottom: 11px;
  padding-left: 16px;
  border-radius: 3px;
}

#todoitems h4 {
  background-color: var(--todo-heading-color);
}

#doneitems h4 {
  background-color: var(--done-items-heading-color);
}

#notappitems h4 {
  background-color: var(--notapp-items-heading-color);
  box-shadow: 0 1px 0 0 var(--white-color);
}

.activities-grid {
  display: grid;
	grid-gap: 20px;
	grid-template-columns: [task] 1fr [not-applicable] 40px [mark-as-complete] 40px [select] 40px [end];
  grid-template-rows: [single-item] minmax(35px,auto);
  align-items: start;
  /*justify-items: left;*/
  border-bottom: 1px solid #ECEEEF;
  padding-bottom: 5px;
  padding-top: 10px;  
}

.activities-grid h6 {
  text-align:center;
}

.next-step-grid {
  display: grid;
	grid-gap: 20px;
	grid-template-columns: [task] 5fr [select] 50px [end];
  grid-template-rows: [single-item] minmax(35px,auto);
  align-items: start;
  /*justify-items: left;*/
  border-bottom: 1px solid #ECEEEF;
  padding-bottom: 5px;
  padding-top: 10px;  
}

.activities-grid .btn-sm, .panel-body-instructions-grid button, #next-steps .btn-sm, .next-step-grid .btn-sm {
  border-radius: 7px;
}

.activities-grid .task-label, .task-label-na-done {
  font-size: 1.4rem;
  font-weight: 400;
}

#full_description\.row {
  grid-column: 1 / 3;
  grid-row: 3/6;
}

.task-label-not-active {
  font-size: 1.4rem;
  font-weight: 400;
  padding-bottom: 10px;
}

.na-button {
  grid-column-start: not-applicable;
  grid-column-end: mark-as-complete;
}

.done-button {
  grid-column-start: mark-as-complete;
  grid-column-end: select;
}

.select-button, .redo-button {
  grid-column-start: select;
  grid-column-end: end;
}

.task-label-na-done {
  grid-column-start: task;
  grid-column-end: select;
}

.task-label, .task-label-na-done {
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#next-steps-info {
	float: left;
	width: 100%;
}

.next-steps-row {
	float: left;
	width: 100%;
  border-top: 1px solid #ECEEEF;
  padding-bottom: 10px;
  padding-top: 10px;
}

.next-steps-label {
  float:left;
  clear:both;
}

.next-steps-value {
  float: right;
}

.assignees {
	float: left;
	clear: both;
	width: 100%;
}

div.assignees div.single-assignee {
  float: left;
  padding: 3px;
}

div.alert a {
  font-weight:bold;
}

.alert-danger a {
	color: var(--danger-link-color);
}

.alert-warning a {
	color: var(--warning-link-color);
}

.alert-info a {
	color: var(--info-link-color);
}

.button-bar-right {
	display: flex;
	justify-content: right;
	width: 100%;
}

.button-bar-right a {
  margin-left: 6px;
  margin-right: 2px;
  font-size: 1.4rem;
  vertical-align: top;
}

#cancel-group {
  margin-right:5px;
  padding-right: 5px;
  border-right: 1px solid var(--white-color);
  display: inherit;
}

#cancel-application-button {
  margin-left: 5px;
  margin-right: 5px;
}

.boxed-user-message {
	margin-top: 10px;
	padding-top: 9px;
  padding-left: 9px;
  padding-right: 9px;
	padding-bottom: 13px;
	margin-bottom: 20px;
	border-radius: 4px;
	color: #235067;
	background-color: var(--info-background-color);
	border-color: var(--info-border-color);
}

/* chat */

.notification-counter .badge {
	transform: translateY(-70%);
	font-size: 1.4rem;
}


/* DASHBOARD */


#jasperreport6 {
  overflow:auto;
}

#panel-tasks {
  grid-column: span 2;
}

#dash-panels-container {
  width: 100%;
}

.external-schemes-button {
  padding-top: 0rem;
  padding-bottom: 2rem;
}

/*

#dash-panels-grid-not-used {
  display: grid;
	grid-gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  grid-template-rows: [single-item] minmax(35px,auto);
  align-items: start;
  grid-auto-flow: dense;
}

#dash-panels-grid > * {
  margin: 0 10px 10px 0;
}

#dash-panels-grid .panel {
	/*padding-left: 5px;
	padding-right: 5px;
  margin-right: 10px;
}

#panel-welcome-dark {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

#panel-workload {
  grid-column: 2 / 5;
  grid-row: 1 / 3;
}

#panel-tasks {
  grid-column: 1 / 2;
  grid-row: 2 / 6;
}

#panel-reports {
  grid-column: 2 / 5;
  grid-row: 3 / 6;
}

#panel-applications {
  grid-column: 1 / 5;
  grid-row: 6 / 7;
}

#panel-calendar {
  grid-column: 1 / 2;
  grid-row: 7 / 8;
}

#panel-reports2 {
  grid-column: 2 / 5;
  grid-row: 7 / 8;
}
 */

#panel-welcome-dark-int, #panel-welcome-dark-ext {
	border-radius: 5px 5px 5px 5px;
	background-color: #485167 !important;
	color: var(--white-color);
	box-shadow: 4px 4px 14px 0 rgba(0,0,0,0.5);
	/* height: 765px; */
	padding: 1.8rem;
}

#panel-external-info {
	border-radius: 5px 5px 5px 5px;
	background-color: var(--info-background-color) !important;
	color: var(--text-color);
	box-shadow: 4px 4px 14px 0 rgba(0,0,0,0.5);
	/* height: 765px; */
	padding: 1.8rem;
}

#panel-external-info ul {
  list-style: none
}

#panel-external-info li {
  padding-bottom: 8px;
}

#panel-external-info b {
  font-weight: 500;
}

#panel-external-info li::before {
	content: "•";
	color: #539D51;
	font-size: 36px;
	display: inline-block;
	margin-left: -0.6em;
	position: absolute;
}

#dash-panels-container .panel {
  background-color: var(--white-color);
}

#dash-panels-container .panel .panel-heading {
  padding-bottom: 8px;
}

#dash-panels-container .panel .panel-body {
  padding-top: 1px;
}

#dash-panels-container .panel .panel-body .panel-body {
  padding-top: 12px;
}

#dash-panels-container .panel h3 {
	margin-top: 4px;
  margin-right: 70px;
	/* white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden; */
}

#dash-panels-container .panel-flat {
	margin-top: 0.2rem;
	margin-bottom: 1rem;
}

#aims-shell {
  float:right;
}

/* fix for calendar popup being behind the pagination page numbers */
#dash-panels-container .pagination > .active > a {
	z-index: 0;
}

/* WORKFLOW USER */

#user-workflow-grid {
  display:grid;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
	grid-template-columns: repeat(auto-fit, minmax(min(50px, 100%), 1fr));
  grid-template-rows: [labels1] minmax(10px,auto) [labels2] minmax(10px,auto) [vertical-line] minmax(35px,auto) [icons] minmax(40px,auto) [end];
  grid-auto-flow: column;
  /*justify-content: space-between;*/
}

.workflow-user-icon-line {
  grid-row: 4;
  display: flex;
  align-items: center;
}

.workflow-user-help {
  float: left;
  clear: both;
  padding-bottom: 20px;
  padding-top: 10px;
}

#user-workflow {
  float: left;
  clear: both;
  width: 100%;
}

.workflow-user-help-position-icon {
  background-color: #0097ad;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  float:left;
  margin-right: 10px;
}

.workflow-user-help-position-text {
  float: left;
}

.workflow-user-help-varies-icon {
  width: 12px;
  height: 12px;
  float:left;
  margin-right: 10px;
  margin-left: 30px;
}

.workflow-user-help-varies-text {
  float: left;
}

.workflow-user-icon-background {
  background-color: var(--timeline-color-stage);
  width: 32px;
  height: 32px;
  border-radius: 16px;
}

.workflow-user-icon-background-started {
  background-color: var(--timeline-color-current-stage);
}

.workflow-user-icon {
  padding: 8px 8px;
  color: var(--white-color);
  font-size: 18px;
}

.workflow-user-help-icon {
	width: 12px;
	height: 12px;
	color: #3CB448;
	font-size: 12px;
}

.workflow-user-name {
  grid-row: 1 / 2;
  display: flex;
  flex-direction: column;
}

.workflow-user-name-odd {
  grid-row: 2 / 3;
  display: flex;
  flex-direction: column;
}

.workflow-user-name label, .workflow-user-name-odd label {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 16px;
  margin-bottom: 0px;
}

.workflow-user-name-label-done label {
  font-weight: 500;
}

.workflow-user-vertical-line {
  border-left: 1px solid #D5D5D5;
  margin-left: 15px;
  grid-row: span 2 / 4;
  flex-grow: 1;
}

.workflow-user-vertical-line-odd {
  border-left: 1px solid #D5D5D5;
  margin-left: 15px;
  grid-row: 3 / 4;
}

.workflow-user-horizontal-line {
  border-bottom: 1px solid #3CB448;
  flex-grow: 1;
}

/* template letters */

.htmlarea {
	border-style: inherit !important;
	border: none;
}

.htmlarea table {
	background-color: inherit;
}

.htmlarea .toolbar {
	border: none !important;
}

/*  SIZE RULES */

.container {
	width: 100%;
}

@media (min-width: 1701px) and (max-width: 1900px) {
  .container {
    width: 100%;
  }

  .action-buttons {
    grid-column: 1/-1;
  /* removing grid-row-start since it casued multiple submit action buttons to end up on top of each other */
  /* grid-row-start: 300; */
  }
}

@media (min-width: 1501px) and (max-width: 1700px) {
  .container {
    width: 100%;
  }

  .action-buttons {
    grid-column: 1/-1;
  /* removing grid-row-start since it casued multiple submit action buttons to end up on top of each other */
  /* grid-row-start: 300; */
  }
}

/* col-lg */
@media (min-width: 1201px) and (max-width: 1500px) {
  .container {
    width: 100%;
  }

  .fancy-container {
    width: 960px;
  }

  .action-buttons {
    grid-column: 1/-1;
  }

  .form-horizontal {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  }
}

/* col-md */
@media (min-width: 993px) and (max-width: 1200px) {
  .container {
    padding-left: 0rem;
    padding-right: 0rem;
  }
  
  .fancy-container {
    width: 100%;
  }

  .action-buttons {
    grid-column: 1/-1;
  }

  .form-horizontal {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  }
}

/* col-sm */
@media (min-width: 768px) and (max-width: 992px)  {
  .container {
    margin-right: 0rem;
    margin-left: 0rem;
    padding-left: 0rem;
    padding-right: 0rem;
    width:100%;
  }

  .slave-container {
    margin-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .slave-container-external {
    margin-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }


  
  .fancy-container {
    width: 100%;
  }
  
  .action-buttons {
    grid-column: 1/-1;
  }

  /* admin template-letters switch from 2 column layout grid back to 1 */
  form#letterform {
    grid-template-columns: 1fr;
  }

  .form-horizontal {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  }

  .aps-grid-layout-original #tabs-panel {
    grid-column: 1 / 5;
    grid-row: 1 / 2;
  }

  .aps-grid-layout #tabcontent, .aps-grid-layout .tabcontent {
    grid-column: 2 / 5;
    grid-row: 1 / 2;
  }

  .aps-grid-layout-original #tabcontent, .aps-grid-layout-original .tabcontent {
    grid-column: 2 / 5;
    grid-row: 2 / 3;
  }

  #column-gap {
    grid-column: 3;
    grid-row: 1 / 6;
  }

  .aps-grid-layout #aps-activities-panel {
    grid-column: 2 / 5;
    grid-row: 2 / 3;
  }

  .aps-grid-layout-original #aps-activities-panel {
    grid-column: 2 / 5;
    grid-row: 3 / 4;
  }

  .aps-grid-layout #aps-other-actions-panel {
    grid-column: 2;
    grid-row: 4 / 5;
  }

  .aps-grid-layout-original #aps-other-actions-panel {
    grid-column: 2;
    grid-row: 4 / 5;
  }

  div#tabs-panel-stacked, div#tabs-panel {
    display: block;
  }

}

/*
// Point where bootstrap collapses to mobile view
// iPad is at 768px - had to make sure there was no collapse when viewing on this
*/
/* col-ms */
@media (min-width: 481px) and (max-width: 767px) {
  .fancy-container-swapped {
    display: flex !important;
    flex-direction: column;
  }

  .container, .help-container {
    margin-right: 0rem;
    margin-left: 0rem;
    padding-left: 0rem;
    padding-right: 0rem;
    width:100%;
  }

  .forms-container, #tabcontent, .tabcontent {
    border-radius: 5px 5px 5px 5px;
  }

  .slave-container {
    margin-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .slave-container-external {
    margin-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #navbar-links a {
    padding: 0.6rem;
  }

  .jumbotron h1, .jumbotron .h1 {
    font-size: 2.8rem;
  }

  #external-jumbotron {
    padding-bottom: 0rem;
  }

  #external-jumbotron #page-title {
    padding-left: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .jumbotron h1, .jumbotron .h1 {
    font-size: 2.8rem;
  }

  .panel-fancy-left-dark {
    border-bottom: #3CB448 8px solid;
    border-right: none;
    margin-bottom: 0px;
    padding:1.8rem;
    border-radius: 5px 5px 0 0;
  }
  
  .panel-fancy-right {
    padding:1.8rem;
    order: 2;
    border-radius: 0 0 5px 5px;
  }
  .fancy-container {
    width: 100%;
    display:block;
  }

  .action-buttons {
    grid-column: 1/-1;
  }

  /* admin template-letters switch from 2 column layout grid back to 1 */
  form#letterform {
    grid-template-columns: 1fr;
  }

  .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    max-height: none;
  }

  .navbar-nav {
    padding-right: 0px;
  }

  .nav {
    display: inline-block;
  }

  .nav > li.navbar-icon-link {
    display: inline-block;
  }

  .navbar-nav > li > a {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  
  .navbar-inverse .dropdown-header {
    font-size: 1.3rem;
  }

  .navbar-default .dropdown-header {
    font-size: 1.3rem;
  }

  .navbar-form {
    padding: 0px 0px;
    margin-right: 0px;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-top: none;
    border-bottom: none;
  }
  
  #nav-user-menu, #navbar-chat, #navbar-welcome-portrait {
    display: none;
  }

  #navbar-welcome-portrait-mobile {
    position: fixed;
    top: 100px;
    right: 10px;
  }

  #navbar-chat-mobile {
    position: fixed;
    top: 160px;
    right: 10px;
  }

  #nav-mobile-links {
    display: block;
  }

  .navbar-right {
    float: right;
  }

  .nav-stacked {
    box-shadow: none;
  }

  .form-horizontal {
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  }

  #tabs-panel-dropdown-container {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    display: block;
  }

  .aps-grid-layout #tabcontent, .aps-grid-layout .tabcontent, .aps-grid-layout-original #tabcontent, .aps-grid-layout-original .tabcontent {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
  }

  #column-gap {
    grid-column: 3;
    grid-row: 1 / 6;
  }

  .aps-grid-layout #aps-activities-panel, .aps-grid-layout-original #aps-activities-panel {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
  }

  .aps-grid-layout #aps-next-steps-panel, .aps-grid-layout-original #aps-next-steps-panel {
    grid-column: 1 / -1;
    grid-row: 4 / 5;
  }

  .aps-grid-layout #aps-other-actions-panel, .aps-grid-layout-original #aps-other-actions-panel {
    grid-column: 1 / -1;
    grid-row: 5 / 6;
  }

  div#tabs-panel-stacked, div#tabs-panel {
    display: none;
  }

  /* override datatables trying to center all headings on mobile */
  div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_info {
    text-align: left;
    margin: 2px;
  }
  div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_paginate {
    text-align: right;
    margin: 2px;
  }
}

/* col-xs */
@media (max-width: 480px) {
  .fancy-container-swapped {
    display: flex !important;
    flex-direction: column;
  }

  .container, .help-container {
    margin-right: 0rem;
    margin-left: 0rem;
    padding-left: 0rem;
    padding-right: 0rem;
    width:100%;
  }

  .forms-container, #tabcontent, .tabcontent {
    border-radius: 5px 5px 5px 5px;
  }

  .slave-container {
    margin-top: 1rem;
    padding-left: 3px;
    padding-right: 3px;
  }

  .container-fluid {
    padding-right: 0px;
    padding-left: 6px;
  }

  .slave-container-external {
    margin-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  
  #navbar-links a {
    padding: 0.5rem;
  }

  .jumbotron h1, .jumbotron .h1 {
    font-size: 2.8rem;
  }

  #external-jumbotron {
    padding-bottom: 0rem;
  }

  #external-jumbotron #page-title {
    padding-left: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .jumbotron h1, .jumbotron .h1 {
    font-size: 2.8rem;
  }

  .panel-fancy-left-dark {
    border-bottom: #3CB448 8px solid;
    border-right: none;
    margin-bottom: 0px;
    padding:1.8rem;
    border-radius: 5px 5px 0 0;
  }
  
  .panel-fancy-right {

    padding:1.8rem;
    order: 2;
    border-radius: 0 0 5px 5px;
  }

  .fancy-container {
    width: 100%;
    display:block;
  }

  .action-buttons {
    grid-column: 1/-1;
  }
  
  /* admin template-letters switch from 2 column layout grid back to 1 */
  form#letterform {
    grid-template-columns: 1fr;
  }

  .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    max-height: none;
  }

  .navbar-nav {
    padding-right: 0px;
    margin: auto;
    padding-bottom: 10px;
  }

  .navbar-nav > li > a {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .navbar-inverse .dropdown-header {
    font-size: 1.3rem;
  }

  .navbar-default .dropdown-header {
    font-size: 1.3rem;
  }

  #nav-user-menu, #navbar-chat, #navbar-welcome-portrait {
    display: none;
  }

  #navbar-welcome-portrait-mobile {
    position: fixed;
    top: 100px;
    right: 10px;
  }

  #navbar-chat-mobile {
    position: fixed;
    top: 160px;
    right: 10px;
  }

  #nav-mobile-links {
    display: block;
  }

  .nav {
    display: inline-block;
  }

  .nav > li.navbar-icon-link {
    display: inline-block;
  }

  .navbar-form {
    padding: 0px 0px;
    margin-right: 0px;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-top: none;
    border-bottom: none;
  }

  .navbar-right {
    float: right;
  }

  .nav-stacked {
    box-shadow: none;
  }

  .form-horizontal {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  }

  #tabs-panel-dropdown-container {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    display: block;
  }

  .aps-grid-layout #tabcontent, .aps-grid-layout .tabcontent, .aps-grid-layout-original #tabcontent, .aps-grid-layout-original .tabcontent {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
  }

  .aps-grid-layout #aps-activities-panel, .aps-grid-layout-original #aps-activities-panel {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
  }

  .aps-grid-layout #aps-next-steps-panel, .aps-grid-layout-original #aps-next-steps-panel {
    grid-column: 1 / -1;
    grid-row: 4 / 5;
  }

  .aps-grid-layout #aps-other-actions-panel, .aps-grid-layout-original #aps-other-actions-panel {
    grid-column: 1 / -1;
    grid-row: 5 / 6;
  }
  
  div#tabs-panel-stacked, div#tabs-panel {
    display: none;
  }

  /* override datatables trying to center all headings on mobile */
  div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_info {
    text-align: left;
    margin: 2px;
  }
  div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_paginate {
    text-align: right;
    margin: 2px;
  }

}


/* admin */

#showParamsAndPermissions {
	position: absolute;
	bottom: 61px;
	width: 100%;
	height: 40px;
	/* background-color: #f5f5f5; */
  cursor: pointer;
  float:left;
  display: flex;
  align-items: center;
  justify-content: center;
}

#showParams {
  float: left;
}

#showPermissions {
  float: left;
}

#thisPageParameters, #thisPageMasterParameters, #thisPagePermissions, #thisPageMasterPermissions {
  z-index: 2000;
}

.footer {
	background-color: transparent;
}

body.high-contrast #thisPageParameters, body.high-contrast #thisPageMasterParameters, body.high-contrast #thisPagePermissions, body.high-contrast #thisPageMasterPermissions {
	background-color: var(--dark-background-color);
}

/* bug in ancient tooltips code */
.tooltip-fin-amount-notes {
	display: none;
}

/*
    DEMO STYLE
*/

/* removing this transition effect as it causes horrible delay/ghosting on dropdowns in dark theme */
/*
a,
a:hover,
a:focus {
  transition: all 0.3s;
}
 */

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
  #pagecontent {
    padding-left: 0px;
  }

  .jumbotron .container {
    padding-left: 0px;
  }

  .container .jumbotron {
    padding-left: 0px;
    padding-bottom: 0px;
    border-radius: 0px 0px 0px 0px;
  }

  #page-title {
    padding-left: 5rem;
  }

  #quick_search_bar_id {
    width: 100%;
    height:30px;
    border:1px solid #353D50;
    text-align: left;
    border-radius: 4px 0 0 4px;
    background:#384053;
    font-size: 1.2rem;
    color:#7F8491;
    padding-left:0.8rem;
    border-right:0px;
  }

  #vuequicksearch .quicksearch {
    color:#7F8491;
  }

  /* side menus */
  #sidebar ul ul a {
    font-size: 1.3rem !important;
    padding-left: 30px !important;
    background: #22273E;
  }

  #sidebar ul ul a {
    font-size: 1.3rem !important;
    padding-left: 30px !important;
  }

  #sidebar ul ul#quick_search_results a, #sidebar ul ul a.qb-results {
    background: var(--white-color);
    color: var(--text-color);
    padding-left: 11px !important;
  }

  #sidebar ul ul#quick_search_results a:hover, #sidebar ul ul a.qb-results:hover {
    background: var(--background-color-inverted);
    color: var(--white-color);
    transition: none;
  }

  #vuequicksearch .input-group-addon {
    color: #555;
    text-align: center;
    background-color: #384053;
    border: 1px solid #353D50;
    border-left: 0px;
  }

  .wrapper {
    display: flex;
    align-items: stretch;
  }

  .developer-support-adp-box-off .wrapper {
    width: 100%;
  }

  #sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #22273E;
    color: var(--white-color);
    transition: all 0.1s;
    box-shadow: 4px 4px 14px 0 rgba(0,0,0,0.5);
    border-radius: 0px 0px 5px 0px;
  }

  .sidebarmenu {
    font-size: 1.3rem;
    padding-left: 0px;
  }

  #sidebarCollapse {
    height: 80px;
    width: 3.6rem;
    background-color: #22273E;
    margin-top: 0px;
    border-radius: 0px;
    border: none;
    margin-left: 0px;
    margin-bottom: 0px;
    float:left;
    box-shadow: 4px 4px 14px 0 rgba(0,0,0,0.5);
    border-radius: 0px 5px 5px 0px;
  }

  #sidebar a.menu-item {
    color: #58B455 !important;
  }

  #sidebar i.menu-icon {
    color:#999999 !important;
    padding-right: 1.0rem;
  }


  #sidebar a.menu-sub-item,
  #sidebar a.menu-sub-item:hover,
  #sidebar a.menu-sub-item:focus {
    color: #ACB5BD !important;
  }

  #sidebar ul li a.menu-item:hover .sidebar-menu-icon, #sidebar ul li a.menu-item:focus .sidebar-menu-icon {
    background: var(--white-color) !important;
  }

  #sidebar ul li a.menu-item:hover .sidebar-menu-icon-up-down, #sidebar ul li a.menu-item:focus .sidebar-menu-icon-up-down {
    display: block;
  }

  #sidebar ul li.active > a,
  #sidebar a[aria-expanded="true"] .sidebar-menu-icon-up-down {
    display: block;
  }

  #sidebar ul li a.menu-sub-item:hover, #sidebar ul li a.menu-sub-item:focus {
    color: var(--white-color) !important;
    background-color: #2b314d !important;
  }

  /* I added for some reason - removing - breaks dropdown dividers */
  li.divider {
    /* display: none;*/
  }

  #sidebar.active {
    margin-left: -250px;
  }

  #sidebar .sidebar-header {
    padding: 20px;
    background: #22273E;
  }

  #sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
  }

  #sidebar ul.components ul {
    list-style: none;
  }

  #sidebar ul p {
    color: var(--white-color);
    padding: 10px;
  }

  #sidebar ul li a {
    padding: 10px;
    font-size: 1.3rem;
    display: block;
    font-weight:500;
  }

  #sidebar ul li a:hover, #sidebar ul li a:focus {
    color: var(--white-color);
  }

  #sidebar ul li.active > a,
  #sidebar a[aria-expanded="true"] {
    color: var(--white-color);
    background: #22273E;
  }

  #sidebar a[data-toggle="collapse"] {
    position: relative;
  }

/*
  #sidebar a[aria-expanded="false"]::before,
  #sidebar a[aria-expanded="true"]::before {
    content: '\e259';
    display: block;
    position: absolute;
    right: 20px;
    font-family: 'Glyphicons Halflings';
    font-size: 1.3rem;
  }
*/

  .sidebar-menu-icon-up-down {
    display: none;
    position: absolute;
    right: 20px;
    top: 6px;
    background-color: var(--icon-color);
    padding: 8px;
    border-radius: 7px;
  }

  .icon-dashboard {
    mask: url(/images/xwerx/menu-dashboard.svg);
  }
  .icon-contacts {
    mask: url(/images/xwerx/menu-contacts.svg);
  }
  .icon-admin {
    mask: url(/images/xwerx/menu-admin.svg);
  }
  .icon-application {
    mask: url(/images/xwerx/menu-application.svg);
  }
  .icon-search {
    mask: url(/images/xwerx/menu-search.svg);
  }
  .icon-meetings {
    mask: url(/images/xwerx/menu-meetings.svg);
  }
  .icon-print {
    mask: url(/images/xwerx/menu-print.svg);
  }
  .icon-reports {
    mask: url(/images/xwerx/menu-reporting.svg);
  }

  .sidebar-menu-icon {
    display: inline-block;
    margin-right: 8px;
    margin-top: 5px;
    width: 16px;
    height: 16px;
    background: #ACB5BD;
    mask-size: cover;
  }

/*
  #sidebar a[aria-expanded="true"]::before {
    content: '\e260';
  }
*/


  ul.CTAs {
    padding: 20px;
  }

  ul.CTAs a {
    text-align: center;
    font-size: 1.3rem !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
  }

  a.download {
    background: var(--white-color);
    color: #7386D5;
  }

  a.article,
  a.article:hover {
    background: #22273E !important;
    color: var(--white-color) !important;
  }

  /* ---------------------------------------------------
  We will need slightly different behavior for the sidebar on the smaller screens. 
  Instead of appearing by default, it'll be hidden and appear only after clicking the toggle button.
  Like this, we will save valuable space for your content and show the navigation to the user only when needed.
  Basically, what we need to do here is to reverse the .active style:
  ----------------------------------------------------- */
  @media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
  }

  /* ---------------------------------------------------
      CONTENT STYLE
  ----------------------------------------------------- */

  #content {
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
  }

  #content p a {
    color: var(--white-color)
  }

  /* ---------------------------------------------------
      MEDIAQUERIES
  ----------------------------------------------------- */

  @media (max-width: 768px) {
    #sidebar {
      margin-left: -250px;
    }
    #sidebar.active {
      margin-left: 0;
    }
    #sidebarCollapse span {
      display: none;
    }

  }

/* ---------------------------------------------------
   END SIDEBAR STYLE
----------------------------------------------------- */



/* some extra W3C AA fixes */

.alert-info {
	color: var(--info-color);
	background-color: var(--info-background-color);
	border-color: var(--info-border-color);
}

.alert-success {
	color: var(--success-color);
	background-color: var(--success-background-color);
	border-color: var(--success-border-color);
}

.alert-warning {
	color: var(--warning-color);
	background-color: var(--warning-background-color);
	border-color: var(--warning-border-color);
}

.alert-danger {
	color: var(--danger-color);
	background-color: var(--danger-background-color);
	border-color: var(--danger-border-color);
}

.navbar-default .navbar-text {
	color: var(--navbar-text-color);
}

.navbar-default .navbar-nav > li > a {
	color: var(--navbar-text-color);
}

.table > thead > tr > td.danger, .table > tbody > tr > td.danger, .table > tfoot > tr > td.danger, .table > thead > tr > th.danger, .table > tbody > tr > th.danger, .table > tfoot > tr > th.danger, .table > thead > tr.danger > td, .table > tbody > tr.danger > td, .table > tfoot > tr.danger > td, .table > thead > tr.danger > th, .table > tbody > tr.danger > th, .table > tfoot > tr.danger > th {
	background-color: #ffecec;
}

/* -- might be dangerous to do global override here! */
a {
	color: var(--link-color);
}

.text-muted {
	color: var(--muted-text-color);
}

.text-primary {
	color: var(--primary-text-color);
}

.text-success {
	color: var(--success-text-color);
}

.text-info {
	color: var(--info-text-color);
}

.text-warning {
	color: var(--warning-text-color);
}

.text-danger {
	color: var(--danger-text-color);
}

.btn-default {
	color: var(--text-color);
	background-color: var(--default-button-color);
	border-color: var(--default-button-border-color);
}

.btn-primary {
	color: var(--white-color);
	background-color: var(--primary-button-color);
	border-color: var(--primary-button-border-color);
}

.btn-warning {
	color: var(--white-color);
	background-color: var(--warning-button-color);
	border-color: var(--warning-button-border-color);
}

.btn-success {
	color: var(--white-color);
	background-color: var(--success-button-color);
	border-color: var(--success-button-border-color);
}

.btn-danger {
	color: var(--white-color);
	background-color: var(--danger-button-color);
	border-color: var(--danger-button-border-color);
}

.btn-info {
	color: var(--white-color);
	background-color: var(--info-button-color);
	border-color: var(--info-button-border-color);
}

#developer-toolbar td a.on {
	background-color: #737373;
}

body.high-contrast #developer-toolbar td a.on {
	background-color: #eaeaea;
}

body.high-contrast #instructions-heading a {
	color: var(--white-color) !important;
}

.close {
	opacity: .9;
}

.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
	color: #727272;
}

/* fix weird bug where small pagination coming back as 2em from bootstrap styles */
.pagination-sm > li > a, .pagination-sm > li > span {
	font-size: 12px;
}

/* WCG color failures light mode */

.fc-day-top.fc-other-month {
	opacity: unset;
}

h1 small, 
h2 small {
	color: var(--sub-header-color);
}

/* NEW DARKMODE */

:root.high-contrast {
  --background-color: #a8a8a8;
  --dark-background-color: #1a202c;
  --dark-background-color-inverted: #e5dfd3;
  --panel-background-color: #2d3848;
  --level-four-color: #3A4556;
  --level-four-inverted-color: #c5b9a9;
  --tabs-background-color: var(--panel-background-color);
  --tabs-smartforms-background-color: #11141a;
  --tabs-smartforms-background-hover-color: #1b2029;
  --dark-navbar-background-color: #12161f;

  --table-background-color: #4a5568;

  --link-color: #8BB8DF;
  --dark-tabs-link-color: #89A4E1;
  --link-color-inverted: #452F0C;

  --navbar-grey-color: #a8a8a8;

  --dark-info-color: #A2DBEC;
  --dark-success-color: #BDE0BD;
  --dark-warning-color: #F7CF97;
  --dark-danger-color: #F4C8C8;

  --dark-info-color-inverted: #5c2312;
  --dark-success-color-inverted: #411e41;
  --dark-warning-color-inverted: #072f67;
  --dark-danger-color-inverted: #0a3636;

  --dark-info-link-color: var(--dark-info-color);
  --dark-success-link-color: var(--dark-success-color);
  --dark-warning-link-color: var(--dark-warning-color);
  --dark-danger-link-color: var(--dark-danger-color);

  --dark-info-background-color: var(--dark-info-button-color);
  --dark-success-background-color: var(--dark-success-button-color);
  --dark-warning-background-color: var(--dark-warning-button-color);
  --dark-danger-background-color: var(--dark-danger-button-color);  

  --dark-info-background-color-inverted: var(--dark-info-inverted-button-color);
  --dark-success-background-color-inverted: var(--dark-success-inverted-button-color);
  --dark-warning-background-color-inverted: var(--dark-warning-inverted-button-color);
  --dark-danger-background-color-inverted: var(--dark-danger-inverted-button-color);

  --dark-info-border-color: #155366;
  --dark-success-border-color: #245624;
  --dark-warning-border-color: #684008;
  --dark-danger-border-color: #8A221E;

  --dark-info-border-color-inverted: #eaab99;
  --dark-success-border-color-inverted: #dba9db;
  --dark-warning-border-color-inverted: #97bff7;
  --dark-danger-border-color-inverted: #74dde1;

  --dark-primary-text-color: #6FA7D8;
  --dark-info-text-color: #2BA5CA;
  --dark-success-text-color: #48AD48;
  --dark-warning-text-color: #d58512;
  --dark-danger-text-color: #E3817D;

  --dark-danger-inverted-text-color: #218789;

  --dark-primary-button-color: #245580;
  --dark-info-button-color: #196076;
  --dark-success-button-color: #2A652A;
  --dark-warning-button-color: #7E4E0C;
  --dark-danger-button-color: #A32824;

  --dark-primary-inverted-button-color: #dba97e;
  --dark-info-inverted-button-color: #e69f89;
  --dark-success-inverted-button-color: #d599d5;
  --dark-warning-inverted-button-color: #81b1f3;
  --dark-danger-inverted-button-color: #5bd7db;

  --dark-panel-info-color: var(--dark-info-button-color);
  --dark-panel-success-color: var(--dark-success-button-color);
  --dark-panel-warning-color: var(--dark-warning-button-color);
  --dark-panel-danger-color: var(--dark-danger-button-color);


  --table-background-inverted-color: #c5b9a9;
  --table-background-inverted-stripe-color: #c7bdad;
  --table-background-inverted-link-color: var(--link-color-inverted);

  --table-background-inverted-success-color: #d0a9df;
  --table-background-inverted-success-stripe-color: #CCA2DD;
  --table-background-inverted-success-link-color: var(--link-color-inverted);

  --table-background-inverted-info-color: #e4a98b;
  --table-background-inverted-info-stripe-color: #DE9673;
  --table-background-inverted-info-link-color:  var(--link-color-inverted);

  --table-background-inverted-warning-color: #9fb1f9;
  --table-background-inverted-warning-stripe-color: #8BA1F9;
  --table-background-inverted-warning-link-color:  var(--link-color-inverted);

  --table-background-inverted-danger-color: #71cbcb;
  --table-background-inverted-danger-stripe-color: #5BC2C2;
  --table-background-inverted-danger-link-color: var(--link-color-inverted);

  /* don't have text full #FFF white in dark mode - should be less bright on dark background */
  --text-color: #d8d8d8;
  --text-color-inverted: #1a202c;
  --dark-text-color: #1a202c;

  --dark-calendar-background-color: #ccc;

  --panel-heading: #256ed9ab;
  --panel-body-border: rgb(100, 100, 100);

  --dark-todo-heading-color: var(--dark-primary-button-color);
  --dark-done-items-heading-color: var(--dark-success-button-color);
  --dark-notapp-items-heading-color: #353535;

  --dark-form-widgets-color: var(--text-color);
  --dark-form-widgets-color-inverted: var(--text-color-inverted);
  --dark-form-widgets-background-color: var(--dark-background-color);
  --dark-form-widgets-background-color-inverted: var(--dark-background-color-inverted);
  --dark-form-widgets-border-color: #595959;

  --form-label-text-color: #B3B3B3;
  --form-border-color: var(--black-color);

  --smartform-admin-edit-panel-color-inverted: #CABEAF;

  --dark-timeline-color-current-stage: #00B1CC;
  --dark-timeline-color-stage: #5FB45F;

  --text-superscript-inverted: #215658;


  /* filter: brightness(0.5);  */
  color-scheme: light dark;
}

body.high-contrast button,
body.high-contrast input,
body.high-contrast optgroup,
body.high-contrast select,
body.high-contrast textarea {
  color: var(--text-color);
  background: var(--dark-background-color);
}

body.high-contrast {
  background-color: var(--dark-background-color);
  background-image: none;
  color: var(--text-color);
}

body.high-contrast a {
  color: var(--link-color);
}

body.high-contrast a.dropdown-toggle {
  color: var(--text-color);
}

body.high-contrast .bodytext-color-white {
	color: var(--text-color);
}

body.high-contrast img {
  -webkit-filter: brightness(60%) !important;
  filter: brightness(60%) !important;
  /* filter: invert(100%) !important; */
}

body.high-contrast table tbody img {
  -webkit-filter: invert(100%) !important;
  filter: invert(100%) !important;
}

/* old admin pages using table layout for forms need styling to make them look like a form */
body.high-contrast .admin-table-form tbody tr th, body.high-contrast .admin-table-form th {
  color: var(--text-color-inverted);
  background-color: var(--table-background-inverted-color);
}

/* old admin pages using table layout for forms - nested tables */
body.high-contrast .admin-table-form tbody tr td table, body.high-contrast tr td table, body.high-contrast tr td table table {
  background-color: inherit;
  color: var(--text-color-inverted);
}

body.high-contrast .admin-table-form thead th, body.high-contrast tr td table th, body.high-contrast tr td table table th, body.high-contrast table .help-block, body.high-contrast tr td table .help-block {
	color: var(--text-color-inverted) !important;
}

body.high-contrast .navbar-default .navbar-nav > li > a {
	color: var(--navbar-grey-color);
}

body.high-contrast .navbar-default .navbar-link, body.high-contrast .navbar-default .navbar-text {
	color: var(--navbar-grey-color);
}

body.high-contrast .btn-link {
	color: var(--link-color);
}

body.high-contrast .icon {
  -webkit-filter: invert(100%) !important;
  filter: invert(100%) !important;
}

body.high-contrast .thumbnail .caption {
	color: var(--text-color);
}

body.high-contrast .jasper-report *, body.high-contrast .dashboardCanvas {
  /*-webkit-filter: invert(97%) !important;
  filter: invert(97%) !important;*/
}

body.high-contrast .navbar-default {
  background-color: var(--dark-navbar-background-color);
}

body.high-contrast .navbar-inverse {
	background-color: var(--dark-navbar-background-color);
	border: none;
}

body.high-contrast #internal-jumbotron, body.high-contrast #external-jumbotron {
  background-color: var(--dark-background-color);
}

body.high-contrast #internal-jumbotron #page-title, 
body.high-contrast #external-jumbotron #page-title, 
body.high-contrast #internal-jumbotron #sub-title, 
body.high-contrast #external-jumbotron #sub-title {
  color: var(--text-color);
}

body.high-contrast .panel {
  background-color: var(--panel-background-color);
  /*backdrop-filter: brightness(140%);*/
}

body.high-contrast .panel-info {
	/*background-color: var(--dark-panel-info-color);*/
  border: none;
}

body.high-contrast .panel-success {
	/*background-color: var(--dark-panel-success-color);*/
  border: none;
}

body.high-contrast .panel-warning {
	/*background-color: var(--dark-panel-warning-color);*/
  border: none;
}

body.high-contrast .panel-danger {
	/*background-color: var(--dark-panel-danger-color);*/
  border: none;
}


body.high-contrast .panel-info > .panel-heading {
	color: var(--dark-info-text-color);
	background-color: var(--dark-info-background-color);
	border-color: var(--dark-info-border-color);
}

body.high-contrast .panel-success > .panel-heading {
	color: var(--dark-success-text-color);
	background-color: var(--dark-success-background-color);
	border-color: var(--dark-success-border-color);
}

body.high-contrast .panel-warning > .panel-heading {
	color: var(--dark-warning-text-color);
	background-color: var(--dark-warning-background-color);
	border-color: var(--dark-warning-border-color);
}

body.high-contrast .panel-danger > .panel-heading {
	color: var(--dark-danger-text-color);
	background-color: var(--dark-danger-background-color);
	border-color: var(--dark-danger-border-color);
}


body.high-contrast #dash-panels-container .panel {
	background-color: var(--panel-background-color);
}

body.high-contrast .panel-default > .panel-heading {
	color: var(--text-color);
	background-color: var(--panel-background-color);
}

body.high-contrast .panel-default {
	border-color: var(--panel-background-color);
}

body.high-contrast .panel-flat .panel-heading {
	color: var(--text-color);
	background: var(--panel-heading);
}

body.high-contrast .panel-flat .panel-body {
	border: 1px solid var(--panel-body-border);
}


/* If the browser is unaware of `prefers-color-scheme` */
body.high-contrast select,
body.high-contrast input,
body.high-contrast button,
body.high-contrast option,
body.high-contrast body,
body.high-contrast div,
body.high-contrast nav,
body.high-contrast ul {
  
  /*color: var(--text-color) !important;*/
  /*background-color: var(--dark-background-color)  !important;*/
}

/* Else, use `unset` (https://developer.mozilla.org/en-US/docs/Web/CSS/unset)
 * which resets a property to its inherited value if it inherits from its parent,
 * and to its initial value if not. Here, it inherits
 * `--dark-background-color` and `--text-color`.

@media (prefers-color-scheme: dark) {
  select,
  input,
  button,
  option {
    color: unset;
    background-color: unset;
  }
}
 */

body.high-contrast .navbar-default .dropdown-header {
  color: var(--navbar-text-color) !important;
}

body.high-contrast .navbar-inverse .dropdown-header {
  color: var(--navbar-text-color) !important;
}

body.high-contrast #sidebarCollapse, body.high-contrast button#sidebarCollapse .fa {
	background-color: #22273E !important;
  color: var(--text-color) !important;
}

body.high-contrast #panel-how-to-apply {
	background-color: #A6E1FF;
}

body.high-contrast #panel-how-to-apply * {
	color: var(--dark-text-color) !important;
}

body.high-contrast #panel-summary a {
	color: #CCCCFF !important;
}

/* Jasper reports text and fill too light - match href links color */
body.high-contrast svg tspan {
  color: var(--text-color-inverted);
  fill: var(--text-color-inverted);
}



/* RESTORE ORIGINAL HIGH CONTRAST SETTINGS FROM QUEST.CSS WITH MODIFICATIONS TO USE VARIABLES /*

/* highlight invalid number inputs in smartforms in high contrast - have to use W3C compliant version of red here */
body.high-contrast .data-type-number:invalid, body.high-contrast .data-type-currency:invalid, body.high-contrast .data-type-integer:invalid {
	color: #ff6464 !important;
}


body.high-contrast #tasktotal * {
	background-color: var(--background-color) !important;
	color: var(--black-color) !important;
}

body.high-contrast {
  border-bottom: 70px solid var(--black-color);
}

body.high-contrast, body.high-contrast * {
	/* background-color: var(--dark-background-color); */
	background-image: none;
	/* color: var(--text-color) !important; */
}


body.high-contrast h1, body.high-contrast h2, body.high-contrast h3, body.high-contrast h4, body.high-contrast h5, body.high-contrast h6 {
	color: var(--text-color) !important;
}

body.high-contrast table h1, body.high-contrast table h2, body.high-contrast table h3, body.high-contrast table h4, body.high-contrast table h5, body.high-contrast table h6 {
	color: var(--text-color-inverted) !important;
}

body.high-contrast .alert, body.high-contrast .alert ul, body.high-contrast .alert ul li, body.high-contrast .alert ul li span, body.high-contrast .alert strong, 
body.high-contrast div#vuequicksearch div div ul.nav.navbar-nav.navbar-right li.dropdown.open ul#quick_search_results.dropdown-menu li a.qb-results span,
body.high-contrast div#vuequicksearch div div ul.nav.navbar-nav.navbar-right li.dropdown.open ul#quick_search_results.dropdown-menu li a.qb-results span i {
    /* color: var(--black-color) !important; */
    /* background: var(--background-color) !important; */
}

body.high-contrast .bg-primary {
  color: var(--text-color) !important;
  background: var(--dark-primary-button-color) !important;
}

body.high-contrast table .bg-primary {
  color: var(--text-color) !important;
  background: var(--dark-primary-inverted-button-color) !important;
}

body.high-contrast .bg-success {
  color: var(--text-color) !important;
  background: var(--dark-success-button-color) !important;
}

body.high-contrast table .bg-success {
  color: var(--text-color) !important;
  background: var(--dark-success-inverted-button-color) !important;
}

body.high-contrast .bg-info {
  color: var(--text-color) !important;
  background: var(--dark-primary-button-color) !important;
}

body.high-contrast table .bg-info {
  color: var(--text-color) !important;
  background: var(--dark-primary-inverted-button-color) !important;
}

body.high-contrast .bg-warning {
  color: var(--text-color) !important;
  background: var(--dark-warning-button-color) !important;
}

body.high-contrast table .bg-warning {
  color: var(--text-color) !important;
  background: var(--dark-warning-inverted-button-color) !important;
}

body.high-contrast .bg-danger {
  color: var(--text-color) !important;
  background: var(--dark-danger-button-color) !important;
}

body.high-contrast table .bg-danger {
  color: var(--text-color) !important;
  background: var(--dark-danger-inverted-button-color) !important;
}

body.high-contrast table .help-block {
  color: var(--text-color-inverted) !important;
}

body.high-contrast table .superscript {
  color: var(--text-superscript-inverted) !important;
}

body.high-contrast .alert {
  border-width: 1px;
}

body.high-contrast .alert-info {
	color: var(--dark-info-color);
	background-color: var(--dark-info-background-color);
	border-color: var(--dark-info-border-color);
}

body.high-contrast .alert-success {
	color: var(--dark-success-color);
	background-color: var(--dark-success-background-color);
	border-color: var(--dark-success-border-color);
}

body.high-contrast .alert-warning {
	color: var(--dark-warning-color);
	background-color: var(--dark-warning-background-color);
	border-color: var(--dark-warning-border-color);
}

body.high-contrast .alert-danger {
	color: var(--dark-danger-color);
	background-color: var(--dark-danger-background-color);
	border-color: var(--dark-danger-border-color);
}


/* inverted table alerts colours back again */
body.high-contrast table .alert-info {
	color: var(--dark-info-color-inverted);
	background-color: var(--dark-info-background-color-inverted);
	border-color: var(--dark-info-border-color-inverted);
}

body.high-contrast table .alert-success {
	color: var(--dark-success-color-inverted);
	background-color: var(--dark-success-background-color-inverted);
	border-color: var(--dark-success-border-color-inverted);
}

body.high-contrast table .alert-warning {
	color: var(--dark-warning-color-inverted);
	background-color: var(--dark-warning-background-color-inverted);
	border-color: var(--dark-warning-border-color-inverted);
}

body.high-contrast table .alert-danger {
	color: var(--dark-danger-color-inverted);
	background-color: var(--dark-danger-background-color-inverted);
	border-color: var(--dark-danger-border-color-inverted);
}


body.high-contrast .alert-success a {
  color: var(--dark-success-link-color) !important;
}

body.high-contrast .alert-info a {
  color: var(--dark-info-link-color) !important;
}

body.high-contrast .alert-warning a {
  color: var(--dark-warning-link-color) !important;
}

body.high-contrast .alert-danger a {
  color: var(--dark-danger-link-color) !important;
}

body.high-contrast .alert ul li span a {
	background: var(--background-color) !important;
}

/* removed label from list here as breaking the smartform "you didn't fill in" bottom info warning */
body.high-contrast a.btn-default, 
body.high-contrast span.btn-default, 
body.high-contrast button.btn-default, 
body.high-contrast button.btn-default span, 
body.high-contrast input.btn-default, 
body.high-contrast button.btn-default.bs-placeholder span, 
body.high-contrast .dropdown-menu > li > a, 
body.high-contrast .bootstrap-select.btn-group .dropdown-menu > li > a, 
body.high-contrast .bootstrap-select.btn-group .dropdown-menu > li > a > span,
body.high-contrast .dropdown-menu.open div.inner.open ul.dropdown-menu.inner li a.dropdown-item span.text,
body.high-contrast div.bs-container.dropdown.bootstrap-select.bs3.open div.dropdown-menu.open div.bs-searchbox,
body.high-contrast div.bs-container.dropdown.bootstrap-select.bs3.open div.dropdown-menu.open,
body.high-contrast div.filter-option div.filter-option-inner,
body.high-contrast div.filter-option div.filter-option-inner div.filter-option-inner-inner,
body.high-contrast div.filter-option
{
	background-image: none !important;
	background: var(--background-color) !important;
	color: var(--black-color) !important;
}

/*
body.high-contrast .form-control[disabled], body.high-contrast .form-control[readonly], body.high-contrast fieldset[disabled] .form-control {
	background: var(--dark-form-widgets-background-color);
}
*/

body.high-contrast .bootstrap-select.btn-group .dropdown-menu > li > a:hover {
	background-image: none !important;
	background: var(--black-color) !important;
	color: var(--text-color) !important;
}

body.high-contrast a.btn-success, body.high-contrast button.btn-success, body.high-contrast input.btn-success {
	background-image: none !important;
	background: var(--dark-success-button-color) !important;
  color: var(--text-color) !important;
}

body.high-contrast a.btn-primary, body.high-contrast button.btn-primary, body.high-contrast input.btn-primary {
	background-image: none !important;
	background: var(--dark-primary-button-color) !important;
  color: var(--text-color) !important;
}

body.high-contrast a.btn-info, body.high-contrast button.btn-info, body.high-contrast input.btn-info {
  background-image: none !important;
  background: var(--dark-info-button-color) !important;
  color: var(--text-color) !important;
}

body.high-contrast a.btn-danger, body.high-contrast button.btn-danger, body.high-contrast input.btn-danger {
	background-image: none !important;
	background: var(--dark-danger-button-color) !important;
  color: var(--text-color) !important;
}

body.high-contrast a.btn-warning, body.high-contrast button.btn-warning, body.high-contrast input.btn-warning {
	background-image: none !important;
	background: var(--dark-warning-button-color) !important;
  color: var(--text-color) !important;
}

/* button links in inverted tables */
body.high-contrast table a.btn-success, body.high-contrast table button.btn-success, body.high-contrast table input.btn-success {
	background-image: none !important;
	background: var(--dark-success-inverted-button-color) !important;
  color: var(--text-color-inverted) !important;
  border: var(--dark-success-inverted-button-color) !important;
}

body.high-contrast table a.btn-primary, body.high-contrast table button.btn-primary, body.high-contrast table input.btn-primary {
	background-image: none !important;
	background: var(--dark-primary-inverted-button-color) !important;
  color: var(--text-color-inverted) !important;
  border: var(--dark-primary-inverted-button-color) !important;
}

body.high-contrast table a.btn-info, body.high-contrast table button.btn-info, body.high-contrast table input.btn-info {
  background-image: none !important;
  background: var(--dark-info-inverted-button-color) !important;
  color: var(--text-color-inverted) !important;
  border: var(--dark-info-inverted-button-color) !important;
}

body.high-contrast table a.btn-danger, body.high-contrast table button.btn-danger, body.high-contrast table input.btn-danger {
	background-image: none !important;
	background: var(--dark-danger-inverted-button-color) !important;
  color: var(--text-color-inverted) !important;
  border: var(--dark-danger-inverted-button-color) !important;
}

body.high-contrast table a.btn-warning, body.high-contrast table button.btn-warning, body.high-contrast table input.btn-warning {
	background-image: none !important;
	background: var(--dark-warning-inverted-button-color) !important;
  color: var(--text-color-inverted) !important;
  border: var(--dark-warning-inverted-button-color) !important;
}

body.high-contrast .alert .fa, body.high-contrast button .fa, body.high-contrast a.btn i.fa, body.high-contrast .fa.fa-upload {
/*	background-color: var(--background-color) !important; */
/*	color: var(--black-color) !important; */
}


body.high-contrast button.btn-success .fa, body.high-contrast a.btn-success i.fa {
	background-color: var(--dark-success-button-color) !important;
	color: var(--text-color) !important;
}

body.high-contrast button.btn-primary .fa, body.high-contrast a.btn-primary i.fa {
	background-color: var(--dark-primary-button-color) !important;
	color: var(--text-color) !important;
}

body.high-contrast button.btn-danger .fa, body.high-contrast a.btn-danger i.fa {
	background-color: var(--dark-danger-button-color) !important;
	color: var(--text-color) !important;
}

body.high-contrast button.btn-warning .fa, body.high-contrast a.btn-warning i.fa {
	background-color: var(--dark-warning-button-color) !important;
	color: var(--text-color) !important;
}

/* button links in inverted tables */
body.high-contrast table button.btn-success .fa, body.high-contrast table a.btn-success i.fa {
	background-color: var(--dark-success-inverted-button-color) !important;
	color: var(--text-color-inverted) !important;
}

body.high-contrast table button.btn-primary .fa, body.high-contrast table a.btn-primary i.fa {
	background-color: var(--dark-primary-inverted-button-color) !important;
	color: var(--text-color-inverted) !important;
}

body.high-contrast table button.btn-danger .fa, body.high-contrast table a.btn-danger i.fa {
	background-color: var(--dark-danger-inverted-button-color) !important;
	color: var(--text-color-inverted) !important;
}

body.high-contrast table button.btn-warning .fa, body.high-contrast table a.btn-warning i.fa {
	background-color: var(--dark-warning-inverted-button-color) !important;
	color: var(--text-color-inverted) !important;
}



/* this was added for some reason but removing it as the normal table does not have a border */
body.high-contrast .table-aims {
	/* border: 1px solid #fff; */
}

body.high-contrast .panel {
	color: var(--text-color);
}

body.high-contrast .panel-default > .panel-heading {
	background-image: none !important;
  color: var(--text-color);
	border-color: var(--black-color);
}

/* this was added for some reason but had to remove it as it caused the dropdown on GI dashboard to block half the Project Impact panel */
body.high-contrast .panel-body {
	/* overflow: hidden; */
}

body.high-contrast .dropdown-menu > li > a:hover, body.high-contrast .dropdown-menu > li > a:focus, 
body.high-contrast div#vuequicksearch div div ul.nav.navbar-nav.navbar-right li.dropdown.open ul#quick_search_results.dropdown-menu li a:hover span,
body.high-contrast div#vuequicksearch div div ul.nav.navbar-nav.navbar-right li.dropdown.open ul#quick_search_results.dropdown-menu li a:hover span i,
body.high-contrast div#vuequicksearch div div ul.nav.navbar-nav.navbar-right li.dropdown.open ul#quick_search_results.dropdown-menu li a:focus span,
body.high-contrast div#vuequicksearch div div ul.nav.navbar-nav.navbar-right li.dropdown.open ul#quick_search_results.dropdown-menu li a:focus span i
{
    background-color: var(--black-color) !important;
    color: var(--text-color) !important;
}

body.high-contrast .dropdown-menu.open div.inner.open ul.dropdown-menu.inner li:hover a.dropdown-item span {
  background-color: var(--black-color) !important;
  color: var(--text-color) !important;
}

body.high-contrast .dropdown-menu.open div.inner.open ul.dropdown-menu.inner li a.dropdown-item span {
  background-color: var(--background-color) !important;
  color: var(--black-color) !important;
}

body.high-contrast .dropdown-menu .divider {
	background-color: #bdbdbd !important;
}

body.high-contrast .dropdown-menu {
	background-color: var(--background-color);
	border: none;
}

body.high-contrast table {
	background-color: var(--table-background-inverted-color);
	color: var(--text-color-inverted);
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

/* invert nested tables again so they don't display inverted */
body.high-contrast table table {
  -webkit-filter: invert(0%);
  filter: invert(0%);
}

/* invert SVG in tables back to slightly darker than normal */
body.high-contrast table svg {
  -webkit-filter: invert(80%);
  filter: invert(80%);
}

/* lower SVG brightness darker than full white */
body.high-contrast svg {
  -webkit-filter: brightness(60%);
  filter: brightness(60%);
}

body.high-contrast table * btn {
	color: #b07c50;
}

body.high-contrast .table-striped > tbody > tr:nth-of-type(2n+1), body.high-contrast .list-table > tbody > tr:nth-of-type(2n+1) {
	background-color: var(--table-background-inverted-stripe-color);
}

body.high-contrast .table-striped > tbody > tr:nth-of-type(2n), body.high-contrast .list-table > tbody > tr:nth-of-type(2n) {
	background-color: var(--table-background-inverted-color);
}

body.high-contrast table.forms_question_table > thead > tr > th, 
body.high-contrast table.forms_question_table > tbody > tr > th, 
body.high-contrast table.forms_question_table > tfoot > tr > th, 
body.high-contrast table.forms_question_table > thead > tr > td, 
body.high-contrast table.forms_question_table > tbody > tr > td, 
body.high-contrast table.forms_question_table > tfoot > tr > td {
	border-bottom: none;
}

body.high-contrast a, body.high-contrast button.btn-link {
	/* color: #2d6ca2 !important;*/
}

body.high-contrast .footer ul.footer-links a {
	color: var(--link-color) !important;
}

body.high-contrast td.list-table strong {
	background: none;
}

body.high-contrast a.btn-success, body.high-contrast a.btn-primary, body.high-contrast a.btn-danger, body.high-contrast a.btn-warning {
	color: var(--text-color) !important;
}

body.high-contrast .btn-default {
	color: var(--black-color) !important;
}

body.high-contrast .footer p.text-muted {
	border-bottom: 1rem solid var(--dark-text-color);
}

body.high-contrast button.dropdown-toggle span {
	background-color: var(--background-color) !important;
	color: var(--dark-text-color);
}

body.high-contrast .popover-content, body.high-contrast .popover {
	background-color: var(--background-color) !important;
	color: var(--black-color) !important;
}

body.high-contrast .c3 line {
	stroke: var(--text-color);
}

body.high-contrast .c3 path {
	stroke: var(--text-color);
}

body.high-contrast .c3 text {
	fill: var(--background-color);
}

body.high-contrast .btn:active, body.high-contrast .btn.active, body.high-contrast .btn-default:active, body.high-contrast .btn-primary:active, body.high-contrast .btn-success:active, body.high-contrast .btn-info:active, body.high-contrast .btn-warning:active, body.high-contrast .btn-danger:active, body.high-contrast .btn-default.active, body.high-contrast .btn-primary.active, body.high-contrast .btn-success.active, body.high-contrast .btn-info.active, body.high-contrast .btn-warning.active, body.high-contrast .btn-danger.active {
	-webkit-box-shadow: inset 0 2px 4px rgb(0, 0, 0);
	box-shadow: inset 0 2px 4px rgb(0, 0, 0);
}

body.high-contrast table .btn:active, body.high-contrast table .btn.active, body.high-contrast table .btn-default:active, body.high-contrast table .btn-primary:active, body.high-contrast table .btn-success:active, body.high-contrast table .btn-info:active, body.high-contrast table .btn-warning:active, body.high-contrast table .btn-danger:active, body.high-contrast table .btn-default.active, body.high-contrast table .btn-primary.active, body.high-contrast table .btn-success.active, body.high-contrast table .btn-info.active, body.high-contrast table .btn-warning.active, body.high-contrast table .btn-danger.active {
	-webkit-box-shadow: inset 0 2px 4px rgb(255, 255, 255);
	box-shadow: inset 0 2px 4px rgb(255, 255, 255);
}

body.high-contrast .pagination {
	/* filter: invert();*/
}

body.high-contrast #calendar * a {
  color: var( --table-background-inverted-link-color) !important;
}

body.high-contrast #calendar table {
	/* background-color: var(--dark-background-color-inverted) !important; */
	color: var(--text-color-inverted);
}

body.high-contrast .fc-today {
  background-color: var(--table-background-inverted-info-color);
  border-style: none;
}

/* body.high-contrast .fc-day-grid-event {
  background-color: var(--text-color) !important;
}*/

body.high-contrast .fc-more-popover {
	/*filter: invert(100%);*/
}

body.high-contrast #calendar .fc-more-popover a {
	color: var( --table-background-link-color) !important;
}

body.high-contrast .fc-toolbar h2 {
	/* color: var(--text-color-inverted) !important; */
  background-color: none;
}

body.high-contrast span.pagination-default {
	background-color: var(--background-color);
	color: var(--black-color) !important;
}

body.high-contrast .disabled span.pagination-default {
	background-color: #222;
}

body.high-contrast .forms-container, body.high-contrast #tabcontent, body.high-contrast .tabcontent {
	background-color: var(--panel-background-color);
  border-color: var(--panel-background-color);
}

body.high-contrast .nav-tabs {
	border-bottom: 1px solid var(--panel-background-color);
}

body.high-contrast .nav-tabs > li {
	background-color: var(--tabs-smartforms-background-color);
}

body.high-contrast .nav-tabs > li > a {
	border-color: var(--dark-background-color);
}

body.high-contrast .nav-tabs > li > a:hover {
	background-color: var(--tabs-smartforms-background-hover-color);
	/* color: #2a6496; */
}

body.high-contrast .nav-tabs > li > a {
	background-color: inherit;
	/* color: #2a6496; */
}

body.high-contrast .nav-tabs > li.active > a, body.high-contrast .nav-tabs > li.active > a:hover, body.high-contrast .nav-tabs > li.active > a:focus {
	border: none;
  background-color: var(--panel-background-color);
}

body.high-contrast span#tasktotal {
	background: none;
}

body.high-contrast .text-muted {
  color: #999999 !important;
}

body.high-contrast .text-primary {
  color: var(--dark-primary-text-color) !important;
}

body.high-contrast .text-success {
  color: var(--dark-success-text-color) !important;
}

body.high-contrast .text-info {
  color: var(--dark-info-text-color) !important;
}

body.high-contrast .text-warning {
  color: var(--dark-warning-text-color) !important;
}

body.high-contrast .text-danger {
  color: var(--dark-danger-text-color) !important;
}

body.high-contrast table .text-danger {
  color: var(--dark-danger-inverted-text-color) !important;
}

body.high-contrast table .has-error .form-control {
	border-color: var(--dark-danger-inverted-text-color) !important;
  border: 1px solid;
}

body.high-contrast table .has-error .input-group-addon {
	color: var(--white-color);
	background-color: var(--dark-danger-inverted-text-color);
	border-color: var(--dark-danger-inverted-text-color);
}

body.high-contrast table > thead > tr > td a, 
body.high-contrast table > thead > tr > td a,
body.high-contrast table > tbody > tr > td a, 
body.high-contrast table > tfoot > tr > td a, 
body.high-contrast table > thead > tr > th a, 
body.high-contrast table > tbody > tr > th a, 
body.high-contrast table > tfoot > tr > th a, 
body.high-contrast .table > thead > tr > td a, 
body.high-contrast .table > tbody > tr > td a, 
body.high-contrast .table > tfoot > tr > td a, 
body.high-contrast .table > thead > tr > th a, 
body.high-contrast .table > tbody > tr > th a, 
body.high-contrast .table > tfoot > tr > th a {
	color: var(--table-background-inverted-link-color) !important;
}

body.high-contrast .table > thead > tr > td.success, 
body.high-contrast .table > tbody > tr > td.success, 
body.high-contrast .table > tfoot > tr > td.success, 
body.high-contrast .table > thead > tr > th.success, 
body.high-contrast .table > tbody > tr > th.success, 
body.high-contrast .table > tfoot > tr > th.success, 
body.high-contrast .table > thead > tr.success > td, 
body.high-contrast .table > tbody > tr.success > td, 
body.high-contrast .table > tfoot > tr.success > td, 
body.high-contrast .table > thead > tr.success > th, 
body.high-contrast .table > tbody > tr.success > th, 
body.high-contrast .table > tfoot > tr.success > th {
	background-color: var(--table-background-inverted-success-color) !important;
}

body.high-contrast .table > thead > tr > td.success a, 
body.high-contrast .table > tbody > tr > td.success a, 
body.high-contrast .table > tfoot > tr > td.success a, 
body.high-contrast .table > thead > tr > th.success a, 
body.high-contrast .table > tbody > tr > th.success a, 
body.high-contrast .table > tfoot > tr > th.success a, 
body.high-contrast .table > thead > tr.success > td a, 
body.high-contrast .table > tbody > tr.success > td a, 
body.high-contrast .table > tfoot > tr.success > td a, 
body.high-contrast .table > thead > tr.success > th a, 
body.high-contrast .table > tbody > tr.success > th a, 
body.high-contrast .table > tfoot > tr.success > th a {
	color: var(--table-background-inverted-success-link-color) !important;
}

body.high-contrast .table > tbody > tr.success:nth-of-type(2n+1) td,
body.high-contrast .table-striped > tbody > tr.success:nth-of-type(2n+1) td, 
body.high-contrast .list-table > tbody > tr.success:nth-of-type(2n+1) td {
	background-color: var(--table-background-inverted-success-stripe-color) !important;
}

body.high-contrast .table > thead > tr > td.success a.btn, 
body.high-contrast .table > tbody > tr > td.success a.btn, 
body.high-contrast .table > tfoot > tr > td.success a.btn, 
body.high-contrast .table > thead > tr > th.success a.btn, 
body.high-contrast .table > tbody > tr > th.success a.btn, 
body.high-contrast .table > tfoot > tr > th.success a.btn, 
body.high-contrast .table > thead > tr.success > td a.btn, 
body.high-contrast .table > tbody > tr.success > td a.btn, 
body.high-contrast .table > tfoot > tr.success > td a.btn, 
body.high-contrast .table > thead > tr.success > th a.btn, 
body.high-contrast .table > tbody > tr.success > th a.btn, 
body.high-contrast .table > tfoot > tr.success > th a.btn {
	color: var(--black-color) !important;
}

body.high-contrast .table > thead > tr > td.info, 
body.high-contrast .table > tbody > tr > td.info, 
body.high-contrast .table > tfoot > tr > td.info, 
body.high-contrast .table > thead > tr > th.info, 
body.high-contrast .table > tbody > tr > th.info, 
body.high-contrast .table > tfoot > tr > th.info, 
body.high-contrast .table > thead > tr.info > td, 
body.high-contrast .table > tbody > tr.info > td, 
body.high-contrast .table > tfoot > tr.info > td, 
body.high-contrast .table > thead > tr.info > th, 
body.high-contrast .table > tbody > tr.info > th, 
body.high-contrast .table > tfoot > tr.info > th {
	background-color: var(--table-background-inverted-info-color) !important;
}

body.high-contrast .table > thead > tr > td.info a, 
body.high-contrast .table > tbody > tr > td.info a, 
body.high-contrast .table > tfoot > tr > td.info a, 
body.high-contrast .table > thead > tr > th.info a, 
body.high-contrast .table > tbody > tr > th.info a, 
body.high-contrast .table > tfoot > tr > th.info a, 
body.high-contrast .table > thead > tr.info > td a, 
body.high-contrast .table > tbody > tr.info > td a, 
body.high-contrast .table > tfoot > tr.info > td a, 
body.high-contrast .table > thead > tr.info > th a, 
body.high-contrast .table > tbody > tr.info > th a, 
body.high-contrast .table > tfoot > tr.info > th a {
	color: var(--table-background-inverted-info-link-color) !important;
}

body.high-contrast .table > tbody > tr.info:nth-of-type(2n+1) td,
body.high-contrast .table-striped > tbody > tr.info:nth-of-type(2n+1) td, 
body.high-contrast .list-table > tbody > tr.info:nth-of-type(2n+1) td {
	background-color: var(--table-background-inverted-info-stripe-color) !important;
}

body.high-contrast .table > thead > tr > td.info a.btn, 
body.high-contrast .table > tbody > tr > td.info a.btn, 
body.high-contrast .table > tfoot > tr > td.info a.btn, 
body.high-contrast .table > thead > tr > th.info a.btn, 
body.high-contrast .table > tbody > tr > th.info a.btn, 
body.high-contrast .table > tfoot > tr > th.info a.btn, 
body.high-contrast .table > thead > tr.info > td a.btn, 
body.high-contrast .table > tbody > tr.info > td a.btn, 
body.high-contrast .table > tfoot > tr.info > td a.btn, 
body.high-contrast .table > thead > tr.info > th a.btn, 
body.high-contrast .table > tbody > tr.info > th a.btn, 
body.high-contrast .table > tfoot > tr.info > th a.btn {
	color: var(--black-color) !important;
}

body.high-contrast .table > thead > tr > td.warning, 
body.high-contrast .table > tbody > tr > td.warning, 
body.high-contrast .table > tfoot > tr > td.warning, 
body.high-contrast .table > thead > tr > th.warning, 
body.high-contrast .table > tbody > tr > th.warning, 
body.high-contrast .table > tfoot > tr > th.warning, 
body.high-contrast .table > thead > tr.warning > td, 
body.high-contrast .table > tbody > tr.warning > td, 
body.high-contrast .table > tfoot > tr.warning > td, 
body.high-contrast .table > thead > tr.warning > th, 
body.high-contrast .table > tbody > tr.warning > th, 
body.high-contrast .table > tfoot > tr.warning > th {
	background-color: var(--table-background-inverted-warning-color) !important;
}

body.high-contrast .table > thead > tr > td.warning a, 
body.high-contrast .table > tbody > tr > td.warning a, 
body.high-contrast .table > tfoot > tr > td.warning a, 
body.high-contrast .table > thead > tr > th.warning a, 
body.high-contrast .table > tbody > tr > th.warning a, 
body.high-contrast .table > tfoot > tr > th.warning a, 
body.high-contrast .table > thead > tr.warning > td a, 
body.high-contrast .table > tbody > tr.warning > td a, 
body.high-contrast .table > tfoot > tr.warning > td a, 
body.high-contrast .table > thead > tr.warning > th a, 
body.high-contrast .table > tbody > tr.warning > th a, 
body.high-contrast .table > tfoot > tr.warning > th a {
	color: var(--table-background-inverted-warning-link-color) !important;
}

body.high-contrast .table > tbody > tr.warning:nth-of-type(2n+1) td,
body.high-contrast .table-striped > tbody > tr.warning:nth-of-type(2n+1) td, 
body.high-contrast .list-table > tbody > tr.warning:nth-of-type(2n+1) td {
	background-color: var(--table-background-inverted-warning-stripe-color) !important;
}

body.high-contrast .table > thead > tr > td.warning a.btn, 
body.high-contrast .table > tbody > tr > td.warning a.btn, 
body.high-contrast .table > tfoot > tr > td.warning a.btn, 
body.high-contrast .table > thead > tr > th.warning a.btn, 
body.high-contrast .table > tbody > tr > th.warning a.btn, 
body.high-contrast .table > tfoot > tr > th.warning a.btn, 
body.high-contrast .table > thead > tr.warning > td a.btn, 
body.high-contrast .table > tbody > tr.warning > td a.btn, 
body.high-contrast .table > tfoot > tr.warning > td a.btn, 
body.high-contrast .table > thead > tr.warning > th a.btn, 
body.high-contrast .table > tbody > tr.warning > th a.btn, 
body.high-contrast .table > tfoot > tr.warning > th a.btn {
	color: var(--black-color) !important;
}

body.high-contrast .table > thead > tr > td.danger, 
body.high-contrast .table > tbody > tr > td.danger, 
body.high-contrast .table > tfoot > tr > td.danger, 
body.high-contrast .table > thead > tr > th.danger, 
body.high-contrast .table > tbody > tr > th.danger, 
body.high-contrast .table > tfoot > tr > th.danger, 
body.high-contrast .table > thead > tr.danger > td, 
body.high-contrast .table > tbody > tr.danger > td, 
body.high-contrast .table > tfoot > tr.danger > td, 
body.high-contrast .table > thead > tr.danger > th, 
body.high-contrast .table > tbody > tr.danger > th, 
body.high-contrast .table > tfoot > tr.danger > th {
	background-color: var(--table-background-inverted-danger-color);
}

body.high-contrast .table > thead > tr > td.danger a, 
body.high-contrast .table > tbody > tr > td.danger a, 
body.high-contrast .table > tfoot > tr > td.danger a, 
body.high-contrast .table > thead > tr > th.danger a, 
body.high-contrast .table > tbody > tr > th.danger a, 
body.high-contrast .table > tfoot > tr > th.danger a, 
body.high-contrast .table > thead > tr.danger > td a, 
body.high-contrast .table > tbody > tr.danger > td a, 
body.high-contrast .table > tfoot > tr.danger > td a, 
body.high-contrast .table > thead > tr.danger > th a, 
body.high-contrast .table > tbody > tr.danger > th a, 
body.high-contrast .table > tfoot > tr.danger > th a {
	color: var(--table-background-inverted-danger-link-color) !important;
}

body.high-contrast .table > tbody > tr.danger:nth-of-type(2n+1) td,
body.high-contrast .table-striped > tbody > tr.danger:nth-of-type(2n+1) td, 
body.high-contrast .list-table > tbody > tr.danger:nth-of-type(2n+1) td {
	background-color: var(--table-background-inverted-danger-stripe-color) !important;
}

body.high-contrast .table > thead > tr > td.danger a.btn, 
body.high-contrast .table > tbody > tr > td.danger a.btn, 
body.high-contrast .table > tfoot > tr > td.danger a.btn, 
body.high-contrast .table > thead > tr > th.danger a.btn, 
body.high-contrast .table > tbody > tr > th.danger a.btn, 
body.high-contrast .table > tfoot > tr > th.danger a.btn, 
body.high-contrast .table > thead > tr.danger > td a.btn, 
body.high-contrast .table > tbody > tr.danger > td a.btn, 
body.high-contrast .table > tfoot > tr.danger > td a.btn, 
body.high-contrast .table > thead > tr.danger > th a.btn, 
body.high-contrast .table > tbody > tr.danger > th a.btn, 
body.high-contrast .table > tfoot > tr.danger > th a.btn {
	color: var(--black-color) !important;
}

/* xinha modal dialogs */
body.high-contrast .dialog {
	background-color: var(--panel-background-color);
}

/* xinha modal dialogs headings */
body.high-contrast .dialog h1, body.high-contrast .dialog input[type="button"], body.high-contrast .dialog input[type="submit"] {
	color: var(--dark-text-color) !important;
}

body.high-contrast .dialog .title {
	background-image: none;
	color: var(--black-color) !important;
	background: var(--background-color);
	font-size: 1.8rem;
}

body.high-contrast .dialog .about.content {
	background-color: var(--panel-background-color);
}

body.high-contrast .pagination > .disabled > span, 
body.high-contrast .pagination > .disabled > span:hover, 
body.high-contrast .pagination > .disabled > span:focus, 
body.high-contrast .pagination > .disabled > a, 
body.high-contrast .pagination > .disabled > a:hover, 
body.high-contrast .pagination > .disabled > a:focus {
	color: #949494;
	background-color: #222;
}

body.high-contrast .pagination > li:last-child > a, 
body.high-contrast .pagination > li:last-child > span {
	background-color: var(--background-color);
}

body.high-contrast .pagination > li.disabled:last-child > a, 
body.high-contrast .pagination > li.disabled:last-child > span {
	background-color: #222;
}

body.high-contrast .pagination a {
	background-color: var(--background-color);
}

body.high-contrast .form-required-mark i {
	color: #a94442 !important;
}

body.high-contrast .carousel-caption, body.high-contrast .carousel-indicators, body.high-contrast .carousel-caption * {
	background: none;
}

body.high-contrast .text-danger abbr {
	color: #dd7876 !important;
}

body.high-contrast .text-danger abbr i {
	color: #a94442 !important;
}

body.high-contrast .form-control {
	color: var(--dark-form-widgets-color);
	background-color: var(--dark-form-widgets-background-color);
	/* border: 1px solid var(--dark-form-widgets-border-color);*/
}

body.high-contrast table .form-control {
	color: var(--dark-form-widgets-color-inverted);
	background-color: var(--dark-form-widgets-background-color-inverted);
	/* border: 1px solid var(--dark-form-widgets-border-color);*/
  border: none;
}

body.high-contrast .forms-form table tr.multi-inputs-row td, .forms-form table tr.multi-inputs-row th {
  background: var(--black-color-inverted);
}

body.high-contrast #UUIDtoolbar {
  background-color: var(--navbar-grey-color);
  color: var(--dark-text-color) !important;
}

body.high-contrast table.totals-table-right-white tbody, body.high-contrast table.totals-table-right-white tr, body.high-contrast table.totals-table-right-white td, body.high-contrast table.totals-table-right-white h1, body.high-contrast table.totals-table-right-white h3 {
	background-color: #071a0a;
}

body.high-contrast table.totals-table-right-black tbody, body.high-contrast table.totals-table-right-black tr, body.high-contrast table.totals-table-right-black td, body.high-contrast table.totals-table-right-black h1, body.high-contrast table.totals-table-right-black h3 {
	background-color: #141a15;
}

body.high-contrast table.totals-table-left-white tbody, body.high-contrast table.totals-table-left-white tr, body.high-contrast table.totals-table-left-white td, body.high-contrast table.totals-table-left-white h1, body.high-contrast table.totals-table-left-white h3 {
	background-color: #07121a;
}

body.high-contrast table.totals-table-left-black tbody, body.high-contrast table.totals-table-left-black tr, body.high-contrast table.totals-table-left-black td, body.high-contrast table.totals-table-left-black h1, body.high-contrast table.totals-table-left-black h3 {
	background-color: #1a130f;
}

body.high-contrast table.totals-table-left-white td.mfimage, body.high-contrast table.totals-table-left-black td.mfimage {
	background-color: var(--dark-background-color);
}

body.high-contrast .tooltip {
	background: none !important;
}

body.high-contrast .tooltip-inner {
	background-color: var(--background-color) !important;
	color: var(--black-color) !important;
}

body.high-contrast .tooltip-arrow {
	background: none !important;
}

body.high-contrast .tooltip.top .tooltip-arrow {
	background: none !important;
	border-top-color: var(--text-color);
}

body.high-contrast .tooltip.bottom .tooltip-arrow {
	background: none !important;
	border-bottom-color: var(--text-color);
}

body.high-contrast .tooltip.left .tooltip-arrow {
	background: none !important;
	border-left-color: var(--text-color);
}

body.high-contrast .tooltip.right .tooltip-arrow {
	background: none !important;
	border-right-color: var(--text-color);
}

body.high-contrast a.conditions-hidden-link, body.high-contrast a.conditions-hidden-link:hover {
	color: var(--text-color) !important;
}

body.high-contrast .fa-stack .text-danger {
	color: #a94442 !important;
	background: none !important;
}

body.high-contrast .row {
	background: none !important;
}

body.high-contrast .col-xs-1, 
body.high-contrast .col-xs-2, 
body.high-contrast .col-xs-3, 
body.high-contrast .col-xs-4, 
body.high-contrast .col-xs-5, 
body.high-contrast .col-xs-6, 
body.high-contrast .col-xs-7, 
body.high-contrast .col-xs-8, 
body.high-contrast .col-xs-9, 
body.high-contrast .col-xs-10, 
body.high-contrast .col-xs-11, 
body.high-contrast .col-xs-12 {
	background: none !important;
}

body.high-contrast .progress {
	background-color: #474747 !important;
}

body.high-contrast .progress-bar-warning {
	background-image: -webkit-linear-gradient(top, #f0ad4e 0, var(--dark-warning-button-color) 100%);
	background-image: -o-linear-gradient(top, #f0ad4e 0, var(--dark-warning-button-color) 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0ad4e), to(var(--dark-warning-button-color)));
	background-image: linear-gradient(to bottom, #f0ad4e 0, var(--dark-warning-button-color) 100%);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ff7E4E0C', GradientType=0);
}

body.high-contrast .progress-bar-danger {
	background-image: -webkit-linear-gradient(top, #d9534f 0, var(--dark-danger-button-color) 100%);
	background-image: -o-linear-gradient(top, #d9534f 0, var(--dark-danger-button-color) 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d9534f), to(var(--dark-danger-button-color)));
	background-image: linear-gradient(to bottom, #d9534f 0, var(--dark-danger-button-color) 100%);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffA32824', GradientType=0);
}

body.high-contrast .progress-bar-success {
	background-image: -webkit-linear-gradient(top, #5cb85c 0, var(--dark-success-button-color) 100%);
	background-image: -o-linear-gradient(top, #5cb85c 0, var(--dark-success-button-color) 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5cb85c), to(var(--dark-success-button-color)));
	background-image: linear-gradient(to bottom, #5cb85c 0, var(--dark-success-button-color) 100%);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff2A652A', GradientType=0);
}


body.high-contrast .vac-room-item, body.high-contrast .vac-room-item * {
	background-color: #255c2f !important;
}

body.high-contrast .vac-room-item:hover, body.high-contrast .vac-room-item:hover * {
	background-color: #183d1f !important;
}

body.high-contrast .vac-room-selected, body.high-contrast .vac-room-selected * {
	background-color: #12579c !important;
}

body.high-contrast .vac-room-selected:hover, body.high-contrast .vac-room-selected:hover * {
	background-color: #12579c !important;
}

body.high-contrast .vac-message-card, body.high-contrast .vac-message-card *{
	background-color: #255c2f !important;
}

body.high-contrast .vac-message-current, body.high-contrast .vac-message-current *{
	background-color: #0e5c4a !important;
}

/* this was causing the chat "show/hide more info" to come out grey in dark mode */
body.high-contrast details, body.high-contrast details * {
	/* background-color: var(--background-color); */
	/* color: var(--black-color) !important; */
}

body.high-contrast .vac-input, body.high-contrast .vac-icon-search * {
	background-color: var(--background-color) !important;
	color: var(--black-color) !important;
}

body.high-contrast .vac-message-card .vac-options-container {
	background-color: transparent !important;
}

body.high-contrast .vac-textarea {
	background-color: var(--background-color) !important;
	color: var(--black-color) !important;
}

body.high-contrast .vac-avatar, body.high-contrast .vac-room-selected .vac-avatar, body.high-contrast .vac-room-item .vac-avatar {
	background-color: var(--background-color) !important;
}

body.high-contrast .badge {
  /* background-color: #8c0000; */
}

/* more fixes for datatables, main menu and dismissible alert */

body.high-contrast #task_list_ellipsis a, body.high-contrast .paginate_button a, body.high-contrast .paginate_button a * {
	background-color: var(--background-color) !important;
	color: var(--link-color-inverted) !important;
}

body.high-contrast .paginate_button a, body.high-contrast .paginate_button a * {
	color: var(--black-color) !important;
}

body.high-contrast table.dataTable thead th.sorting::after {
	color: var(--text-color) !important;
	opacity: 1;
}

body.high-contrast div.alert-dismissible button.close {
	opacity: 1;
  background: none;
}

body.high-contrast div.alert-dismissible button.close span {
	color: var(--white-color) !important;
}

/* bootstrap select menu search (when data not found) */

body.high-contrast .dropdown-menu.inner {
	background-color: var(--background-color) !important;
}

body.high-contrast .bootstrap-select .no-results {
	background-color: var(--background-color) !important;
	color: var(--black-color) !important;
}


/* sidebar */

body.high-contrast .nav-stacked {
	background-color: var(--dark-background-color);
}

body.high-contrast .nav-pills > li > a {
	background-color: var(--tabs-background-color);
	box-shadow: 0 1px 0 0 var(--dark-background-color);
	color: var(--dark-tabs-link-color);
}

body.high-contrast .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
	color: var(--text-color);
	background-color: var(--tabs-background-color);
	filter: brightness(1.0);
}

body.high-contrast .nav li.active a {
	color: var(--text-color) !important;
}

body.high-contrast .nav-pills > li > a:hover, .nav-pills > li > a:focus {
	filter: brightness(1.3);
}

body.high-contrast #todoitems h4 {
  background-color: var(--dark-todo-heading-color);
}

body.high-contrast #doneitems h4 {
  background-color: var(--dark-done-items-heading-color);
}

body.high-contrast #notappitems h4 {
  background-color: var(--dark-notapp-items-heading-color);
  box-shadow: none;
}

body.high-contrast #collapseInfoPanel {
	/* background: var(--dark-background-color);*/
}

body.high-contrast .well {
	background-color: var(--panel-background-color);
	border: none;
}

body.high-contrast .form-inline {
	border-bottom: 1px solid var(--black-color);
}

body.high-contrast .activities-grid {
	border-bottom: 1px solid var(--black-color);
}

body.high-contrast .next-steps-row {
	border-top: 1px solid var(--black-color);
}

body.high-contrast .next-step-grid {
	border-bottom: 1px solid var(--black-color);
}

body.high-contrast .form-control-static {
	color: var(--text-color);
}

body.high-contrast .form-label, body.high-contrast .standard-form-label-text {
	color: var(--form-label-text-color);
}

body.high-contrast .form-horizontal .form-group, body.high-contrast .form-horizontal .standard-form-row {
	border: 1px solid var(--form-border-color);
  background-color: var(--panel-background-color);
}

body.high-contrast .form-buttons {
	background: var(--dark-background-color);
}

body.high-contrast legend {
	color: var(--text-color);
	border-bottom: 1px solid var(--black-color);
}

body.high-contrast .checkbox-list legend {
	border-bottom: none;
}

body.high-contrast pre {
	color: var(--text-color);
	background-color: var(--black-color);
	border: 1px solid var(--black-color);
}

body.high-contrast h1 small, 
body.high-contrast h2 small {
	color: var(--text-color);
}

body.high-contrast .disableoverlay {
  background-color: var(--black-color) !important;
}

body.high-contrast #orphan-workflow-panel {
	background-color: var(--panel-background-color);
}

body.high-contrast #panel-external-info {
	background-color: var(--dark-info-background-color) !important;
	color: var(--text-color);
}

body.high-contrast .modal-content {
	background-color: var(--panel-background-color);
}

body.high-contrast #modal-body p * {
	color: var(--text-color) !important;
}

body.high-contrast .panel-fancy-left-dark {
  border-right: #3CB448 8px solid;
  background-color: var(--panel-background-color) !important;
  color: var(--text-color) !important;
}

body.high-contrast .panel-fancy-right {
  border: none;
  background-color: var(--level-four-color) !important;
  box-shadow: 4px 4px 14px 0 rgba(0,0,0,0.5);
  color: var(--text-color) !important;
}

body.high-contrast .help-container .panel-body-left {
	background-color: var(--dark-info-background-color);
}

body.high-contrast .pagination > .active > a, 
body.high-contrast .pagination > .active > span, 
body.high-contrast .pagination > .active > a:hover, 
body.high-contrast .pagination > .active > span:hover, 
body.high-contrast .pagination > .active > a:focus, 
body.high-contrast .pagination > .active > span:focus {
	background-color: var(--dark-background-color);
	border-color: var(--dark-background-color);
  color: var(--text-color);
}

body.high-contrast .help-block {
	color: var(--text-color);
}

body.high-contrast .visualizejs {
  /*-webkit-filter: invert(100%) !important;
  filter: invert(100%) !important;*/
}

body.high-contrast .list-group-item {
	background-color: inherit;
	border: 1px solid #ddd;
}

/* xinha */

/* these were getting overriden by bootstrap white color */
.dialog, .dialog .label, .fl, .fr {
	color: var(--text-color) !important;
}


body.high-contrast table.htmlarea  {
	background: var(--dark-background-color) !important;
  filter: inherit;
  color: inherit;
}

body.high-contrast .htmlarea * {
	background: var(--dark-background-color) !important;
	border-color: inherit;
  color: var(--text-color) !important;
}

body.high-contrast .htmlarea img {
	-webkit-filter: none !important;
	filter: none !important;
	/* filter: invert(100%) !important; */
}

table.htmlarea  {
	background: var(--background-color) !important;
  filter: inherit;
  color: inherit;
}

.htmlarea * {
	background: var(--background-color) !important;
	border-color: inherit;
  color: var(--text-color) !important;
}

body.high-contrast .sf_admin_link {
	background: var(--smartform-admin-edit-panel-color-inverted);
}

body.high-contrast .workflow-user-icon-background {
	background-color: var(--dark-timeline-color-stage);
}

body.high-contrast .workflow-user-help-icon {
	color: var(--dark-timeline-color-stage);
}

body.high-contrast .workflow-user-icon-background-started {
	background-color: var(--dark-timeline-color-current-stage);
}

body.high-contrast .workflow-user-help-position-icon {
	color: var(--dark-timeline-color-current-stage);
}

body.high-contrast img.workflow-user-icon {
	filter: brightness(100%) !important;
}

body.high-contrast strong.important {
	color: #FF7575;
}

/* smartforms */

body.high-contrast table.forms_question_table {
  background: none;
}

/* DBI tables */
tr td.forms-element table tr.even td {
	background-color: var(--white-color);
}

tr td.forms-element table tr.totals td {
	background-color: #d8d8d8;
}

body.high-contrast tr td.forms-element table tr td {
	border: 1px solid #ddd !important;
}

body.high-contrast tr td.forms-element table tr td, body.high-contrast tr td.forms-element table tr.even td {
  background-color: var(--table-background-inverted-color);
}

body.high-contrast tr td.forms-element table tr.odd td {
  background-color: var(--table-background-inverted-stripe-color);
}

body.high-contrast tr td.forms-element table th {
  /* override the hardcoded style of this name */
  background: var(--white-color) !important;
}

body.high-contrast tr td.forms-element table tr.totals td {
  /* override the hardcoded style of this name */
  background: #ddd !important;
}

body.high-contrast tr td.forms-element table tr th {
	border: none !important;
}

.sf_admin_link {
	background: var(--smartform-admin-edit-panel-color);
  padding: 5px;
	border-radius: 5px;
	margin-top: 5px;
}

/* editor full width */
form#shell #script\.row {
	grid-column: 1/-1;
}

/* Bulk Re-Assignment */
#braFromUserSearchForm div, #braTargetUserSearchForm div {
	grid-column: 1/-1;
}

/* Batch printing queue */
#letters-manage-letter-queue form div {
	grid-column: 1/-1;
}

/* Soft Commitment Financial Amounts */
form#amounts_form div {
  grid-column: 1/-1;
}

#developer-toolbar {
	float: right;
	width: 100%;
}

body.high-contrast #developer-toolbar {
	background-color: #bbbb95;
}

body.high-contrast #developer-toolbar td, body.high-contrast #developer-toolbar td a {
	color: var(--black-color);
}

body.high-contrast #developer-toolbar tr {
	border-top: 4px solid #bbbb95;
}


/* ********************************************************************************** */
/* CSS to style the Filepond library - see https://pqina.nl/filepond/docs/api/style/  */
/* ********************************************************************************** */
.filepond--file {
  color: black;
}

/* Removes the "Powered by PQINA" message and link */
.filepond--credits {
  display: none;
}	

.filepond--panel-root {
  background-color: #eee;
}

.filepond--item-panel {
  background-color: #3a833a;
}

.filepond--file {
  color: white;
}

.filepond--root {
  font-size: 12px;
}

.filepond--alert {
  float: none !important;
}

.filepond--file-info .filepond--file-info-main {
  font-size: 1.2em;
}

.filepond--file-info .filepond--file-info-sub {
  font-size: 1em;
}

body.high-contrast .filepond--item-panel {
  background-color: #df76c7;
}

body.high-contrast [data-filepond-item-state*="error"] .filepond--item-panel, body.high-contrast [data-filepond-item-state*="invalid"] .filepond--item-panel {
  background-color: #3ab1b7;
}

body.high-contrast .filepond--file {
  color: var(--black-color);
}

.filepond--file-status .filepond--file-status-main {
  font-size: 1.2em;
  line-height: 1.3;
}

.filepond--file-status .filepond--file-status-sub {
  font-size: 1em;
}

.filepond--root,
.filepond--root .filepond--drop-label {
  height: 100px;
}

/* mobile */
@media (max-width: 767px) {
  .filepond--root,
  .filepond--root .filepond--drop-label {
    height: 50px;
  }
}

.filepond--file-info .filepond--file-info-main {
  line-height: 1.3;
}

body.high-contrast .filepond--panel-root {
  background-color: #101010;
}

body.high-contrast .filepond--drop-label label {
  color: #afafaf;
}

/* ********************************************************************************** */


/* ********************************************************************************** */
/* sight impaired accessibility mode styles  */
/* ********************************************************************************** */

body.accessible-mode-on .input-group .form-control {
	width: auto;
}

body.accessible-mode-on .filepond--label-action {
  text-decoration: none;
}




/*********************************************/
/* 
/* Calendar widget css */

/* The main calendar widget.  DIV containing a table. */

.calendar {
  border: none;
}

.calendar table {
  border: 1px solid var(--calendar-border-color);
  color: var(--black-color);
  background: var(--white-color);
}

/* Header part -- contains navigation buttons and day names. */

.calendar .button {
	background: var(--white-color);
}

.calendar thead .title { /* This holds the current "month, year" */
  background: var(--white-color);
  color: var(--black-color);
}

.calendar thead .headrow, .calendar thead .headrow .button { /* Row <TR> containing navigation buttons */
  background: var(--navbar-text-color);
  color: var(--white-color);
}

.calendar thead .daynames { /* Row <TR> containing the day names */
  background: var(--info-background-color);
}

.calendar thead .name { /* Cells <TD> containing the day names */
  border-bottom: 1px solid var(--panel-background-color);
  color: var(--black-color);
}

.calendar thead .weekend { /* How a weekend day name shows in header */
  color: #7D4545;
}

.calendar thead .hilite, .calendar thead .headrow .hilite { /* How do the buttons in header appear when hover */
  background: var(--calendar-highlight-color);
  color: var(--black-color);
}

.calendar thead .active { /* Active (pressed) buttons in header */
  background: var(--calendar-highlight-color);
}

/* The body part -- contains all the days in month. */

.calendar tbody .day { /* Cells <TD> containing month days dates */
  color: #456;
  background: var(--white-color);
}

.calendar table .wn {
  border-right: 1px solid var(--black-color);
  background: var(--info-background-color);
}

.calendar tbody .rowhilite td {
  background: #def;
}

.calendar tbody .rowhilite td.wn {
  background: #eef;
}

.calendar tbody td.hilite { /* Hovered cells <TD> */
  background: #def;
}

.calendar tbody td.active { /* Active (pressed) cells <TD> */
  background: #cde;
}

.calendar tbody td.selected { /* Cell showing today date */
  border: 1px solid var(--black-color);
  background: var(--white-color);
  color: var(--black-color);
}

.calendar tbody td.weekend { /* Cells showing weekend days */
  color: #733F3F;
  background: var(--calendar-background-color);
}

body.high-contrast .calendar tbody td.weekend { /* Cells showing weekend days */
  background: var(--dark-calendar-background-color);
}

.calendar tbody td.today { /* Cell showing selected date */
  color: var(--calendar-selected-color);
}

.calendar tbody .disabled { 
  color: #999; 
}

/* The footer part -- status bar and "Close" button */

.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
  background: var(--panel-background-color);
  color: var(--white-color);
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  background: var(--white-color);
  color: var(--calendar-text-color);
  border-top: 1px solid var(--panel-background-color);
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
  background: var(--calendar-highlight-color);
  color: var(--black-color);
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  background: var(--calendar-highlight-color);
}

input[type="button"].calendar-button {
  background: url( "/resources/acs-templating/calendar.gif" ) no-repeat top left;
}

body.high-contrast .calendar table {
	filter: none;
	background-color: revert;
	color: revert;
}

body.high-contrast .calendar tfoot .active, 
body.high-contrast .calendar tfoot .hilite, 
body.high-contrast .calendar thead .active, 
body.high-contrast .calendar thead .hilite {
  background: var(--dark-calendar-highlight-color);
}

/* END calendar
/*********************************************/