/* retrieve color from $colors map ie. `color(primary, base)` */
::placeholder {
  color: #bbb;
  font-style: italic;
}

html {
  font-size: calc(0px + (12 * 100vw / 1600));
}

blockquote {
  margin: 1em 0;
}

h1, h2, h3, h4, h5, h6 {
  color: #ecaa2f;
  /* 2f81bd #*/
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  /*appearance: none;*/
  padding: 0.625em 2.5em 0.625em 0.625em;
  overflow: hidden;
  cursor: pointer;
  margin-right: 1.25em;
  width: 100%;
  /*
  background-image: url("../img/select-arrow-down.svg");
  background-position: 95% center;
  background-size: auto 25%;
  */
  background-image: url("/img/select-arrow.svg");
  background-position: right center;
  background-size: auto 100%;
  background-repeat: no-repeat;
}

input[type="text"]:disabled, input[type="password"]:disabled, select:disabled {
  background-color: #f3f2f1;
  /* #edecea; */
}

.content {
  position: relative;
  max-width: 85%;
}

.main-header {
  display: flex;
}
.main-header h1 {
  margin-top: 0;
}

/* When fullscreen is active, hide the parts of the main header that aren't fixed */
body.fullscreen .main-header {
  position: absolute;
  top: -100vh;
  z-index: 99;
}
body.fullscreen .content {
  max-width: 96vw;
}
body.fullscreen .activity-panel.welcome {
  margin-top: 3.5em;
}

.activity-title h2 {
  margin-top: 0;
}

.nav-popover, .gwt-PushButton.gwt-PushButton-up.nav-popover, .gwt-PushButton.gwt-PushButton-up-hovering.nav-popover {
  border: 1px solid #003b67;
  color: #003b67;
  margin: 0;
  border-radius: 1.8em;
  background-color: #ffffff;
  font-size: 0.8em;
  padding: 0.5em;
  padding-left: 1em;
  padding-right: 1.875em;
  display: inline-block;
  outline-width: 0;
  /* no "focus" highlight */
  position: relative;
}

.nav-popover:after {
  content: "";
  display: block;
  position: absolute;
  align-self: flex-end;
  width: 1.875em;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url("../img/carrot-down.svg");
  background-position: center;
  background-size: 40% auto;
  background-repeat: no-repeat;
}

.nav-popover-menu {
  flex-direction: column;
  background-color: #003b67;
  border-radius: 1.2em;
  width: 12.5em;
  z-index: 99;
  padding: 0.85em;
  position: absolute;
  top: 4.5em;
  right: 0.85em;
  box-shadow: 0 0 0.85em rgba(0, 0, 0, 0.2);
}

.nav-popover-menu:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 0.85em solid transparent;
  border-top: 0 solid transparent;
  position: absolute;
  top: -0.85em;
  right: 3.5em;
  border-bottom: 0.85em solid #003b67;
}

.nav-popover-menu.hidden {
  display: none;
}

.nav-popover-menu a {
  display: block;
  width: 100%;
  border: none;
  text-decoration: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 0.7em;
  text-align: left;
  padding: 0.625em;
}

.nav-popover-menu a:hover {
  color: #ecaa2f;
}

.ie-logo {
  display: inline-block;
  width: 2.5em;
  height: 2.5em;
  background-size: 80%;
  background-image: url("../img/ie-logo-color.png");
  background-repeat: no-repeat;
  margin: 0.5em;
}

.username {
  display: inline-block;
  font-size: 0.7em;
  padding-right: 1em;
  padding-top: 1em;
  color: #aaaaaa;
}

.btn, a.btn, button.btn {
  display: inline-block;
  font-size: 1.25em;
  padding: 0.5em 1em;
  border-radius: 1em;
  border: none;
  background: #ecaa2f;
  color: #ffffff;
  transition: all 1s ease;
  text-decoration: none;
}

.btn:hover, a.btn:hover, button.btn:hover {
  background: #2eae7b;
  color: #ffffff;
}

.btn.demo_only, a.btn.demo_only, button.btn.demo_only {
  margin: 1.5em;
}

.btn.arrow, a.btn.arrow, button.btn.arrow {
  min-width: 7.5em;
  background-image: url("../img/arrow-white.svg");
  background-repeat: no-repeat;
  background-position: right 1.5em top;
  transition: all 0.5s ease;
  text-align: left;
  font-size: 1.2em;
  font-family: "latobold";
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke: 0.03375em;
  padding-right: 3em;
}

.btn.arrow:hover, a.btn.arrow:hover, button.btn.arrow:hover {
  background-position: right 1.125em top;
  background-color: #2eae7b;
  color: #ffffff;
}

a.btn {
  /* Added from simportal... is it necessary? */
  line-height: normal;
}

.btn.ordinary {
  background-color: #699dd8;
}

.btn.ordinary:hover {
  background-color: #498dda;
}

.btn.secondary {
  background-color: #e6bb6b;
}

.btn.secondary:hover {
  background-color: #2eae7b;
}

.btn.danger {
  background-color: #d37373;
}

.btn.danger:hover {
  background-color: #df4040;
}

.btn.action {
  background-color: #60b595;
}

.btn.action:hover {
  background-color: #3ecf98;
}

.btn.subtle {
  background-color: #e6bb6b;
}

.btn.subtle:hover {
  background-color: #2eae7b;
}

.btn.disabled, .btn:disabled {
  background-color: #cccccc;
  cursor: default;
}

.btn.disabled:hover, .btn:disabled:hover {
  background-color: #dfdfdf;
  cursor: default;
}

.error {
  transition: 1s ease;
}

.error.blank {
  visibility: visible;
  opacity: 0;
}

.error.info {
  color: #2f81be;
}

.error.okay {
  color: #2fecaa;
}

.error.warn {
  color: #ecaa2f;
}

.animating-message {
  transition: 1s ease;
  position: relative;
  color: #ff0000;
  font-style: italic;
  margin-top: 1em;
  font-size: 0.8em;
}

.animating-message.panel-message {
  margin-top: 1em;
  top: 0;
}

.animating-message.field-message {
  margin-top: 0;
  top: -0.75em;
  font-size: 1em;
}

.animating-message .message-1, .animating-message .message-2 {
  transition: 1s ease;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
}

.animating-message.relative .message-1, .animating-message.relative .message-2 {
  position: relative;
}

/*
.animating-message .blank {
    opacity: 0; }
*/
.animating-message.message-1 .message-1 {
  opacity: 1;
  z-index: 50;
}

.animating-message.message-1 .message-2 {
  opacity: 0;
}

.animating-message.message-2 .message-1 {
  opacity: 0;
}

.animating-message.message-2 .message-2 {
  opacity: 1;
  z-index: 50;
}

.animating-message .info-message {
  color: #7ac2f8;
}

.animating-message .success-message {
  color: #2fecaa;
}

.animating-message .warn-message {
  color: #ecaa2f;
}

.animating-message .error-message {
  color: #ff0000;
}

.animating-message .system-error-message {
  /* This is much more prominent than a regular error message */
  color: #ffffff;
  background-color: #ff0000;
  border-radius: 0.45em;
  width: 60%;
  margin-left: 20%;
  padding: 0.3em;
  font-size: 1.2em;
  position: fixed;
  top: 0.5em;
}

.panel-message, .ie-dialog .animating-message {
  font-size: 0.8em;
}

.input-panel, .content-panel, .list-panel {
  max-width: calc(100% - 3em);
  background-color: #ffffff;
  font-family: "merriweatherregular";
  font-size: 0.85em;
  border: 1px solid #d5d3cf;
  padding: 0.625em;
  width: 100%;
  border-radius: 0.3em;
  outline: none;
  position: relative;
  z-index: 10;
}

.content-panel.list {
  height: 70vh;
  overflow: auto;
  /*max-width: 85%; */
}

