/* ==========================================================
   NOYTRIX BILLING V52
   ========================================================== */

#screen-billing {
  padding: 0 !important;
  overflow: hidden !important;
}

#billingApp {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.billing-v52 {
  --bg: #041224;
  --panel: #071b33;
  --panel2: #09213d;

  --line:
    rgba(67, 127, 188, .29);

  --line2:
    rgba(77, 155, 232, .45);

  --text: #f6f8fd;
  --muted: #819fc2;
  --soft: #adc4dc;

  --gold: #f8bb37;
  --gold2: #ffd765;

  --green: #37dda0;
  --blue: #50aeff;
  --purple: #9b76ff;

  position: relative;

  width: 100%;
  height: 100%;

  min-height: 0;

  padding: 17px 21px;

  display: grid;
  grid-template-rows:
    auto
    43px
    minmax(0, 1fr);

  gap: 10px;

  overflow: hidden;

  color: var(--text);

  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(42, 109, 205, .11),
      transparent 26%
    ),
    radial-gradient(
      circle at 88% 4%,
      rgba(248, 187, 55, .06),
      transparent 23%
    );
}

.billing-v52 *,
.billing-v52 *::before,
.billing-v52 *::after {
  box-sizing: border-box;
}

.billing-v52 button,
.billing-v52 a {
  font: inherit;
}

.billing-v52 a {
  text-decoration: none;
}


/* HEADER */

.b52-header {
  min-height: 65px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;
}

.b52-eyebrow,
.b52-kicker {
  display: block;

  color: var(--gold);

  font-size: 9px !important;
  font-weight: 950 !important;

  letter-spacing: .12em;
  text-transform: uppercase;
}

.b52-header h1 {
  margin: 2px 0 0;

  color: #fff;

  font-size: 32px !important;
  line-height: 1 !important;

  font-weight: 950 !important;
  letter-spacing: -.045em;
}

.b52-header > div > p {
  margin: 5px 0 0;

  color: var(--muted);

  font-size: 11px !important;
  font-weight: 700 !important;
}

.b52-account {
  min-width: 255px;

  padding: 8px 10px;

  display: flex;
  align-items: center;
  gap: 9px;

  border: 1px solid var(--line);
  border-radius: 11px;

  background:
    rgba(6, 25, 46, .80);
}

.b52-avatar {
  width: 35px;
  height: 35px;

  flex: 0 0 35px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(248, 187, 55, .55);

  border-radius: 50%;

  color: var(--gold);

  background:
    rgba(248, 187, 55, .07);

  font-size: 10px !important;
  font-weight: 950 !important;
}

.b52-account > div {
  min-width: 0;
}

.b52-account > div strong,
.b52-account > div span {
  display: block;
}

.b52-account > div strong {
  color: white;

  font-size: 10px !important;
  font-weight: 950 !important;
}

.b52-account > div span {
  max-width: 125px;

  overflow: hidden;

  color: var(--muted);

  font-size: 8px !important;
  font-weight: 750 !important;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* GENERIC */

.b52-card {
  position: relative;

  border:
    1px solid
    var(--line);

  border-radius: 14px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(9, 30, 56, .93),
      rgba(5, 21, 40, .95)
    );

  box-shadow:
    0 16px 34px
    rgba(0, 0, 0, .18),

    inset 0 1px 0
    rgba(255,255,255,.02);
}

.b52-card::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.018),
      transparent 38%
    );
}

