.fg-modal * {
  box-sizing: border-box;
}

footer {
  padding: 3rem 0;
}

.fg-modal fieldset {
  border: 0;
}

.fg-modal legend {
  font-size: 1.875rem;
  line-height: 2rem;
}

.fg-modal .required::after {
  color: red;
  content: "*";
}

.fg-modal .save-button,
.fg-modal .cancel-button {
  display: inline-flex;
}

.fg-modal label {
  display: block;
}

/*
This was messing up the change password modal
.fg-modal .section:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
} */

.fg-modal .section:not(:first-child),
.fg-modal .save-button {
  margin-top: 1.25rem;
}
input.outlined_input,
.fg-modal input {
  max-width: none;
  width: 100%;
  border: 1px solid;
  border-radius: 2px;
  font-size: 1em;
  padding: 0.6875em 1.3125em;
}

.fg-modal input:invalid {
  outline: 1px solid red;
}

.fg-modal input:invalid::after {
  display: block;
  content: "Hi what are you doing?";
}

.fg-modal .details {
  margin-top: 1rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgb(102, 102, 102);
}

body.theme-b {
  background: rgb(234, 234, 234);
}

/** Account page mobile styles **/
@media screen and (max-width: 400px) {
  .card.subscribe {
    padding: 0;
  }

  .card.subscribe h3,
  .card.subscribe p {
    padding: 1.5rem;
  }
}

.card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.card-section-subhed {
  border-bottom: 1px solid #c8c8c8;
  margin-bottom: 10px;
  font-size: 1.25rem;
  font-family: Open Sans, sans-serif;
  font-style: normal;
  font-weight: 400;
  padding-bottom: 10px;
}

.account-page-content#main {
  grid-column: 3/11;
}

#billing-settings-content .card-section-subhed {
  border-bottom: none;
}

.card-section-subhed__grid {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  width: 100%;
}
.card-section-subhed__grid .plan-name {
  justify-self: start;
}
.card-section-subhed__grid .account-cta {
  justify-self: end;
}

.status {
  background-color: #c7edbc;
  padding: 0 10px;
  margin-left: 5px;
}
.status__red {
  background-color: rgba(208, 36, 36, 0.2);
}
.status__info {
  background-color: #e8f1ff;
}

.contact-support-button {
  margin-bottom: 1.6875em;
  margin-top: 2.5em;
}

.contact-support-button a {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  color: rgb(43, 148, 255);
  text-decoration: none;
}

.contact-support-button a::before {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3.5 8C3.5 4.41015 6.41015 1.5 10 1.5C13.5899 1.5 16.5 4.41015 16.5 8C15.9477 8 15.5 8.44771 15.5 9V12C15.5 12.5365 15.9226 12.9744 16.453 12.9989C16.3111 14.4431 15.8485 15.5866 15.074 16.4067C14.3492 17.1741 13.3069 17.705 11.8787 17.9082C11.6491 17.374 11.1183 17 10.5 17H9.5C8.67157 17 8 17.6716 8 18.5C8 19.3284 8.67157 20 9.5 20H10.5C11.1869 20 11.7659 19.5383 11.9437 18.9084C13.5837 18.6886 14.8734 18.0755 15.801 17.0933C16.7865 16.0499 17.3111 14.6449 17.4571 13H17.5C18.6046 13 19.5 12.1046 19.5 11V10C19.5 8.89543 18.6046 8 17.5 8C17.5 3.85786 14.1421 0.5 10 0.5C5.85786 0.5 2.5 3.85786 2.5 8C1.39543 8 0.5 8.89543 0.5 10V11C0.5 12.1046 1.39543 13 2.5 13H3.5C4.05228 13 4.5 12.5523 4.5 12V9C4.5 8.44772 4.05228 8 3.5 8Z' fill='%232F80ED'/%3E%3C/svg%3E")
    center center no-repeat;
}

.edit-button button,
.edit-button a {
  display: inline-block;
  text-decoration: none;
  position: relative;
  padding: 8px;
  padding-left: 24px;
  cursor: pointer;
  appearance: none;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15 2L3 14L2 18L6 17L18 5L15 2ZM15 3.41L16.59 5L14.65 6.94L13.06 5.35L15 3.41ZM5.49 16.1L3.37 16.63L3.9 14.51L5.36 13.06L6.95 14.65L5.49 16.1ZM7.65 13.94L6.06 12.35L12.35 6.06L13.94 7.65L7.65 13.94Z' fill='%23006AD4'/%3E%3C/svg%3E");
  background-position: 0;
  background-repeat: no-repeat;
}

.edit-button button span,
.edit-button a span {
  color: rgb(43, 148, 255);
  font-size: 1rem;
}

.subscription-plan .subscription-plan-details strong::after {
  content: ":";
}

.breadcrumbs {
  margin-top: 1rem;
}

.billing-history {
  display: block;
  padding-top: 2em;
}
.billing-history table {
  border: 0;
}

.modal,
.modal_screen {
  position: fixed;
  z-index: 1000;
}

.modal_screen {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}

.modal {
  visibility: hidden;
  display: none;
}

.modal-open + .modal_screen {
  display: block;
}

.modal-open {
  visibility: visible;
  display: block;
  z-index: 10000001;
  background: rgb(244, 244, 244);
  box-sizing: border-box;
  padding: 5vh;
  top: 10vh;
  left: 10vw;
  height: 80vh;
  width: 80vw;
  overflow: auto;
  border-radius: 10px;
  box-shadow: rgb(0 0 0 / 22%) 0px 25.6px 57.6px 0px,
    rgb(0 0 0 / 18%) 0px 4.8px 14.4px 0px;
}

.modal_close {
  position: absolute;
  top: 1vh;
  right: 1vh;
  border: none;
  cursor: pointer;
  background: transparent;
  margin: 0;
  font-size: 1.4rem;
  width: 1.4em;
  height: 1.4em;
  line-height: 1;
  overflow: hidden;
  text-indent: -999px;
}

.modal_close:before,
.modal_close:after {
  content: "";
  height: 1em;
  width: 0.1em;
  top: 0.2em;
  left: 0.65em;
  background: #777;
  position: absolute;
  transform: rotate(-45deg);
}

.modal_close:after {
  transform: rotate(45deg);
}

/* inert polyfill styles */

[inert] {
  pointer-events: none;
  cursor: default;
}

[inert],
[inert] * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#wpt-account-signup h3 {
  text-align: center;
}

/**
 * account page specific modal things
 */

@media (min-width: 55rem) {
  .account-layout .modal-open {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 800px;
  }
}

.plan-billing-container {
  display: flex;
  align-content: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.plan-billing-container * {
  box-sizing: border-box;
}

.plan-billing-container .card {
  display: block;
}

.billing-info-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 5px;
  grid-template-areas: "street-address street-address" "city state" "country zipcode";
}

.street-address {
  grid-area: street-address;
}

.city {
  grid-area: city;
}

.state {
  grid-area: state;
}

.country {
  grid-area: country;
}

.zipcode {
  grid-area: zipcode;
}

.billing-info-section input,
.billing-info-section select {
  border: 1px solid rgb(204, 204, 204);
  border-radius: 2px;
  width: 100%;
  max-width: 100%;
}

.billing-container {
  width: 100%;
  position: relative;
}

