.ksl-assets-modal *, .ksl-assets-modal *:after, .ksl-assets-modal *:before,
.ddm-modal *, .ddm-modal *:after, .ddm-modal *:before {
  box-sizing: inherit; }

.ksl-assets-modal,
.ddm-modal {
  box-sizing: border-box;
  position: fixed;
  top: -100%;
  left: 0;
  z-index: 400;
  display: block;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 3.125%;
  padding-bottom: 0;
  border-radius: 0;
  /* inline png for rgba fallback generated from http://1x1px.me/000000-0.6.png and converted at http://webcodertools.com/imagetobase64converter */
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNimAkAAKIAnNwSwMYAAAAASUVORK5CYII=) repeat;
  background: rgba(0, 0, 0, 0.6);
  /* create transition effect */
  opacity: 0;
  -webkit-transition: opacity .3s, top 0s .3s;
          transition: opacity .3s, top 0s .3s; }

/* hack padding-bottom using pseudo element for ie8 */
.ksl-assets-modal:after,
.ddm-modal:after {
  content: "";
  display: block;
  height: 0;
  margin: 0 -3.125%;
  padding-bottom: 3.125%; }

.ksl-assets-modal.modal-open,
.ddm-modal--open {
  opacity: 1;
  top: 0;
  -webkit-transition: opacity .3s;
          transition: opacity .3s; }

.ksl-assets-modal > .inner,
.ddm-modal__inner {
  min-width: 300px;
  max-width: 600px;
  width: 93.75%;
  width: calc(100% - 20px);
  margin: 0 auto;
  box-shadow: 0 0 16px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
  /* create transition */
  top: -50%;
  -webkit-transition: top .3s;
          transition: top .3s; }

.ksl-assets-modal.modal-open > .inner,
.ddm-modal--open > .ddm-modal__inner {
  top: 0; }

.ksl-assets-modal .inner > *,
.ddm-modal__inner > * {
  background-color: #fff;
  padding: 0 20px;
  margin: 0; }

.ksl-assets-modal .inner > :first-child,
.ddm-modal__inner > :first-child {
  border-radius: 6px 6px 0 0; }

.ksl-assets-modal .inner > :last-child,
.ddm-modal__inner > :last-child {
  border-radius: 0 0 6px 6px; }

.ksl-assets-modal > .inner > .head,
.ddm-modal__head {
  background-color: #5b92f4;
  color: #fff;
  height: 50px;
  line-height: 50px;
  border-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0; }

.ksl-assets-modal > .inner > .head > .title,
.ddm-modal__title {
  margin: 0;
  vertical-align: middle;
  font-size: 18px;
  font-family: raleway, Arial, sans-serif;
  color: #fff;
  font-weight: bold;
  text-align: left; }

.ksl-assets-modal > .inner > .head > .modal-toggle,
.ddm-modal__head > .modal-toggle {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  text-align: center;
  cursor: pointer; }

.ksl-assets-modal > .inner > .body,
.ddm-modal__body {
  padding-top: 10px;
  overflow: auto;
  /* force to wrap margin of children */ }

.ksl-assets-modal > .inner > .body > :first-child,
.ddm-modal__body > :first-child {
  margin-top: 0; }

.ksl-assets-modal > .inner > .body > :last-child,
.ddm-modal__body > :last-child {
  margin-bottom: 0; }

.ksl-assets-modal > .inner > .foot,
.ddm-modal__foot {
  padding: 20px;
  text-align: center; }