<commit_before>@require "./app.fonts"

@css {
/*
MAIN APP stylesheet
resurrection.styl
*/
}

// When app class is added to html tag
// layout becomes 100% width and height
// so that apps can control their own
// scrollviews and add their chrome frames
html.app
  height            100%
  body
    height          100%
    overflow        hidden  // this is to avoid rubber-band/elastic scroll on macs

body
  font-family             openSansFamily
  font-weight             400
  -webkit-font-smoothing  subpixel-antialiased

  &.noscroll
    overflow        hidden

  &.logged-in
    #main-header
      nav
        hidden()

  > .invisible
    abs             -1000% 0 0 -1000%

input
textarea
button
  font-family       openSansFamily

input[type=checkbox]:checked + label:after
  border-right              3px solid #00B057 !important
  border-top                3px solid #00B057 !important

pre
  font-family               monoFamily

.kdview
  overflow                  visible

.no-anim
  noAnim()

#kdmaincontainer
  width                     auto

  #main-sidebar
    z-index                 0
    vendor                  transition, width .3s ease
    hidden()

  &.fullscreen
    width                   100%!important
    left                    0!important
    top                     0!important
    bottom                  0!important
    right                   0!important
    z-index                 10
    .application-page
      padding               0!important
    .app-settings-menu
      top                   0
      right                 0
    #main-header
      hidden()

  &.with-sidebar
    #main-panel-wrapper
      fr()
      vendor                transition, margin-left .3s ease
      margin-left           sidebarWidth + 1
      width                 calc(100% - 258px)

    #main-sidebar
      z-index               2
      visible()

      .SidebarListItem
        rel()

      .logo-wrapper
        a
          vendor            transition, width .3s ease

      > .kdcustomscrollview
        .kdscrolltrack.horizontal
          hidden()

      .count
      .SidebarListItem-unreadCount
        vendor            transition, font-size .3s ease

      .sidebar-title
      .sidebar-machine-box
        > cite, div
          vendor            transition, opacity .3s ease

      .SidebarSection-header
        vendor              transition, opacity .3s ease

    #main-header
      hidden()

    &.hover
    &.collapsed

      #main-sidebar
        border-right        2px solid #131313

        .sidebar-message-text > .profile
          abs()
          top               -2px

        .sidebar-title
          white-space       nowrap

          &:hover
            white-space     normal

        .progressbar-container
          hidden()

      #main-panel-wrapper
        width               calc(100% - 50px)
        margin-left         50px

    &.hover
      #main-sidebar
        width               sidebarWidth + 1

        .sidebar-machine-box
          .kdscrollview
            overflow        hidden

      .sidebar-close-handle
        vendor              transform, scaleX(-1)

    &.collapsed

      #main-sidebar
        .logo-wrapper
          padding           0

          a
            rel()
            r-sprite        'app', 'logo-full'
            width           18px
            vendor          transform, translateY(-50%)
            top             50%
            left            17px

        .sidebar-close-handle
          display           none !important

        .SidebarSection-header
        .sidebar-title
          opacity           0

        .sidebar-machine-box
          width             20px

          .kdscrollview
            overflow        hidden

          a.vm
            width           13px
            padding-right   0

            div
            span
              hidden()

          .listview-wrapper
          > cite, div
            opacity         0

        .kdlistitemview-sidebar-item
          .sidebar-message-text
            text-indent     9999px

          .ttag em
            opacity         0

        .count
        .SidebarListItem-unreadCount
          right             13px
          top               -2px
          size              8px 8px
          rounded(50%)
          font-size         0
          padding           0
          border            1px solid #393233

        .SidebarListItem-unreadCount
          right             -1px
          top               1px
          min-width         auto

        .account-area
          width             50px

          .profile
          .notifications .icon
            hidden()

          .notifications .count
            top             8px
            left            31px

          .acc-dropdown-icon
            opacity         0

#main-panel-wrapper
  min-height                100%
  z-index                   1
  bg                        color, white
  vendor                    transition, box-shadow .177s ease

#main-header
  margin                    0
  size                      100%,55px
  z-index                   1000
  overflow                  visible
  max-width                 1290px
  shadow                    none
  padding                   0 45px
  abs                       48px 0 0 50%
  vendor                    transform, translateX(-50%)
  z-index                   15
  borderBox()


  .inner-container
    bg                  color, transparent

  .logotype
    font-size               24px
    color                   #444
    font-weight             700
    line-height             16px
    color                   #fff
    -webkit-font-smoothing  antialiased
    noTextDeco()
    visible()
    fl()

  #koding-logo
    margin              0 14px 0 0
    size                auto auto
    bg                  color, transparent
    position            static
    letter-spacing      .01em
    fl()

    cite
      r-sprite          app 'logo'
      margin            0
      display           block

  nav
    line-height         18px
    fr()

    a
      -webkit-font-smoothing  antialiased
      font-smoothing          antialiased

      font-size         16px
      margin-left       12px
      font-weight       500
      font-family       openSansFamily
      color             rgba(255,255,255,.83)
      padding-bottom    1px
      noTextDeco()

      &.active
        font-weight     600
        border-bottom   1px solid rgba(255,255,255,.83)

      &:last-child
        visibility      visible

      &.login
        padding         7px 13px
        rounded         4px
        white-space     nowrap
        margin-left     21px
        font-size       14px
        font-weight     600
        border          1px solid rgba(255, 255, 255, .5)


.header-notification
  size                100% 26px
  bg                  color rgba(24, 148, 83, .9)
  bg                  image url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAT0lEQVQ4y43SOxIAIAxCQUruf+HYqBPNj6HdjgdjHLJpzCLMWYAV+2DNHtgxB3t24cQ2nJkRGjNCYyksThXZD5tERObhEJzIDhTyFRkhMi6JHdO5oh57CwAAAABJRU5ErkJggg==')
  bg                  repeat repeat
  bg                  scroll no-scroll
  vendor              transition, top .077s ease-in
  left                0
  top                 29px
  z-index             0
  color               white
  letter-spacing      .05em
  text-align          center
  line-height         26px
  font-size           12px
  borderBox()
  abs()
  &.in
    top               55px
  &.warn
    bg                color rgba(187, 159, 9, .9)
  &.err
    bg                color rgba(238, 100, 98, .9)
  &.fx
    vendor            animation, progress 60s linear infinite
  strong
    font-weight       600
  .cancel
    right             10px
    top               3px
    abs()
  a
    border-bottom     1px solid white
    color             white
    noTextDeco()
  .custom-link-view
    display           inline-block
    size              16px 16px
    vertical-align    top
    border-bottom     none
    margin            5px 0 0 5px
    span.close.icon
      display         block
      r-sprite        app '16-close-white'