.b52-btn {
  min-height: 37px;

  padding: 0 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  border:
    1px solid
    rgba(72, 142, 209, .38);

  border-radius: 9px;

  color: #dcebfa;

  background:
    linear-gradient(
      180deg,
      rgba(17, 48, 82, .82),
      rgba(7, 28, 52, .86)
    );

  cursor: pointer;

  font-size: 10px !important;
  font-weight: 900 !important;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.b52-btn:hover:not(:disabled) {
  transform:
    translateY(-1px);

  border-color:
    rgba(80, 169, 255, .72);
}

.b52-btn:disabled {
  opacity: .63;
  cursor: default;
}

.b52-btn-primary {
  color: #07111c;

  border-color:
    rgba(255, 197, 61, .93);

  background:
    linear-gradient(
      135deg,
      var(--gold2),
      #ffad1c
    );

  box-shadow:
    0 10px 24px
    rgba(248, 177, 35, .14);
}

.b52-btn-active {
  color: #071912;

  border-color:
    rgba(55, 221, 160, .72);

  background:
    linear-gradient(
      135deg,
      #64edb6,
      #28cd90
    );
}

.b52-btn .b52-icon {
  width: 18px;
  height: 18px;

  border: 0;

  background: transparent;
}

.b52-btn .b52-icon svg {
  width: 15px;
  height: 15px;
}

.b52-icon {
  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(75, 150, 224, .25);

  border-radius: 10px;

  color: var(--blue);

  background:
    rgba(37, 105, 173, .10);
}

.b52-icon svg {
  width: 19px;
  height: 19px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.b52-pill {
  min-height: 23px;

  padding: 0 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(84, 132, 180, .30);

  border-radius: 999px;

  color: #86a5c7;

  background:
    rgba(5, 25, 47, .74);

  font-size: 8px !important;
  font-weight: 950 !important;

  white-space: nowrap;
}

.b52-pill.active,
.b52-live {
  color: #6df1b5;

  border-color:
    rgba(55, 221, 160, .30);

  background:
    rgba(55, 221, 160, .08);
}

.b52-live {
  padding: 5px 8px;

  border: 1px solid;

  border-radius: 999px;

  font-size: 7px !important;
  font-weight: 950 !important;

  letter-spacing: .07em;
}


/* TABS */

.b52-tabs {
  padding: 3px;

  display: flex;
  align-items: stretch;

  gap: 4px;

  border:
    1px solid
    var(--line);

  border-radius: 11px;

  background:
    rgba(4, 19, 37, .76);
}

.b52-tabs button {
  min-width: 185px;

  padding: 0 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  border: 0;
  border-radius: 8px;

  color: #7192b7;
  background: transparent;

  cursor: pointer;

  font-size: 10px !important;
  font-weight: 950 !important;
}

.b52-tabs button.active {
  color: white;

  background:
    linear-gradient(
      180deg,
      rgba(28, 64, 100, .90),
      rgba(13, 40, 71, .92)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(83, 149, 213, .18);
}

.b52-tabs .b52-icon {
  width: 25px;
  height: 25px;

  flex-basis: 25px;

  border-radius: 7px;
}

.b52-tabs .b52-icon svg {
  width: 14px;
  height: 14px;
}

.b52-tabs > span {
  margin-left: auto;

  padding-right: 10px;

  display: flex;
  align-items: center;

  color: #5f7b9b;

  font-size: 8px !important;
  font-weight: 800 !important;
}


/* BODY */

.b52-body {
  min-height: 0;
  overflow: hidden;
}


/* PERSONAL */

.b52-personal {
  height: calc(100% - 128px);

  min-height: 0;

  display: grid;
  grid-template-columns:
    minmax(0, 1.24fr)
    minmax(330px, .76fr);

  gap: 10px;
}

.b52-plans {
  padding: 13px;

  min-height: 0;

  display: grid;
  grid-template-rows:
    auto
    minmax(0, 1fr);

  gap: 10px;
}

.b52-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 15px;
}

.b52-section-head h2 {
  margin: 2px 0 0;

  color: white;

  font-size: 15px !important;
  font-weight: 950 !important;
}

.b52-section-head p {
  margin: 3px 0 0;

  max-width: 680px;

  color: var(--muted);

  font-size: 9px !important;
  font-weight: 720 !important;
}

.b52-plan-grid {
  min-height: 0;

  display: grid;
  grid-template-columns:
    .83fr
    1.17fr;

  gap: 10px;
}

.b52-plan {
  position: relative;

  min-height: 0;

  padding: 14px;

  display: flex;
  flex-direction: column;

  border:
    1px solid
    rgba(68, 128, 187, .23);

  border-radius: 12px;

  background:
    linear-gradient(
      150deg,
      rgba(10, 34, 62, .84),
      rgba(5, 22, 41, .92)
    );
}

.b52-plan-pro {
  border-color:
    rgba(248, 187, 55, .58);

  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(248, 187, 55, .14),
      transparent 31%
    ),
    linear-gradient(
      150deg,
      rgba(13, 39, 68, .95),
      rgba(6, 24, 44, .97)
    );

  box-shadow:
    0 16px 35px
    rgba(248, 170, 29, .07);
}

.b52-recommended {
  position: absolute;
  top: 0;
  right: 0;

  padding: 5px 9px;

  border-radius:
    0 11px 0 9px;

  color: #101820;
  background: var(--gold);

  font-size: 7px !important;
  font-weight: 1000 !important;

  letter-spacing: .07em;
}

.b52-plan-head {
  display: flex;
  align-items: center;

  gap: 9px;
}

.b52-plan-head div span,
.b52-plan-head div strong {
  display: block;
}

.b52-plan-head div span {
  color: #718fb2;

  font-size: 8px !important;
  font-weight: 850 !important;
}

.b52-plan-head div strong {
  margin-top: 1px;

  color: white;

  font-size: 16px !important;
  font-weight: 950 !important;
}

.b52-price {
  margin: 12px 0 10px;

  display: flex;
  align-items: flex-end;

  gap: 5px;
}

.b52-price strong {
  color: white;

  font-size: 28px !important;
  font-weight: 950 !important;
  line-height: .9;

  letter-spacing: -.04em;
}

.b52-price span {
  padding-bottom: 2px;

  color: #809ab8;

  font-size: 8px !important;
  font-weight: 850 !important;
}

.b52-plan ul,
.b52-api-plan ul {
  margin: 0;
  padding: 0;

  display: grid;
  gap: 6px;

  list-style: none;
}

.b52-plan li,
.b52-api-plan li {
  position: relative;

  padding-left: 17px;

  color: #b4c8de;

  font-size: 9px !important;
  font-weight: 770 !important;
  line-height: 1.28;
}

.b52-plan li::before,
.b52-api-plan li::before {
  content: "✓";

  position: absolute;
  left: 0;

  color: var(--green);

  font-weight: 1000;
}

.b52-plan li.muted {
  color: #617b9a;
}

.b52-plan li.muted::before {
  content: "—";
  color: #617b9a;
}

.b52-plan > .b52-btn {
  width: 100%;

  margin-top: auto;
}

.b52-pay-note {
  margin-top: 6px;

  display: flex;
  justify-content: center;
  gap: 5px;

  color: #607b9b;

  font-size: 7px !important;
  font-weight: 800 !important;
}


/* PERSONAL SIDE */

.b52-personal-side {
  min-height: 0;

  display: grid;
  grid-template-rows:
    1fr
    1fr;

  gap: 10px;
}

.b52-current,
.b52-everywhere {
  padding: 13px;
}

.b52-current-head {
  display: flex;
  align-items: center;

  gap: 9px;
}

.b52-current-head > div span,
.b52-current-head > div strong {
  display: block;
}

.b52-current-head > div span {
  color: #7592b4;

  font-size: 8px !important;
  font-weight: 850 !important;
}

.b52-current-head > div strong {
  margin-top: 2px;

  color: white;

  font-size: 14px !important;
  font-weight: 950 !important;
}

.b52-current-head > .b52-pill {
  margin-left: auto;
}

.b52-current-grid {
  margin-top: 10px;

  display: grid;
  grid-template-columns:
    repeat(2, 1fr);

  gap: 6px;
}

.b52-current-grid > div {
  min-width: 0;

  padding: 8px;

  border:
    1px solid
    rgba(70, 130, 190, .16);

  border-radius: 8px;

  background:
    rgba(4, 22, 42, .55);
}

.b52-current-grid span,
.b52-current-grid strong {
  display: block;
}

.b52-current-grid span {
  color: #6584a8;

  font-size: 7px !important;
  font-weight: 900 !important;

  text-transform: uppercase;
  letter-spacing: .06em;
}

.b52-current-grid strong {
  margin-top: 3px;

  overflow: hidden;

  color: #d5e4f4;

  font-size: 8px !important;
  font-weight: 850 !important;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.b52-current-actions {
  margin-top: 7px;
}

.b52-current-actions .b52-btn {
  width: 100%;
}

.b52-everywhere h3 {
  margin: 2px 0 0;

  color: white;

  font-size: 14px !important;
  font-weight: 950 !important;
}

.b52-everywhere > p {
  margin: 4px 0 9px;

  color: var(--muted);

  font-size: 8px !important;
  font-weight: 720 !important;
}

.b52-platforms {
  display: grid;
  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr;

  align-items: center;

  gap: 4px;
}

.b52-platforms > div {
  min-width: 0;

  padding: 7px 3px;

  display: grid;
  place-items: center;

  gap: 4px;

  border:
    1px solid
    rgba(68, 128, 188, .16);

  border-radius: 8px;

  background:
    rgba(4, 21, 41, .60);
}

.b52-platforms .b52-icon {
  width: 27px;
  height: 27px;

  flex-basis: 27px;

  border-radius: 7px;
}

.b52-platforms .b52-icon svg {
  width: 14px;
  height: 14px;
}

.b52-platforms > div > span {
  color: #9fb5ce;

  font-size: 7px !important;
  font-weight: 900 !important;

  white-space: nowrap;
}

.b52-platforms > b {
  color: #4f6d8f;

  font-size: 9px;
}

.b52-everywhere-actions {
  margin-top: 8px;

  display: grid;
  grid-template-columns:
    1fr 1fr;

  gap: 6px;
}


/* HISTORY */

.b52-history {
  height: 118px;

  margin-top: 10px;

  padding: 10px 12px;

  display: grid;
  grid-template-rows:
    auto
    minmax(0, 1fr);

  gap: 7px;
}

.b52-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.b52-history-head h3 {
  margin: 0;

  color: white;

  font-size: 11px !important;
  font-weight: 950 !important;
}

.b52-history-head p {
  margin: 1px 0 0;

  color: #6783a2;

  font-size: 7px !important;
  font-weight: 750 !important;
}

.b52-history-head > span {
  color: #587592;

  font-size: 7px !important;
  font-weight: 800 !important;
}

.b52-history-table {
  min-height: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(68, 127, 184, .15);

  border-radius: 8px;

  background:
    rgba(3, 18, 35, .45);
}

.b52-history-row {
  min-height: 25px;

  padding: 0 8px;

  display: grid;
  grid-template-columns:
    1fr
    1.2fr
    .8fr
    1.15fr
    .75fr;

  align-items: center;

  gap: 7px;

  border-bottom:
    1px solid
    rgba(68, 127, 184, .10);

  color: #9db4ce;

  font-size: 7px !important;
  font-weight: 760 !important;
}

.b52-history-row.head {
  min-height: 21px;

  color: #58799f;

  background:
    rgba(11, 38, 67, .25);

  font-size: 6px !important;
  font-weight: 950 !important;

  text-transform: uppercase;
  letter-spacing: .05em;
}

.b52-status-pill {
  width: max-content;

  padding: 2px 5px;

  border:
    1px solid
    rgba(55, 221, 160, .22);

  border-radius: 999px;

  color: #68eab1;

  background:
    rgba(55, 221, 160, .06);
}

.b52-empty {
  min-height: 45px;

  display: grid;
  place-items: center;

  color: #607d9e;

  font-size: 8px !important;
  font-weight: 800 !important;
}


/* API */

.b52-api {
  height: 100%;

  min-height: 0;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    350px;

  gap: 10px;
}

.b52-api-main {
  min-height: 0;

  display: grid;
  grid-template-rows:
    175px
    minmax(0, 1fr);

  gap: 10px;
}

.b52-api-hero {
  padding: 13px;

  display: grid;
  grid-template-columns:
    1.1fr
    .9fr;

  gap: 11px;
}

.b52-api-copy h2 {
  margin: 2px 0 0;

  color: white;

  font-size: 17px !important;
  font-weight: 950 !important;

  letter-spacing: -.025em;
}

.b52-api-copy > p {
  margin: 4px 0 9px;

  color: var(--muted);

  font-size: 8px !important;
  font-weight: 720 !important;
  line-height: 1.4;
}

.b52-api-output {
  display: grid;
  grid-template-columns:
    repeat(2, 1fr);

  gap: 5px;
}

.b52-api-output > div {
  padding: 6px 7px;

  border:
    1px solid
    rgba(67, 128, 188, .15);

  border-radius: 7px;

  background:
    rgba(4, 22, 41, .52);
}

.b52-api-output strong,
.b52-api-output span {
  display: block;
}

.b52-api-output strong {
  color: #d6e6f7;

  font-size: 8px !important;
  font-weight: 900 !important;
}

.b52-api-output span {
  margin-top: 1px;

  color: #6483a5;

  font-size: 6px !important;
  font-weight: 750 !important;
}

.b52-code {
  min-height: 0;

  padding: 9px;

  border:
    1px solid
    rgba(45, 190, 229, .17);

  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      rgba(2, 15, 29, .97),
      rgba(4, 25, 45, .94)
    );
}

.b52-code > div {
  display: flex;
  align-items: center;
  justify-content: space-between;

  color: #5ed9ae;

  font-size: 7px !important;
  font-weight: 900 !important;
}

.b52-code pre {
  margin: 7px 0 0;

  color: #9bc3e7;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size: 7px !important;
  font-weight: 650 !important;
  line-height: 1.38;

  white-space: pre-wrap;
}

.b52-api-plans {
  min-height: 0;

  padding: 10px;

  display: grid;
  grid-template-columns:
    repeat(3, 1fr);

  gap: 8px;
}

.b52-api-plan {
  position: relative;

  min-width: 0;

  padding: 11px;

  display: flex;
  flex-direction: column;

  border:
    1px solid
    rgba(68, 130, 190, .20);

  border-radius: 10px;

  background:
    rgba(7, 27, 50, .70);
}

.b52-api-plan.featured {
  border-color:
    rgba(248, 187, 55, .52);

  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(248, 187, 55, .10),
      transparent 38%
    ),
    rgba(8, 29, 52, .82);
}