@media (min-width: 1400px) {
  .plan-details-container {
    width: 25%;
  }

  .billing-container {
    width: 70%;
  }

  .wpt-plan-set .wpt-plan {
    min-width: 180px;
  }
}

.wpt-plans {
  border: 0;
  padding: 0;
}

.wpt-plans .radiobutton-group {
  margin-bottom: 2em;
}

.wpt-plans input[name="plan-type"] {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.wpt-plan-set {
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between;
  text-align: center;
  display: flex;
}

.wpt-plan-set.hidden {
  display: none;
}

.wpt-plan-set .pill-button {
  margin-top: 1rem;
}

.wpt-plans
  input[name="plan-type"][value="monthly"]:checked
  ~ .wpt-plan-set.monthly-plans,
.wpt-plans
  input[name="plan-type"][value="annual"]:checked
  ~ .wpt-plan-set.annual-plans {
  display: flex;
}
/** feature list on upgrade plans **/
.upgrade-plan-feature-list {
  border-bottom: 1px solid rgb(204, 204, 204);
  flex-direction: column;
  flex-wrap: wrap;
  display: flex;
  height: 372px;
}
.upgrade-plan-feature-list li {
  padding: 1rem;
  min-height: 30px;
  border-right: 1px solid rgb(204, 204, 204);
}

.upgrade-plan-feature-list li:nth-child(odd) {
  background-color: #f4f4f4;
}

.upgrade-plan-feature-list-info {
  border: 1px solid rgb(204, 204, 204);
  border-radius: 10px;
}
.upgrade-plan-feature-list-info h3 {
  padding: 1.5em 1em;
}

.wpt-plan-set .form-wrapper-radio {
  position: relative;
  width: 23%;
}

@media (max-width: 860px) {
  .wpt-plan-set .form-wrapper-radio {
    width: 48%;
  }
  .upgrade-plan-feature-list {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  }
}
@media (max-width: 400px) {
  .wpt-plan-set .form-wrapper-radio {
    width: 100%;
  }
  .upgrade-plan-feature-list {
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
  }
}

.wpt-plan-set .form-wrapper-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
}

.wpt-plan-set .wpt-plan {
  display: block;
  cursor: pointer;
  color: rgb(67, 129, 229);
  font-weight: normal;
  margin-bottom: 0.5em;
  margin-top: 0;
}

.wpt-plan-set .wpt-plan h5 {
  margin-top: 0;
}

.wpt-plan-set .form-wrapper-radio input[type="radio"]:checked + .wpt-plan {
  background-color: rgb(230, 242, 255);
  border: 1px solid rgb(47, 128, 237);
}

.wpt-plan-set .wpt-plan .select-indicator {
  display: block;
  text-align: center;
  padding: 0.5em 0.8125rem;
  background-color: rgb(67, 129, 229);
  color: rgb(255, 255, 255);
  border: 1px solid rgb(0, 120, 212);
  border-radius: 3px;
  user-select: none;
  margin-top: 2em;
}
.wpt-plan-set
  .form-wrapper-radio
  input[type="radio"]:disabled
  + .wpt-plan
  .pill-button {
  background-color: rgb(204, 204, 204);
}

.wpt-plan-set
  .form-wrapper-radio
  input[type="radio"]:checked
  + .wpt-plan
  .select-indicator {
  background-color: transparent;
  color: rgb(0, 120, 212);
}

.wpt-plan-set
  .form-wrapper-radio
  input[type="radio"]:checked
  + .wpt-plan
  .select-indicator::before,
.wpt-plan-set
  .form-wrapper-radio
  input[type="radio"]:checked
  + .wpt-plan
  .select-indicator::after {
  display: inline-block;
}

.wpt-plan-set
  .form-wrapper-radio
  input[type="radio"]:checked
  + .wpt-plan
  .select-indicator::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10L8 14L12 10L16 6' stroke='%232F80ED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center center no-repeat;
  content: "";
  width: 1.0625em;
  height: 1.0625em;
  margin-right: 5px;
  position: relative;
  top: 2px;
}

.wpt-plan-set
  .form-wrapper-radio
  input[type="radio"]:checked
  + .wpt-plan
  .select-indicator::after {
  content: "ed";
}

.wpt-plan.card {
  box-sizing: border-box;
  align-items: flex-start;
  background-color: rgb(255, 255, 255);
  margin-bottom: 30px;
  padding: 2.5rem;
  border-radius: 10px;
  box-shadow: rgb(0 0 0 / 10%) 1px 1px 4px 0px;
  border: 1px solid rgb(204, 204, 204);
}

/**
 * begin signup step 1
 */

.signup-flow-step-1-layout main {
  grid-column: gutter-start / gutter-end;
  grid-template-columns: 1vw repeat(10, 1fr) 1vw;
  margin-top: 0;
}

.signup-step-1-content {
  margin: -150px auto 0;
  max-width: 1400px;
  padding: 0 3rem;
}

.signup-step-1-content * {
  box-sizing: border-box;
}

.radio-button label {
  padding: 0.5em 2em !important;
}

.radio-button:first-child label {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.radio-button:last-child label {
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.signup-step-1-content h2 {
  text-align: center;
  font-size: 1.1em;
  display: block;
  margin: 2rem 0;
}

.signup-feature {
  background: #fff;
  color: #fff;
}

.signup-hed-contain {
  color: white;
  background-color: #6b25cf;
  background-image: url(/assets/images/src/white-swoop.svg),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%237D0688'/%3E%3Cstop offset='1' stop-color='%23150033'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23D617C5' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23D617C5' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.49'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
  background-position: bottom -15px left 50%, bottom 0 left 50%;
  background-repeat: no-repeat, no-repeat;
  background-size: 100%, cover;
  display: flex;
  padding-top: 4rem;
}

/* when your monitor is really wide */

@media only screen and (min-width: 1025px) {
  .signup-hed-contain {
    background-position: bottom -60px left 50%, bottom 0 left 50%;
  }
}
@media screen and (max-width: 400px) {
  .signnup-hed-contain {
    background-position: bottom -15px left 100%, bottom 0 left 100%;
    background-size: 250%, cover;
  }
}

.signnup-hed .price {
  color: #f9d856;
  font-weight: 600;
}

.signup-hed {
  font-size: 1.75rem;
  padding: 0 3rem 6.5rem;
  line-height: 2.5rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.signup-hed p {
  margin: 0 0 1rem;
  max-width: 700px;
}

.ico-yellowcursor {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='59' height='59' viewBox='0 0 59 59' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39.5229 18.7224C40.0744 19.2876 40.4553 20.1964 40.1815 21.1661L40.0148 21.7564C37.4717 30.7624 34.1034 39.3992 29.9498 47.5614C29.4012 48.6394 28.2748 48.8933 27.4103 48.6681C26.5645 48.4478 25.7894 47.7565 25.5679 46.7365L23.5167 37.2938C23.29 36.2501 22.429 35.3871 21.4584 35.1679L12.2722 33.0934C11.2368 32.8596 10.578 32.0457 10.3712 31.2186C10.1635 30.3878 10.3715 29.2526 11.4336 28.6753C19.3552 24.3692 27.7422 20.869 36.4922 18.2168L37.0653 18.0431C38.057 17.7425 38.9729 18.1587 39.5229 18.7224ZM37.675 20.5529L37.2403 20.6847C28.8487 23.2283 20.8013 26.5655 13.1904 30.6571L22.0264 32.6525C24.0073 33.0998 25.6043 34.756 26.0367 36.7463L27.9875 45.7269C31.9092 37.914 35.1036 29.6589 37.5331 21.0556L37.675 20.5529Z' fill='%23FFC830'/%3E%3C/svg%3E");
}

/**
 * End signup step 1
 */

/**
 * begin signup step 2
 */
.signup-flow-layout * {
  box-sizing: border-box;
}

.signup-flow-layout body {
  display: block;
  background-color: #141e33;
}

.signup-flow-layout header {
  padding-left: 0;
  border-bottom: 1px solid #334870;
}

.signup-flow-layout header .logo {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1.5rem;
}


.signup-flow-layout header ol {
  height: auto;
  max-height: 4.5rem;
  padding-left: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0;
  padding-right: 1.5rem;
}

.signup-flow-layout header ol {
  padding-left: 0;
  display: flex;
  justify-content: space-around;
}

.signup-flow-layout header li {
  margin-left: 40px;
  color: #d0d0d0;
  font-weight: 400;
  font-size: 1.125rem;
}

.signup-flow-layout header .selected {
  color: #a9c8f1;
  font-weight: 700;
}

.signup-flow-layout header ol,
.signup-flow-layout header .free-plan {
  height: auto;
  max-height: 4.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-right: 1.5rem;
}


@media (min-width: 37.5rem) {
  .signup-flow-layout header {
    display: flex;
    justify-content: flex-start;
  }

  .signup-flow-layout header .logo {
    border-bottom: 0;
    padding-bottom: 0;
    margin: 1em 0;
  }

  .signup-flow-layout header ol,
  .signup-flow-layout header .free-plan {
    margin-left: 0;
    margin-top: 0rem;
    margin-bottom: 1rem;
  }
}

@media (min-width: 50em) {
  .signup-flow-layout header ol,
  .signup-flow-layout header .free-plan {
    padding-right: 3rem;
  }
}

@media (min-width: 86em) {
  
  .signup-flow-layout header ol,
  .signup-flow-layout header .free-plan {
    margin: 0;
    position: relative;
    height: 6rem;
    max-height: 6rem;
    top: 0.75rem;
    padding-right: 1rem;
  }

  .signup-flow-layout header ol {
    margin-left: calc(50vw - 43.4375rem);
  }

  .signup-flow-layout header .free-plan {
    margin-left: calc(50vw - 39rem);
  }
}

.signup-flow-layout main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas: "." ".";
  width: 100vw;
  height: 100vh;
}

@media (min-width: 50rem) {
  .signup-flow-layout main {
    grid-template-columns: 1fr 23.75rem;
    grid-template-rows: 1fr;
    grid-template-areas: ". .";
  }
}

.signup-flow-layout section {
  padding: 40px 0;
  background-color: #0e1e38;
  color: #ffffff;
}

.signup-flow-layout section .content {
  width: 400px;
  margin: 0 auto;
  max-width: 90vw;
}

.signup-flow-layout .payment-details .content {
  width: 535px;
}

.signup-flow-layout section .content h1 {
  font-weight: 300;
  font-size: 2.375rem;
  text-align: center;
}

.signup-flow-layout .form-input:not(:first-child),
.signup-flow-layout .content form .form-input:not(:first-child) {
  margin-top: 1.875rem;
}

.signup-flow-layout .form-input label {
  display: block;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.6875rem;
}

.signup-flow-layout .form-input input[type="text"],
.signup-flow-layout .form-input input[type="email"],
.signup-flow-layout .form-input input[type="password"] {
  background: #ffffff;
  border: 1px solid #999999;
  border-radius: 2px;
  width: 100%;
  max-width: 100%;
  font-size: 1.25rem;
  line-height: 1.6875rem;
  padding: 0.6875rem 1.3125rem;
}

.signup-flow-layout .form-input select {
  border: 1px solid #999999;
  border-radius: 2px;
}

.signup-flow-layout .form-input button[type="submit"],
.signup-button {
  appearance: none;
  width: auto;
  background-color: #f9d856;
  border: 0;
  border-radius: 2rem;
  cursor: pointer;
  display: inline-block;
  padding: 0.7em 2.2em;
  color: #111;
  font-size: 1em;
}

.signup-flow-layout .form-input button[type="submit"]:disabled,
.signup-button:disabled {
  cursor: auto;
}

a.button {
  text-decoration: none;
  display: inline-block;
}

.signup-flow-layout .form-input .description,
.signup-flow-layout .disclaimer {
  font-size: 0.9375rem;
}

.terms-service-set {
  display: flex;
  align-items: flex-start;
}

.terms-service-set input {
  margin-right: 1rem;
  margin-top: 0.4rem;
}

.signup-flow-layout .disclaimer a {
  color: #dadada;
}

.signup-flow-layout aside {
  background: #24334f;
  color: #dadada;
  padding: 70px 30px;
}

.signup-flow-layout aside h3 {
  font-size: 1rem;
  line-height: 1.6875rem;
}
.signup-flow-layout .plan-name {
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.6875rem;
}
.signup-flow-layout .wpt-pro-logo {
  margin: 0 0 1em;
  background-position: 0 0;
  background-size: contain;
}
.signup-flow-layout .plan-details {
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  padding: 1em;
  border-radius: 0.6em;
  margin: 1em 0;
}
.signup-flow-layout .plan-details table {
  font-size: 0.95em;
  width: 100%;
  border-collapse: collapse;
}
.signup-flow-layout .plan-details table th {
  text-align: left;
  padding: 0.6em 0;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.signup-flow-layout .plan-details table td {
  text-align: right;
  padding: 0.6em 0;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.signup-flow-layout .plan-benefits ul {
  list-style: disc;
  padding: initial;
  margin: initial;
}

.billing-address-information-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 10px;
  grid-template-areas: "address address" "city st" "country zip";
}

.billing-address-information-container .address {
  grid-area: address;
}

.billing-address-information-container .city {
  grid-area: city;
}

.billing-address-information-container .country {
  grid-area: country;
}

.billing-address-information-container .zip {
  grid-area: zip;
}

.billing-address-information-container .state {
  grid-area: st;
}

/*
 * End signup step 2
 */
.signup-flow-layout wpt-header {
  background-color: #141e33;
}

.signup-flow-layout header {
  margin-bottom: 0;
}

.signup-flow-layout header .logo {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1.5rem;
}

.signup-flow-layout header li {
  margin-left: 40px;
  color: #d0d0d0;
  font-weight: 400;
  font-size: 1.125rem;
}

.signup-flow-layout header .selected {
  color: #a9c8f1;
  font-weight: 700;
}

.signup-flow-layout main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas: "." ".";
  width: 100vw;
  height: 100vh;
}

@media (min-width: 600px) {
  .signup-flow-layout header {
    display: flex;
    justify-content: flex-start;
  }

  .signup-flow-layout header .logo {
    border-bottom: 0;
    padding-bottom: 0;
    margin: 1em 0;
  }

  .signup-flow-layout ol {
    margin-left: 0;
  }

  .signup-flow-layout .free-plan {
    margin-left: 0;
  }
}

@media (min-width: 50rem) {
  .signup-flow-layout main {
    grid-template-columns: 1fr 23.75rem;
    grid-template-rows: 1fr;
    grid-template-areas: ". .";
  }
}

@media (min-width: 86.25rem) {
  .signup-flow-layout ol {
    margin-left: calc(50vw - 43.4375rem);
  }

  .signup-flow-layout .free-plan {
    margin-left: calc(50vw - 39rem);
  }
}

.signup-flow-layout aside {
  background: #24334f;
  color: #dadada;
  padding: 70px 30px;
}

.signup-flow-layout .plan-benefits ul {
  list-style: disc;
  padding: initial;
  margin: initial;
}

.signup-flow-layout aside h3 {
  font-size: 1rem;
  line-height: 1.6875rem;
}

.signup-flow-layout .plan-name {
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.6875rem;
}
.signup-flow-layout .wpt-pro-logo {
  margin: 0 0 1em;
}
.signup-flow-layout .wpt-pro-logo {
  background-position: 0 0;
}

.signup-flow-layout .plan-details {
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  padding: 1em;
  border-radius: 0.6em;
  margin: 1em 0;
}
.signup-flow-layout .plan-details table {
  font-size: 0.95em;
  width: 100%;
  border-collapse: collapse;
}
.signup-flow-layout .plan-details table th {
  text-align: left;
  padding: 0.6em 0;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.signup-flow-layout .plan-details table td {
  text-align: right;
  padding: 0.6em 0;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.signup-flow-layout .plan-details table tr:last-child th,
.signup-flow-layout .plan-details table tr:last-child td {
  border-bottom: 0;
}

.card.api-consumers,
.card.billing-history {
  display: block;
}

.api-consumers .info {
  overflow: hidden;
}

@media (max-width: 760px) {
  .api-consumers .info {
    overflow: scroll;
  }
}

/**
 * sortable table
 */

.sr-only {
  position: absolute;
  top: -30em;
}

table.sortable {
  width: 100%;
  border-collapse: collapse;
}

table.sortable caption {
  text-align: left;
}

table.sortable thead tr {
  border-bottom: thin solid #c8c8c8;
}

table.sortable tbody tr {
  border-bottom: thin solid #eaeaea;
}

table.sortable tbody tr:hover {
  background: #e1dfdd;
  color: #323130;
}

table.sortable td,
table.sortable th {
  text-align: left;
  font-size: 1rem;
}

table.sortable th {
  position: relative;
  padding: 1.25em 0.25em;
  width: 10em;
}

table.sortable td {
  padding: 0.75em 8px 0.625em 6px;
}

table.sortable th.no-sort {
  padding-top: 0.35em;
}

table.sortable th button {
  position: absolute;
  padding: 4px;
  margin: 1px;
  font-size: 100%;
  font-weight: 600;
  color: #666;
  background: transparent;
  border: none;
  display: inline;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  text-align: left;
  outline: none;
  cursor: pointer;
}

table.sortable th button span {
  position: relative;
  top: -1px;
}

table.sortable th[aria-sort="descending"] span::after {
  content: "▼";
  color: currentColor;
  font-size: 50%;
  top: 0;
}

table.sortable th[aria-sort="ascending"] span::after {
  content: "▲";
  color: currentColor;
  font-size: 50%;
  top: 0;
}

table.show-unsorted-icon th:not([aria-sort]) button span::after {
  content: "♢";
  color: currentColor;
  font-size: 50%;
  position: relative;
  top: -3px;
  left: -4px;
}

table.sortable td.num {
  text-align: right;
}

/* Tables with selectable rows*/
.selectable-table tr th:first-child,
.selectable-table tr td:first-child {
  width: 3%;
}

/* Focus and hover styling */

table.sortable th button:focus,
table.sortable th button:hover {
  color: rgb(50, 49, 48);
  background: rgb(243, 242, 241);
}

table.sortable th:not([aria-sort]) button:focus span::after,
table.sortable th:not([aria-sort]) button:hover span::after {
  content: "▼";
  color: currentColor;
  font-size: 50%;
  top: 0;
}

/**
 * End sortable table
 */

/**
 * Toggleable area
 */

.toggleable.toggle-close {
  display: none;
}

.toggleable.toggle-open {
  display: block;
}

.create-delete-button-container {
  font-size: 0.8125rem;
  background-color: #f4f4f4;
  border-bottom: 1px solid #c8c8c8;
  border-top: 1px solid #c8c8c8;
  display: flex;
  align-content: center;
  justify-content: flex-start;
}

.create-delete-button-container button,
.create-delete-button-container label {
  appearance: none;
  border: 0;
  height: 3.4em;
  margin-left: 12px;
  padding-left: 25px;
  padding-right: 13px;
  background-color: transparent;
  background-position: left;
  background-repeat: no-repeat;
  cursor: pointer;
  color: #323232;
}

.create-delete-button-container label {
  line-height: 3.6em;
}

.create-delete-button-container .new-api-key {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M17 9V10H10V17H9V10H2V9H9V2H10V9H17Z' fill='%23006AD4'/%3E%3C/svg%3E");
}

.create-delete-button-container .delete-key {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12 4V3C12 2.73478 11.8946 2.48043 11.7071 2.29289C11.5196 2.10536 11.2652 2 11 2H8C7.73478 2 7.48043 2.10536 7.29289 2.29289C7.10536 2.48043 7 2.73478 7 3V4H2V5H4V17C4 17.2652 4.10536 17.5196 4.29289 17.7071C4.48043 17.8946 4.73478 18 5 18H14C14.2652 18 14.5196 17.8946 14.7071 17.7071C14.8946 17.5196 15 17.2652 15 17V5H17V4H12ZM8 3H11V4H8V3ZM14 17H5V5H14V17ZM8 15H7V7H8V15ZM10 15H9V7H10V15ZM12 15H11V7H12V15Z' fill='%23006AD4'/%3E%3C/svg%3E");
}

.create-delete-button-container .delete-key.disabled {
  color: inherit;
  opacity: 0.3;
  cursor: auto;
}

.create-key-container .toggleable {
  margin-top: 0.5rem;
}

.create-key-container .toggleable input[type="text"] {
  box-shadow: none;
  margin: 0px;
  padding: 0.4em 8px;
  border: 1px solid rgb(96, 94, 92);
  border-radius: 2px;
  background: rgb(255, 255, 255);
  cursor: text;
  font-size: 0.8125rem;
}

.create-key-container .toggleable button {
  appearance: none;
  background-color: #f4f4f4;
  border: 1px solid #e2e2e2;
  color: #333;
  border-radius: 2px;
  font-weight: 400;
  font-size: 0.8125rem;
  padding: 0.4em 25px;
  cursor: pointer;
}

.create-key-container .toggleable button:hover {
  background-color: #fff;
  color: #201f1e;
}

.create-key-container .toggleable button[type="submit"] {
  border: 1px solid #0078d4;
  background-color: #2c97ff;
  color: #fff;
}

.create-key-container .toggleable button[type="submit"]:hover {
  border: 1px solid #106ebe;
  background-color: #106ebe;
}

/**
 * Hideable cell
 */

.hidden-content .hidden-area {
  display: flex;
}

.hidden-content .hidden-area.closed,
.hidden-content .closed {
  display: none;
}

.hidden-content .view-button,
.hidden-content .hide-button {
  appearance: none;
  border: 0;
  cursor: pointer;
}

.hidden-content .view-button {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 10C2 10 5.58172 16 10 16C14.4183 16 18 10 18 10C18 10 14.4183 4 10 4C5.58172 4 2 10 2 10ZM3.19246 10C3.26436 10.1053 3.34719 10.2239 3.44034 10.3534C3.82566 10.8888 4.38093 11.5992 5.06268 12.3055C6.47204 13.7658 8.22099 15 10 15C11.779 15 13.528 13.7658 14.9373 12.3055C15.6191 11.5992 16.1743 10.8888 16.5597 10.3534C16.6528 10.2239 16.7356 10.1053 16.8075 10C16.7356 9.89472 16.6528 9.77606 16.5597 9.64664C16.1743 9.11122 15.6191 8.40083 14.9373 7.69446C13.528 6.2342 11.779 5 10 5C8.22099 5 6.47204 6.2342 5.06268 7.69446C4.38093 8.40083 3.82566 9.11122 3.44034 9.64664C3.34719 9.77606 3.26436 9.89472 3.19246 10Z' fill='%23006AD4'/%3E%3Cpath d='M12 10C12 11.1046 11.1046 12 10 12C8.89543 12 8 11.1046 8 10C8 8.89543 8.89543 8 10 8C11.1046 8 12 8.89543 12 10Z' fill='%23006AD4'/%3E%3C/svg%3E")
    left center no-repeat;
  color: #2b95ff;
  padding-left: 25px;
  width: 100%;
  text-align: left;
}

.hidden-content .hide-button {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.7527 10L16 15.2474L15.2474 16L10 10.7527L4.75265 16L4 15.2474L9.24735 10L4 4.75265L4.75265 4L10 9.24735L15.2474 4L16 4.75265L10.7527 10Z' fill='%23333333'/%3E%3C/svg%3E")
    center center no-repeat;
  width: 20px;
  padding: 12px 0;
}

.api-consumers .info .hidden-content {
  min-width: 21em;
  /* API key length */
}

.billing-frequency-selector {
  text-align: center;
  margin-bottom: 2.5rem;
}

.radiobutton-group {
  display: flex;
  justify-content: center;
}

.radiobutton-group input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.radiobutton-group label {
  background-color: #ffffff;
  color: #333;
  font-size: 1.25rem;
  text-align: center;
  padding: 0.55em 20px 0.5em;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.radiobutton-group label:hover {
  cursor: pointer;
}

.radiobutton-group input:checked + label {
  background-color: #3881e5;
  color: #fff;
  box-shadow: none;
}

.resend-email-verification-container {
  background-color: #f9d856;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  padding: 1rem 0;
}
.resend-email-verification-container div {
  text-align: center;
}
.resend-email-verification-container p,
.resend-email-verification-container form {
  display: inline-block;
  margin: 0;
}

@media (max-width: 980px) {
  .resend-email-verification-container form {
    margin-left: 15px;
  }
}

.resend-link-container {
  display: flex;
  align-content: center;
  justify-content: flex-start;
}

.resend-link-container button[type="submit"] {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 1rem;
  color: #2b94ff;
}

/*  ---------------------------------------------------------------
 REDESIGN Step 1
 ----------------------------------------------------------------*/

/* Comparison table */
.comparison-table {
  border-spacing: 4px 0;
  font-size: 1.3rem;
  width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
  margin-top: 3em;
}
.comparison-table .h2 {
  font-size: 1.7rem;
  text-align: left;
}

.comparison-table thead tr {
  height: 1px;
}

.comparison-table thead th {
  vertical-align: bottom;
}

.comparison-table thead th {
  vertical-align: bottom;
}

.comparison-table tbody tr:nth-child(odd) {
  background-color: #f4f4f4;
}

.comparison-table tbody td.custom-plan {
  background-color: white;
  vertical-align: top;
  padding-top: 0;
}
.comparison-table thead th:first-child,
.comparison-table tbody th {
  text-align: left;
}

.comparison-table th.custom-plan {
  padding: 0.5em 0 2em;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  vertical-align: bottom;
}

.comparison-table tr td {
  border: none;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.comparison-table tr td:first-of-type {
  border: none;
}

.comparison-table tr:last-child td {
  /* border-radius: 0 0 10px 10px; */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom: 1px solid #ddd;
  vertical-align: bottom;
}

.comparison-table tr:last-child td:first-of-type {
  border: none;
  border-radius: 0;
}

.comparison-table tr td,
.comparison-table tr th {
  padding: 0.8em;
  width: 25%;
}
.comparison-table tr .info {
  white-space: normal;
  line-height: 0.9;
}

.account-upgrade-comparison-table {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.account-upgrade-comparison-table tr:last-child td:last-child,
.account-upgrade-comparison-table tr td:last-child,
.account-upgrade-comparison-table tbody td {
  border: none;
  border-radius: 0;
}
.account-upgrade-comparison-table tr td:not(:first-child):not(:last-child) {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.need-help {
  padding: 0 1rem 0.75rem;
}

.account-upgrade-comparison-table thead th:first-child {
  text-align: left;
}

@media (max-width: 1500px) {
  .signup-step-1-content {
    margin: -130px auto 0;
    padding: 0;
  }
}

@media screen and (max-width: 968px) {
  .comparison-table thead tr {
    height: unset;
  }

  .comparison-table tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  .comparison-table tr.prices td {
    margin: auto;
  }

  .signup-step-1-content {
    margin: -39px auto 0;
    padding: 0;
  }

  .comparison-table tbody th,
  .comparison-table tbody td,
  .comparison-table thead th {
    display: block;
    width: 33%;
    font-size: 0.9rem;
    box-sizing: border-box;
    position: relative;
  }
  .comparison-table tbody th {
    text-align: left;
  }
  thead th > span {
    position: absolute;
    bottom: 10px;
    left: 22%;
  }

  .comparison-table tbody tr,
  .comparison-table tbody tr:nth-child(odd) {
    background-color: white;
  }

  .comparison-table thead th:first-child {
    display: none;
  }

  .comparison-table tbody tr th:first-child {
    background: #efefef;
    width: 100%;
  }

  .comparison-table tbody tr td {
    background-color: white;
  }

  .comparison-table tbody td.custom-plan,
  .comparison-table thead th.custom-plan,
  .comparison-table thead td {
    display: none;
  }

  .comparison-table tbody tr.custom-plan-mobile {
    background-color: white;
    display: flex;
  }

  .comparison-table tbody tr:last-of-type td {
    height: 105px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}

@media screen and (max-width: 370px) {
  .comparison-table tbody td,
  .comparison-table thead th {
    font-size: 0.9rem;
    box-sizing: border-box;
  }
}

.card-section .comparison-table {
  font-size: 1.0rem;
}

/* comparison table content */

.icon.check {
  background: #6ca71a url(/assets/images/src/icon_grading_check.svg) left 50%
    no-repeat;
  color: #fff;
  border-radius: 100%;
  font-weight: 900;
  width: 1.4em;
  height: 1.4em;
  display: inline-block;
  margin: 0 0.7em 0 0.5em;
  text-align: center;
  line-height: 1.5;
  background-size: contain;
  vertical-align: middle;
}

.icon.x-in-circle-temp {
  background: #efefef url(/assets/images/circle-x.svg) left 50% no-repeat;
  color: #fff;
  border-radius: 100%;
  font-weight: 900;
  width: 1.4em;
  height: 1.4em;
  display: inline-block;
  margin: 0 0.7em 0 0.5em;
  text-align: center;
  line-height: 1.5;
  background-size: contain;
  vertical-align: middle;
}

.new-banner {
  background: #00a850;
  border-radius: 4px;
  font-size: 0.7rem;
  padding: 0.1rem 0.2rem;
  color: white;
  font-style: normal;
  float: right;
  margin-left: 10px;
}

.plan-selector .plan-name {
  font-family: Open Sans, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 30px;
  color: #2f80ed;
  text-align: center;
  margin: 0.5rem 0 1rem;
  padding: 0 0 0.5em;
  border-bottom: 1px solid #1071ba;
}

.plan-selector select {
  border: 1px solid;
  border-radius: 0.5em;
  padding: 0.6875em 1.6125em 0.6875em 1em;
  box-shadow: 0 0 4px #e7e7e7;
  border-color: #777;
}

.plan-selector .plan {
  display: none;
}

.comparison-table .signup-button {
  font-size: 1.15rem;
  font-weight: 700;
}

.comparison-table .signup-button > div {
  line-height: 0.85;
}
.comparison-table .signup-button > div > small {
  font-weight: 400;
  font-size: smaller;
}
.comparison-table .signup-button .unit,
span.unit {
  font-weight: 400;
  font-size: smaller;
}

.plan-selector .price {
  font-family: Open Sans, sans-serif;
  color: #141e33;
  font-style: normal;
  font-weight: 700;
  line-height: 3.6875rem;
}

.plan-selector .runs {
  font-size: 1.3rem;
  height: 55px;
  padding: 18px;
  font-weight: 500;
}

.plan-selector .runs b {
  font-weight: 500;
}

tr.custom-plan-mobile {
  display: none;
}
.pro-plans form div > *:not(.hidden) {
  display: inline-block;
  width: auto;
}
.pro-plans form > *:not(.hidden) {
  display: inline-block;
  width: auto;
}
#pro-plan-form {
  margin-top: 1rem;
}
#pro-plan-form label {
  width: 75px;
  margin-right: 0.2rem;
  text-align: right;
}
#pro-plan-form select {
  width: 90px;
  margin-bottom: 0.2rem;
  padding: 0.25em 0.75em;
}

.pro-plans .pro-plans-header,
.expert-plan .expert-plan-header {
  color: #fff;
  background-color: #111a2a;
  border-radius: 10px;
  border: 1px solid #fff;
  padding: 1em;
  vertical-align: top;
  line-height: 1.3;
}
.card-section .pro-plans-header,
.card-section .expert-plan-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-section .pro-plans-header {
  height: calc(100% - 2em - 2px);
}

thead th.pro-plans,
thead th.expert-plan {
  vertical-align: top;
  height: inherit;
}
.expert-plan-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.expert-plan-header .heading {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.pro-plans-header .heading > * {
  float: none;
}
span.upsell {
  font-size: 0.9rem;
  font-weight: 400;
}

th.pro-plans {
  border: 1px solid #ddd;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: rgba(255, 255, 255, 0.3);
}
th.expert-plan {
  border: 1px solid #ddd;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: rgba(255, 255, 255, 0.3);
}
.pro-plans select {
  border: 1px solid #ddd;
}
.pro-plans form {
  font-size: 1rem;
  padding-top: 2%;
}

.signup-hed-price {
  color: #ffc830;
  font-weight: 700;
  font-size: 2rem;
}

.signup-special-price {
  color: #ffc830;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: 1rem;
}

@media (max-width: 700px) {
  .signup-special-price {
    font-size: 1.15rem;
  }

  #pro-plan-form {
    margin-top: 0.5rem;
  }

  #submit-pro-plan {
    white-space: normal;
    line-height: 0.85;
  }
}

@media (max-width: 620px) {
  .signup-special-price {
    font-size: 0.9rem;
  }

  .expert-plan-header .heading {
    font-size: 0.95rem;
  }

  #pro-plan-form label {
    width: 56px;
    font-size: 0.75rem;
  }

  #pro-plan-form select {
    width: 70px;
    font-size: 0.75rem;
  }

  span.upsell {
    font-size: 0.8rem;
    line-height: 1.25;
  }


  .comparison-table tr td,
  .comparison-table tr th {
    padding: 0.8em 0;
  }
}

.wpt-pro-logo {
  background: transparent url(/assets/images/wpt-logo-pro.svg) no-repeat;
  display: block;
  width: 100%;
  height: 30px;
  background-position: center;
}

/* FAQ section */

dl.faq button {
  margin: 0;
  margin-top: 16px;
  padding: 4px 25px 0 0;
  font-weight: 700;
  font-size: 1.25rem;
  border: none;
  background-color: transparent;
  width: 100%;
  text-align: left;
  position: relative;
}

dl dd {
  margin: 0;
  padding: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #d0d0d0;
}

dl.faq .desc {
  margin: 0;
  margin-top: 0.25em;
  font-size: 1.25rem;
  display: none;
  line-height: 1.5;
}

dl.faq button:hover,
dl.faq button:focus {
  cursor: pointer;
}

dl.faq button[aria-expanded="false"]::after {
  content: url("data:image/svg+xml,%3csvg width='16' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.7 1.7 8 8 14.3 1.7' stroke='%231a2a4a' fill='none' stroke-width='2'/%3e%3c/svg%3e");
  position: absolute;
  right: 0;
}

dl.faq button[aria-expanded="true"]::after {
  content: url("data:image/svg+xml,%3csvg width='16' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.7 1.7 8 8 14.3 1.7' stroke='%231a2a4a' fill='none' stroke-width='2'/%3e%3c/svg%3e");
  position: absolute;
  right: 0;
  transform: rotate(180deg);
}

/* Typography */

.signup-flow-step-1-layout h1 {
  font-weight: 600;
  font-size: 3rem;
  margin: 1.5em 0 0.5em;
}

.signup-flow-step-1-layout h1 span {
  font-weight: 700;
}

.signup-flow-step-1-layout h3 {
  color: #172a52;
  font-size: 1.75rem;
  font-weight: 700;
  border-bottom: 2px solid #d0d0d0;
  margin-top: 35px;
}

.signup-flow-step-1-layout sup {
  font-weight: 400;
  color: #666666;
  font-size: 1rem;
  line-height: 1.25rem;
}
p sup {
  display: block;
}

.plan-callout {
  padding-left: 35px;
  position: relative;
  padding-top: 15px;
  font-size: 1.3rem;
  font-weight: 700;
}

.plan-callout::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='59' height='59' viewBox='0 0 59 59' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39.5229 18.7224C40.0744 19.2876 40.4553 20.1964 40.1815 21.1661L40.0148 21.7564C37.4717 30.7624 34.1034 39.3992 29.9498 47.5614C29.4012 48.6394 28.2748 48.8933 27.4103 48.6681C26.5645 48.4478 25.7894 47.7565 25.5679 46.7365L23.5167 37.2938C23.29 36.2501 22.429 35.3871 21.4584 35.1679L12.2722 33.0934C11.2368 32.8596 10.578 32.0457 10.3712 31.2186C10.1635 30.3878 10.3715 29.2526 11.4336 28.6753C19.3552 24.3692 27.7422 20.869 36.4922 18.2168L37.0653 18.0431C38.057 17.7425 38.9729 18.1587 39.5229 18.7224ZM37.675 20.5529L37.2403 20.6847C28.8487 23.2283 20.8013 26.5655 13.1904 30.6571L22.0264 32.6525C24.0073 33.0998 25.6043 34.756 26.0367 36.7463L27.9875 45.7269C31.9092 37.914 35.1036 29.6589 37.5331 21.0556L37.675 20.5529Z' fill='%23FFC830'/%3E%3C/svg%3E");
  width: 40px;
  height: 50px;
  display: block;
  position: absolute;
  top: 8px;
  left: -14px;
}

ul.bulleted-list {
  list-style: disc;
  margin-left: 2rem;
}

.desc p {
  max-width: 55em;
}

@media (max-width: 85em) {
  .plan-selector .runs {
    height: 45px;
    padding: 0.5em;
  }

  .signup-flow-step-1-layout h1 {
    font-size: 2.3rem;
  }

  .plan-callout {
    font-size: 1.15rem;
    padding-left: 27px;
    padding-top: 0;
  }

  .signup-hed-price {
    font-size: 2rem;
  }

  .signup-hed {
    padding: 0 1.5rem 1.5rem;
    line-height: 1.5;
    font-size: 1.15rem;
  }

  .plan-callout::before {
    top: 8px;
    left: -9px;
    background-size: 40px;
    background-repeat: no-repeat;
  }
  .comparison-table tr:last-child td:last-child .button {
    display: inline-block;
  }
  
  .FAQ {
    padding: 0 1.5rem 1.5rem;
  }

  dl.faq .desc,
  dl.faq button {
    font-size: 1.15rem;
  }

  .wpt-pro-logo {
    background-size: contain;
  }

  .comparison-table .signup-button {
    padding: 0.7em 0.9em;
    font-size: 0.85em;
    line-height: 0.9;
    border-radius: 1.0rem;
  }

  #submit-expert-plan {
    white-space: normal;
  }

  .signup-button {
    border-radius: 1.5rem;
  }
}

@media (min-width: 50em) {
  .signup-hed {
    padding-left: 3rem;
  }
}

@media (min-width: 40em) {
  .signup-hed {
    padding-bottom: 6rem;
  }
}

/* Vertical responsive table for showing billing data */

.responsive-vertical-table tr {
  border-bottom: 1px solid #ddd;
}

.responsive-vertical-table th {
  display: none;
}

.responsive-vertical-table td {
  display: block;
}

.responsive-vertical-table td:first-child {
  padding-top: 0.5em;
}

.responsive-vertical-table td:last-child {
  padding-bottom: 0.5em;
}

.responsive-vertical-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 6.5em;
  display: inline-block;
}

