body
  overflow-y scroll

[v-cloak]
  display none

.menu-link
  z-index unset

tt
  color #000
  background #eee
  padding 2px

.button-success:not([disabled])
  background-color #1cb841

.button-error:not([disabled])
  background-color #ca3c3c

.button-warning:not([disabled])
  background-color #df7514

.button-secondary:not([disabled])
  background-color #42b8dd

.header, .content
  padding 0

.clear
  clear left
  clear right

.header
    padding-left 60px
    display flex

  .brand
    display flex
    flex-direction column
    align-self center
    white-space nowrap

    img
      width 300px

    .version
      font-size 18pt
      color #777
      display flex

      .upgrade-link
        margin-left 20px
        font-size 16pt
        align-self center
        color blue

      .upgrade-attention
        background-color red
        width 20px
        height 20px
        display inline-block
        border-radius 50%
        color white
        font-size 13pt
        font-weight 1000
        margin-left 5px
        align-self center

  .pi-temp-warning
    align-self center
    font-size 30pt
    font-family Audiowide
    display inline
    margin 0 30px

    .left
      color #444
    .right
      color #e5aa3d

  .whitespace
    flex-grow 1

  .video
    position relative
    width 174px
    height 130px
    border 2px solid transparent
    border-radius 5px

    &:hover
      border-color #aaa

    &.large
      width 100%
      margin 5px 0
      height inherit

    .crosshair
      > *
        border 1px dashed #ccc
        position absolute

      .vertical
        height 100%
        width 0
        left 50%
        margin-left -1px

      .horizontal
        height 0
        width 100%
        top 50%
        margin-top -1px

      .box
        width 16px
        height 16px
        top 50%
        left 50%
        margin-top -9px
        margin-left -9px

    img
      width 100%
      height 100%

  .estop
    align-self center
    margin 0 30px

.error
  background red

.warn
  background orange

.success
  background green

.fa
  font-size 150%

.modal-mask .fa
  font-size inherit

.fa.error
  background inherit
  color red

.fa.warn
  background inherit
  color orange

.fa.success
  background inherit
  color green

.load-on
  background-color #ccffcc
  color #000

@keyframes attention
  50%
    opacity 0.5

.attention
    background-color #f5e138
    color #000
    animation attention 2s step-start 0s infinite

span.unit
  font-size 60%

.status
  color #eee
  text-align center
  padding 0.125em
  font-weight bold
  margin-bottom 0.5em
  text-transform uppercase

  &.connecting
    color orange
  &.disconnected
    color red
  &.connected
    color green

#overlay
  position fixed
  top 0
  left 0
  width 100%
  height 100%
  background-color rgba(0, 0, 0, 0.7)
  z-index 2000
  color white
  font-weight bold
  font-size 24pt
  text-align center
  text-transform uppercase

  span
    position relative
    top 50%

#menu
  .save
    display block
    margin 0.25em 0.6em

  .pure-menu-heading
    background inherit
    padding 0

    .pure-menu-link
      padding 0.6em
      color #fff

  .pure-menu-item .pure-menu-link
    padding-left 1.5em


#main
  margin-left 0.5em

  .content
    h2
      text-transform capitalize

    .pure-control-group
      label.units
        width 6em
        text-align left

      textarea
        width 24em
        height 12em

      > select, > input:not([type=checkbox])
        min-width 300px

      > tt
        min-width 15.25em
        padding 0.7em 1em
        border-radius 3px
        display inline-block
        

@keyframes blink
  50%
    fill #ff9d00

.estop
  width 130px
  transition 250ms

  &.active .ring
    animation blink 2s step-start 0s infinite

  &:hover .button circle
    fill #b72424 !important

  svg
    cursor pointer

    .button:hover
      filter brightness(120%)