.b52-api-plan h3 {
  margin: 3px 0 0;

  color: white;

  font-size: 13px !important;
  font-weight: 950 !important;
}

.b52-api-price {
  margin: 6px 0 8px;

  display: flex;
  align-items: flex-end;

  gap: 4px;
}

.b52-api-price strong {
  color: white;

  font-size: 22px !important;
  font-weight: 950 !important;
}

.b52-api-price span {
  padding-bottom: 2px;

  color: #758fac;

  font-size: 7px !important;
  font-weight: 850 !important;
}

.b52-api-plan > .b52-btn {
  width: 100%;

  margin-top: auto;
}


/* API SIDE */

.b52-api-side {
  min-height: 0;

  display: grid;
  grid-template-rows:
    auto
    minmax(0, 1fr);

  gap: 10px;
}

.b52-api-access,
.b52-api-why {
  padding: 12px;
}

.b52-api-access-head {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 7px;
}

.b52-api-access-head > div span,
.b52-api-access-head > div strong {
  display: block;
}

.b52-api-access-head > div span {
  color: #617fa1;

  font-size: 7px !important;
  font-weight: 900 !important;
}

.b52-api-access-head > div strong {
  margin-top: 1px;

  color: white;

  font-size: 11px !important;
  font-weight: 950 !important;
}

