body.cmi-flex-modal-open
  overflow: hidden

// base modal structure
.cmi-flex-modal
  +position(fixed, 0 0 0 0)
  +backface-visibility(hidden)
  display: block
  overflow: hidden
  outline: 0
  z-index: $modal-z-index
  background-color: $modal-backdrop-color

.cmi-flex-modal-dialog,
.cmi-flex-modal-dialog-inner
  overflow: hidden
  z-index: 0
  margin: 0
  padding: 0
  outline: 0
  +display(flex)
  +flex-direction(column)
  +flex-wrap(nowrap)
  +align-items(stretch)
  +cmi-border-radius(3px)

.cmi-flex-modal-dialog
  +position(absolute, 5% 5% auto 5%)
  max-height: 90%
  @extend .cmi-z-depth-5

.cmi-flex-modal-dialog-inner
  position: relative

.cmi-flex-modal-dialog,
.cmi-flex-modal-dialog-inner
  > header.cmi-header,
  > main.cmi-main,
  > footer.cmi-footer
    position: relative

  > header.cmi-header,
  > footer.cmi-footer
    overflow: hidden
    z-index: 10
    +display(flex)
    +flex-shrink(0)

  > header.cmi-header
    height: $modal-header-height
    background-color: $modal-header-bgcolor
    +border-top-radius(3px)

  > main.cmi-main
    overflow: scroll
    overflow-x: hidden
    overflow-y: scroll
    z-index: 1
    background-color: $modal-main-bgcolor
    +display(flex)
    +flex-direction(column)
    +flex-shrink(1)

  > footer.cmi-footer
    height: $modal-footer-height
    background-color: $modal-footer-bgcolor
    +border-bottom-radius(3px)

.cmi-flex-modal-main-inside
  position: relative
  height: auto
  display: -webkit-box
  +display(flex)
  +flex-direction(row)
  +flex-wrap(nowrap)
  +flex-grow(1)
  +flex-shrink(0)
  +align-items(stretch)

  > aside.cmi-aside,
  > section.cmi-section
    position: relative

  > aside.cmi-aside
    width: $modal-sidebar-width
    min-width: $modal-sidebar-width
    background-color: $modal-sidebar-bgcolor
    +flex-grow(0)
  > .cmi-section
    +flex-grow(1)

// modal additional content styling
.cmi-flex-modal-dialog,
.cmi-flex-modal-dialog-inner
  > header.cmi-header,
  > footer.cmi-footer
    .cmi-pull-left
      .cmi-a.cmi-btn
        margin-right: 8px
    .cmi-pull-right
      .cmi-a.cmi-btn
        margin-left: 8px
    .cmi-flex-modal-back
      position: relative
      overflow: visible
      min-width: 0
      height: auto
      padding: 4px 6px 2px 6px
      line-height: 1.3
      letter-spacing: 0
      .cmi-i
        font-size: 15px
    .cmi-btn
      height: auto

.cmi-flex-modal-header-inside
  position: relative
  display: block
  width: 100%
  padding: 8px
  +clearfix

  h1.cmi-h1,
  h2.cmi-h2,
  h3.cmi-h3,
  h4.cmi-h4,
  h5.cmi-h5
    margin: 5px
    font-weight: 200
    font-size: 16px
    line-height: 1.2
    color: #e5e5e5

  .cmi-flex-modal-close
    position: relative
    overflow: visible
    min-width: 0
    height: auto
    margin: 0
    padding: 4px 6px 2px 6px
    line-height: 1.3
    letter-spacing: 0

  .cmi-flex-modal-back,
  .cmi-flex-modal-close
    margin: 0
    color: #e5e5e5
    border: 1px solid #606060
    background-color: $modal-header-bgcolor
    i.cmi-i
      color: #ccc
    &:hover
      background-color: darken($modal-header-bgcolor, 5%)
      i.cmi-i
        color: #fff

.cmi-flex-modal-footer-inside
  position: relative
  display: block
  width: 100%
  padding: 0px 8px
  +clearfix

  .cmi-flex-modal-back
    margin: 13px 0
    color: #e5e5e5
    border: 1px solid #cccccc
    background-color: $modal-footer-bgcolor
    i.cmi-i
      color: #999999
    &:hover
      background-color: darken($modal-footer-bgcolor, 5%)
      i.cmi-i
        color: #333

ul.cmi-flex-modal-aside-tab-list
  margin: 8px 0 8px 8px
  padding: 0
  list-style: none
  li.cmi-li
    margin-bottom: 4px
  a.cmi-a
    position: relative
    display: block
    padding: 8px 20px
    font-size: 13px
    text-align: right
    color: $modal-sidebar-tab-link-color
    +border-left-radius(3px)
    &:hover
      color: #000
      cursor: pointer
      text-decoration: none
      background-color: darken($modal-sidebar-bgcolor, 5%)
  li.cmi-li.cmi-active > a.cmi-a,
  a.cmi-a.cmi-active
    color: $color-primary
    background-color: #fff