:root {
  --background-color: #eeeeee;
  --background-color-inverted: #333333;
  --text-color: #333333;
  --text-color-inverted: #eeeeee;
  --link-color: #2d6ca2;  /* was #478ECD;*/
  --white-color: #FFFFFF;
  --black-color: #000000;
  --icon-color: #107D85;
  --navbar-text-color: #6D6D6D;
  --sub-header-color: #757575;

  --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;

  /* 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;
}

.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;
}

#external-jumbotron #sub-title {
  font-size: 1.4rem;
  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: #000000 !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;
}

#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;
}

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

.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;
}

.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;
}

.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 {
    padding-top: 1rem;
    padding-left: 0px;
    padding-right: 0px;
}

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 */
.navbar-default {
	border: none;
}

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

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

#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);
}

#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);
}

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

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

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

#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;
}

/* 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%
}

.grid-image .img-responsive {
  width: 100%;
}

#call-description-grid .panel {
  padding-left: 5px;
  padding-right: 5px;
}

#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/


$breakpoints: (xs, sm, md, lg);
$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: 768px) {
          width: calc(#{$calculation} - 10px);  
        }
      }
      @else if $breakpoint == 'md' {

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

        @media screen and (min-width: 1200px) {
          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: 768px) {
  .masonry-sm-1 {
    width: calc(8.3333333333% - 10px);
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media screen and (min-width: 1200px) {
  .masonry-lg-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);
}

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

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

/* default large screen size */
.form-horizontal .form-group, .form-horizontal .standard-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.1rem;
}

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

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

.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%;
}

forms-buttons
/* 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;
}

/* 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 */
#project_costs {
  display: block;
}

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;
}

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

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

.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;
}

.action-buttons, .forms-buttons {
	/* 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; */
}

/* try and update old forms without changing code - hierarchy below */
/* not duplicating new classes here if not needed - added to matching new class if possible */
/* standard-form-row -> form-group                           */
/*   standard-form-label -> col-sm-12 control-label          */
/*     standard-form-label-text -> form-label               */
/*       label -> label                                      */
/*   standard-form-text -> col-sm-12                         */

.standard-form-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: left;
    padding-bottom: 3px;
    padding-right: 20px;
    padding-left: 15px;
    width: 100%;
    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;
}

/* 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;
}

/* workflow user view */

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

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

/* 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;
}

.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;
}

.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;
}

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

.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;
}

/* 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;
}


/* alerts */

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

/* 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 / 4;
}

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

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

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

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

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

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

#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%;
}


/*

#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;
}

/* smartforms */

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

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

/* 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;
  }

  .panel-fancy-left-dark {
    border-radius: 0px;
    box-shadow: none;
  }
  
  .panel-fancy-right {
    border-radius: 0px;
    box-shadow: none;
  }
  
  .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) {
  .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-radius: 0px;
    border-bottom: #3CB448 8px solid;
    border-right: none;
    box-shadow: none;
    margin-bottom: 0px;
    padding:1.8rem;
  }
  
  .panel-fancy-right {
    border-radius: 0px;
    box-shadow: none;
    padding:1.8rem;
  }
  .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) {
  .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-radius: 0px;
    border-bottom: #3CB448 8px solid;
    border-right: none;
    box-shadow: none;
    margin-bottom: 0px;
    padding:1.8rem;
  }
  
  .panel-fancy-right {
    border-radius: 0px;
    box-shadow: none;
    padding:1.8rem;
  }

  .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: 1000;
}

.footer {
	background-color: transparent;
}

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

/*
    DEMO STYLE
*/

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: var(--black-color);
}

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;

  --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-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-border-color: #155366;
  --dark-success-border-color: #245624;
  --dark-warning-border-color: #684008;
  --dark-danger-border-color: #8A221E;

  --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-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;

  --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;


  /* 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 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: inherit;
}

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(--danger-text-color);
	background-color: var(--danger-background-color);
	border-color: var(--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 .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 .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);
}


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;
}

body.high-contrast .calendar table .wn {
	background: #0c0c0c;
}

body.high-contrast .calendar thead .title {
	background: #0c0c0c;
}

body.high-contrast .calendar tfoot .ttip {
	background: #0c0c0c;
}

body.high-contrast .calendar tbody td.selected {
	background: #7E3E3E;
}

body.high-contrast .calendar tbody .rowhilite td {
	background: var(--text-color);
}

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.alert ul li span label,
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%);
}

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-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(255, 255, 255);
	box-shadow: inset 0 2px 4px rgb(255, 255, 255);
}

body.high-contrast .pagination, body.high-contrast #calendar {
	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 > 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;
}

body.high-contrast.dialog .title {
	background-image: none;
	color: var(--black-color) !important;
	background: var(--background-color);
	font-size: 1.8rem;
}

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, 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);
}

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: #f5f5f5 !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 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);
}

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 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 */
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;
}

.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%;
}