/*
The darken/lighten is not giving accurate results for the toasters so specific vars for them below.

- Red background: #c23848 you can get this colour roughly from using the red variable and with HSL lower lightness by 20.
- Blue background: #377ebd you can get this colour roughly from using the blue variable and with HSL lower lightness by 20.
- Orange background: #ff9933
- The text colour on all of these, could they please be #E2E2E2, except from warning which remains with black text.

*/
/*is not being used anywhere; the same as @redAlert*/
:host {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  /* fix for IE11 */
  display: -ms-grid;
  -ms-grid-rows: 1fr;
  -ms-grid-columns: 1fr; }

.fx-split-value-date {
  display: grid;
  row-gap: 2px;
  grid-template-areas: 'checkbox'
 'leg-data-area';
  grid-template-rows: 21px auto;
  /* fix for IE11 */
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 21px 2px auto; }
  .fx-split-value-date .fx-svd-checkbox {
    grid-area: checkbox;
    /* fix for IE11 */
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    -ms-grid-row: 1; }
  .fx-split-value-date .fx-svd-notice, .fx-split-value-date .fx-svd-title {
    display: none;
    grid-area: checkbox;
    /* fix for IE11 */
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    -ms-grid-row: 1; }
  .fx-split-value-date .fx-svd-leg-data-area {
    grid-area: leg-data-area;
    /* fix for IE11 */
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    -ms-grid-row: 3; }
    .fx-split-value-date .fx-svd-leg-data-area .fx-svd-leg-data {
      display: grid;
      grid-template-columns: 104.5px 146.5px;
      row-gap: 2px;
      grid-template-areas: 'tenor tenor'
 'base-label base-value-date'
 'term-label term-value-date';
      grid-template-rows: 1fr 1fr 1fr;
      /* fix for IE11 */
      display: -ms-grid;
      -ms-grid-columns: 104.5px 146.5px;
      -ms-grid-rows: 1fr 2px 1fr 2px 1fr; }
      .fx-split-value-date .fx-svd-leg-data-area .fx-svd-leg-data .fx-svd-tenor {
        grid-area: tenor;
        /* fix for IE11 */
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        -ms-grid-row: 1;
        margin: 0;
        border-width: 1px 0 0 0;
        padding: 0; }
        .fx-split-value-date .fx-svd-leg-data-area .fx-svd-leg-data .fx-svd-tenor .tenorText {
          padding: 0 5px; }
      .fx-split-value-date .fx-svd-leg-data-area .fx-svd-leg-data .fx-svd-base-label {
        grid-area: base-label;
        /* fix for IE11 */
        display: inline-block;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        -ms-grid-row: 3; }
      .fx-split-value-date .fx-svd-leg-data-area .fx-svd-leg-data .fx-svd-base-value-date {
        grid-area: base-value-date;
        /* fix for IE11 */
        display: inline-block;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        -ms-grid-row: 3; }
      .fx-split-value-date .fx-svd-leg-data-area .fx-svd-leg-data .fx-svd-term-label {
        grid-area: term-label;
        /* fix for IE11 */
        display: inline-block;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        -ms-grid-row: 5; }
      .fx-split-value-date .fx-svd-leg-data-area .fx-svd-leg-data .fx-svd-term-value-date {
        grid-area: term-value-date;
        /* fix for IE11 */
        display: inline-block;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        -ms-grid-row: 5; }
  .fx-split-value-date .validation-tooltip {
    color: #F5475B;
    position: absolute;
    margin-left: 3px; }
  .fx-split-value-date.hide-all {
    display: none; }
  .fx-split-value-date.hide-svd .fx-svd-leg-data-area {
    display: none; }
  .fx-split-value-date.show-notice .fx-svd-notice {
    display: block; }
  .fx-split-value-date.show-notice .fx-svd-checkbox, .fx-split-value-date.show-notice .fx-svd-title, .fx-split-value-date.show-notice .fx-svd-leg-data-area {
    display: none; }
  .fx-split-value-date.show-title .fx-svd-title {
    display: block; }
  .fx-split-value-date.show-title .fx-svd-checkbox {
    display: none; }
  .fx-split-value-date.Done .fx-label, .fx-split-value-date.Done .fx-svd-title, .fx-split-value-date.Done .fx-svd-notice {
    color: #2498BA; }
  .fx-split-value-date.Done fieldset {
    color: #2498BA;
    border-color: #2498BA; }
  .fx-split-value-date.Disabled .fx-label {
    color: #4A4A52; }
  .fx-split-value-date.Negotiate .fx-label {
    color: #4A4A52; }