#koding-logo
  size              57px 55px
  bg                color, logoBg
  z-index           11
  top               0
  left              0
  abs()

  &.staging
    bg              color #ff9200 // old koding orange

  &.sandbox
    bg              color #0099cc

  &.vagrant
    bg              color purple

  &.custom
    bg              color transparent
    bg              position, center center
    bg              repeat, no-repeat
    cite
      hidden()

  cite
    r-sprite        app 'nav-logo'
    margin          0 0 0 1px
    display         block


#kdmaincontainer.logout-tv
  vendor                  animation, logoutTv .5s 1 forwards ease
  abs                     0px 0 0 0px
  size                    100vw, 100vh

  &~.turn-off-line
    top                   50%
    left                  0
    size                  100%, 2px
    background            #fff
    opacity               0
    z-index               1000
    vendor                animation, logoutTvLine .3s .35s 1 forwards ease
    abs()
    &:after
      content             ""
      display             block
      margin              -3px auto 0
      size                50%, 6px
      background          #fff
      rounded             100%
      box-shadow          0 0 20px 10px rgba(255,255,255,.6)
  &~.turn-off-dot
    top                   50%
    left                  50%
    bg                    color, #fff
    rounded               20px
    size                  10px, 10px
    margin-top            -5px
    vendor                transform, scaleX(0) scaleY(0)
    shadow                0 0 8px #fff
    vendor                animation, logoutTvDot .3s .6s 1 forwards ease
    z-index               1000
    abs()

#kdmaincontainer.scale
    vendor            animation, shrink 1s ease-out
    vendor            animation-iteration-count, 1
    vendor            transform-style, preserve-3d
    vendor            transform, scale(0)


#kdmaincontainer > .pointer
  abs()
  bottom                380px
  left                  500px
  top                   auto
  display               block
  z-index               99999
  size                  20px, 20px
  border                3px solid white
  opacity               1
  bg                    color, #ff9200
  gradient              #FFAB23, #F27500
  vendor                transition, left 2s ease-in-out\,\
                                    top 2s ease-in-out\,\
                                    opacity .4s
  border-radius         50%
  shadow                0px 1px 3px 0px rgba(0,0,0,.2)
  &.clickPulse
    vendor              animation, clickAnimate 1s forwards ease-in-out
  &.out
    opacity             0

.kdnotification
  a
    color               inherit

@-webkit-keyframes clickAnimate
  0%
    -webkit-transform   scale(1)
    shadow              0 0 0 0 rgba(255,146,0,0)
  15%
    -webkit-transform   scale(0.6)
  25%
    -webkit-transform   scale(1)
  50%
    shadow              0 0 0 10px rgba(255,146,0,.8)
  100%
    shadow              0 0 0 25px rgba(255,146,0,0)

@-moz-keyframes clickAnimate
  0%
    -moz-transform      scale(1)
    shadow              0 0 0 0 rgba(255,146,0,0)
  15%
    -moz-transform      scale(0.6)
  25%
    -moz-transform      scale(1)
  50%
    shadow              0 0 0 10px rgba(255,146,0,.8)
  100%
    shadow              0 0 0 25px rgba(255,146,0,0)

// Intro animation for 'Show me how!' button

.cta_button
  vendor                animation, bounceIn .6s ease-in-out

@-webkit-keyframes bounceIn
  0%
    -webkit-transform   scale(0)
    opacity             0
  50%
    -webkit-transform   scale(1.1)
    opacity             1
  75%
    -webkit-transform   scale(0.9)
  100%
    -webkit-transform   scale(1)

@-moz-keyframes bounceIn
  0%
    -moz-transform      scale(0)
    opacity             0
  50%
    -moz-transform      scale(1.1)
    opacity             1
  75%
    -moz-transform      scale(0.9)
  100%
    -moz-transform      scale(1)


.nominate-modal

  z-index                       10001
  background                    white
  border-radius                 7px
  text-align                    center
  box-shadow                    0 0 20px

  a
    text-decoration             none

  .logo

    background                  url("../images/icon_rocket.png") no-repeat
    height                      160px
    top                         -20px
    left                        130px
    width                       160px
    abs()

  .header

    height                      100px
    background                  #504E4B
    border-top-right-radius     5px
    border-top-left-radius      5px
    margin-bottom               40px

  p

    padding                     20px 70px 10px 70px
    font-size                   15px

  div.button

    background                  #2E7FA1
    text-shadow                 none
    color                       white
    font-size                   20px
    padding                     10px
    width                       210px
    margin                      20px auto
    border-radius               4px
    cursor                      pointer

div.nominateicon
  width                         45px
  height                        55px
  background                    url("../images/icon_medal.png") no-repeat
  background-position           12px 0px
  background-color              #2B3335
  border-radius                 3px
  cursor                        pointer
  right                         285px
  z-index                       1
  top                           0
  abs()

.kdmodal.redeem-modal

  .formline
    overflow              visible
    padding               15px 0 0
    .input-wrapper
      overflow            visible
      margin-right        8px
      fr()
    label
      margin              0