@media (min-width: 1030px) {
  .responsive-vertical-table td:before {
    display: none;
  }
}

.responsive-vertical-table th,
.responsive-vertical-table td {
  text-align: left;
}

@media (min-width: 1030px) {
  .responsive-vertical-table th,
  .responsive-vertical-table td {
    display: table-cell;
  }

  .responsive-vertical-table th:last-child,
  .responsive-vertical-table td:last-child {
    padding-right: 0;
  }
}

.responsive-vertical-table {
  border-radius: 0.4em;
  overflow: hidden;
}

.responsive-vertical-table tr {
  border-color: #46637f;
}

/* END Vertical responsive table for showing billing data */

/*------------
TEMP FIX FOR UPGRADE
-------- */
/* account page sign up */
.radiobutton-tab-container
  input[type="radio"]:nth-of-type(1):checked
  ~ .annual-plans,
.radiobutton-tab-container
  input[type="radio"]:nth-of-type(2):checked
  ~ .monthly-plans {
  display: flex;
}

.radiobutton-tab-container input[type="radio"] {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
}
/* the dumbest tabs */

.plan {
  display: none;
}

@keyframes highlight {
  0% {
    background: #6b25cf;
  }

  100% {
    background: #3881e5;
  }
}

.radiobutton-tab-container {
  position: relative;
}

