<commit_before>@import "./kdfn"
@import "./client/stylus/appfn"

@css {
/*
Environments stylesheet
app.environments.styl
*/
}

.vm-details-modal
  width                200px

  .item
    margin-bottom      5px

  .title
    font-weight        bold

  .value
    float              right

.environment-content
  .domains-no-record
    text-align         center
    padding            20px
    display            block
    font-size          18px
    color              #aaa
    text-shadow        0 1px 0 #fff
  .formline
    border              none
  .formline.suggestionbox
    padding-top         0
  .formline.domainname
    padding-left        25px
    input.text
      max-width         400px
      padding           2px 10px
      line-height       32px
      height            36px
      font-size         14px

      &.domain
        padding-right   117px
        margin-right    0

    .kdselectbox.domains
      position          absolute
      top               6px
      right             -4px

    > .input-wrapper
      width             400px
      height            36px
      margin-right      0
      rel()

      > *
        margin-right    10px

  h1.kdheaderview
    z-index               2

  h4.kdheaderview
    display               inline-block
    font-size             16px
    line-height           28px
    height                28px
    clear                 both

  p.success
    padding               20px
    line-height           22px
    bg                    color, #E3EEDA
    color                 #59824D
    rounded               4px
    max-width             400px
    margin-top            10px
    border                1px solid rgba(89, 130, 77, 0.18)
    fl()

    b
      font-size           22px
      line-height         42px
      font-weight         400
      color               #444
      rounded             4px

  ul.suggestion-box
    margin-left           6px
    li
      display             inline-block
      line-height         12px
      font-size           12px
      padding             6px 10px
      margin              10px 10px 0 0
      border              0
      rounded             4px
      vertical-align      middle
      color               white
      cursor              pointer
      bg                  color, #7ab100
      &.com
        bg                color, #4F87A7
      &.biz
        bg                color, #59824D
      &.org
        bg                color, #E99647
      &.net
        bg                color, #333333

  .kd-radio-holder
    label
      vertical-align  top
      cite
        color         #ccc
        font-size     11px
    span.icon
      cursor          pointer
      vertical-align  top
      margin          5px
      size            20px, 20px
      display         inline-block
      sprite()
      bg              position, -40px -480px
    &.disabled span.icon
      bg              position, -40px -520px
    &.active span.icon
      bg              position, -40px -500px
    &.active.disabled span.icon
        bg            position, -40px -540px

  .header
    button.new-domain-button
      height           25px
      .icon
        bg              position, -120px -460px
        padding         0
        margin          -4px 0 0 -10px
      &.active
        gradient        #666, #999
        .button-title
          color         white
          text-shadow   0 1px 0 #111
        .icon
          bg            position, -60px -500px

  .action-area
    bg                  color, #bbb
    z-index             0
    vendor              transform-style, preserve-3d
    vendor              perspective, 1000px
    borderBox()
    abs()
    &.in
      height            100%
    .kdtabpaneview
      padding-bottom    64px
      borderBox()

  .kddia-scene
    left                0
    border-radius       0
    vendor              transition, left .3s ease
    bg                  color, white
    &.out
      left              500px
      border-left       1px solid #ccc
      box-shadow        0 0 10px 1px #ccc

  .record-form-view
    padding             0
    section
      padding           10px
      background        #f7f7f7
      shadow            inset 0 2px 3px -2px rgba(0,0,0,0.3)
      rel()

      .input-container
        width           22%
        float           left
        vendor          transition, width .3s ease \,\
                                    padding .3s ease \,\
                                    opacity .3s ease
        borderBox()

        &~.input-container
          padding-left  5px

        &.priority
          margin        none
          padding-left  0
          width         0
          opacity       0

        &.record-type
          width         16%
          .kdselectbox
            display     block

        &.add-record
          width         18%
          button
            display     block
            size        100%, 26px
        input
          size          100%, 26px

    &.mx-selected
      .priority
        width           13% !important
        padding-left    5px !important
        opacity         1   !important
      .host,
      .value
        width           20%
      .ttl
        width           13%


  .split-layout
    .header
      border-left       none

  .split-section-list
    li
      padding           15px
    .selected
      bg                color, rgba(0, 0, 0, .05)

    .domain-item
      cursor           pointer
      width            100%
      overflow         hidden

      .domain-detail
        color          #888
        font-size      11px
        line-height    16px

      .domain-title
        font-weight    normal
        font-size      15px
        color          #ff9600
        line-height    30px

  .kdsplitview-panel.panel-1
    border-left       1px solid #ddd

