/* ==========================================================
   NOYTRIX PROFILE V56
   ========================================================== */

.p56-hidden-nav {
  display: none !important;
}


/* ==========================================================
   PROFILE MODE
   ========================================================== */

body.p56-profile-open
.screen {
  display: none !important;
}

body.p56-profile-open
#screen-profile-v56 {
  display: block !important;
}

body.p56-profile-open
#screen-profile-v56
.p56-embedded-screen {
  display: block !important;
}


/* ==========================================================
   SIDEBAR PROFILE
   ========================================================== */

.p56-sidebar-profile {
  width: 100%;

  min-height: 76px;

  margin-top: 10px;

  padding: 10px 9px;

  display: grid;

  grid-template-columns:
    40px
    minmax(0, 1fr)
    18px;

  align-items: center;

  gap: 8px;

  border:
    1px solid
    rgba(55, 132, 208, .38);

  border-radius: 10px;

  color: white;

  background:
    linear-gradient(
      145deg,
      rgba(8, 31, 58, .98),
      rgba(4, 19, 36, .98)
    );

  cursor: pointer;

  text-align: left;

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .16);
}

.p56-sidebar-profile:hover,
.p56-sidebar-profile.active {
  border-color:
    rgba(65, 152, 239, .76);

  background:
    linear-gradient(
      145deg,
      rgba(11, 42, 77, .98),
      rgba(5, 25, 48, .98)
    );
}

.p56-sidebar-avatar {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border:
    2px solid
    #ffc125;

  border-radius: 50%;

  color: #fff;

  background:
    #061426;

  font-size: 11px;

  font-weight: 950;
}

.p56-sidebar-user {
  min-width: 0;
}

.p56-sidebar-user strong,
.p56-sidebar-user small,
.p56-sidebar-user b {
  display: block;
}

.p56-sidebar-user strong {
  overflow: hidden;

  color: #fff;

  font-size: 10px;

  font-weight: 900;

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

.p56-sidebar-user small {
  margin-top: 2px;

  overflow: hidden;

  color: #7d9aba;

  font-size: 7px;

  font-weight: 750;

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

.p56-sidebar-user b {
  width: max-content;

  margin-top: 5px;

  padding: 2px 7px;

  border-radius: 999px;

  color: #07121e;

  background:
    #ffc125;

  font-size: 6px;

  font-weight: 1000;
}

.p56-sidebar-chevron {
  color:
    #8aabc9;

  font-size:
    22px;
}


/* ==========================================================
   PROFILE SCREEN
   ========================================================== */

#screen-profile-v56 {
  display: none;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  padding: 0 !important;

  overflow: hidden !important;
}

.p56-root {
  --p56-bg: #041224;
  --p56-panel: #071b33;

  --p56-line:
    rgba(63, 128, 193, .28);

  --p56-line2:
    rgba(59, 148, 238, .58);

  --p56-text:
    #f6f8fd;

  --p56-muted:
    #809dbc;

  --p56-yellow:
    #ffba22;

  --p56-blue:
    #49a8ff;

  --p56-green:
    #39dda0;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  padding:
    17px 20px;

  display: grid;

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

  gap: 10px;

  overflow: hidden;

  color:
    var(--p56-text);

  background:
    radial-gradient(
      circle at 9% 0%,
      rgba(36, 101, 191, .12),
      transparent 25%
    ),
    radial-gradient(
      circle at 88% 5%,
      rgba(255, 187, 34, .05),
      transparent 24%
    );
}

.p56-root *,
.p56-root *::before,
.p56-root *::after {
  box-sizing: border-box;
}


/* ==========================================================
   HEADER
   ========================================================== */

.p56-header {
  min-height: 70px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 20px;
}

.p56-kicker {
  display: block;

  color:
    var(--p56-yellow);

  font-size:
    8px !important;

  font-weight:
    950 !important;

  letter-spacing:
    .11em;

  text-transform:
    uppercase;
}

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

  color: #fff;

  font-size:
    31px !important;

  line-height: 1;

  font-weight:
    950 !important;

  letter-spacing:
    -.045em;
}

