:root {
  --active-theme-color: #3989C9;
  --disabled-theme-color: #888787;
  /* Converted via https://codepen.io/sosuke/pen/Pjoqqp */
  --active-theme-color-svg: invert(73%) sepia(72%) saturate(4745%) hue-rotate(182deg) brightness(84%) contrast(85%);
  --formrow-margin: 1.5em;
}

main {
  width: auto;  /* override fixed 1000px width from wp_migration.css */
}

select, select[is] {
  background-color: transparent;
  color: black;
  /* Force select elements to be squared on Chrome */
  border-radius: 0;
  -webkit-appearance: none;
  background-image: url(data:image/png;base64,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czp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTgtMDctMjdUMDc6NTY6NDctMDc6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE4LTA3LTI3VDA3OjU5OjA4LTA3OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE4LTA3LTI3VDA3OjU5OjA4LTA3OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9IkRpc3BsYXkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OWVmMTg3ZTUtMWVmNy00NzlhLWE1Y2QtMmVkMTE5NjQ2Y2ZmIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6MTRmNTk5YTMtYTc1Zi05NDQxLTk3ZDQtMmY3OTNjNWQ3NTI3IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6M2FmYmY3ZWYtNWFiOS00MTk4LWFjODUtNzY2NzE2NDk2ODM1Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDozYWZiZjdlZi01YWI5LTQxOTgtYWM4NS03NjY3MTY0OTY4MzUiIHN0RXZ0OndoZW49IjIwMTgtMDctMjdUMDc6NTY6NDctMDc6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChNYWNpbnRvc2gpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo5ZWYxODdlNS0xZWY3LTQ3OWEtYTVjZC0yZWQxMTk2NDZjZmYiIHN0RXZ0OndoZW49IjIwMTgtMDctMjdUMDc6NTk6MDgtMDc6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pr46tjAAAACBSURBVCjPY/j//z8DOgaCVVjFsSgMB2IQIxuvYiBgBuJHUMXfgVgCn+I+qEIYXoxVMRBYoymEYX9sio/hUHz79+/fCMVAUIxDIQy3Q9UxyAPxPwKKQdgEHKZAfI4IvJ8BW+DjwoNFMUkeJCnoSIoUkqOb5IREUhIlOfGTlK0IZVgAkODRpD7i30MAAAAASUVORK5CYII=);
  background-position: calc(100% - 4px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 11px;
}

input ~ .inputmessage, select ~ .inputmessage, textarea ~ .inputmessage {
  font-style: italic;
  font-size: 87.5%;
}

input[type="checkbox"] {
  outline: none !important;  /* drop the annoying Windows-specific rendering outline */
}

.su-header-main {
  color: var(--active-theme-color);
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 36px;
  line-height: 54px;
}
.su-header-sub {
  color: #343333;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 27px;
}

.su-allfieldsrequired-notice {
  color: var(--disabled-theme-color);
}

.su-form-section-header {
  font-size: 140%;
  font-weight: bold;
}

.su-personalinfo-steps {
  font-size: 110%;
}
.su-personalinfo-steps-1 {
  margin-right: 0.5em;
  font-weight: bold;
  color: var(--active-theme-color);
}
.su-personalinfo-steps-1 span:first-child {  /* 1 with a circle around it */
  display: inline-block;
  width: 1.5em;
  padding-left: 0.55em;
  border-width: 1px;
  border-style: solid;
  border-color: var(--active-theme-color);
  border-radius: 50%;
}
.su-personalinfo-steps-1 span:last-child {
  padding-left: 0.25em;
}
.su-personalinfo-steps-sep {
  display: none;
}
.su-personalinfo-steps-2 {
  color: var(--disabled-theme-color);
}
.su-personalinfo-steps-2:before {
  background-color: #A3CD3A;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 6em;
  margin-right: 0.5em;
}
.su-personalinfo-steps-2 span:first-child {  /* 2 with a circle around it */
  display: inline-block;
  width: 1.5em;
  padding-left: 0.4em;
  border-width: 1px;
  border-style: solid;
  border-color: var(--disabled-theme-color);
  border-radius: 50%;
}
.su-personalinfo-steps2 span:last-child {
  padding-left: 0.25em;
}

.su-body-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.su-body-container-left {
  border-right: 1px solid lightgray;
  padding-right: 2em;
  min-width: 65%;
  flex: 3;
}

.su-body-container-right {
  flex: 1;
  border-left: none;
  border-right: none;
  border-bottom: none;
  padding-left: 1em;
  padding-right: 0;
  padding-bottom: 0;
}

.su-accountinfo {
  display: none;  /* hide until they get to step 2 */
}

.su-alert {
  margin: 0 !important;
  display: flex;
  justify-content: center;
  flex-direction: column;
  list-style-type: none;
}

.su-body-container-left input {
  border: 1px solid #666666;
  display: inline-block;
  padding: 10px;
  height: 44px;
}

.su-body-container-left select {
  border: 1px solid #666666;
  display: inline-block;
  height: 44px;
}

.su-formrow {
  margin-top: var(--formrow-margin);
}

.su-form-namerow {
  display: flex;
  flex-wrap: wrap;
}
.su-form-namerow div {
  width: 50%;
}
.su-form-namerow div[data-message-for] {
  width: 100%;
}
.su-form-namerow div:first-child {
  padding-right: 0.5em;
}
.su-form-namerow div:last-child {
  padding-left: 0.5em;
}

.su-personalinfo-button1, .su-accountinfo-button1 {
  color: white;
  background-color: var(--active-theme-color);
  font-size: 80%;
  width: 12em;
  height: 3em;
  border: none;
}
button.su-personalinfo-button1:disabled, button.su-accountinfo-button1:disabled {
  opacity: 0.3;
}

/* Body: Account Info Panel */

.su-accountinfo-steps {
  font-size: 110%;
}
.su-accountinfo-steps-1 {
  margin-right: 0.5em;
  color: var(--disabled-theme-color);
}
.su-accountinfo-steps-1 span:first-child {  /* 1 with a circle around it */
  display: inline-block;
  width: 1.5em;
  padding-left: 0.55em;
  border-width: 1px;
  border-style: solid;
  border-color: var(--disabled-theme-color);
  border-radius: 50%;
}
.su-accountinfo-steps-1 span:last-child {
  padding-left: 0.25em;
}
.su-accountinfo-steps-sep {
  display: none;
}
.su-accountinfo-steps-2 {
  font-weight: bold;
  color: var(--active-theme-color);
}

.su-accountinfo-steps-2 span:first-child {  /* 2 with a circle around it */
  display: inline-block;
  width: 1.5em;
  padding-left: 0.4em;
  border-width: 1px;
  border-style: solid;
  border-color: var(--active-theme-color);
  border-radius: 50%;
}
.su-accountinfo-steps-2:before {
  background-color: #A3CD3A;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 6em;
  margin-right: 0.5em;
}
.su-accountinfo-steps-2 span:last-child {
  padding-left: 0.25em;
}

.freetrial-charge-notice {
  font-style: italic;
  font-weight: normal;
}

.su-form-cardrow {
  display: flex;
  flex-wrap: wrap;
}
.su-form-cardrow div:first-child {
  flex: 1;
  padding-right: 1em;
}
.su-form-cardrow div:last-child {
  margin-top: inherit;
  vertical-align: baseline;
}

label[for="cc_num"] img {
  display: inline;
}

label[for="cvv"] img {
  display: inline;
}

.su-form-expirationrow {
  display: flex;
  flex-wrap: wrap;
}
.exp_month_container {
  padding-right: 1em;
  flex: 2;
}
.exp_year_container {
  padding-right: 1.8em;
  flex: 1;
}
.cvvcontainer {
  flex: 2;
}

.su-form-provincepostalrow {
  display: flex;
  flex-wrap: wrap;
}
.su-form-provincepostalrow div:first-child {
  flex: 2;
}
.su-form-provincepostalrow div:last-child {
  flex: 1;
}
.su-form-provincepostalrow div:first-child {
  padding-right: 1em;
}

.cvvhelpcontainer {
  position: absolute;
  width: 20em;
  font-size: 75%;
  z-index: 10;
  background-color: white;
  border: 1px solid black;
  padding: 0.5em;
}

/* reduce alt name hints to reduce overflow */
.cvv_alt {
  font-size: 80%;
}

.acceptcontainer {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}
.acceptcontainer span {
  font-size: 90%;
  vertical-align: middle;
  padding-left: 0.5em;
}
.acceptcontainer input[type="checkbox"] {
  margin-top: 0;
}

.helpsectiontitle {
  font-weight: bold;
}

/* Right Pricing Plan Panel */
#plansummarycontainer {
  background-color:#EEEEEE;
  padding: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}
#plansummarycontainer .todaytotalrow {
  margin-top: 0;
}
.totalrow {
  width: 100%;
  margin-top: 0.5em;
}
.totalamountlabel {
  vertical-align: middle;
  margin-right:1em;
}
.totalamount {
  vertical-align: middle;
  line-height: 150%;
  font-size: 150%;
}

