@charset "UTF-8";
/**
 *
 * 五个等级颜色
 * 第一等级：表单元素里 字 的颜色
 * 第二等级：
 * 第三等级：表单元素边框颜色，如输入框、下拉框的border颜色
 * 第四等级：表单元素placeholder颜色
 * 第五等级：
 *
 */
/**
 * z-index
 */
.lanaya-dialog {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9000; }
  .lanaya-dialog__background {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.5;
    background: #000;
    z-index: 9001; }
  .lanaya-dialog__wrapper {
    background: #fff;
    position: relative;
    z-index: 9002;
    margin: 60px auto 0;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 3px #ccc;
            box-shadow: 0 0 3px #ccc; }
    @media screen and (max-width: 700px) {
      .lanaya-dialog__wrapper {
        width: 450px; } }
    @media screen and (max-width: 980px) {
      .lanaya-dialog__wrapper {
        width: 550px; } }
    @media screen and (min-width: 981px) {
      .lanaya-dialog__wrapper {
        width: 640px; } }
    .lanaya-dialog__wrapper__header {
      padding: 15px;
      font-size: 20px;
      font-weight: bold;
      border-bottom: 1px solid #888;
      position: relative;
      color: #222; }
      .lanaya-dialog__wrapper__header__close {
        right: 20px;
        position: absolute;
        color: #888; }
        .lanaya-dialog__wrapper__header__close:hover {
          color: #222;
          cursor: pointer; }
    .lanaya-dialog__wrapper__body {
      padding: 15px;
      color: #222; }
    .lanaya-dialog__wrapper__footer {
      padding: 15px;
      border-top: 1px solid #888;
      text-align: right;
      color: #222; }

.dialog-enter-active {
  -webkit-animation: dialog-enter 0.3s ease-in-out;
          animation: dialog-enter 0.3s ease-in-out; }

.dialog-leave-active {
  animation: dialog-enter 0.3s reverse ease-in-out; }

@-webkit-keyframes dialog-enter {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes dialog-enter {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }