.flash-block, .error-messages, .inline-error-messages, .warning, .error {
    padding: 0;
    font-size: 1.1em;
    margin: 1em 0; }
  
  .flash-block ul, .flash-block li {
    list-style-type: none;
    margin: 0;
    padding: 0; }
  
.table.data {
  max-width: 15%;
  white-space: normal;
}

body.hide-employee-fields .employee-only {
  display: none;
}

  .flash-block div, .error-messages, .inline-error-messages, .warning, .error {
    color: black;
    padding: 1em 10px 1em 47px;
    border-width: medium;
    border-style: solid;
    background-color: #fdd9a3;
    border-color: #cc6502;
    background-image: url(/assets/flash-message.png);
    background-position: 10px 50%;
    background-repeat: no-repeat; }
  
  .flash-notice div, .flash-success div {
    background-color: #ACE18A;
    border-color: #2A954D;
    background-image: url(/assets/flash-notice.png); }
  
  .flash-warning div, .flash-alert div, .flash-error div {
    background-color: #F09185;
    border-color: #A30000;
    background-image: url(/assets/flash-warning.png); }
  
  .error-messages, .inline-error-messages, .error {
    background-color: #F09185;
    border-color: #A30000;
    background-image: url(/assets/flash-warning.png); }
  
  .field-with-errors {
    position: relative; }
    .field-with-errors textarea, .field-with-errors select {
      background-color: #F09185; }
    .field-with-errors option {
      background-color: #FFF; }
  
  .checkbox-with-errors {
    background-color: #F09185; }
  
  .radio-with-errors {
    background-color: #F09185; }
  
  .text-with-errors input {
    background-color: #F09185; }
  
  .email-with-errors input {
    background-color: #F09185; }
  
  .url-with-errors input {
    background-color: #F09185; }
  
  .password-with-errors input {
    background-color: #F09185; }
  
  .number-with-errors input {
    background-color: #F09185; }
  
  .file-with-errors input {
    background-color: #F09185; }
  
  .tel-with-errors input {
    background-color: #F09185; }
  
  .error-messages {
    position: absolute;
    top: 1.5em;
    left: 0;
    margin: 0;
    min-width: 10em;
    z-index: 1000;
    display: block; }
    .error-messages span {
      display: block; }
    .textarea-with-errors .error-messages {
      bottom: -3.5em;
      top: auto; }
  
  .inline-error-messages {
    margin: 0; }
  
  .inline-error-messages, .inline-error-messages span {
    display: inline-block;
    /* IE hack */
    zoom: 1;
    display: inline; }
  table.form th, table.form td, table.show th, table.show td {
    padding: 0.25em 0.5em;
    vertical-align: top;
  }
  table.form th {font-weight: normal; text-align: left; padding-top: 0.4em}
  form input[type=text], form input[type=email], form input[type=password] {width: 25em}
  form select[multiple] {width: 100%; height: 20em}
  form input {width: auto}
  form textarea {width: 70em; height: 10em}
  fieldset {margin-bottom: 1em; border-width: 0}
  fieldset fieldset {margin-bottom: 1em}
  
  form.button_to, form.button_to div {display: inline}
  
  .address {border-width: 1px; width: 25em}
  .address th, .address td {padding: 0.1em !important}
  .address .city-state-zip input {width: 6em}
  .example {text-align: right; font-size: 70%; color: green}
  .note {font-size: 80%; color: gray}
  
  ul.basic, ol.basic, ul.basic li, ol.basic li {margin: 1em 0; padding: 0}
  ul.basic li, ol.basic li {list-style-type: none; list-style-image: none}
  
  table.show th {text-align: left}
  table.show th, table.show td {padding: 0.25em 0.5em 0.25em 0}
  
  .actions {text-align: right; margin: 1em;}
  .actions input {font-size: 120%}
  
  .flash-block {margin-bottom: 3em !important}
  table.data {
      border-collapse: collapse;
      border: 1px solid #702F11;
    width: 100%;
  }
  
  .orders.index table.data {font-size: 75%}
  
  table.data select,
  table.data input {
      font-size: 95%;
  }
  
  table.data a {
      text-decoration: none;
  }
  
  table.data a:hover {
      text-decoration: underline;
  }
  
  table.data .even th,
  table.data .even td {
      background-color: #D3D3D3;
  }
  
  table.data .odd th,
  table.data .odd td {
      background-color: white;
  }
  
  table.data thead,
  table.data thead a {
      background-color: #702F11;
      color: #FFFF66;
  }
  
  table.data th {text-align: left}
  
  table.data th,
  table.data td {
      border: 1px solid #702F11;
      padding: 0.25em 0.5em;
      vertical-align: top;
      border-left: 1px dashed #D3D3D3;
      border-right: 1px dashed #D3D3D3;
      white-space: nowrap;
  }
  table.data .wrapable {white-space: normal}
  .orders.index table.data th, .orders.index table.data td {padding: 0.1em 0.25em}
  
  table.data .even th,
  table.data .even td {
      border-color: gray;
  }
  
  .pagination {
    background: #f1f1f1;
    border: 1px solid #e5e5e5;
    text-align: center;
    padding: 1em;
    cursor: default;
    margin: 1em 0;
  }
  .pagination a, .pagination span {padding: 0.2em 0.3em}
  .pagination .disabled {color: #aaaaaa}
  .pagination .current {
    font-style: normal;
    font-weight: bold;
    background-color: #bebebe;
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    line-height: 1.5;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    text-shadow: rgba(255, 255, 255, 0.8) 1px 1px 1px;
  }
  .pagination a {
    text-decoration: none;
    color: black;
  }
  .pagination a:hover, .pagination a:focus {text-decoration: underline}
  body {background-color: #E5E5E5;font-size: 90%}
  h1, h2, h3, h4, h5, h6, legend {color: #702F11}
  table {border-collapse: collapse}
  table td {vertical-align: top}
  img {border: 0}
  
  .columns td {vertical-align: top}
  .columns > tbody > tr > td:first-child {padding-right: 5em}
  .right-column {
      border: 0px solid black;
      border-top-width: 1px;
      background-color: #F5F5F5;
    width: 30em;
    margin-bottom: 2em;
  }
  
  .content, #footer {
      margin: 1em auto;
    width: 70em;
  }
  
  .content {
      background-color: white;
      padding: 1em 2em;
      border: 2px solid gray;
    margin-top: 3em;
  }
  
  #footer {margin-bottom: 3em; text-align: right}
  #footer a {padding-left: 2em}
  
  #new-order {
      display: block;
  
      border: 1px solid black;
      background-color: #FFE4B5;
  
      text-align: center;
      padding: 1ex 0em;
  
      width: 10em;
  }
  
  #search-form {float: right}
  #search-form input[type=text] {width: 15em}
  #search-form a {display: block}
  
  .orders.show h1, .orders.show h2 {margin-bottom: 0ex}
  .orders.show address {font-style: normal}
  
  .orders #results-document {
      border: 1px solid black;
      padding: 1ex 0em;
      margin: 1ex 1em;
      background-color: #FFFF66;
  }
  
  .orders #results-document h2 {
      margin: 0ex 2em;
  }
  
  .orders #results-document ol {
      list-style-type: none;
  }
  
  .orders.index {
    width: auto;
      margin: 0; border: 0;
      background-color: transparent;
  }
  
  .participants.index h2 {float: left; margin-bottom: 0.25em}
  .participants.index .actions {margin-bottom: 0}
  body {
    font-family: 'Open Sans',sans-serif;
    margin: 0;
    padding: 0;
    background-color: white;
  }
  h1, h2, h3, h4, h5, h6, legend {color: #666}
  a {color: #25B8E2}
  a:visited {color: black}
  
  table.data, table.data th, table.data td {border-color: #666}
  table.data thead th, table.data thead th a {background-color: #292929; color: white}
  table.data thead td, table.data thead td a {background-color: #25B8E2; color: #656565}
  
  .flash-block, .error-messages, .inline-error-messages, .warning, .error {
    margin: 1em;
  }
  
  #new-order {background-color: #f2f2f2}
  
  #header,
  #navigation {
      background-color: #292929;
      clear: both;
      padding: 2ex 2em;
      text-align: right;
      white-space: nowrap;
  }
  #header {border-top: 5px solid #25B8E2}
  #header .overlay {
    background-color: white;
    border-radius: 3px;
    padding: 1em;
    margin: 0 2em;
  }
  
  #company-name {
      float: left;
      width: 8em;
      font-size: 170%;
      text-align: center;
      font-weight: bold;
      white-space: normal;
  }
  
  #navigation {
    margin: 0 2em;
      padding: 0px;
      background-color: #F2F2F2;
      height: 7ex;
      position: relative;
      top: -2em;
      border-radius: 3px 3px 0 0;
      z-index: 5;
      box-shadow: 0 4px 4px -4px gray;
    background-image: -ms-linear-gradient(top, #F2F2F2 0%, #E9E9E9 100%);
    background-image: -moz-linear-gradient(top, #F2F2F2 0%, #E9E9E9 100%);
    background-image: -o-linear-gradient(top, #F2F2F2 0%, #E9E9E9 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F2F2F2), color-stop(1, #E9E9E9));
    background-image: -webkit-linear-gradient(top, #F2F2F2 0%, #E9E9E9 100%);
    background-image: linear-gradient(to bottom, #F2F2F2 0%, #E9E9E9 100%);
  }
  
  #navigation a {
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
      color: #656565;
      text-transform: uppercase;
      text-decoration: none;
      padding: 20px;
      display: block;
      float: left;
      border-left: 1px solid #d5d5d5;
      height: 2ex;
      width: 160px;
      text-shadow: rgb(238, 238, 238) 0px 1px 0px;
      text-align: left;
  }
  
  #navigation a.first {
      border-left: 0px;
  }
  
  #navigation a:hover {
      background-color: #d5d5d5;
  }
  
  .content {
    position: relative;
    top: -2em;
    width: auto;
    margin: 0 2em;
    border-color: #E1E1E1;
    border-width: 0 1px 1px;
  }
  /*
  
  
  
  
  
   */
  /* truncate long table cells */
.truncate {
  display: inline-block;
  max-width: 52ch; /* ~80 characters depending on font; tweak as needed */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* optional: on hover, show full text in tooltip */
.truncate[title] {
  cursor: help;
}

.content.orders.index,
.content.orders.search {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* make the table obey our column widths and ellipsis */
.content.orders.index table.data,
.content.orders.search table.data {
  table-layout: fixed;
  border-collapse: collapse;
  /* ensure the table can be wider than the viewport so it scrolls
     (prevents columns from being crushed into 1–2 characters) */
  min-width: 1600px; /* adjust if you widen columns */
}

/* ellipsis + no wrapping in all cells */
.content.orders.index table.data th,
.content.orders.index table.data td,
.content.orders.search table.data th,
.content.orders.search table.data td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  /* your file already sets padding/borders; no need to duplicate */
}

/* Optional: make header text not squeeze to single characters when space is tight */
.content.orders.index table.data thead th a,
.content.orders.search table.data thead th a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wrap-orders-text .content.orders.index table.data td.order-wrap-cell,
.wrap-orders-text .content.orders.search table.data td.order-wrap-cell {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: top;
}

.wrap-orders-text .content.orders.index table.data td.order-wrap-cell p,
.wrap-orders-text .content.orders.search table.data td.order-wrap-cell p {
  margin: 0;
}

.hide-inactive-rows tr.inactive-row {
  display: none;
}