.bzm-content {
display: none;
}
.bzm,
.bzm * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.bzm {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
overflow-y: auto;
font: 400 16px sans-serif;
background: rgba(55, 58, 71, 0.9);
opacity: 0;
-webkit-transform: scale(0) translateZ(0);
transform: scale(0) translateZ(0);
-webkit-transition: opacity 300ms ease 300ms, -webkit-transform 0 ease 600ms;
transition: opacity 300ms ease 300ms, transform 0 ease 600ms;
-webkit-overflow-scrolling: touch;
will-change: transform;
}
.bzm--oldie {
display: none;
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.bzm--show {
opacity: 1;
-webkit-transform: scale(1) translateZ(0);
transform: scale(1) translateZ(0);
-webkit-transition: opacity 300ms ease;
transition: opacity 300ms ease;
}
.bzm--oldie-show {
display: block;
}
.bzm-dialog {
position: absolute;
right: 0;
bottom: 100%;
left: 0;
max-width: 700px;
margin: 0 auto;
color: #222;
background: #fff;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
will-change: transform;
}
.bzm--oldie .bzm-dialog {
top: 0;
bottom: auto;
}
.bzm--show .bzm-dialog {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 300ms ease 300ms;
transition: transform 300ms ease 300ms;
}
.bzm-header,
.bzm-body,
.bzm-footer {
padding: 16px;
}
.bzm-header {
border-bottom: solid 1px #ddd;
}
.bzm-footer {
border-top: solid 1px #ddd;
text-align: right;
}
.bzm-title {
margin: 0;
}
.bzm-header-close {
position: absolute;
top: 16px;
right: 16px;
width: 20px;
height: 20px;
border: 0;
overflow: hidden;
text-indent: -200px;
color: #888;
background: none;
}
.bzm-header-close:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
line-height: 1;
text-indent: 0;
content: '\00d7';
}
.bzm-header-close:hover,
.bzm-header-close:focus {
color: #222;
}
.bzm-btn {
padding: 8px 16px;
border: solid 1px #fff;
line-height: 1.4;
color: #fff;
background: #4c7eb0;
}
.bzm-btn:hover,
.bzm-btn:focus {
background: #5b98d5;
}
.bzm-btn:focus {
outline: #5b98d5 solid 1px;
}
.bzm-btn:active {
background: #4878a8;
-webkit-transform: scale(.98);
-ms-transform: scale(.98);
transform: scale(.98);
}
.bzm-disable-scroll {
height: 100%;
overflow: hidden;
}
.error{font-size: 12px;color: red}