#matModal { z-index: 10000000; top:0; position: fixed; width: 100%; height: 100vh; display: table; background: rgba(0,0,0,0.5); color: #222 }
#matModal .field_focus:focus-within { border-color: #666 }
#matModal > div { display: table-cell; vertical-align: middle; padding: 1em }
#matModalContent { display: flex; flex-direction: column; padding: 1em; margin: auto; background: #fff; box-shadow: 0 0.4em 1em 0.3em rgba(0,0,0,0.6); text-align: left; height: auto; max-height: 85vh }
#matModalTitle { display: block; font-size: 1.1em; font-weight: bold }
#matModalText { margin-top: 0.3em; overflow-y: auto; display: block }
#matModalButtons { text-align: right; width: 100%; background-color: #fff }
#matModalButtons div { display: inline-block; margin-left: 1em; padding: 0.5em 1em; text-transform: uppercase; font-weight: bold; cursor: pointer; background: #ddd }
#matModalButtons div:hover { background: #aaa }
.showModal { opacity: 1; transition:opacity 0.2s ease-in }
.hideModal { opacity: 0; transition:opacity 0.2s ease-out; pointer-events: none; cursor: default }
.showModal #matModalContent { transform: scale(1); transition: transform 0.2s ease-in }
.hideModal #matModalContent { transform: scale(0.8); transition: transform 0.2s ease-out }
#matModalSpinner { display: flex; flex-direction: column; padding: 1em; margin: auto; animation-duration: 2s !important;}
#matModal a { color: #222!important; text-decoration: underline }