.control-view
  max-width 95%

  table
    border-collapse collapse

    // Make sure buttons don't turn into circles
    button
      -webkit-appearance none
      border-radius 0px
      border-width 1px
      border-color darkgrey

    // The jogging buttons, etc.
    .control-buttons button
      font-size 150%
      width 100px
      height 100px

    .jog-units
      font-size initial
      margin-left 5px

    &:first-child
      margin 0.5em 0

    td, th
      border none

    .radio-toolbar
      input
        opacity 0
        position fixed
        width 0
      label
        display inline-block
        background-color #ddd
        padding 10px 20px
        font-family sans-serif Arial
        font-size 16px
        border 2px solid #444
        border-radius 4px

  .axes
    width 100%

    .axis-x .name
      color #f00

    .axis-y .name
      color #0f0

    .axis-z .name
      color #00f

    .axis-a .name
      color #f80

    .axis-b .name
      color #0ff

    .axis-c .name
      color #f0f

    td, th
      padding 2px
      white-space nowrap
      border 1px solid #ddd

    th
      text-align center
      vertical-align bottom

    td
      text-align right
      font-family Courier

    .homed
      background-color #ccffcc
      color #000

    .warn
      background-color #ffffcc

    .error
      background-color #ffcccc

    .axis
      .name
        text-transform capitalize
        vertical-align middle

      .name, .position
        font-size 24pt
        line-height 24pt

      .position
        width 99%

      td.state
        text-align left

        .fa
          margin-left 2px
          margin-right 6px

      .absolute, .offset
        min-width 6em
        
      td.tstate
        text-align left

        .fa
          margin-left 2px
          margin-right 6px

    tr:nth-child(1) th.actions
      text-align right

  .jog svg
    text
      user-select none
      font-family Sans
      font-weight bold
      stroke transparent
      fill #444

    .button
      cursor pointer
      stroke #4c4c4c

      &:hover
        stroke #e55

      path
        overflow visible

    .house
      stroke #444
      fill #444

    .ring
      cursor pointer
      overflow visible

      .button
        stroke transparent

        &:hover
          stroke #e55

        text
          font-size 8pt
          text-anchor middle

  .info
    empty-cells show
    width 100%
    display inline-block

    th, td
      height 1.75em
      padding 3px
      text-align right
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      border 1px solid #ddd

    th
      min-width 5.25em
      width 5.25em

    td
      min-width 8em
      width 100%

    .units
      padding 0

      select
        width 100%
        height 1.9em
        background-color transparent
        border 0
        padding 3px
        text-align right

    .eta
      font-size 90%

    .progress
      height 1.75em

      label
        float right

      .bar
        height 1.75em
        background #f2ac45

  .override
    display none /* Hidden for now */
    margin 0.5em 0
    white-space nowrap

    label
      font-weight bold
      min-width 3.5em
      display inline-block

    .percent
      display inline-block
      width 3em

    input
      border-radius 0
      margin -0.4em 0.5em

  .override:nth-of-type(1)
    clear left
    float left

  .override:nth-of-type(2)
    clear right
    float right

  .toolbar
    clear both
    padding 0 0.125em

    > *
      margin 0.25em 0.125em

    select
      max-width 11em
      min-width inherit !important

    .progress
      display inline-block
      background #fff
      line-height 2em
      border 1px solid #aaa
      border-radius 3px
      width 330px
      vertical-align middle
      text-align center

      div
        height 2em
        background #f2ac45

        label
          margin 0 0.125em
          white-space nowrap

  .tabs
    section
      min-height 500px
      overflow-x hidden
      overflow-y auto
      padding 0
      margin 0

  .path-viewer
    width 100%

    .path-viewer-content
      height 500px

  .gcode, .history
    font-family courier
    clear both
    overflow auto
    width 100%
    height 450px
    white-space nowrap

    .clusterize-scroll
      max-height 450px

    &.placeholder
      color #aaa

  .history
    padding 0.25em

  .gcode ul, .history ul
    margin 0
    padding 0
    list-style none

  .gcode ul
    li
      line-height 15px

    li:nth-child(even)
      background-color #fafafa

    li.highlight
      background-color #eaeaea

    li > b
      font-weight normal
      display inline-block
      padding 0 0.25em
      color #e5aa3d
      min-width 4em

  .history ul li
    cursor pointer

  .mdi
    clear both
    white-space nowrap
    padding 0.125em
    display flex

    > *
      margin 0.125em

    input
      flex 2

  .jog
    text-align center

    > svg
      margin 1em

    .jog-settings
      margin-bottom 1em

      input
        margin 0 0.5em
        vertical-align middle

