.dndod-wrapper {
  overflow:auto;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:9998;
  background-color:rgba(0,0,0,0);
  transition-property:background-color;
  transition-duration:.25s;
  transform:translate3d(0,0,0);

  .dndod-popup {
    position:absolute;
    top:50%;
    left:50%;
    z-index:9999;
    min-width:260px;
    max-width:100%;
    min-height:70px;
    padding:40px 50px;
    text-align:center;
    background-color:#fff;
    box-shadow:-1px 1px 5px rgba(0,0,0,.3);
    transform:translate(-50%, -50%);
    transition-property:top;
    transition-duration:.25s;

    .dndod-btn-close {
      display:block;
      overflow:hidden;
      position:absolute;
      top:3px;
      right:3px;
      width:30px;
      height:30px;
      margin:0;
      padding:0;
      border:0 none;
      font-family:sans-serif;
      font-size:2em;
      font-weight:lighter;
      line-height:1em;
      color:#c5c5c5;
      background-color:#fff;
      text-align:center;
      cursor:pointer;

      &:hover,
      &:focus{
        color:darken(#c5c5c5, 20%);
      }

      &:active {
        color:darken(#c5c5c5, 30%);
      }
    }

    .dndod-heading {
      font-size:1.4em;
      margin:0 0 20px;
    }

    .dndod-body {
      font-size:1.2em;
      line-height:1.4em;
      margin:20px 0;
    }

    &.dndod-text-left {
      text-align:left
    }

  }

  &.dndod-status-show {
    background-color:rgba(0,0,0,.3);
  }

  &.dndod-animate-from-top .dndod-popup {
    top:-50%;
  }

  &.dndod-animate-from-bottom .dndod-popup {
    top:150%;
  }

  &.dndod-animate-from-top.dndod-status-show .dndod-popup,
  &.dndod-animate-from-bottom.dndod-status-show .dndod-popup {
    top:50%;
  }

  &.dndod-oversize .dndod-popup {
    transform:translate(-50%, 0);
  }

  &.dndod-oversize.dndod-status-show .dndod-popup {
    margin:30px 0;
    top:0% !important;
    transition:none;
  }

  &.dndod-has-btn .dndod-popup {
    padding-bottom:90px;
  }

  &.dndod-no-outline .dndod-popup {
    outline:0 none;
    button {
      outline:0 none;
    }
  }

}

.dndod-custom-btn-wrapper {
  display: flex;
  position:absolute;
  left: 0;
  right:0;
  bottom:0;
  height:60px;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .dndod-btn-custom {
    flex:auto;
    width:auto;
    height:100%;
    border:0 none;
    margin:0;
    padding:0;
    font-size:1.1em;
    cursor:pointer;

    &:hover,
    &:focus{
      background-color:darken(#eaeaea, 5%);
    }

    &:active {
      background-color:darken(#eaeaea, 10%);
    }

    &.dndod-btn-default {
      background-color:#d8d8d8;
      color:#000;

      &:hover,
      &:focus{
        background-color:darken(#d8d8d8, 5%);
      }

      &:active {
        background-color:darken(#d8d8d8, 10%);
      }
    }

    &.dndod-btn-kakaobank {
      background-color:#ffde00;
      color:#000;

      &:hover,
      &:focus{
        background-color:darken(#ffde00, 5%);
      }

      &:active {
        background-color:darken(#ffde00, 10%);
      }
    }

    &.dndod-btn-primary {
      background-color:#00d1b2;
      color:#fff;

      &:hover,
      &:focus{
        background-color:darken(#00d1b2, 5%);
      }

      &:active {
        background-color:darken(#00d1b2, 10%);
      }
    }

    &.dndod-btn-danger {
      background-color:#ff3860;
      color:#fff;

      &:hover,
      &:focus{
        background-color:darken(#ff3860, 5%);
      }

      &:active {
        background-color:darken(#ff3860, 10%);
      }
    }

    &.dndod-btn-warning {
      background-color:#ffdd57;
      color:rgba(0, 0, 0, 0.7);

      &:hover,
      &:focus{
        background-color:darken(#ffdd57, 5%);
      }

      &:active {
        background-color:darken(#ffdd57, 10%);
      }
    }

    &.dndod-btn-success {
      background-color:#23d160;
      color:#fff;

      &:hover,
      &:focus{
        background-color:darken(#23d160, 5%);
      }

      &:active {
        background-color:darken(#23d160, 10%);
      }
    }

    &.dndod-btn-info {
      background-color:#209cee;
      color:#fff;

      &:hover,
      &:focus{
        background-color:darken(#209cee, 5%);
      }

      &:active {
        background-color:darken(#209cee, 10%);
      }
    }
  }
}