@import "compass/utilities/general/clearfix"
@import "compass/css3"
@import "variables"
@import "mixins"
@import "adaptative-mixins"
@import "sprite-mixins"

$button_family: "Myriad Pro", "Helvetica", "Arial", "sans", "sans-serif"
$buttonShadowColor: rgba(0,0,0,0.25)
$uiElementInternalSpacing: 14px
$uiElementBaseHeight: 40px
$uiElementBaseFontSize: 13px
$uiElementBasePlaceHolderColor: #999
$uiElementBaseColor: #7ccf42

// ooooooooooooooooooooooooooooooo
//  1. Button
// ooooooooooooooooooooooooooooooo
.iugu-ui
  .button,.button:visited
    cursor: pointer
    display: inline-block
    @include border-radius(4px)
    background-color: #fcfcfc
    @include filter-gradient(#fcfcfc, #f2f2f2, vertical)
    @include background-image(linear-gradient(top, #fcfcfc 0%,#f2f2f2 100%))
    color: #585858
    @include text-shadow( rgba(255,255,255,1) -1px -1px 0px )
    padding: $uiElementInternalSpacing
    height: 41px
    font-size: 13px
    line-height: 16px
    text-decoration: none
    text-align: center
    font-family: $button_family
    font-weight: 600
    border-width: 0px
    margin: 0px
    text-transform: uppercase
    white-space: nowrap
    -webkit-appearance: none
    -webkit-tap-highlight-color: rgba(0,0,0,0)
    -webkit-touch-callout: none
    -webkit-border: none
    -webkit-margin: none
    @include box-shadow(  rgba(255,255,255,0.25 ) 1px 1px 0px 0px inset, $buttonShadowColor -1px -1px 0px 0px inset, rgba(0,0,0,0.10) 0px 0px 0px 1px )
    vertical-align: top
    @include box-mode
    margin-bottom: $baseElementSpacing
    overflow: hidden
    &.align-left
      text-align: left
    &.align-center
      text-align: center
    &.align-right
      text-align: right
    *
      float: left
      margin-right: $uiElementInternalSpacing
      display: block
      &.no-space
        margin-right: 0px !important
    &.default
      @include text-shadow( rgba(0,0,0,0.25) 1px 1px 0px )
      background-color: #7ccf42
      @include filter-gradient(#7ccf42, #6cb53a, vertical)
      @include background-image(linear-gradient(top, #7ccf42 0%,#6cb53a 100%))
      color: #FFF
    &.warning
      @include text-shadow( rgba(0,0,0,0.25) 1px 1px 0px )
      background-color: #D23F3F
      @include filter-gradient(#D23F3F, #B93737, vertical)
      @include background-image(linear-gradient(top, #D23F3F 0%,#B93737 100%))
      color: #FFF
    &.disabled,&.default.disabled
      @include border-radius(4px)
      background-color: #fcfcfc !important
      @include filter-gradient(#fcfcfc, #f2f2f2, vertical)
      @include background-image(linear-gradient(top, #fcfcfc 0%,#f2f2f2 100%))
      color: #cccccc
      @include text-shadow( rgba(255,255,255,1) -1px -1px 0px )
      @include box-shadow(  rgba(255,255,255,0.25 ) 1px 1px 0px 0px inset, $buttonShadowColor -1px -1px 0px 0px inset, rgba(0,0,0,0.10) 0px 0px 0px 1px !important )
      div
        @include opacity(0.5)
    &.no-space
      margin-bottom: 0px !important

.desktop
  .iugu-ui
    .button
      &.default
        &:hover
          @include box-shadow(  rgba(255,255,255,0.25 ) 1px 1px 0px 0px inset, $buttonShadowColor -1px -1px 0px 0px inset, rgba(0,0,0,0.10) 0px 0px 0px 1px, rgba(255,190,75,0.45) 0px 0px 5px 4px inset )

.desktop,.mobile
  .iugu-ui
    .button,.button.default
      &.active,&.selected
        @include box-shadow(  rgba(255,255,255,0.25 ) -1px -1px 0px 0px inset, $buttonShadowColor 1px 1px 0px 0px inset, rgba(0,0,0,0.10) 0px 0px 0px 1px )

.mobile
  .iugu-ui
    .button
      line-height: 13px

.iugu-ui
  button.button
    line-height: 15px

.ios
  .iugu-ui
    .button
      line-height: 12px

.iugu-ui
  .button-group
    @include pie-clearfix
    .button
      float: left
      min-width: 40px
    .button:not(:first-child):not(:last-child)
      @include border-radius(0px)
    .button:first-child
      @include border-radius(4px 0px 0px 4px)
    .button:last-child
      @include border-radius(0px 4px 4px 0px)
    &.no-bottom-margin
      .button
        margin-bottom: 0px

.ie
  .iugu-ui
    .button
      @include border-radius(0px)

// ooooooooooooooooooooooooooooooo
//  2. Input
// ooooooooooooooooooooooooooooooo
.iugu-ui
  input[type="text"],input.string,input.password
    border: none
    padding-left: $uiElementInternalSpacing - 2px
    padding-right: $uiElementInternalSpacing - 2px
    height: $uiElementBaseHeight
    padding-top: 3px
    font-size: $uiElementBaseFontSize + 1px
    -webkit-appearance: none
    -webkit-tap-highlight-color: rgba(0,0,0,0)
    -webkit-touch-callout: none
    outline: none
    @include box-mode
    @include border-radius(4px)
    @include box-shadow(  rgba(255,255,255,0.25 ) -1px -1px 0px 0px inset, $buttonShadowColor 1px 1px 0px 0px inset, rgba(0,0,0,0.10) 0px 0px 0px 1px )
    margin-bottom: $baseLineSpacing

    &.failure
      background: #FFF5F5
      padding-left: $uiElementInternalSpacing - 4px
      padding-right: $uiElementInternalSpacing - 4px
      border: 2px solid #DC4B4B
      @include box-shadow( none )
    &.success
      padding-left: $uiElementInternalSpacing - 4px
      padding-right: $uiElementInternalSpacing - 4px
      border: 2px solid #57B436
      @include box-shadow( none )

  .field_with_errors
    input[type="text"],input.string,input.password
      background: #FFF5F5
      padding-left: $uiElementInternalSpacing - 4px
      padding-right: $uiElementInternalSpacing - 4px
      border: 2px solid #DC4B4B
      @include box-shadow( none )

    span.error
      display: block
      padding: 2px
      padding-top: 0px
      padding-bottom: 4px
      font-size: 12px
      color: #DC4B4B

  .field_with_no_errors
    input[type="text"],input.string,input.password
      padding-left: $uiElementInternalSpacing - 4px
      padding-right: $uiElementInternalSpacing - 4px
      border: 2px solid #57B436
      @include box-shadow( none )


  input.string::-webkit-input-placeholder
    color: $uiElementBasePlaceHolderColor
    font-weight: normal
  input.string:-moz-placeholder
    color: $uiElementBasePlaceHolderColor
    font-weight: normal
  input.string:-ms-input-placeholder
    color: $uiElementBasePlaceHolderColor
    font-weight: normal
 
    // @include box-shadow(  rgba(255,255,255,0.25 ) 1px 1px 0px 0px inset, $buttonShadowColor -1px -1px 0px 0px inset, rgba(0,0,0,0.04) 0px 0px 0px 1px )

.ie
  .iugu-ui
    input[type="text"]
      @include border-radius(0px)

.iugu-ui
  .ui-slider .ui-slider-handle
    position: absolute
    z-index: 2

  .ui-slider
    position: relative
    text-align: left
    background: $baseUIInsetColor
    @include border-radius( 5px )
    @include box-shadow(  $baseUILighterShadowColor 1px 1px 0px 0px inset )

    .ui-slider-handle,.ui-slider-handle:active
      padding: 12px
      cursor: pointer

      .ui-slider-handle-visual
        background: $baseUIColor
        width: 10px
        height: 10px
        border: 6px solid #fff
        +border-radius( 11px )
        @include box-shadow(  rgba(255,255,255,0.25 ) 1px 1px 0px 0px inset, $buttonShadowColor -1px -1px 0px 0px inset, rgba(0,0,0,0.15) 1px 1px 0px 0px )
        outline: 0

    .ui-slider-range
      position: absolute
      z-index: 1
      font-size: .7em
      display: block
      border: 0
      background-position: 0 0
      background: $baseUIColor
      @include box-shadow(  rgba(255,255,255,0.25 ) -1px -1px 0px 0px inset, $buttonShadowColor 1px 1px 0px 0px inset )

  .ui-slider-horizontal
    height: 6px
    margin-top: 12px
    margin-bottom: 12px
    margin-left: 11px
    margin-right: 11px
    .ui-slider-handle
      top: -21px
      margin-left: -22px
    .ui-slider-range
      top: 0
      height: 100%
    .ui-slider-range-min
      left: 0
    .ui-slider-range-max
      right: 0

  .ui-slider-vertical
    width: 6px
    .ui-slider-handle
      margin-bottom: -22px
      left: -20px
    .ui-slider-range
      width: 6px

.ie
  .iugu-ui
    .ui-slider
      +border-radius( 0px )


// ooooooooooooooooooooooooooooooo
//  XX. Selectors
// ooooooooooooooooooooooooooooooo
.ui-selector-input-hidden
  display: none
.ui-selector-input-visible
  display: block
.iugu-ui
  .ui-selector-floating-title
    position: relative
    span
      position: absolute
      top: $uiElementInternalSpacing
      left: $uiElementInternalSpacing
      z-index: 10
      color: $uiElementBasePlaceHolderColor
      font-size: 13px
      line-height: 16px
.iugu-ui
  .ui-selector.date.dw-inline
    .dwwc
      margin-top: 20px
      padding-top: 6px
      border-top: 2px solid $uiElementBasePlaceHolderColor
    .dw
      color: lighten($uiElementBasePlaceHolderColor, 10%)
  .ui-selector
    position: relative
    .dw
      @include border-radius(4px)
      background-color: #fcfcfc
      @include filter-gradient(#fcfcfc, #f2f2f2, vertical)
      @include background-image(linear-gradient(top, #fcfcfc 0%,#f2f2f2 100%))
      color: $uiElementBasePlaceHolderColor
      @include text-shadow( rgba(255,255,255,1) -1px -1px 0px )
      padding: $uiElementInternalSpacing
      padding-left: $uiElementInternalSpacing - 4px
      padding-right: $uiElementInternalSpacing - 4px
      font-size: 13px
      line-height: 16px
      text-decoration: none
      text-align: center
      font-family: $button_family
      font-weight: 600
      border-width: 0px
      margin: 0px
      white-space: nowrap
      -webkit-appearance: none
      -webkit-tap-highlight-color: rgba(0,0,0,0)
      -webkit-touch-callout: none
      -webkit-border: none
      -webkit-margin: none
      @include box-shadow(  rgba(255,255,255,0.25 ) 1px 1px 0px 0px inset, $buttonShadowColor -1px -1px 0px 0px inset, rgba(0,0,0,0.10) 0px 0px 0px 1px )
      vertical-align: top
      @include box-mode
      margin-bottom: $baseLineSpacing
      overflow: hidden

    table
      border: none
      padding: 0px
      margin: 0px
      +border-radius( 0px )
      td
        padding: 0px
        padding-left: 4px
        padding-right: 4px
        margin: 0px
        border: 0px
        ul
          list-style: none
          margin: 0px
          padding: 0px
          margin-left: 10px
          margin-right: 10px
          li
            margin: 0px
            padding: 0px
            text-transform: uppercase
            color: #585858
            

    .hidden
      display: none

    .dwwol
      border: 2px solid $baseUIColor
      +border-radius(8px)
      display: block
      height: 36px
      margin-top: -21px
      width: 100%
      position: absolute
      top: 50%
      left: -2px
    .dwl
      position: absolute
      top: -20px
      left: 0px
      z-index: 4
      background: #fcfcfc
    .dwwl
      position: relative
    .dww
      overflow: hidden
      position: relative
      margin-top: 20px
    .dwwo
      display: block
      height: 100%
      left: 0
      position: absolute
      top: 0
      width: 100%
      z-index: 3


      +background( linear-gradient( #fcfcfc 10px, rgba(245, 245, 245, 0) 41%, rgba(245, 245, 245, 0) 41%, #f2f2f2 100%) )


// ooooooooooooooooooooooooooooooo
//  XX. Notice
// ooooooooooooooooooooooooooooooo
.iugu-ui
  .borderless,.close
    font-size: 20px
    font-weight: bold
    line-height: 20px
    color: #000
    +text-shadow(0 1px 0 rgba(255,255,255,1))
    +opacity(0.2)
    padding: 0px
    margin: 0px
    margin-top: -5px
    cursor: pointer
    background: transparent
    border: 0
    -webkit-appearance: none
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
    &:hover
      color: #000
      text-decoration: none
      cursor: pointer
      +opacity(0.4)

  .notice .borderless, .notice .close
    float: right
    position: relative
    top: 0px
    right: -25px
    line-height: 18px

  .notice .close
    padding: 10px 10px 20px 20px
    right: -40px
    top: -15px

  .notice
    font-size: $baseFontSize * 0.85714
    line-height: ($baseFontSize * 0.85714)
    padding: 10px
    padding-right: 35px
    margin-bottom: $baseElementSpacing
    +text-shadow( 0 1px 0 rgba(255,255,255,.5) )
    +border-radius( 5px )
    border: 4px solid $yellowBorder
    background-color: lighten($yellowBackground,5%)
    color: #919191
    .notice-heading
      color: $yellowText
    p,h1,h2,h3,h4,h5,h6
      margin: 0px
      padding: 0px
    ul
      margin-bottom: 0px
      padding-top: 0px
      padding-bottom: 0px
      margin-top: $baseLineSpacing
    ul ul
      margin-top: 0px
    ul li
      line-height: $baseElementSpacing
      padding-top: 0px
      padding-bottom: 0px
    &.notice-red
      border-color: $redBorder
      background-color: lighten($redBackground,5%)
      .notice-heading
        color: $redText
    &.notice-green
      border-color: $greenBorder
      background-color: lighten($greenBackground,5%)
      .notice-heading
        color: $greenText
    &.notice-blue
      border-color: $blueBorder
      background-color: lighten($blueBackground,5%)
      .notice-heading
        color: $blueText

// ooooooooooooooooooooooooooooooo
//  1. Tag
// ooooooooooooooooooooooooooooooo
$tag_size: 0.70
.iugu-ui
  .tag
    font-size: $baseFontSize * $tag_size
    font-weight: bold
    line-height: ($baseFontSize * $tag_size) + $baseLineSpacing
    white-space: nowrap
    background-color: $gray
    color: #FFF
    padding: 3px
    padding-top: 5px
    +border-radius( 2px )
    +text-shadow(0px -1px 0px rgba(0,0,0,0.25))
    text-transform: uppercase
  .dl-horizontal
    .tag
      line-height: ($baseFontSize * $tag_size)

.chrome,.safari
  .iugu-ui
    .tag
      padding-top: 3px
      padding-bottom: 4px
    .dl-horizontal
      .tag
        padding-top: 4px
        padding-bottom: 3px

// ooooooooooooooooooooooooooooooo
//  2. Badge
// ooooooooooooooooooooooooooooooo
.iugu-ui
  $badge_size: 0.70
  .badge
    font-size: $baseFontSize * $badge_size
    font-weight: bold
    line-height: ($baseFontSize * $badge_size) + $baseLineSpacing
    white-space: nowrap
    background-color: $gray
    color: #FFF
    padding: 3px
    +border-radius( $baseFontSize )
    +text-shadow(0px -1px 0px rgba(0,0,0,0.25))
    min-width: $baseFontSize
    text-align: center
    display: inline-block

.firefox
  .iugu-ui
    .badge
      padding-top: 4px
      padding-bottom: 2px

// ooooooooooooooooooooooooooooooo
//  Common to Label and Badge
// ooooooooooooooooooooooooooooooo
.iugu-ui
  .badge,.tag
    &.red
      background-color: $red
    &.yellow
      background-color: $yellow
    &.green
      background-color: $green
    &.blue
      background-color: $blue

// ooooooooooooooooooooooooooooooo
//  3. Progress Bar
// ooooooooooooooooooooooooooooooo
.iugu-ui
  .progress
    overflow: hidden
    height: 18px
    margin-bottom: $baseElementSpacing
    +box-shadow( inset 0 1px 2px rgba(0,0,0,.1) )
    +border-radius( 9px )
    +background( linear-gradient( #f5f5f5, #f9f9f9 ) )
    .bar
      width: 0%
      height: 18px
      color: #FFF
      font-size: 12px
      line-height: 18px
      text-align: center
      +text-shadow( 0 -1px 0 rgba(0,0,0,.25) )
      +background( linear-gradient( #149bdf, #0480be ) )
      +box-mode
      +transition(width .6s ease)

// ooooooooooooooooooooooooooooooo
//  4. Container
// ooooooooooooooooooooooooooooooo
.iugu-ui
  .container
    background: $white
    +border-radius(5px)
    +box-mode
    padding: 20px
    +box-shadow( 1px 1px 1px rgba(0, 0, 0, 0.10) )
    // -1px 2px 2px rgba(0, 0, 0, 0.05) )
    margin-bottom: $baseElementSpacing
    > .container
      border: 1px solid $baseLineColor
      +box-shadow( -1px -1px rgba( 0,0,0, 0.3 ) )
    &.no-padding
      padding: 0px
    &.small-padding
      padding: 10px
    .padding
      padding: 20px
      position: relative
    .header
      border-bottom: 1px solid $baseLineColor
      padding: 8px
    .footer
      border-top: 1px solid $baseLineColor
      padding: 8px

// ooooooooooooooooooooooooooooooo
//  5. Tabbed Container
// ooooooooooooooooooooooooooooooo
.iugu-ui
  .tabbed
    +box-shadow( 1px 1px 1px rgba(0, 0, 0, 0.10) )
    +border-radius(5px)
    background: darken( $white, 15% )
    .nav
      @extend .auto-clear
      margin: 0px !important
      padding: 0px
      height: auto !important
      &:after
        margin-bottom: 0px
      > li
        @extend .floating-left
        display: block
        list-style: none
        margin: 0px
        padding: 0px
        background: darken( $white, 15% )
        text-align: center
        font-size: 18px
        line-height: 20px
        font-weight: bold
        cursor: pointer
        color: lighten( $textColor, 50% ) 
        +box-mode()
        overflow: hidden
        [class^="icon-"],[class*=" icon-"]
          vertical-align: baseline
          +opacity( 0.30 )
      > li:first-child
        +border-radius( 5px 0px 0px 0px )
      > li:last-child
        +border-radius( 0px 5px 0px 0px )
      > li.active,li.active:hover
        +text-shadow(-1px -1px 0 rgba(0,0,0,0.1))
        color: lighten( $textColor, 40% ) 
        background: $white
        [class^="icon-"],[class*=" icon-"]
          +opacity( 1 )
      > li:hover
        background: darken( $white, 10% ) 
        [class^="icon-"],[class*=" icon-"]
          +opacity( 0.4 )
      > li > a, > li > a:visited, li > a:hover
        text-decoration: none
        color: inherit
        display: block
        width: 100%
        padding: 15px
        height: auto
        overflow: hidden
        +box-mode()
        white-space: nowrap
        &.no-padding
          padding: 0px
        span
          display: block
          overflow: hidden
          margin: 15px

    > .container
      +border-radius( 0px 0px 5px 5px )
      +box-shadow( none )
    .tabbed
      border: 1px solid $baseLineColor
      +box-shadow( none )
      > ul.nav li
        +box-shadow( none )
        font-size: 16px
        line-height: 16px
      > .container
        +box-shadow( none )



// ooooooooooooooooooooooooooooooo
//  XXX. UI Responsive Box
// ooooooooooooooooooooooooooooooo
body.ui-box-background,body.ui-box-background #app
  height: 100%
  width: 100%
  position: relative
  @include box-sizing( border-box )

body.ui-box-background
  overflow: hidden

body.ui-box-background
  background: $baseUIBoxBackground !important


.ui-responsive-box
  @include pie-clearfix
  background: $baseUIBackground
  width: 100%
  margin-left: auto
  margin-right: auto
  position: relative
  color: #666
  height: 100%
  @include box-sizing( border-box )
  border-left: 1px solid $baseUIBackground_highlight
  border-top: 1px solid $baseUIBackground_highlight
  border-right: 1px solid $baseUIBackground
  border-bottom: 1px solid $baseUIBackground

  .sidebar
    float: left
    width: $desktopSidebarWidth 
    height: 100%
    background: $secondaryUIBackground
    border-right: 1px solid $secondaryUIBackground_darken
    padding: 20px
    @include box-sizing( border-box )
    position: relative

  .content-area
    height: 100%
    position: relative
    @include background( top, linear-gradient( lighten($baseUIBackground, 3) 44px, $baseUIBackground ) )

    @include box-sizing( border-box )
    .small-navigation
      display: none
    
    &.handle-sidebar
      border-left: 1px solid $secondaryUIBackground_lighten
      margin-left: $desktopSidebarWidth

  .handle-scrolling
    width: 100%
    height: 100%
    overflow-y: auto
    -webkit-overflow-scrolling: touch

  .handle-scrolling > *
    -webkit-transform: translateZ(0px)

  .handle-scrolling > div:first-child
    height: 100%

  .content
    position: absolute
    top: 1px
    bottom: 1px
    left: 2px
    right: 1px

@include for-large-screens(1025px)
  body.ui-box-background
    padding: 20px
    @include background-image( radial-gradient(top center, circle, $applicationBackgroundHighlightColor 0px, rgba($applicationBackgroundHighlightColor,0) 300px) ,linear-gradient(bottom, $applicationBackgroundHighlightColor 30%,$applicationBackgroundHighlightColor 70%) )
  .ui-responsive-box
    max-width: 980px
    @include box-shadow( rgba(0,0,0,0.54) 0px 0px 2px, rgba(0,0,0,0.25) 0px 0px 20px )
    border: 1px solid #FF0000, 2px solid #00FFFF
    @include border-radius( 4px, 4px )

@include for-small-screens(680px)
  body.ui-box-background
    background: $baseSidebarBackgroundColor !important

  .mobile
    .ui-responsive-box
      .content-area.handle-sidebar
        +translateZ(0px)
    .handle-scrolling
      overflow-y: scroll

  .ui-responsive-box
    border: none
    background: $baseSidebarBackgroundColor

    .sidebar
      float: none
      position: absolute
      z-index: 1000
      width: $mobileSidebarWidth
      border: none
      background: $baseSidebarBackgroundColor
      visibility: hidden

      @include transition-delay( 1.5s )

    .content-area.handle-sidebar
      margin-left: 0px
      border-left: none
      z-index: 2000
      min-width: 320px

      @include transition-property( transform )
      @include transition-duration( 300ms )
      @include transition-timing-function( cubic-bezier(0.39, 0.575, 0.565, 1) )

    .content-area
      @include background( top, linear-gradient( lighten($baseUIBackground, 3) 44px, $baseUIBackground ) )
      @include box-shadow( rgba(0,0,0,0.54) 0px 0px 2px, rgba(0,0,0,0.8) 0px 0px 15px )
      border-left: 1px solid $baseUIBackground_highlight
      border-top: 1px solid $baseUIBackground_highlight
      border-right: 1px solid $baseUIBackground
      border-bottom: 1px solid $baseUIBackground
      @include border-radius( 4px, 4px )


      &.handle-sidebar
        .small-navigation
          display: block
          height: $toolbarHeight
          position: relative
          background: $baseHeaderBackground
          @include background( top, linear-gradient( $baseHeaderBackground 22px, $baseHeaderBackground_darken ) )

          margin-top: -1px
          margin-right: -2px

          @include border-radius( 4px 4px 0px 0px )
          border-left: 1px solid $baseHeaderBackground_lighten
          border-top: 1px solid $baseHeaderBackground_lighten
          border-right: 1px solid $baseHeaderBackground
          border-bottom: 1px solid $baseHeaderBackground_shadow
          
          .toggle-sidebar
            display: block
            width: 44px
            height: 44px
            cursor: pointer
            position: absolute
            top: 0px
            left: 0px
            z-index: 10
          .responsive-title
            display: block
            text-align: center
            height: 44px
            font-size: 17px
            line-height: 44px
            color: #FFF
            @include box-mode
            left: 60px
            right: 60px
            font-weight: bold
            @include text-shadow( rgba(0,0,0,0.25) -1px -1px 0px )

  .content-area
    .content
      top: 48px

  .desktop .open, .mobile .open
    border: none
    .content-area.handle-sidebar
      +translateX( $mobileSidebarWidth )

    .sidebar
      display: block
      visibility: visible
      margin: 1px

      @include transition-property( border )
      @include transition-delay( 0.3s )


// ooooooooooooooooooooooooooooooo
//  ??. DataSet 
// ooooooooooooooooooooooooooooooo
.dataset
  table.table
    overflow: visible
    th
      .row-container
        cursor: pointer
        .icon
          position: absolute
          right: 3px
          top: 5px
    td,th
      overflow: visible
      padding: 0px
      .row-container
        width: 100%
        height: 44px
        position: relative
        .row-data
          padding: 0px
          display: block
          position: absolute
          top: 12px
          line-height: 100%
          left: 12px
          bottom: 12px
          right: 12px
          overflow: hidden
          font-size: 13px
          line-height: 22px
        
    thead
      tr
        th
          color: #FFF
          background: $uiElementBaseColor

@include for-small-screens(680px)
  .dataset
    table.table
      thead
        tr
          th
            background: none
            color: #333
      th,td
        .row-container
          .row-data
            font-size: 12px
            line-height: 22px

// ooooooooooooooooooooooooooooooo
//  ??. Popup
// ooooooooooooooooooooooooooooooo
.popup-wrapper
  position: absolute
  left: 0px
  right: 0px
  top: 0px
  bottom: 0px
  z-index: 5000
  .popup-modal
    position: absolute
    top: 0px
    left: 0px
    width: 100%
    height: 100%
    background: rgba(0,0,0,0.5)
    z-index: 2
  .popup-window
    position: absolute
    top: 50%
    left: 50%
    z-index: 5

@include for-small-screens(680px)
  .popup-wrapper
    .popup-model
      display: none
    .popup-window
      position: absolute
      left: 0px
      top: 46px
      bottom: 0px
      right: 0px
      width: auto !important
      height: auto !important
      margin-top: auto !important
      margin-left: auto !important
      .container
        width: auto !important
        height: auto !important
        position: absolute
        left: 0px
        top: 0px
        bottom: 0px
        right: 0px
        margin-bottom: 0px