.column-row { width: 22.222222em; } .column-container { display: flex; flex-direction: column; align-items: center; } .progress-bar { height: 0; border: solid 1px #5bc17f; display: flex; justify-content: space-between; align-items: center; width: 22em; margin: 1.388888889em auto; } .greenlock-logo-badge > img { width: 100%; } .greenlock-logo-badge { display: inline-block; border: solid 1px #d9d9d9; border-radius: 500px; width: 5.333333333em; height: 5.333333333em; margin-top: 4.277777778em; } .column-row { text-align: center; } .progress-bar-step {position: relative;margin: -0.722222222em -0.166666667em;display: inline-block;background-color: white;/* border-radius: 100%; */padding: 0 0.111111em;} .progress-bar-step > .circle { content: ""; display: inline-block; border: solid 0.111111111em #5bc17f; width: 0.888888889em; height: 0.888888889em; border-radius: 100%; background: white; } .progress-step-label { text-align: center; position: absolute; left: 50%; =: block font-size:; top: 139%; font-size: 0.722222222em; white-space: nowrap; } .progress-step-label > div { position: relative; right: 50%; } body { font-size: 18px; font-family: Source Sans Pro, sans-serif; margin: 0; line-height: 1.33; color: #1a1a1a; } .greenlock-name { color: #808080; } .js-progress-step-complete > .circle, .js-progress-step-started > .circle { background-color: #5bc17f; } .progress-bar-step.js-progress-step-complete svg { fill: white; /* stroke: none; */ display: initial; } svg {} .js-progress-step-complete > .circle {} h1 { font-size: 1.77777778em; } input[type=email], input[type=text] { font-size: 1em; padding: 0.444444444em 0.888889em; width: 100%; } .checkbox-array { display: flex; flex-direction: column; align-items: start; padding: 1em 0; } .checkbox-array input[type=checkbox] { display: none; } .checkbox-array input[type=checkbox] ~ .icon-checked-box { display: none; } .checkbox-array input[type=checkbox] ~ .icon-unchecked-box { display: initial; } .checkbox-array input[type=checkbox]:checked ~ .icon-checked-box { display: initial; } .checkbox-array input[type=checkbox]:checked ~ .icon-unchecked-box { display: none; } .checkbox-array .icon-checked-box, .checkbox-array .icon-unchecked-box { width: 1.333333333em; fill: #5bc17f; margin-right: 0.666666667em; } .checkbox-array label { display: flex; align-items: center; height: 1.333333333em; font-size: 0.833333333em; margin: 0.4em 0; } a { color: #1a1a1a; } .email-usage { color: #666666; text-align: start; font-size: 0.833333333em; margin: 2em 0; } .button-next { width: 100%; background-color: #5bc17f; border: none; font-size: 1em; color: white; padding: 0.44444em; margin: 1em 0; } .tabbed-selector label { width: 50%; padding: 0.5em 0; } .tabbed-selector { display: flex; font-weight: bold; } .tabbed-selector input[type=radio] { display: none; }