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: #fcfbfe; } body.wpo-wcpdf-setup a:link, body.wpo-wcpdf-setup a:visited { color: #6e1edc; 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: #6e1edc !important; box-shadow: 0 0 0 1px #6e1edc !important; outline: 2px solid transparent !important; color: black !important; } body.wpo-wcpdf-setup .select2-search__field:focus { border-color: unset !important; box-shadow: none !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; border-radius: 20px; box-shadow: 10px 10px 30px rgba(43, 12, 86, 0.1), -10px -10px 30px rgba(43, 12, 86, 0.02); } .wpo-plugin-title { width: 100%; padding: 50px 0 30px 0; margin: 0; text-align: center; display: block; font-weight: 200; font-size: 1.5em; } .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 a { box-shadow: none; } .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: #6e1edc; } .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; padding-bottom: 25px; } .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: #6e1edc; } li.completed .wpo-progress-marker::before { color: #fff; } .wpo-progress-bar li.completed .wpo-progress-marker { background-color: #6e1edc; border-color: #6e1edc; } .wpo-progress-bar li.active .wpo-progress-marker { border-color: #6e1edc; background-color: #fff; } .wpo-setup-content { float: left; width: 100%; overflow: hidden; } .wpo-step-description { width: 40%; float: left; padding: 30px 40px 30px 50px; box-sizing: border-box; } .wpo-step-description h2 { color: #444; font-family: serif; letter-spacing: -0.25px; font-size: 2.4em; font-style: italic; line-height: 0.9; } .wpo-step-description p { font-size: 16px; } .wpo-step-description ul { padding-left: 16px; } .wpo-setup-input { width: 60%; float: left; padding: 30px 50px; box-sizing: border-box; position: relative; border-left: 1px solid #eaeaea; } .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: #6e1edc; border: 1px solid #6e1edc; color: #fff !important; } .wpo-setup-card .wpo-button-previous, .wpo-setup-input span.button { background-color: transparent; border: 1px solid #6e1edc; color: #6e1edc; } .wpo-setup-card .wpo-button-previous:hover, .wpo-setup-input span.button:hover { background-color: #6e1edc; color: #fff !important; text-decoration: none; border-color: #6e1edc; } .wpo-setup-card .wpo-button-next:hover { background-color: transparent; color: #6e1edc !important; text-decoration: none; border-color: #6e1edc; } .wpo-setup-card .wpo-button-next:focus, .wpo-setup-card .wpo-button-previous:focus, .wpo-setup-input span.button:focus { box-shadow: none; background-color: #6e1edc; color: #fff !important; border-color: #6e1edc; } .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: #6e1edc !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; } .wpo-setup-card .wpo-skip-step:focus { box-shadow: 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 { width: 40%; padding-bottom: 20px; } .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: 25px 50px 30px; } .wpo-final h1 { font-size: 6em; line-height: 1em; font-family: serif; letter-spacing: -4px; font-style: italic; } .wpo-final h2 { letter-spacing: -1px; font-size: 2em; font-weight: lighter; padding-top: 0.8em; font-family: sans-serif; font-style: normal; } .wpo-final p { font-size: 1.3em; } .wpo-final a:hover { text-decoration: underline; } #confetti { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -999; } .select2-results__option--highlighted { background-color: #6e1edc !important; color: white !important; } .select2-container--default .select2-results__option--highlighted[aria-selected="true"] { background-color: #6e1edc !important; color: white !important; } .select2-results__option[aria-selected="true"] { background-color: #f1e9fc !important; color: #000 !important; } /* 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 } }