/*
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.block-ticket .unregister-panel {
  grid-template-areas: 'name-label name-textbox number-label number-textbox';
  grid-template-columns: 90px 125px 90px 125px;
  -ms-grid-columns: 90px 1.5px 125px 1.5px 90px 1.5px 125px;
  -ms-grid-rows: auto; }
  :host.block-ticket .unregister-panel .unregistered-name {
    /* fix for IE11 */
    -ms-grid-column: 1;
    -ms-grid-column-span: 2; }
  :host.block-ticket .unregister-panel .textbox-unregistered-name {
    /* fix for IE11 */
    -ms-grid-column: 3;
    -ms-grid-column-span: 2; }
  :host.block-ticket .unregister-panel .unregistered-number {
    /* fix for IE11 */
    -ms-grid-column: 5;
    -ms-grid-column-span: 2;
    -ms-grid-row: 1; }
  :host.block-ticket .unregister-panel .textbox-unregistered-number {
    /* fix for IE11 */
    -ms-grid-column: 7;
    -ms-grid-column-span: 2;
    -ms-grid-row: 1; }

.unregister-panel {
  display: grid;
  grid-template-columns: 89.5px 15px 83.5px 63px;
  grid-template-areas: 'name-label   name-label   name-textbox   name-textbox'
 'number-label number-label number-textbox number-textbox';
  grid-gap: 2px 1.5px;
  /* fix for IE11 */
  display: -ms-grid;
  -ms-grid-columns: 89.5px 1.5px 15px 1.5px 63.5px 1.5px 83px;
  -ms-grid-rows: auto 2px auto; }
  .unregister-panel .unregistered-name {
    grid-area: name-label;
    /* fix for IE11 */
    display: inline-block;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 1; }
  .unregister-panel .textbox-unregistered-name {
    grid-area: name-textbox;
    /* fix for IE11 */
    display: inline-block;
    -ms-grid-column: 5;
    -ms-grid-column-span: 3;
    -ms-grid-row: 1; }
  .unregister-panel .unregistered-number {
    grid-area: number-label;
    /* fix for IE11 */
    display: inline-block;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 3; }
  .unregister-panel .textbox-unregistered-number {
    grid-area: number-textbox;
    /* fix for IE11 */
    display: inline-block;
    -ms-grid-column: 5;
    -ms-grid-column-span: 3;
    -ms-grid-row: 3; }
  .unregister-panel .textbox-unregistered-number.error, .unregister-panel .textbox-unregistered-name.error {
    border-color: #F5475B; }
  .unregister-panel.Disabled label, .unregister-panel.Disabled input {
    color: #4A4A52; }
  .unregister-panel.Done label, .unregister-panel.Done input {
    color: #2498BA; }