.devices-header {
  display: flex;
  .ui.icon.button {
    margin-left: 0.5em;
  }
}

$disconnected-color: #d20000;
$connected-color: #13d213;

.device {
  .header {
    display: flex !important;
    flex-direction: column;
    @media only screen and (min-width: 768px) {
      flex-direction: row;
    }
  }

  .device-body {
    position: relative;
    margin: 0em -1em 0em -1em;
    padding: 0em 1em 1em 1em;

    &.blurring.dimmable.dimmed {
      // border: $disconnected-color 1px solid;
      border-radius: 0.5em;

      > :not(.dimmer) {
        -webkit-filter: blur(1px) grayscale(0.7);
        // filter: blur(1px) grayscale(0.7);
        filter: grayscale(0.7);
      }

      .ui.dimmer {
        // border-radius: 1em;
        background-color: adjust-color($disconnected-color, $alpha: -0.95);
      }
    }
  }

  .ui.grid {
    margin-top: 0;
  }
  .connectionState {
    @media only screen and (min-width: 768px) {
      margin-left: 0.75em;
    }
    font-size: 0.75em;
    font-weight: lighter;

    &.connected {
      color: $connected-color;
    }

    &.disconnected {
      color: $disconnected-color;
    }
  }
}

.section--number,
.program--number {
  width: 2em;
}

.section--name /*,
.program--name*/
 {
  width: 10em;
  white-space: nowrap;
}

.section--state {
}

.section-state.running {
  color: green;
}

.ui.modal.programEditor > .header > .header.item .inline.fields {
  margin-bottom: 0;
}