.b52-api-access-head > .b52-pill {
  margin-left: auto;
}

.b52-api-access-row {
  min-height: 30px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  border-top:
    1px solid
    rgba(69, 128, 184, .13);
}

.b52-api-access-row span {
  color: #6683a3;

  font-size: 7px !important;
  font-weight: 800 !important;
}

.b52-api-access-row strong {
  color: #d2e1f2;

  font-size: 8px !important;
  font-weight: 900 !important;
}

.b52-api-buttons {
  margin-top: 6px;

  display: grid;
  grid-template-columns:
    1fr 1fr;

  gap: 5px;
}

.b52-api-buttons .b52-btn {
  min-height: 33px;

  padding: 0 8px;

  font-size: 8px !important;
}

.b52-secret {
  margin-top: 7px;

  padding: 8px;

  border:
    1px solid
    rgba(55, 221, 160, .28);

  border-radius: 8px;

  background:
    rgba(55, 221, 160, .06);
}

.b52-secret > strong {
  color: #6ceeb5;

  font-size: 8px !important;
  font-weight: 950 !important;
}

.b52-secret > p {
  margin: 2px 0 6px;

  color: #709e89;

  font-size: 6px !important;
  font-weight: 750 !important;
}

.b52-secret > div {
  display: flex;
  gap: 5px;
}

