/*
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 {
  position: relative; }

.popup-si-container {
  display: none;
  position: absolute;
  width: 250px;
  height: 100px;
  padding: 3px;
  z-index: 2;
  border: 3px solid #4A4A52;
  background-color: #1f1f1f;
  outline: 1px solid #000;
  grid-template-rows: 1fr 21px;
  /* fix for IE11 */
  -ms-grid-rows: 1fr 21px;
  -ms-grid-columns: 1fr; }
  .popup-si-container.show-popup {
    display: grid;
    /* fix for IE11 */
    display: -ms-grid; }
  .popup-si-container.top.left:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    border-color: transparent transparent #4A4A52 transparent;
    border-width: 6px;
    border-style: solid;
    left: 28px;
    top: -14px;
    z-index: 1; }
  .popup-si-container.top.left:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 28px;
    top: -15px;
    border-color: transparent transparent #000 transparent;
    border-width: 6px;
    border-style: solid; }
  .popup-si-container.top.right:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    border-color: transparent transparent #4A4A52 transparent;
    border-width: 6px;
    border-style: solid;
    right: 28px;
    top: -14px;
    z-index: 1; }
  .popup-si-container.top.right:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    right: 28px;
    top: -15px;
    border-color: transparent transparent #000 transparent;
    border-width: 6px;
    border-style: solid; }
  .popup-si-container.bottom.right:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    right: 28px;
    z-index: 1;
    bottom: -14px;
    border-color: #4A4A52 transparent transparent transparent;
    border-width: 6px;
    border-style: solid; }
  .popup-si-container.bottom.right:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    right: 28px;
    bottom: -15px;
    border-color: #000 transparent transparent transparent;
    border-width: 6px;
    border-style: solid; }
  .popup-si-container.bottom.left:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 28px;
    z-index: 1;
    bottom: -14px;
    border-color: #4A4A52 transparent transparent transparent;
    border-width: 6px;
    border-style: solid; }
  .popup-si-container.bottom.left:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 28px;
    bottom: -15px;
    border-color: #000 transparent transparent transparent;
    border-width: 6px;
    border-style: solid; }
  .popup-si-container.top {
    top: 22px; }
  .popup-si-container.left {
    left: 0; }
  .popup-si-container.right {
    right: 0; }
  .popup-si-container.bottom {
    bottom: 27px; }
  .popup-si-container .si-detail-row, .popup-si-container .button-row {
    display: grid;
    grid-template-columns: 106px 1fr;
    grid-gap: 0 1.5px;
    position: relative;
    height: 21px;
    /* fix for IE11 */
    display: -ms-grid;
    -ms-grid-columns: 106px 1fr; }
  .popup-si-container .si-detail-row {
    -ms-grid-row: 1; }
    .popup-si-container .si-detail-row .detail-label {
      -ms-grid-column: 1;
      display: inline-block; }
    .popup-si-container .si-detail-row .detail-select {
      -ms-grid-column: 2;
      display: inline-block;
      max-width: 100%;
      overflow: hidden; }
  .popup-si-container .button-row {
    -ms-grid-row: 2; }
    .popup-si-container .button-row .popup-cancel-btn {
      -ms-grid-column: 1; }
    .popup-si-container .button-row .popup-save-btn {
      -ms-grid-column: 2; }