.settings-layout
  background-color $gray-darkest
  width 100%
  min-height 100%
  padding 30px
  text-align left
  
  .overlay
    text-align center
    
  hr
    margin 3rem 0
    border-color $gray-darker
  
  h2
    color $white
    font-size 2rem
    padding-bottom 40px
    
  form
    display inline-block
    
  > .content
    margin-top 50px
    color $white
    
    h2
      color $gray
      
    &.feedback
      p
        line-height 1.5em
      textarea
        display block
        font-size 1em
        margin 0 0 1em
        width 80%
        +below($width-xs)
          width 100%

    &.account
      .membership
        h2
          padding-bottom 20px
        .warning
          color $gray-dark
          margin 10px 0 20px
        .subscription
          font-size 1.2rem
          display block
          color $gray
          margin-bottom 1em
          > span
            display block
            margin 1em 0.5em 0 0
            &.description
              color $gray-dark
              font-style italic
              margin-top 0.2em
              &.error
                color $red-light
            
      .renew-subscription-dialog
        display inline-block
        padding 40px 0
        width 70%
        text-align center
        font-size 2rem
        +below($width-xs)
          width 85%
          overflow-y scroll
          height 100%
        .intro
          +below($width-xs)
            display none
        .pricing-item
          margin 30px 0
          +below($width-xs)
            margin-top 0
          .title
            font-size 150%
            font-weight 500
            color $white
          .features
            font-size 50%
            color $gray-dark
            +below($width-xs)
              display none
            li
              margin 15px 0
          .price
            color $white
            margin-top 30px
        .payment-form
          .card-number
            width 100%
          .row:nth-child(2)
            display flex
            flex-flow row no-wrap
            justify-content space-between
            align-items center
            font-size 0.5em
            +below($width-xs)
              flex-flow column no-wrap
            > div
              margin 0 0.2em 1em
              label, div
                margin-right 0.2em
              input
                &.cvc
                  font-size 1em
                  max-width 3em
          .powered-by-stripe
            color $gray-darker
            font-size 0.8rem
            font-style italic
            a
              @extend $blendLink
        .payment-thanks
          p
            margin 20px 0
            
            

      .change-password
        margin-top 3.5rem
          
    &.backupRestore
      .backup-file
        margin-bottom 2.5em
        p
          margin 0 0 1em
          font-size 1.2rem
          label
            font-weight 700
            font-size 90%
            color $gray-dark
            margin-right 1em
          &.last
            margin-bottom 1.5em
          
      .restore-backup-dialog
        padding 40px
        &.progress-message
          color $gray


  .enable-cloud-sync
    text-align center
    position relative
    top 40px
    font-size 2rem
    color $white
    width 60%
    margin 0 auto
    +below($width-xs)
      top 60px
      width 80%
      font-size 1.5rem
    .intro
      margin-bottom 2rem
    .terms
      font-size 1rem
    .buttons
      margin-top 1em
      button
        margin 0 1em 
    .sign-up-form
      margin-bottom 0.5em  


  .tab-menu
    @extend $defaultTabMenu