.radiobutton-tab-container
  input[type="radio"]:nth-of-type(1):focus
  ~ .radiobutton-group
  .radio-button:nth-of-type(1)
  label,
.radiobutton-tab-container
  input[type="radio"]:nth-of-type(2):focus
  ~ .radiobutton-group
  .radio-button:nth-of-type(2)
  label {
  animation: highlight 1s;
}

.radiobutton-tab-container
  input[type="radio"]:nth-of-type(1):checked
  ~ .radiobutton-group
  .radio-button:nth-of-type(1)
  label,
.radiobutton-tab-container
  input[type="radio"]:nth-of-type(2):checked
  ~ .radiobutton-group
  .radio-button:nth-of-type(2)
  label {
  background-color: #3881e5;
  color: white;
  font-weight: 600;
}

.dot {
  background-color: #a6cc65;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  width: 60px;
  height: 60px;
  align-items: center;
  font-weight: 700;
  font-size: 1.25rem;
  margin-top: 15px;
}

.user-info {
  display: flex;
  flex-direction: row;
  justify-content: normal;
  align-items: flex-start;
}

.user-info .image {
  margin-right: 20px;
}

.subscription-total {
  display: grid;
  align-self: end;
  margin-bottom: 20px;
}

.subscription-total li {
  padding: 1rem 0;
}