.kdmodal.ws-settings

  background              #fafafa !important
  border-color            #fafafa !important

  .kdmodal-content
    overflow              visible
    margin                5px 16px !important

  .kdmodal-title
    hidden()

  .close-icon
    hidden()

  .modal-arrow
    left                  -21px !important
    border-right-color    #fafafa !important
    vendor                filter, drop-shadow(-5px 1px 4px rgba(0,0,0,0.35))

    &:before
      border-right-color  #fafafa !important

  &.activity-modal
    .kdmodal-inner
      margin              0
      padding             0
      overflow-y          auto

  .guides
    .input-wrapper
      margin-bottom       0
      width               100%
      .kdview
        font-size         14px
        padding           0 0 9px 2px

  a
    text-decoration       underline
    color                 #909090

  label.kdlabel

    font-size             12px
    line-height           20px
    margin                0
    font-weight           500
    padding-left          3px
    color                 #a3a3a3

  .kdbutton.solid
    font-weight           600
    &.red
      background          #d73c3c
    &.reinit
      background          #F69D03

  .button-container

    text-align            center

    button
      margin              10px 10px 10px 5px !important
      width               124px

  .delete-files

    label
      float           left
      margin-left     37px
      margin-bottom   7px

    .kdinput
      float           left
      margin-left     10px

  .kdtabview
    border-bottom         1px solid #e0e0e0

  .modal-arrow
    left                  -22px !important
    border-right-color    #242424 !important
    vendor                filter, drop-shadow(-5px 1px 4px rgba(0,0,0,0.35))
    &:before
      left                -5px

  .kdbutton.solid.red
    left                  50%
    width                 180px
    margin                12px 0 10px -90px
    font-weight           600
    background            #D43130

  &.activity-modal
    .kdmodal-inner
      margin              0

  &.guides
    label.kdlabel
      padding-top         0



body.account
  .input-validation
    margin-left         30px !important

  .input-validation div.wrapper
    background-color    rgba(217, 95, 95, .75)
    shadow              none
    font-size           14px
    font-weight         600
    text-align          center
    line-height         18px
    -webkit-font-smoothing antialiased

  .input-validation.placement-top:after
    border-top-color    rgba(217, 95, 95, .75)

  .kdoverlay
    background          rgba(255, 255, 255, .75)


paymentGreen       = #00b156

paymentGrayDarker   = #6f6f6f
paymentGrayDark     = #a7a7a7
paymentGraySoftDark = #d5d5d5
paymentGray         = #e5e5e5
paymentGrayLight    = #e8e8e8
paymentGrayLighter  = #f8f8f8

.payment-modal

  .paypal-form .formline.button-field
    margin-top          0 !important
    height              50px !important

  &.has-problem .kdmodal-title .title
    color               #D95F5F !important
  &.has-problem .success-msg
    text-align          left !important

  &.kdmodal .kdmodal-content
    margin              -10px 0 0 !important

  .kdmodal-inner
    margin              36px 41px !important

    h3
      text-align        center
      margin-bottom     10px
      color             #6f6f6f

    .kdmodal-title
      text-align        center

      span.title
        font-weight     600
        color           paymentGreen
        line-height     34px
        margin          0 0 6px

    .summary
      line-height       24px
      border-radius     3px
      padding           0 10px
      margin-bottom     25px
      text-align        center
      font-size         18px

      .plan-name
        color           paymentGrayDarker
        display         inline
        padding-right   10px

      .plan-price
        color           paymentGrayDarker
        display         inline

        &:before
          content       '$'

    .payment-method-entry-form
      background        paymentGrayLighter
      border            1px solid paymentGray
      padding           0 31px 31px 17px
      rounded           4px

      .kdlabel
        display         block
        float           none
        margin-top      19px
        margin-bottom   3px
        font-size       14px
        color           paymentGrayDarker
        opacity         .99

      .kdinput
        background      #fff
        rounded         3px
        border          1px solid paymentGray
        margin          0
        height          36px
        transition      border-color .3s linear

        &.text
          font-size     14px

        &.validation-error
          border-color  #D95F5F !important

      .input-wrapper
        margin          0

      &.american-express .input-wrapper:after
        r-sprite      'pricing', 'american-express'

      &.visa .input-wrapper:after
        r-sprite      'pricing', 'visa'

      &.mastercard .input-wrapper:after
        r-sprite      'pricing', 'mastercard'

      &.discover .input-wrapper:after
        r-sprite      'pricing', 'discover'

      .formline
        margin-left     13px
        fl()

        &.cardnumber
          width         292px

          .input-wrapper:after
            content     ''
            display     block
            right       8px
            top         51px
            width       36px
            height      22px
            z-index     1
            pointer-events none
            abs()

        &.cardcvc
        &.cardmonth
        &.cardyear
          width         64px

        &.cardmonth input
          text-align    center

        &.cardyear input
          text-align    center

        &.cardname
          width         215px

    .existing-cc-msg
    .success-msg
      color             paymentGrayDarker
      font-size         16px
      line-height       24px
      text-align        center
      padding           40px
      border-radius     4px
      background        paymentGrayLighter
      border            1px solid paymentGray

      a
        color           #01B05A

    .downgrade-error-msg
      color             paymentGrayDarker
      font-size         16px
      line-height       24px
      text-align        left

      .description
        margin-top      20px

        strong
          font-weight   600

        a
          color         #00b156!important

    .submit-btn
      width             100% !important
      height            50px !important
      background-color  paymentGreen !important
      margin            20px 0 0 !important
      color             #fff
      font-size         14px
      font-weight       300
      border-radius     4px

      &[disabled=disabled]
        opacity         .5

      &:focus
        box-shadow      none !important

      &:hover
        bg              color, lighten(paymentGreen, 4%) !important

      span.button-title
        font-size       inherit
        font-weight     inherit
        color           inherit

      cite.total-price
        font-size       16px
        font-weight     400
        margin-left     5px

        &:before
          content       '$'
          display       inline-block

        span
          font-size     12px
          opacity       .99

    .divider
      font-size             12px
      margin                18px auto
      color                 #a8a8a8
      width                 80%
      overflow              hidden
      text-align            center
      line-height           20px

      &:before, &:after
        content             ''
        vertical-align      top
        display             inline-block
        width               50%
        height              10px
        border-bottom       1px solid #e8e8e8
        margin              0 2% 0 -55%

      &:after
        margin              0 -55% 0 2%

    .submit-btn.paypal
      bg              color, paymentGrayLighter !important
      border          1px solid paymentGraySoftDark
      margin-top      0 !important

      &:focus
        span.button-title
          color       paymentGrayDarker

      &:hover
        bg            color, #fafafa !important

        span.button-title
          color         paymentGrayDarker

      span.button-title
        color           paymentGrayDarker

      figure
        display       inline-block
        r-sprite      'pricing', 'paypal'
        vertical-align middle
        margin-left    10px

    .year-price-msg
      display           block
      font-size         14px
      color             paymentGrayDarker
      line-height       19px
      width             60%
      padding           10px 30px
      border            1px solid #E5E5E5
      bg                color, #fffde9
      margin            20px auto 0px
      opacity           .99
      text-align        center

      b
        font-weight     600


    .security-note
      font-size         12px
      color             paymentGrayDark
      text-align        center
      line-height       17px
      margin-top        20px
      opacity           .99

      span
        display         block
        font-size       12px
        color           paymentGrayDarker
        line-height     19px
        margin          0 0 4px
        opacity         .99

        &:before
          content         ''
          display         inline-block
          r-sprite        'pricing', 'lock'
          position        absolute
          margin          2px 0 0 -20px

  &.downgrade-with-deletion-modal

    .description
      color                #6f6f6f
      margin-bottom        15px

      strong
        font-weight        600

    .kdmodal-inner

      .warning-btn
         background-color  #d75b5b!important

    .loader-label
      font-size            18px
      text-align           center
      color                #6f6f6f
      margin-top           45px
      margin-bottom        15px

    .kdloader
      text-align           center
      margin-bottom        35px

