nav
  position: fixed
  left: 0
  top: 0
  width: 250px
  height: 100%
  display: flex
  flex-direction: column
  .sso-menu-switch
    color: white
    border: 1px solid white
    position: absolute
    right: 10px
    top: 10px
    font-size: 24px
    padding: 5px 15px
    display: none

  header
    background: #343434
    text-align: center
    padding: 20px 0
    h1
      margin: 0
  .nav-current
    background: #343434
    display: flex
    justify-content: space-between
    align-items: center
    &-item
      display: flex
      align-items: center
      color: white
      font-size: 16px
      margin: 5px 8px
      &.logout
        font-size: 20px
    &-subitem
      margin-left: 5px
      font-size: 12px

  ul.nav-links
    margin: 0
    padding: 0
    list-style-type: none
    flex-grow: 1
    border-right: 5px solid #f3f3f3
    li
      box-sizing: border-box
      border-left: 0 solid transparent
      transition: 0.2s border-left-width
      a
        display: block
        padding: 5px 8px
        text-decoration: none
        text-transform: uppercase
        color: #343434
      &:hover
        border-left: 4px solid transparent
      &.active
        border-left: 4px solid #f3c289
        a
          color: #f3c289

  .nav-created-by
    border-right: 5px solid #f3f3f3
    box-sizing: border-box
    padding: 8px

.container
  position: absolute
  left: 250px
  right: 0
  top: 0
  box-sizing: border-box
  padding: 10px 15px

.form-group
  box-sizing: border-box
  flex-basis: calc(50% - 10px)

form
  font-size: 14px
  display: flex
  flex-wrap: wrap
  justify-content: space-between

input
  display: block
  line-height: normal
  box-sizing: border-box
  height: 2.4375rem
  padding: .5rem
  border: 1px solid #cacaca
  margin: 0 0 1rem
  font-family: inherit
  font-size: 1rem
  color: #0a0a0a
  background-color: #fefefe
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1)
  border-radius: 0
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out
  -webkit-appearance: none
  -moz-appearance: none
  &:focus
    border: 1px solid #8a8a8a
    background-color: #fefefe
    outline: none
    box-shadow: 0 0 5px #cacaca
    transition: box-shadow 0.5s, border-color 0.25s ease-in-out

.sso-form-buttons
  display: flex
  flex-direction: row
  flex-wrap: wrap
  width: 100%

.sso-form-buttons-flexibile
  width: auto

.sso-form-button
  border: none
  color: white
  background: #f3c289
  padding: 10px 8px
  margin: 0 4px
  -webkit-appearance: none
  transition: 0.2s background
  &:hover
    background: #be9568
    color: white

  &:first-child
    margin-left: 0

  &:last-child
    margin-right: 0

.sso-form-button-primary
  background: #5cb85c
  flex-grow: 1
  &:hover
    background: #499249

@media screen and (max-width: 968px)

  nav
    position: relative
    width: 100%
    height: auto
    .sso-menu-switch
      display: block
    .nav-links
      height: 0
      overflow: hidden
      &.nav-links-shown
        height: auto

  .container
    position: relative
    width: 100%
    left: 0

  .form-group
    flex-basis: calc(100%)