.oc-dialog { background: #fff; color: #333; border-radius: 3px; box-shadow: 0 0 7px #888; padding: 15px; z-index: 10000; font-size: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-width: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: calc(100% - 20px); max-width: calc(100% - 20px); overflow: auto; } .oc-dialog-title { background: #fff; margin-left: 12px; } .oc-dialog-buttonrow { position: relative; display: block; background: transparent; right: 0; bottom: 0; padding: 10px; padding-bottom: 0; box-sizing: border-box; width: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } /* align primary button to right, other buttons to left */ .oc-dialog-buttonrow.twobuttons button:nth-child(1) { float: left; } .oc-dialog-buttonrow.twobuttons button:nth-child(2) { float: right; } .oc-dialog-buttonrow.onebutton button { float: right; } .oc-dialog-buttonrow:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .oc-dialog-close { position: absolute; top: 0; right: 0; padding: 25px; background: url('../img/actions/close.svg') no-repeat center; } .oc-dialog-dim { background-color: #000; opacity: .20; z-index: 999; position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .oc-dialog-content { width: 100%; }