.kdmodal.help-support-modal

  bg                      color, #FCFCFC

  .kdmodal-inner
    margin                10px
    bg                    color, #FCFCFC

    a
      color               #0DA84C
      font-weight         700
      line-height         27px

    .kdmodal-title
      text-align          center

      span.title
        font-size         17px !important
        font-weight       bold
        color             #0DA84C
        padding-top       28px
        padding-bottom    11px

      span.subtitle
        color             #222
        margin-top        -5px


    .kdmodal-content
      font-size           14px !important;
      padding             16px 10px 0 !important;


  .kdscrollview.kdtabview
    float                 right
    width                 46%
    padding-left          18px
    border-left           1px solid #EEE

    label.kdlabel
      width               100%
      float               none !important
      font-weight         bold
      color               #666
      margin-top          0
      margin-bottom       4px

    textarea
      min-height          85px

    .input-wrapper
      margin-bottom       12px

    input.kdinput.text,
    textarea.kdinput.text
      font-size           12px
      border-radius       4px
      background          white
      font-weight         500
      width               274px

    .kdtabpaneview.main
      padding-left        2px

    .button-field
      height              40px !important

      button.kdbutton
        top               -13px
        right             13px
        width             68px
        height            33px
        background        #04A84C
        abs()

        span.button-title
          line-height     36px

  .container
    float                 left
    width                 45%
    padding               0 10px 10px 20px

    .topics-header
      color               #666
      font-weight         bold

    .koding-university
      line-height         27px
      margin-top          5px

  .onboarding-text
    bottom                20px
    abs()
    left                  28px
    width                 275px
    -webkit-border-radius 3px
    -moz-border-radius    3px
    border-radius         3px
    border                1px solid #0da84c
    height                65px
    box-sizing            border-box
    padding               8px 10px
    text-align            left
    font-size             12px

    a
      cursor              pointer
      text-decoration     underline
      line-height         18px

.kdmodal.welcome-modal
  overflow                hidden
  rounded                 3px

  .kdmodal-inner
    margin                0

  .kdmodal-content
    margin                0 !important
    max-height            100% !important

  .decoration-image
    size                  258px, 519px
    background            url('/a/images/welcome-decoration.jpg') no-repeat center center #45a66c
    fl()

  .content
    size                  508px, 519px
    padding               38px
    borderBox()
    fl()

    h1
      font-size           24px
      line-height         1em
      color               #27ae60
      font-weight         600
      border              none
      padding             0
      margin              0 0 4px
      height              auto

      span
        padding           0
        margin            0

    h2
      font-size           18px
      line-height         1em
      color               #848484
      font-weight         200
      border              none
      padding             0
      margin              0 0 26px
      height              auto

      span
        padding           0
        margin            0

    p
      display             block
      margin              0
      padding             35px 0 65px
      border-top          1px dashed #cccccc
      font-size           14px
      color               #4b4b4b
      line-height         27px

      span
        font-size         12px
        color             red

    .welcome-btn
      display             block
      size                100%, 55px
      margin-top          -1px
      border              1px solid #dcdcdc
      line-height         55px
      padding-left        25px
      font-size           14px
      color               #525252
      font-weight         400
      noTextDeco()
      borderBox()

      &:first-of-type
        rounded           3px 3px 0 0

      &:last-of-type
        rounded           0 0 3px 3px

      &:hover
        color             #27ae60
        border-color      #27ae60

        & + .welcome-btn
          border-top-color transparent

      &:after
        content           ''
        display           block
        r-sprite          'app', 'welcome-btn-chevron'
        margin            21px 24px 0 0
        fr()


.kdmodal.domain-assign-modal
  b
    font-weight           bold


// machine state modal
.kdoverlay.env-modal-overlay
  bg                    color, rgba(43, 43, 43, .75)
  opacity               1
  abs()


.kdmodal.env-modal
  .kdmodal-inner
    margin                  0

  .content-container
    text-align              center

  .kdbutton
    rounded                 4px !important
    bg                      color, #4EA04C !important
    height                  40px !important
    &:focus
      vendor                box-shadow, none !important

  .footer
    bg                      color, #f3f3f3
    font-size               14px
    color                   #5E5E5E
    padding                 25px 30px
    rounded                 0 0 3px 3px


.kdmodal.compute-error-modal
  overflow                  hidden !important

  .kdtabhandle
    max-width               250px !important

  .kdmodal-content
    margin-top              -10px !important
    height                  calc(100% \- 20px) !important

  .kdmodal-inner
    height                  calc(100% \- 55px) !important

  .kdtabpaneview
    max-height              calc(100% \- 55px) !important

    .kdcustomscrollview
      styleScrollBars       rgba(0,0,0,.15)

  .error-content
    height                  100%
    vendor                  flex-direction, column
    dFlex()

    .message
      flex-shrink           0
      font-size             13px

    .content
      flex                  1 1 auto


.kdmodal.env-ide-error-modal
  left                      50% !important
  margin-left               -172px
  overflow                  scroll