.b52-secret code {
  min-width: 0;
  flex: 1;

  padding: 5px 6px;

  overflow: hidden;

  border-radius: 5px;

  color: #c5ffe4;
  background: #031b12;

  font-size: 7px !important;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.b52-secret button {
  padding: 0 7px;

  border:
    1px solid
    rgba(55, 221, 160, .28);

  border-radius: 5px;

  color: #6ceeb5;
  background: transparent;

  cursor: pointer;

  font-size: 7px !important;
  font-weight: 900 !important;
}

.b52-api-why h3 {
  margin: 2px 0 8px;

  color: white;

  font-size: 12px !important;
  font-weight: 950 !important;
}

.b52-why-list {
  display: grid;
  gap: 6px;
}

.b52-why-list > div {
  padding: 7px;

  display: flex;
  align-items: flex-start;

  gap: 7px;

  border:
    1px solid
    rgba(67, 127, 185, .14);

  border-radius: 8px;

  background:
    rgba(4, 21, 40, .53);
}

.b52-why-list b {
  width: 23px;
  height: 23px;

  flex: 0 0 23px;

  display: grid;
  place-items: center;

  border-radius: 6px;

  color: var(--gold);

  background:
    rgba(248, 187, 55, .08);

  font-size: 6px !important;
  font-weight: 950 !important;
}

.b52-why-list p {
  margin: 0;

  color: #91abc7;

  font-size: 7px !important;
  font-weight: 730 !important;
  line-height: 1.35;
}

.b52-security-bar {
  min-height: 39px;

  padding: 0 10px;

  display: flex;
  align-items: center;

  gap: 8px;

  border:
    1px solid
    rgba(68, 129, 188, .18);

  border-radius: 9px;

  background:
    rgba(5, 23, 43, .68);
}

.b52-security-bar .b52-icon {
  width: 26px;
  height: 26px;

  flex-basis: 26px;

  border-radius: 7px;
}

.b52-security-bar .b52-icon svg {
  width: 13px;
  height: 13px;
}

.b52-security-bar strong,
.b52-security-bar span {
  display: block;
}

.b52-security-bar strong {
  color: #c8d9eb;

  font-size: 7px !important;
  font-weight: 950 !important;
}

.b52-security-bar span {
  margin-top: 1px;

  color: #617e9e;

  font-size: 6px !important;
  font-weight: 750 !important;
}


/* TOAST */

.billing-v52-toast {
  margin-top: 8px;

  padding: 10px 13px;

  border:
    1px solid
    rgba(81, 151, 220, .40);

  border-radius: 9px;

  color: #e7f3ff;
  background:
    rgba(6, 25, 46, .97);

  box-shadow:
    0 13px 35px
    rgba(0,0,0,.26);

  transform:
    translateY(-5px);

  opacity: 0;

  transition:
    .2s ease;

  font-size: 10px;
  font-weight: 850;
}

.billing-v52-toast.show {
  transform:
    translateY(0);

  opacity: 1;
}


/* RESPONSIVE */

@media(max-width:1200px) {

  .billing-v52 {
    padding:
      14px;
  }

  .b52-personal {
    grid-template-columns:
      minmax(0,1fr)
      310px;
  }

  .b52-api {
    grid-template-columns:
      minmax(0,1fr)
      315px;
  }

}


@media(max-width:1000px) {

  #screen-billing {
    overflow-y:
      auto !important;
  }

  #billingApp {
    height:
      auto;
  }

  .billing-v52 {
    height:
      auto;

    min-height:
      100%;

    overflow:
      visible;
  }

  .b52-body {
    overflow:
      visible;
  }

  .b52-personal {
    height:
      auto;

    grid-template-columns:
      1fr;
  }

  .b52-personal-side {
    grid-template-columns:
      1fr 1fr;

    grid-template-rows:
      auto;
  }

  .b52-history {
    height:
      auto;
  }

  .b52-api {
    grid-template-columns:
      1fr;
  }

  .b52-api-main {
    grid-template-rows:
      auto auto;
  }

  .b52-api-side {
    grid-template-columns:
      1fr 1fr;

    grid-template-rows:
      auto;
  }

}


