// styl
.abnDashboard-component {
  pellet-red = #ff5a5a

  font-family: Arial, Helvetica, sans-serif
  padding: 20px
  background: #FFF

  @-webkit-keyframes zoomOutRight {
    40% {
      opacity: 1;
      -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
      transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
      transform: scale(.1) translate3d(2000px, 0, 0);
      -webkit-transform-origin: right center;
      transform-origin: right center
    }
  }
  @keyframes zoomOutRight {
    40% {
      opacity: 1;
      -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
      -ms-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
      transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
      -ms-transform: scale(.1) translate3d(2000px, 0, 0);
      transform: scale(.1) translate3d(2000px, 0, 0);
      -webkit-transform-origin: right center;
      -ms-transform-origin: right center;
      transform-origin: right center
    }
  }

  .message {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight

    border: solid 1px pellet-red
    background: pellet-red
    border-radius: 10px
    padding: 10px
    position: fixed;
    right: 10px;
    top: 10px;
  }

  .logo {
    img {
      height: 90px
    }

    h1 {
      float:right
    }
  }

  h3 {
    color: #777
    text-align: right
    border-top: solid 1px #777
    margin-top: 50px
  }

  .grid-h {
    clear: both
    .titlebar {
      background: #EEE
    }

    li {
      list-style-type: none
    }

    .row {
      display: flex
      flex-flow: row wrap
      justify-content: flex-end
      align-items: center

      .name {
        flex: 3
      }
      .active {
        padding: 10px
        min-width: 30px
        text-align center
      }
      span {
        padding: 5px
      }
    }

    .hover:hover {
      background pellet-red
      cursor pointer
    }

    .experiment {
      border: solid 1px #eee
      border-top: none
    }
    .details {
      padding: 5px
    }
    .detail-block {
      padding-bottom: 40px
      a.make-active {
        float right
        text-decoration underline
        padding: 0 10px
      }
      a.make-active:hover {
        text-decoration none
      }
      .active-experiment {
        border: solid 1px green
        background: green
        border-radius: 5px
        padding: 10px
        color: #FFF
        float: right
        margin-right: 20px
      }
    }
  }
}