<commit_msg>ComputeController: ComputeErrorModal: Fix styling issue<commit_after>@require "./app.fonts"

@css {
/*
MAIN APP stylesheet
resurrection.styl
*/
}

// When app class is added to html tag
// layout becomes 100% width and height
// so that apps can control their own
// scrollviews and add their chrome frames
html.app
  height            100%
  body
    height          100%
    overflow        hidden  // this is to avoid rubber-band/elastic scroll on macs

body
  font-family             openSansFamily
  font-weight             400
  -webkit-font-smoothing  subpixel-antialiased

  &.noscroll
    overflow        hidden

  &.logged-in
    #main-header
      nav
        hidden()

  > .invisible
    abs             -1000% 0 0 -1000%

input
textarea
button
  font-family       openSansFamily

input[type=checkbox]:checked + label:after
  border-right              3px solid #00B057 !important
  border-top                3px solid #00B057 !important

pre
  font-family               monoFamily

.kdview
  overflow                  visible

.no-anim
  noAnim()

#kdmaincontainer
  width                     auto

  #main-sidebar
    z-index                 0
    vendor                  transition, width .3s ease
    hidden()

  &.fullscreen
    width                   100%!important
    left                    0!important
    top                     0!important
    bottom                  0!important
    right                   0!important
    z-index                 10
    .application-page
      padding               0!important
    .app-settings-menu
      top                   0
      right                 0
    #main-header
      hidden()

  &.with-sidebar
    #main-panel-wrapper
      fr()
      vendor                transition, margin-left .3s ease
      margin-left           sidebarWidth + 1
      width                 calc(100% - 258px)

    #main-sidebar
      z-index               2
      visible()

      .SidebarListItem
        rel()

      .logo-wrapper
        a
          vendor            transition, width .3s ease

      > .kdcustomscrollview
        .kdscrolltrack.horizontal
          hidden()

      .count
      .SidebarListItem-unreadCount
        vendor            transition, font-size .3s ease

      .sidebar-title
      .sidebar-machine-box
        > cite, div
          vendor            transition, opacity .3s ease

      .SidebarSection-header
        vendor              transition, opacity .3s ease

    #main-header
      hidden()

    &.hover
    &.collapsed

      #main-sidebar
        border-right        2px solid #131313

        .sidebar-message-text > .profile
          abs()
          top               -2px

        .sidebar-title
          white-space       nowrap

          &:hover
            white-space     normal

        .progressbar-container
          hidden()

      #main-panel-wrapper
        width               calc(100% - 50px)
        margin-left         50px

    &.hover
      #main-sidebar
        width               sidebarWidth + 1

        .sidebar-machine-box
          .kdscrollview
            overflow        hidden

      .sidebar-close-handle
        vendor              transform, scaleX(-1)

    &.collapsed

      #main-sidebar
        .logo-wrapper
          padding           0

          a
            rel()
            r-sprite        'app', 'logo-full'
            width           18px
            vendor          transform, translateY(-50%)
            top             50%
            left            17px

        .sidebar-close-handle
          display           none !important

        .SidebarSection-header
        .sidebar-title
          opacity           0

        .sidebar-machine-box
          width             20px

          .kdscrollview
            overflow        hidden

          a.vm
            width           13px
            padding-right   0

            div
            span
              hidden()

          .listview-wrapper
          > cite, div
            opacity         0

        .kdlistitemview-sidebar-item
          .sidebar-message-text
            text-indent     9999px

          .ttag em
            opacity         0

        .count
        .SidebarListItem-unreadCount
          right             13px
          top               -2px
          size              8px 8px
          rounded(50%)
          font-size         0
          padding           0
          border            1px solid #393233

        .SidebarListItem-unreadCount
          right             -1px
          top               1px
          min-width         auto

        .account-area
          width             50px

          .profile
          .notifications .icon
            hidden()

          .notifications .count
            top             8px
            left            31px

          .acc-dropdown-icon
            opacity         0

#main-panel-wrapper
  min-height                100%
  z-index                   1
  bg                        color, white
  vendor                    transition, box-shadow .177s ease

#main-header
  margin                    0
  size                      100%,55px
  z-index                   1000
  overflow                  visible
  max-width                 1290px
  shadow                    none
  padding                   0 45px
  abs                       48px 0 0 50%
  vendor                    transform, translateX(-50%)
  z-index                   15
  borderBox()


  .inner-container
    bg                  color, transparent

  .logotype
    font-size               24px
    color                   #444
    font-weight             700
    line-height             16px
    color                   #fff
    -webkit-font-smoothing  antialiased
    noTextDeco()
    visible()
    fl()

  #koding-logo
    margin              0 14px 0 0
    size                auto auto
    bg                  color, transparent
    position            static
    letter-spacing      .01em
    fl()

    cite
      r-sprite          app 'logo'
      margin            0
      display           block

  nav
    line-height         18px
    fr()

    a
      -webkit-font-smoothing  antialiased
      font-smoothing          antialiased

      font-size         16px
      margin-left       12px
      font-weight       500
      font-family       openSansFamily
      color             rgba(255,255,255,.83)
      padding-bottom    1px
      noTextDeco()

      &.active
        font-weight     600
        border-bottom   1px solid rgba(255,255,255,.83)

      &:last-child
        visibility      visible

      &.login
        padding         7px 13px
        rounded         4px
        white-space     nowrap
        margin-left     21px
        font-size       14px
        font-weight     600
        border          1px solid rgba(255, 255, 255, .5)


.header-notification
  size                100% 26px
  bg                  color rgba(24, 148, 83, .9)
  bg                  image url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA<KEY>')
  bg                  repeat repeat
  bg                  scroll no-scroll
  vendor              transition, top .077s ease-in
  left                0
  top                 29px
  z-index             0
  color               white
  letter-spacing      .05em
  text-align          center
  line-height         26px
  font-size           12px
  borderBox()
  abs()
  &.in
    top               55px
  &.warn
    bg                color rgba(187, 159, 9, .9)
  &.err
    bg                color rgba(238, 100, 98, .9)
  &.fx
    vendor            animation, progress 60s linear infinite
  strong
    font-weight       600
  .cancel
    right             10px
    top               3px
    abs()
  a
    border-bottom     1px solid white
    color             white
    noTextDeco()
  .custom-link-view
    display           inline-block
    size              16px 16px
    vertical-align    top
    border-bottom     none
    margin            5px 0 0 5px
    span.close.icon
      display         block
      r-sprite        app '16-close-white'


