/* ======= VARIABLES ======== */
.btn-danger {
  background-color: #D4403A;
  border-color: #d03535; }

/*
     darken( $base-color, 10% )
     lighten( $base-color, 10% )
    */
/*       END VARIABLES         */
.btn {
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; }

/* ============== Time Out ================= */
#divTimeout {
  display: inline-block;
  position: relative;
  opacity: .5;
  transition: opacity .3s;
  padding: 3px;
  margin-bottom: 1em;
  background-color: #8080802b; }
  #divTimeout:hover {
    opacity: 1; }
  #divTimeout.danger {
    opacity: 1;
    position: sticky;
    top: 10px;
    background-color: #900;
    color: white; }
    #divTimeout.danger #timeremaining {
      color: white;
      background-color: rgba(0, 0, 0, 0.2);
      padding: 3px; }
  #divTimeout .alert {
    display: inline-block;
    padding-right: 8em;
    background-color: #fff3cd; }
  #divTimeout.time__final {
    position: fixed;
    top: 10px;
    left: -2px;
    opacity: 1;
    z-index: 1000;
    background-color: #d61d00;
    width: 103%;
    box-shadow: 2px 2px 2px #300;
    padding-left: 100px;
    color: white;
    font-weight: bold;
    padding-top: 0;
    padding-bottom: 0; }
    #divTimeout.time__final #timeremaining {
      top: 0;
      background-color: #4a4a4a4a;
      color: #ffffff;
      font-weight: bold;
      display: inline-block;
      padding: 0 5px; }
  #divTimeout #timeremaining {
    right: 1em;
    top: 18%;
    background-color: #fff3cd4a;
    color: #856404;
    font-weight: bold; }
    #divTimeout #timeremaining::before {
      content: "\f017";
      font-family: fontawesome;
      font-weight: normal;
      padding-right: 3px; }

/* ========================================== */
.btn-xs {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px; }

/* fade in animation */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

[id^="ctrl"] {
  animation: fadeIn 1s; }

/* hide the second h1 that's from an interior page, redundant with the page editor title */
h1:not(:empty) ~ h1 {
  display: none; }

u {
  text-decoration: none;
  font-weight: bold; }