@media(max-width:700px) {

  .b52-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .b52-account {
    width:
      100%;
  }

  .b52-tabs > span {
    display:
      none;
  }

  .b52-tabs button {
    flex:
      1;

    min-width:
      0;
  }

  .b52-plan-grid,
  .b52-personal-side,
  .b52-api-plans,
  .b52-api-side,
  .b52-api-hero {
    grid-template-columns:
      1fr;
  }

  .b52-platforms {
    grid-template-columns:
      repeat(4, 1fr);
  }

  .b52-platforms > b {
    display:
      none;
  }

}


/* ==========================================================
   NOYTRIX PRO USD TERMS V53
   ========================================================== */

.b52-pro-terms {
  margin: 12px 0 11px;

  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 7px;
}

.b52-pro-terms button {
  position: relative;

  min-width: 0;

  padding: 9px 8px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  border:
    1px solid
    rgba(75, 137, 199, .24);

  border-radius: 9px;

  color: inherit;

  background:
    rgba(4, 21, 40, .64);

  cursor: pointer;

  text-align: left;

  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

.b52-pro-terms button:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(248, 187, 55, .52);
}

.b52-pro-terms button.active {
  border-color:
    rgba(248, 187, 55, .80);

  background:
    linear-gradient(
      145deg,
      rgba(248, 187, 55, .11),
      rgba(7, 27, 49, .86)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(248, 187, 55, .07),
    0 8px 22px
    rgba(248, 175, 32, .07);
}

.b52-pro-terms button.active::after {
  content: "✓";

  position: absolute;
  top: 7px;
  right: 7px;

  width: 17px;
  height: 17px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #082016;
  background: #3ddd9f;

  font-size: 9px;
  font-weight: 1000;
}

.b52-pro-terms span,
.b52-pro-terms strong,
.b52-pro-terms small {
  display: block;
}

.b52-pro-terms span {
  color: #dce9f7;

  font-size: 9px !important;
  font-weight: 900 !important;
}

.b52-pro-terms strong {
  margin-top: 5px;

  color: #ffffff;

  font-size: 15px !important;
  font-weight: 950 !important;
}

.b52-pro-terms button.active strong {
  color: #ffd15b;
}

.b52-pro-terms small {
  margin-top: 3px;

  color: #6e8dab;

  font-size: 6px !important;
  font-weight: 800 !important;

  white-space: nowrap;
}

@media(max-width:700px) {
  .b52-pro-terms {
    grid-template-columns: 1fr;
  }
}