body { background: #999; font-size: 16px; color: #fff; -webkit-tap-highlight-color: transparent }
body, div, h1, h2, h3, ul, li, .nmp { margin: 0; padding: 0 }
a { text-decoration: none; color: #fff }
a:hover, a:active { text-decoration: underline }
.wrap { background: #fff; max-width: 820px; margin: 0 auto }
.row { padding: 6px 6px }
.img { padding: 2px; border: 1px solid #eee; border-radius: 5px; display: inline-block }
.img img { display: block }
.pull-left { float: left }
.pull-right { float: right }
.bgloading { background: url('loading.gif') no-repeat center center }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.gray, a.gray { color: #999; opacity: 0.8 }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding:0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0
}


/**
 * @xdebug-var-dump
 */
pre.xdebug-var-dump {
  width: 96%; margin: 10px auto; padding: 10px; background: #fff;
  border: 1px solid #ccc; border-radius: 5px
}
/**
 * alert dialog-modal
 */
.overflow { overflow: hidden; height: 100% }
.dialog-modal-mask {
  width:100%; height:100%; display: none; position: fixed;
  left:0; top:0; background: rgba(0, 0, 0, 0.8); z-index: 2222
}
#dialog-mask-toast,
#dialog-mask-loading { background: rgba(0, 0, 0, 0.8) }
.dialog-modal {
  position: fixed; z-index:3333; display: none; left:0; right:0;
  margin: auto; top: 50%; transform-origin: center; max-width: 80%; max-height: 80%;
  background: #fff; border-radius: 10px; overflow: hidden
}
.dialog-modal.dialog-modal-model { width: 400px }
.dialog-modal.dialog-modal-success,
.dialog-modal.dialog-modal-error { padding: 20px 12px; width:140px }
.dialog-modal.dialog-modal-toast {
  padding: 8px; max-width: 290px; background: rgba(0, 0, 0, 0.8)
}
.dialog-modal.dialog-modal-toast .dialog-modal-text { padding: 0; color: #fff; letter-spacing: 1px }
.dialog-modal.dialog-modal-loading { padding:20px 12px; width: 100px; background: rgba(0,0,0,0.8) }
.dialog-modal.dialog-modal-loading .dialog-modal-text { padding:0; color:#fff }
.dialog-modal .dialog-modal-load {
  display: flex; align-items: center; padding-top:10px;
  margin-bottom: 15px; justify-content: center
}
.dialog-modal .dialog-modal-load span {
  width: 6px; animation: dialog-alert-load 1s ease infinite;
  transform: translateY(10px); animation-delay:0.1s; margin:0 5px;
  height: 6px; opacity: 0; border-radius: 6px; background: #fff
}
.dialog-modal .dialog-modal-load span:nth-child(2) { animation-delay: 0.2s }
.dialog-modal .dialog-modal-load span:nth-child(3) { animation-delay: 0.3s }
.dialog-modal .dialog-modal-title {
  padding: 8px 0 0 8px; color: #f69; font-weight: bold; text-align: center; letter-spacing: 8px
}
.dialog-modal .dialog-modal-text {
  text-align: center; color: #333; line-height: 180%; padding: 20px 0
}
.dialog-modal.dialog-modal-success .dialog-modal-text,
.dialog-modal.dialog-modal-error .dialog-modal-text {
  color: #f69; padding: 0; opacity: 0; transform: translateY(10px);
  animation: dialog-alert-text 0.3s ease forwards; animation-delay: 0.9s
}
.dialog-modal .dialog-modal-content {
  padding-top: 0; overflow: hidden auto; max-height: 80%
}
.dialog-modal .dialog-modal-btn {
  display: flex; align-items: center; justify-content: center;
  background: #eee; border-top: 1px solid #ccc; min-height: 35px
}
.dialog-modal .dialog-modal-btn button {
  flex: 1; color: #999; cursor: pointer; border:0; background: none;
  border-right: 1px solid #eee; letter-spacing: 2px; padding: 10px 0
}
.dialog-modal .dialog-modal-btn button:last-child { color:#333; border-right: none }
.dialog-modal .dialog-modal-btn button.cancel { }
.dialog-modal .dialog-modal-btn button:hover,
.dialog-modal .dialog-modal-btn button:active { font-weight: bold }
.dialog-ani-open { animation: dialog-open 0.2s ease forwards }
.dialog-ani-close { animation: dialog-close 0.3s ease forwards }