#koding-logo
  size              57px 55px
  bg                color, logoBg
  z-index           11
  top               0
  left              0
  abs()

  &.staging
    bg              color #ff9200 // old koding orange

  &.sandbox
    bg              color #0099cc

  &.vagrant
    bg              color purple

  &.custom
    bg              color transparent
    bg              position, center center
    bg              repeat, no-repeat
    cite
      hidden()

  cite
    r-sprite        app 'nav-logo'
    margin          0 0 0 1px
    display         block


#kdmaincontainer.logout-tv
  vendor                  animation, logoutTv .5s 1 forwards ease
  abs                     0px 0 0 0px
  size                    100vw, 100vh

  &~.turn-off-line
    top                   50%
    left                  0
    size                  100%, 2px
    background            #fff
    opacity               0
    z-index               1000
    vendor                animation, logoutTvLine .3s .35s 1 forwards ease
    abs()
    &:after
      content             ""
      display             block
      margin              -3px auto 0
      size                50%, 6px
      background          #fff
      rounded             100%
      box-shadow          0 0 20px 10px rgba(255,255,255,.6)
  &~.turn-off-dot
    top                   50%
    left                  50%
    bg                    color, #fff
    rounded               20px
    size                  10px, 10px
    margin-top            -5px
    vendor                transform, scaleX(0) scaleY(0)
    shadow                0 0 8px #fff
    vendor                animation, logoutTvDot .3s .6s 1 forwards ease
    z-index               1000
    abs()

#kdmaincontainer.scale
    vendor            animation, shrink 1s ease-out
    vendor            animation-iteration-count, 1
    vendor            transform-style, preserve-3d
    vendor            transform, scale(0)


#kdmaincontainer > .pointer
  abs()
  bottom                380px
  left                  500px
  top                   auto
  display               block
  z-index               99999
  size                  20px, 20px
  border                3px solid white
  opacity               1
  bg                    color, #ff9200
  gradient              #FFAB23, #F27500
  vendor                transition, left 2s ease-in-out\,\
                                    top 2s ease-in-out\,\
                                    opacity .4s
  border-radius         50%
  shadow                0px 1px 3px 0px rgba(0,0,0,.2)
  &.clickPulse
    vendor              animation, clickAnimate 1s forwards ease-in-out
  &.out
    opacity             0

.kdnotification
  a
    color               inherit

@-webkit-keyframes clickAnimate
  0%
    -webkit-transform   scale(1)
    shadow              0 0 0 0 rgba(255,146,0,0)
  15%
    -webkit-transform   scale(0.6)
  25%
    -webkit-transform   scale(1)
  50%
    shadow              0 0 0 10px rgba(255,146,0,.8)
  100%
    shadow              0 0 0 25px rgba(255,146,0,0)

@-moz-keyframes clickAnimate
  0%
    -moz-transform      scale(1)
    shadow              0 0 0 0 rgba(255,146,0,0)
  15%
    -moz-transform      scale(0.6)
  25%
    -moz-transform      scale(1)
  50%
    shadow              0 0 0 10px rgba(255,146,0,.8)
  100%
    shadow              0 0 0 25px rgba(255,146,0,0)

// Intro animation for 'Show me how!' button

.cta_button
  vendor                animation, bounceIn .6s ease-in-out

@-webkit-keyframes bounceIn
  0%
    -webkit-transform   scale(0)
    opacity             0
  50%
    -webkit-transform   scale(1.1)
    opacity             1
  75%
    -webkit-transform   scale(0.9)
  100%
    -webkit-transform   scale(1)

@-moz-keyframes bounceIn
  0%
    -moz-transform      scale(0)
    opacity             0
  50%
    -moz-transform      scale(1.1)
    opacity             1
  75%
    -moz-transform      scale(0.9)
  100%
    -moz-transform      scale(1)


.nominate-modal

  z-index                       10001
  background                    white
  border-radius                 7px
  text-align                    center
  box-shadow                    0 0 20px

  a
    text-decoration             none

  .logo

    background                  url("../images/icon_rocket.png") no-repeat
    height                      160px
    top                         -20px
    left                        130px
    width                       160px
    abs()

  .header

    height                      100px
    background                  #504E4B
    border-top-right-radius     5px
    border-top-left-radius      5px
    margin-bottom               40px

  p

    padding                     20px 70px 10px 70px
    font-size                   15px

  div.button

    background                  #2E7FA1
    text-shadow                 none
    color                       white
    font-size                   20px
    padding                     10px
    width                       210px
    margin                      20px auto
    border-radius               4px
    cursor                      pointer

div.nominateicon
  width                         45px
  height                        55px
  background                    url("../images/icon_medal.png") no-repeat
  background-position           12px 0px
  background-color              #2B3335
  border-radius                 3px
  cursor                        pointer
  right                         285px
  z-index                       1
  top                           0
  abs()

.kdmodal.redeem-modal

  .formline
    overflow              visible
    padding               15px 0 0
    .input-wrapper
      overflow            visible
      margin-right        8px
      fr()
    label
      margin              0


.kdmodal.ws-settings

  background              #fafafa !important
  border-color            #fafafa !important

  .kdmodal-content
    overflow              visible
    margin                5px 16px !important

  .kdmodal-title
    hidden()

  .close-icon
    hidden()

  .modal-arrow
    left                  -21px !important
    border-right-color    #fafafa !important
    vendor                filter, drop-shadow(-5px 1px 4px rgba(0,0,0,0.35))

    &:before
      border-right-color  #fafafa !important

  &.activity-modal
    .kdmodal-inner
      margin              0
      padding             0
      overflow-y          auto

  .guides
    .input-wrapper
      margin-bottom       0
      width               100%
      .kdview
        font-size         14px
        padding           0 0 9px 2px

  a
    text-decoration       underline
    color                 #909090

  label.kdlabel

    font-size             12px
    line-height           20px
    margin                0
    font-weight           500
    padding-left          3px
    color                 #a3a3a3

  .kdbutton.solid
    font-weight           600
    &.red
      background          #d73c3c
    &.reinit
      background          #F69D03

  .button-container

    text-align            center

    button
      margin              10px 10px 10px 5px !important
      width               124px

  .delete-files

    label
      float           left
      margin-left     37px
      margin-bottom   7px

    .kdinput
      float           left
      margin-left     10px

  .kdtabview
    border-bottom         1px solid #e0e0e0

  .modal-arrow
    left                  -22px !important
    border-right-color    #242424 !important
    vendor                filter, drop-shadow(-5px 1px 4px rgba(0,0,0,0.35))
    &:before
      left                -5px

  .kdbutton.solid.red
    left                  50%
    width                 180px
    margin                12px 0 10px -90px
    font-weight           600
    background            #D43130

  &.activity-modal
    .kdmodal-inner
      margin              0

  &.guides
    label.kdlabel
      padding-top         0



