@charset "ISO-8859-1";
/** Body */
* html, html, body {padding: 0; margin: 0; width: 100%; height: 100%;}
body {background: #000;}
body.action-code {background: #fff; font-family: 'Roboto', Tahoma, Arial, Verdana; font-size: 12pt; color: #444;}
.inner-wrapper,
.mat-player-wrapper,
.mat-player,
.mat-player > iframe,
.mat-player > video {padding: 0; margin:0; width: 100%; height: 100%;}
.code-container h1 {font-size: 14pt; margin: .5em 0;}
.code-container {width: 100%; max-width: 420px; margin: 0 auto; padding: 12px; box-sizing: border-box;}
.code-container .code-img {position: relative; box-shadow: 3px 3px 6px rgba(0,0,0,.4);}
.code-container .code-img:after {position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; line-height: 60px; vertical-align: middle; text-align: center; content: '\f144'; font-family: 'Font Awesome 5 Free'; font-size: 56px; color: #fff; border-radius: 30px; background: rgba(0,0,0,.05); opacity: .6;}
.code-container .code-img img {display: block; width: 100%; height: auto;}
.code-container .code-box > div {margin-top: 12px;}
.code-container label {display:block; font-size: .8rem; margin-bottom: 3px;}
.code-container select {font-size: .9rem; border: 1px solid #eee; width: 100%; height: 40px;}
.code-container textarea {display: block; height: 90px; width: 100%; box-sizing: border-box; border: 1px solid #eee; padding: 9px; font-family: fixedsys, consolas, monospace, courier, system; resize: none;}
.code-container button {padding: 1em; border: none; background: #e0e0e0; white-space: nowrap; cursor: pointer; outline: none; flex: 1; color: #666;}
.code-container .code-inputs {display: flex; flex-flow: row nowrap; justify-content: stretch; align-items: stretch;}