/** -----------------------
    Account tabs
----------------------------**/
.tab-labels {
  border-bottom: 2px solid rgb(0 0 0 / 20%);
  margin-bottom: 30px;
}

.tab-labels label {
  cursor: pointer;
  display: block;
}

.tabs-container .tab-content {
  display: none;
}

/** display the content functionality **/
.tabs-container
  > input[type="radio"]:nth-last-of-type(1):checked
  ~ .tab-content#api-settings-content,
.tabs-container
  > input[type="radio"]:nth-of-type(1):checked
  ~ .tab-content#account-settings-content,
.tabs-container
  > input[type="radio"]:nth-of-type(2):checked
  ~ .tab-content#billing-settings-content {
  display: block;
}

.tabs-container
  > input[type="radio"]:nth-of-type(3):checked
  ~ .tab-labels
  label:nth-of-type(3),
.tabs-container
  > input[type="radio"]:nth-of-type(1):checked
  ~ .tab-labels
  label:nth-of-type(1),
.tabs-container
  > input[type="radio"]:nth-of-type(2):checked
  ~ .tab-labels
  label:nth-of-type(2) {
  font-weight: 700;
  border-bottom: 3px solid #f9d856;
}

.tabs-container > input[type="radio"] {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
}

@media (min-width: 31rem) {
  .tab-labels label {
    display: inline;
  }

  .tab-labels label:not(:first-of-type) {
    margin-left: 2em;
  }
}