body.account
  .input-validation
    margin-left         30px !important

  .input-validation div.wrapper
    background-color    rgba(217, 95, 95, .75)
    shadow              none
    font-size           14px
    font-weight         600
    text-align          center
    line-height         18px
    -webkit-font-smoothing antialiased

  .input-validation.placement-top:after
    border-top-color    rgba(217, 95, 95, .75)

  .kdoverlay
    background          rgba(255, 255, 255, .75)


paymentGreen       = #00b156

paymentGrayDarker   = #6f6f6f
paymentGrayDark     = #a7a7a7
paymentGraySoftDark = #d5d5d5
paymentGray         = #e5e5e5
paymentGrayLight    = #e8e8e8
paymentGrayLighter  = #f8f8f8

.payment-modal

  .paypal-form .formline.button-field
    margin-top          0 !important
    height              50px !important

  &.has-problem .kdmodal-title .title
    color               #D95F5F !important
  &.has-problem .success-msg
    text-align          left !important

  &.kdmodal .kdmodal-content
    margin              -10px 0 0 !important

  .kdmodal-inner
    margin              36px 41px !important

    h3
      text-align        center
      margin-bottom     10px
      color             #6f6f6f

    .kdmodal-title
      text-align        center

      span.title
        font-weight     600
        color           paymentGreen
        line-height     34px
        margin          0 0 6px

    .summary
      line-height       24px
      border-radius     3px
      padding           0 10px
      margin-bottom     25px
      text-align        center
      font-size         18px

      .plan-name
        color           paymentGrayDarker
        display         inline
        padding-right   10px

      .plan-price
        color           paymentGrayDarker
        display         inline

        &:before
          content       '$'

    .payment-method-entry-form
      background        paymentGrayLighter
      border            1px solid paymentGray
      padding           0 31px 31px 17px
      rounded           4px

      .kdlabel
        display         block
        float           none
        margin-top      19px
        margin-bottom   3px
        font-size       14px
        color           paymentGrayDarker
        opacity         .99

      .kdinput
        background      #fff
        rounded         3px
        border          1px solid paymentGray
        margin          0
        height          36px
        transition      border-color .3s linear

        &.text
          font-size     14px

        &.validation-error
          border-color  #D95F5F !important

      .input-wrapper
        margin          0

      &.american-express .input-wrapper:after
        r-sprite      'pricing', 'american-express'

      &.visa .input-wrapper:after
        r-sprite      'pricing', 'visa'

      &.mastercard .input-wrapper:after
        r-sprite      'pricing', 'mastercard'

      &.discover .input-wrapper:after
        r-sprite      'pricing', 'discover'

      .formline
        margin-left     13px
        fl()

        &.cardnumber
          width         292px

          .input-wrapper:after
            content     ''
            display     block
            right       8px
            top         51px
            width       36px
            height      22px
            z-index     1
            pointer-events none
            abs()

        &.cardcvc
        &.cardmonth
        &.cardyear
          width         64px

        &.cardmonth input
          text-align    center

        &.cardyear input
          text-align    center

        &.cardname
          width         215px

    .existing-cc-msg
    .success-msg
      color             paymentGrayDarker
      font-size         16px
      line-height       24px
      text-align        center
      padding           40px
      border-radius     4px
      background        paymentGrayLighter
      border            1px solid paymentGray

      a
        color           #01B05A

    .downgrade-error-msg
      color             paymentGrayDarker
      font-size         16px
      line-height       24px
      text-align        left

      .description
        margin-top      20px

        strong
          font-weight   600

        a
          color         #00b156!important

    .submit-btn
      width             100% !important
      height            50px !important
      background-color  paymentGreen !important
      margin            20px 0 0 !important
      color             #fff
      font-size         14px
      font-weight       300
      border-radius     4px

      &[disabled=disabled]
        opacity         .5

      &:focus
        box-shadow      none !important

      &:hover
        bg              color, lighten(paymentGreen, 4%) !important

      span.button-title
        font-size       inherit
        font-weight     inherit
        color           inherit

      cite.total-price
        font-size       16px
        font-weight     400
        margin-left     5px

        &:before
          content       '$'
          display       inline-block

        span
          font-size     12px
          opacity       .99

    .divider
      font-size             12px
      margin                18px auto
      color                 #a8a8a8
      width                 80%
      overflow              hidden
      text-align            center
      line-height           20px

      &:before, &:after
        content             ''
        vertical-align      top
        display             inline-block
        width               50%
        height              10px
        border-bottom       1px solid #e8e8e8
        margin              0 2% 0 -55%

      &:after
        margin              0 -55% 0 2%

    .submit-btn.paypal
      bg              color, paymentGrayLighter !important
      border          1px solid paymentGraySoftDark
      margin-top      0 !important

      &:focus
        span.button-title
          color       paymentGrayDarker

      &:hover
        bg            color, #fafafa !important

        span.button-title
          color         paymentGrayDarker

      span.button-title
        color           paymentGrayDarker

      figure
        display       inline-block
        r-sprite      'pricing', 'paypal'
        vertical-align middle
        margin-left    10px

    .year-price-msg
      display           block
      font-size         14px
      color             paymentGrayDarker
      line-height       19px
      width             60%
      padding           10px 30px
      border            1px solid #E5E5E5
      bg                color, #fffde9
      margin            20px auto 0px
      opacity           .99
      text-align        center

      b
        font-weight     600


    .security-note
      font-size         12px
      color             paymentGrayDark
      text-align        center
      line-height       17px
      margin-top        20px
      opacity           .99

      span
        display         block
        font-size       12px
        color           paymentGrayDarker
        line-height     19px
        margin          0 0 4px
        opacity         .99

        &:before
          content         ''
          display         inline-block
          r-sprite        'pricing', 'lock'
          position        absolute
          margin          2px 0 0 -20px

  &.downgrade-with-deletion-modal

    .description
      color                #6f6f6f
      margin-bottom        15px

      strong
        font-weight        600

    .kdmodal-inner

      .warning-btn
         background-color  #d75b5b!important

    .loader-label
      font-size            18px
      text-align           center
      color                #6f6f6f
      margin-top           45px
      margin-bottom        15px

    .kdloader
      text-align           center
      margin-bottom        35px