#trialend, #futuresubcost, #futuresubcost {
  font-weight: bold;
}

.trialexprow {
  font-size: 75%;
}

.salestaxseparator:before {
  background-color: black;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 100%;
}

.salestaxtotal {
  font-weight: bold;
}

.salestaxreminder {
  font-style: italic;
  margin-top: 2em;
}

.salestaxblock {
  font-size: 75%;
}

.ordertotaltitle {
  display: block;
  margin-top: 25px;
  margin-bottom: 10px;
}

.salestaxrowvalue {
  float: right;
}

.product {
  border: 0;  /* remove inherited WP style setting */
}

.product-label {
  font-weight: bold;
}

.product-list {
  padding-top: 0;
  margin-top: 0;
  margin-left: 0;
  display: inline-block;
  width: auto;
}

#product_users {
  padding-left: 0;
}

.switchplanrow {
  margin-top: 2em;
}

.switchplanlink {
  font-size: 87.5%;
  color:var(--active-theme-color);
  font-weight: normal;
}

.userpricerow {
  font-size: 87.5%;
}
.userpricelabel {
  font-weight: bold;
}

/* Billing */
#ccard_container {
  width: 300px;
  padding-top: 3px;
}
#ccard_container img {
  display: inline-block;
  height: 44px;  /* match the credit card number input field */
}