.payment-info {
  background: #f4f4f4;
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  padding: 1em;
}

.box.api-consumers {
  padding: 1em 0;
}

.box.api-consumers > h2,
.box.api-consumers > .info,
.box.api-consumers > .create-key-container > div {
  padding: 0 2em;
}

.center-banner {
  text-align: center;
  width: 100%;
}

.no-border {
  border: none;
}

.my-account-page .contents-container {
  max-width: 33rem;
}

.plan-summary-list li {
  line-height: 2rem;
}
.plan-summary-list__total {
  border-top: 1px solid #c8c8c8;
}

/** SELECT TABS **/
.select-tabs {
  background-color: #141e33;
  color: white;
  display: flex;
  flex-direction: row;
  padding: 1rem;
  border-radius: 5px;
  margin-bottom: 50px;
  align-items: center;
  flex-wrap: wrap;
}
.select-tabs .wpt-pro-logo {
  background-size: 70%;
  background-position: left;
  margin: 0;
}
.select-tabs h2 {
  max-width: 30%;
}
.select-tabs select {
  height: 40px;
  width: 150px;
}
.select-tabs p {
  padding: 0 2rem;
  margin: 0;
}
.select-tabs label {
  margin-left: auto;
  padding: 0 1rem;
}
@media (max-width: 400px) {
  .select-tabs .wpt-pro-logo {
    background-position: center;
  }
  .select-tabs h2 {
    max-width: 100%;
  }
  .select-tabs label {
    margin-left: 4em;
  }
  .select-tabs p {
    margin: 0 auto;
  }
  .subhed,
  .breadcrumbs {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.wpt-plan__reccomended:before {
  content: "Most Popular";
  background-color: purple;
  color: #fff;
  width: 100%;
  position: absolute;
  left: 0;
  top: -17px;
  border-radius: 5px 5px 0 0;
  padding: 5px;
  font-size: 0.9rem;
  box-sizing: border-box;
  border: none;
}
.wpt-plan__active:before {
  content: "Current Plan";
  background-color: rgb(204, 204, 204);
  color: #111;
  width: 100%;
  position: absolute;
  left: 0;
  top: -17px;
  border-radius: 5px 5px 0 0;
  padding: 2px;
  font-size: 0.9rem;
  box-sizing: border-box;
  border: none;
}

/* Radio button tabs used on plan summary*/
input#existing-card:not(:checked)
  ~ .radiobutton-tabs__tab-content[data-tab="existing-card"],
input#existing-card:checked
  ~ .radiobutton-tabs__tab-content[data-tab="new-card"] {
  display: none;
}

/* lets add some disabled buttons to forms that are invalid */
form:invalid button[type="submit"] {
  opacity: 0.3;
}

.pill-button .upgrade-icon,
.pill-button .downgrade-icon {
  display: flex;
  align-content: center;
  align-items: center;
}

.upgrade-icon::before {
  width: 26px;
  height: 26px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1425_5853)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13 24C19.0751 24 24 19.0751 24 13C24 6.92487 19.0751 2 13 2C6.92487 2 2 6.92487 2 13C2 19.0751 6.92487 24 13 24ZM13 26C20.1797 26 26 20.1797 26 13C26 5.8203 20.1797 0 13 0C5.8203 0 0 5.8203 0 13C0 20.1797 5.8203 26 13 26ZM14 8.41421L18.2929 12.7071C18.6834 13.0976 19.3166 13.0976 19.7071 12.7071C20.0976 12.3166 20.0976 11.6834 19.7071 11.2929L13.8839 5.46967C13.3957 4.98152 12.6043 4.98151 12.1161 5.46967L6.29289 11.2929C5.90237 11.6834 5.90237 12.3166 6.29289 12.7071C6.68342 13.0976 7.31658 13.0976 7.70711 12.7071L12 8.41421L12 20C12 20.5523 12.4477 21 13 21C13.5523 21 14 20.5523 14 20L14 8.41421Z' fill='%2300A850'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1425_5853'%3E%3Crect width='26' height='26' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 5px;
}

.downgrade-icon::before {
  width: 26px;
  height: 26px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1425_5867)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13 24C19.0751 24 24 19.0751 24 13C24 6.92487 19.0751 2 13 2C6.92487 2 2 6.92487 2 13C2 19.0751 6.92487 24 13 24ZM13 26C20.1797 26 26 20.1797 26 13C26 5.8203 20.1797 0 13 0C5.8203 0 0 5.8203 0 13C0 20.1797 5.8203 26 13 26ZM12 17.5858L7.70711 13.2929C7.31658 12.9024 6.68342 12.9024 6.29289 13.2929C5.90237 13.6834 5.90237 14.3166 6.29289 14.7071L12.1161 20.5303C12.6043 21.0185 13.3957 21.0185 13.8839 20.5303L19.7071 14.7071C20.0976 14.3166 20.0976 13.6834 19.7071 13.2929C19.3166 12.9024 18.6834 12.9024 18.2929 13.2929L14 17.5858L14 6C14 5.44771 13.5523 5 13 5C12.4477 5 12 5.44771 12 6L12 17.5858Z' fill='%23808080'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1425_5867'%3E%3Crect width='26' height='26' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 5px;
}