.path-viewer
  table
    margin 0.25em
    width 100%

  .path-viewer-toolbar
    > *
      margin 0.25em

    .tool-button
      display inline-block
      cursor pointer
      border 2px solid transparent
      border-radius 2px
      text-align center

      &:hover
        opacity 0.7
        border 2px inset #eee

      &.active
        border 2px inset #888
        background #ddd

      img
        max-height 32px
        vertical-align bottom

      .fa
        font-size 28px
        display inline-block
        width 32px

  .path-viewer-messages
    margin 0.125em 0

    th, td
      padding 0.125em

      &.level
        text-transform capitalize

  .path-viewer-content
    background-color #333
    background linear-gradient(to bottom, #666 0%, #222 100%);
    margin-bottom 0.5em

  &.small
    .path-viewer-content
      width 340px
      height 150px
      float right
      margin-top -88px

.console
  .console-wrapper
    max-height 400px
    overflow-y auto

  .message
    white-space pre

  table
    width 100%
    margin 0.5em 0
    border-collapse collapse

    td, th
      border 1px solid #ddd
      padding 2px

      &:first-child
        border-left 0

      &:last-child
        border-right 0

    tr
      > td
        margin 0 0.125em
        background-color #fff

tr.log-error td
  color red

tr.log-warning td
  color orange

tr.log-debug td
  color green

.indicators
  padding 1em 0
  text-align center

  table
    display inline-block
    vertical-align top
    margin 0.5em
    empty-cells show
    border 3px solid #bbb

    td, th
      padding 4px
      white-space nowrap

    tr:nth-child(odd)
      background #f7f7f7

    th
      text-align left

    td
      text-align right

    &.inputs, &.outputs
      td:nth-child(1), td:nth-child(5)
        text-align center

    th.header
      height 2.5em
      border-bottom 3px solid #ccc
      text-align center

    th.separator
      background #ccc
      border 1px solid #ccc
      padding 1px

    &.motor_fault
      td, th
        text-align center
        min-width 1.75em

      .fa-eraser
        cursor pointer

        &:hover
          opacity 0.5

.io
  &.active
    color green

  &.inactive
    color black

  &.warn
    background-color transparent
    color orange

tt.save
  display inline-block
  border-radius 2px
  background #1cb841
  color rgba(0, 0, 0, 0.8)
  padding 0.25em
  line-height initial

.modbus-program button
  margin 0.25em 0

.pure-form .modbus-regs
  input, select
    border none
    box-shadow none
    border-radius 0
    background transparent
    padding 0 0.5em
    height 1.75em
    line-height 1.75em

  input
    text-align right
    width 6em

  button
    margin 2px

  th, td
    border 1px solid #ccc
    line-height 1.75em

  th
    padding 0.5em

  &.fixed-regs td, td.reg-index, td.modbus-status
    padding 0 0.5em

  td.reg-index, td.reg-addr, td.reg-value
    text-align right

  tr:nth-child(even):not(.warn)
    background-color #f3f3f3


.tabs
  clear both

  > input
    display none

  > label
    display block
    float left
    width 6em
    font-weight bold
    cursor pointer
    text-decoration none
    text-align center
    background #f6f6f6
    border-top-left-radius 5px
    border-top-right-radius 5px
    border-top 2px solid #f6f6f6
    border-left 1px solid #f6f6f6
    border-right 1px solid #f6f6f6
    margin-right 2px

  > section
    display none
    clear both

  > #tab1:checked ~ #content1,
  > #tab2:checked ~ #content2,
  > #tab3:checked ~ #content3,
  > #tab4:checked ~ #content4,
  > #tab5:checked ~ #content5,
  > #tab6:checked ~ #content6,
  > #tab7:checked ~ #content7,
  > #tab8:checked ~ #content8,
  > #tab9:checked ~ #content9
    display block

  [id^="tab"]:checked + label
    background #fff
    border-top 2px solid #ddd
    border-left 1px solid #ddd
    border-right 1px solid #ddd
    border-bottom 1px solid #fff
    margin-bottom -1px

  .tab-content
    border 1px solid #ddd
    padding 0.5em


.motor.slave
  .tmpl-input-axis .units::after
    content "(slave motor)"
    white-space nowrap

  fieldset.limits, fieldset.homing, fieldset.motion .pure-control-group,
  fieldset.power .pure-control-group.tmpl-input-enabled
    display none

  fieldset.motion .pure-control-group.tmpl-input-reverse
    display inherit


.admin-general-view, .admin-network-view
  h2:not(:first-of-type)
    margin-top 2em

  a
    text-decoration none


.modal-mask
  position fixed
  z-index 9998
  top 0
  left 0
  width 100%
  height 100%
  background-color rgba(0, 0, 0, .25)
  display table
  transition opacity .3s ease

  .modal-wrapper
    display table-cell
    vertical-align middle

    .modal-container
      width 300px
      margin 0px auto
      padding 20px 30px
      background-color #fff
      border-radius 2px
      box-shadow 0 2px 8px rgba(0, 0, 0, .33)
      transition all .3s ease
      font-family Helvetica, Arial, sans-serif


.modal-header
  text-decoration underline

.modal-footer
  text-align right

.modal-enter, .modal-leave
  opacity 0

.modal-enter .modal-container
  transform scale(1.1)

.modal-leave .modal-container
  transform scale(0.9)

.file-upload
  display none

.error-message
  &.modal-mask .modal-wrapper .modal-container
    width auto
    max-width 800px

  .modal-header h3
    white-space nowrap
    overflow hidden
    text-overflow ellipsis

  .estop
    float right
    transform scale(0.75)
    margin-top -30px

  .console
    margin-bottom 1em
    clear both


.wifi-confirm table
  th
    text-align right

  th, td
    padding 0 4px


.cheat-sheet
  table
    border-collapse collapse
    margin-bottom 0.5em

    *
      text-align left

  th, td
    border 1px solid #eee
    padding 4px

  tr.header-row
    background #eee

  tr:nth-child(even)
    background #f7f7f7

  tr.unimplemented
    background #ffff9b

  tr.spacer-row
    background transparent

    th, td
      border none
      height 1em


@media only screen and (max-width 970px)
  .control-view #control
    .path-viewer.small .path-viewer-content
      margin-top inherit
      float inherit

@media only screen and (max-width 940px)
  .header
    height auto

    .header-content > .banner
      margin-left 70px
      padding-top 0
      float none

  .control-view #control
    .axes
      .axis
        .name, .position
          font-size 18pt
          line-height 18pt

      .absolute, .offset
        display none

    > *:nth-of-type(n)
      float none
      clear both
      width 99%

  .tab_container
    width 98%

.reset-variants
  padding-left 40px
  padding-bottom 20px
  display grid
  grid-template-rows repeat(4, auto)
  grid-template-columns min-content auto
  grid-gap 20px 10px

  input[type="radio"]
    width 30px
    height 30px

  label
    font-size 16pt
    align-self center

.pure-form-aligned .pure-control-group label:not(.extra)
  width 12em

.pure-form-aligned .pure-control-group label.extra
    width 8em