html.wpo-wizard { margin: 0; padding: 0; width: 100%; height: 100%; background: transparent; } body.wpo-wcpdf-setup { border: none; padding: 0; margin: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-attachment: fixed!important; font-size: 14px; line-height: 22px; background: #771787; background: -webkit-linear-gradient(10deg, #3c105d, #771787); background: -o-linear-gradient(10deg, #3c105d, #771787); background: linear-gradient(100deg, #3c105d, #771787); } body.wpo-wcpdf-setup a:link, body.wpo-wcpdf-setup a:visited { color: #771787; text-decoration: none; } body.wpo-wcpdf-setup a:hover { text-decoration: underline; } body.wpo-wcpdf-setup input:focus, body.wpo-wcpdf-setup textarea:focus, body.wpo-wcpdf-setup select:focus { border-color: #239bb9!important; box-shadow: 0 0 0 1px #239bb9!important; outline: 2px solid transparent!important; color: black!important; } body.wpo-wcpdf-setup select:hover { color: #666!important; } body.wpo-wcpdf-setup h1, body.wpo-wcpdf-setup h2 { border: none; margin: 0; color: #000; } body.wpo-wcpdf-setup form { width: 80%; max-width: 900px; position: absolute; left: 50%; transform: translate(-50%, 0); padding: 80px 15px 100px 15px; } .wpo-setup-card { display: block; background-color: #fff; padding: 0; overflow: hidden; box-shadow: 0 20px 50px 20px rgba(0,0,0,0.2); } .wpo-plugin-title { width: 100%; padding: 40px 0 30px 0; margin: 0; text-align: center; display: block; font-weight: 200; } .wpo-progress-bar { width: 100%; overflow: hidden; list-style: none; box-sizing: border-box; padding: 0; } .wpo-progress-bar li { width: 12.5%; float: left; box-sizing: border-box; position: relative; padding: 0; margin: 0; } .wpo-progress-bar li:first-child { width: calc( ( 12.5% - ( 12.5% - 35px ) ) / 2 + 12.5% ); } .wpo-progress-bar li::after { content: ''; display: block; height: 2px; width: 100%; background-color:#eaeaea; position: absolute; top: calc( 50% - 1px ); right: 0; } .wpo-progress-bar li:first-child::after { display: none; } .wpo-progress-bar li.active::after, .wpo-progress-bar li.completed::after { background-color: #771787; } .wpo-progress-marker { height: 35px; width: 35px; background-color: #eaeaea; border: 2px solid #eaeaea; border-radius: 50%; position: relative; z-index: 1; float: right; box-sizing: border-box; } .wpo-progress-bar { counter-reset: section; } .wpo-progress-marker::before { counter-increment: section; content: counter(section); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #999; } li.active .wpo-progress-marker::before { color: #771787; } li.completed .wpo-progress-marker::before { color: #fff; } .wpo-progress-bar li.completed .wpo-progress-marker { background-color: #771787; border-color: #771787; } .wpo-progress-bar li.active .wpo-progress-marker { border-color: #771787; background-color: #fff; } .wpo-setup-content { float: left; width: 100%; overflow: hidden; } .wpo-step-description { width: 50%; float: left; padding: 50px; box-sizing: border-box; } .wpo-step-description ul { padding-left: 16px; } .wpo-setup-input { width: 50%; float: left; padding: 50px 50px 50px 0; box-sizing: border-box; position: relative; } .wpo-setup-input select { width: 100%; } .wpo-setup-buttons { width: 100%; float: left; padding: 0px 50px 50px 50px; box-sizing: border-box; } .wpo-setup-card .wpo-button-next, .wpo-setup-card .wpo-button-previous, .wpo-setup-card .wpo-skip-step, .wpo-setup-card .wpo-setup-input span.button { padding: 0.5em 1.2em; border-radius: 3px; box-sizing: border-box; font-size: 1em; text-decoration: none; cursor: pointer; font-size: 1.2em; box-sizing: border-box; } .wpo-setup-card .wpo-button-next { background-color: #1c6c8b; border: 1px solid #1c6c8b; color: #fff!important; } .wpo-setup-card .wpo-button-previous, .wpo-setup-input span.button { background-color: transparent; border: 1px solid #1c6c8b; color: #1c6c8b; } .wpo-setup-card .wpo-button-next:hover, .wpo-setup-card .wpo-button-previous:hover, .wpo-setup-input span.button:hover { background-color: #239bb9; color: #fff!important; text-decoration: none; border-color: #239bb9; } .wpo-setup-card .wpo-button-next:focus, .wpo-setup-card .wpo-button-previous:focus, .wpo-setup-input span.button:focus { background-color: #239bb9; color: #fff!important; border-color: #239bb9; } .wpo-setup-card .wpo-button-next, .wpo-setup-card .wpo-skip-step { float: right; margin-left: 10px; } .wpo-setup-card .wpo-button-previous { float: left; color: #1c6c8b!important; } .wpo-setup-card .wpo-skip-step { background-color: transparent; color: #666!important; font-weight: 200; border: 2px solid transparent; } .wpo-setup-card .wpo-skip-step:hover { color: #000!important; text-decoration: none; } /* Shop address */ .wpo-setup-input .shop-name { width: 100%; height: 40px; padding: 10px 15px; box-sizing: border-box; font-size: 1.2em; margin-bottom: 20px; } .wpo-setup-input .shop-address { width: 100%; height: 200px; padding: 15px 15px; font-size: 1.2em; line-height: 1.4em; box-sizing: border-box; border: 1px solid #8c8f94; resize: none; float: left; margin: 0; text-align: left!important; } /* Your logo */ .wpo-setup-input #img-header_logo { width: 100%; height: auto; background: transparent; margin-bottom: 20px; padding: 20px; box-sizing: border-box; position: relative; border: 1px solid #8c8f94; } .wpo-setup-input #logo-preview img { height: 80%; position: absolute; left: 50%; transform: translate(-50%, 0%); } .wpo-setup-card .wpo-setup-input span.button { font-size: 0.9em; padding: 0.2em 0.8em; margin: 0 10px 10px 0; } .attachment-resolution-warning p { font-size: 0.9em; line-height: 1.4em; font-style: italic; color: #999; padding-bottom: 10px; } /* Attach to */ .wpo-setup-input table th, .wpo-setup-input table td, .wpo-setup-input table td label { vertical-align: top; padding: 0; } .wpo-setup-input table th label { font-weight: normal; } .wpo-setup-input label:hover { color: #666; } .wpo-setup-input table th, .wpo-setup-input table td { padding-bottom: 5px; } .wpo-setup-input input[type=checkbox] { background-color: #fff; border: 1px solid #cacece; border-radius: 2px; vertical-align: text-bottom; margin-right: 20px; } .wpo-setup-input .checkbox { font-size: 1.1em; } /* Good to go */ .wpo-final { text-align: center; width: 100%; padding: 50px; } .wpo-final h1 { font-size: 3em; line-height: 1em; } .wpo-final a:hover { text-decoration: underline; } #confetti { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -999; } /* Portrait tablets and small desktops */ @media (min-width: 768px) and (max-width: 991px) { body.wpo-wcpdf-setup form { width: 90%; } } /* Landscape phones and portrait tablets */ @media (max-width: 767px) { body { background: white!important; } body.wpo-wcpdf-setup form { width: 100%; padding-top: 30px; } .wpo-setup-card { box-shadow: none; } .wpo-progress-bar { padding: 0 0 25px 0; } .wpo-step-description, .wpo-setup-input, .wpo-setup-buttons { width: 100%; padding: 15px 25px; } .wpo-setup-card .wpo-button-next, .wpo-setup-card .wpo-button-previous, .wpo-setup-card .wpo-skip-step { padding: 0.5em 0.8em; } .wpo-progress-marker { height: 28px; width: 28px; font-size: 0.8em; } #confetti { display: none } }