body {
background-color: #ccc;
}
@media screen and (max-width: 767px) {
.dkKbModalDialog {
width: auto;
margin: 5px;
}
}
@media screen and (min-width: 768px) {
.dkKbModalDialog {
width: 744px;
margin: 30px auto;
}
}
.dkKbModalOpen {
overflow: hidden;
}
.dkKbModalOverlay {
position: fixed;
z-index: 9000;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000;
}
.dkKbModalOverlay.dkKbFade {
opacity: 0;
-webkit-transition: opacity 150ms linear;
-moz-transition: opacity 150ms linear;
-o-transition: opacity 150ms linear;
transition: opacity 150ms linear;
filter: alpha(opacity=0); /* IE8 */
}
.dkKbModalOverlay.dkKbShown {
opacity: .8;
filter: alpha(opacity=80); /* IE8 */
}
.dkKbModalOuterContainer {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9010;
overflow: auto;
display: none;
}
.dkKbModalContainer {
box-sizing: border-box;
}
.dkKbModalContainer .dkKbModalDialog {
z-index: 9900;
}
.dkKbModalContainer.dkKbFade {
opacity: 0;
-webkit-transition: opacity 150ms linear;
-moz-transition: opacity 150ms linear;
-o-transition: opacity 150ms linear;
transition: opacity 150ms linear;
filter: alpha(opacity=0); /* IE8 */
}
.dkKbModalContainer.dkKbShown {
opacity: 1;
}
.dkKbModalDialog {
position: relative;
background-color: #eee;
border: 1px solid #000;
border-radius: 5px;
padding: 10px;
}
.dkKbModalHeader {
margin-top: .5em;
}
.dkKbModalBody {
overflow: auto;
}
.dkKbModalContainer.dkKbFade .dkKbModalDialog {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform 300ms ease-out;
-moz-transition: -moz-transform 300ms ease-out;
-o-transition: -o-transform 300ms ease-out;
transition: transform 300ms ease-out;
}
.dkKbModalContainer.dkKbShown .dkKbModalDialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.dkKbCloseButton {
float: right;
margin: 10px;
margin-top: -2px;
cursor: pointer;
font-size: 120%;
-webkit-appearance: none;
border: 0;
color: #000;
opacity: .2;
 filter:alpha(opacity:50);
background: transparent;
font-weight: bold;
}