.domain-detail-tabs

  .kdtabpaneview
    height                auto
    width                 auto
    padding               10px

    .common-inner-nav
      background          #f8f8f8
      margin              0px !important
      height              100%

    &.dns-manager
      padding             0

      header
        padding           10px
        line-height       26px
        display           block
        vertical-align    middle

    &.routing
      padding             0
      span.arrow
        sprite()
        display           block
        size              30px, 25px
        margin-left       -25px
        z-index           1
        abs               null, null, null, 50%

      .no-item
        text-align        center
        color             rgba(255,255,255,.3)
        text-shadow       0 -1px rgba(0, 0, 0, .4)


      .drop-area
        size              100%, 200px
        gradient          rgba(0,0,0,.4), rgba(0,0,0,.2)
        shadow            inset 0 1px 1px rgba(0,0,0,0.2)
        span.arrow
          bg              position, -130px -28px
          top             0
          opacity         .8
        .no-item
          margin-top      15px
          color           #ccc
          text-shadow     0 -1px 0 rgba(0,0,0,0.3)

      cite.bg-text
        color           rgba(255,255,255,.6)
        text-shadow     0 -1px rgba(0, 0, 0, .2)
        font-size       32px
        line-height     40px
        height          40px
        width           100%
        z-index         0
        text-align      center
        font-style      normal
        display         block
        margin-top      -20px
        abs             50%

      header
        padding           10px
        line-height       26px
        display           block
        vertical-align    middle
        shadow            0 2px 3px -2px rgba(0,0,0,0.3)
        a
          color           linkColor1
          noTextDeco      yes

        .kdselectbox
          margin          -4px 5px 0
          span.title
            font-size     12px

      .listview-wrapper
        min-height        200px
        padding           10px
        bg                color, rgba(0, 0, 0, .1)
        borderBox()
        cite.bg-text
          color           rgba(255,255,255,.3)
          text-shadow     0 -1px rgba(0, 0, 0, .2)

  .kdtabpaneview
    p.soon
      font-size       22px
      padding-top     20%
      text-align      center
      color           #aaa

  .kdtabhandlecontainer .kdtabhandle
    &.active
      vendor          box-sizing, content-box
    &:first-child
      margin-left     10px
  .drop-area
    .kdlistitemview-domain-vm
      bg              color, rgba(81, 199, 64, 0.8)
      color           white
      text-shadow     0 -1px 0 rgba(0, 0, 0, .4)

  .kdlistitemview-domain-vm
    margin            0 5px 5px 0
    padding           5px
    display           inline-block
    kalc              width, 33.3%\-4px
    height            auto
    cursor            pointer
    color             #555
    vertical-align    top
    bg                color, rgba(248, 226, 68, 0.9)
    shadow            0 1px 1px rgba(0, 0, 0, .3)
    text-shadow       0 1px 0 rgba(255, 255, 255, .4)
    rounded           2px
    borderBox()
    // &:nth-child(3n)
    //   margin-right    0

    .vm-icon
      size           30px, 30px
      opacity        .5
      sprite()
      bg             position, -360px -390px

    .vm-name
      font-weight    normal
      word-break     break-all
      line-height    20px
      vertical-align top
      padding        5px

    .kdloader
      display         block
      margin          0 auto


  .vm-list

    .vm-item
      cursor           pointer
      height           50px
      margin           1px

      .vm-icon
        top            10px
        left           7px
        width          30px
        height         30px
        abs()

      .shared
        sprite()
        bg position,   -360px -300px

      .personal
        sprite()
        bg position,   -360px -390px

      .vm-title
        font-weight    bold
        color          #ff9600
        top            10px
        left           50px
        abs()

      .vm-domain
        font-size      10px
        color          #888
        top            26px
        left           50px
        abs()

      .vm-status
        left           35px
        top            35px
        width          5px
        height         5px
        abs()

      .vm-status
        bg             color, #B40404
      .vm-status-on
        bg             color, #04B404

      .on-off
        top            15px
        right          3px
        abs()

  .vm-details
    padding            10px

  .input-container
    width           220px
    float           left

  .fw-al-sw
    height     400px

  .fw-li-view
    padding    5px
    height     25px
    color      #fff
    border     1px solid #eee
    border            1px solid #ccc
    text-transform    uppercase
    color             #000

    .personal
      sprite()
      bg position,   -360px -390px

  .fw-al-view, .fw-rl-view
    margin-top        5px
    border            1px solid #ccc
    text-transform    uppercase
    width             60%

    .deny
      background    red
      color         #fff

    .allow
      background    green
      color         #fff


  .block-list-view
    margin-top    10px

    h3
      line-height    25px

  .fw-li-buttons
    .button-title
      text-transform    uppercase
      font-size         10px

    .kdbutton
      background    #fceabb

    .delete-button
      background    #99001D

  .rule-form-view
    margin-top    5px

  .input-wrapper
    margin-right     5px

  .rule-list-view
    padding          5px
    float            left
    width            35%

  .filter-list-view
    background       #f8f8f8
    padding          5px
    float            left
    width            50%

    .filter-form-view
      margin-bottom  10px

  .kdlistview-env-list

    h3.records-title
      font-size           13px
      color               #ff9200
      font-weight         normal
      border-bottom       1px solid #e6e6e6
      border-top          1px solid #e6e6e6
      text-shadow         0 1px 0 #fff
      background          #fafafa

    .kdlistitemview
      border-bottom       1px solid #ededed
      color               #888

    h3.records-title,
    .kdlistitemview
      width               100%
      padding             0 10px !important
      vendor              transition, background .1s linear
      borderBox()

      &:nth-child(2n)
        background        #fcfcfc
        border-bottom     1px solid #ededed

      .record-element
        float             left
        letter-spacing    normal
        padding           5px 0
        line-height       25px
        borderBox()

        .kdselectbox
          width           100%
          borderBox()

        &~.record-element
          padding-left    5px
          width           22%
          input
            size          100%, 26px

        &.record-type
          width           16%

        &.record-ttl,
        &.record-priority
          width           12%

        &.record-buttons
          width           120px
          background      #fff
          text-align      center
          top             0
          right           -120px
          padding         5px
          opacity         0
          border-left     1px dotted #ccc
          flex()
          vendor          transition, right .3s ease \,\
                                      opacity .3s ease
          abs()
          button
            display       block
            float         none
            width         100%
            size          100%, 26px

            &:nth-child(2n)
              margin-left 5px
      &:hover
        background        #f4f4f4
        .record-buttons
          opacity           1
          right             5px

    h3.records-title
      .record-element
        padding-top            10px !important
        &.record-buttons
          vendor               justify-content, center

    th, td
      vertical-align   top

    th
      background       #ff9600
      background       linear-gradient(#CC6300, #ff9600)
      border-left      1px solid rgba(0, 0, 0, 0.2)
      border-right     1px solid rgba(255, 255, 255, 0.1)
      color            #fff
      font-size        11px
      padding          9px 8px 7px 8px
      text-shadow      0 -1px 0 rgba(0, 0, 0, 0.6)

    tbody td
      border-bottom    1px solid #c6c9cc
      border-left      1px solid #e4e7eb
      border-right     1px solid rgba(255, 255, 255, 0.6)
      box-shadow       inset 0 1px 0 rgba(255, 255, 255, 0.6)
      padding          10px

    .slide-icon
      sprite()
      bg position,     -121px -559px
      display          block
      abs()

    .filter-item
      height           45px
      cursor           pointer
      text-transform   uppercase

    td.filter-name
      width            40%

    td.filter-match
      width            40%

    td.action
      width            1%

    td.actions
      width            20%

      .on-off
        display        block

      .on-off a
        padding        7px 10px 6px

    tbody td.item, tbody tr:nth-child(even) td.item
      border-left      1px solid #c6c9cc

    .allow-icon
      width          10px
      height         10px
      margin-left    10px
      sprite()
      bg position,   -25px -145px
      rel()
      top            6px
      left           -5px

    .deny-icon
      width          10px
      height         10px
      margin-left    10px
      sprite()
      bg position,   -25px -125px
      rel()
      top            6px
      left           -5px



    .filter-icon
      width          40px
      height         40px
      margin-right   10px
      sprite()
      bg position,   -780px -521px

    .filter-name
      font-weight    bold
      margin-left    10px
      margin-bottom  3px
      font-size      12px
      color          #ff9600


/*--- Add a domain -----*/

div.environments-add-domain-form

  width                 500px
  height                100%
  padding               30px
  bg                    color, #e8e8e8
  opacity               0
  vendor                transform-origin-x, 0
  vendor                transform, rotateY(90deg)
  -webkit-transition    -webkit-transform .4s ease \,\
                        opacity           .4s ease
  -moz-transition       -moz-transform    .4s ease \,\
                        opacity           .4s ease
  transition            transform         .4s ease \,\
                        opacity           .4s ease
  borderBox()

  &.opened
    opacity             1
    vendor              transform, rotateY(0)

  h4.kdheaderview
    display             block
    height              30px
    line-height         30px
    border-bottom       1px solid #d9d9d9
    shadow              0 1px 0 #f5f5f5

    span
      margin            0 11px

    button.small-gray
      margin            3px 0 0 0
      fr()

  fieldset.domain-option-group
    padding           20px 0
    padding-bottom    0

    .kd-radio-holder
      width           140px
      padding         0
      margin          0
      font-size       11px
      color           #8c8c8c
      height          32px
      line-height     32px
      rounded         3px
      background      #f7f7f7
      text-align      center
      shadow          0 1px 2px rgba(0, 0, 0, .2) \,\
                      inset 0 -3px 0 #e8e8e8
      text-shadow     0 1px 0 #fff
      border-bottom
      fl()

      &~.kd-radio-holder
        margin-left       10px

      &.disabled
        opacity           .5
        cursor            default
        *
          cursor          default

      &.active
        shadow            0 1px 2px rgba(0, 0, 0, .2) \,\
                          inset 0 -3px 0 #ffa800
        position          relative

      &.active:after
        content         ""
        display         block
        border          5px solid transparent
        border-top      7px solid #ffa800
        left            64px
        top             32px
        abs()

      input[type=radio]
        display         none

  .domain-tabs
    height              auto
    overflow            hidden

    .status-message
      top               64px
      left              64px
      opacity           0
      vendor            transition, opacity  .2s ease-in\,
                                    left     .3s ease-in
      abs()

      &.in
        left            4px
        opacity         1

    .domain-list
      left              30px
      opacity           0
      margin-top        5px
      height            100%
      vendor            transition, opacity  .3s ease-out\,
                                    left     .2s ease-out
      &.in
        left            0
        opacity         1

      .kdlistview
        padding-right   2px

    .domain-buy-items
      background        rgba(255,255,255,.6)
      border-radius     2px
      border            1px solid #ccc
      margin-top        6px
      height            36px

      h1
        font-size       14px
        padding         10px

      button
        width           42px
        right           6px
        top             6px
        abs()

      .kdselectbox
        height          22px
        right           55px
        top             6px
        abs()

  form.new-domain-form
    padding             0
    margin              0

    .formline
      padding           0
      margin            0

    label.domain-name
      display             block
      float               none
      color               #8c8c8c
      text-shadow         0 1px 0 #fff
      font-size           11px

    input.domain-input
      height              35px
      line-height         35px
      shadow              0 1px 0 #fff
      margin-top          19px
      margin-bottom       1px
      padding             0 140px 0 10px
      borderBox()

    .kdselectbox.main-domain-select
      top                25px
      right              5px
      abs()

  .formline.button-field
    bg                   color, transparent

    .kdbutton.add-domain
      fr()
      margin-top         10px
      font-size          14px
      font-weight        normal
      width              174px

  form+p.success
    border               1px solid #bbb
    shadow               inset 0 0 0 1px #fff
    padding              20px
    clear                both
    border               1px solid rgba(89, 130, 77, 0.18);
    fl()

/*--- Scene -----*/

div.environments-scene

  bg                image, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAHElEQVQYV2M8fPhwmq2t7SwGHIARlwRMfHgoAAAWpAQJz4XcBAAAAABJRU5ErkJggg==")
  background-color  white

  .internet
    width               100px
    height              500px
    background          url('../images/internet.png') no-repeat
    margin-left         10px

  .zoom-slider
    right               50px
    bottom              0
    height              2px
    abs()

    .handle
      height            10px
      top               -4px

  .zoom-controls
    size                177px, 13px
    right               24px
    bottom              15px
    abs()

    a.zoom-control
      display           block
      size              15px, 15px
      line-height       9px
      font-weight       bold
      color             #ddd
      font-size         14px
      text-align        center
      border            2px solid #ddd
      text-decoration   none
      rounded           100%
      borderBox()
      fl()

      &.zoomin
        line-height     11px
        fr()

      &:hover
        border-color    #bbb
        color           #bbb

  .reset-view
    opacity             .6
    border              none
    background          white
    left                10px
    bottom              10px
    font-size           11px
    color               #666
    z-index             6
    abs()

    &:hover
      opacity           1

    span.icon
      sprite()
      background-position -120px -580px
      size              12px, 12px
      position          relative
    span.button-title
      line-height       19px

div.environments-container

  width           240px
  height          100%
  border          1px dashed #ccc
  border-top      none
  border-bottom   none
  border-radius   0
  background      rgba(205,205,205,.07)
  noTextSelection()

  .kdheaderview
    padding       14px 0
    text-indent   14px
    border        none

    .new-item-plus
      size                20px, 20px
      margin              5px 20px 0 0
      rounded             12px
      background-color    #555
      border              1px solid #555
      cursor              pointer
      vendor              transition, width .2s ease-in
      position            relative
      overflow            hidden
      fr()

      i
        display                 block
        size                    20px, 25px
        sprite()
        background-position     -120px -440px
        left                    0px
        top                     0px
        abs()

      span
        left                    5px
        top                     0
        height                  25px
        line-height             20px
        font-size               11px
        text-align              left
        white-space             nowrap
        margin                  0
        font-weight             600
        color                   #fff
        vendor                  transition, opacity  .1s ease-in
        opacity                 0
        abs()

      &:hover
        width                 73px

        span
          opacity             1

    .new-item-loader
      abs         19px, 10px

div.environments-item

  cursor          default
  width           200px
  height          40px
  border          1px solid rgba(217, 216, 217, 1.0)
  border-left     5px solid rgba(217, 216, 217, 1.0)
  gradient        rgba(252, 253, 253, 1.0), rgba(228, 229, 230, 1.0)
  rounded         2px
  vendor          transition, opacity .3s ease
  noTextSelection()
  borderBox()

  span.chevron
    display       none
    size          14px, 14px
    bottom        2px
    right         2px
    bg            position, -182px -363px
    sprite()

  &:hover
    gradient      rgba(254, 255, 255, 1.0), rgba(222, 233, 234, 1.0)
    span.chevron
      display     block

  .status-indicator

    size          8px, 8px
    background    #ff9600
    border        1px solid #ff9600
    top           50%
    right         9px
    margin-top    -4px
    rounded       100%
    cursor        pointer
    vendor        transition, background .3s ease
    borderBox()
    abs()

  &.passivated
    opacity       0.5
    .status-indicator
      background  none

  &.highlight
    gradient      white, rgba(244, 244, 244, 1.0)
    shadow        0 0 6px rgba(125,190,241,.7)

  h3
    margin-top    -2px
    font-size     12px
    margin-bottom  2px
    width         100%
    overflow      hidden
    white-space   nowrap
    text-overflow ellipsis

  div.details
    padding       8px
    span
      font-size   10px
      color       #aaa
      margin-top  -2px
      abs()

  &.machine
    height            50px

    div.progressbar-container
      top             25px
      height          15px
      width           80px
      abs()
      span.light-label
        display       none
      span.dark-label
        margin-top    2px
      &:last-of-type
        left          94px

    .vm-toggle-menu
      width           70px
      position        relative
      left            113px
      bottom          18px
      height          10px

div.environments-joint
  size              4px, 4px
  background-color  #ccc
  border            none

  &.deleteMode
    size             14px,14px
    z-index          2
    border           1px solid white
    borderBox()
    sprite()
    bg               position,-84px -544px
    background-color rgba(169, 39, 84, 1.0)

  &.right
    right           -2px
    margin-top      -2px
    &.deleteMode
      margin-top    -7px
      right         -7px

  &.left
    left            -7px
    margin-top      -2px
    &.deleteMode
      left          -12px
      margin-top    -7px

.environments-cs-container
  width              182px
  padding-top        3px
  padding-left       7px

  .environments-cs-color
    size             17px, 17px
    float            left
    margin-left      5px
    background       #ccc
    cursor           pointer
    border           3px solid rgba(255, 255, 255, 0)
    vendor           transition, border-color .3s ease
    borderBox()
    &:hover
      border-color   rgba(255, 255, 255, .5)
    &.selected,
    &.selected:hover
      border-color   rgba(0, 0, 0, .3)

.kdmodal.environments-confirm-destroy
  .kdmodal-content
    div
      padding          20px
<commit_msg>Make domain list scrollable<commit_after>@import "./kdfn"
@import "./client/stylus/appfn"

@css {
/*
Environments stylesheet
app.environments.styl
*/
}

.vm-details-modal
  width                200px

  .item
    margin-bottom      5px

  .title
    font-weight        bold

  .value
    float              right

.environment-content
  .domains-no-record
    text-align         center
    padding            20px
    display            block
    font-size          18px
    color              #aaa
    text-shadow        0 1px 0 #fff
  .formline
    border              none
  .formline.suggestionbox
    padding-top         0
  .formline.domainname
    padding-left        25px
    input.text
      max-width         400px
      padding           2px 10px
      line-height       32px
      height            36px
      font-size         14px

      &.domain
        padding-right   117px
        margin-right    0

    .kdselectbox.domains
      position          absolute
      top               6px
      right             -4px

    > .input-wrapper
      width             400px
      height            36px
      margin-right      0
      rel()

      > *
        margin-right    10px

  h1.kdheaderview
    z-index               2

  h4.kdheaderview
    display               inline-block
    font-size             16px
    line-height           28px
    height                28px
    clear                 both

  p.success
    padding               20px
    line-height           22px
    bg                    color, #E3EEDA
    color                 #59824D
    rounded               4px
    max-width             400px
    margin-top            10px
    border                1px solid rgba(89, 130, 77, 0.18)
    fl()

    b
      font-size           22px
      line-height         42px
      font-weight         400
      color               #444
      rounded             4px

  ul.suggestion-box
    margin-left           6px
    li
      display             inline-block
      line-height         12px
      font-size           12px
      padding             6px 10px
      margin              10px 10px 0 0
      border              0
      rounded             4px
      vertical-align      middle
      color               white
      cursor              pointer
      bg                  color, #7ab100
      &.com
        bg                color, #4F87A7
      &.biz
        bg                color, #59824D
      &.org
        bg                color, #E99647
      &.net
        bg                color, #333333

  .kd-radio-holder
    label
      vertical-align  top
      cite
        color         #ccc
        font-size     11px
    span.icon
      cursor          pointer
      vertical-align  top
      margin          5px
      size            20px, 20px
      display         inline-block
      sprite()
      bg              position, -40px -480px
    &.disabled span.icon
      bg              position, -40px -520px
    &.active span.icon
      bg              position, -40px -500px
    &.active.disabled span.icon
        bg            position, -40px -540px

  .header
    button.new-domain-button
      height           25px
      .icon
        bg              position, -120px -460px
        padding         0
        margin          -4px 0 0 -10px
      &.active
        gradient        #666, #999
        .button-title
          color         white
          text-shadow   0 1px 0 #111
        .icon
          bg            position, -60px -500px

  .action-area
    bg                  color, #bbb
    z-index             0
    vendor              transform-style, preserve-3d
    vendor              perspective, 1000px
    borderBox()
    abs()
    &.in
      height            100%
    .kdtabpaneview
      padding-bottom    64px
      borderBox()

  .kddia-scene
    left                0
    border-radius       0
    vendor              transition, left .3s ease
    bg                  color, white
    &.out
      left              500px
      border-left       1px solid #ccc
      box-shadow        0 0 10px 1px #ccc

  .record-form-view
    padding             0
    section
      padding           10px
      background        #f7f7f7
      shadow            inset 0 2px 3px -2px rgba(0,0,0,0.3)
      rel()

      .input-container
        width           22%
        float           left
        vendor          transition, width .3s ease \,\
                                    padding .3s ease \,\
                                    opacity .3s ease
        borderBox()

        &~.input-container
          padding-left  5px

        &.priority
          margin        none
          padding-left  0
          width         0
          opacity       0

        &.record-type
          width         16%
          .kdselectbox
            display     block

        &.add-record
          width         18%
          button
            display     block
            size        100%, 26px
        input
          size          100%, 26px

    &.mx-selected
      .priority
        width           13% !important
        padding-left    5px !important
        opacity         1   !important
      .host,
      .value
        width           20%
      .ttl
        width           13%


  .split-layout
    .header
      border-left       none

  .split-section-list
    li
      padding           15px
    .selected
      bg                color, rgba(0, 0, 0, .05)

    .domain-item
      cursor           pointer
      width            100%
      overflow         hidden

      .domain-detail
        color          #888
        font-size      11px
        line-height    16px

      .domain-title
        font-weight    normal
        font-size      15px
        color          #ff9600
        line-height    30px

  .kdsplitview-panel.panel-1
    border-left       1px solid #ddd

.domain-detail-tabs

  .kdtabpaneview
    height                auto
    width                 auto
    padding               10px

    .common-inner-nav
      background          #f8f8f8
      margin              0px !important
      height              100%

    &.dns-manager
      padding             0

      header
        padding           10px
        line-height       26px
        display           block
        vertical-align    middle

    &.routing
      padding             0
      span.arrow
        sprite()
        display           block
        size              30px, 25px
        margin-left       -25px
        z-index           1
        abs               null, null, null, 50%

      .no-item
        text-align        center
        color             rgba(255,255,255,.3)
        text-shadow       0 -1px rgba(0, 0, 0, .4)


      .drop-area
        size              100%, 200px
        gradient          rgba(0,0,0,.4), rgba(0,0,0,.2)
        shadow            inset 0 1px 1px rgba(0,0,0,0.2)
        span.arrow
          bg              position, -130px -28px
          top             0
          opacity         .8
        .no-item
          margin-top      15px
          color           #ccc
          text-shadow     0 -1px 0 rgba(0,0,0,0.3)

      cite.bg-text
        color           rgba(255,255,255,.6)
        text-shadow     0 -1px rgba(0, 0, 0, .2)
        font-size       32px
        line-height     40px
        height          40px
        width           100%
        z-index         0
        text-align      center
        font-style      normal
        display         block
        margin-top      -20px
        abs             50%

      header
        padding           10px
        line-height       26px
        display           block
        vertical-align    middle
        shadow            0 2px 3px -2px rgba(0,0,0,0.3)
        a
          color           linkColor1
          noTextDeco      yes

        .kdselectbox
          margin          -4px 5px 0
          span.title
            font-size     12px

      .listview-wrapper
        min-height        200px
        padding           10px
        bg                color, rgba(0, 0, 0, .1)
        borderBox()
        cite.bg-text
          color           rgba(255,255,255,.3)
          text-shadow     0 -1px rgba(0, 0, 0, .2)

  .kdtabpaneview
    p.soon
      font-size       22px
      padding-top     20%
      text-align      center
      color           #aaa

  .kdtabhandlecontainer .kdtabhandle
    &.active
      vendor          box-sizing, content-box
    &:first-child
      margin-left     10px
  .drop-area
    .kdlistitemview-domain-vm
      bg              color, rgba(81, 199, 64, 0.8)
      color           white
      text-shadow     0 -1px 0 rgba(0, 0, 0, .4)

  .kdlistitemview-domain-vm
    margin            0 5px 5px 0
    padding           5px
    display           inline-block
    kalc              width, 33.3%\-4px
    height            auto
    cursor            pointer
    color             #555
    vertical-align    top
    bg                color, rgba(248, 226, 68, 0.9)
    shadow            0 1px 1px rgba(0, 0, 0, .3)
    text-shadow       0 1px 0 rgba(255, 255, 255, .4)
    rounded           2px
    borderBox()
    // &:nth-child(3n)
    //   margin-right    0

    .vm-icon
      size           30px, 30px
      opacity        .5
      sprite()
      bg             position, -360px -390px

    .vm-name
      font-weight    normal
      word-break     break-all
      line-height    20px
      vertical-align top
      padding        5px

    .kdloader
      display         block
      margin          0 auto


  .vm-list

    .vm-item
      cursor           pointer
      height           50px
      margin           1px

      .vm-icon
        top            10px
        left           7px
        width          30px
        height         30px
        abs()

      .shared
        sprite()
        bg position,   -360px -300px

      .personal
        sprite()
        bg position,   -360px -390px

      .vm-title
        font-weight    bold
        color          #ff9600
        top            10px
        left           50px
        abs()

      .vm-domain
        font-size      10px
        color          #888
        top            26px
        left           50px
        abs()

      .vm-status
        left           35px
        top            35px
        width          5px
        height         5px
        abs()

      .vm-status
        bg             color, #B40404
      .vm-status-on
        bg             color, #04B404

      .on-off
        top            15px
        right          3px
        abs()

  .vm-details
    padding            10px

  .input-container
    width           220px
    float           left

  .fw-al-sw
    height     400px

  .fw-li-view
    padding    5px
    height     25px
    color      #fff
    border     1px solid #eee
    border            1px solid #ccc
    text-transform    uppercase
    color             #000

    .personal
      sprite()
      bg position,   -360px -390px

  .fw-al-view, .fw-rl-view
    margin-top        5px
    border            1px solid #ccc
    text-transform    uppercase
    width             60%

    .deny
      background    red
      color         #fff

    .allow
      background    green
      color         #fff


  .block-list-view
    margin-top    10px

    h3
      line-height    25px

  .fw-li-buttons
    .button-title
      text-transform    uppercase
      font-size         10px

    .kdbutton
      background    #fceabb

    .delete-button
      background    #99001D

  .rule-form-view
    margin-top    5px

  .input-wrapper
    margin-right     5px

  .rule-list-view
    padding          5px
    float            left
    width            35%

  .filter-list-view
    background       #f8f8f8
    padding          5px
    float            left
    width            50%

    .filter-form-view
      margin-bottom  10px

  .kdlistview-env-list

    h3.records-title
      font-size           13px
      color               #ff9200
      font-weight         normal
      border-bottom       1px solid #e6e6e6
      border-top          1px solid #e6e6e6
      text-shadow         0 1px 0 #fff
      background          #fafafa

    .kdlistitemview
      border-bottom       1px solid #ededed
      color               #888

    h3.records-title,
    .kdlistitemview
      width               100%
      padding             0 10px !important
      vendor              transition, background .1s linear
      borderBox()

      &:nth-child(2n)
        background        #fcfcfc
        border-bottom     1px solid #ededed

      .record-element
        float             left
        letter-spacing    normal
        padding           5px 0
        line-height       25px
        borderBox()

        .kdselectbox
          width           100%
          borderBox()

        &~.record-element
          padding-left    5px
          width           22%
          input
            size          100%, 26px

        &.record-type
          width           16%

        &.record-ttl,
        &.record-priority
          width           12%

        &.record-buttons
          width           120px
          background      #fff
          text-align      center
          top             0
          right           -120px
          padding         5px
          opacity         0
          border-left     1px dotted #ccc
          flex()
          vendor          transition, right .3s ease \,\
                                      opacity .3s ease
          abs()
          button
            display       block
            float         none
            width         100%
            size          100%, 26px

            &:nth-child(2n)
              margin-left 5px
      &:hover
        background        #f4f4f4
        .record-buttons
          opacity           1
          right             5px

    h3.records-title
      .record-element
        padding-top            10px !important
        &.record-buttons
          vendor               justify-content, center

    th, td
      vertical-align   top

    th
      background       #ff9600
      background       linear-gradient(#CC6300, #ff9600)
      border-left      1px solid rgba(0, 0, 0, 0.2)
      border-right     1px solid rgba(255, 255, 255, 0.1)
      color            #fff
      font-size        11px
      padding          9px 8px 7px 8px
      text-shadow      0 -1px 0 rgba(0, 0, 0, 0.6)

    tbody td
      border-bottom    1px solid #c6c9cc
      border-left      1px solid #e4e7eb
      border-right     1px solid rgba(255, 255, 255, 0.6)
      box-shadow       inset 0 1px 0 rgba(255, 255, 255, 0.6)
      padding          10px

    .slide-icon
      sprite()
      bg position,     -121px -559px
      display          block
      abs()

    .filter-item
      height           45px
      cursor           pointer
      text-transform   uppercase

    td.filter-name
      width            40%

    td.filter-match
      width            40%

    td.action
      width            1%

    td.actions
      width            20%

      .on-off
        display        block

      .on-off a
        padding        7px 10px 6px

    tbody td.item, tbody tr:nth-child(even) td.item
      border-left      1px solid #c6c9cc

    .allow-icon
      width          10px
      height         10px
      margin-left    10px
      sprite()
      bg position,   -25px -145px
      rel()
      top            6px
      left           -5px

    .deny-icon
      width          10px
      height         10px
      margin-left    10px
      sprite()
      bg position,   -25px -125px
      rel()
      top            6px
      left           -5px



    .filter-icon
      width          40px
      height         40px
      margin-right   10px
      sprite()
      bg position,   -780px -521px

    .filter-name
      font-weight    bold
      margin-left    10px
      margin-bottom  3px
      font-size      12px
      color          #ff9600


/*--- Add a domain -----*/

div.environments-add-domain-form

  width                 500px
  height                100%
  padding               30px
  bg                    color, #e8e8e8
  opacity               0
  vendor                transform-origin-x, 0
  vendor                transform, rotateY(90deg)
  -webkit-transition    -webkit-transform .4s ease \,\
                        opacity           .4s ease
  -moz-transition       -moz-transform    .4s ease \,\
                        opacity           .4s ease
  transition            transform         .4s ease \,\
                        opacity           .4s ease
  borderBox()

  &.opened
    opacity             1
    vendor              transform, rotateY(0)

  h4.kdheaderview
    display             block
    height              30px
    line-height         30px
    border-bottom       1px solid #d9d9d9
    shadow              0 1px 0 #f5f5f5

    span
      margin            0 11px

    button.small-gray
      margin            3px 0 0 0
      fr()

  fieldset.domain-option-group
    padding           20px 0
    padding-bottom    0

    .kd-radio-holder
      width           140px
      padding         0
      margin          0
      font-size       11px
      color           #8c8c8c
      height          32px
      line-height     32px
      rounded         3px
      background      #f7f7f7
      text-align      center
      shadow          0 1px 2px rgba(0, 0, 0, .2) \,\
                      inset 0 -3px 0 #e8e8e8
      text-shadow     0 1px 0 #fff
      border-bottom
      fl()

      &~.kd-radio-holder
        margin-left       10px

      &.disabled
        opacity           .5
        cursor            default
        *
          cursor          default

      &.active
        shadow            0 1px 2px rgba(0, 0, 0, .2) \,\
                          inset 0 -3px 0 #ffa800
        position          relative

      &.active:after
        content         ""
        display         block
        border          5px solid transparent
        border-top      7px solid #ffa800
        left            64px
        top             32px
        abs()

      input[type=radio]
        display         none

  .domain-tabs
    height              auto
    overflow            hidden

    .status-message
      top               64px
      left              64px
      opacity           0
      vendor            transition, opacity  .2s ease-in\,
                                    left     .3s ease-in
      abs()

      &.in
        left            4px
        opacity         1

    .domain-list
      left              30px
      opacity           0
      margin-top        5px
      height            285px
      vendor            transition, opacity  .3s ease-out\,
                                    left     .2s ease-out
      &.in
        left            0
        opacity         1

      .kdlistview
        padding-right   2px

    .domain-buy-items
      background        rgba(255,255,255,.6)
      border-radius     2px
      border            1px solid #ccc
      margin-top        6px
      height            36px

      h1
        font-size       14px
        padding         10px

      button
        width           42px
        right           6px
        top             6px
        abs()

      .kdselectbox
        height          22px
        right           55px
        top             6px
        abs()

  form.new-domain-form
    padding             0
    margin              0

    .formline
      padding           0
      margin            0

    label.domain-name
      display             block
      float               none
      color               #8c8c8c
      text-shadow         0 1px 0 #fff
      font-size           11px

    input.domain-input
      height              35px
      line-height         35px
      shadow              0 1px 0 #fff
      margin-top          19px
      margin-bottom       1px
      padding             0 140px 0 10px
      borderBox()

    .kdselectbox.main-domain-select
      top                25px
      right              5px
      abs()

  .formline.button-field
    bg                   color, transparent

    .kdbutton.add-domain
      fr()
      margin-top         10px
      font-size          14px
      font-weight        normal
      width              174px

  form+p.success
    border               1px solid #bbb
    shadow               inset 0 0 0 1px #fff
    padding              20px
    clear                both
    border               1px solid rgba(89, 130, 77, 0.18);
    fl()

/*--- Scene -----*/

div.environments-scene

  bg                image, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAHElEQVQYV2M8fPhwmq2t7SwGHIARlwRMfHgoAAAWpAQJz4XcBAAAAABJRU5ErkJggg==")
  background-color  white

  .internet
    width               100px
    height              500px
    background          url('../images/internet.png') no-repeat
    margin-left         10px

  .zoom-slider
    right               50px
    bottom              0
    height              2px
    abs()

    .handle
      height            10px
      top               -4px

  .zoom-controls
    size                177px, 13px
    right               24px
    bottom              15px
    abs()

    a.zoom-control
      display           block
      size              15px, 15px
      line-height       9px
      font-weight       bold
      color             #ddd
      font-size         14px
      text-align        center
      border            2px solid #ddd
      text-decoration   none
      rounded           100%
      borderBox()
      fl()

      &.zoomin
        line-height     11px
        fr()

      &:hover
        border-color    #bbb
        color           #bbb

  .reset-view
    opacity             .6
    border              none
    background          white
    left                10px
    bottom              10px
    font-size           11px
    color               #666
    z-index             6
    abs()

    &:hover
      opacity           1

    span.icon
      sprite()
      background-position -120px -580px
      size              12px, 12px
      position          relative
    span.button-title
      line-height       19px

div.environments-container

  width           240px
  height          100%
  border          1px dashed #ccc
  border-top      none
  border-bottom   none
  border-radius   0
  background      rgba(205,205,205,.07)
  noTextSelection()

  .kdheaderview
    padding       14px 0
    text-indent   14px
    border        none

    .new-item-plus
      size                20px, 20px
      margin              5px 20px 0 0
      rounded             12px
      background-color    #555
      border              1px solid #555
      cursor              pointer
      vendor              transition, width .2s ease-in
      position            relative
      overflow            hidden
      fr()

      i
        display                 block
        size                    20px, 25px
        sprite()
        background-position     -120px -440px
        left                    0px
        top                     0px
        abs()

      span
        left                    5px
        top                     0
        height                  25px
        line-height             20px
        font-size               11px
        text-align              left
        white-space             nowrap
        margin                  0
        font-weight             600
        color                   #fff
        vendor                  transition, opacity  .1s ease-in
        opacity                 0
        abs()

      &:hover
        width                 73px

        span
          opacity             1

    .new-item-loader
      abs         19px, 10px

div.environments-item

  cursor          default
  width           200px
  height          40px
  border          1px solid rgba(217, 216, 217, 1.0)
  border-left     5px solid rgba(217, 216, 217, 1.0)
  gradient        rgba(252, 253, 253, 1.0), rgba(228, 229, 230, 1.0)
  rounded         2px
  vendor          transition, opacity .3s ease
  noTextSelection()
  borderBox()

  span.chevron
    display       none
    size          14px, 14px
    bottom        2px
    right         2px
    bg            position, -182px -363px
    sprite()

  &:hover
    gradient      rgba(254, 255, 255, 1.0), rgba(222, 233, 234, 1.0)
    span.chevron
      display     block

  .status-indicator

    size          8px, 8px
    background    #ff9600
    border        1px solid #ff9600
    top           50%
    right         9px
    margin-top    -4px
    rounded       100%
    cursor        pointer
    vendor        transition, background .3s ease
    borderBox()
    abs()

  &.passivated
    opacity       0.5
    .status-indicator
      background  none

  &.highlight
    gradient      white, rgba(244, 244, 244, 1.0)
    shadow        0 0 6px rgba(125,190,241,.7)

  h3
    margin-top    -2px
    font-size     12px
    margin-bottom  2px
    width         100%
    overflow      hidden
    white-space   nowrap
    text-overflow ellipsis

  div.details
    padding       8px
    span
      font-size   10px
      color       #aaa
      margin-top  -2px
      abs()

  &.machine
    height            50px

    div.progressbar-container
      top             25px
      height          15px
      width           80px
      abs()
      span.light-label
        display       none
      span.dark-label
        margin-top    2px
      &:last-of-type
        left          94px

    .vm-toggle-menu
      width           70px
      position        relative
      left            113px
      bottom          18px
      height          10px

div.environments-joint
  size              4px, 4px
  background-color  #ccc
  border            none

  &.deleteMode
    size             14px,14px
    z-index          2
    border           1px solid white
    borderBox()
    sprite()
    bg               position,-84px -544px
    background-color rgba(169, 39, 84, 1.0)

  &.right
    right           -2px
    margin-top      -2px
    &.deleteMode
      margin-top    -7px
      right         -7px

  &.left
    left            -7px
    margin-top      -2px
    &.deleteMode
      left          -12px
      margin-top    -7px

.environments-cs-container
  width              182px
  padding-top        3px
  padding-left       7px

  .environments-cs-color
    size             17px, 17px
    float            left
    margin-left      5px
    background       #ccc
    cursor           pointer
    border           3px solid rgba(255, 255, 255, 0)
    vendor           transition, border-color .3s ease
    borderBox()
    &:hover
      border-color   rgba(255, 255, 255, .5)
    &.selected,
    &.selected:hover
      border-color   rgba(0, 0, 0, .3)

.kdmodal.environments-confirm-destroy
  .kdmodal-content
    div
      padding          20px

{'fraction_non_alphanumeric': 0.05571356867993977, 'fraction_numerical': 0.05387318052534716, 'mean_word_length': 0.8769713886950453, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 14, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4607500', 'n_tokens_mistral': 16945, 'n_tokens_neox': 14726, 'n_words': 4049}