.HotkeysPreferences
    display: flex
    padding: 20px

    .errorMessage
      color: var(--state-error-text)
      font-size: 10px
      text-transform: uppercase

    .hotkeyTable
      display: flex
      flex-direction: row
      flex-basis: 0
      flex-grow: 1.5

      .hotkeyColumn
        display: flex
        flex-direction: column
        flex-basis: 0
        flex-grow: 1.5

        .hotkeyHeader
          display: flex
          flex-direction: row
          margin-bottom: 10px

          .headerItemText
            flex-basis: 0
            flex-grow: 1.5
            padding: 5px 15px 5px 0

        .hotkeyRow
          display: flex

          .wrapperHotkeyInput
            margin-bottom: 5px
            cursor: pointer
            display: flex
            flex-direction: column
            flex-basis: 0
            flex-grow: 1.5

          .hotkeyInput
            font-weight: 400
            cursor: pointer
            transition: background-color .3s ease,border-color .3s ease
            background-color: var(--ui-gray)
            color: var(--text-primary-color)
            border-color: var(--ui-border-coolor)
            border: 0
            border-radius: 2px
            font-size: 14px
            height: 30px
            width: 100%
            line-height: 16px
            padding: 8px 9px 6px
            text-align: center

          .hotkeyInput:focus
            border-color: var(--active-color)
            background-color: var(--ui-gray-dark)
            box-shadow: 0 0 0 2px var(--active-color) !important
            outline: 0

          .hotkeyLabel
            padding: 5px 15px 5px 0
            text-align: right
            flex-basis: 0
            flex-grow: 1.5

          .stateError
            .hotkeyInput
              background-color: var(--state-error)