/* dialog 样式 */
.dialog-mask {position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.1); z-index: 100000000000; text-align: center;}
.dialog-mask::before {content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle;}
.dialog-mask .dialog__dom { width: 60%; background-color: #fff; border-radius: 4px; color: #333; vertical-align: middle; display: inline-block; position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); }
.dialog-mask .dialog__dom { background: url('../images/dialog_bg.png') no-repeat center; background-size: 100% 100%; }
.dialog-mask .dialog-title {display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; color: #333;}
.dialog-mask .dialog-title .drag_handle {flex-grow: 1; flex-shrink: 1; height: 50px; cursor: move; margin-top: 2px;}
.dialog-mask .dialog-title .drag_handle:hover {background-color: rgba(243, 95, 95, 0.1);}
.dialog-mask .dialog-title .title {margin: 0; font-size: 16px; padding: 10px; display: flex; align-items: center;}
.dialog-mask .dialog-title .title img{width: 32px; height: auto; vertical-align: middle; margin: 0 12px;}
.dialog-mask .dialog-title .title_right {display: flex; justify-content: center; align-items: center;}
.dialog-mask .dialog-title .dialog-close {display: inline-block; padding: 5px 10px;border: 1px solid transparent; line-height: 1;font-size: 16px; cursor: pointer; color: rgba(60, 122, 236, 0.8);}
.dialog-mask .dialog-title .dialog-close {
  background: url(../images/dialog_close.png) no-repeat; background-size: 100% 100%;
  border: 0;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  margin-right: 8px;
}
.dialog-mask .dialog-title .fullScreen {
  display: inline-block;
  cursor: pointer;
  width: 26px;
  height: 26px;
  background: url(../images/dialog_screen.png) no-repeat; background-size: 100% 100%;
  margin-right: 6px;
  border: 1px solid transparent;
}
.dialog-mask .dialog-title .fullScreen.active {background: url(../images/shrinkage.png) no-repeat; background-size: 100% 100%;}
/* .dialog-mask .dialog-title .dialog-close:hover {border: 1px solid rgba(60, 122, 236, 0.3); background-color: #f5f5f5; border-radius: 4px; color: rgb(60, 122, 236);} */
.dialog-mask .dialog-title .dialog-close:hover, .dialog-mask .dialog-title .fullScreen:hover {border: 1px solid rgba(60, 122, 236, 0.3);}

.dialog-mask .dialog-body {padding: 0 20px; text-align: left;}
.dialog-body .form {display: flex;}
.dialog-body .form label {flex-shrink: 0; margin-right: 12px;}
.dialog-body .form textarea {flex-shrink: 1; width: 100%; padding: 10px;}

.dialog-mask .dialog-footer {padding: 10px 20px; text-align: center; margin: 6px 0 12px;}
/* .dialog-mask .dialog-footer button {font-size: 12px; padding: 6px 20px; border: 1px solid rgb(60, 122, 236); border-radius: 4px; color: rgb(60, 122, 236); background-color: rgba(60, 122, 236, 0.1);} */
.dialog-mask .dialog-footer button {font-size: 16px; padding: 8px 20px; border: 0; color: #fff; background-color: rgba(60, 122, 236, 0.1);}
.dialog-mask .dialog-footer button {background: url('../images/dialog_btn1.png') no-repeat; background-size: 100% 100%;}
.dialog-mask .dialog-footer button + button {margin-left: 12px;}
/* .dialog-mask .dialog-footer button:hover { background-color: rgba(60, 122, 236, 0.3); } */
.dialog-mask .dialog-footer button:hover { background: url('../images/dialog_btn2.png') no-repeat; background-size: 100% 100%; }
.dialog-mask .dialog-footer button.dialog-cancel {border-color: rgb(219, 218, 220); color: #fff; background-color: rgb(219, 218, 220, 0.1);}
.dialog-mask .dialog-footer button.dialog-cancel:hover {background-color: rgb(219, 218, 220, 0.3); color: #f5f5f5;}

.fullscreen.dialog-mask .dialog__dom{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 100% !important;
}

/* .fullscreen.dialog-mask .dialog__dom .dialog-body, */
.fullscreen.dialog-mask .dialog__dom .preview
/* .fullscreen.dialog-mask .dialog__dom .preview video  */
{
  height: 100%;
}

.fullscreen.dialog-mask .body_main_dom {
  position: relative;
}

.fullscreen.dialog-mask .dialog__dom .dialog-title,
.fullscreen.dialog-mask .dialog__dom .dialog-footer
 {
  flex-shrink: 0;
}
.fullscreen.dialog-mask .dialog__dom .dialog-body {
  flex-shrink: 1;
  flex-grow: 1;
  height: 50%;
}