.grid-content,
.grid-content * {
  box-sizing: border-box;
}
.payment-container {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: stretch;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  margin: 20px;
}
.payment-body-left{
  background: var(--color-background-success-0);
    width: 100%;
    height: 830px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    border-radius: 24px 0 0 24px;
}
.payment-body-right{
  background: var(--color-background-grayscale-0);
    width: 100%;
    height: 830px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    border-radius: 0 24px 24px 0;
}
.payment-grid-content {
  background: #ffffff;
  height: 830px;
  position: relative;
  overflow: hidden;
}
.payment-your-payment-has-been-approved {
    color: var(--color-typeface-grayscale-300, #000814);
    /* typescale/header/desktop/1XL */
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 120% */
    letter-spacing: -1.6px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.payment-sucesso {
  background: var(--color-background-success-100, #cffe4c);
  border-radius: 56px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.payment-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}
.payment-id-22330028283 {
  color: var(--color-typeface-grayscale-300);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.64px;
}
.payment-logo {
  width: 32px;
  height: 32px;
  left: 40px;
  top: 40px;
  position: absolute;
}
.payment-icone {
  height: auto;
  right: 0%;
  left: 0%;
  width: 100%;
  bottom: 0%;
  top: 0%;
  height: 100%;
  overflow: visible;
}
.payment-typography {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
}
.payment-heading-1-xl {
  color: var(--color-typeface-grayscale-300, #000814);
/* typescale/header/desktop/1XL */
font-family: Inter;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 120% */
letter-spacing: -1.6px;
  position: relative;
}
.payment-card {
  border-radius: 24px;
  border-style: solid;
  border-color: var(--color-neutral-grayscale-100, #e2e3e8);
  border-width: 1px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
.payment-frame-2727 {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.payment-tag {
  background: var(--color-neutral-success-150, #bcfe00);
  border-radius: 24px;
  border-style: solid;
  border-color: var(--color-neutral-success-150, #bcfe00);
  border-width: 1px;
  padding: 8px 12px 8px 12px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.payment-star {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
  overflow: visible;
}
.payment-recomended {
  color: var(--color-typeface-grayscale-300, #000814);
  text-align: left;
  font-family: var(
    --typescale-highlight-desktop-default-font-family,
    "Inter-ExtraBold",
    sans-serif
  );
  font-size: var(--typescale-highlight-desktop-default-font-size, 12px);
  line-height: var(--typescale-highlight-desktop-default-line-height, 16px);
  font-weight: var(--typescale-highlight-desktop-default-font-weight, 800);
  position: relative;
}
.payment-frame-2723 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.payment-dns-configuration {
 color: var(--color-typeface-grayscale-200, #6D6E82);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; 
letter-spacing: -0.64px;
}
.payment-to-perform-optimizations-on-your-website-point-the-dns-to-your-hosting-provider {
  color: var(--color-typeface-grayscale-200, #6D6E82);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.64px;
    text-align: center;
}
.payment-arrow-circle-right {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  position: relative;
  overflow: visible;
}
.payment-typography2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: center;
}
.payment-heading-1-xl2 {
  color: #000814;
  text-align: left;
  font-family: var(
    --typescale-header-desktop-1xl-font-family,
    "Inter-Bold",
    sans-serif
  );
  font-size: var(--typescale-header-desktop-1xl-font-size, 40px);
  line-height: var(--typescale-header-desktop-1xl-line-height, 48px);
  font-weight: var(--typescale-header-desktop-1xl-font-weight, 700);
  position: relative;
  align-self: stretch;
}
.payment-frame-2725 {
  border-radius: 24px;
  border-style: solid;
  border-color: var(--color-neutral-success-200, #96cc00);
  border-width: 1px;
  padding: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.payment-envelope-simple {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  position: relative;
  overflow: visible;
}
.payment-you-will-receive-the-proof-of-purchase-and-invoice-for-your-purchase-in-your-email {
  color: var(--color-typeface-success-300, #4b6600);
  text-align: left;
  font-family: var(
    --typescale-paragraph-desktop-3m-font-family,
    "Inter-SemiBold",
    sans-serif
  );
  font-size: var(--typescale-paragraph-desktop-3m-font-size, 16px);
  line-height: var(--typescale-paragraph-desktop-3m-line-height, 24px);
  font-weight: var(--typescale-paragraph-desktop-3m-font-weight, 600);
  position: relative;
  width: 380px;
  text-align: center;
}

.frame-309,
.frame-309 * {
  box-sizing: border-box;
}
.frame-309 {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex: 1;
  position: relative;
}
.pill {
  background: var(--color-neutral-grayscale-0, #ffffff);
  border-radius: 24px;
  border-style: solid;
  border-color: var(--color-neutral-grayscale-100, #e2e3e8);
  border-width: 1px;
  padding: 8px 12px 8px 12px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.pill:hover {
border-color: var(--color-neutral-grayscale-300, #000814);
cursor: pointer;
}
.pill:active {
    background: var(--color-neutral-grayscale-300, #000814);
    color: var(--color-typeface-grayscale-0, #ffffff);
}

.pill:active .ip-address-1  {
    color: white;
}

.pill:active .copy-simple path {
    fill: white;
}

.pill:active .ip-address-2 {
    color: white;
}

.pill:active .copy-simple2 path {
    fill: white;
}

.pill:active .ip-address-3 {
    color: white;
}

.pill:active .copy-simple3 path {
    fill: white;
}

.pill:active .ip-address-4 {
    color: white;
}

.pill:active .copy-simple4 path {
    fill: white;
}


.copy-simple {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
  overflow: visible;
  cursor: pointer;
}

.ip-address-1 {
 color: var(--color-typeface-grayscale-300, #000814);
/* typescale/highlight/desktop/Default */
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 800;
line-height: 16px; /* 133.333% */
letter-spacing: -0.48px;
}
.ip-address-2 {
 color: var(--color-typeface-grayscale-300, #000814);
/* typescale/highlight/desktop/Default */
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 800;
line-height: 16px; /* 133.333% */
letter-spacing: -0.48px;
}
.ip-address-3 {
 color: var(--color-typeface-grayscale-300, #000814);
/* typescale/highlight/desktop/Default */
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 800;
line-height: 16px; /* 133.333% */
letter-spacing: -0.48px;
}
.ip-address-4 {
 color: var(--color-typeface-grayscale-300, #000814);
/* typescale/highlight/desktop/Default */
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 800;
line-height: 16px; /* 133.333% */
letter-spacing: -0.48px;
}
.copy-simple2 {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
  overflow: visible;
  cursor: pointer;
}
.copy-simple3 {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
  overflow: visible;
  cursor: pointer;
}
.copy-simple4 {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
  overflow: visible;
  cursor: pointer;
}

.success-container{
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

.configure-container{
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
}