#protocolEditor
  height: 100%
  width: 450px
  padding: 10px
  position: absolute
  top: 0
  background: #212121

  .navigationButtons
    ul
      margin: 0 auto
      width: 300px

    li
      text-align: center
      width: 150px
      margin: 0

      &:first-child:not(:last-child)
        a
          border-top-right-radius: 0
          border-bottom-right-radius: 0

      &:last-child:not(:first-child)
        a
          border-top-left-radius: 0
          border-bottom-left-radius: 0

      a
        padding: 3px 9px
        cursor: pointer
        text-decoration: none
        outline: none
        background: #3e3e3e
        color: #ffffff

        -webkit-transition: all 0.3s ease
        -moz-transition: all 0.3s ease
        -o-transition: all 0.3s ease
        -ms-transition: all 0.3s ease
        transition: all 0.3s ease

      &.active
        a
          background: #ffffff
          color: #3e3e3e

  p
  h2
  h3
  h4
    color: #f5f5f5

  label
  ul
    color: #f5f5f5
    font-weight: 400

  label
    margin-right: 10px
    width: 25%

  input[type='number']
  input[type='text']
    min-width: 50px
    width: 40%
    border: none
    background: #212121
    color: #ffffff
    text-align: center

  button.btn
    background: #ffffff
    color: #3e3e3e

  .protocolEditorSection
    padding: 10px
    margin: 10px 0

  #protocolOptions
    text-align: center
    position: absolute
    bottom: 0
    width: 100%

    p
      font-size: 8pt
      color: #B3B3B3
      margin: 0 10px
      display: inline-block

  #editProtocol
    overflow-y: auto
    overflow-x: hidden
    padding-right: 16px
    padding-left: 20px
    margin-right: -16px
    width: 100%
    height: calc(100% - 120px)
    &::-webkit-scrollbar
      display: none

  #selectProtocol
    text-align: center

    .btn-file 
      position: relative
      overflow: hidden
      
    .btn-file input[type=file] 
      position: absolute
      top: 0
      right: 0
      min-width: 100%
      min-height: 100%
      font-size: 100px
      text-align: right
      filter: 'alpha(opacity=0)'
      opacity: 0
      outline: none
      background: white
      cursor: inherit
      display: block

    .protocolDropdown
      display: inline-block

      ul
        li
          a
            cursor: pointer

  #activeViewportEditor
    padding: 10px

    .noActiveViewport
      padding: 40px

      h3
        color: #f5f5f5

.cbp-spmenu-right 
  right: -450px

.cbp-spmenu-right.cbp-spmenu-open 
  right: 0
  

/* Transitions */

.cbp-spmenu
  -webkit-transition: all 0.3s ease
  -moz-transition: all 0.3s ease
  transition: all 0.3s ease