[data-controller="passwords"][data-action="new"],
[data-controller="passwords"][data-action="edit"]
  #page_content
    .container
      .devise_content
        +grid(16)
        padding-top: 15px
        .links
          padding: 15px 0 20px
          a
            color: $blue
            font-family: Arial
            font-size: 13px
            text-decoration: none
            &:hover
              color: $pink

        form
          label
            font-family: Lato-Regular
            font-size: 13px
        .title
          +grid(16)
          +alpha
          padding-bottom: 40px
          h1
            color: $ultra_gryn
            font-family: "Lato-Regular"
            font-size: 28px
            padding: 5px 0
          h2
            color: rgba($ultra_gryn, 0.7)
            font-family: Arial
            font-size: 18px
[data-controller="sessions"][data-namespace="devise"][data-action="new"]
  .container
    .form_login, .form_register, .login_with_social
      padding-top: 40px !important
      padding-bottom: 30px
      &.actived
        padding-top: 17px !important
        .content_form
          float: left
          border: 3px $df_gryn solid
          padding: 20px 20px 0 20px
          background: rgba($ed_gryn, 0.4)
      h1
        font-family: Lato-Bold
        font-size: 20px
        padding-bottom: 5px
        color: $ultra_gryn
      h3
        font-family: Lato-Regular
        font-size: 15px
        padding-bottom: 15px
        color: $_6f_gryn
      .input.check
        label
          font-size: 11px !important
      label
        font-family: Lato-Regular
        font-size: 12px
        width: 220px
    .form_login
      +grid(5)
      input[type="checkbox"]
        float: left
        margin-right: 5px
      .content_form
        padding: 0px 23px 0 23px
        p.forgot_link
          padding: 15px 0 0
          a
            color: $blue
            font-family: Arial
            font-size: 13px
            text-decoration: none
            &:hover
              color: $pink
    .form_register
      +grid(5)
    .login_with_social
      +grid(6)
      .content_form
        padding-left: 20px
      .another_social
        a
          text-decoration: none
          font-weight: bold
          &.first
            margin-left: -10px
          img
            width: 55px
            +transition(all, 0.3s)
          img:hover, img:focus
            +scale(1.2)
        a.disabled
          img
            +opacity(0.6)
          img:hover, img:focus, img:active
            +scale(1)      
      .facebook_start
        margin-bottom: 40px !important
        clear: both
        +border-radius(4px)
        width: 246px
        height: 27px
        background: image-url("login_with_facebook_button310x60.png") left top no-repeat
        display: block
        padding: 33px 0 0 64px
        color: white
        font-size: 13px
        font-family: Arial
        text-decoration: none
        +text-shadow(black, 1px, 1px, 1px)
        text-align: left
        &:hover, &:focus
          +box-shadow(rgba(black,0.75) 0px 0px 5px inset !important)
        &:active
          +box-shadow(rgba(black, 1) 0px 0px 15px inset !important)