.p56-header p {
  margin:
    5px 0 0;

  color:
    var(--p56-muted);

  font-size:
    9px !important;

  font-weight:
    720 !important;
}

.p56-header-user {
  min-width: 265px;

  padding: 8px 10px;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 9px;

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

  border-radius:
    10px;

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

.p56-header-avatar {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border:
    2px solid
    var(--p56-yellow);

  border-radius:
    50%;

  color: #fff;

  font-size:
    10px;

  font-weight:
    950;
}

.p56-header-user div {
  min-width: 0;
}

.p56-header-user strong,
.p56-header-user span {
  display: block;
}

.p56-header-user strong {
  color: #fff;

  font-size:
    9px;

  font-weight:
    950;
}

.p56-header-user div span {
  margin-top:
    2px;

  overflow: hidden;

  color:
    var(--p56-muted);

  font-size:
    7px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* ==========================================================
   TABS
   ========================================================== */

.p56-tabs {
  padding: 3px;

  display: flex;

  gap: 3px;

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

  border-radius:
    9px;

  background:
    rgba(4, 19, 37, .72);

  overflow-x: auto;

  scrollbar-width:
    none;
}

.p56-tabs::-webkit-scrollbar {
  display: none;
}

.p56-tabs button {
  min-width:
    128px;

  padding:
    0 12px;

  border: 0;

  border-radius:
    7px;

  color:
    #7d9bbb;

  background:
    transparent;

  cursor: pointer;

  font-size:
    9px !important;

  font-weight:
    900 !important;
}

.p56-tabs button.active {
  color: #fff;

  background:
    linear-gradient(
      180deg,
      rgba(25, 66, 106, .95),
      rgba(11, 39, 70, .96)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(68, 151, 232, .22);
}


/* ==========================================================
   CONTENT
   ========================================================== */

.p56-content {
  min-width: 0;
  min-height: 0;

  overflow: hidden;
}

.p56-panel {
  display: none;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow-y: auto;

  padding-right: 2px;

  scrollbar-width:
    thin;
}

.p56-panel.active {
  display: block;
}


/* ==========================================================
   CARDS
   ========================================================== */

.p56-card {
  position: relative;

  padding: 13px;

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

  border-radius:
    11px;

  background:
    linear-gradient(
      145deg,
      rgba(8, 31, 57, .95),
      rgba(5, 21, 40, .97)
    );

  box-shadow:
    0 13px 29px
    rgba(0, 0, 0, .15);
}

.p56-overview-top,
.p56-overview-main {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;
}

.p56-overview-main {
  margin-top:
    10px;
}


/* ==========================================================
   USER
   ========================================================== */

.p56-user-card {
  min-height:
    135px;

  display: flex;

  align-items: center;

  gap: 14px;
}

.p56-big-avatar {
  width: 78px;
  height: 78px;

  flex: 0 0 78px;

  display: grid;
  place-items: center;

  border:
    4px solid
    var(--p56-yellow);

  border-radius:
    50%;

  color:
    #fff;

  background:
    radial-gradient(
      circle at 35% 25%,
      #153a64,
      #061426 70%
    );

  font-size:
    24px;

  font-weight:
    950;
}

.p56-user-card h2,
.p56-plan-card h2 {
  margin:
    3px 0 2px;

  color:
    #fff;

  font-size:
    17px !important;

  font-weight:
    950 !important;
}

.p56-user-card p {
  margin:
    0 0 8px;

  color:
    #96aec7;

  font-size:
    8px !important;

  font-weight:
    750 !important;
}


/* ==========================================================
   STATUS
   ========================================================== */

.p56-green-status {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  color:
    #56e6aa;

  font-size:
    8px !important;

  font-weight:
    850 !important;
}

.p56-green-status i,
.p56-ok {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  display: inline-block;

  border-radius: 50%;

  background:
    var(--p56-green);

  box-shadow:
    0 0 9px
    rgba(57, 221, 160, .34);
}


/* ==========================================================
   PLAN
   ========================================================== */

.p56-plan-card {
  min-height:
    135px;

  display: grid;

  grid-template-columns:
    1fr auto;

  align-items: center;

  gap: 12px;
}

.p56-plan-right {
  min-width:
    180px;

  display: grid;

  gap: 9px;

  text-align: right;
}

.p56-plan-right > strong {
  color: #fff;

  font-size:
    17px !important;

  font-weight:
    950 !important;
}

.p56-plan-pill {
  width: max-content;

  min-height: 23px;

  padding:
    0 8px;

  display: inline-flex;

  align-items: center;

  justify-content:
    center;

  border:
    1px solid
    rgba(255, 187, 34, .32);

  border-radius:
    999px;

  color:
    var(--p56-yellow);

  background:
    rgba(255, 187, 34, .07);

  font-size:
    7px !important;

  font-weight:
    950 !important;
}

.p56-plan-pill.active {
  color:
    #5aeab0;

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

  background:
    rgba(57, 221, 160, .07);
}


/* ==========================================================
   BUTTON
   ========================================================== */

.p56-primary,
.p56-secondary {
  min-height:
    35px;

  padding:
    0 12px;

  border-radius:
    8px;

  cursor:
    pointer;

  font-size:
    8px !important;

  font-weight:
    950 !important;
}

.p56-primary {
  border:
    1px solid
    #ffd25b;

  color:
    #07111c;

  background:
    linear-gradient(
      135deg,
      #ffd35d,
      #ffae1d
    );
}

.p56-secondary {
  border:
    1px solid
    rgba(60, 149, 236, .40);

  color:
    #cfe3f7;

  background:
    rgba(6, 30, 55, .79);
}

.p56-secondary:hover {
  border-color:
    rgba(70, 165, 255, .72);
}

.p56-full {
  width:
    100%;
}


/* ==========================================================
   CARD CONTENT
   ========================================================== */

.p56-card-head {
  display: flex;

  align-items: flex-start;

  justify-content:
    space-between;

  gap: 10px;
}

.p56-card-head h3 {
  margin:
    3px 0 0;

  color: #fff;

  font-size:
    13px !important;

  font-weight:
    950 !important;
}

.p56-card-head p {
  margin:
    4px 0 10px;

  color:
    var(--p56-muted);

  font-size:
    8px !important;

  line-height:
    1.35;

  font-weight:
    720 !important;
}

.p56-icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(63, 139, 215, .25);

  border-radius:
    9px;

  color:
    var(--p56-blue);

  background:
    rgba(32, 99, 166, .10);
}

.p56-icon svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* ==========================================================
   SECURITY LIST
   ========================================================== */

.p56-status-list {
  margin:
    5px 0 11px;

  display: grid;

  gap: 7px;
}

.p56-status-list > div {
  display: flex;

  align-items: center;

  gap: 7px;

  color:
    #a8bed4;

  font-size:
    8px;

  font-weight:
    780;
}


/* ==========================================================
   ECOSYSTEM
   ========================================================== */

.p56-ecosystem {
  margin-top:
    10px;
}

.p56-product-strip {
  margin:
    9px 0;

  display: grid;

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

  gap: 7px;
}

.p56-product-strip > div {
  padding:
    7px;

  display: grid;

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

  grid-template-rows:
    auto auto;

  column-gap:
    7px;

  align-items: center;

  border:
    1px solid
    rgba(61, 128, 194, .16);

  border-radius:
    8px;

  background:
    rgba(4, 20, 39, .55);
}

.p56-product-strip
.p56-icon {
  width: 28px;
  height: 28px;

  grid-row:
    1 / 3;

  flex-basis:
    28px;
}

.p56-product-strip
.p56-icon svg {
  width: 14px;
  height: 14px;
}

.p56-product-strip strong {
  color: #dce9f6;

  font-size:
    8px;

  font-weight:
    900;
}

.p56-product-strip > div > span {
  color:
    #6684a4;

  font-size:
    6px;

  font-weight:
    800;
}

.p56-product-strip > div > span.active {
  color:
    #54e4a8;
}


/* ==========================================================
   SECURITY NOTE
   ========================================================== */

.p56-security-note {
  min-height:
    51px;

  margin-top:
    10px;

  padding:
    8px 11px;

  display: flex;

  align-items: center;

  gap: 8px;

  border:
    1px solid
    rgba(61, 128, 194, .18);

  border-radius:
    9px;

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

.p56-security-note
.p56-icon {
  width: 28px;
  height: 28px;

  flex-basis:
    28px;
}

.p56-security-note strong,
.p56-security-note span {
  display: block;
}

.p56-security-note strong {
  color:
    #dce8f4;

  font-size:
    8px;
}

.p56-security-note span {
  margin-top:
    2px;

  color:
    #708ba9;

  font-size:
    7px;
}


/* ==========================================================
   SECTION TITLE
   ========================================================== */

.p56-section-title {
  min-height:
    57px;
}

.p56-section-title h2 {
  margin:
    3px 0 0;

  color: #fff;

  font-size:
    18px !important;

  font-weight:
    950 !important;
}

.p56-section-title p {
  margin:
    4px 0 0;

  color:
    var(--p56-muted);

  font-size:
    8px !important;

  font-weight:
    720 !important;
}


/* ==========================================================
   SUBSCRIPTION
   ========================================================== */

.p56-subscription {
  max-width:
    900px;
}

.p56-sub-top {
  display: flex;

  align-items:
    flex-start;

  justify-content:
    space-between;
}

.p56-sub-top h2 {
  margin:
    4px 0 6px;

  color: #fff;

  font-size:
    21px !important;

  font-weight:
    950 !important;
}

.p56-info-grid {
  margin:
    12px 0;

  display: grid;

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

  gap: 7px;
}

.p56-info-grid > div {
  padding:
    10px;

  border:
    1px solid
    rgba(61, 128, 194, .16);

  border-radius:
    8px;

  background:
    rgba(4, 20, 39, .55);
}

.p56-info-grid span,
.p56-info-grid strong {
  display: block;
}

.p56-info-grid span {
  color:
    #6684a4;

  font-size:
    7px;

  font-weight:
    900;

  text-transform:
    uppercase;
}

.p56-info-grid strong {
  margin-top:
    3px;

  color:
    #d9e7f4;

  font-size:
    9px;

  font-weight:
    900;
}


/* ==========================================================
   THREE CARDS
   ========================================================== */

.p56-three {
  margin-bottom:
    10px;

  display: grid;

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

  gap:
    10px;
}

.p56-small-card {
  min-height:
    145px;
}

.p56-small-card h3 {
  margin:
    9px 0 4px;

  color: white;

  font-size:
    12px !important;

  font-weight:
    950 !important;
}

.p56-small-card p {
  margin: 0;

  color:
    var(--p56-muted);

  font-size:
    8px !important;

  line-height:
    1.4;
}


/* ==========================================================
   SECURITY
   ========================================================== */

.p56-security-grid {
  margin-bottom:
    10px;

  display: grid;

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

  gap:
    10px;
}

.p56-security-main {
  min-height:
    190px;

  display: flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}

.p56-security-main
.p56-icon {
  width: 62px;
  height: 62px;

  margin-bottom:
    9px;

  color:
    var(--p56-green);

  border-color:
    rgba(57, 221, 160, .24);

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

.p56-security-main
.p56-icon svg {
  width:
    30px;

  height:
    30px;
}

.p56-security-main strong {
  color: #fff;

  font-size:
    14px;
}

.p56-security-main > span {
  margin-top:
    3px;

  color:
    var(--p56-muted);

  font-size:
    8px;
}

.p56-security-row {
  min-height:
    54px;

  display: flex;

  align-items:
    center;

  gap:
    8px;

  border-bottom:
    1px solid
    rgba(62, 128, 190, .13);
}

.p56-security-row strong,
.p56-security-row span {
  display: block;
}

.p56-security-row strong {
  color:
    #dce9f5;

  font-size:
    9px;
}

.p56-security-row div span {
  margin-top:
    2px;

  color:
    #708caa;

  font-size:
    7px;
}


/* ==========================================================
   CONNECTIONS
   ========================================================== */

.p56-connections {
  display: grid;

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

  gap:
    8px;
}

.p56-connection {
  min-height:
    76px;

  padding:
    10px;

  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap:
    9px;

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

  border-radius:
    9px;

  background:
    linear-gradient(
      145deg,
      rgba(8, 31, 57, .92),
      rgba(5, 21, 40, .96)
    );
}

.p56-connection.current {
  border-color:
    rgba(57, 221, 160, .28);
}

.p56-connection strong,
.p56-connection span {
  display:
    block;
}

.p56-connection strong {
  color: #fff;

  font-size:
    9px;
}

.p56-connection span {
  margin-top:
    3px;

  color:
    #718eac;

  font-size:
    7px;
}

.p56-connection b {
  color:
    #55e6a9;

  font-size:
    7px;
}

.p56-connection button {
  min-height:
    29px;

  padding:
    0 9px;

  border:
    1px solid
    rgba(61, 145, 226, .34);

  border-radius:
    7px;

  color:
    #bdd8f0;

  background:
    rgba(5, 28, 52, .78);

  cursor: pointer;

  font-size:
    7px;

  font-weight:
    900;
}


/* ==========================================================
   EMBED REAL ACTIVITY + SETTINGS
   ========================================================== */

.p56-embed-panel {
  overflow: hidden;
}

.p56-embed-slot {
  width: 100%;

  height:
    calc(100% - 60px);

  min-width: 0;
  min-height: 0;

  overflow:
    auto;
}

#screen-profile-v56
.p56-embedded-screen {
  position:
    relative !important;

  inset:
    auto !important;

  top:
    auto !important;

  left:
    auto !important;

  right:
    auto !important;

  bottom:
    auto !important;

  display:
    block !important;

  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  height:
    100% !important;

  min-height:
    0 !important;

  margin:
    0 !important;

  overflow:
    auto !important;
}


/* Fix old Settings layout when embedded */

#screen-profile-v56
.p56-embedded-settings > * {
  max-width:
    100% !important;
}

#screen-profile-v56
.p56-embedded-settings {
  padding:
    0 !important;
}


/* Hide duplicate old screen-level page title areas where possible */

#screen-profile-v56
.p56-embedded-settings
.settings-page-title,

#screen-profile-v56
.p56-embedded-settings
.settings-hero,

#screen-profile-v56
.p56-embedded-activity
.activity-page-title {
  display:
    none !important;
}


/* ==========================================================
   EMPTY
   ========================================================== */

.p56-empty {
  min-height:
    180px;

  display: grid;

  place-items:
    center;

  border:
    1px dashed
    rgba(60, 137, 210, .28);

  border-radius:
    10px;

  color:
    #708dab;

  font-size:
    9px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1100px) {

  .p56-root {
    padding:
      14px;
  }

  .p56-product-strip {
    grid-template-columns:
      repeat(3, 1fr);
  }

}


@media(max-width:800px) {

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

  .p56-root {
    height:
      auto;

    min-height:
      100%;

    overflow:
      visible;
  }

  .p56-content {
    overflow:
      visible;
  }

  .p56-panel {
    height:
      auto;

    overflow:
      visible;
  }

  .p56-overview-top,
  .p56-overview-main,
  .p56-three,
  .p56-security-grid,
  .p56-connections,
  .p56-info-grid {
    grid-template-columns:
      1fr;
  }

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

    flex-direction:
      column;
  }

  .p56-header-user {
    width:
      100%;
  }

  .p56-plan-card {
    grid-template-columns:
      1fr;
  }

  .p56-plan-right {
    text-align:
      left;
  }

  .p56-product-strip {
    grid-template-columns:
      1fr 1fr;
  }

  .p56-embed-slot {
    height:
      auto;

    min-height:
      600px;
  }

}