body.cmi-flex-modal-open

overflow: hidden

// base modal structure .cmi-flex-modal, .cmi-flex-modal-dialog, .cmi-flex-modal-dialog-inner, .cmi-flex-modal-dialog > header.cmi-header, .cmi-flex-modal-dialog > main.cmi-main, .cmi-flex-modal-dialog > footer.cmi-footer .cmi-flex-modal-dialog-inner > header.cmi-header, .cmi-flex-modal-dialog-inner > main.cmi-main, .cmi-flex-modal-dialog-inner > footer.cmi-footer

+box-sizing(border-box)

.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

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

.cmi-flex-modal-dialog

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

.cmi-flex-modal-dialog

> header.cmi-header,
> main.cmi-main,
> footer.cmi-footer
  position: relative

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

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

> main.cmi-main
  +display(flex)
  +flex-direction(row)
  +flex-shrink(1)
  +backface-visibility(hidden)
  +flex-wrap(nowrap)
  display: -ms-flexbox
  display: ms-flexbox
  -ms-flex-direction: row
  -ms-flex-pack: justify
  -ms-flex-align: stretch
  -ms-flex-line-pack: stretch
  overflow: scroll
  overflow-x: hidden
  overflow-y: scroll
  z-index: 1
  width: 100%
  max-height: 100vh
  margin-top: -$modal-header-height
  padding-top: $modal-header-height
  margin-bottom: -$modal-footer-height
  padding-bottom: $modal-footer-height - 1px
  background-color: $modal-main-bgcolor
  will-change: overflow

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

> main.cmi-main
  > aside.cmi-aside,
  > section.cmi-section
    position: relative
    overflow: auto
    height: auto
    -webkit-overflow-scrolling: touch
    -ms-overflow-style: none

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

  > .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-btn.cmi-flex-modal-back
  margin-right: 8px

.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
  position: relative
  overflow: hidden
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