input:invalid,
select:invalid,
textarea:invalid {
  border-color: #990000;
  color: #990000; }

.form-display * {
  box-sizing: border-box;
  /* made forms use the newer box model that BS uses */ }

/* For email receipts missing much of website's template html, like .wrapper. Use CSS 1! */
body .form-display {
  text-align: left;
  background-color: #fff;
  padding: 1em; }

.form-display {
  font-size: 14px; }

/* forgot password */
/* /forgot password */
.form-display a[href*="loadDebug"] {
  color: #076aff;
  text-decoration: underline; }

.form-display .help-block {
  font-size: 10px; }

.form-display legend {
  margin-top: 0;
  margin-bottom: 0;
  /* dh 3/27/17 was 1em, but this pushes the fieldset's content down */ }

.form-display th {
  background-color: rgba(255, 255, 255, 0.9);
  vertical-align: bottom; }

.form-display .list-unstyled {
  line-height: 139%; }

.form-display td {
  vertical-align: top;
  /* border: 1px dashed #ccc; */ }

.form-display fieldset + .formMgr tr:first-child td,
.form-display p + .formMgr tr:first-child td {
  padding-top: 0;
  /* first row doesn't need so much space */ }

/* inline w BS5 .form-check */
.form-check__wrapper {
  display: flex;
  flex-direction: column;
  gap: 0 1em; }

/* undo what we do to left radio labels */
.form-check__wrapper .label:not([class*='label-']) {
  color: #707070;
  font-weight: 600;
  text-align: left;
  padding-left: 0; }

.form-display .form-check__wrapper.left {
  flex-direction: row;
  align-items: top; }

.form-display .form-check br {
  display: none; }

.form-display .required .form-check__wrapper .label:not([class*='label-']) {
  color: #8b0202bf;
  font-weight: 600;
  transition: color .3s; }

.form-display .required.is-valid .form-check__wrapper .label:not([class*='label-']) {
  color: #3c763d; }

/* end checkbox/radio groups */
/* explanation fields */
.form-display .field--explanation label,
.form-display .field--explanation label:not([class]),
.form-display label[for^="exp_disc"]:not([class]) {
  text-align: left; }

/*


/* align lists of checkboxes by setting widths on the columns */
.form-display .label-right input[type="checkbox"] + span + label.RIGHT,
.form-display .label-right input[type="checkbox"] + label.RIGHT {
  max-width: calc(100% - 28px - 1rem);
  line-height: 1.3em; }

/* end checkbox lists */
.form-display input {
  height: auto; }

.form-display input.input-line {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important; }

.form-display .prefix-in-input {
  position: absolute;
  padding-top: 5px;
  padding-left: 5px; }

.form-display fieldset td:first-child span.prefix-in-input {
  padding-left: 5px; }

.form-display .prefix-in-input + input[type],
.form-display .prefix-in-input + input,
.form-display .prefix-in-input + select,
.form-display .prefix-in-input + textarea {
  padding-left: 16px; }

/* BS form styles */
.form-display .tooltip-inner {
  text-align: left;
  max-width: 230px; }

.form-display :required {
  border: 1px solid #8c0000;
  transition: border .3s; }

.form-display .row {
  margin-bottom: 20px; }

.form-display .form-control {
  color: #000; }

.form-display .form-inline .form-group {
  vertical-align: top; }

.form-display .form-horizontal .control-label {
  text-align: right; }

.form-display .control-label {
  font-weight: bold; }

.form-display .table-header {
  font-weight: bold;
  /*background-color: white;*/ }

.form-display tr.hr-rowbelow td {
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px; }

.form-display label.RIGHTFULL {
  float: none;
  width: calc(100% - 28px - 1rem);
  white-space: normal;
  vertical-align: top;
  line-height: 1.3; }

.form-display input[type="text"] + label.RIGHT {
  display: inline; }

/* ---- Undo client template form things   */
.form-display input:invalid,
.form-display textarea:invalid {
  /* border-radius: inherit; */
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none; }

.form-display label {
  text-align: left; }

/* ----------------------------------------*/
.form-display .question {
  font-weight: bold;
  padding-top: 1em; }

/* ------------empty fields ----------------- */
/*  input[value=""]:empty {
   border-color: #999;
 } */
.form-display td:not([data-label]):empty,
.form-display td.emptycell,
.form-display tr.emptycell,
.form-display td[name=emptycell],
.form-display td[name=emptycell] * {
  display: none; }

.form-display td.visible {
  display: inherit !important; }

/* end empty fields ----------------------------- */
/***************************** SSO **************************/
.sso__link {
  display: block;
  background-size: contain;
  background-color: transparent;
  background-repeat: no-repeat; }

.sso__link--g {
  max-width: 190px;
  width: 190px;
  height: 45px;
  background-image: url(/db/live/images/google-sign-on/2x/btn_google_signin_light_normal_web@2x.png); }

.sso__link--g img {
  /* display: none; */ }

.sso__link--g:hover,
.sso__link--g:focus {
  background-image: url(/db/live/images/google-sign-on/2x/btn_google_signin_light_pressed_web@2x.png); }

/* after we get google account, ask them to login to DB */
.sso__authd--g {
  padding: 1em;
  background-color: #dfefdf;
  display: block;
  overflow: hidden;
  border: 1px solid #819c81;
  color: #1f6d1f; }

.sso__authd--g::before {
  width: 30px;
  height: 30px;
  content: "";
  margin-right: 1em;
  background-image: url(/db/live/images/google-sign-on/g-logo.png);
  display: block;
  background-size: 30px 30px;
  float: left;
  padding: 5px;
  border: 1px solid #aca;
  background-repeat: no-repeat;
  background-color: white;
  text-align: center;
  background-position: center; }

.sso__authd--g:after {
  content: " \2193"; }

/***************************** /SSO **************************/
#divButtons {
  margin-top: 2em; }

/*************************** PDF styles **********************/
#divButtons + br,
#divButtons + br + br,
br:has(+ #divButtons) {
  display: none; }

/* page file name */
.form-display > div[align=center]:first-of-type:first-child {
  position: absolute;
  margin-top: -2em;
  right: 2em; }

/********************************** / PDF styles ****************************/
.form-display .form-group label {
  margin-bottom: 2px; }

.form-display .required label,
.form-display td:has(+ td .radio-inline input:invalid) [data-type="descYN"] {
  color: #8c0000;
  font-weight: bold;
  transition: color .3s; }

.form-display td.has-error-find {
  background-color: rgba(165, 0, 0, 0.04);
  padding: 10px; }

.form-display .required.is-valid label {
  color: #3c763d;
  transition: color .3s; }

@media print {
  .form-display .required label {
    color: #3c763d; } }

.form-display .required.is-valid label,
.form-display label:has(+ input:required:valid),
.form-display label:has(+ textarea:required:valid),
.form-display label:has(+ select:required:valid),
.form-display td:not(.required):has(+ td .radio-inline input:valid) [data-type="descYN"],
.form-display td:has(select:required:valid) label {
  color: #3c763d;
  transition: color .3s; }

.form-display label.label-small {
  font-size: smaller; }

.form-display .bodyItalic {
  font-style: italic; }

/* add asterisk after required labels */
.form-display .required label:after,
.form-display .required [data-type="descYN"]:after {
  content: "*";
  color: #ce0000;
  font-size: 1.2em;
  line-height: 50%;
  transition: color .3s;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  margin-top: .2em;
  font-style: normal;
  position: absolute;
  /*vertical-align: text-bottom;*/ }

/* fade out label asterisk if valid */
.form-display .required input:valid + label:after,
.form-display .required.is-valid label:after,
.form-display .required.is-valid [data-type="descYN"]:after {
  color: rgba(204, 8, 1, 0.5); }

.cont-descYN {
  width: 85%; }

/* we're using cont-descyn even for text input fields, in order to get the id ::before. We don't want these red */
.cont-descYN label:first-of-type {
  color: inherit; }

/* radio-inline should be at least as wide as a yes/no */
.form-display label.radio-inline {
  min-width: 4.6em; }

/* make No line up with second radio col */
.form-display .field-yn .radio-inline + .radio-inline {
  max-resolution: left 0; }

/* DH 9/21/2016 for NDBOM*/
.form-display .radiolabel {
  display: inline-block; }

/* DH 2/6/2018 attempt to make radios line up with YN */
td.text-nowrap > input[type="radio"] {
  /* sets up the first such column, selects the radios that aren't YN -- DH 2/12/2018 but makes longer labels like iret pay look bad! */
  margin-left: 0;
  /* dh 10/14/2018 more lining up effort. Looks good here at least: https://dev.services.wvbop.com/inspection/facility//general1.asp?action=debugForm&formID=88837 */
  vertical-align: middle; }

td.text-nowrap + td.text-nowrap > input[type="radio"] {
  /* sets up the second such column, selects the radios that aren't YN */
  margin-left: 0; }

td.text-nowrap.autowidth > input[type="radio"] {
  /* override too-big margin (e.g. iret pay.asp) */
  margin-left: 11px; }

/* end radio yn */
.form-display .field-yn.radio-group {
  min-width: 160px;
  /* dh7/26/2018 was 150 */ }

.form-display .field-yn .radio-inline {
  padding-left: 0;
  width: 50%;
  margin-left: 0;
  float: left; }

.form-display .field-yn .radio-inline input {
  position: inherit;
  margin-left: 0;
  margin-top: 5px; }

.form-display .field-yn .radio-inline .radiolabel {
  display: inline-block; }

/* don't add asterisks for the radio inlines, because we have a span */
.form-display .required label.radio-inline:after {
  content: ""; }

/* if required, add the asterisk to radioinline spans  */
.form-display .required span.radiolabel:after,
.form-display input[required]:invalid + label:after,
.form-display input:required + span.radiolabel:after,
.form-display td:has([data-type="descYN"]).required [data-type="descYN"]:after {
  content: "*";
  color: #ce0000;
  /* was CC0808 */
  font-size: 1.2em;
  line-height: 50%;
  transition: color .3s; }

/* fade out label if valid */
.form-display input:valid + span.radiolabel:after,
.form-display input[required]:valid + label:after,
.form-display td:has(+ td .radio-inline input:valid).required [data-type="descYN"]:after {
  /* color: rgba(204, 8, 1, .5); */
  /* color: lighten(desaturate( $color-error, 40%), 40% ); /* was #E58380 */
  color: rgba(165, 0, 0, 0.5); }

.form-display input:invalid,
.form-display input[type="text"]:invalid,
.form-display input[type="email"]:invalid,
.form-display input[type="tel"]:invalid,
.form-display input[type="date"]:invalid,
.form-display input[type="number"]:invalid,
.form-display input[type="password"]:invalid,
.form-display textarea:invalid,
.form-display select:invalid,
.form-display .required input:invalid,
.form-display .required textarea:invalid,
.form-display .required select:invalid,
.form-display .required select:invalid + .select2 .select2-selection {
  border-color: #8c0000;
  color: #530000;
  background-color: #fdfafa;
  transition: color .3s; }

.form-display .required select:invalid + .select2 .select2-selection__placeholder {
  color: #d28080; }

.form-display .required select:invalid + .select2 .select2-selection--single .select2-selection__rendered {
  transition: color .3s;
  color: #530000; }

.form-display td:not(.is-valid) input[type="checkbox"]:invalid {
  outline: 1px solid #A50000; }

.form-display input[type="radio"]:invalid {
  outline: none; }

.form-display option {
  color: black; }

/*  input[type="radio"]:invalid {
    outline: 1px solid #600;
  }*/
.form-display input[type="checkbox"]:not(.form-check-input) {
  vertical-align: baseline;
  margin-right: .4rem; }

.form-display input[type="radio"] + label,
.form-display input[type="checkbox"] + label {
  margin-right: 1rem;
  cursor: pointer;
  /* match the yes/no */ }

.form-display td:has([data-dollar]) {
  text-align: right; }

.formMgr input[type="radio"] + label.RIGHT {
  width: auto;
  vertical-align: text-top;
  white-space: normal !important; }

.bs4 .formMgr input[type="radio"] + label.RIGHT {
  width: auto;
  vertical-align: text-top;
  margin-top: 3px; }

.form-display input:required:valid,
.form-display textarea:required:valid,
.form-display select:required:valid,
.form-display select:required:valid + .select2 .select2-selection {
  border: 1px solid #797;
  color: #104410;
  background-color: #FcFFFc; }

.form-display select:required:valid + .select2 .select2-selection--single .select2-selection__rendered {
  transition: color .3s;
  color: #3c763d; }

.form-display select:required:valid + .select2 .select2-selection--multiple .select2-selection__choice {
  background-color: #dff0d8;
  border-color: #3c763d;
  color: #1e3b1f; }

.form-display input[type="checkbox"]:required:valid {
  outline: 1px solid #0B820B; }

.form-display input[required]:invalid + label,
.form-display input[required]:invalid + span.radiolabel {
  color: #8c0000;
  transition: color .3s; }

.form-display input[required]:valid + label,
.form-display input[required]:valid + span.radiolabel {
  color: #578457; }

.form-display :required {
  /*  border:1px solid #700; */ }

.form-display td {
  padding-right: .5em; }

.form-display td[id^=ctrl] {
  padding-right: .5em;
  padding-top: 1em;
  /*white-space: nowrap;*/
  min-width: 6em; }

.form-display td.text-nowrap {
  padding-right: 0;
  padding-top: 1em;
  /*white-space: nowrap;*/
  min-width: 6em; }

.form-display label {
  display: inline-block;
  font-weight: bold;
  position: relative; }

.form-display input:not([type]),
.form-display input[type=text],
.form-display input[type=email],
.form-display input[type=tel],
.form-display input[type=date],
.form-display input[type=month],
.form-display input[type=password],
.form-display input[type=number],
.form-display select,
.form-display textarea {
  width: 100%;
  border-style: solid;
  height: 30px;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 3px;
  border-width: 1px;
  border-color: #555;
  background-color: white;
  outline-color: #555;
  color: #333;
  transition: border-color .3s; }

.form-display select[multiple] {
  height: auto; }

.form-display ::-webkit-calendar-picker-indicator {
  margin: 0; }

.form-display ::-webkit-calendar-picker-indicator:hover {
  cursor: pointer; }

/* invalid inputs are in error */
.form-display input[type=text]:required:invalid,
.form-display input[type="email"]:required:invalid,
.form-display input[type="tel"]:required:invalid,
.form-display input[type="date"]:required:invalid,
.form-display input[type="month"]:required:invalid,
.form-display input[type="password"]:required:invalid,
.form-display input[type="number"]:required:invalid {
  border-color: #8c0000;
  transition: border-color .3s; }

/* invalid labels are in error, using the newer :has(:invalid) */
.form-display label:has(+ input:required:invalid),
.form-display label:has(+ textarea:required:invalid),
.form-display label:has(+ select:required:invalid) {
  color: #8c0000;
  transition: color .3s; }

/* invalid buttons are in error */
.form-display .required:not([class~="is-valid"]) button:not([class^="select2"]),
.form-display .required a.btn {
  background-color: #D4403A;
  color: white;
  background-image: none; }

.form-display .required button:not([class^="select2"]):hover,
.form-display .required a.btn:hover {
  background-color: #8c0000;
  color: white; }

/* valid required buttons are in happy */
.form-display .required button.btn-success,
.form-display button.is-valid,
.form-display .required a.btn-success {
  background-color: #dff0d8;
  color: #3c763d; }

.form-display .required button.btn-success:hover,
.form-display .required a.btn-success:hover {
  background-color: #dff0d8;
  color: #3c763d; }

/* why did this need colspan attribute? */
.form-display tr td[colspan]:only-child input,
.form-display tr td[colspan]:only-child input,
.form-display tr td[colspan]:only-child textarea,
.form-display tr td[colspan]:only-child select {
  /*width: auto;*/ }

.form-display textarea {
  height: auto; }

.form-display label.top {
  width: 100%;
  margin-bottom: 1px;
  margin-top: 0em;
  line-height: 1.3;
  padding-top: 0; }

.form-display .required label.top {
  margin-top: 0em; }

.form-display .label-h2 label {
  height: 2.6em;
  display: flex;
  align-items: flex-end; }

.form-display .label-h2 label.top {
  display: flex; }

/* for right-aligned labels. This is too brittle and we should add a class of left */
.form-display label:not([class]) {
  /* this is left-aligned, default labels? */
  min-width: 10em;
  text-align: right;
  vertical-align: middle;
  /* added 3/17/2017 to fix wrapped labels in sdbmoe modal */
  margin-bottom: 0;
  padding-right: .5em; }

.form-display label:not([class]) + input {
  width: auto; }

.form-display label:not([class]) + textarea {
  width: auto; }

.form-display label:not([class]) + select {
  width: auto; }

.form-display label:not([class]) + input + input {
  width: auto; }

.form-display label:not([class]) + textarea + textarea {
  width: auto; }

.form-display label:not([class]) + select + select {
  width: auto; }

.form-display label:not([class]) + input + input + input {
  width: auto; }

.form-display label:not([class]) + textarea + textarea + textarea {
  width: auto; }

.form-display label:not([class]) + select + select + select {
  width: auto; }

.form-display label.RIGHT {
  text-align: left;
  width: initial;
  vertical-align: top;
  float: none; }

.form-display .label-right input,
.form-display .label-right textarea,
.form-display .label-right select {
  width: auto; }

/* span of text that describes multiple related fields. Smaller than a fieldset */
.form-display .label-compound {
  font-weight: bold;
  text-align: right;
  padding-right: 0; }

.form-display td:has(.field-yn) {
  padding-top: .9em; }

.form-display [data-type="descYN"] {
  padding-right: 2em;
  font-weight: bold; }

/*span[data-required] {
  font-weight: bold;
}*/
.form-display input:required:valid:checked + span {
  font-weight: bold; }

.form-display .radio-group {
  /*min-width: 123px;*/
  /* dh 4/18/2016 made wider because yes-nos typically need more width ie ndclinlab renew questions.asp */
  min-width: 152px; }

.form-display .radio-group label {
  /*width: inherit !important;*/
  /* dh 9/23/2016 */
  /*padding: inherit;*/
  font-weight: bold; }

.form-display td {
  padding-right: 0em; }

.form-display span.line {
  display: block; }

.form-display span.inline {
  display: inline; }

.form-display .table-width-100 {
  width: 100%; }

.form-display .row-border-top {
  border-top: 1px solid #eee; }

.form-display .row-border-bottom {
  border-bottom: 1px solid #eee; }

/* diagnostic data at top of page */
.form-display [color='red'] {
  font-size: smaller;
  display: block; }

@media print {
  .form-display [color='red'] {
    display: none; } }

/* diagnostics to see table cells */
.form-display table td {
  /*    border: 1px dashed #ddd;*/ }

.form-display td#ctrl-reset,
.form-display p[id*="reset"] {
  padding: 0;
  margin: 0;
  /* display: none; */
  /* DH 9/23/2016 should we hide these resets? */ }

.form-display p[id*="reset"] {
  display: none; }

.form-display [id^="v-spacer-reset"],
.form-display [id^="v-spacer"] {
  min-height: 1em; }

.form-display [id^="h-spacer-reset"],
.form-display [id^="h-spacer"] {
  min-width: 1em; }

.form-display td[id$="num"]:first-child,
.form-display table.td-1-num td:first-child {
  /* ends with num, is an auto-number style and narrow */
  min-width: 1%;
  max-width: 30px; }

input.nospin[type=number]::-webkit-inner-spin-button,
input.nospin[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

.form-display p {
  margin-top: 1em; }

.form-display p:empty {
  display: none; }

.form-display p#reset,
.form-display #form p#reset,
.form-display p.reset,
.form-display td#ctrl-reset,
.form-display td[id^="ctrl-legend"] {
  display: none; }

/* line 397, A:/GLOBAL/www/css/sass/formstyles.scss */
.form-display .indent-left-1 {
  padding-left: 1em; }

/* line 401, A:/GLOBAL/www/css/sass/formstyles.scss */
.form-display .indent-left-2 {
  padding-left: 2em; }

.form-display .indent-left-3 {
  padding-left: 3em; }

.form-display .this-indent-3 {
  margin-left: 3em; }

.form-display .no-margin {
  margin: 0; }

.form-display .space-above-1 td {
  padding-top: 2em; }

.form-display .space-above-2 td {
  padding-top: 3em; }

.form-display .ques-child {
  border-width: 0 !important;
  padding-left: 1em; }

.form-display ::-webkit-input-placeholder {
  color: #aaa; }

.form-display :-moz-placeholder {
  /* Firefox 18- */
  color: #aaa; }

.form-display ::-moz-placeholder {
  /* Firefox 19+ */
  color: #aaa; }

.form-display :-ms-input-placeholder {
  color: #aaa; }

.form-display .required.has-error ::placeholder {
  color: rgba(159, 50, 50, 0.494); }

/* Classes for adding via Form Manager */
.indent-left-1 {
  padding-left: 1em; }

.indent-left-2 {
  padding-left: 2em; }

/* End Classes added via Form Manager */
[data-dollar]::before {
  content: "$"; }

.form-display .formMgr:has(.RIGHTFULL) {
  width: 100%; }

.form-display input:has(+ label.RIGHTFULL) {
  margin-top: 0;
  vertical-align: initial; }

.form-display fieldset {
  /* background-color: #eee; */
  width: inherit;
  /* Or auto */
  /* padding: 0 10px; */
  /* To give a bit of padding on the left and right */
  border-bottom: none;
  margin-top: 1.5em;
  margin-bottom: .5em; }

@media print {
  .debug,
  .form-display .debug {
    display: none; } }

.form-display .fieldset {
  width: inherit;
  border-bottom: none;
  margin-top: 1.5em;
  border: 1px solid #666;
  padding: 1em;
  margin-bottom: 2em; }

.form-display legend {
  margin-left: -5px;
  width: 102%; }

.form-display .fieldset legend {
  margin-left: -5px;
  width: 102%;
  margin-top: -1.5em;
  background-color: white;
  padding-left: 1em; }

.form-display fieldset legend {
  margin-left: initial;
  width: auto; }

.form-display fieldset fieldset {
  border: 1px solid #ccc;
  padding: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid #ccc; }

.form-display .fieldset .fieldset {
  border: 1px solid #ccc;
  padding: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid #ccc;
  margin-top: 1em;
  margin-bottom: 1em; }

table + .fieldset {
  margin-top: 2em; }

.form-display fieldset fieldset > legend {
  font-size: large;
  padding-left: .5em;
  border-bottom: none;
  margin-bottom: -1em;
  width: auto;
  padding-right: .5em;
  margin-left: initial; }

.form-display .fieldset .fieldset > legend {
  font-size: large;
  padding-left: .5em;
  border-bottom: none;
  margin-bottom: -1em;
  width: auto;
  padding-right: .5em;
  margin-left: initial; }

/*
.form-display fieldset p,
.form-display fieldset table,
.form-display fieldset span {
    padding-left: 1em;
}
*/
.form-display p.form-label {
  font-weight: bold;
  margin-bottom: 1px; }

.form-display td span:not([class*='label-']):not([class*='badge']):not([class*='btn']):not([name^='hdn']):not([class^='select2']):not([class^='selection']):not([aria-hidden]) {
  display: inline-block;
  padding-right: 1em;
  line-height: 1.4; }

.form-display td label span:not([class*='label-']):not([class*='badge']):not([class*='btn']) {
  padding-right: 0; }

.form-display td .select2 {
  display: block; }

/* filter/search */
.select2-selection--multiple {
  padding-right: 10px;
  margin-bottom: 1em; }

td:not(.has-error.required) .select2-search.select2-search--inline {
  width: auto !important;
  height: auto;
  display: inline-block;
  margin-bottom: -7px;
  overflow: hidden;
  padding: 2px;
  position: relative; }

@media screen and (max-width: 750px) {
  td:not(.has-error.required) .select2-search.select2-search--inline {
    overflow: visible;
    margin-bottom: 6px;
    margin-left: 2px;
    margin-top: 2px; }
  .select2-container {
    width: 100% !important; }
  .select2-selection__choice__display {
    padding-right: 3px !important; } }

.select2-search.select2-search--inline:after {
  content: "\f002";
  font-family: fontawesome;
  font-size: 1.2em;
  position: absolute;
  top: 18px;
  right: 0.3em;
  margin-top: -0.8em;
  color: #aaa;
  pointer-events: none; }

td:not(.has-error.required) .select2-search.select2-search--inline .select2-search__field {
  display: block;
  outline: 2px solid #333;
  padding: 2px 4px;
  height: 22px;
  padding: 2px;
  min-width: 200px; }

.form-display .select2-container .select2-selection--single {
  height: 30px; }

.select2-selection--single .select2-search__field {
  padding-right: 10px;
  margin-bottom: 1em; }

.select2-dropdown {
  box-shadow: 3px 2px 11px #00000075; }

.select2-search.select2-search--dropdown::after {
  content: "\f002";
  font-family: fontawesome;
  font-size: 1.2em;
  position: absolute;
  top: 21px;
  right: 0.6em;
  margin-top: -0.8em;
  color: #aaa;
  pointer-events: none; }

.select2-container .select2-search--dropdown .select2-search__field {
  padding-right: 10px; }

.form-display .select2-container--default .select2-selection--single {
  border-color: #555; }

.select2-container--open .select2-results__options {
  box-shadow: 3px 2px 11px #00000075; }

/* textareas copied to spans for printing/pdf: hidden on-screen; */
.form-display textarea[onchange^="copyTextArea"] ~ span[name^="hdn"] {
  display: none; }

.form-display span.title,
.form-display p.title,
.form-display input.title {
  font-size: 17.5px;
  margin-bottom: -7px;
  margin-top: 10px;
  display: block; }

.form-display .label:not([class*='label-']):not([class*='badge']):not([class*='btn']) {
  color: #707070;
  font-size: 1em;
  font-weight: 600;
  padding-right: 0; }

.form-display hr {
  border: none;
  border-top: dashed 2px #c1c1c1;
  color: #ffffff;
  background-color: #ffffff;
  /*margin: 15px 0;*/
  /* dh 8/24/2016 : margin seemed to big now that we have padding in the td */
  margin: 0; }

.form-display .border-row {
  border-bottom: 1px solid #ccc; }

.form-display .small {
  font-size: 10px;
  line-height: 1.4em;
  display: inline-block; }

.form-display span.input-sm {
  height: inherit;
  padding: 0px 1em 0px 0px;
  font-size: inherit;
  line-height: inherit;
  border-radius: inherit;
  border: inherit;
  border-width: inherit; }

.form-display input[readonly],
.form-display input[disabled],
.form-display select[readonly],
.form-display select[disabled],
.form-display textarea[readonly],
.form-display textarea[disabled] {
  border: 1px solid #999;
  background-color: #fcfcfc;
  color: #666;
  cursor: not-allowed; }

* body .form-display input:-ms-input-placeholder {
  color: gray !important; }

.form-display .form-actions {
  display: block;
  padding: 13px 14px 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(249, 249, 249, 0.9);
  margin-top: 25px;
  margin-left: -13px;
  margin-right: -13px;
  margin-bottom: -13px;
  text-align: right; }

.form-display .btn-secondary,
.form-display .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning) {
  border: 1px solid rgba(100, 100, 100, 0.47); }

.form-display .btn-secondary:hover {
  background-color: #ececec;
  border-color: darkgrey;
  color: #000; }

.form-display .badge {
  border-radius: 5em;
  padding: .25em .4em !important; }

#btnSubmit[title^="Submit & Continue"] i.fa:before {
  content: "\f138"; }

.form-display button[id^=btnAdd] {
  margin-left: 3em;
  display: block; }

.form-display #btnSave {
  transition: background-color .2s; }

.form-display #btnSave:hover {
  background-color: #dbf2db;
  color: #2c5d2c; }

.form-display #btnExit {
  transition: background-color .2s; }

.form-display #btnExit:hover {
  background-color: #f2e1db;
  color: #5d372c; }

.form-display .bp-btn-uncell {
  position: absolute;
  bottom: 0px; }

button#btnBack:before {
  content: "\f104";
  font-family: fontawesome;
  margin-right: 4px; }

a[href*='pdf_download'] {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none; }

a[href*='pdf_download'].js-complete {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c; }

a[href*='pdf_download']::before {
  content: "\f0c7";
  font-family: fontawesome;
  margin-right: .5em;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto; }

a[href*='pdf_download']:hover {
  background-color: #ececec;
  border-color: darkgrey;
  color: black; }

a[href*='pdf_download'].js-pending {
  pointer-events: none;
  cursor: default;
  color: #43351c;
  background-color: #fcf8e3;
  border-color: #8a6d3b; }

a[href*='pdf_download'].js-pending::after {
  content: "\f110";
  font: normal normal normal 18px/1 FontAwesome;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
  padding: 0;
  margin-left: 1em;
  display: inline-block;
  width: auto; }

/* place labels on left and controls to the right. Used for long labels like on https://dev-ndpd.ebigpicture.com/applications/stce/event.asp */
/* place labels on left and controls to the right. Used for long labels like on https://dev-ndpd.ebigpicture.com/applications/stce/event.asp */
.labels-left__controls-right td {
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px; }

.labels-left__controls-right label {
  text-align: left;
  min-width: auto; }

.labels-left__controls-right select,
.labels-left__controls-right input,
.labels-left__controls-right textarea {
  float: right; }

.labels-left__controls-right {
  width: 100%; }

.labels-left__controls-right td {
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px; }

.form-display .labels-left__controls-right label {
  text-align: left;
  min-width: auto; }

.labels-left__controls-right select,
.labels-left__controls-right input,
.labels-left__controls-right textarea {
  float: right; }

/****** DRAG DROP FILES *******************************************************/
.form-display .drop_file_zone[ondrop] input[type=button] {
  border: 1px solid #666;
  margin: 0; }

/*drag and drop upload*/
.form-display .drop_file_zone[ondrop] {
  border: rgba(0, 0, 0, 0.278) 5px dashed;
  background-color: rgba(0, 0, 0, 0.02);
  padding: 8px;
  display: block;
  max-width: 220px;
  margin-right: 1em;
  color: #333;
  transition: all .3s;
  position: relative;
  min-width: 226px; }

.form-display .required .drop_file_zone {
  border-color: #966363;
  background-color: rgba(255, 238, 238, 0.463); }
  .form-display .required .drop_file_zone .dropfile-status {
    color: #A50000; }

.form-display .required.is-valid .drop_file_zone[ondrop] {
  background-color: #ecffec; }
  .form-display .required.is-valid .drop_file_zone[ondrop] .dropfile-status {
    color: #3c763d; }

.dropfile-status {
  opacity: .5;
  font-size: 5em !important;
  position: absolute;
  right: 10px;
  top: 10px; }

body .form-display .drop_file_zone[ondrop].drop_file_zone.dropzone--progress {
  background-color: rgba(211, 174, 0, 0.22);
  border-color: rgba(165, 136, 0, 0.57); }

.dropzone--progress span {
  visibility: hidden; }

.drop_file_zone.dropzone--progress .dropfile-status::before {
  content: "\f110";
  color: #765e00; }

.drop_file_zone.dropzone--highlight * {
  pointer-events: none; }

body .form-display .drop_file_zone[ondrop].dropzone--highlight {
  background-color: #eee;
  border-color: #333;
  color: #000; }

#drag_upload_file {
  width: 50%;
  margin: 0 auto;
  pointer-events: none; }

#drag_upload_file p {
  text-align: center; }

#drag_upload_file #selectfile {
  display: none; }

.drop_file_zone::after {
  content: "Max Files: " attr(data-maxfiles);
  position: absolute;
  bottom: 0;
  font-size: smaller; }

.drop_file_zone + h5 {
  display: none;
  opacity: .75;
  font-size: 1em;
  margin-bottom: -1.5em;
  margin-top: 1em;
  padding-left: .5em; }

.drop_file_zone + h5::after {
  content: ":"; }

ul[id*="uploaded"], .content ul[id*="uploaded"] {
  padding: 2em .5em .5em .5em;
  border: 1px solid #ccc;
  border-radius: 4px; }

ul[id*="uploaded"]:empty, .content ul[id*="uploaded"]:empty {
  display: none; }

ul[id*="uploaded"] li {
  list-style: none;
  clear: both; }

ul[id*="uploaded"] li button {
  margin-right: 4px;
  margin-bottom: 4px; }

ul[id*="uploaded"] li button:hover {
  background-color: #fcc; }

/****** END DRAG DROP *********************************************************/
/****** DEBUG *****************************************************************/
.js-debug--on fieldset {
  box-shadow: 0 0 1px #f601ff33;
  position: relative;
  transition: background-color .5s; }

.js-debug--on fieldset:hover {
  box-shadow: 0 0 2px #f601ff;
  background-color: rgba(218, 197, 221, 0.075); }

.js-debug--on fieldset::after {
  content: "fieldset: " attr(id);
  position: absolute;
  top: -24px;
  right: 0;
  color: #c000c5;
  box-shadow: 0 0 1px #f701ff79;
  padding: 0 3px;
  opacity: .25;
  transition: opacity .5s; }

.js-debug--on fieldset:hover::after {
  opacity: 1;
  box-shadow: 0 0 1px #f601ff; }

.js-debug--on table.formMgr {
  box-shadow: 0 0 4px #979797;
  transition: box-shadow, background-color .5s; }

.js-debug--on table.formMgr:hover {
  box-shadow: 0 0 7px #585858;
  background-color: #ebefff; }

/* in debug mode, display colspan */
.js-debug--on .formMgr td[colspan] {
  position: relative; }

.js-debug--on .formMgr td[colspan]::before {
  content: "colspan=" attr(colspan);
  position: absolute;
  top: -4px;
  right: 1px;
  color: #000;
  text-shadow: 1px 1px white;
  opacity: .25;
  transition: opacity .5s; }

.js-debug--on .formMgr td[colspan]:hover::before {
  opacity: 1;
  background-color: white; }

.js-debug--on .formMgr label {
  background-color: rgba(158, 129, 0, 0.05);
  transition: background-color .5s; }

.js-debug--on .formMgr td:hover label {
  background-color: rgba(158, 129, 0, 0.11); }

.js-debug--on .formMgr span {
  background-color: rgba(0, 187, 114, 0.06);
  transition: background-color .5s; }

.js-debug--on .formMgr td:hover span {
  background-color: rgba(0, 204, 134, 0.19); }

.form-display .formMgr span.debug__field-label {
  display: none; }

.form-display.js-debug--on .formMgr span.debug__field-label {
  position: absolute;
  top: 0;
  left: 0;
  content: attr(name);
  display: inline-block;
  padding: 0 3px;
  color: #2b5dbb;
  text-shadow: 1px 1px white;
  font-weight: normal;
  font-size: 12px;
  background-color: transparent;
  opacity: .25;
  transition: opacity .5s; }

.form-display.js-debug--on .formMgr td:hover span.debug__field-label {
  opacity: 1; }

/* in debug mode, display field labels */
.js-debug--on form label::before {
  content: attr(for);
  display: inline-block;
  padding: 2px 3px;
  color: #472709;
  text-shadow: 1px 1px white;
  font-weight: normal;
  font-size: 12px;
  position: absolute;
  top: -13px;
  left: 0;
  opacity: .25;
  transition: opacity .5s; }

.js-debug--on form td:hover label::before {
  opacity: 1;
  background-color: rgba(158, 129, 0, 0.11); }

.js-debug--on form td.text-nowrap label::before {
  content: attr(for);
  display: inline-block;
  padding: 0 3px;
  color: #2b5dbb;
  text-shadow: 1px 1px white;
  font-weight: normal;
  font-size: 12px; }

.js-debug--on form div,
.js-debug--on form p {
  background-color: rgba(0, 187, 187, 0.03);
  transition: background-color .5s;
  position: relative; }

.js-debug--on form span > div:hover,
.js-debug--on form span > p:hover {
  background-color: rgba(0, 204, 204, 0.06); }

.js-debug--on form div::before,
.js-debug--on form p::before {
  content: attr(id);
  display: inline-block;
  padding-left: 3px;
  color: #2b5dbb;
  text-shadow: 1px 1px white;
  font-weight: normal;
  font-size: 12px;
  position: absolute;
  top: -14px;
  left: 0;
  opacity: .25;
  transition: opacity .5s; }

.js-debug--on form div:hover::before,
.js-debug--on form p:hover::before {
  opacity: 1; }

.js-debug--on form [name^="btnAdd"] {
  position: relative; }

.js-debug--on form [name^="btnAdd"]::before {
  content: attr(id);
  display: inline-block;
  padding: 0 3px;
  color: #2b5dbb;
  text-shadow: 1px 1px white;
  font-weight: normal;
  font-size: 12px;
  position: absolute;
  top: -17px;
  left: 0;
  opacity: .5;
  transition: opacity .5s; }

.js-debug--on form div:hover [name^="btnAdd"]::before {
  opacity: 1; }

.js-debug--on form label.radio-inline::before {
  content: attr(data-id);
  display: inline-block;
  padding-left: 3px;
  color: #2b5dbb;
  text-shadow: 1px 1px white;
  font-weight: normal;
  font-size: 12px;
  opacity: .25;
  transition: opacity .5s; }

.js-debug--on form td:hover label.radio-inline.sso__authd--g::before {
  opacity: 1; }

.js-debug--on form span:not(.radiolabel)::before {
  content: attr(id);
  display: inline-block;
  padding: 2px;
  color: #2b5dbb;
  font-weight: normal;
  font-size: 12px;
  text-shadow: 1px 1px white;
  position: absolute;
  top: 0;
  left: 0;
  opacity: .25;
  transition: opacity .5s; }

.js-debug--on form td:hover span:not(.radiolabel)::before {
  opacity: 1;
  background-color: white;
  text-shadow: none; }

.js-debug--on form label + span:not(.radiolabel)::before {
  display: none; }

.js-debug--on form p[data-id]::before,
.js-debug--on form div[data-id]::before,
.js-debug--on form span[data-id]:not(.radiolabel)::before {
  content: attr(data-id);
  padding-left: 3px;
  color: #2b5dbb;
  text-shadow: 1px 1px white;
  font-weight: normal;
  font-size: smaller;
  position: absolute;
  display: block; }

.js-debug--on .formMgr td {
  box-shadow: inset 0 0 0 1px rgba(56, 55, 65, 0.184);
  position: relative;
  transition: box-shadow, background-color .5s; }

.js-debug--on .formMgr td:hover {
  box-shadow: inset 0 0 0 1px rgba(45, 46, 78, 0.412);
  background-color: rgba(212, 219, 255, 0.344); }

.js-debug--on .formMgr td.required {
  box-shadow: 0 0 0 1px rgba(245, 149, 149, 0.2);
  position: relative;
  transition: box-shadow, background-color .5s; }

.js-debug--on .formMgr td.required:hover {
  box-shadow: 0 0 0 2px rgba(164, 65, 65, 0.412);
  background-color: rgba(255, 212, 214, 0.144); }

/* end DEBUG ******************************************************************/
.form-display span div p {
  margin: 0; }

.form-display span div.modal-body p {
  margin-top: 1em; }

.form-display span div p br {
  display: none; }

.field__instruct {
  opacity: .7;
  display: block;
  padding-right: 1em; }

.field__instruct:hover {
  opacity: 1; }

.field-yn ~ .field__instruct {
  display: none; }

td[align="center"][style="vertical-align: bottom;"] {
  width: 10%; }

.form-display input[id*=btnRemove] {
  background-color: #ddd;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 5px 4px 2px 24px;
  padding-left: 20px;
  color: #444;
  vertical-align: baseline;
  margin: 0; }

.form-display input[id*=btnRemove]:hover {
  background-color: #eee;
  color: black;
  cursor: pointer; }

.form-display td:last-child[align="center"]::before {
  margin-right: -16px;
  font-family: fontawesome;
  color: #900;
  content: "\f1f8";
  position: relative;
  opacity: .7;
  pointer-events: none;
  z-index: 1; }

.form-display td:last-child[align="center"]:hover::after {
  opacity: 1; }

/* uploader ============================= */
.upload__container.has-error-find {
  border-left: 4px solid #A50000; }

.upload__container.has-error-find button {
  background-color: #A50000;
  color: white; }

#uploadList {
  padding: 5px;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px; }

#uploadedList h5 {
  font-size: larger;
  margin-bottom: 0; }

.tip-upload {
  padding-bottom: .5em;
  color: rgba(0, 0, 0, 0.7); }

.form-display td span[data-max_files] {
  padding: 0;
  display: block; }

.tip-upload + br,
.tip-upload + br + br {
  display: none; }

.required button[value="Upload"] {
  /*    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;*/ }

.required div#uploadedList {
  color: #3c763d;
  border-color: #d6e9c6;
  padding: 5px; }

.required #uploadedList h5 {
  color: #3c763d; }

#uploadedList ul {
  padding-left: 1em; }

#uploadedList li {
  margin-top: .5em;
  display: block; }

#uploadedList li a {
  display: inline-block;
  max-width: 236px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

#uploadedList li button[value="X"] {
  background: rgba(100, 100, 100, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: black;
  margin-left: .5em; }

#uploadedList li button[value="X"]:hover {
  background: rgba(200, 200, 200, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.3); }

/* upload fialog box */
body#fileupload {
  background-image: none; }

#fileupload input {
  height: auto;
  width: auto;
  border: none; }

#fileupload fieldset {
  border: none; }

/* end Uploader --------------------------*/
/* wizard steps table of contents */
#tblProgress tr {
  display: block;
  float: left; }
  #tblProgress tr td {
    display: block;
    float: left;
    padding-right: 2px; }
    #tblProgress tr td a {
      display: block;
      text-decoration: none;
      padding: 3px 5px;
      color: #eee;
      background-color: #fcf8e3;
      color: #8a6d3b;
      font-size: .8em; }
    #tblProgress tr td a:hover {
      background-color: black;
      color: #fff; }
    #tblProgress tr td a.active {
      background-color: #555;
      color: #fff; }
    #tblProgress tr td a.active:hover {
      cursor: default; }
  #tblProgress tr td:first-child {
    display: none; }

#tblProgress tr.complete td a {
  background-color: #dff0d8;
  color: #3c763d; }

/* end wizard steps */
/* table adder */
span > table {
  border-top: 1px solid #cccccc;
  margin-top: 1em; }

div[id$="table"],
div[id$="add"],
.formMgr + span > div {
  border-top: 1px solid rgba(130, 130, 130, 0.45);
  padding-top: 1em;
  border-bottom: 5px solid rgba(80, 80, 80, 0.49);
  margin-top: 1em;
  padding-bottom: 1em; }

/* end table adder




/* special types of fields defined by classes ============== */
.form-display .license-info td {
  min-width: 0;
  padding-right: .1em;
  padding-bottom: .2em;
  vertical-align: middle; }

.form-display .license-info span {
  display: inline;
  padding: 0; }

.modal .modal-body.form-display label:not([class]) {
  max-width: 10em; }

/* explanation answer fields: set them off to look different in PDF */
.form-display span[id^="exp_"] {
  font-weight: bold;
  font-style: italic; }

.form-display span[id^="exp_"]::before {
  content: "Answer: "; }

.form-display .field--explanation {
  padding: 5px;
  border: 1px solid rgba(122, 122, 122, 0.14);
  background-color: rgba(238, 238, 238, 0.28); }

.tip-upload {
  margin-left: 1em; }

.field--explanation.has-error.required,
.field--explanation.expbtn-has-error.required {
  background-color: rgba(255, 246, 247, 0.658824);
  border-color: #e9c1c6;
  color: #490000; }

.field--explanation.has-error.required textarea,
.field--explanation.expbtn-has-error.required textarea {
  background-color: white;
  border-color: #b20000; }

.field--explanation.is-valid.expbtn-is-valid.required {
  background-color: #f8fff78a;
  border-color: #bbd1b88a;
  color: #003200; }

/* end special types of fields */
/* alerts ---------------------------------- */
.alert:not(.alert-success):not(.alert-danger):not(.alert-info):not(.alert-warning) {
  background-color: #efefef;
  border: 1px solid lightgrey; }

.error:not(.alert-info):not(.alert-warning):not(.alert-success) {
  padding: 1em;
  background-color: #f2dede;
  border: 1px solid #8c0000;
  color: #8c0000; }

#divMsg:empty {
  display: none; }

#divReqMiss::after {
  content: 'Click "Continue" below to return to pages with missing answers.'; }

#divReqMiss + br + #btnSubmit {
  background-color: #D4403A;
  border-color: #8c0000;
  margin-bottom: 2em; }

#divReqMiss + br + #btnSubmit::before {
  font-family: "FontAwesome";
  content: "\f071";
  margin-right: .5em; }

#divReqMiss + br + #btnSubmit::after {
  content: " to Fix"; }

#divReqMiss + br + #btnSubmit:hover,
#divReqMiss + br + #btnSubmit:focus {
  background-color: #f2dede;
  color: #8c0000; }

.alert a {
  text-decoration: underline; }

/* /alerts -----------------------------------------*/
#btnContinue i {
  display: none; }

#btnContinue::before {
  font-family: "FontAwesome";
  content: "\f064 ";
  margin-right: .5em; }

/*
 * .callouts
 *
 * Not quite alerts, but custom and helpful notes for folks reading the docs.
 * Requires a base and modifier class.
 */
/* Common styles for all types */
.callout {
  padding: 20px;
  margin: 20px 0;
  background-color: #fff;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px; }

.callout h4 {
  margin-top: 0;
  margin-bottom: 5px; }

.callout p:last-child {
  margin-bottom: 0; }

.callout code {
  border-radius: 3px; }

/* Tighten up space between multiple .callouts */
.callout + .callout {
  margin-top: -5px; }

/* Variations */
.callout-danger {
  border-left-color: #ce4844; }

.callout-danger h4 {
  color: #ce4844; }

.callout-warning {
  border-left-color: #aa6708; }

.callout-warning h4 {
  color: #aa6708; }

.callout-info {
  border-left-color: #1b809e; }

.callout-info h4 {
  color: #1b809e; }

/* credit card ----------------------------------------*/
#CARD_EXP_MO,
#CARD_EXP_YR {
  width: auto; }

/* /credit card


/* ============= Special Attributes ============================ */
/* e.g. for show legal references, like only if user answers "No" (which is setup in local client code). */
.show-ref [data-type="descYN"]:after {
  content: attr(data-ref);
  color: #900;
  display: inline-block;
  white-space: nowrap;
  text-align: right; }

.field-depend:first-child {
  padding-left: 2em; }

.field-depend {
  border-top: 2px solid transparent; }

.label--mobile-show label {
  display: none; }

/* ============= WIDGETS =================== */
/* widgets */
.widget {
  padding: 5px;
  padding-top: 3.5em;
  position: relative;
  border-radius: 5px;
  background-color: rgba(236, 236, 236, 0.459); }

.form-display .widget td[id^=ctrl] {
  min-width: auto; }

.form-display .widget--left {
  float: left;
  width: calc(50% - 10px);
  margin-right: 20px; }

.form-display .widget--right {
  width: calc(50% - 10px); }

.form-display .widget > legend {
  position: absolute;
  top: 0;
  left: 4px;
  margin-left: -4px;
  padding-left: 5px;
  background-color: rgba(150, 150, 150, 0.2);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 100%; }

.form-display .widget td {
  padding-top: 0; }

.form-display .widget__part {
  padding: 5px;
  padding-top: 3.5em;
  position: relative;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.361);
  float: left;
  border: none; }

.form-display .widget__part--left {
  float: left;
  clear: both;
  width: calc(50% - 15px);
  margin-left: 5px;
  margin-right: 20px; }

.form-display .widget__part--right {
  width: calc(50% - 15px); }

.widget__part .widget__part-left + table + .widget__part .widget__part-right::after {
  content: " ";
  float: none;
  display: block;
  clear: both; }

.widget__part legend:empty {
  display: none; }

.widget__part legend:empty + table {
  margin-top: -3.5em; }

.form-display .widget__part legend {
  position: absolute;
  top: 0;
  left: 4px;
  margin-left: -4px;
  padding-left: 5px;
  background-color: rgba(133, 133, 133, 0.361);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-size: larger;
  width: 100%;
  color: black; }

.form-display .widget .table-striped td {
  border-top: none;
  border-bottom: 1px solid #ccc; }

.form-display .widget .table-striped tr:last-child td {
  border-bottom: none; }

@media (max-width: 768px) {
  .form-display .widget {
    width: 100%;
    margin-left: 0;
    margin-right: 0; }
  .form-display .widget__part {
    width: 95%;
    margin-left: 15px;
    margin-right: 15px; }
  /* this prevents mobile handling of table rows so I'm disabling */ }

/* ============= RESPONSIVE =================== */
/* mobile media queries */
@media only screen and (max-width: 768px) {
  body,
  body.container {
    width: 100%;
    background: white;
    padding: 0; }
  .wrapper {
    border: none; }
  .form-display table {
    width: 100% !important; }
  .form-display tr {
    border-bottom: 1px solid #66666630;
    margin-bottom: 1em; }
  .form-display td.text-nowrap {
    padding-left: 1em;
    white-space: normal !important; }
  .form-display tr:has(td.field--explanation) {
    border-bottom: none;
    margin-bottom: 2em; }
    .form-display tr:has(td.field--explanation) + tr {
      display: none; }
  .form-display tr:last-child {
    border: none;
    margin-bottom: 0; }
  .form-display tr td:last-child {
    padding-bottom: .5em; }
  .form-display tr,
  .form-display td,
  .form-display th {
    display: block;
    overflow: auto; }
  .form-display td,
  .form-display th {
    border: none;
    padding-bottom: 10px; }
  .form-display th {
    display: none; }
  tr:has(td.emptycell) {
    padding: 0; }
  .form-display tr {
    border-bottom: 1px solid #999;
    border-top: none; }
  /* next-to-last row doesn't get border (because the last row is empty)  */
  .form-display tr:nth-last-child(2) {
    border: none; }
  /* we need padding on bottom too */
  .form-display td[id^=ctrl] {
    padding-bottom: .15em;
    padding-top: .5em; }
  .cont-descYN {
    border-bottom: none; }
  .form-display label:not([class]) {
    min-width: 12em;
    text-align: left;
    vertical-align: middle;
    margin-bottom: 0;
    padding-right: 0; }
  [data-label]::before {
    content: attr(data-label) ": ";
    display: inline-block;
    width: 30%;
    font-weight: bold; }
  label {
    display: inline-block;
    width: 30%;
    min-width: 10em;
    vertical-align: top;
    margin-bottom: 0; }
  .formMgr input[type="radio"] + label.RIGHT {
    width: auto;
    vertical-align: text-top;
    white-space: normal !important;
    display: inline-block !important; }
  .label--mobile-show label {
    display: inline-block; }
  .form-display td span:not([class*='label-']):not([class*='badge']):not([class*='btn']) {
    vertical-align: top; }
  td[align="center"][style="vertical-align: bottom;"] {
    width: auto; }
  .form-display td span:not([class*='label-']):not([class*='badge']):not([class*='btn']):not([name^='hdn']):not([class*='select2']) {
    padding: 0; } }

@media only screen and (max-width: 576px) {
  [class^="col-"] .form-display {
    padding: 0; }
  .form-display td {
    max-width: 100%; }
  .form-display label:not([class]),
  .form-display label {
    display: block;
    width: 100%;
    min-width: 100%; } }

/*  ==========================  P R I N T   ===================  */
@media print {
  @page {
    size: portrait;
    margin-top: .5in;
    margin-bottom: .5in; }
  #divTimeout {
    display: none !important; }
  .hidden-print {
    display: none !important; }
  #divMsg {
    display: none; }
  button, .btn, a[href*='pdf_download'] {
    display: none; }
  [id^="ctrl"] {
    animation: none; }
  /* address ligature fonts that show weird characters for ff, ffi, etc. in PDF */
  body,
  td,
  p,
  div,
  label,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  legend,
  span,
  input,
  select,
  textarea,
  button {
    font-family: arial, sans-serif !important; }
  *:not(i.fa) {
    font-family: arial, sans-serif; }
  nav {
    display: none; }
  button,
  input[type="button"],
  input[type="submit"],
  .btn,
  #btnBack,
  #btnSubmit,
  #btnExit,
  #btnSave {
    display: none; }
  /* textareas copied to spans for printing/pdf: display when printing; */
  .form-display textarea[onchange^="copyTextArea"] {
    display: none; }
  .form-display textarea[onchange^="copyTextArea"] ~ span[name^="hdn"] {
    display: block;
    border: 1px solid #999;
    padding: 5px 10px;
    border-radius: 3px;
    line-height: 1.5;
    min-height: 30px;
    /* empties should not collapse */
    white-space: pre-line;
    /* preserve intended whitespace linebreaks by author */ }
  /* show with green if it was a required valid input */
  .form-display .required.is-valid span[name^="hdn"],
  .form-display .required.is-valid span[name^="hdn"] {
    border: 1px solid #797;
    color: #104410;
    background-color: #FcFFFc; }
  .form-display textarea[onchange^="copyTextArea"] ~ span[name^="hdn"] {
    display: inline-block; }
  .form-display button[id^=btnAdd] {
    display: none; }
  #tblProgress tr.complete td a.active {
    border: 1px solid black; }
  .form-display span.tip-upload {
    display: none; }
  .formprogress {
    display: none; }
  .form-display .fieldset {
    border-color: rgba(0, 0, 0, 0.5); }
  .form-display div legend {
    background-color: white !important;
    border-bottom: none; } }