/* ==========================================================================
   NORMALIZE HTML5 display definitions
   ========================================================================== */

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{background:#fff;color:#000;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:dotted thin}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

/* ==========================================================================
   End Normalization, Begin Standard CSS Declarations
   ========================================================================== */

html, body {
    min-height: 100% !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

html { height: 100%; }

body { margin: 0; padding: 20px; background: #8E44AD; }
body.fullheight { height: 100%; }

img { border: 0; max-width: 100%; }

.twocols { display: table; position: relative; width: 100%; border-collapse: collapse; height: 100%; }
.twocol { display: table-cell; position: relative;  width: 50%; margin: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: top; font-size: 12px; line-height: auto; height: 100%; }

.twocol:first-child { padding: 0px 10px 0px 0px; }
.twocol:nth-child(2n-2) { padding: 0px 0px 0px 10px; }

.fourcols { font-size: 0px; text-align: center; }
.fourcol { display: inline-block; width: 23.5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-right: 2%; vertical-align: top;  }
.fourcol:nth-child(4n-4), .fourcol:last-child { margin-right: 0px; }

.fivecols { font-size: 0px; text-align: center; }
.fivecol { display: inline-block; width: 19%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-right: 1.25%; vertical-align: top;  }
.fivecol:nth-child(5n-5), .fivecol:last-child { margin-right: 0px; }

.fourcol, .fivecol { font-size: 14px; line-height: 120%; }

.FullHeight { height:100%; display:inline-block; width: 100%; }

.fullwidth { width: 100%; }

.centered { text-align: center; }

.TopPartHTML { display: none; }

.HTMLEditor, .LiveHTMLPreview { position: relative; width: 100%; height: 100%; min-height: 400px; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.HTMLEditor, .HTMLTextEditor { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Courier New", "Courier", sans-serif; font-size: 12px; line-height: 120%; }

.LiveHTMLPreview { background: #fff; border: 1px solid #000; overflow: scroll; font: 14px/18px serif; }

.page { position: relative; width: 1000px; max-width: 100%; margin: 0px auto; padding: 20px; background: #fff; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

.page.fullwidth { width: 100%; height: 100%; overflow-y: scroll; }

.page.fullwidth form { height: 77%; }

.page h1 { text-align: center; line-height: 120%; }

.page label { cursor: pointer; }

.buttoncontainer { margin: 40px 0px 0px 0px; padding: 0px 0px 20px 0px; text-align: center; }
.buttoncontainer::after { content: ' '; position: relative; display: block; clear: both; }

.PrevButton { float: left; }
.NextButton { float: right; }

.page button, .page input[type=submit] { background: #8E44AD; color: #fff; border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; padding: 18px 36px; border: 0px; box-shadow: 3px 3px 6px #000; font-size: 18px; font-weight: bold; }

.page button.primary, .page input[type=submit].primary { background: #FF6F3D;  }

.page button:hover, .page input[type=submit]:hover { box-shadow: inset 2px 2px 6px #000; }



.page .ClientSelectContainer { display: block; position: relative; font-size: 0px; /* overflow-x: scroll; overflow-y: hidden; white-space: nowrap; */ }

.page .ClientSelectRadio { display: inline-block; width: 18%; margin-right: 2.5%; font-size: 16px; }

.page .ClientSelectRadio:nth-child(5n-5), .page .ClientSelectRadio:last-child { margin-right: 0px; }


.page .ClientSelectContainer input[type=radio] { display: none; }
.page .ClientSelectContainer input[type=radio] +label { display: block; vertical-align: middle; background: #fff; margin: 0px 0px 0px 0px; padding: 10px; text-align: center; }
.page .ClientSelectContainer:last-child input[type=radio] +label { margin: 0px; }
.page .ClientSelectContainer input[type=radio]:checked +label { background: #ededed; background: #FF6F3D; }

.page .ClientSelectContainer input[type=radio] +label img { display: block; vertical-align: middle; margin: 0px auto; padding: 0px 5px 0px 0px; }

.NextButton.InputStage0:not(.nojs), .NextButton.InputStage1:not(.nojs) { display: none; }

.ADParentContainer h3 { text-align: center; color: #fff; background: #8e44ad; margin: 5px auto; padding: 15px; cursor: pointer; }
.ADParentContainer h3:hover, .ADParentContainer.active h3 { background: #FF6F3D; }

.ADTemplateSelectCols { margin-bottom: 25px; }
.ADTemplateSelectCols .fourcol, .ADTemplateSelectCols .fivecol { text-align: center; }
.ADTemplateSelectCols input[type=radio] { display: none; }
.ADTemplateSelectCols input[type=radio] +label { display: block; }
.ADTemplateSelectCols input[type=radio] +label:hover { background: #FF6F3D; color: #fff; }

input#BlankTemplateRadio { display: none; }
input#BlankTemplateRadio +label { display: inline-block; margin: 10px auto; padding: 20px; background: #ededed; border: 1px solid #8e44ad; }
input#BlankTemplateRadio +label:hover { background: #FF6F3D; color: #fff; }


.copyable { position: relative; }
.CopyToClipboard { position: absolute; right: 10px; top: 10px; padding: 5px 10px; background: #000; color: #fff; opacity: .56; cursor: pointer; font-size: 13px; text-transform: uppercase; font-weight: bold; font-family: arial, sans-serif; }
.CopyToClipboard:hover { opacity: 1; }
.CopyToClipboard.LastCopied { background: #008800; }
.CopyToClipboard::after { content: 'copy'; }
.CopyToClipboard.LastCopied::after { content: 'last copied'; }

table.FinalizedOutputSteps { width: 100%; }
table.FinalizedOutputSteps tr:nth-child(even) { background: #ededed; }
table.FinalizedOutputSteps tr td { width: 50%; padding: 0px 20px; }
table.FinalizedOutputSteps tr td:first-child { text-align: right; }

table.FinalizedOutputSteps tr td input[type=text], table.FinalizedOutputSteps tr td textarea { width: 100%; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

table.FinalizedOutputSteps tr td input[type=text] { height: 45px; }


div.StatusResponseIcon { width: 52px; height: 52px; background-size: contain; }
div.StatusResponseIcon.success { background: url(images/success-icon-52.png); }
div.StatusResponseIcon.failure { background: url(images/failure-icon-52.png); }
div.StatusResponseIcon.warning { background: url(images/warning-icon-52.png); }


.hidden-textarea { display: none; }


@media(max-width:639px) {

.page .ClientSelectContainer { text-align: center; }
.page .ClientSelectRadio { width: auto; }
.page .ClientSelectRadio:nth-child(5n-5) { margin-right: 2.5%; }
.page .ClientSelectRadio:last-child { margin-right: 0px; }


}