.kdmodal.help-support-modal

  bg                      color, #FCFCFC

  .kdmodal-inner
    margin                10px
    bg                    color, #FCFCFC

    a
      color               #0DA84C
      font-weight         700
      line-height         27px

    .kdmodal-title
      text-align          center

      span.title
        font-size         17px !important
        font-weight       bold
        color             #0DA84C
        padding-top       28px
        padding-bottom    11px

      span.subtitle
        color             #222
        margin-top        -5px


    .kdmodal-content
      font-size           14px !important;
      padding             16px 10px 0 !important;


  .kdscrollview.kdtabview
    float                 right
    width                 46%
    padding-left          18px
    border-left           1px solid #EEE

    label.kdlabel
      width               100%
      float               none !important
      font-weight         bold
      color               #666
      margin-top          0
      margin-bottom       4px

    textarea
      min-height          85px

    .input-wrapper
      margin-bottom       12px

    input.kdinput.text,
    textarea.kdinput.text
      font-size           12px
      border-radius       4px
      background          white
      font-weight         500
      width               274px

    .kdtabpaneview.main
      padding-left        2px

    .button-field
      height              40px !important

      button.kdbutton
        top               -13px
        right             13px
        width             68px
        height            33px
        background        #04A84C
        abs()

        span.button-title
          line-height     36px

  .container
    float                 left
    width                 45%
    padding               0 10px 10px 20px

    .topics-header
      color               #666
      font-weight         bold

    .koding-university
      line-height         27px
      margin-top          5px

  .onboarding-text
    bottom                20px
    abs()
    left                  28px
    width                 275px
    -webkit-border-radius 3px
    -moz-border-radius    3px
    border-radius         3px
    border                1px solid #0da84c
    height                65px
    box-sizing            border-box
    padding               8px 10px
    text-align            left
    font-size             12px

    a
      cursor              pointer
      text-decoration     underline
      line-height         18px

.kdmodal.welcome-modal
  overflow                hidden
  rounded                 3px

  .kdmodal-inner
    margin                0

  .kdmodal-content
    margin                0 !important
    max-height            100% !important

  .decoration-image
    size                  258px, 519px
    background            url('/a/images/welcome-decoration.jpg') no-repeat center center #45a66c
    fl()

  .content
    size                  508px, 519px
    padding               38px
    borderBox()
    fl()

    h1
      font-size           24px
      line-height         1em
      color               #27ae60
      font-weight         600
      border              none
      padding             0
      margin              0 0 4px
      height              auto

      span
        padding           0
        margin            0

    h2
      font-size           18px
      line-height         1em
      color               #848484
      font-weight         200
      border              none
      padding             0
      margin              0 0 26px
      height              auto

      span
        padding           0
        margin            0

    p
      display             block
      margin              0
      padding             35px 0 65px
      border-top          1px dashed #cccccc
      font-size           14px
      color               #4b4b4b
      line-height         27px

      span
        font-size         12px
        color             red

    .welcome-btn
      display             block
      size                100%, 55px
      margin-top          -1px
      border              1px solid #dcdcdc
      line-height         55px
      padding-left        25px
      font-size           14px
      color               #525252
      font-weight         400
      noTextDeco()
      borderBox()

      &:first-of-type
        rounded           3px 3px 0 0

      &:last-of-type
        rounded           0 0 3px 3px

      &:hover
        color             #27ae60
        border-color      #27ae60

        & + .welcome-btn
          border-top-color transparent

      &:after
        content           ''
        display           block
        r-sprite          'app', 'welcome-btn-chevron'
        margin            21px 24px 0 0
        fr()


.kdmodal.domain-assign-modal
  b
    font-weight           bold


// machine state modal
.kdoverlay.env-modal-overlay
  bg                    color, rgba(43, 43, 43, .75)
  opacity               1
  abs()


.kdmodal.env-modal
  .kdmodal-inner
    margin                  0

  .content-container
    text-align              center

  .kdbutton
    rounded                 4px !important
    bg                      color, #4EA04C !important
    height                  40px !important
    &:focus
      vendor                box-shadow, none !important

  .footer
    bg                      color, #f3f3f3
    font-size               14px
    color                   #5E5E5E
    padding                 25px 30px
    rounded                 0 0 3px 3px


.kdmodal.compute-error-modal
  overflow                  hidden !important

  .kdtabhandle
    max-width               250px !important

  .kdmodal-content
    margin-top              -10px !important
    height                  calc(100% \- 20px) !important

  .kdmodal-inner
    height                  calc(100% \- 55px) !important

  .kdcustomscrollview
    styleScrollBars         rgba(0,0,0,.15)

  .error-content
    height                  100%
    vendor                  flex-direction, column
    dFlex()

    .message
      flex-shrink           0
      font-size             13px

    .content
      flex                  1 1 auto


.kdmodal.env-ide-error-modal
  left                      50% !important
  margin-left               -172px
  overflow                  scroll

{'fraction_non_alphanumeric': 0.05297969768090729, 'fraction_numerical': 0.04524938863267081, 'mean_word_length': 0.9434786769162068, 'pattern_counts': {'":': 0, '<': 4, '<?xml version=': 0, '>': 16, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4538072', 'n_tokens_mistral': 18425, 'n_tokens_neox': 15963, 'n_words': 4247}