/* Pre-form submission */
#service, #privacy {
  vertical-align: middle;
}

.featurelistheader {
  font-size: 0.8em;
}

.creditnoticelist {
  font-size: 0.7em;
  margin-top: 2em;
}

/*
According to EoA page https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/
Breakpoints:
320 = iphone5s
414 = iphone6s
703 = ipad mini
768 = ipad air
*/
@media only screen and (max-width: 840px) {
  .su-body-container {
    display: block;
  }
  /* hide vertical separator between form and plan details */
  .su-body-container-left {
    border-right: none;
    padding-right: 0;
  }
  .su-body-container-right {
    padding-left: 0;
  }
  /* place horiz bar between form and plan details */
  .planselectioncontainer {
    border-top: 2px solid #ddd;  /* what we had inherited from WP */
    padding-top: 1em;
  }
}
@media only screen and (max-width: 768px) {
  /* hide bar separating step 1 and step 2 items */
  .su-personalinfo-steps-2:before, .su-accountinfo-steps-2:before {
    display: none;
  }
  .su-personalinfo-steps-2, .su-accountinfo-steps-2 {
    display: block;
    text-align: center;
    margin-top: 0.5em;
  }
}

@media only screen and (max-width: 414px) { 
  .su-body-container-left {
    border-right: none;
    padding-right: 0;
  }
  .su-form-namerow div {
    width: 100%;
  }
  .su-form-namerow div:first-child {
    padding-right: 0;
  }
  .su-form-namerow div:first-child [data-message-for] {
    margin-bottom: var(--formrow-margin);  /* simulate formrow margin */
  }
  .su-form-namerow div:last-child {
    padding-left: 0;
    margin-top: 0;
  }

  /* Move creditcard images to next row */
  .su-form-cardrow {
    display: block;
  }
  .su-form-cardrow div:first-child {
    padding-right: 0;
  }
  #ccard_container {
    width: auto;
    margin-top: 0;
    text-align: center;
  }

  /* Spread out expiration date and cvv */
  .su-form-expirationrow {
    display: block;
  }
  .exp_month_container {
    padding-right: 0;
  }
  .exp_year_container {
    padding-right: 0;
  }
  .exp_year_container label {
    display: none;  /* Shift select up */
  }
  .cvvcontainer::before {
    content: " ";
    display: block;
    height: var(--formrow-margin);
  }

  .acceptcontainer {
    width: 100%;
  }

  .su-form-provincepostalrow {
    display: block;
  }
  .su-form-provincepostalrow div:first-child {
    padding-right: 0;
  }
  .su-form-provincepostalrow div:first-child [data-message-for] {
    padding-top: 0;
  }
  .su-form-provincepostalrow div:last-child {
    padding-top: var(--formrow-margin);
  }
  #zip ~ [data-message-for] {
    padding-top: 0;
  }
}

/***** Validation *******/

input.invalid, select.invalid, textarea.invalid {
  border: 1px solid red;
  background-color: #ff000020;
}
input.invalid ~ .inputmessage, select.invalid ~ .inputmessage, textarea.invalid ~ .inputmessage {
  color: red;
}

/***** General Page *******/
/* Hide unwanted Inc/Dec buttons for number input fields */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}  /* Chrome, Safari, Edge-Chrome */
input[type=number] {
  -moz-appearance: textfield;  /* Firefox */
}

/* Form hint/warning */
[data-message-for] {
  font-size: 0.8rem;
  padding-top: 0.25rem;
  padding-left: 0.5rem;
}
.inputhint {
  display: block;
  font-style: italic;
  color: gray;
}
.inputwarning {
  display: block;
  color: red;
}
intput.invalid {
  border: 1px solid red;
  background-color: #ff000020;
}
.inputclear {
  /*display: none;*/
}

/* Formlet */
[is="x-eoa-formlet-fieldset"] {
  border: 0;
  padding: 0;
  margin: 0;
}

/* Password visibility */
.pwvisibility {
  display: inline;
  vertical-align: middle;
  filter: var(--active-theme-color-svg);
}

.pwshowtoggle {
  position: relative;
  transform: translateY(-100%);
  float: right;
  bottom: 0.8em;
  right: 1em;
  cursor: default;
  font-size: 87.5%;
  color: var(--active-theme-color);
}