.msgbox { padding-top: 25px; padding-left: 40px; padding-right: 40px; padding-bottom: 25px; background: #242424; -webkit-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75); border-radius: 3px; } .msgbox.input { max-width: 500px; width: 100%; } .msgbox > .input { background: #141414; border: none; box-sizing: border-box; padding: 10px; width: 100%; } .msgbox > .msg { font-size: 16px; font-weight: bold; } .msgbox > .detail { font-size: 14px; margin: 5px 0; } .msgbox > .errors { margin-top: 20px; } .msgbox > .errors { color: #f44747; } .msgbox > .button-wrapper { display: flex; flex-direction: row; justify-content: space-between; margin-top: 20px; } .msgbox > .button-wrapper > button { flex: 1; border-radius: 2px; padding: 10px; color: white; background: #3d3d3d; border: 0px; cursor: pointer; opacity: 0.8; } .msgbox > .button-wrapper > button:hover { opacity: 1; } .msgbox > .button-wrapper > button:not(:last-child) { margin-right: 8px; } .msgbox-overlay { align-items: center; background: rgba(0, 0, 0, 0.4); bottom: 0; display: flex; justify-content: center; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: 300ms opacity ease; z-index: 15; }