.downgrade-icon__black::before,
.upgrade-icon__black::before {
  fill: #111111;
}

@media (min-width: 90rem) {
  .upgrade-icon::before,
  .downgrade-icon::before {
    content: "";
  }
}

/** negative margins make me feel bad **/
.info-notice {
  background-color: #e8f1ff;
  padding: 1em 2em;
  display: block;
  margin: 0 -1em -2em;
}
.status__info::before,
.info-notice::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM9 5C9 4.44772 9.44771 4 10 4C10.5523 4 11 4.44772 11 5C11 5.55228 10.5523 6 10 6C9.44771 6 9 5.55228 9 5ZM9 9C9 8.44772 9.44771 8 10 8C10.5523 8 11 8.44772 11 9V15C11 15.5523 10.5523 16 10 16C9.44771 16 9 15.5523 9 15V9Z' fill='%230078D4'/%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  display: inline-flex;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 5px;
}

.total__due-today {
  border-top: 1px solid #c8c8c8;
}

.card-section ul {
  margin-bottom: 1rem;
}

.signup-flow-layout .notification-banner__error {
  color: rgb(14, 30, 56);
}

/** Chargify form **/
.cc-detail-container,
.cardholder-name-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}

.vat-number-container label {
  display: block;
  margin-bottom: 0.5rem;
}

.vat-number-container input {
  margin-bottom: 1.5rem;
  border: 1px solid;
}

.signup-card-container {
  border: 1px solid #334870;
  border-radius: 8px;
  max-width: 34rem;
}

.signup-card-hed,
.signup-card-body {
  padding: 0 24px;
}

.signup-card-hed {
  border-bottom: 1px solid #334870;
}

.signup-card-hed h4 {
  font-weight: 400;
  margin: 0;
}

#cc_cardholder_first_name iframe,
#cc_cardholder_last_name iframe {
  width: 235px !important;
}

#cc_year iframe,
#cc_month iframe,
#cc_cvv iframe {
  width: 158px !important;
}
/** END Chargify form **/

/** ApiKeyForm **/
.apikey-control button[aria-disabled="true"],
[data-apikey-form-submit][aria-disabled] {
  opacity: 0.3;
  pointer-events: none;
  cursor: auto;
}
/** END APiKeyForm **/