.content-panel .list .disabled, .content-panel .list .inactive {
  color: #eeeeee;
}

.input-panel {
  width: fit-content;
  table-layout: fixed;
  border: none;
  background: #edecea;
  margin: 0;
  max-width: 85%;
}
.input-panel textarea {
  min-height: auto;
  line-height: 1.75em;
}

.input-panel.spaced {
  margin-top: 2em;
}

.input-panel .error.blank {
  visibility: visible;
  opacity: 0;
}

.input-panel .error {
  color: #dd2222;
}

.input-panel .error.okay {
  color: #22aa22;
}

.input-panel .error.info {
  color: #2299dd;
}

.input-panel .error.warn {
  color: #ee9922;
}

.input-panel .display-value {
  padding-top: 0.2em;
}

.list td {
  padding-left: 1em;
  padding-right: 1em;
}
.list td .hierarchy span {
  display: inline-block;
  font-size: 150%;
  color: #aaa;
  margin-top: 0.25em;
}

.list-header {
  font-weight: bold;
}

.embedded-list {
  background-color: white;
  border-radius: 1em;
  padding: 1em;
  margin: 1em;
}

.page-filler {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.page-filler .row {
  border: 1px dotted grey;
}

.page-filler .row.top {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.bottom {
  flex: 0 1 3em;
}

.ie-glass {
  opacity: 0.5;
  background: #444;
  z-index: 999;
  max-height: 100vh;
  max-width: 100vw;
}

.ie-dialog {
  z-index: 1000;
  border-radius: 0.45em;
}

.ie-dilaog.error-dialog {
  border: #ff0000;
}

.ie-dialog .Caption {
  background: #ecaa2f;
  border-top-left-radius: 0.9em;
  border-top-right-radius: 0.9em;
  padding: 0.3em 0.3em 0.3em 0.6em;
  cursor: default;
  font-weight: bold;
  font-size: 1.1em;
  text-align: center;
}

.ie-dialog .dialogContent {
  cursor: inherit;
}

.ie-dialog .dialogMiddleCenter {
  padding: 0.225em;
  background: #dddddd;
}

.ie-dialog > div {
  background: #dddddd;
  border-radius: 0.9em;
  padding-bottom: 0.9em;
}

.ie-dialog > div > table {
  margin-top: 0.45em;
}

.ie-dialog.error-dialog .caption {
  color: #ff0000;
}

.ie-dialog.error-dialog .dialogContent {
  color: #aa0000;
}

.has-tip {
  position: relative;
}

.has-tip:after {
  content: attr(data-tip);
  color: #444;
  position: absolute;
  left: 1.5em;
  top: 1.5em;
  border-radius: 0.45em;
  background: #eee;
  box-shadow: 0.375em 0.375em 1.125em 0.375em rgba(0, 0, 0, 0.27);
  padding: 0.45em;
  max-width: 15em;
  font-size: 0.8em;
  opacity: 0.0;
  transition: all 0.5s ease-in;
  z-index: -1;
}

.has-tip:hover:after {
  opacity: 1.0;
  transition: all 0.5s ease-in;
  z-index: 9;
  /* Was 'inherit'... does that matter somewhere? */
}

.btn.has-tip:after, .pseudo-btn.has-tip:after {
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  left: 2.7em;
  top: 2.7em;
  font-size: 1.1em;
}

.btn.home-button {
  margin-left: 0.9em;
}

.btn.has-tip.tip-left:after, .pseudo-btn.has-tip.tip-left:after {
  left: inherit;
  right: 2.7em;
}

.btn.has-tip.has-long-tip:after, .pseudo-btn.has-tip.has-long-tip:after {
  white-space: normal;
}

.btn.has-tip:hover:after, .pseudo-btn.has-tip:hover:after {
  z-index: 99999;
  width: auto;
  padding: 0.6em;
  /*font-size: large;*/
  /*left: 1.8em;*/
  /*top: 1.8em;*/
  transition-delay: 1s;
}

/* From GWT clean.css for RichTextToolbar */
.gwt-PushButton-up,
.gwt-PushButton-up-hovering,
.gwt-PushButton-up-disabled,
.gwt-PushButton-down,
.gwt-PushButton-down-hovering,
.gwt-PushButton-down-disabled {
  margin: 0;
  text-decoration: none;
  /* background: url("images/hborder.png") repeat-x 0px -27px; */
  border-radius: 0.15em;
  -moz-border-radius: 0.15em;
  /* Added for SimPortal/SimDesigner */
  text-align: center;
  background-color: #ccc;
}

.gwt-PushButton-up,
.gwt-PushButton-up-hovering,
.gwt-PushButton-up-disabled {
  padding: 0.225em 0.375em 0.225em 0.375em;
}

.gwt-PushButton-up {
  border: 1px solid #bbb;
  border-bottom: 1px solid #a0a0a0;
  cursor: pointer;
  cursor: hand;
}

.gwt-PushButton-up-hovering {
  border: 1px solid;
  border-color: #939393;
  cursor: pointer;
  cursor: hand;
}

.gwt-PushButton-up-disabled {
  border: 1px solid #bbb;
  cursor: default;
  opacity: .5;
  filter: alpha(opacity=45);
  zoom: 1;
}

.gwt-PushButton-down,
.gwt-PushButton-down-hovering,
.gwt-PushButton-down-disabled {
  padding: 0.3em 0.3em 0.15em0 0.45em;
  outline: none;
}

.gwt-PushButton-down {
  border: 1px inset #666;
  cursor: pointer;
  cursor: hand;
}

.gwt-PushButton-down-hovering {
  border: 1px solid #939393;
  border-top: 1px solid #333333;
  cursor: pointer;
  cursor: hand;
}

.gwt-PushButton-down-disabled {
  border: 1px outset #ccc;
  cursor: default;
  opacity: 0.5;
  filter: alpha(opacity=45);
  zoom: 1;
}

/*
.gwt-RichTextArea {
}
*/
.hasRichTextToolbar {
  border: 0px;
}

.gwt-RichTextToolbar {
  /* background: #e3e8f3 url(images/hborder.png) repeat-x 0px -2000.225em; */
  border-bottom: 1px solid #BBBBBB;
  padding: 0.225em;
  margin: 0px;
}

.gwt-RichTextToolbar .gwt-PushButton-up {
  padding: 0px 1px 0px 0px;
  margin-right: 0.3em;
  margin-bottom: 0.3em;
  border-width: 1px;
}

.gwt-RichTextToolbar .gwt-PushButton-up-hovering {
  margin-right: 0.3em;
  margin-bottom: 0.3em;
  padding: 0px 1px 0px 0px;
  border-width: 1px;
}

.gwt-RichTextToolbar .gwt-PushButton-down {
  margin-right: 0.3em;
  margin-bottom: 0.3em;
  padding: 0px 0px 0px 1px;
  border-width: 1px;
}

.gwt-RichTextToolbar .gwt-PushButton-down-hovering {
  margin-right: 0.3em;
  margin-bottom: 0.3em;
  padding: 0px 0px 0px 1px;
  border-width: 1px;
}

.gwt-RichTextToolbar .gwt-ToggleButton-up {
  margin-right: 0.3em;
  margin-bottom: 0.3em;
  padding: 0px 1px 0px 0px;
  border: 1px solid #bbb;
  border-bottom: 1px solid #a0a0a0;
}

.gwt-RichTextToolbar .gwt-ToggleButton-up-hovering {
  margin-right: 0.3em;
  margin-bottom: 0.3em;
  padding: 0px 1px 0px 0px;
  border-width: 1px;
}

.gwt-RichTextToolbar .gwt-ToggleButton-down {
  margin-right: 0.3em;
  margin-bottom: 0.3em;
  padding: 0px 0px 0px 1px;
  border-width: 1px;
}

.gwt-RichTextToolbar .gwt-ToggleButton-down-hovering {
  margin-right: 0.3em;
  margin-bottom: 0.3em;
  padding: 0px 0px 0px 1px;
  border-width: 1px;
}

.gwt-ToggleButton-up,
.gwt-ToggleButton-up-hovering,
.gwt-ToggleButton-up-disabled,
.gwt-ToggleButton-down,
.gwt-ToggleButton-down-hovering,
.gwt-ToggleButton-down-disabled {
  margin: 0;
  text-decoration: none;
  /* background: url("images/hborder.png") repeat-x 0px -27px; */
  -moz-border-radius: 0.15em;
  border-radius: 0.15em;
  /* Added for SimPortal/SimDesigner */
  text-align: center;
  background-color: #bbb;
}

.gwt-ToggleButton-up,
.gwt-ToggleButton-up-hovering,
.gwt-ToggleButton-up-disabled {
  padding: 0.225em 0.375em 0.225em 0.375em;
  /* Added for SimPortal/SimDesigner */
  background-color: #ccc;
}

.gwt-ToggleButton-up {
  border: 1px solid #bbb;
  border-bottom: 1px solid #a0a0a0;
  cursor: pointer;
  cursor: hand;
}

.gwt-ToggleButton-up-hovering {
  border: 1px solid;
  border-color: #939393;
  cursor: pointer;
  cursor: hand;
}

.gwt-ToggleButton-up-disabled {
  border: 1px solid #bbb;
  cursor: default;
  opacity: .5;
  zoom: 1;
  filter: alpha(opacity=45);
}

.gwt-ToggleButton-down,
.gwt-ToggleButton-down-hovering,
.gwt-ToggleButton-down-disabled {
  padding: 0.3em 0.3em 0.15em0 0.45em;
}

.gwt-ToggleButton-down {
  background-position: 0 -38.5em;
  border: 1px inset #666;
  cursor: pointer;
  cursor: hand;
}

.gwt-ToggleButton-down-hovering {
  background-position: 0 -38.5em;
  border: 1px inset;
  border-color: #9cf #69e #69e #7af;
  cursor: pointer;
  cursor: hand;
}

.gwt-ToggleButton-down-disabled {
  background-position: 0 -38.5em;
  border: 1px inset #ccc;
  cursor: default;
  opacity: .5;
  zoom: 1;
  filter: alpha(opacity=45);
}

/* Override to not impact pseudo buttons */
.gwt-ToggleButton.pseudo-btn, .gwt-PushButton.pseudo-btn {
  border: none;
  background: transparent;
  padding: 0;
  outline: 0;
}

.gwt-SuggestBox {
  padding: 0.375em 0.3em;
  border: 1px solid #ccc;
  border-top: 1px solid #999;
  font-size: 100%;
  font-family: Arial Unicode MS, Arial, sans-serif;
}

.gwt-SuggestBoxPopup {
  background: #fff;
  padding: 0.3em;
  border-radius: 0.6em;
  box-shadow: 0.375em 0.375em 1.125em 0.375em rgba(0, 0, 0, 0.27);
  margin-left: 0.45em;
  margin-top: 0.45em;
  z-index: 10;
}

.gwt-SuggestBoxPopup .item {
  padding: 0.15em0 0.45em;
  color: #444;
  cursor: default;
  font-size: 90%;
}

.gwt-SuggestBoxPopup .item-selected {
  background: #ee9922;
}

.gwt-SuggestBoxPopup .suggestPopupContent {
  background: #fff;
  border-radius: 0.6em;
}

.gwt-SuggestBoxPopup .suggestPopupTopCenter,
.gwt-SuggestBoxPopup .suggestPopupBottomCenter,
.gwt-SuggestBoxPopup .suggestPopupTopCenterInner,
.gwt-SuggestBoxPopup .suggestPopupBottomCenterInner,
.gwt-SuggestBoxPopup .suggestPopupMiddleLeft,
.gwt-SuggestBoxPopup .suggestPopupMiddleRight,
.gwt-SuggestBoxPopup .suggestPopupMiddleLeftInner,
.gwt-SuggestBoxPopup .suggestPopupMiddleRightInner,
.gwt-SuggestBoxPopup .suggestPopupTopLeftInner,
.gwt-SuggestBoxPopup .suggestPopupTopRightInner,
.gwt-SuggestBoxPopup .suggestPopupBottomLeftInner,
.gwt-SuggestBoxPopup .suggestPopupBottomRightInner,
.gwt-SuggestBoxPopup .suggestPopupTopLeft,
.gwt-SuggestBoxPopup .suggestPopupTopRight,
.gwt-SuggestBoxPopup .suggestPopupBottomLeft,
.gwt-SuggestBoxPopup .suggestPopupBottomRight,
* html .gwt-SuggestBoxPopup .suggestPopupTopLeftInner,
* html .gwt-SuggestBoxPopup .suggestPopupTopRightInner,
* html .gwt-SuggestBoxPopup .suggestPopupBottomLeftInner,
* html .gwt-SuggestBoxPopup .suggestPopupBottomRightInner {
  display: none;
  width: 0px;
  height: 0px;
  overflow: hidden;
}

.pseudo-btn.enable-element {
  text-align: left;
  zoom: 0.75;
}

input.ie-textbox-empty, option.ie-list-empty {
  font-style: italic;
  color: #bbb;
}

div.enhanced-suggest-popup-box div.suggest-popup-content {
  height: 15em;
  overflow: auto;
  font-size: 0.85em;
  background-color: #fefefe;
  padding-right: 1.5em;
}

div.enhanced-suggest-popup-box div.suggest-popup-content span img {
  vertical-align: middle;
  border: none;
  padding: 0 0.375em 0 0.375em;
}

.ie-suggest-alert {
  color: #dd9922;
  font-style: italic;
  /* 	background-color: #2299dd; */
}

.item-selected .ie-suggest-alert {
  color: #aa0000;
}

.ie-suggest-info {
  color: #2299dd;
  font-style: italic;
  /* 	background-color: #2299dd; */
}

.ie-suggest-create {
  color: #22aa22;
  font-style: italic;
  /* 	background-color: #22aa22; */
}

.item-selected .ie-suggest-create {
  color: #117711;
}

.ie-suggest-none, .ie-suggest-disabled, .ie-suggest-rejected {
  color: #aaaaaa;
  font-style: italic;
  /* 	background-color: #22aa22; */
}

.item-selected .ie-suggest-none {
  color: #444444;
}

.ie-capabilities {
  width: 80%;
  max-width: 45em;
}

.dashboard {
  padding: 2.4em;
  margin-bottom: 2.4em;
  /*border: 1px solid #999;*/
  /*border-radius: 0.9em;*/
  width: 100%;
  height: 100%;
  overflow: visible;
}

/*  IE Toggle Switch (modified from https://codepen.io/personable/pen/stpwD) */
.ie-toggle-switch {
  position: relative;
}

.ie-toggle-switch *, .ie-toggle-switch *:before, .ie-toggle-switch *:after {
  box-sizing: border-box;
}

.ie-toggle-switch input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.ie-toggle-switch input[type="checkbox"][disabled] ~ label {
  pointer-events: none;
}

.ie-toggle-switch input[type="checkbox"][disabled] ~ label .ie-toggle-switch__switch {
  opacity: 0.4;
}

.ie-toggle-switch input[type="checkbox"]:checked ~ label .ie-toggle-switch__switch:before {
  content: attr(data-unchecked);
  left: 0;
}

.ie-toggle-switch input[type="checkbox"]:checked ~ label .ie-toggle-switch__switch:after {
  content: attr(data-checked);
}

.ie-toggle-switch label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.ie-toggle-switch label .ie-toggle-switch__label-text {
  flex: 1;
  padding-left: 2.4em;
}

.ie-toggle-switch label .ie-toggle-switch__switch {
  position: relative;
}

.ie-toggle-switch label .ie-toggle-switch__switch:before {
  content: attr(data-checked);
  position: absolute;
  top: 0;
  text-transform: uppercase;
  text-align: center;
}

.ie-toggle-switch label .ie-toggle-switch__switch:after {
  content: attr(data-unchecked);
  position: absolute;
  z-index: 5;
  text-transform: uppercase;
  text-align: center;
  background: white;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.ie-toggle-switch input[type="checkbox"][disabled] ~ label {
  color: rgba(170, 170, 170, 0.5);
}

.ie-toggle-switch input[type="checkbox"]:focus ~ label .ie-toggle-switch__switch, .ie-toggle-switch input[type="checkbox"]:hover ~ label .ie-toggle-switch__switch {
  background-color: #aaa;
}

.ie-toggle-switch input[type="checkbox"]:focus ~ label .ie-toggle-switch__switch:after, .ie-toggle-switch input[type="checkbox"]:hover ~ label .ie-toggle-switch__switch:after {
  color: #919191;
}

.ie-toggle-switch input[type="checkbox"]:hover ~ label {
  color: #9d9d9d;
}

.ie-toggle-switch input[type="checkbox"]:checked ~ label:hover {
  color: #2f8e2f;
}

.ie-toggle-switch input[type="checkbox"]:checked ~ label .ie-toggle-switch__switch {
  background-color: #39ac39;
}

.ie-toggle-switch input[type="checkbox"]:checked ~ label .ie-toggle-switch__switch:after {
  color: #2d862d;
}

.ie-toggle-switch input[type="checkbox"]:checked:focus ~ label .ie-toggle-switch__switch, .ie-toggle-switch input[type="checkbox"]:checked:hover ~ label .ie-toggle-switch__switch {
  background-color: #339933;
}

.ie-toggle-switch input[type="checkbox"]:checked:focus ~ label .ie-toggle-switch__switch:after, .ie-toggle-switch input[type="checkbox"]:checked:hover ~ label .ie-toggle-switch__switch:after {
  color: #267326;
}

.ie-toggle-switch label .ie-toggle-switch__label-text {
  flex: 1;
}

.ie-toggle-switch label .ie-toggle-switch__switch {
  transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
  background: #b7b7b7;
}

.ie-toggle-switch label .ie-toggle-switch__switch:before {
  color: rgba(255, 255, 255, 0.5);
}

.ie-toggle-switch label .ie-toggle-switch__switch:after {
  transition: -webkit-transform 0.3s cubic-bezier(0, 1, 0.5, 1);
  transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
  transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1), -webkit-transform 0.3s cubic-bezier(0, 1, 0.5, 1);
  color: #aaa;
}

.ie-toggle-switch input[type="checkbox"]:focus ~ label .ie-toggle-switch__switch:after, .ie-toggle-switch input[type="checkbox"]:hover ~ label .ie-toggle-switch__switch:after {
  box-shadow: 0 0.225em 0.225em rgba(0, 0, 0, 0);
}

.ie-toggle-switch input[type="checkbox"]:checked ~ label .ie-toggle-switch__switch:after {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  margin-left: -0.1em;
}

.ie-toggle-switch input[type="checkbox"]:checked:focus ~ label .ie-toggle-switch__switch:after, .ie-toggle-switch input[type="checkbox"]:checked:hover ~ label .ie-toggle-switch__switch:after {
  box-shadow: 0 0.225em 0.225em rgba(0, 0, 0, 0);
}

.ie-toggle-switch label {
  font-size: 1em;
}

.ie-toggle-switch label .ie-toggle-switch__switch {
  height: 2.2em;
  /* 30px */
  flex: 0 0 100%;
  /*150px;*/
  border-radius: 2em;
}

.ie-toggle-switch label .ie-toggle-switch__switch:before {
  left: 50%;
  font-size: 0.8em;
  line-height: 2.5em;
  width: 50%;
  padding: 0 1em;
  /*margin-top: 0.15em;*/
}

.ie-toggle-switch label .ie-toggle-switch__switch:after {
  top: 0;
  left: 0;
  margin-top: 0.1em;
  margin-left: 0.1em;
  border-radius: 2em;
  width: 50%;
  line-height: 2.5em;
  font-size: 0.8em;
}

.ie-toggle-switch label .ie-toggle-switch__switch:hover:after {
  box-shadow: 0 0.225em 0.225em rgba(0, 0, 0, 0);
}

.ie-toggle-switch.ie-toggle-switch.size-small input[type="checkbox"]:focus ~ label .ie-toggle-switch__switch:after, .ie-toggle-switch.ie-toggle-switch.size-small input[type="checkbox"]:hover ~ label .ie-toggle-switch__switch:after {
  box-shadow: 0 0.15em 0.15em rgba(0, 0, 0, 0);
}

.ie-toggle-switch.ie-toggle-switch.size-small input[type="checkbox"]:checked ~ label .ie-toggle-switch__switch:after {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  margin-left: -0.1em;
}

.ie-toggle-switch.ie-toggle-switch.size-small input[type="checkbox"]:checked:focus ~ label .ie-toggle-switch__switch:after, .ie-toggle-switch.ie-toggle-switch.size-small input[type="checkbox"]:checked:hover ~ label .ie-toggle-switch__switch:after {
  box-shadow: 0 0.15em 0.15em rgba(0, 0, 0, 0);
}

.ie-toggle-switch.ie-toggle-switch.size-small label {
  font-size: 0.8em;
}

.ie-toggle-switch.ie-toggle-switch.size-small label .ie-toggle-switch__switch {
  height: 2.2em;
  flex: 0 0 7em;
  border-radius: 2em;
}

.ie-toggle-switch.ie-toggle-switch.size-small label .ie-toggle-switch__switch:before {
  left: 50%;
  font-size: 1em;
  line-height: 2em;
  width: 50%;
  padding: 0 1em;
  margin-top: 0.1em;
}

.ie-toggle-switch.ie-toggle-switch.size-small label .ie-toggle-switch__switch:after {
  top: 0;
  left: 0;
  margin-top: 0.1em;
  margin-left: 0.1em;
  border-radius: 2em;
  width: 50%;
  line-height: 2em;
  font-size: 1em;
}

.ie-toggle-switch.ie-toggle-switch.size-small label .ie-toggle-switch__switch:hover:after {
  box-shadow: 0 0.15em 0.15em rgba(0, 0, 0, 0);
}

.ie-toggle-switch.ie-toggle-switch.size-large input[type="checkbox"]:focus ~ label .ie-toggle-switch__switch:after, .ie-toggle-switch.ie-toggle-switch.size-large input[type="checkbox"]:hover ~ label .ie-toggle-switch__switch:after {
  box-shadow: 0 0.3em 0.3em rgba(0, 0, 0, 0);
}

.ie-toggle-switch.ie-toggle-switch.size-large input[type="checkbox"]:checked ~ label .ie-toggle-switch__switch:after {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  margin-left: -0.2em;
}

.ie-toggle-switch.ie-toggle-switch.size-large input[type="checkbox"]:checked:focus ~ label .ie-toggle-switch__switch:after, .ie-toggle-switch.ie-toggle-switch.size-large input[type="checkbox"]:checked:hover ~ label .ie-toggle-switch__switch:after {
  box-shadow: 0 0.3em 0.3em rgba(0, 0, 0, 0);
}

.ie-toggle-switch.ie-toggle-switch.size-large label {
  font-size: 1.2em;
}

.ie-toggle-switch.ie-toggle-switch.size-large label .ie-toggle-switch__switch {
  height: 3em;
  flex: 0 0 12em;
  border-radius: 1.5em;
}

.ie-toggle-switch.ie-toggle-switch.size-large label .ie-toggle-switch__switch:before {
  left: 50%;
  font-size: 1.2em;
  line-height: 2.4em;
  width: 50%;
  padding: 0 1em;
}

.ie-toggle-switch.ie-toggle-switch.size-large label .ie-toggle-switch__switch:after {
  top: 0;
  left: 0;
  margin-top: 0.2em;
  margin-left: 0.2em;
  border-radius: 1.5em;
  width: 50%;
  line-height: 2.3em;
  font-size: 1.2em;
}

.ie-toggle-switch.ie-toggle-switch.size-large label .ie-toggle-switch__switch:hover:after {
  box-shadow: 0 0.3em 0.3em rgba(0, 0, 0, 0);
}

/* Turn off Bigger Stuff for this */
.ie-toggle-switch input[type="checkbox"] + label {
  padding: 0;
}

.ie-toggle-switch input[type="checkbox"] + label:before {
  content: none;
}

/* Blue Switch */
.ie-toggle-switch.blue-switch input[type="checkbox"]:checked ~ label:hover {
  color: #2c79b2;
}

.ie-toggle-switch.blue-switch input[type="checkbox"]:checked ~ label .ie-toggle-switch__switch {
  background-color: #398ece;
}

.ie-toggle-switch.blue-switch input[type="checkbox"]:checked ~ label .ie-toggle-switch__switch:after {
  color: #2a73aa;
}

.ie-toggle-switch.blue-switch input[type="checkbox"]:checked:focus ~ label .ie-toggle-switch__switch,
.ie-toggle-switch.blue-switch input[type="checkbox"]:checked:hover ~ label .ie-toggle-switch__switch {
  background-color: #2f81be;
}

.ie-toggle-switch.blue-switch input[type="checkbox"]:checked:focus ~ label .ie-toggle-switch__switch:after,
.ie-toggle-switch.blue-switch input[type="checkbox"]:checked:hover ~ label .ie-toggle-switch__switch:after {
  color: #256595;
}

/* Orange Switch */
.ie-toggle-switch.orange-switch input[type="checkbox"]:checked ~ label:hover {
  color: #eba421;
}

.ie-toggle-switch.orange-switch input[type="checkbox"]:checked ~ label .ie-toggle-switch__switch {
  background-color: #eeb446;
}

.ie-toggle-switch.orange-switch input[type="checkbox"]:checked ~ label .ie-toggle-switch__switch:after {
  color: #eaa018;
}

.ie-toggle-switch.orange-switch input[type="checkbox"]:checked:focus ~ label .ie-toggle-switch__switch,
.ie-toggle-switch.orange-switch input[type="checkbox"]:checked:hover ~ label .ie-toggle-switch__switch {
  background-color: #ecaa2f;
}

.ie-toggle-switch.orange-switch input[type="checkbox"]:checked:focus ~ label .ie-toggle-switch__switch:after,
.ie-toggle-switch.orange-switch input[type="checkbox"]:checked:hover ~ label .ie-toggle-switch__switch:after {
  color: #d59113;
}

.upload-input-container {
  overflow: hidden;
  position: relative;
}

.upload-input-container [type=file] {
  cursor: inherit;
  display: block;
  font-size: 1em;
  /*filter: alpha(opacity=0); IE nonsense */
  min-height: 100%;
  min-width: 100%;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: right;
  top: 0;
}

.upload-input-container {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: 3em;
  border: none;
  background: #ecaa2f;
  color: #ffffff;
  transition: all 1s ease;
  text-decoration: none;
  font-size: 0.8em;
}

.upload-input-container [type=file] {
  cursor: pointer;
}

.embedded-logo {
  height: 10em;
  opacity: 0.5;
  padding: 0 0.9em;
  vertical-align: middle;
}

.embedded-logo.extra-large {
  height: 20em;
}

.embedded-logo.large {
  height: 9.6em;
}

.embedded-logo.medium {
  height: 4.8em;
}

.embedded-logo.small {
  height: 2.4em;
}

.embedded-logo.tiny {
  height: 1.2em;
}

.welcome-logo {
  position: absolute;
  top: 1em;
  right: 1em;
  opacity: 1;
}

.panel-logo {
  height: 2.4em;
  position: absolute;
  right: 1em;
  top: 1em;
}

.suggestPopupContent img, img.ie-suggest-img {
  height: 1em;
  padding-right: 0.5em;
  vertical-align: middle;
}

.suggestPopupContent i.fas {
  padding-right: 0.5em;
}

.ie-rich-text-area {
  background: white;
  border: 1px solid #d5d3cf;
}

.message-list {
  padding: 0.9em;
}

.message-list h3 {
  text-align: center;
  margin-top: 0;
}

.message-list .p1 h3 {
  color: red;
}

.message-list .p2 h3 {
  color: orange;
}

.message-list i.fas {
  float: left;
}

.ie-comment-msg {
  border: 1px solid graytext;
  border-radius: 0.9em;
  padding: 0.9em;
  width: 50%;
}

.ie-warning-msg {
  border: 1px solid orange;
  border-radius: 0.9em;
  padding: 0.9em;
  width: 50%;
}

.ie-alert-msg {
  border: 0.15em solid red;
  border-radius: 0.9em;
  background-color: #eee;
  padding: 0.9em;
  width: 50%;
}

.message-list .p4 h3, .message-list .p5 h3 {
  color: gray;
}

/* Date Box / Picker Styling */
.dateBoxPopup {
  z-index: 51;
}

.gwt-DateBox {
  padding: 0.375em 0.3em;
  border: 1px solid #ccc;
  border-top: 1px solid #999;
  font-size: 100%;
}

.gwt-DateBox input {
  width: 8em;
}

.dateBoxFormatError {
  background: #ffcccc;
}

.gwt-DatePicker {
  border: 1px solid #ccc;
  border-top: 1px solid #999;
  cursor: default;
}

.gwt-DatePicker td,
.datePickerMonthSelector td:focus {
  outline: none;
}

.datePickerDays {
  width: 100%;
  background: white;
}

.datePickerDay,
.datePickerWeekdayLabel,
.datePickerWeekendLabel {
  font-size: 85%;
  text-align: center;
  padding: 0.3em;
  outline: none;
  font-weight: bold;
  color: #333;
  border-right: 1px solid #EDEDED;
  border-bottom: 1px solid #EDEDED;
}

.datePickerWeekdayLabel,
.datePickerWeekendLabel {
  background: #fff;
  padding: 0px 0.3em 0.15em;
  cursor: default;
  color: #666;
  font-size: 70%;
  font-weight: normal;
}

.datePickerDay {
  padding: 0.3em 0.525em;
  cursor: hand;
  cursor: pointer;
}

.datePickerDayIsWeekend {
  background: #f7f7f7;
}

.datePickerDayIsFiller {
  color: #999;
  font-weight: normal;
}

.datePickerDayIsValue {
  background: #d7dfe8;
}

.datePickerDayIsDisabled {
  color: #AAAAAA;
  font-style: italic;
}

.datePickerDayIsHighlighted {
  background: #F0E68C;
}

.datePickerDayIsValueAndHighlighted {
  background: #d7dfe8;
}

.datePickerDayIsToday {
  padding: 0.225em;
  color: #ecaa2f;
  /*background: url(images/hborder.png) repeat-x 0px -2607px;*/
}

.datePickerMonthSelector {
  width: 100%;
  padding: 1px 0 0.375em 0;
  background: #fff;
}

td.datePickerMonth,
td.datePickerYear {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 100%;
  font-weight: bold;
  color: #333;
}

.datePickerPreviousButton,
.datePickerNextButton,
.datePickerPreviousYearButton,
.datePickerNextYearButton {
  font-size: 120%;
  line-height: 1em;
  color: #3a6aad;
  cursor: hand;
  cursor: pointer;
  font-weight: bold;
  padding: 0px 0.3em;
  outline: none;
}

/* Font Icon Stuff */
/* For Glyphter icons */
.sd-icon {
  zoom: 0.8;
  /* Glyphter icons are too large */
}

.icon-suggest-box {
  display: flex;
}

.icon-suggest-box .suggest-box {
  cursor: inherit;
}

.icon-suggest-box .icon-display {
  color: #666;
  font-size: 1.5em;
  line-height: 2em;
  padding-left: 0.5em;
}

.icon-suggest-box .icon-display.left {
  padding-left: 0;
  padding-right: 0.5em;
}

.sd-icon, .fa, .fas, .fal {
  transition: color 0.5s ease;
  min-width: 1em;
}

.sd-icon.gray, .fa.gray, .fas.gray, .fal.gray {
  color: gray;
}

.sd-icon.red, .fa.red, .fas.red, .fal.red {
  color: red;
}

.sd-icon.blue, .fa.blue, .fas.blue, .fal.blue {
  color: #003b67;
}

.sd-icon.orange, .fa.orange, .fas.orange, .fal.orange {
  color: #ecaa2f;
}

.sd-icon.navy, .fa.navy, .fas.navy, .fal.navy {
  color: #002744;
}

.sd-icon.green, .fa.green, .fas.green, .fal.green {
  color: #2eae7c;
}

.sd-icon.cyan, .fa.cyan, .fas.cyan, .fal.cyan {
  color: #2d9fde;
}

.sd-icon.primary, .fa.primary, .fas.primary, .fal.primary {
  color: #ecaa2f;
}

.sd-icon.primary.subtle, .fa.primary.subtle, .fas.primary.subtle, .fal.primary.subtle {
  color: #e6bb6b;
}

.sd-icon.secondary, .fa.secondary, .fas.secondary, .fal.secondary {
  color: #c99769;
}

.sd-icon.secondary.subtle, .fa.secondary.subtle, .fas.secondary.subtle, .fal.secondary.subtle {
  color: #c59d77;
}

.sd-icon.active, .fa.active, .fas.active, .fal.active {
  color: #5aa85a;
}

.sd-icon.active.subtle, .fa.active.subtle, .fas.active.subtle, .fal.active.subtle {
  color: #75a875;
}

.sd-icon.inactive, .fa.inactive, .fas.inactive, .fal.inactive {
  color: #a75858;
}

.sd-icon.inactive.subtle, .fa.inactive.subtle, .fas.inactive.subtle, .fal.inactive.subtle {
  color: #a87575;
}

.sd-icon.danger, .fa.danger, .fas.danger, .fal.danger {
  color: #ec2f2f;
}

.sd-icon.danger.subtle, .fa.danger.subtle, .fas.danger.subtle, .fal.danger.subtle {
  color: #d37373;
}

.sd-icon.primary:hover, .fa.primary:hover, .fas.primary:hover, .fal.primary:hover {
  color: #2eae7b;
}

.sd-icon.primary.subtle:hover, .fa.primary.subtle:hover, .fas.primary.subtle:hover, .fal.primary.subtle:hover {
  color: #2eae7b;
}

.sd-icon.secondary:hover, .fa.secondary:hover, .fas.secondary:hover, .fal.secondary:hover {
  color: #d78c47;
}

.sd-icon.secondary.subtle:hover, .fa.secondary.subtle:hover, .fas.secondary.subtle:hover, .fal.secondary.subtle:hover {
  color: #d78c47;
}

.sd-icon.active:hover, .fa.active:hover, .fas.active:hover, .fal.active:hover {
  color: #4d924d;
}

.sd-icon.active.subtle:hover, .fa.active.subtle:hover, .fas.active.subtle:hover, .fal.active.subtle:hover {
  color: #4d924d;
}

.sd-icon.inactive:hover, .fa.inactive:hover, .fas.inactive:hover, .fal.inactive:hover {
  color: #e26060;
}

.sd-icon.inactive.subtle:hover, .fa.inactive.subtle:hover, .fas.inactive.subtle:hover, .fal.active.subtle:hover {
  color: #e26060;
}

.sd-icon.danger:hover, .fa.danger:hover, .fas.danger:hover, .fal.danger:hover {
  color: #df4040;
}

.sd-icon.danger.subtle:hover, .fa.danger.subtle:hover, .fas.danger.subtle:hover, .fal.danger.subtle:hover {
  color: #df4040;
}

.fa-faded {
  opacity: 0.3;
}

.center {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
}

.activate-text-box, .icon-text-area {
  outline: 0;
  /*
  .inner-panel {
  height: 2em;
  }
  */
}
.activate-text-box div, .icon-text-area div {
  display: inline-block;
}
.activate-text-box .inner-panel, .icon-text-area .inner-panel {
  width: 100%;
}
.activate-text-box .inner-panel .ita-icon, .icon-text-area .inner-panel .ita-icon {
  vertical-align: top;
}
.activate-text-box .inner-panel i, .icon-text-area .inner-panel i {
  cursor: pointer;
}
.activate-text-box input[type="text"]:disabled, .activate-text-box input[type="password"]:disabled, .activate-text-box textarea:disabled, .activate-text-box select:disabled, .icon-text-area input[type="text"]:disabled, .icon-text-area input[type="password"]:disabled, .icon-text-area textarea:disabled, .icon-text-area select:disabled {
  background-color: transparent;
  border-color: transparent;
}
.activate-text-box .no-data, .icon-text-area .no-data {
  color: #c99769;
}
.activate-text-box .has-data, .icon-text-area .has-data {
  color: #ecaa2f;
}
.activate-text-box .hidden, .icon-text-area .hidden {
  opacity: 0;
  height: 0;
  width: 0;
  transition: all 1s ease-in-out;
}

.activate-text-box.h1 input[type="text"], .activate-text-box.h1 input[type="password"], .activate-text-box.h1 textarea, .activate-text-box.h1 select {
  color: #003b67;
  font-size: 2em;
}

.activate-text-box.h2 input[type="text"], .activate-text-box.h2 input[type="password"], .activate-text-box.h2 textarea, .activate-text-box.h2 select {
  color: #003b67;
  font-size: 1.5em;
}

.activate-text-box.h3 input[type="text"], .activate-text-box.h3 input[type="password"], .activate-text-box.h3 textarea, .activate-text-box.h3 select {
  color: #003b67;
  font-size: 1.25em;
}

.header-tr h1, .header-tr h2, .header-tr h3, .header-tr h4, .header-tr h5, .header-tr h6 {
  margin-top: 0;
}

.floating-toolbar, .fixed-toolbar {
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  height: 3.75em;
  background-color: #ddd;
  border-radius: 0.9em;
}
.floating-toolbar table, .fixed-toolbar table {
  position: relative;
  top: -0.5em;
}
.floating-toolbar table tr td:first-child, .fixed-toolbar table tr td:first-child {
  padding-left: 0.25em;
}
.floating-toolbar table tr td:last-child, .fixed-toolbar table tr td:last-child {
  padding-right: 0.25em;
}
.floating-toolbar .btn, .floating-toolbar a.btn, .floating-toolbar button.btn, .fixed-toolbar .btn, .fixed-toolbar a.btn, .fixed-toolbar button.btn {
  top: 0.9em;
  font-size: 1.25em;
  /* 1.5em */
  width: 2.25em;
  /* 1.8em */
  height: 2.25em;
  /* 1.8em */
  text-align: center;
  margin: 0 0.25em;
  padding: 0;
}

.fixed-toolbar {
  position: fixed;
  background-color: transparent;
}
.fixed-toolbar table {
  top: 0;
}
.fixed-toolbar .btn, .fixed-toolbar a.btn, .fixed-toolbar button.btn {
  top: 0;
}

input.hide-when-disabled:disabled {
  color: white;
  /* This basically hides the value */
  opacity: 0.3;
  transition: all 1s ease;
}
input.hide-when-disabled:disabled .field-label {
  opacity: 0.3;
}

.search-toggle {
  display: inline-block;
  padding-top: 0.5em;
}
.search-toggle label {
  text-align: left;
  padding-top: 0.25em;
}

.component-title {
  display: flex;
  color: #ecaa2f;
}
.component-title input {
  color: #ecaa2f;
  font-size: 0.75em;
  width: 25em;
}

table.field-table {
  border-spacing: 0.85em;
  border-collapse: separate;
  width: 100%;
}

.component-child h1, .component-child h2, .component-child h3, .component-child h4, .component-child h5, .component-child h6 {
  margin-top: 0;
}

.rows-flow {
  height: 70vh;
  /* THIS IS INADEQUATE; Need to figure out how to use calc() to make this equal the vertical space left on the page. */
  overflow-y: scroll;
  transition: all 0.5s ease;
}
.rows-flow .filtered {
  display: none;
}
.rows-flow .dynamic-row {
  margin-left: 0;
  padding-left: 2em;
  border-top: 0.15em solid #999;
  transition: all 0.5s ease;
}
.rows-flow input {
  margin: 0.25em 0.5em;
  width: 30em;
}
.rows-flow textarea, .rows-flow .icon-text-area, .rows-flow .field-cluster.text-area {
  margin: 0.25em 0.5em;
  width: calc(100% - 2.4em);
}
.rows-flow select {
  margin: 0.25em 0.5em;
  width: 10em;
}
.rows-flow img {
  vertical-align: top;
  width: 3.75em;
  margin: 0.25em 0.5em;
}
.rows-flow .dynamic-row.flex {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
}
.rows-flow .dynamic-row.flex .flow_field.use100 {
  flex: 0 0  100%;
}
.rows-flow .dynamic-row.flex .flow_field.use98 {
  flex: 0 0   98%;
}
.rows-flow .dynamic-row.flex .flow_field.use95 {
  flex: 0 0   95%;
}
.rows-flow .dynamic-row.flex .flow_field.use80 {
  flex: 0 0   80%;
}
.rows-flow .dynamic-row.flex .flow_field.use75 {
  flex: 0 0   75%;
}
.rows-flow .dynamic-row.flex .flow_field.use50 {
  flex: 0 0   50%;
}
.rows-flow .dynamic-row.flex .flow_field.use33 {
  flex: 0 0   33%;
}
.rows-flow .dynamic-row.flex .flow_field.use30 {
  flex: 0 0   30%;
}
.rows-flow .dynamic-row.flex .flow_field.use25 {
  flex: 0 0   25%;
}
.rows-flow .dynamic-row.flex .flow_field.use20 {
  flex: 0 0   20%;
}
.rows-flow .dynamic-row.flex .flow_field.use15 {
  flex: 0 0   15%;
}
.rows-flow .dynamic-row.flex .flow_field.use10 {
  flex: 0 0   10%;
}
.rows-flow .dynamic-row.flex .flow_field.use5 {
  flex: 0 0    5%;
}
.rows-flow .dynamic-row.flex .flow_field.filler100 {
  flex: 1 0 100%;
  visibility: hidden;
}
.rows-flow .dynamic-row.flex .flow_field.filler98 {
  flex: 1 0 98%;
  visibility: hidden;
}
.rows-flow .dynamic-row.flex .flow_field.filler95 {
  flex: 1 0 95%;
  visibility: hidden;
}
.rows-flow .dynamic-row.flex .flow_field.filler90 {
  flex: 1 0 90%;
  visibility: hidden;
}
.rows-flow .dynamic-row.flex .flow_field.filler80 {
  flex: 1 0 80%;
  visibility: hidden;
}
.rows-flow .dynamic-row.flex .flow_field.filler75 {
  flex: 1 0 75%;
  visibility: hidden;
}
.rows-flow .dynamic-row.flex .flow_field.filler70 {
  flex: 1 0 70%;
  visibility: hidden;
}
.rows-flow .dynamic-row.flex .flow_field.filler65 {
  flex: 1 0 65%;
  visibility: hidden;
}
.rows-flow .dynamic-row.flex .flow_field.filler60 {
  flex: 1 0 60%;
  visibility: hidden;
}
.rows-flow .dynamic-row.flex .flow_field.filler50 {
  flex: 1 0 50%;
  visibility: hidden;
}
.rows-flow .dynamic-row.flex .flow_field.filler33 {
  flex: 1 0 33%;
  visibility: hidden;
}
.rows-flow .dynamic-row.flex .flow_field.filler25 {
  flex: 1 0 25%;
  visibility: hidden;
}
.rows-flow .dynamic-row.flex .flow_field.filler20 {
  flex: 1 0 20%;
  visibility: hidden;
}
.rows-flow .dynamic-row.flex .flow_field.filler15 {
  flex: 1 0 15%;
  visibility: hidden;
}
.rows-flow .dynamic-row.flex .flow_field.filler10 {
  flex: 1 0 10%;
  visibility: hidden;
}
.rows-flow .dynamic-row.flex .flow_field.filler5 {
  flex: 1 0 5%;
  visibility: hidden;
}
.rows-flow .dynamic-row.flex .icon-text-area.flow_field {
  height: 2.5em;
}
.rows-flow .dynamic-row.flex .icon-text-area.flow_field textarea {
  left: 0;
  position: absolute;
  width: 85%;
  z-index: 50;
  margin-top: -0.3em;
}
.rows-flow .dynamic-row.flex .icon-text-area.flow_field textarea.hidden {
  z-index: -1;
}
.rows-flow .dynamic-row.flex.filtered {
  display: none;
}

.rows-flow.collapsed {
  height: 3em;
  opacity: 0.3;
}

.rows-tab {
  height: 70vh;
  width: 100%;
  overflow-y: auto;
}
.rows-tab .gwt-TabLayoutPanelContentContainer {
  margin-top: 0.5em;
  overflow: auto;
}
.rows-tab input {
  margin: 0.25em 0.5em;
  width: 30em;
}
.rows-tab textarea, .rows-tab .icon-text-area, .rows-tab .field-cluster.text-area {
  margin: 0.25em 0.5em;
  width: calc(100% - 2.4em);
}
.rows-tab select {
  margin: 0.25em 0.5em;
  width: 10em;
}
.rows-tab img {
  vertical-align: top;
  width: 3.75em;
  margin: 0.25em 0.5em;
}
.rows-tab .dynamic-row {
  margin-left: 0;
  border: none;
}
.rows-tab .dynamic-row .rows-flow .dynamic-row {
  margin-top: 0.5em;
  padding-top: 0.5em;
  margin-left: 0;
  border-top: 0.15em solid #999;
}
.rows-tab .dynamic-row .rows-flow .dynamic-row .field-cluster.text-area {
  width: calc(100% - 1.2em);
}
.rows-tab .filtered {
  opacity: 0.5;
  /* No need to hide the tab, because it can't be selected, but we fade it in case it happens by accident */
}
.rows-tab .gwt-TabLayoutPanelTabs {
  border-bottom: 1px solid #ddd;
}
.rows-tab .gwt-TabLayoutPanelTab {
  padding: 0.5em;
  border-radius: 0.6em;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-left: 1px solid #BBB;
  border-right: 1px solid #BBB;
  border-top: 1px solid #BBB;
  background-color: #ccc;
  color: #999;
}
.rows-tab .gwt-TabLayoutPanelTab-selected {
  padding: 0.5em;
  border-radius: 0.6em;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-left: 1px solid #999;
  border-right: 1px solid #999;
  border-top: 1px solid #999;
  background-color: inherit;
  color: #ecaa2f;
}
.rows-tab .gwt-TabLayoutPanelTab.filtered, .rows-tab .gwt-TabLayoutPanelTab-selected.filtered {
  display: none;
}

.reorderable-container .reorderable-target {
  color: #8f897c;
  background: #c99769;
  padding: 0.625em;
  padding-left: 3.75em;
  position: relative;
  display: flex;
  overflow: hidden;
  margin: 0 auto;
  z-index: 1;
  margin-bottom: 0.5em;
  border-radius: 2.4em;
  border: 1px solid #d5d3cf;
}
.reorderable-container .reorderable-target:last-child {
  margin-bottom: 0;
}
.reorderable-container .reorderable-helicopter {
  height: 0;
  position: absolute;
  left: 1.25em;
  right: 1.25em;
  width: 100%;
  min-height: 0.15em;
  background: green;
  z-index: 100;
}
.reorderable-container .reorderable-helicopter div {
  position: relative;
  top: 0;
}
.reorderable-container .reorderable-item .reorderable-handle {
  display: inline-block;
  position: absolute;
  left: -2.5em;
  top: calc(50% - 4em );
  width: 2em;
  height: 4em;
}
.reorderable-container .reorderable-item .reorderable-handle::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#e6bb6b 40%, transparent 40%);
  background-size: 1em 1em;
  background-position: 0 100%;
  background-repeat: repeat;
  transition: 1s color ease;
}
.reorderable-container .reorderable-item .reorderable-handle:hover::before {
  background-image: radial-gradient(#ecaa2f 40%, transparent 40%);
}
.reorderable-container .reorderable-item .reorderable-indicator {
  display: none;
}

.reorderable-container.reorderable-collapsed .reorderable-item .rows-flow {
  height: 3em;
  opacity: 0.3;
}

.flex-grid {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  overflow: visible;
  position: relative;
}
.flex-grid .flex-grid-row {
  flex: 0 0 auto;
  position: relative;
}
.flex-grid .flex-grid-row .flex-grid-item {
  flex: 1 1 auto;
}
.flex-grid .flex-grid-row button.flex-grid-item, .flex-grid .flex-grid-row .btn.flex-grid-item {
  height: 2.25em;
  width: 3.5em;
  /* margin-top: -0.25em; */
  flex: 0 0 3.5em;
  margin-left: 0.25em;
  margin-right: 0.25em;
}
.flex-grid .flex-grid-row .pseudo-btn.flex-grid-item {
  height: 2.25em;
  width: 3.5em;
  margin-top: -0.4em;
  /* -0.725em; */
  flex: 0 0 3.5em;
  margin-left: 0.25em;
  margin-right: 0.25em;
}
.flex-grid .flex-grid-row .gwt-HTML.flex-grid-item {
  min-height: 2.5em;
  margin-top: 0.3em;
}
.flex-grid .flex-grid-row .reorderable-handle.flex-grid-item {
  position: unset;
  width: 3.5em;
  flex: 0 0 3.5em;
  height: 2em;
  margin-top: 0;
  margin-right: 2em;
  transform: scale(0.6);
  /* Was 0.8 before 02/27/2020 */
}
.flex-grid .reorderable-target {
  width: 100%;
}
.flex-grid .reorderable-helicopter {
  background-color: #e0e0e0;
  border-radius: 3em;
  opacity: 0.7;
}
.flex-grid .reorderable-helicopter .flex-grid-row {
  margin-top: -1.25em;
}

/*
.embedded-list.reorderable-container {
	.reorderable-item {
		.reorderable-handle {
			position: relative;
			left: 0;
			transform: scale(0.8);
			opacity: 0.5;
		}
	}
}
*/
.component-list-grid {
  justify-content: center;
}

.story-content, .story-sequence {
  min-width: 75em;
}
.story-content .rows-flow, .story-sequence .rows-flow {
  height: auto;
  overflow-y: auto;
}
.story-content .rows-flow.collapsed, .story-sequence .rows-flow.collapsed {
  height: 3em;
  opacity: 0.3;
}
.story-content .reorderable-container, .story-sequence .reorderable-container {
  /* Designed to mirror the container behavior for story content, for sizing/positioning purposes */
}
.story-content .reorderable-container .reorderable-item .reorderable-handle, .story-sequence .reorderable-container .reorderable-item .reorderable-handle {
  left: calc(50% - 4em );
  top: 0.5em;
  width: 6em;
  height: 2em;
}
.story-content .reorderable-container .reorderable-helicopter, .story-sequence .reorderable-container .reorderable-helicopter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 2em;
  background-color: #ccc;
  /* theme-color(secondary, subtle); */
  opacity: 0.5;
}

.field-cluster {
  display: inline-block;
  position: relative;
}
.field-cluster label.field-label {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
  margin-right: 1em;
  margin-top: 0.5em;
  color: #999;
  font-size: smaller;
}
.field-cluster textarea {
  margin: 0;
  width: 100%;
}

.field-cluster.use100 {
  width: 100%;
}

.field-cluster.use98 {
  width: 98%;
}

.field-cluster.use95 {
  width: 95%;
}

.field-cluster.use80 {
  width: 80%;
}

.field-cluster.use75 {
  width: 75%;
}

.field-cluster.use50 {
  width: 50%;
}

.field-cluster.use33 {
  width: 33%;
}

.field-cluster.use30 {
  width: 30%;
}

.field-cluster.use25 {
  width: 25%;
}

.field-cluster.use20 {
  width: 20%;
}

.field-cluster.use15 {
  width: 15%;
}

.field-cluster.use10 {
  width: 10%;
}

.field-cluster.use5 {
  width: 5%;
}

field-cluster.text-area label.field-label {
  margin-right: calc(1em + 2.4em);
}

button.disclosure-arrow {
  background: none;
  border: none;
  color: #666;
}
button.disclosure-arrow i {
  font-size: 3em;
  transform: rotate(90deg);
  transition: all 0.5s ease;
}

button.disclosure-arrow.disclosure-closed i {
  transform: rotate(0);
}

table.gwt-DisclosurePanel a {
  background-image: none;
  /* bigger.css is adding this, so it needs to be removed until bigger.css is merged here */
  text-decoration: none;
  color: #666;
  font-family: "latobold";
  text-transform: uppercase;
  font-size: 1.25em;
}

table.gwt-DisclosurePanel a i {
  display: inline;
  padding-right: 0.25em;
}

table.gwt-DisclosurePanel.gwt-DisclosurePanel-closed a i:before {
  width: 1em;
  text-align: center;
  display: inline-block;
  transition: all 0.5s ease;
}

table.gwt-DisclosurePanel.gwt-DisclosurePanel-open a i:before {
  transform: rotate(90deg);
  width: 1em;
  text-align: center;
  display: inline-block;
  transition: all 0.5s ease;
}

.gwt-DisclosurePanel .content {
  width: 100%;
  height: auto;
  background: transparent;
}
.gwt-DisclosurePanel .content .rows-flow {
  height: auto;
  overflow-y: auto;
}

.dynamic-table td {
  text-align: center;
  border-spacing: 0.5em;
}
.dynamic-table td .table-title-box, .dynamic-table td .table-cell-field {
  min-width: 12em;
}
.dynamic-table td .table-title-box {
  font-size: 1.25em;
}
.dynamic-table td .table-type-selector {
  min-width: 8em;
}
.dynamic-table td .table-remove-button {
  width: 2em;
  padding: 0.5em;
}
.dynamic-table td .table-selector {
  margin: 0.25em;
  display: inline-block;
}
.dynamic-table td .invalid-value {
  box-shadow: 0 0 0.15em 0.15em #ff8888 inset;
}